/* =====================================================================================================================
   Bridge: binds the RapidForge template's semantic tokens (Theme Library profile + RF-3 dark layer + RF-UI-BASE states +
   RF-4 Flatpickr) to the Fast-AT tokens, so every template-rendered component — admin shell, generated grids, state panels,
   skeletons, date pickers — wears the Fast-AT brand in light and dark without per-screen colours.
   Loaded AFTER the template's theme files; html[data-theme] selectors (specificity 0,1,1) win over the profile's :root and
   tie with RF-3's dark layer, which they follow in load order.
   ===================================================================================================================== */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
    /* Brand / accent ramp (template names) */
    --primary-base1: var(--fast-primary);
    --primary-hover1: var(--fast-primary-hover);
    --primary-border1: var(--fast-primary-hover);
    --primary-base2: var(--fast-primary);
    --primary-hover2: var(--fast-primary-hover);
    --secondary-base1: var(--fast-text-muted);
    --accent-base: var(--fast-accent);
    --accent-hover: var(--fast-action-orange-hover);
    --accent-border: var(--fast-accent);
    --gold-base: var(--fast-accent);
    --gold-light: var(--fast-brand-orange-light);
    --gold-hover: var(--fast-action-orange-hover);
    --gold-border: var(--fast-accent);
    --rf-color-primary: var(--fast-primary);
    --rf-primary-strong: var(--fast-primary-hover);
    --rf-color-danger: var(--fast-danger);
    --danger-red-base: var(--fast-danger);
    --success-green-base: var(--fast-success);
    --warning-orange-base: var(--fast-warning);
    --info-cyan-base: var(--fast-info);

    /* Page / content */
    --background-color: var(--fast-bg);
    --page-bg: var(--fast-bg);
    --page-fg: var(--fast-text);
    --content-bg: var(--fast-bg);
    --muted-fg: var(--fast-text-muted);
    --body-text-base: var(--fast-text);
    --link-fg: var(--fast-primary);
    --link-fg-hover: var(--fast-primary-hover);
    --rf-color-text: var(--fast-text);
    --rf-surface-text: var(--fast-text);
    --rf-muted-text: var(--fast-text-muted);
    --rf-page-title-color: var(--fast-text);
    --rf-page-subtitle-color: var(--fast-text-muted);

    /* Header */
    --header-bg: var(--fast-surface);
    --header-fg: var(--fast-text);

    /* Panels / cards (borders, no shadows) */
    --panel-bg: var(--fast-surface);
    --panel-hover: var(--fast-surface-2);
    --panel-border: var(--fast-border);
    --card-bg: var(--fast-surface);
    --card-fg: var(--fast-text);
    --card-border: var(--fast-border);
    --card-hover-bg: var(--fast-surface-2);
    --card-title-fg: var(--fast-text);
    --card-text-fg: var(--fast-text-muted);
    --cardHeader-bg: var(--fast-surface-2);
    --cardHeader-fg: var(--fast-text);
    --cardHeader-title-bg: var(--fast-primary);
    --cardHeader-title-fg: var(--fast-on-primary);

    /* Tables */
    --table-header-bg: var(--fast-surface-2);
    --table-header-fg: var(--fast-text);
    --table-body-bg: var(--fast-surface);
    --table-row-bg: var(--fast-surface);
    --table-row-alt-bg: var(--fast-surface-2);
    --table-row-hover-bg: var(--fast-primary-tint);
    --table-border: var(--fast-border);
    --table-control-bg: var(--fast-surface);
    --table-control-border: var(--fast-border-strong);
    --table-control-hover: var(--fast-surface-2);
    --table-control-text: var(--fast-text);

    /* Inputs / dropdowns */
    --input-bg: var(--fast-surface);
    --input-fg: var(--fast-text);
    --input-border: var(--fast-border-strong);
    --input-placeholder: var(--fast-text-muted);
    --dropdown-bg: var(--fast-surface);
    --dropdown-fg: var(--fast-text);
    --dropdown-border: var(--fast-border);

    /* Focus */
    --btn-focus-ring: 0 0 0 2px var(--fast-surface), 0 0 0 4px var(--fast-focus);
    --icon-focus-bg: var(--fast-primary-tint);

    /* RF-UI-BASE skeleton / states */
    --rf-sk-base: var(--fast-skeleton-from);
    --rf-sk-highlight: var(--fast-skeleton-to);
    --rf-state-icon-bg: var(--fast-primary-tint);
    --theme-radius: var(--fast-radius);
    --theme-radius-sm: var(--fast-radius-sm);
    --rf-radius-sm: var(--fast-radius-sm);
}

/* Admin side menu: Fast-AT ink in light, deep navy in dark; active item marked by the orange arrow motif. */
:root,
html[data-theme="light"] {
    --menu-bg: #0B2740;
    --menu-fg: #E6EEF5;
    --menu-border: #16395A;
    --menu-muted: #9DB3C3;
    --menu-icon: #8CC5EA;
    --menu-hover-bg: #13304A;
    --menu-active-bg: #13304A;
    --menu-active-fg: #FFFFFF;
    --submenu-bg: #082036;
    --menu-header-fg: #FFA24D;
}

html[data-theme="dark"] {
    --menu-bg: #06131F;
    --menu-fg: #E6EEF5;
    --menu-border: #1E3A55;
    --menu-muted: #9DB3C3;
    --menu-icon: #8CC5EA;
    --menu-hover-bg: #13304A;
    --menu-active-bg: #13304A;
    --menu-active-fg: #FFFFFF;
    --submenu-bg: #081A2C;
    --menu-header-fg: #FFA24D;
}

/* P12 (S20): template chrome on phones - tap targets of at least 44 px (header icon buttons, the menu toggle, the brand link, the
   profile toggle, sidebar links, the sign-in password toggle, buttons and fields of the template / generated admin screens), and the
   card-mode subtitle at full opacity (the template dims it to .7 below 768 px: 3.1:1 against the 4.5:1 minimum). */
@media (max-width: 767.98px) {
    .fast .box-icon, .fast .header-inner .btn-icon-only { min-inline-size: 44px; min-block-size: 44px; justify-content: center; }
    .fast .sideMenu-links .item-link { min-block-size: 44px; }
    .fast .togglePassword { min-inline-size: 44px; }
    .fast-admin main .btn, .fast-admin main .form-control, .fast-admin main .form-select { min-block-size: 44px; }
    .fast-admin main .btn-ghost, .fast-admin main .btn-icon { min-inline-size: 44px; }
    .fast-admin .btn-icon-box { min-inline-size: 44px; min-block-size: 44px; }
    .fast-admin .page-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 44px; }
    /* DataTables sort control (the focusable role=button) and the header cell (the touch target): 44 px, arrows kept centred. */
    .fast-admin table.dataTable thead > tr > th { block-size: 44px; }
    .fast-admin table.dataTable thead span.dt-column-order { min-inline-size: 44px; min-block-size: 44px; }
    .fast-admin table.dataTable thead span.dt-column-order::before,
    .fast-admin table.dataTable thead span.dt-column-order::after { inset-inline: 0; text-align: center; }
    .fast .dt-card-subtitle { opacity: 1; }
}