/**
	* Frontend styles for ALMGR assets
	*
	* Loaded only on asset archive, single, and pages with asset shortcodes.
	*
	* @package AssetLendingManager
	*/

	/* ========================================================================
	DESIGN TOKENS — Semantic color variables shared across all ALMGR stylesheets.
	Define colors here once; use var(--almgr-...) everywhere else.
	======================================================================== */

	:root {
		/* Asset state colors (almgr_state taxonomy).
		 * All combinations verified WCAG AA (contrast ≥ 4.5:1 for normal text).
		 * Use https://webaim.org/resources/contrastchecker/ to verify before changing. */
		--almgr-state-available-bg:         #d4edda;  /* contrast vs #155724: ~7.2:1 */
		--almgr-state-available-text:       #155724;
		--almgr-state-on-loan-bg:           #1e7e34;  /* contrast vs #fff: ~5.1:1 */
		--almgr-state-on-loan-text:         #ffffff;
		--almgr-state-maintenance-bg:       #fff3cd;  /* contrast vs #7c5600: ~5.8:1 */
		--almgr-state-maintenance-text:     #7c5600;
		--almgr-state-retired-bg:           #5a6268;  /* chosen over #6c757d: passes WCAG AA at 4.6:1, the lighter shade fails at 3.9:1 */
		--almgr-state-retired-text:         #ffffff;

		/* Loan history status colors.
		 * Light tinted backgrounds with dark text — all WCAG AA compliant. */
		--almgr-status-pending-bg:          #e8e8e8;  /* contrast vs #3c3c3c: ~7.0:1 */
		--almgr-status-pending-text:        #3c3c3c;
		--almgr-status-approved-bg:         #d6f1df;  /* contrast vs #155724: ~6.8:1 */
		--almgr-status-approved-text:       #155724;
		--almgr-status-rejected-bg:         #f9dce0;  /* contrast vs #721c24: ~6.1:1 */
		--almgr-status-rejected-text:       #721c24;
		--almgr-status-canceled-bg:         #fff1ce;  /* contrast vs #7c5600: ~5.8:1 */
		--almgr-status-canceled-text:       #7c5600;
		--almgr-status-direct-assign-bg:    #d6e6ff;  /* contrast vs #084298: ~7.5:1 */
		--almgr-status-direct-assign-text:  #084298;
		--almgr-status-to-maintenance-bg:   #fff3cd;  /* same amber as maintenance state */
		--almgr-status-to-maintenance-text: #7c5600;
		--almgr-status-to-retired-bg:       #dee2e6;  /* contrast vs #343a40: ~6.5:1 */
		--almgr-status-to-retired-text:     #343a40;
		--almgr-status-to-available-bg:     #d6f1df;  /* same green as approved — restoration is positive */
		--almgr-status-to-available-text:   #155724;
	}

	/* ========================================================================
		COMMON STYLES - Shared across all asset views
		======================================================================== */

	/* Container */
	.almgr-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
	}

	/* Archive header */
	.almgr-archive-header {
		margin-bottom: 30px;
		border-bottom: 2px solid #0073aa;
		padding-bottom: 15px;
	}

	.almgr-archive-title {
		margin: 0;
		color: #23282d;
		font-size: 2em;
	}

	/* Asset title (used in both list and view) */
	.almgr-asset-title {
		font-size: 1.2em;
		margin: 0;
		color: #23282d;
		transition: color 0.3s ease;
		line-height: 1.3;
	}

	/* Asset thumbnail - base styles */
	.almgr-asset-thumbnail {
		flex-shrink: 0;
		width: 100px;
		height: 100px;
		overflow: hidden;
		border-radius: 4px;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.almgr-asset-thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.3s ease;
	}

	.almgr-asset-default-thumbnail {
		opacity: 0.6;
		object-fit: contain;
		padding: 10px;
	}

	/* Character counter for request form */
	.almgr-char-count {
		margin-top: 6px;
		font-size: 13px;
		color: #6c757d;
		text-align: right;
	}

	/* Asset taxonomies - base styles */
	.almgr-asset-taxonomies {
		margin-top: 8px;
		font-size: 0.85em;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.almgr-asset-taxonomy {
		margin: 0;
		padding: 0;
		white-space: nowrap;
	}

	.almgr-tax-label {
		font-weight: 600;
		color: #555;
		margin-right: 5px;
	}

	.almgr-tax-value {
		color: #0073aa;
	}

	/* Asset state badges (almgr_state) */
	.almgr-availability {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 14px;
		font-size: 0.75em;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
	}

	/* available → green */
	.almgr-state-available {
		background: var(--almgr-state-available-bg);
		color: var(--almgr-state-available-text);
	}

	/* on-loan → dark green */
	.almgr-state-on-loan {
		background: var(--almgr-state-on-loan-bg);
		color: var(--almgr-state-on-loan-text);
	}

	/* maintenance → amber (temporary/warning, not danger) */
	.almgr-state-maintenance {
		background: var(--almgr-state-maintenance-bg);
		color: var(--almgr-state-maintenance-text);
	}

	/* retired → dark gray (WCAG AA contrast ≥ 4.5:1) */
	.almgr-state-retired {
		background: var(--almgr-state-retired-bg);
		color: var(--almgr-state-retired-text);
	}

	/* No results message */
	.almgr-no-results {
		text-align: center;
		padding: 40px 20px;
		color: #666;
		font-size: 1.1em;
	}

	/* Error message */
	.almgr-error {
		background: #ffebee;
		border-left: 4px solid #c62828;
		padding: 15px;
		color: #c62828;
		border-radius: 4px;
	}

	/* Shared button palette for asset list, asset view and asset history page */
	#almgr_asset_search_form,
	.almgr-asset-view,
	.almgr-asset-history-page {
		--almgr-btn-primary-bg: #0073aa;
		--almgr-btn-primary-hover-bg: #006a9b;
		--almgr-btn-primary-border: #243447;
		--almgr-btn-primary-focus: rgba(0, 89, 179, 0.22);
		--almgr-btn-secondary-bg: #f2f5f7;
		--almgr-btn-secondary-hover-bg: #e6ecf1;
		--almgr-btn-secondary-border: #c7d3dd;
		--almgr-btn-secondary-text: #243447;
		--almgr-btn-success-bg: #2e7d32;
		--almgr-btn-success-hover-bg: #1b5e20;
		--almgr-btn-success-border: #1b5e20;
		--almgr-btn-warning-bg: #e65100;
		--almgr-btn-warning-hover-bg: #bf360c;
		--almgr-btn-warning-border: #bf360c;
		--almgr-btn-danger-bg: #c62828;
		--almgr-btn-danger-hover-bg: #b71c1c;
		--almgr-btn-danger-border: #b71c1c;
	}

	.almgr-asset-view__back {
		margin-top: 2.5rem;
	}

	/* Search form - used in asset list and asset history page */
	.almgr-search-submit-btn,
	#almgr_asset_search_form .almgr-form-actions button[type="submit"],
	#almgr_asset_history_form .almgr-form-actions button[type="submit"],
	.almgr-asset-view .almgr-button {
		padding: 10px 16px;
		font-size: 0.95rem;
		font-weight: 600;
		line-height: 1.2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		text-decoration: none;
		border-radius: 8px;
		transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	}

	.almgr-search-submit-btn,
	#almgr_asset_search_form .almgr-form-actions button[type="submit"],
	#almgr_asset_history_form .almgr-form-actions button[type="submit"] {
		width: 100%;
		margin-top: 0;
		min-height: 44px;
		box-sizing: border-box;
	}

	.almgr-search-submit-btn,
	#almgr_asset_search_form .almgr-form-actions button[type="submit"],
	#almgr_asset_history_form .almgr-form-actions button[type="submit"],
	.almgr-asset-view .almgr-button,
	.almgr-asset-view .almgr-button--primary {
		background: var(--almgr-btn-primary-bg);
		color: #fff;
		border: 1px solid #2f4254;
	}

	.almgr-search-submit-btn:hover,
	#almgr_asset_search_form .almgr-form-actions button[type="submit"]:hover,
	#almgr_asset_history_form .almgr-form-actions button[type="submit"]:hover,
	.almgr-asset-view .almgr-button:hover,
	.almgr-asset-view .almgr-button--primary:hover {
		background: var(--almgr-btn-primary-hover-bg);
		border-color: var(--almgr-btn-primary-border);
	}

	.almgr-search-submit-btn:focus-visible,
	#almgr_asset_search_form .almgr-form-actions button[type="submit"]:focus-visible,
	#almgr_asset_history_form .almgr-form-actions button[type="submit"]:focus-visible,
	.almgr-asset-view .almgr-button:focus-visible,
	.almgr-asset-view .almgr-button--primary:focus-visible {
		outline: 2px solid var(--almgr-btn-primary-focus);
		outline-offset: 1px;
	}

	.almgr-asset-view .almgr-button--small {
		padding: 0.4rem 0.72rem;
		font-size: 1em;
		border-radius: 6px;
	}

	.almgr-asset-view .almgr-button--approve {
		background: var(--almgr-btn-success-bg);
		border-color: var(--almgr-btn-success-border);
		color: #fff;
	}

	.almgr-asset-view .almgr-button--approve:hover {
		background: var(--almgr-btn-success-hover-bg);
		border-color: var(--almgr-btn-primary-border);
	}

	.almgr-asset-view .almgr-button--reject {
		background: var(--almgr-btn-danger-bg);
		border-color: var(--almgr-btn-danger-border);
		color: #fff;
	}

	.almgr-asset-view .almgr-button--reject:hover {
		background: var(--almgr-btn-danger-hover-bg);
		border-color: var(--almgr-btn-danger-border);
	}

	.almgr-asset-view .almgr-button--warning {
		background: var(--almgr-btn-warning-bg);
		border-color: var(--almgr-btn-warning-border);
		color: #fff;
	}

	.almgr-asset-view .almgr-button--warning:hover {
		background: var(--almgr-btn-warning-hover-bg);
		border-color: var(--almgr-btn-warning-border);
	}

	.almgr-asset-view .almgr-button--danger {
		background: var(--almgr-btn-danger-bg);
		border-color: var(--almgr-btn-danger-border);
		color: #fff;
	}

	.almgr-asset-view .almgr-button--danger:hover {
		background: var(--almgr-btn-danger-hover-bg);
		border-color: var(--almgr-btn-danger-border);
	}

	/* Force asset-view button colors even if theme button styles override defaults. */
	.almgr-asset-view button.almgr-button,
	.almgr-asset-view .almgr-button.almgr-button--primary {
		background: var(--almgr-btn-primary-bg) !important;
		border: 1px solid #2f4254 !important;
		color: #fff !important;
	}

	.almgr-asset-view button.almgr-button:hover,
	.almgr-asset-view .almgr-button.almgr-button--primary:hover {
		background: var(--almgr-btn-primary-hover-bg) !important;
		border: 1px solid var(--almgr-btn-primary-border) !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--approve {
		background: var(--almgr-btn-success-bg) !important;
		border-color: var(--almgr-btn-success-border) !important;
		color: #fff !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--approve:hover {
		background: var(--almgr-btn-success-hover-bg) !important;
		border-color: var(--almgr-btn-success-border) !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--reject {
		background: var(--almgr-btn-danger-bg) !important;
		border-color: var(--almgr-btn-danger-border) !important;
		color: #fff !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--reject:hover {
		background: var(--almgr-btn-danger-hover-bg) !important;
		border-color: var(--almgr-btn-danger-border) !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--warning {
		background: var(--almgr-btn-warning-bg) !important;
		border-color: var(--almgr-btn-warning-border) !important;
		color: #fff !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--warning:hover {
		background: var(--almgr-btn-warning-hover-bg) !important;
		border-color: var(--almgr-btn-warning-border) !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--danger {
		background: var(--almgr-btn-danger-bg) !important;
		border-color: var(--almgr-btn-danger-border) !important;
		color: #fff !important;
	}

	.almgr-asset-view .almgr-button.almgr-button--danger:hover {
		background: var(--almgr-btn-danger-hover-bg) !important;
		border-color: var(--almgr-btn-danger-border) !important;
	}

	.almgr-asset-view .almgr-button:disabled {
		opacity: 0.65;
		cursor: not-allowed;
	}

	#almgr_asset_search_form,
	#almgr_asset_history_form {
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	#almgr_asset_search_form {
		margin-bottom: 1em;
	}

	.almgr-asset-search-form {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* Force filters to appear below search row */
	.almgr-filters-collapsible {
		width: 100%;
	}

	/* Search row: input + Scan QR button on the same line */
	.almgr-search-row {
		display: flex;
		align-items: stretch;
		gap: 8px;
	}

	/* wrapper per input + icona + dropdown */
	.almgr-search-input-wrap {
		position: relative;
		flex: 1;
		min-width: 0;
	}

	.almgr-asset-search-form input[name="almgr_search"] {
		width: 100%;
		padding: 8px 8px 8px 34px; /* spazio per lente/spinner */
		font-size: 1em;
		box-sizing: border-box;
		border: 1px solid #c7d3dd;
		border-radius: 8px;
		background: #fff;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.almgr-asset-search-form input[name="almgr_search"]:focus {
		border-color: #0059b3;
		outline: 2px solid rgba(0, 89, 179, 0.22);
		outline-offset: 1px;
		box-shadow: none;
	}

	.almgr-asset-search-form button {
		padding: 8px 16px;
		font-size: 1em;
		cursor: pointer;
	}

	/* Lens + loading spinner */
	#almgr_asset_search_form .almgr-search-icon {
		position: absolute;
		left: 10px;
		top: 50%;
		width: 16px;
		height: 16px;
		display: inline-block;
		pointer-events: none;
		z-index: 2;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transform: translateY(-50%);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	}

	#almgr_asset_search_form.almgr-autocomplete-loading .almgr-search-icon {
		background-image: none;
		border: 2px solid #666;
		border-top-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		animation: almSpin 0.8s linear infinite;
	}

	@keyframes almSpin {
		to { transform: translateY(-50%) rotate(360deg); }
	}

	/* Utility classes */
	.almgr-link {
		color: #0073aa;
		text-decoration: none;
	}

	.almgr-link:hover {
		text-decoration: underline;
	}

	.almgr-muted {
		color: #666;
		margin: 8px 0 0 0;
	}

	.almgr-history-more {
		margin-top: 1rem;
	}

	/* ========================================================================
		NOTICE COMPONENT — almgr-notice, used in asset detail view.
		All color combinations verified WCAG AA (contrast ≥ 4.5:1).
		======================================================================== */

	.almgr-notice {
		padding: 12px 16px;
		border-left: 4px solid;
		border-radius: 4px;
		margin: 16px 0;
		font-size: 0.95em;
		line-height: 1.5;
	}

	/* Info — blue tint: #084298 on #d6e6ff → contrast ~7.5:1 */
	.almgr-notice--info {
		background: #d6e6ff;
		border-color: #084298;
		color: #084298;
	}

	.almgr-notice--info .almgr-link {
		color: #05347e;
		font-weight: 600;
	}

	/* Warning — amber tint: #7c5600 on #fff3cd → contrast ~5.8:1 */
	.almgr-notice--warning {
		background: #fff3cd;
		border-color: #e6a817;
		color: #7c5600;
	}

	/* ========================================================================
		INLINE FORM RESPONSE — almgr-response-message, same palette as
		almgr-global-message so success/error look consistent site-wide.
		======================================================================== */

	.almgr-response-message {
		padding: 12px 16px;
		border-left: 4px solid;
		border-radius: 4px;
		margin-top: 16px;
		font-size: 0.95em;
		line-height: 1.5;
		font-weight: 500;
	}

	/* Success — green: #155724 on #d4edda → contrast ~7.4:1 */
	.almgr-response-message--success {
		background: #d4edda;
		border-color: #28a745;
		color: #155724;
	}

	/* Error — red: #721c24 on #f8d7da → contrast ~5.1:1 */
	.almgr-response-message--error {
		background: #f8d7da;
		border-color: #dc3545;
		color: #721c24;
	}

	/* Kit footer strip — shown below each component card that belongs to a kit */
	.almgr-card-kit-footer {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px;
		padding: 6px 0 0;
		margin-top: 8px;
		border-top: 1px solid #e0d7f5;
		font-size: 0.85em;
	}

	/* "Kit:" label */
	.almgr-card-kit-label {
		color: #5b3ea6;
		font-weight: 600;
		flex-shrink: 0;
	}

	/* Clickable kit name — #5b3ea6 on #fff → contrast ~5.8:1 (WCAG AA) */
	.almgr-card-kit-link {
		color: #5b3ea6;
		text-decoration: underline;
		font-style: italic;
	}

	.almgr-card-kit-link:hover,
	.almgr-card-kit-link:focus {
		color: #3e2875;
		text-decoration: none;
	}

	.almgr-card-kit-link:focus-visible {
		outline: 2px solid #5b3ea6;
		outline-offset: 2px;
		border-radius: 2px;
	}

	/* ========================================================================
		ASSET VIEW STYLES - Single asset detail page (asset-view.php)
		======================================================================== */


	.almgr-asset-detail {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 30px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.almgr-asset-header {
		margin-bottom: 25px;
		border-bottom: 2px solid #0073aa;
		padding-bottom: 20px;
	}

	.almgr-asset-detail .almgr-asset-title {
		font-size: 2em;
		margin: 0 0 20px 0;
	}

	.almgr-asset-detail .almgr-asset-thumbnail {
		max-width: 400px;
		margin: 0 auto;
	}

	.almgr-asset-detail .almgr-asset-taxonomies {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		margin: 20px 0;
		padding: 15px;
		background: #f9f9f9;
		border-radius: 4px;
	}

	.almgr-asset-detail .almgr-asset-taxonomy {
		flex: 1 1 auto;
		min-width: 200px;
	}

	.almgr-asset-content {
		margin-top: 25px;
		padding: 0 12px;
		line-height: 1.6;
		color: #444;
	}

	.almgr-asset-content p {
		margin-bottom: 15px;
	}

	/* Asset view (shortcode) layout */
	.almgr-asset-view {
		container-type: inline-size;
		container-name: almgr-view;
	}

	.almgr-asset-view__title {
		margin-bottom: 18px;
	}

	.almgr-asset-view__hero {
		display: flex;
		gap: 20px;
		align-items: flex-start;
		flex-wrap: nowrap;
		margin-bottom: 20px;
	}

	.almgr-asset-view__media {
		flex: 1 1 auto;
		min-width: 0;
	}

	.almgr-asset-view__taxbox {
		flex: 0 0 300px;
		max-width: 300px;
		background: #f9f9f9;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		padding: 16px;
	}

	.almgr-asset-section-title {
		margin: 0 0 12px 0;
		font-size: 1.1em;
	}

	.almgr-asset-thumbnail--large {
		width: 100%;
		height: auto;
		max-width: none;
		margin: 0;
	}

	.almgr-asset-thumbnail--large img {
		width: 100%;
		height: auto;
		max-height: 520px;
		object-fit: contain;
		border-radius: 8px;
		display: block;
	}

	.almgr-asset-taxonomies--boxed {
		flex-direction: column;
		gap: 0;
	}

	.almgr-asset-tax-row {
		display: flex;
		align-items: baseline;
		gap: 8px;
		padding: 6px 0;
		border-bottom: 1px solid #eee;
	}

	.almgr-asset-tax-row:last-child {
		border-bottom: none;
	}

	.almgr-asset-tax-row .almgr-tax-label {
		flex: 0 0 90px;
	}

	.almgr-asset-tax-row .almgr-tax-value {
		flex: 1;
		color: #0073aa;
	}

	/* Collapsible sections (details/summary) */
	.almgr-asset-view .almgr-collapsible {
		margin-top: 18px;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		background: #fff;
		overflow: hidden;
	}

	.almgr-asset-view .almgr-collapsible__summary {
		cursor: pointer;
		padding: 14px 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		background: #f7f7f7;
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 1.3;
	}

	.almgr-asset-view .almgr-collapsible__summary::-webkit-details-marker {
		display: none;
	}

	.almgr-asset-view .almgr-collapsible[open] .almgr-collapsible__summary {
		border-bottom: 1px solid #e6e6e6;
	}

	.almgr-asset-view .almgr-collapsible__title {
		font-size: 1.2rem;
	}

	.almgr-asset-view .almgr-collapsible__body {
		padding: 14px 16px;
		font-size: 0.92rem;
		line-height: 1.45;
	}

	.almgr-asset-view .almgr-collapsible__hint {
		font-weight: 400;
		font-size: 0.8em;
		color: #666;
	}

	.almgr-asset-view .almgr-asset-acf-label {
		font-size: 1em;
	}

	.almgr-asset-view .almgr-asset-acf-value {
		font-size: 0.92rem;
		line-height: 1.45;
	}

	.almgr-asset-view .almgr-loan-form label {
		font-size: 1em;
		font-weight: 600;
	}

	#almgr-contact-form .almgr-contact-info {
		margin-bottom: 1.25rem;
	}

	#almgr-contact-form label {
		display: block;
		margin-bottom: 0.5rem;
	}

	.almgr-asset-view .almgr-loan-form textarea,
	.almgr-asset-view .almgr-loan-form input[type="text"] {
		font-size: 0.92rem;
		line-height: 1.4;
		border: 1px solid #c7d3dd;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.almgr-asset-view__direct-assign .almgr-form-field + .almgr-form-field {
		margin-top: 0.6rem;
	}

	.almgr-asset-view .almgr-char-count {
		font-size: 1em;
	}

	.almgr-asset-view .almgr-muted {
		font-size: 1em;
	}

	.almgr-asset-acf-list {
		margin: 0;
	}

	.almgr-asset-acf-row {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.almgr-asset-acf-row:last-child {
		border-bottom: none;
	}

	.almgr-asset-acf-label {
		font-weight: 700;
		margin: 0;
	}

	.almgr-asset-acf-value {
		margin: 0;
		color: #333;
	}

	.almgr-asset-components {
		margin: 0;
		padding-left: 18px;
	}

	/* Quick meta (Manufacturer/Model) in taxbox */
	.almgr-asset-quick-meta {
		padding: 10px 12px;
		background: #fff;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		margin: 0 0 12px 0;
		display: grid;
		gap: 8px;
	}

	.almgr-asset-quick-row {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	/* Badge state inside the taxbox */
	.almgr-asset-view__taxbox .almgr-availability {
		margin-left: 8px;
		vertical-align: middle;
	}

	/* ========================================================================
		ASSET LIST STYLES - Archive and list views (asset-list.php)
		======================================================================== */

	/* Asset list container */
	.almgr-asset-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin: 20px 0;
	}

	/* Asset card — column layout: main link on top, optional kit footer below */
	.almgr-asset-card {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 15px;
		transition: all 0.3s ease;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
	}

	.almgr-asset-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		transform: translateX(4px);
	}

	.almgr-asset-link {
		text-decoration: none;
		color: inherit;
		display: flex;
		align-items: flex-start;
		gap: 15px;
		flex: 1;
		min-width: 0;
	}

	.almgr-asset-link:hover .almgr-asset-title {
		color: #0073aa;
	}

	.almgr-asset-card:hover .almgr-asset-thumbnail img {
		transform: scale(1.1);
	}

	/* Asset content area - right side */
	.almgr-asset-content-wrapper {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	/* Title row: asset title + state badge side by side */
	.almgr-card-title-row {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.almgr-card-title-row .almgr-asset-title {
		flex: 1 1 auto;
		min-width: 0;
	}

	.almgr-card-title-row .almgr-availability {
		flex-shrink: 0;
	}

	/* ========================================================================
		RESPONSIVE STYLES
		======================================================================== */

	/* Asset view: single-column when the plugin wrapper is narrower than 580px.
	 * Uses container queries so the layout adapts to the actual available space,
	 * not the viewport — works correctly on both classic and block themes. */
	@container almgr-view (max-width: 580px) {
		.almgr-asset-view__hero {
			flex-direction: column;
		}

		.almgr-asset-view__taxbox {
			flex: 1 1 100%;
			max-width: none;
		}
	}

	/* Tablet e schermi medi (768px - 1024px) */
	@media (max-width: 1024px) {
		.almgr-asset-taxonomies {
			gap: 8px;
			font-size: 0.8em;
		}

		.almgr-asset-taxonomy {
			min-width: 45%;
		}
	}

	/* Smartphone e schermi piccoli (fino a 768px) */
	@media (max-width: 768px) {
		/* Common styles responsive */
		.almgr-container {
			padding: 15px;
		}

		/* Asset list responsive */
		.almgr-asset-card {
			flex-direction: column;
			align-items: center;
			padding: 15px;
		}

		.almgr-asset-link {
			flex-direction: column;
			align-items: center;
			text-align: center;
			width: 100%;
		}

		.almgr-asset-thumbnail {
			width: 150px;
			height: 150px;
			margin-bottom: 12px;
		}

		.almgr-asset-content-wrapper {
			align-items: center;
			width: 100%;
		}

		.almgr-asset-title {
			font-size: 1.1em;
			text-align: center;
		}

		/* Title row centered on mobile, badge wraps below long titles */
		.almgr-card-title-row {
			justify-content: center;
		}

		/* Taxonomies: una colonna su mobile */
		.almgr-asset-taxonomies {
			flex-direction: column;
			gap: 8px;
			width: 100%;
			justify-content: flex-start;
		}

		.almgr-asset-taxonomy {
			width: 100%;
			text-align: left;
			padding: 6px 0;
			border-bottom: 1px solid #f0f0f0;
		}

		.almgr-asset-taxonomy:last-child {
			border-bottom: none;
		}

		/* Search form responsive */
		.almgr-search-input-wrap {
			width: 100%;
		}

		.almgr-asset-search-form button {
			width: 100%;
			padding: 10px 16px;
		}

		/* Asset view responsive */
		.almgr-asset-detail {
			padding: 20px;
		}

		.almgr-asset-detail .almgr-asset-title {
			font-size: 1.5em;
		}

		.almgr-asset-detail .almgr-asset-taxonomies {
			flex-direction: column;
			gap: 10px;
		}

		.almgr-asset-detail .almgr-asset-taxonomy {
			min-width: 100%;
		}

		.almgr-asset-view__taxbox {
			flex: 1 1 100%;
			max-width: none;
		}

		.almgr-asset-view .almgr-collapsible__summary,
		.almgr-asset-view .almgr-collapsible__title {
			font-size: 1.1rem;
		}

		.almgr-asset-acf-row {
			grid-template-columns: 1fr;
		}
	}

	/* Schermi molto piccoli (fino a 480px) */
	@media (max-width: 480px) {
		.almgr-container {
			padding: 10px;
		}

		.almgr-asset-card {
			padding: 12px;
			gap: 10px;
		}

		.almgr-asset-thumbnail {
			width: 120px;
			height: 120px;
		}

		.almgr-asset-title {
			font-size: 1em;
		}

		.almgr-asset-taxonomies {
			font-size: 0.85em;
			gap: 6px;
		}

		.almgr-tax-label {
			display: block;
			margin-bottom: 2px;
		}

		.almgr-archive-title {
			font-size: 1.5em;
		}
	}

	/* Landscape mode per smartphone */
	@media (max-width: 768px) and (orientation: landscape) {
		.almgr-asset-card {
			flex-direction: column;
		}

		.almgr-asset-link {
			flex-direction: row;
			text-align: left;
		}

		.almgr-asset-thumbnail {
			width: 100px;
			height: 100px;
			margin-bottom: 0;
			margin-right: 15px;
		}

		.almgr-asset-content-wrapper {
			align-items: flex-start;
		}

		.almgr-asset-title {
			text-align: left;
		}

		.almgr-asset-taxonomies {
			flex-direction: row;
			flex-wrap: wrap;
		}

		.almgr-asset-taxonomy {
			width: auto;
			min-width: 45%;
			border-bottom: none;
		}
	}

	/* Collapsible filters container */
	.almgr-filters-collapsible {
		margin-top: 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: #f9f9f9;
	}

	/* Toggle button (summary) */
	.almgr-filters-toggle {
		cursor: pointer;
		padding: 10px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		color: #23282d;
		user-select: none;
		list-style: none;
	}

	.almgr-filters-toggle::-webkit-details-marker {
		display: none;
	}

	.almgr-filters-toggle::after {
		content: '▼';
		font-size: 0.8em;
		transition: transform 0.3s ease;
		color: #666;
	}

	.almgr-filters-collapsible[open] .almgr-filters-toggle::after {
		transform: rotate(180deg);
	}

	.almgr-filters-toggle:hover {
		background: #f0f0f0;
	}

	/* Active filters badge */
	.almgr-active-filters-badge {
		display: inline-block;
		background: #0073aa;
		color: #fff;
		padding: 2px 8px;
		border-radius: 10px;
		font-size: 0.85em;
		font-weight: 700;
		margin-left: 8px;
	}

	/* Filters content */
	.almgr-filters-content {
		padding: 15px;
		background: #fff;
		border-top: 1px solid #ddd;
	}

	/* Grid layout for filters (2x2) */
	.almgr-filters-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.almgr-filter-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	/* Individual filter field */
	.almgr-filter-field {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.almgr-filter-field label {
		font-weight: 600;
		font-size: 0.9em;
		color: #555;
	}

	.almgr-filter-field select {
		padding: 6px 8px;
		border: 1px solid #c7d3dd;
		border-radius: 4px;
		font-size: 0.95em;
		background: #fff;
		cursor: pointer;
	}

	#almgr_asset_search_form .almgr-filter-field input[type="text"] {
		border: 1px solid #c7d3dd;
	}

	.almgr-asset-history-page {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.almgr-asset-history-page__header {
		margin-bottom: 24px;
	}

	.almgr-asset-history-page__asset-label {
		margin: 0 0 16px;
		font-size: 1.1rem;
		font-weight: 600;
	}

	.almgr-asset-history-page__asset-link {
		text-decoration: none;
	}

	.almgr-asset-history-page__asset-link:hover {
		text-decoration: underline;
	}

	.almgr-asset-history-filters,
	.almgr-asset-history-results {
		width: 100%;
		box-sizing: border-box;
	}

	.almgr-asset-history-results {
		overflow-x: auto;
		font-size: 0.875rem;
	}

	.almgr-asset-history-results .almgr-status-badge {
		font-size: 0.72rem;
	}

	.almgr-asset-history-filters {
		margin-bottom: 24px;
		padding: 18px;
		background: #f8fbfd;
		border: 1px solid #d9e1e6;
		border-radius: 8px;
	}

	#almgr_asset_history_form .almgr-search-input-wrap input[type="search"] {
		width: 100%;
		padding: 8px 8px 8px 34px;
		font-size: 1em;
		box-sizing: border-box;
		border: 1px solid #c7d3dd;
		border-radius: 8px;
		background: #fff;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	#almgr_asset_history_form .almgr-search-input-wrap input[type="search"]:focus {
		border-color: #0059b3;
		outline: 2px solid rgba(0, 89, 179, 0.22);
		outline-offset: 1px;
		box-shadow: none;
	}

	.almgr-history-per-page-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 10px;
		font-size: 0.95em;
	}

	.almgr-filter-field select:focus {
		outline: none;
		border-color: #0073aa;
		box-shadow: 0 0 0 1px #0073aa;
	}

	/* Form actions row (Reset Filters + Search button side by side). */
	.almgr-form-actions {
		display: flex;
		gap: 12px;
	}

	.almgr-form-actions .almgr-reset-filters,
	.almgr-form-actions button {
		flex: 1;
	}

	#almgr_asset_search_form .almgr-form-actions .almgr-reset-filters {
		min-height: 44px;
		border-radius: 8px;
	}

	.almgr-reset-filters {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 16px;
		background: var(--almgr-btn-secondary-bg);
		color: var(--almgr-btn-secondary-text);
		text-decoration: none;
		border: 1px solid var(--almgr-btn-secondary-border);
		border-radius: 8px;
		font-size: 0.95rem;
		font-weight: 600;
		line-height: 1.2;
		transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
		box-sizing: border-box;
	}

	.almgr-reset-filters:hover {
		background: var(--almgr-btn-secondary-hover-bg);
		border-color: var(--almgr-btn-secondary-border);
		color: var(--almgr-btn-secondary-text);
	}

	.almgr-reset-filters:focus-visible {
		outline: 2px solid var(--almgr-btn-primary-focus);
		outline-offset: 1px;
	}

	/* ========================================================================
		PAGINATION
		======================================================================== */

	.almgr-pagination {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px;
		margin-top: 24px;
	}

	.almgr-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: #fff;
		color: #0073aa;
		text-decoration: none;
		font-size: 0.95em;
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.almgr-pagination .page-numbers:hover {
		background: #f0f0f0;
		border-color: #0073aa;
	}

	.almgr-pagination .page-numbers.current {
		background: #0073aa;
		border-color: #0073aa;
		color: #fff;
		font-weight: 600;
		cursor: default;
	}

	.almgr-pagination .page-numbers.dots {
		border-color: transparent;
		background: transparent;
		color: #555;
		cursor: default;
	}

	/* ========================================================================
		RESPONSIVE STYLES FOR FILTERS
		======================================================================== */

	/* Tablet and medium screens */
	@media (max-width: 768px) {
		.almgr-filter-row {
			grid-template-columns: 1fr;
			gap: 10px;
		}

		.almgr-filters-content {
			padding: 12px;
		}

		.almgr-form-actions {
			flex-direction: column;
		}
	}

	/* Small screens */
	@media (max-width: 768px) {
		/* Scan QR button: stacks below the search input */
		.almgr-search-row {
			display: block;
		}

		.almgr-qr-scan-btn {
			display: block;
			width: 100%;
			margin-top: 8px;
		}

		.almgr-filters-toggle {
			padding: 8px 12px;
			font-size: 0.9em;
		}

		.almgr-active-filters-badge {
			font-size: 0.75em;
			padding: 2px 6px;
		}

		.almgr-filter-field label {
			font-size: 0.85em;
		}

		.almgr-filter-field select {
			font-size: 0.9em;
		}
	}

	/* ========================================================================
		ACCESSIBILITY UTILITIES
		======================================================================== */

	/* Visually hidden text for screen readers (pagination prev/next, etc.). */
	.screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}

	/* Respect user preference for reduced motion. */
	@media (prefers-reduced-motion: reduce) {
		.almgr-asset-title,
		.almgr-search-submit-btn,
		#almgr_asset_search_form .almgr-form-actions button[type="submit"],
		#almgr_asset_history_form .almgr-form-actions button[type="submit"],
		.almgr-asset-view .almgr-button,
		.almgr-reset-filters,
		.almgr-filters-toggle::after {
			transition: none;
		}

		.almgr-asset-card {
			transition: none;
		}

		.almgr-asset-card:hover {
			transform: none;
		}

		.almgr-asset-thumbnail img {
			transition: none;
		}

		.almgr-asset-card:hover .almgr-asset-thumbnail img {
			transform: none;
		}

		#almgr_asset_search_form.almgr-autocomplete-loading .almgr-search-icon {
			animation: none;
		}
	}

/* =========================================================
	QR Code section
	========================================================= */

/* QR canvas inside the additional fields collapsible */
.almgr-qr-canvas {
	width: 120px;
	height: 120px;
}

.almgr-qr-canvas svg {
	width: 100%;
	height: 100%;
	display: block;
}

.almgr-qr-canvas--small {
	width: 80px;
	height: 80px;
}

/* QR + print button side by side */
.almgr-qr-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Print label card — hidden in normal view, shown only when printing */
.almgr-qr-print-card {
	display: none;
}

/* =========================================================
	@media print — show only the label card
	========================================================= */

@media print {

	body > *:not(.almgr-qr-print-card) {
		display: none !important;
	}

	.almgr-qr-print-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50mm;
		height: 30mm;
		padding: 2mm;
		box-sizing: border-box;
		font-family: sans-serif;
		page-break-inside: avoid;
	}

	.almgr-qr-print-card__qr {
		width: 17mm;
		height: 17mm;
		flex-shrink: 0;
	}

	.almgr-qr-print-card__qr svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.almgr-qr-print-card__title {
		margin: 2mm 0 0;
		font-size: 6pt;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 46mm;
	}

	.almgr-qr-print-card__code {
		margin: 1mm 0 0;
		font-size: 5pt;
		font-family: monospace;
		text-align: center;
	}
}

/* ==========================================================================
	QR Scanner button and overlay
	========================================================================== */

/* Scan QR button in the search row */
.almgr-qr-scan-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Full-screen scanner overlay */
.almgr-qr-scanner-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.almgr-qr-scanner-overlay__inner {
	position: relative;
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.almgr-qr-scanner-overlay__video {
	width: 100%;
	border-radius: 8px;
	display: block;
	background: #000;
}

.almgr-qr-scanner-overlay__status {
	margin: 0;
	color: #fff;
	font-size: 0.95rem;
	text-align: center;
}

.almgr-qr-scanner-overlay__status--error {
	color: #ff6b6b;
}

.almgr-qr-scanner-overlay__close {
	align-self: flex-end;
}