/**
 * Site-wide shell theming driven by --preview-site-* tokens (theme-preview-tokens.js).
 * Scoped to body.site-theme-preview so the stock theme applies when this class is absent.
 *
 * Brand Settings → “Transparent layout” adds .transprent-bg and sets background: transparent in
 * assets/css/style.css. Theme tokens must still apply here, or the sidebar/header stay white.
 */
body.site-theme-preview {
    --preview-site-sidebar-bg: #1b2722;
    --preview-site-sidebar-fg: #e8eef0;
    --preview-site-sidebar-muted: #9eb0a8;
    /* Accent as used ON sidebar bg (lightened if accent is near black) */
    --preview-site-sidebar-accent-fg: #6b9a78;
    --preview-site-sidebar-active-bg: #2a3d34;
    --preview-site-sidebar-border: #2a3832;
    --preview-site-header-bg: #ffffff;
    --preview-site-header-fg: #1f2937;
    --preview-site-header-border: #e8ece9;
    --preview-site-canvas-bg: #e8f0eb;
    /* Derived from canvas (+ accent) in theme-preview-tokens.js — readable like accent tokens */
    --preview-site-content-fg: #1f2937;
    --preview-site-content-muted: #6b7280;
    --preview-site-card-bg: #ffffff;
    --preview-site-card-fg: #1f2937;
    --preview-site-card-muted: #6b7280;
    /* Same names as POS preview (theme-preview-tokens.js → applySchemeToTarget); fallbacks until JS runs */
    --preview-text: #2d3d2f;
    --preview-text-muted: #5c8568;
    --preview-border-tint: #c7e0d3;
    --preview-search-bg: #deeee4;
    --preview-search-fg: #26415f;
    --preview-search-ph: #6f8197;
    /* Table thead tint — was #dbeafe (blue); use neutral green-gray so Try Colors matches shell, not random blue */
    --preview-toolbar-active-bg: #e8f0eb;
    --preview-toolbar-active-border: #c7e0d3;
    --preview-toolbar-active-fg: #1e293b;
    /* Left strip on card headers (h5:after) — follows brand accent via JS */
    --preview-card-header-accent: var(--preview-accent, #5c8568);
    /* Table thead text: neutral slate (toolbar “active” fg can read cyan on some accents) */
    --preview-table-header-fg: #1e293b;
    /* style.css sets 25px — too tall for dense cards; card-header / card-footer use these */
    --bs-card-cap-padding-y: 0.75rem;
    /* Accent-derived semantic palette (previewSemanticPaletteFromAccent); mirrors --bs-* on body after JS */
    --preview-semantic-success: #3d7a4a;
    --preview-semantic-success-rgb: 61, 122, 74;
    --preview-semantic-success-hover: #356842;
    --preview-semantic-success-active: #2d5636;
    --preview-semantic-success-on: #ffffff;
    /* Amber (reference hue); JS matches — avoid green×orange mud from old accent-first mix */
    --preview-semantic-warning: #d97706;
    --preview-semantic-warning-rgb: 217, 119, 6;
    --preview-semantic-warning-hover: #a8680c;
    --preview-semantic-warning-active: #8f5a0a;
    --preview-semantic-warning-on: #ffffff;
    --preview-semantic-info: #1e7ea8;
    --preview-semantic-info-rgb: 30, 126, 168;
    --preview-semantic-info-hover: #1a6f94;
    --preview-semantic-info-active: #165f80;
    --preview-semantic-info-on: #ffffff;
    --preview-semantic-danger: #b83232;
    --preview-semantic-danger-rgb: 184, 50, 50;
    --preview-semantic-danger-hover: #a02c2c;
    --preview-semantic-danger-active: #8c2626;
    --preview-semantic-danger-on: #ffffff;
    /* CTA ink on white/light surfaces (outline buttons, icons); JS overwrites with contrast-safe hex */
    --preview-cta-readable-on-light: #e65a28;
    --preview-cta-hover-readable-on-light: #c64d22;
    /* Modest rounding everywhere (cards, panels) — not pill-heavy */
    --preview-ui-radius: 8px;
    --preview-ui-radius-sm: 6px;
    --bs-card-border-radius: var(--preview-ui-radius, 8px);
    --bs-border-radius: var(--preview-ui-radius, 8px);
    /* Solid CTA: one visible 1px border when fill matches white (avoid stacking box-shadow on .btn-primary). */
    --preview-cta-border-edge: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 78%,
        rgba(15, 23, 42, 0.38)
    );
    --preview-cta-hover-border-edge: color-mix(
        in srgb,
        var(--preview-cta-hover, #c64d22) 78%,
        rgba(15, 23, 42, 0.38)
    );
}

/*
 * Global UI radius (Try Colors): cards, modals, inputs — subtle corners (not 0, not 16px+ “bubbles”).
 */
body.site-theme-preview .card {
    border-radius: var(--preview-ui-radius, 8px) !important;
}

body.site-theme-preview .form-control,
body.site-theme-preview .form-select {
    border-radius: var(--preview-ui-radius-sm, 6px) !important;
}

body.site-theme-preview .alert {
    border-radius: var(--preview-ui-radius, 8px) !important;
}

body.site-theme-preview .dropdown-menu {
    border-radius: var(--preview-ui-radius-sm, 6px) !important;
}

body.site-theme-preview .list-group {
    border-radius: var(--preview-ui-radius, 8px) !important;
}

/*
 * HRM / settings vertical nav (e.g. layouts/hrm_setup.blade.php — Branch, Department, …).
 * body.theme-6 .list-group-item.active uses blue #228ffd in assets/css/style.css — not from Try Colors.
 * Chain .theme-6 on body so this beats that rule when preview tokens are active.
 */
body.theme-6.site-theme-preview
    .dash-content
    .list-group-item.list-group-item-action.active,
body.theme-6.site-theme-preview .dash-content a.list-group-item.active,
body.site-theme-preview
    .dash-content
    .list-group-item.list-group-item-action.active,
body.site-theme-preview .dash-content a.list-group-item.active {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent, #3f7f58))
            14%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    background-image: none !important;
    /* Dark text on light tint — accent-colored text was unreadable when Accent/Secondary are very light */
    color: var(--preview-site-content-fg, #1f2937) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

body.theme-6.site-theme-preview
    .dash-content
    .list-group-item.active
    .float-end
    i,
body.theme-6.site-theme-preview
    .dash-content
    a.list-group-item.active
    .float-end
    i,
body.site-theme-preview .dash-content .list-group-item.active .float-end i,
body.site-theme-preview .dash-content a.list-group-item.active .float-end i {
    color: var(--preview-site-content-fg, #1f2937) !important;
}

/*
 * layouts/hrm_setup.blade.php uses id="useradd-sidenav". custom.css targets #useradd-sidenav .list-group-item.active
 * with fixed blues (#d6ebff / #1e40af) — higher specificity than rules above (ID wins). Override here.
 */
body.site-theme-preview .dash-content #useradd-sidenav .list-group-item.active,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item.active {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent, #3f7f58))
            14%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    background-image: none !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

body.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item.active
    .float-end,
body.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item.active
    .float-end
    i,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item.active
    .float-end,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item.active
    .float-end
    i {
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .dash-content #useradd-sidenav .list-group-item:hover,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item:hover {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent, #3f7f58))
            10%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item:hover
    .float-end,
body.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item:hover
    .float-end
    i,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item:hover
    .float-end,
body.theme-6.site-theme-preview
    .dash-content
    #useradd-sidenav
    .list-group-item:hover
    .float-end
    i {
    color: var(--preview-site-content-fg, #1f2937) !important;
}

/*
 * Table Action column: View / secondary outline — custom.css only styles outline-secondary when
 * :not(.site-theme-preview); restore readable border + fg for Try Colors (striped rows).
 */
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-secondary,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-secondary {
    /* Use stronger hover fg as default — light Secondary tokens made icon-only rows nearly invisible on white */
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-secondary
    i,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-secondary
    i {
    color: inherit !important;
    opacity: 1 !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-secondary:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-secondary:focus {
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
}

/*
 * Legacy row actions: custom.css pastel boxes on .action-btn.bg-info / .bg-primary / .bg-warning / .bg-danger
 * inside table Action — align with Try Colors (neutral outline + semantic danger) across all listings.
 */
body.site-theme-preview .dash-content table td.Action .action-btn.bg-info,
body.site-theme-preview .dash-content table td.Action .action-btn.bg-primary,
body.site-theme-preview .dash-content table td.Action .action-btn.bg-warning {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.site-theme-preview .dash-content table td.Action .action-btn.bg-danger {
    background-color: transparent !important;
    background-image: none !important;
}

body.site-theme-preview .dash-content table td.Action .action-btn.bg-info a.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.mx-3.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.mx-3.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.mx-3.btn {
    background-color: transparent !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    border: 1px solid var(--preview-secondary-outline-border, #64748b) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.mx-3.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.mx-3.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.mx-3.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.mx-3.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.mx-3.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.mx-3.btn:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.btn,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.mx-3.btn {
    background-color: transparent !important;
    color: var(--preview-semantic-danger, #b83232) !important;
    border: 1px solid var(--preview-semantic-danger, #b83232) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.mx-3.btn:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.btn:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.mx-3.btn:focus {
    background-color: var(--preview-semantic-danger, #b83232) !important;
    color: var(--preview-semantic-danger-on, #ffffff) !important;
    border-color: var(--preview-semantic-danger-hover, #a02c2c) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-info
    a.btn
    i,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-primary
    a.btn
    i,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-warning
    a.btn
    i,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .action-btn.bg-danger
    a.btn
    i {
    color: inherit !important;
}

/* Card header titles — one scale across admin shell (aligns with account dashboard tokens) */
body.site-theme-preview .dash-content .card .card-header h4,
body.site-theme-preview .dash-content .card .card-header .h4,
body.site-theme-preview .dash-content .card .card-header h5,
body.site-theme-preview .dash-content .card .card-header .h5,
body.site-theme-preview .dash-content .card .card-header h6,
body.site-theme-preview .dash-content .card .card-header .h6 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Sidebar (including “Transparent layout” / .transprent-bg) */
body.site-theme-preview .dash-sidebar.light-sidebar {
    background: var(--preview-site-sidebar-bg) !important;
    background-image: none !important;
    border-color: var(--preview-site-sidebar-border) !important;
    box-shadow: none !important;
}

@media (min-width: 1024px) {
    body.site-theme-preview .dash-sidebar.light-sidebar.transprent-bg {
        background: var(--preview-site-sidebar-bg) !important;
        background-image: none !important;
    }
}

/* Top-level rows only — do NOT use bare .dash-mtext (submenu labels would inherit wrong color). */
body.site-theme-preview .dash-sidebar .dash-navbar > .dash-item > .dash-link,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-mtext,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-micon
    i {
    color: var(--preview-site-sidebar-fg) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item:not(.active)
    > .dash-link:hover,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item:not(.active)
    > .dash-link:focus {
    color: var(--preview-site-sidebar-fg) !important;
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-active-bg) 65%,
        var(--preview-site-sidebar-bg)
    ) !important;
}

/* Active row: background only on the link — do not set background on .dash-link i (glyph inside .dash-micon)
   or it stacks with .dash-micon and reads as a thick halo / double icon tile. */
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    background: var(--preview-site-sidebar-active-bg) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-mtext {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview .dash-sidebar .dash-submenu .dash-item > .dash-link,
body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item
    > .dash-link
    .dash-mtext,
body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item
    > .dash-link
    .dash-micon
    i {
    color: var(--preview-site-sidebar-muted) !important;
}

body.site-theme-preview .dash-sidebar .dash-arrow,
body.site-theme-preview .dash-sidebar .dash-arrow i,
body.site-theme-preview .dash-sidebar .dash-arrow svg {
    color: var(--preview-site-sidebar-muted) !important;
    stroke: var(--preview-site-sidebar-muted) !important;
}

body.site-theme-preview .dash-sidebar .sidebar-collapse-trigger {
    color: var(--preview-site-sidebar-muted) !important;
    border-color: var(--preview-site-sidebar-border) !important;
}

/* Top header (including “Transparent layout” / .transprent-bg) */
body.site-theme-preview .dash-header:not(.dash-mob-header) {
    background: var(--preview-site-header-bg) !important;
    border-bottom: 1px solid var(--preview-site-header-border) !important;
    box-shadow: none !important;
}

@media (min-width: 1024px) {
    body.site-theme-preview .dash-header.transprent-bg:not(.dash-mob-header) {
        background: var(--preview-site-header-bg) !important;
    }
}

body.site-theme-preview .dash-header .dash-head-link,
body.site-theme-preview .dash-header .dash-head-link i:not(.nocolor),
body.site-theme-preview .dash-header .hide-mob,
body.site-theme-preview .dash-header .drp-text {
    color: var(--preview-site-header-fg) !important;
}

body.site-theme-preview .dash-header .hamburger-inner,
body.site-theme-preview .dash-header .hamburger-inner::before,
body.site-theme-preview .dash-header .hamburger-inner::after {
    background-color: var(--preview-site-header-fg) !important;
}

/* Beat body.theme-6 header accent (#228ffd) so header picker + contrast apply */
body.site-theme-preview.theme-6 .dash-header .dash-head-link > i:not(.nocolor) {
    color: var(--preview-site-header-fg) !important;
}

body.site-theme-preview.theme-6 .dash-header .drp-language .drp-text {
    color: var(--preview-site-header-fg) !important;
}

/*
 * Header clock (public/assets/js/clock.js) — semantic spans replace Bootstrap text-primary / text-info / text-muted.
 */
body.site-theme-preview .dash-header .drp-clock .clock-time__icon,
body.site-theme-preview .dash-header .clock-time .clock-time__weekday {
    color: var(--preview-site-header-fg, #1f2937) !important;
}

body.site-theme-preview .dash-header .clock-time .clock-time__date,
body.site-theme-preview .dash-header .clock-time .clock-time__tz {
    color: var(--preview-site-header-muted, #6b7280) !important;
}

body.site-theme-preview .dash-header .clock-time .clock-time__time {
    color: var(--preview-cta, #e65a28) !important;
    font-weight: 600;
}

body.site-theme-preview
    header.pos-header-bar
    .pos-header-clock-wrap
    .clock-time__icon,
body.site-theme-preview header.pos-header-bar .clock-time .clock-time__weekday {
    color: var(
        --preview-accent-readable-on-white,
        var(--preview-text, #2d3d2f)
    ) !important;
}

body.site-theme-preview header.pos-header-bar .clock-time .clock-time__date,
body.site-theme-preview header.pos-header-bar .clock-time .clock-time__tz {
    color: var(--preview-site-header-muted, #6b7280) !important;
}

body.site-theme-preview header.pos-header-bar .clock-time .clock-time__time {
    color: var(--preview-cta, #e65a28) !important;
    font-weight: 600;
}

/*
 * Header notification / message counts — match POS preview (body.pos-preview-v2 ul.pos-header-right .noti-icon-badge).
 * Same fill as accent; optional JS --preview-header-badge-* for light-footer chip variant.
 */
body.site-theme-preview .dash-header .dash-head-link .dash-h-badge.bg-danger,
body.site-theme-preview
    .dash-header
    .dash-head-link
    span.bg-danger.dash-h-badge,
body.site-theme-preview .dash-header .dash-head-link .message-counter,
body.site-theme-preview .dash-header .dash-head-link .custom_messanger_counter {
    --bs-bg-opacity: 1;
    background-color: var(
        --preview-header-badge-bg,
        var(--preview-accent, #3f7f58)
    ) !important;
    background-image: none !important;
    background: var(
        --preview-header-badge-bg,
        var(--preview-accent, #3f7f58)
    ) !important;
    color: var(
        --preview-header-badge-fg,
        var(--preview-accent-on, #ffffff)
    ) !important;
    border: 1px solid var(--preview-header-badge-border, transparent) !important;
}

body.site-theme-preview .dash-header .dash-head-link .dash-h-badge.dots {
    background-color: var(
        --preview-header-badge-bg,
        var(--preview-accent, #3f7f58)
    ) !important;
    background-image: none !important;
    background: var(
        --preview-header-badge-bg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

/* Main content column */
body.site-theme-preview .dash-container {
    background: var(--preview-site-canvas-bg) !important;
}

body.site-theme-preview .dash-content {
    background: transparent !important;
    color: var(--preview-site-content-fg) !important;
}

body.site-theme-preview .page-header {
    background: transparent !important;
}

body.site-theme-preview .dash-content .page-header h1,
body.site-theme-preview .dash-content .page-header h2,
body.site-theme-preview .dash-content .page-header h3,
body.site-theme-preview .dash-content .page-header h4,
body.site-theme-preview .dash-content .page-header h5 {
    color: var(--preview-site-content-fg) !important;
}

/*
 * Breadcrumb: plain --preview-site-content-muted can be too dark on dark canvases (Try Colors);
 * links were also picking up .dash-content a { accent }. Blend fg + muted so trail + chevron stay
 * readable vs the same surface as the page title.
 */
body.site-theme-preview .dash-content .breadcrumb,
body.site-theme-preview .dash-content .breadcrumb-item,
body.site-theme-preview
    .dash-content
    .breadcrumb-item
    + .breadcrumb-item::before {
    color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 58%,
        var(--preview-site-content-muted)
    ) !important;
}

body.site-theme-preview .dash-content .text-muted {
    color: var(--preview-site-content-muted) !important;
}

/* Any Bootstrap .card surface (admin, POS, modals): muted must follow card token, not canvas content-muted */
body.site-theme-preview .card .text-muted {
    color: var(--preview-site-card-muted) !important;
}

/*
 * Elevated / card-like shells: --preview-site-content-muted is tuned for text on --preview-site-canvas-bg
 * (often a light gray when the main area is dark). Subtitles, HR sidebars, listing shells, and modals
 * sit on --preview-site-card-bg instead — reuse card-muted so muted labels stay readable everywhere.
 */
body.site-theme-preview .dash-content .sidebar-card .text-muted,
body.site-theme-preview .dash-content .hr-profile-header .text-muted,
body.site-theme-preview .dash-content .page-header .text-muted,
body.site-theme-preview .dash-content .data-listing-card .text-muted,
body.site-theme-preview .modal-content .text-muted,
body.site-theme-preview .dropdown-menu .text-muted,
body.site-theme-preview .popover-body .text-muted,
body.site-theme-preview .offcanvas-body .text-muted {
    color: var(--preview-site-card-muted) !important;
}

/*
 * Inactive Bootstrap tab/pill links on light panels (not app chrome). Same content-muted vs card-muted issue.
 * .card / .modal work on POS and other layouts without .dash-content.
 */
body.site-theme-preview
    .dash-content
    .nav.nav-pills
    .nav-link:not(.active):not(.disabled),
body.site-theme-preview .nav.nav-pills .nav-link:not(.active):not(.disabled),
body.site-theme-preview .card .nav-link:not(.active):not(.disabled),
body.site-theme-preview .modal .nav-link:not(.active):not(.disabled):not(.btn),
body.site-theme-preview .profile-nav-tabs .nav-link:not(.active):not(.disabled),
body.site-theme-preview
    .hr-profile-header
    .nav-link:not(.active):not(.disabled):not(.btn) {
    color: var(--preview-site-card-muted) !important;
}

/*
 * Employee profile / My Drive (hr-profile-page):
 * - theme-6 forces .nav-link and .btn-primary toward #228ffd via CSS variables.
 * - Some hosts/cache/CDN omit .dash-content in the mental model; duplicate selectors without it.
 * - Reset --bs-btn-* on toolbar buttons so Bootstrap’s .btn layer can’t resurrect purple/cyan after upload issues.
 */
body.site-theme-preview .dash-content .hr-profile-page .profile-nav-tabs .nav-link,
body.site-theme-preview .hr-profile-page .profile-nav-tabs .nav-link {
    color: var(--preview-site-card-muted) !important;
}

body.site-theme-preview .dash-content .hr-profile-page .profile-nav-tabs .nav-link:hover,
body.site-theme-preview .dash-content .hr-profile-page .profile-nav-tabs .nav-link:focus,
body.site-theme-preview .hr-profile-page .profile-nav-tabs .nav-link:hover,
body.site-theme-preview .hr-profile-page .profile-nav-tabs .nav-link:focus {
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    background: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 10%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
}

body.site-theme-preview .dash-content .hr-profile-page .profile-nav-tabs .nav-link.active,
body.site-theme-preview .hr-profile-page .profile-nav-tabs .nav-link.active {
    color: var(--preview-site-card-fg) !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 0 var(--preview-cta, #e65a28) !important;
    border-color: transparent !important;
}

body.site-theme-preview .dash-content .hr-profile-page .btn-outline-secondary,
body.site-theme-preview .hr-profile-page .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
    --bs-btn-color: var(--preview-secondary-outline-fg, #64748b) !important;
    --bs-btn-border-color: var(--preview-secondary-outline-border, #64748b) !important;
    --bs-btn-hover-color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    --bs-btn-hover-bg: var(--preview-secondary-outline-hover-bg, #f1f5f9) !important;
    --bs-btn-hover-border-color: var(
        --preview-secondary-outline-border,
        #64748b
    ) !important;
}

body.site-theme-preview .dash-content .hr-profile-page .btn-outline-secondary:hover,
body.site-theme-preview .dash-content .hr-profile-page .btn-outline-secondary:focus,
body.site-theme-preview .hr-profile-page .btn-outline-secondary:hover,
body.site-theme-preview .hr-profile-page .btn-outline-secondary:focus {
    background-color: var(--preview-secondary-outline-hover-bg, #f1f5f9) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

/* My Drive card toolbar: beat body.theme-6 .btn-primary { --bs-btn-bg: #228ffd } */
body.site-theme-preview.theme-6 .hr-profile-page .card-header .btn.btn-primary,
body.site-theme-preview .dash-content .hr-profile-page .card-header .btn.btn-primary,
body.site-theme-preview .hr-profile-page .card-header .btn.btn-primary {
    --bs-btn-color: var(--preview-cta-on, #ffffff) !important;
    --bs-btn-bg: var(--preview-cta, #e65a28) !important;
    --bs-btn-border-color: var(
        --preview-cta-border-edge,
        var(--preview-cta, #e65a28)
    ) !important;
    --bs-btn-hover-color: var(--preview-cta-hover-on, #ffffff) !important;
    --bs-btn-hover-bg: var(--preview-cta-hover, #c64d22) !important;
    --bs-btn-hover-border-color: var(
        --preview-cta-hover-border-edge,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    --bs-btn-active-color: var(--preview-cta-hover-on, #ffffff) !important;
    --bs-btn-active-bg: var(--preview-cta-hover, #c64d22) !important;
    --bs-btn-active-border-color: var(
        --preview-cta-hover-border-edge,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(
        --preview-cta-border-edge,
        var(--preview-cta, #e65a28)
    ) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview.theme-6 .hr-profile-page .card-header .btn.btn-primary:hover,
body.site-theme-preview.theme-6 .hr-profile-page .card-header .btn.btn-primary:focus,
body.site-theme-preview .dash-content .hr-profile-page .card-header .btn.btn-primary:hover,
body.site-theme-preview .dash-content .hr-profile-page .card-header .btn.btn-primary:focus,
body.site-theme-preview .hr-profile-page .card-header .btn.btn-primary:hover,
body.site-theme-preview .hr-profile-page .card-header .btn.btn-primary:focus {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(
        --preview-cta-hover-border-edge,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

/*
 * My Drive toolbar — “Manage Folders”: do not use Try Colors *secondary button* outline tokens here.
 * Those follow the brand Secondary swatch (often purple) and read like custom.css .btn-outline-info.
 * Use neutral card-muted + border so the row stays Primary (New Folder) + neutral outline.
 */
body.site-theme-preview.theme-6
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info,
body.site-theme-preview
    .dash-content
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info,
body.site-theme-preview .hr-profile-page .card-header #manageFoldersBtn.btn-outline-info,
body.site-theme-preview.theme-6 .hr-profile-page .card-header .btn.btn-outline-secondary,
body.site-theme-preview .dash-content .hr-profile-page .card-header .btn.btn-outline-secondary,
body.site-theme-preview .hr-profile-page .card-header .btn.btn-outline-secondary {
    --bs-btn-color: var(--preview-site-card-muted, #64748b) !important;
    --bs-btn-border-color: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 52%,
        var(--preview-border-tint, #e2e8f0)
    ) !important;
    --bs-btn-hover-color: var(--preview-site-card-fg, #0f172a) !important;
    --bs-btn-hover-bg: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 11%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    --bs-btn-hover-border-color: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 45%,
        var(--preview-border-tint, #e2e8f0)
    ) !important;
    color: var(--preview-site-card-muted, #64748b) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 52%,
        var(--preview-border-tint, #e2e8f0)
    ) !important;
    background-color: transparent !important;
}

body.site-theme-preview.theme-6
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:hover,
body.site-theme-preview.theme-6
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:focus,
body.site-theme-preview
    .dash-content
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:hover,
body.site-theme-preview
    .dash-content
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:focus,
body.site-theme-preview
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:hover,
body.site-theme-preview
    .hr-profile-page
    .card-header
    #manageFoldersBtn.btn-outline-info:focus,
body.site-theme-preview.theme-6
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:hover,
body.site-theme-preview.theme-6
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:focus,
body.site-theme-preview
    .dash-content
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:focus,
body.site-theme-preview
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:hover,
body.site-theme-preview
    .hr-profile-page
    .card-header
    .btn.btn-outline-secondary:focus {
    color: var(--preview-site-card-fg, #0f172a) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 45%,
        var(--preview-border-tint, #e2e8f0)
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-site-card-muted, #64748b) 11%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
}

/*
 * POS dashboard (resources/views/dashboard/pos-dashboard.blade.php): AJAX metric cards use
 * var(--card-bg), var(--icon-color), etc. Defaults + headers/labels follow Try Colors.
 */
body.site-theme-preview .pos-dashboard-page {
    --card-bg: var(--preview-site-card-bg, #ffffff);
    --sparkle-color: color-mix(
        in srgb,
        var(--preview-accent, #1da1f2) 42%,
        var(--preview-site-card-bg, #ffffff)
    );
    --wave-color: color-mix(
        in srgb,
        var(--preview-accent, #1da1f2) 22%,
        var(--preview-site-card-bg, #ffffff)
    );
    --icon-color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    );
    --title-color: var(--preview-site-card-muted, #64748b);
}

body.site-theme-preview .pos-dashboard-page .card-header h5,
body.site-theme-preview .pos-dashboard-page .card-title {
    color: var(--preview-site-card-fg) !important;
}

body.site-theme-preview .pos-dashboard-page .sales-metric-label {
    color: var(--preview-site-card-muted) !important;
}

body.site-theme-preview .pos-dashboard-page .empty-state-message,
body.site-theme-preview .pos-dashboard-page .loading-message {
    color: var(--preview-site-card-muted) !important;
}

/* Account dashboard: chevron-only collapse (minimize card body) */
/*
 * This stack ships Bootstrap 5.2 (style.css) — there is no --bs-secondary-color (added in BS 5.3).
 * `color: var(--bs-secondary-color)` was invalid and dropped, so .btn-link’s hardcoded
 * --bs-btn-color: #51459d always won. Override the button CSS vars + final color so Try Colors
 * (--preview-site-card-muted) and plain theme (--bs-secondary) apply.
 */
.account-dashboard-page .card-header .account-dashboard-card__toggle.btn-link {
    --bs-btn-color: var(
        --preview-site-card-muted,
        var(--bs-secondary, #6c757d)
    );
    --bs-btn-hover-color: var(
        --preview-site-card-muted,
        var(--bs-secondary, #6c757d)
    );
    --bs-btn-active-color: var(
        --preview-site-card-muted,
        var(--bs-secondary, #6c757d)
    );
    color: var(
        --preview-site-card-muted,
        var(--bs-secondary, #6c757d)
    ) !important;
}

.account-dashboard-page
    .account-dashboard-card__toggle
    .account-dashboard-card__chevron {
    display: block;
    color: inherit;
    transition: transform 0.2s ease;
}

.account-dashboard-page
    .account-dashboard-card__toggle.collapsed
    .account-dashboard-card__chevron {
    transform: rotate(180deg);
}

body.site-theme-preview
    .dash-content
    .account-dashboard-page
    .account-dashboard-card__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-accent, #3f7f58) 28%, transparent);
    border-radius: 6px;
}

/*
 * Account / POS dashboards: card title strip + table thead — avoid accent-heavy “toolbar active” blue
 * (--preview-toolbar-active-bg mixes white + accent; reads as #e3ecf6 when accent is blue).
 * Use border-tint + card surface so headers track the palette without a cold blue wash.
 */
body.site-theme-preview
    .dash-content
    .account-dashboard-page
    .card
    > .card-header,
body.site-theme-preview .dash-content .pos-dashboard-page .card > .card-header,
body.site-theme-preview
    .dash-content
    .producttransfer-create-page
    .card
    > .card-header,
body.site-theme-preview
    .dash-content
    .document-upload-page
    .card
    > .card-header,
body.site-theme-preview
    .dash-content
    .leave-policies-hub
    .card
    > .card-header,
body.site-theme-preview
    .dash-content
    .policy-assignments-report
    .card
    > .card-header {
    background-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 14%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    border-bottom: 1px solid
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 48%, #e2e8f0) !important;
}

/*
 * Product transfer (create) + document upload list: theme-6 forces h5:after to #228ffd — override to Try Colors accent like dashboard.
 */
body.site-theme-preview.theme-6
    .dash-content
    .producttransfer-create-page
    .card
    > .card-header:not(.border-0)
    h5:after,
body.site-theme-preview.theme-6
    .dash-content
    .producttransfer-create-page
    .card
    > .card-header:not(.border-0)
    .h5:after,
body.site-theme-preview.theme-6
    .dash-content
    .document-upload-page
    .card
    > .card-header:not(.border-0)
    h5:after,
body.site-theme-preview.theme-6
    .dash-content
    .document-upload-page
    .card
    > .card-header:not(.border-0)
    .h5:after {
    background: var(
        --preview-card-header-accent,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview
    .dash-content
    .account-dashboard-page
    .card
    .table
    thead
    th,
body.site-theme-preview .dash-content .pos-dashboard-page .card .table thead th,
body.site-theme-preview
    .dash-content
    .producttransfer-create-page
    .card
    .table
    thead
    th,
body.site-theme-preview
    .dash-content
    .document-upload-page
    .card
    .table
    thead
    th,
body.site-theme-preview
    .dash-content
    .document-upload-page
    .card
    table.datatable:not(.table-dark)
    thead
    th,
body.site-theme-preview
    .dash-content
    .document-upload-page
    .card
    table.dataTable:not(.table-dark)
    thead
    th {
    background-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 20%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    border-bottom: 2px solid
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 52%, #e2e8f0) !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
}

/*
 * /document-upload: theme-6 global thead (toolbar-active mix) loads after the block above — override with neutral border-tint mix.
 */
body.site-theme-preview.theme-6
    .dash-content
    .document-upload-page
    .card
    .table:not(.table-dark)
    thead
    th,
body.site-theme-preview.theme-6
    .dash-content
    .document-upload-page
    .card
    table.datatable:not(.table-dark)
    thead
    th,
body.site-theme-preview.theme-6
    .dash-content
    .document-upload-page
    .card
    table.dataTable:not(.table-dark)
    thead
    th {
    background: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 20%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    color: var(--preview-table-header-fg, #334155) !important;
    -webkit-text-fill-color: var(--preview-table-header-fg, #334155) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 52%,
        #e2e8f0
    ) !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
}

/*
 * POS dashboard header filters: transparent page-header over dark main area made labels + outline
 * segmented controls unreadable. Card-style strip uses preview card surface + border.
 */
.pos-dashboard-toolbar {
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    /* Full-width strip in content: predictable rows, no narrow-column clip */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 0.75rem 1.25rem;
    align-items: center;
    min-width: 0;
    overflow: visible;
}

.pos-dashboard-toolbar .pos-dashboard-toolbar__group {
    min-width: 0;
}

/* Date Range segment: needs two grid tracks so three labels stay on one line */
@media (min-width: 768px) {
    .pos-dashboard-page
        #pos-dashboard-toolbar
        .pos-dashboard-toolbar__group--segment {
        grid-column: span 2;
    }
}

/* Segmented control: never shrink buttons until text stacks ugly — nowrap + equal flex */
#pos-dashboard-toolbar .pos-dashboard-toolbar__btn-group {
    flex-wrap: nowrap;
    max-width: 100%;
}

#pos-dashboard-toolbar .pos-dashboard-toolbar__btn-group > .btn {
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.site-theme-preview .pos-dashboard-toolbar {
    background: var(--preview-site-card-bg, #ffffff) !important;
    border: 1px solid
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 50%, #e2e8f0) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07) !important;
}

/* Filter strip: neutral white (card token can read mint on some themes) */
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    #pos-dashboard-toolbar.pos-dashboard-toolbar {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Beat .page-header .text-muted (card-muted on wrong surface) — labels sit on lifted strip */
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .text-muted,
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    label.text-muted,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .text-muted,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    label.text-muted {
    color: var(--preview-site-card-muted) !important;
}

body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .form-select,
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .form-control,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .form-select,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .form-control {
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    color: var(--preview-site-card-fg, #1e293b) !important;
    border-color: var(--preview-border-tint, #cbd5e1) !important;
}

/* Segmented outline-primary on light strip — ensure visible border + label (Try Colors CTA outline) */
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-outline-primary,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-outline-primary {
    border-width: 1px !important;
    border-style: solid !important;
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    background-color: transparent !important;
}

body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-check:checked
    + .btn-outline-primary,
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-outline-primary:active,
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-outline-primary.active,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-check:checked
    + .btn-outline-primary,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-outline-primary:active,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-outline-primary.active {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-outline-primary:hover,
body.site-theme-preview
    .dash-content
    .page-header
    .pos-dashboard-toolbar
    .btn-outline-primary:focus,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-outline-primary:hover,
body.site-theme-preview
    .dash-content
    .pos-dashboard-page
    .pos-dashboard-toolbar
    .btn-outline-primary:focus {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 12%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    border-color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
}

/* Bootstrap .text-body uses --bs-body-color; shell tokens fix contrast on dark --preview-site-canvas-bg */
body.site-theme-preview .dash-content .text-body {
    color: var(--preview-site-content-fg) !important;
}

body.site-theme-preview .dash-content .card .text-body {
    color: var(--preview-site-card-fg) !important;
}

/* Tables site-wide under Try Colors (POS, modals, guest shells) — same card fg; thead uses JS-derived contrast */
body.site-theme-preview .dash-content .table:not(.table-dark),
body.site-theme-preview .table:not(.table-dark) {
    color: var(--preview-site-card-fg) !important;
}

body.site-theme-preview .dash-content .table:not(.table-dark) .text-muted,
body.site-theme-preview .table:not(.table-dark) .text-muted {
    color: var(--preview-site-card-muted) !important;
}

/*
 * Table header — --preview-table-header-fg from theme-preview-tokens.js (mixed toolbar+card).
 * Scoped to body.site-theme-preview only; :not(.table-dark) preserves inverted tables.
 * Duplicated .dash-content + global so POS / modals / account pages outside .dash-content match admin.
 */
body.site-theme-preview .dash-content .table:not(.table-dark) thead th,
body.site-theme-preview .dash-content .card .table:not(.table-dark) thead th,
body.site-theme-preview .dash-content table.datatable:not(.table-dark) thead th,
body.site-theme-preview .dash-content table.dataTable:not(.table-dark) thead th,
body.site-theme-preview .table:not(.table-dark) thead th,
body.site-theme-preview .card .table:not(.table-dark) thead th,
body.site-theme-preview table.datatable:not(.table-dark) thead th,
body.site-theme-preview table.dataTable:not(.table-dark) thead th {
    background: color-mix(
        in srgb,
        var(--preview-toolbar-active-bg, #eaf2ec) 88%,
        var(--preview-site-card-bg, #fff)
    ) !important;
    color: var(--preview-table-header-fg, #334155) !important;
    -webkit-text-fill-color: var(--preview-table-header-fg, #334155) !important;
    border-color: var(
        --preview-toolbar-active-border,
        var(--preview-border-tint, #c4dcc8)
    ) !important;
    padding: 0.5rem 0.75rem !important;
}

body.site-theme-preview.theme-6 .dash-content .table:not(.table-dark) thead th,
body.site-theme-preview.theme-6
    .dash-content
    .card
    .table:not(.table-dark)
    thead
    th,
body.site-theme-preview.theme-6
    .dash-content
    table.datatable:not(.table-dark)
    thead
    th,
body.site-theme-preview.theme-6
    .dash-content
    table.dataTable:not(.table-dark)
    thead
    th,
body.site-theme-preview.theme-6 .table:not(.table-dark) thead th,
body.site-theme-preview.theme-6 .card .table:not(.table-dark) thead th,
body.site-theme-preview.theme-6 table.datatable:not(.table-dark) thead th,
body.site-theme-preview.theme-6 table.dataTable:not(.table-dark) thead th {
    background: color-mix(
        in srgb,
        var(--preview-toolbar-active-bg, #eaf2ec) 88%,
        var(--preview-site-card-bg, #fff)
    ) !important;
    color: var(--preview-table-header-fg, #334155) !important;
    -webkit-text-fill-color: var(--preview-table-header-fg, #334155) !important;
    padding: 0.5rem 0.75rem !important;
}

/* Card title left accent — controllable via --preview-card-header-accent (set from JS = brand accent) */
body.site-theme-preview
    .dash-content
    .card
    .card-header:not(.border-0)
    h5:after,
body.site-theme-preview
    .dash-content
    .card
    .card-header:not(.border-0)
    .h5:after,
body.site-theme-preview
    .dash-content
    .card
    .card-header:not(.border-0)
    h6:after,
body.site-theme-preview
    .dash-content
    .card
    .card-header:not(.border-0)
    .h6:after {
    background: var(
        --preview-card-header-accent,
        var(--preview-accent, #3f7f58)
    ) !important;
}

/* Cards — background from JS */
body.site-theme-preview .card:not(.bg-transparent) {
    background: var(--preview-site-card-bg) !important;
    border-color: var(--preview-border-tint, #dce4df) !important;
    color: var(--preview-site-card-fg) !important;
}

/* Account dashboard KPI cards — replace hardcoded slate with card text tokens (readable on lifted surfaces) */
body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-title-text {
    color: var(--preview-site-card-fg) !important;
}

body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-description,
body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-change:not(.metric-change-inline) {
    color: var(--preview-site-card-muted) !important;
}

body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-value {
    color: var(--preview-site-card-fg) !important;
}

body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-badge.live-badge,
body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-badge.updated-badge,
body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean
    .gateway-badge.ai-badge {
    color: var(--preview-site-card-muted) !important;
    background: color-mix(
        in srgb,
        var(--preview-site-card-fg) 10%,
        transparent
    ) !important;
}

/* Match radius with account-dashboard KPI cards (::after bottom bar; uniform 1px border). */
body.site-theme-preview
    .account-dashboard-page
    .gateway-card.gateway-card--clean {
    border-radius: 16px !important;
}

/* KPI cards: tie gradient to lifted --preview-site-card-bg so the bottom never reads as “black slab” vs dark text */
@supports (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview
        .account-dashboard-page
        .gateway-card.gateway-card--clean.blue-gateway {
        background: linear-gradient(
            180deg,
            var(--preview-site-card-bg) 0%,
            color-mix(in srgb, var(--preview-site-card-bg) 90%, #2196f3 10%)
                100%
        ) !important;
    }

    body.site-theme-preview
        .account-dashboard-page
        .gateway-card.gateway-card--clean.green-gateway {
        background: linear-gradient(
            180deg,
            var(--preview-site-card-bg) 0%,
            color-mix(in srgb, var(--preview-site-card-bg) 90%, #4caf50 10%)
                100%
        ) !important;
    }

    body.site-theme-preview
        .account-dashboard-page
        .gateway-card.gateway-card--clean.violet-gateway,
    body.site-theme-preview
        .account-dashboard-page
        .gateway-card.gateway-card--clean.purple-gateway {
        background: linear-gradient(
            180deg,
            var(--preview-site-card-bg) 0%,
            color-mix(in srgb, var(--preview-site-card-bg) 90%, #9c27b0 10%)
                100%
        ) !important;
    }

    body.site-theme-preview
        .account-dashboard-page
        .gateway-card.gateway-card--clean.orange-gateway {
        background: linear-gradient(
            180deg,
            var(--preview-site-card-bg) 0%,
            color-mix(in srgb, var(--preview-site-card-bg) 90%, #ff9800 10%)
                100%
        ) !important;
    }
}

/*
 * Search & filters — match POS preview (pos-layout-v2 + pos-preview-v2: search + toolbar tokens)
 */
body.site-theme-preview
    .dash-content
    .form-control:not(.btn):not(.form-control-color):not([type="file"]),
body.site-theme-preview .dash-content textarea.form-control,
body.site-theme-preview .dash-content .form-select,
body.site-theme-preview .dash-content select.form-control,
body.site-theme-preview .dash-content select.form-select {
    /* Use background-color only so .form-select keeps Bootstrap’s right chevron (background-image). */
    background-color: var(--preview-search-bg, #deeee4) !important;
    color: var(--preview-search-fg, #26415f) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

body.site-theme-preview .dash-content .form-control::placeholder,
body.site-theme-preview .dash-content textarea.form-control::placeholder {
    color: var(--preview-search-ph, #6f8197) !important;
    opacity: 1;
}

body.site-theme-preview .dash-content .input-group-text {
    background-color: var(--preview-search-bg, #deeee4) !important;
    color: var(--preview-search-fg, #26415f) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

body.site-theme-preview .dash-content .input-group > .form-control:focus,
body.site-theme-preview .dash-content .input-group > .form-select:focus {
    z-index: 3;
}

body.site-theme-preview .dash-content .form-control:focus,
body.site-theme-preview .dash-content .form-select:focus {
    background-color: var(--preview-search-bg, #deeee4) !important;
    color: var(--preview-search-fg, #26415f) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 42%,
        var(--preview-border-tint, #c7e0d3)
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-accent, #3f7f58) 18%, transparent) !important;
}

/*
 * Safety guard: inside card/modal surfaces, never allow white or near-white text on a white/light card-bg.
 * When a dark canvas is chosen, --preview-search-fg can become near-white. These selectors snap it back
 * to --preview-site-card-fg (which is always computed for the lighter card surface).
 */
body.site-theme-preview .card .form-control:not(.btn):not(.form-control-color):not([type="file"]),
body.site-theme-preview .card .form-select,
body.site-theme-preview .card textarea.form-control,
body.site-theme-preview .modal .form-control:not(.btn):not(.form-control-color):not([type="file"]),
body.site-theme-preview .modal .form-select,
body.site-theme-preview .modal textarea.form-control {
    color: var(--preview-site-card-fg, #1f2937) !important;
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    border-color: var(--preview-border-tint, #d1d5db) !important;
}
body.site-theme-preview .card .form-control::placeholder,
body.site-theme-preview .modal .form-control::placeholder {
    color: var(--preview-site-card-muted, #6b7280) !important;
    opacity: 1;
}
/* Table links inside cards always use card foreground — never inherit CTA-on white */
body.site-theme-preview .card td a,
body.site-theme-preview .card td,
body.site-theme-preview .card th {
    color: var(--preview-site-card-fg, #1f2937);
}
body.site-theme-preview .card td a:hover {
    color: var(--preview-accent, #3f7f58);
}

/*
 * POS dashboard header toolbar (#pos-dashboard-toolbar): inputs must stay solid white, not global search-strip tint.
 * The block above uses .form-control + :not() chains with high specificity — they win over .page-header .pos-dashboard-toolbar alone.
 */
#pos-dashboard-toolbar .form-control,
#pos-dashboard-toolbar .form-select,
#pos-dashboard-toolbar select.form-control,
#pos-dashboard-toolbar select.form-select,
body.site-theme-preview #pos-dashboard-toolbar .form-control,
body.site-theme-preview #pos-dashboard-toolbar .form-select {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

#pos-dashboard-toolbar .form-control:focus,
#pos-dashboard-toolbar .form-select:focus {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.35) !important;
}

body.site-theme-preview #pos-dashboard-toolbar .form-control:focus,
body.site-theme-preview #pos-dashboard-toolbar .form-select:focus {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 38%,
        #cbd5e1
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-accent, #3f7f58) 16%, transparent) !important;
}

/* POS dashboard toolbar: small screens — stack groups, full-width segmented control */
@media (max-width: 767.98px) {
    #pos-dashboard-toolbar.pos-dashboard-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }

    #pos-dashboard-toolbar .pos-dashboard-toolbar__group {
        width: 100%;
        min-width: 0;
    }

    #pos-dashboard-toolbar .pos-dashboard-toolbar__control {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
    }

    #pos-dashboard-toolbar .pos-dashboard-toolbar__btn-group {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #pos-dashboard-toolbar .pos-dashboard-toolbar__btn-group > .btn {
        flex: 0 0 auto;
        min-width: max-content;
        font-size: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Select2 (reports / filters) */
body.site-theme-preview
    .dash-content
    .select2-container--bootstrap-5
    .select2-selection,
body.site-theme-preview
    .dash-content
    .select2-container--default
    .select2-selection--single {
    background-color: var(--preview-search-bg, #deeee4) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
    color: var(--preview-search-fg, #26415f) !important;
    min-height: 38px !important;
}

body.site-theme-preview
    .dash-content
    .select2-container
    .select2-selection__rendered {
    color: var(--preview-search-fg, #26415f) !important;
}

body.site-theme-preview
    .dash-content
    .select2-container
    .select2-selection__arrow
    b {
    border-color: var(--preview-search-fg, #26415f) transparent transparent
        transparent !important;
}

/*
 * Footer: stock style.css uses margin-left: 255px + width calc(100% - 255px), so the band *under*
 * the sidebar shows the body/canvas color — looks like a random “strip” on the left. Full-width
 * background + padding keeps text aligned with main content.
 */
body.site-theme-preview .dash-footer {
    background: var(--preview-site-canvas-bg) !important;
    border-top: 1px solid var(--preview-site-header-border) !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 30px 10px calc(255px + 30px) !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    body.site-theme-preview .dash-footer {
        padding-left: 30px !important;
    }
}

body.site-theme-preview .dash-footer .text-muted {
    color: var(
        --preview-site-content-muted,
        var(--preview-text-muted, #6b7280)
    ) !important;
}

/*
 * Checkboxes, radios, toggle switches — use Try Colors CTA (beats custom.css #deefff / #93c5fd).
 * Stock Bootstrap (style-rtl) + custom.css painted a fixed pale blue; these map to --preview-cta.
 */
body.site-theme-preview .form-check-input:focus {
    border-color: var(--preview-cta, #e65a28) !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-cta, #e65a28) 28%, transparent) !important;
}

body.site-theme-preview .form-check-input:checked,
body.site-theme-preview .form-switch .form-check-input:checked {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta, #e65a28) !important;
}

body.site-theme-preview .form-check-input:checked:focus {
    border-color: var(--preview-cta-hover, #c64d22) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-cta-hover, #c64d22) 30%, transparent) !important;
}

body.site-theme-preview .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta, #e65a28) !important;
}

/* Switch track when off — CTA tint (replaces flat white + gray thumb context) */
body.site-theme-preview .form-switch .form-check-input:not(:checked) {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 12%,
        #ffffff
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 38%,
        #cbd5e1
    ) !important;
}

body.site-theme-preview .form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2364748b'/%3e%3c/svg%3e") !important;
}

body.site-theme-preview .form-switch .form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-position: right center !important;
}

@supports not (background: color-mix(in srgb, red 1%, blue)) {
    body.site-theme-preview .form-switch .form-check-input:not(:checked) {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
    }
}

/* Links — accent; primary actions — CTA (site-wide, not only POS) */
body.site-theme-preview .dash-content a:not(.btn):not(.dash-link) {
    color: var(--preview-accent, #3f7f58);
}

/* Breadcrumb links: not accent — match trail (beats rule above via extra classes) */
body.site-theme-preview .dash-content .breadcrumb a:not(.btn):not(.dash-link) {
    color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 58%,
        var(--preview-site-content-muted)
    ) !important;
}

body.site-theme-preview
    .dash-content
    .breadcrumb
    a:not(.btn):not(.dash-link):hover,
body.site-theme-preview
    .dash-content
    .breadcrumb
    a:not(.btn):not(.dash-link):focus {
    color: var(--preview-site-content-fg) !important;
}

/* Current segment (often last): match page title weight */
body.site-theme-preview .dash-content .breadcrumb-item.active,
body.site-theme-preview .dash-content .breadcrumb-item[aria-current="page"],
body.site-theme-preview .dash-content .breadcrumb-item:last-child {
    color: var(--preview-site-content-fg) !important;
}

body.site-theme-preview
    .dash-content
    .breadcrumb-item.active
    a:not(.btn):not(.dash-link),
body.site-theme-preview
    .dash-content
    .breadcrumb-item[aria-current="page"]
    a:not(.btn):not(.dash-link),
body.site-theme-preview
    .dash-content
    .breadcrumb-item:last-child
    a:not(.btn):not(.dash-link) {
    color: var(--preview-site-content-fg) !important;
}

@supports not (color: color-mix(in srgb, red 1%, blue)) {
    body.site-theme-preview .dash-content .breadcrumb,
    body.site-theme-preview .dash-content .breadcrumb-item,
    body.site-theme-preview
        .dash-content
        .breadcrumb-item
        + .breadcrumb-item::before,
    body.site-theme-preview
        .dash-content
        .breadcrumb
        a:not(.btn):not(.dash-link) {
        color: var(--preview-site-content-muted) !important;
    }
}

body.site-theme-preview .dash-content .btn-primary,
body.site-theme-preview .dash-content .btn.btn-primary {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .dash-content .btn-primary:hover,
body.site-theme-preview .dash-content .btn.btn-primary:hover,
body.site-theme-preview .dash-content .btn-primary:focus,
body.site-theme-preview .dash-content .btn.btn-primary:focus {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .dash-content .btn-outline-primary {
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    background-color: transparent !important;
}

body.site-theme-preview .dash-content .btn-outline-primary:hover,
body.site-theme-preview .dash-content .btn-outline-primary:focus {
    background-color: var(--preview-cta, #e65a28) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

/* Document Drive + modals: custom.css .action-btn-primary uses fixed blue — map to CTA when theme preview is on */
body.site-theme-preview .dash-content .action-btn-primary {
    background-color: var(--preview-cta, #e65a28) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    border: 1px solid var(--preview-cta-border-edge) !important;
}
body.site-theme-preview .dash-content .action-btn-primary:hover,
body.site-theme-preview .dash-content .action-btn-primary:focus {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

/* Secondary / neutral — Cancel, btn-secondary, outline-secondary, reports Reset (JS: buildNeutralSecondaryTokens) */
body.site-theme-preview .dash-content .btn-secondary,
body.site-theme-preview .dash-content .btn.btn-secondary {
    background-color: var(--preview-secondary-solid-bg, #e2e8f0) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-solid-border, #94a3b8) !important;
    color: var(--preview-secondary-solid-fg, #334155) !important;
}

body.site-theme-preview .dash-content .btn-secondary:hover,
body.site-theme-preview .dash-content .btn-secondary:focus,
body.site-theme-preview .dash-content .btn.btn-secondary:hover,
body.site-theme-preview .dash-content .btn.btn-secondary:focus {
    background-color: var(
        --preview-secondary-solid-hover-bg,
        #cbd5e1
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-secondary-solid-hover-border,
        #64748b
    ) !important;
    color: var(--preview-secondary-solid-hover-fg, #1e293b) !important;
}

body.site-theme-preview .dash-content .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview .dash-content .btn-outline-secondary:hover,
body.site-theme-preview .dash-content .btn-outline-secondary:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

/*
 * Secondary / outline-secondary: do not add outer box-shadow hairlines — Bootstrap already uses border:1px,
 * and stacking 1px shadow rings looked like a double border. Edge contrast for very light presets stays in
 * theme-preview-tokens.js (--preview-secondary-*-border). Keyboard focus: one ring only.
 * (Primary CTA no longer gets an extra 1px box-shadow here — border + shadow read as double.)
 */
body.site-theme-preview
    .btn.btn-secondary:focus-visible:not(:disabled):not(.disabled),
body.site-theme-preview
    .btn.btn-outline-secondary:focus-visible:not(:disabled):not(.disabled) {
    box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.28) !important;
}

body.site-theme-preview
    .btn.btn-outline-danger:focus-visible:not(:disabled):not(.disabled) {
    box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.26) !important;
}

/*
 * Listing toolbar (page header): Import / Export often stay as .btn-primary in markup.
 * Present as outline — solid CTA reserved for Create / Add. Heuristic: :has(.ti-file-import) / export href.
 * Blend with --preview-site-content-fg so label + border stay visible on dark canvases (plain secondary
 * grey was invisible on #27272a-class backgrounds).
 */
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-import),
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-export),
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="/export"],
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="export"] {
    color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 78%,
        var(--preview-secondary-outline-fg, #64748b)
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 42%,
        transparent
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 6%,
        transparent
    ) !important;
}

body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-import):hover,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-import):focus,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-export):hover,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary:has(.ti-file-export):focus,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="/export"]:hover,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="/export"]:focus,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="export"]:hover,
body.site-theme-preview
    .dash-content
    .page-header
    a.btn.btn-primary[href*="export"]:focus {
    color: var(--preview-site-content-fg) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 58%,
        transparent
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 14%,
        transparent
    ) !important;
}

/* Same issue when markup uses .btn-outline-secondary in the header action column */
body.site-theme-preview
    .dash-content
    .page-header
    .action-btn-col
    .btn.btn-outline-secondary {
    color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 80%,
        var(--preview-secondary-outline-fg, #64748b)
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 42%,
        transparent
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 6%,
        transparent
    ) !important;
}

body.site-theme-preview
    .dash-content
    .page-header
    .action-btn-col
    .btn.btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    .page-header
    .action-btn-col
    .btn.btn-outline-secondary:focus {
    color: var(--preview-site-content-fg) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 58%,
        transparent
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-site-content-fg) 14%,
        transparent
    ) !important;
}

/* Table row actions: danger outline = red border, not pink fill (custom.css legacy scoped off) */
body.site-theme-preview .dash-content .btn-outline-danger {
    color: var(--preview-semantic-danger, #b83232) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-semantic-danger, #b83232) !important;
    background-color: transparent !important;
}

body.site-theme-preview .dash-content .btn-outline-danger:hover,
body.site-theme-preview .dash-content .btn-outline-danger:focus {
    background-color: var(--preview-semantic-danger, #b83232) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-semantic-danger-hover, #a02c2c) !important;
    color: var(--preview-semantic-danger-on, #ffffff) !important;
}

/*
 * List / DataTable row Action column: outline-primary + outline-info → neutral secondary (same as warehouse listings).
 * Page-level CTAs stay CTA orange via other rules; row icon buttons are not page CTAs.
 */
body.site-theme-preview .dash-content table td.Action .btn-outline-primary,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-primary,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-primary,
body.site-theme-preview .dash-content table td.Action .btn-outline-info,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-info,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-info {
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview
    .dash-content
    table
    td.Action
    .btn-outline-primary:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .btn-outline-primary:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-primary:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-primary:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-primary:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-primary:focus,
body.site-theme-preview .dash-content table td.Action .btn-outline-info:hover,
body.site-theme-preview .dash-content table td.Action .btn-outline-info:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-info:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-info:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-info:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-info:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

body.site-theme-preview .dash-content table td.Action .btn-outline-primary i,
body.site-theme-preview .dash-content table td.Action .btn-outline-info i {
    color: inherit !important;
    opacity: 1 !important;
}

body.site-theme-preview .dash-content table td.Action .btn-outline-danger,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-danger,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-danger {
    color: var(--bs-danger, #dc3545) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-danger, #dc3545) !important;
    background-color: transparent !important;
}

body.site-theme-preview .dash-content table td.Action .btn-outline-danger:hover,
body.site-theme-preview .dash-content table td.Action .btn-outline-danger:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-danger:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    > .d-flex
    .btn-outline-danger:focus,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-danger:hover,
body.site-theme-preview
    .dash-content
    table
    td.Action
    .table-action-btns
    .btn-outline-danger:focus {
    background-color: var(--bs-danger, #dc3545) !important;
    border-color: var(--bs-danger, #bb2d3b) !important;
    color: #ffffff !important;
}

body.site-theme-preview .dash-content .badge.bg-secondary {
    background-color: var(--preview-secondary, #64748b) !important;
    color: var(--preview-secondary-badge-fg, #ffffff) !important;
}

body.site-theme-preview .modal .btn-secondary,
body.site-theme-preview .modal .btn.btn-secondary {
    background-color: var(--preview-secondary-solid-bg, #e2e8f0) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-solid-border, #94a3b8) !important;
    color: var(--preview-secondary-solid-fg, #334155) !important;
}

body.site-theme-preview .modal .btn-secondary:hover,
body.site-theme-preview .modal .btn-secondary:focus,
body.site-theme-preview .modal .btn.btn-secondary:hover,
body.site-theme-preview .modal .btn.btn-secondary:focus {
    background-color: var(
        --preview-secondary-solid-hover-bg,
        #cbd5e1
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-secondary-solid-hover-border,
        #64748b
    ) !important;
    color: var(--preview-secondary-solid-hover-fg, #1e293b) !important;
}

body.site-theme-preview .modal .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview .modal .btn-outline-secondary:hover,
body.site-theme-preview .modal .btn-outline-secondary:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

/* Search Invoice modal: warehouse dropdown — card surface + accent-colored chevron (stroke tracks brand purple / preview accent). */
body.site-theme-preview
    #search-invoice-modal
    select.form-select:not(:disabled) {
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    color: var(--preview-site-card-fg, #1e293b) !important;
    border-color: var(--preview-border-tint, #cbd5e1) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2351459d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 6 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

body.site-theme-preview
    #search-invoice-modal
    select.form-select:not(:disabled):focus {
    border-color: color-mix(
        in srgb,
        var(--preview-accent, #51459d) 42%,
        var(--preview-border-tint, #cbd5e1)
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-accent, #51459d) 18%, transparent) !important;
}

/* POS shell has no .dash-content — same secondary tokens on product/cart column */
body.site-theme-preview .pos-layout-v2 .btn-secondary,
body.site-theme-preview .pos-layout-v2 .btn.btn-secondary {
    background-color: var(--preview-secondary-solid-bg, #e2e8f0) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-solid-border, #94a3b8) !important;
    color: var(--preview-secondary-solid-fg, #334155) !important;
}

body.site-theme-preview .pos-layout-v2 .btn-secondary:hover,
body.site-theme-preview .pos-layout-v2 .btn-secondary:focus,
body.site-theme-preview .pos-layout-v2 .btn.btn-secondary:hover,
body.site-theme-preview .pos-layout-v2 .btn.btn-secondary:focus {
    background-color: var(
        --preview-secondary-solid-hover-bg,
        #cbd5e1
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-secondary-solid-hover-border,
        #64748b
    ) !important;
    color: var(--preview-secondary-solid-hover-fg, #1e293b) !important;
}

body.site-theme-preview .pos-layout-v2 .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview .pos-layout-v2 .btn-outline-secondary:hover,
body.site-theme-preview .pos-layout-v2 .btn-outline-secondary:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

body.site-theme-preview .pos-layout-v2 .badge.bg-secondary {
    background-color: var(--preview-secondary, #64748b) !important;
    color: var(--preview-secondary-badge-fg, #ffffff) !important;
}

/*
 * layouts/pos.blade.php: main yield lives in .container-fluid (no .dash-content).
 * EOD report, etc. — CTA primary + secondary; .btn-success already uses global .btn-success block below.
 */
body.site-theme-preview:not(.admin-shell-stacked) .container-fluid .btn-primary,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-primary {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-primary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-primary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-primary:focus,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-primary:focus {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-primary {
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    background-color: transparent !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-primary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-primary:focus {
    background-color: var(--preview-cta, #e65a28) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-secondary,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-secondary {
    background-color: var(--preview-secondary-solid-bg, #e2e8f0) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-solid-border, #94a3b8) !important;
    color: var(--preview-secondary-solid-fg, #334155) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-secondary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-secondary:focus,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-secondary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn.btn-secondary:focus {
    background-color: var(
        --preview-secondary-solid-hover-bg,
        #cbd5e1
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-secondary-solid-hover-border,
        #64748b
    ) !important;
    color: var(--preview-secondary-solid-hover-fg, #1e293b) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-secondary:hover,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .btn-outline-secondary:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .badge.bg-secondary {
    background-color: var(--preview-secondary, #64748b) !important;
    color: var(--preview-secondary-badge-fg, #ffffff) !important;
}

/* POS pages (layouts/pos): accent for links, .text-primary, EOD summary tiles, tabs — same as .dash-content */
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    a:not(.btn):not(.page-link):not(.nav-link) {
    color: var(--preview-accent, #3f7f58);
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .text-primary {
    color: var(
        --preview-accent-readable-on-white,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .summary-item.text-primary {
    background-color: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 12%,
        transparent
    ) !important;
    color: var(
        --preview-accent-readable-on-white,
        var(--preview-accent, #2f6141)
    ) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .card-header.bg-primary.bg-opacity-10 {
    background: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 12%,
        transparent
    ) !important;
    border-bottom: 1px solid
        color-mix(in srgb, var(--preview-accent, #3f7f58) 24%, transparent) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .card-header.bg-primary.bg-opacity-10
    .text-white {
    color: var(
        --preview-accent-dark-readable-on-white,
        var(--preview-accent, #2f6141)
    ) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .nav-tabs
    .nav-link.active,
body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .nav-tabs
    .nav-link.active:focus {
    color: var(--preview-accent, #3f7f58) !important;
    border-color: var(--preview-accent, #3f7f58) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .nav-tabs
    .nav-link:hover:not(.active) {
    color: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 85%,
        #334155
    ) !important;
}

body.site-theme-preview:not(.admin-shell-stacked)
    .container-fluid
    .page-item.active
    .page-link {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .dash-content .page-item.active .page-link {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

/* List footers: current page = CTA outline (not solid) — avoids competing with one solid “Add” / primary toolbar CTA */
body.site-theme-preview
    .dash-content
    .pagination-section
    .page-item.active
    > .page-link {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 16%,
        #ffffff
    ) !important;
    border-color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
}

/*
 * Listing pagination: custom.css + Bootstrap theme-6 use blue hovers / active blues.
 * Scope neutral + CTA hover/focus to .pagination-section so Try Colors stay consistent.
 */
body.site-theme-preview
    .dash-content
    .pagination-section
    .pagination
    .page-link {
    color: var(--preview-text, #2d3d2f) !important;
    background-color: #ffffff !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

body.site-theme-preview
    .dash-content
    .pagination-section
    .pagination
    .page-link:hover {
    color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 12%,
        #ffffff
    ) !important;
    border-color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    font-weight: 600 !important;
}

body.site-theme-preview
    .dash-content
    .pagination-section
    .pagination
    .page-link:focus {
    color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 12%,
        #ffffff
    ) !important;
    border-color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-cta, #e65a28) 28%, transparent) !important;
}

body.site-theme-preview
    .dash-content
    .pagination-section
    .page-item.active
    > .page-link:hover,
body.site-theme-preview
    .dash-content
    .pagination-section
    .page-item.active
    > .page-link:focus {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 18%,
        #ffffff
    ) !important;
    border-color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    color: var(
        --preview-cta-hover-readable-on-light,
        var(--preview-cta-hover, #c64d22)
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-cta, #e65a28) 28%, transparent) !important;
}

body.site-theme-preview
    .dash-content
    .pagination-section
    .pagination
    .page-item.disabled
    .page-link {
    color: var(--preview-site-content-muted, #6b7280) !important;
    background-color: #ffffff !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
}

/* Modals are often outside .dash-content — keep CTA on primary actions */
body.site-theme-preview .modal .btn-primary,
body.site-theme-preview .modal .btn.btn-primary,
body.site-theme-preview .modal input.btn-primary,
body.site-theme-preview .modal input.btn.btn-primary,
body.site-theme-preview .modal button.btn-primary,
body.site-theme-preview .modal button.btn.btn-primary {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .modal .btn-primary:hover,
body.site-theme-preview .modal .btn.btn-primary:hover,
body.site-theme-preview .modal input.btn-primary:hover,
body.site-theme-preview .modal input.btn.btn-primary:hover,
body.site-theme-preview .modal button.btn-primary:hover,
body.site-theme-preview .modal button.btn.btn-primary:hover,
body.site-theme-preview .modal .btn-primary:focus,
body.site-theme-preview .modal .btn.btn-primary:focus,
body.site-theme-preview .modal .btn-primary:focus-visible,
body.site-theme-preview .modal .btn.btn-primary:focus-visible,
body.site-theme-preview .modal button.btn-primary:focus,
body.site-theme-preview .modal button.btn-primary:focus-visible {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

/* Modals often sit outside .dash-content — match borders + ajax popup header to Try Colors */
body.site-theme-preview .modal-content {
    border-radius: var(--preview-ui-radius, 8px);
    border: 1px solid
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 45%, #e2e8f0);
    overflow: hidden;
    /* Stock Bootstrap sets color: var(--bs-modal-color); empty var breaks contrast for labels/body text */
    color: var(--preview-site-card-fg, #1f2937) !important;
    background-color: var(--preview-site-card-bg, #ffffff) !important;
}

body.site-theme-preview .modal-header:not(.modal-header-cta-fill) .modal-title {
    color: var(--preview-site-card-fg, #1f2937) !important;
}

body.site-theme-preview .modal-content .form-label,
body.site-theme-preview .modal-content .col-form-label,
body.site-theme-preview .modal-content .form-check-label {
    color: var(--preview-site-card-fg, #1f2937) !important;
}

/*
 * Modals sit inside .dash-content: match text inputs + selects to the same dashboard filter strip
 * as the rest of admin (preview-search-*), so Name and Track time in share one surface style.
 * Labels stay on --preview-site-card-fg via .modal-content rules above.
 */
body.site-theme-preview .dash-content .modal .form-control:not(.btn):not(.form-control-color):not([type="file"]),
body.site-theme-preview .dash-content .modal textarea.form-control,
body.site-theme-preview .dash-content .modal .form-select,
body.site-theme-preview .dash-content .modal select.form-control,
body.site-theme-preview .dash-content .modal select.form-select {
    background-color: var(--preview-search-bg, #deeee4) !important;
    color: var(--preview-search-fg, #26415f) !important;
    border-color: var(--preview-border-tint, #c7e0d3) !important;
    min-height: 2.35rem;
}

body.site-theme-preview .dash-content .modal textarea.form-control {
    min-height: auto;
}

body.site-theme-preview .dash-content .modal .form-control::placeholder,
body.site-theme-preview .dash-content .modal textarea.form-control::placeholder {
    color: var(--preview-search-ph, #6f8197) !important;
    opacity: 1;
}

body.site-theme-preview .dash-content .modal .form-control:focus,
body.site-theme-preview .dash-content .modal .form-select:focus,
body.site-theme-preview .dash-content .modal select.form-control:focus,
body.site-theme-preview .dash-content .modal select.form-select:focus {
    background-color: var(--preview-search-bg, #deeee4) !important;
    color: var(--preview-search-fg, #26415f) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-accent, #3f7f58) 42%,
        var(--preview-border-tint, #c7e0d3)
    ) !important;
    box-shadow: 0 0 0 0.2rem
        color-mix(in srgb, var(--preview-accent, #3f7f58) 18%, transparent) !important;
}

body.site-theme-preview .modal-header {
    border-bottom-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 55%,
        #e5e7eb
    );
}
body.site-theme-preview .modal-footer {
    border-top-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 55%,
        #e5e7eb
    );
}
/* Replaces legacy inline #228efd on #commonModal (admin ajax popups) */
body.site-theme-preview .modal-header.modal-header-cta-fill {
    background: var(--preview-cta, #e65a28) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    border-bottom: none !important;
    border-radius: var(--preview-ui-radius, 8px) var(--preview-ui-radius, 8px) 0
        0;
}
body.site-theme-preview .modal-header.modal-header-cta-fill .modal-title {
    color: inherit !important;
}

/* #commonModal (ajax): per-row remove — outline secondary tokens, not default <a> blue */
body.site-theme-preview
    #commonModal
    .modal-inline-remove.btn-outline-secondary {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.site-theme-preview .modal .btn-outline-primary {
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #e65a28)
    ) !important;
    background-color: transparent !important;
}
body.site-theme-preview .modal .btn-outline-primary:hover,
body.site-theme-preview .modal .btn-outline-primary:focus {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}
body.site-theme-preview .modal .btn-outline-danger {
    color: var(--preview-semantic-danger, #b83232) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--preview-semantic-danger, #b83232) !important;
    background-color: transparent !important;
}
body.site-theme-preview .modal .btn-outline-danger:hover,
body.site-theme-preview .modal .btn-outline-danger:focus {
    background-color: var(--preview-semantic-danger, #b83232) !important;
    border-color: var(--preview-semantic-danger-hover, #a02c2c) !important;
    color: var(--preview-semantic-danger-on, #ffffff) !important;
}

/*
 * Beat custom.css “modern sidebar” + body.theme-6 rules (higher specificity than earlier site-theme block).
 * Fixes invisible menu labels (e.g. white-on-white) when tokens apply.
 */
body.site-theme-preview .dash-sidebar .dash-caption {
    color: var(--preview-site-sidebar-muted) !important;
}

body.site-theme-preview .dash-sidebar .dash-navbar > .dash-item > .dash-link {
    color: var(--preview-site-sidebar-fg) !important;
    background: transparent !important;
    border-left-color: transparent !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-mtext,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-micon
    svg {
    color: var(--preview-site-sidebar-fg) !important;
    stroke: var(--preview-site-sidebar-fg) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link:hover {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-active-bg) 70%,
        var(--preview-site-sidebar-bg)
    ) !important;
    color: var(--preview-site-sidebar-fg) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link:hover
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link:hover
    .dash-arrow
    i {
    color: var(--preview-site-sidebar-fg) !important;
    stroke: var(--preview-site-sidebar-fg) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link {
    background: var(--preview-site-sidebar-active-bg) !important;
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    border-left-color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-mtext,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-arrow
    i {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    stroke: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview .dash-sidebar .dash-submenu {
    border-left: none !important;
}

body.site-theme-preview .dash-sidebar .dash-submenu .dash-item > .dash-link {
    color: var(--preview-site-sidebar-muted) !important;
    background: transparent !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item
    > .dash-link:hover,
body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item.active
    > .dash-link {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 14%,
        var(--preview-site-sidebar-bg)
    ) !important;
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item.active
    > .dash-link
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-submenu
    .dash-item
    > .dash-link:hover
    .dash-micon
    i {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    stroke: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview.theme-6
    .dash-sidebar.light-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link,
body.site-theme-preview.theme-6
    .dash-sidebar.light-sidebar
    .dash-navbar
    > .dash-item:hover
    > .dash-link,
body.site-theme-preview.theme-6
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link,
body.site-theme-preview.theme-6
    .dash-sidebar
    .dash-navbar
    > .dash-item:hover
    > .dash-link {
    background: var(--preview-site-sidebar-active-bg) !important;
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    box-shadow: none !important;
}

body.site-theme-preview.theme-6
    .dash-sidebar.light-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    i,
body.site-theme-preview.theme-6
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    i {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

/* Logo strip: avoid a bright white block on a dark sidebar */
body.site-theme-preview .dash-sidebar .m-header {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-bg) 94%,
        #000000
    ) !important;
    border-bottom: 1px solid var(--preview-site-sidebar-border) !important;
}

/* Pinned bottom nav separator (User Management / Global Settings) */
body.site-theme-preview
    .dash-sidebar
    .navbar-content
    .dash-navbar.dash-navbar-bottom {
    border-top-color: color-mix(
        in srgb,
        var(--preview-site-sidebar-border) 85%,
        transparent
    ) !important;
}

/* Menu icon tiles: replace hardcoded blue from custom.css */
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link
    .dash-micon {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-fg) 7%,
        var(--preview-site-sidebar-bg)
    ) !important;
    border: 1px solid
        color-mix(in srgb, var(--preview-site-sidebar-fg) 10%, transparent) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item
    > .dash-link:hover
    .dash-micon {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 18%,
        var(--preview-site-sidebar-bg)
    ) !important;
}

/* Active icon tile: match hover weight (subtle tint) — strong accent mix + white glyph looked like a blurred double border */
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-micon {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 22%,
        var(--preview-site-sidebar-bg)
    ) !important;
    border: 1px solid
        color-mix(
            in srgb,
            var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 32%,
            transparent
        ) !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link
    .dash-micon
    svg {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    stroke: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

/* POS nav item: same accent system as the rest */
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos:hover
    > .dash-link,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos.active
    > .dash-link {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 18%,
        var(--preview-site-sidebar-bg)
    ) !important;
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    border-left-color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos.active
    > .dash-link
    .dash-micon {
    background: color-mix(
        in srgb,
        var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 22%,
        var(--preview-site-sidebar-bg)
    ) !important;
    border: 1px solid
        color-mix(
            in srgb,
            var(--preview-site-sidebar-accent-fg, var(--preview-accent)) 32%,
            transparent
        ) !important;
}

body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos.active
    > .dash-link
    .dash-micon
    i,
body.site-theme-preview
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos.active
    > .dash-link
    .dash-micon
    svg {
    color: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
    stroke: var(
        --preview-site-sidebar-accent-fg,
        var(--preview-accent, #3f7f58)
    ) !important;
}

/* Minimenu rail: theme + theme-6 paint full .dash-link on hover — clashes with 80px width; keep row transparent; icon tiles only */
body.site-theme-preview.theme-6
    .minimenu
    .dash-sidebar.light-sidebar
    .dash-navbar
    > .dash-item:hover
    > .dash-link,
body.site-theme-preview.theme-6
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item:hover
    > .dash-link,
body.site-theme-preview.theme-6
    .minimenu
    .dash-sidebar.light-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link,
body.site-theme-preview.theme-6
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link,
body.site-theme-preview
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item:hover
    > .dash-link,
body.site-theme-preview
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item.active
    > .dash-link {
    background: transparent !important;
    color: inherit !important;
    border-left-color: transparent !important;
}

body.site-theme-preview
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos:hover
    > .dash-link,
body.site-theme-preview
    .minimenu
    .dash-sidebar
    .dash-navbar
    > .dash-item.dash-item-pos.active
    > .dash-link {
    background: transparent !important;
    color: inherit !important;
    border-left-color: transparent !important;
}

/*
 * Semantic Bootstrap colors (success / warning / info / danger) — mixed from Accent in theme-preview-tokens.js.
 * style.css hard-codes .btn-* and .text-bg-*; we override here. .bg-* / .text-* / .border-* use --bs-*-rgb from JS.
 */
body.site-theme-preview .text-bg-success {
    color: var(--preview-semantic-success-on, #fff) !important;
    background-color: rgba(
        var(--preview-semantic-success-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

body.site-theme-preview .text-bg-warning {
    color: var(--preview-semantic-warning-on, #fff) !important;
    background-color: rgba(
        var(--preview-semantic-warning-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

body.site-theme-preview .text-bg-info {
    color: var(--preview-semantic-info-on, #fff) !important;
    background-color: rgba(
        var(--preview-semantic-info-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

body.site-theme-preview .text-bg-danger {
    color: var(--preview-semantic-danger-on, #fff) !important;
    background-color: rgba(
        var(--preview-semantic-danger-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}

body.site-theme-preview .btn-success {
    --bs-btn-color: var(--preview-semantic-success-on);
    --bs-btn-bg: var(--preview-semantic-success);
    --bs-btn-border-color: var(--preview-semantic-success);
    --bs-btn-hover-color: var(--preview-semantic-success-on);
    --bs-btn-hover-bg: var(--preview-semantic-success-hover);
    --bs-btn-hover-border-color: var(--preview-semantic-success-hover);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-success-rgb);
    --bs-btn-active-color: var(--preview-semantic-success-on);
    --bs-btn-active-bg: var(--preview-semantic-success-active);
    --bs-btn-active-border-color: var(--preview-semantic-success-active);
    --bs-btn-disabled-color: var(--preview-semantic-success-on);
    --bs-btn-disabled-bg: var(--preview-semantic-success);
    --bs-btn-disabled-border-color: var(--preview-semantic-success);
}

body.site-theme-preview .btn-warning {
    --bs-btn-color: var(--preview-semantic-warning-on);
    --bs-btn-bg: var(--preview-semantic-warning);
    --bs-btn-border-color: var(--preview-semantic-warning);
    --bs-btn-hover-color: var(--preview-semantic-warning-on);
    --bs-btn-hover-bg: var(--preview-semantic-warning-hover);
    --bs-btn-hover-border-color: var(--preview-semantic-warning-hover);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-warning-rgb);
    --bs-btn-active-color: var(--preview-semantic-warning-on);
    --bs-btn-active-bg: var(--preview-semantic-warning-active);
    --bs-btn-active-border-color: var(--preview-semantic-warning-active);
    --bs-btn-disabled-color: var(--preview-semantic-warning-on);
    --bs-btn-disabled-bg: var(--preview-semantic-warning);
    --bs-btn-disabled-border-color: var(--preview-semantic-warning);
}

body.site-theme-preview .btn-info {
    --bs-btn-color: var(--preview-semantic-info-on);
    --bs-btn-bg: var(--preview-semantic-info);
    --bs-btn-border-color: var(--preview-semantic-info);
    --bs-btn-hover-color: var(--preview-semantic-info-on);
    --bs-btn-hover-bg: var(--preview-semantic-info-hover);
    --bs-btn-hover-border-color: var(--preview-semantic-info-hover);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-info-rgb);
    --bs-btn-active-color: var(--preview-semantic-info-on);
    --bs-btn-active-bg: var(--preview-semantic-info-active);
    --bs-btn-active-border-color: var(--preview-semantic-info-active);
    --bs-btn-disabled-color: var(--preview-semantic-info-on);
    --bs-btn-disabled-bg: var(--preview-semantic-info);
    --bs-btn-disabled-border-color: var(--preview-semantic-info);
}

body.site-theme-preview .btn-danger {
    --bs-btn-color: var(--preview-semantic-danger-on);
    --bs-btn-bg: var(--preview-semantic-danger);
    --bs-btn-border-color: var(--preview-semantic-danger);
    --bs-btn-hover-color: var(--preview-semantic-danger-on);
    --bs-btn-hover-bg: var(--preview-semantic-danger-hover);
    --bs-btn-hover-border-color: var(--preview-semantic-danger-hover);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-danger-rgb);
    --bs-btn-active-color: var(--preview-semantic-danger-on);
    --bs-btn-active-bg: var(--preview-semantic-danger-active);
    --bs-btn-active-border-color: var(--preview-semantic-danger-active);
    --bs-btn-disabled-color: var(--preview-semantic-danger-on);
    --bs-btn-disabled-bg: var(--preview-semantic-danger);
    --bs-btn-disabled-border-color: var(--preview-semantic-danger);
}

body.site-theme-preview .btn-outline-success {
    --bs-btn-color: var(--preview-semantic-success);
    --bs-btn-border-color: var(--preview-semantic-success);
    --bs-btn-hover-color: var(--preview-semantic-success-on);
    --bs-btn-hover-bg: var(--preview-semantic-success);
    --bs-btn-hover-border-color: var(--preview-semantic-success);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-success-rgb);
    --bs-btn-active-color: var(--preview-semantic-success-on);
    --bs-btn-active-bg: var(--preview-semantic-success-active);
    --bs-btn-active-border-color: var(--preview-semantic-success-active);
    --bs-btn-disabled-color: var(--preview-semantic-success);
    --bs-btn-disabled-border-color: var(--preview-semantic-success);
}

body.site-theme-preview .btn-outline-warning {
    --bs-btn-color: var(--preview-semantic-warning);
    --bs-btn-border-color: var(--preview-semantic-warning);
    --bs-btn-hover-color: var(--preview-semantic-warning-on);
    --bs-btn-hover-bg: var(--preview-semantic-warning);
    --bs-btn-hover-border-color: var(--preview-semantic-warning);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-warning-rgb);
    --bs-btn-active-color: var(--preview-semantic-warning-on);
    --bs-btn-active-bg: var(--preview-semantic-warning-active);
    --bs-btn-active-border-color: var(--preview-semantic-warning-active);
    --bs-btn-disabled-color: var(--preview-semantic-warning);
    --bs-btn-disabled-border-color: var(--preview-semantic-warning);
}

body.site-theme-preview .btn-outline-info {
    --bs-btn-color: var(--preview-semantic-info);
    --bs-btn-border-color: var(--preview-semantic-info);
    --bs-btn-hover-color: var(--preview-semantic-info-on);
    --bs-btn-hover-bg: var(--preview-semantic-info);
    --bs-btn-hover-border-color: var(--preview-semantic-info);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-info-rgb);
    --bs-btn-active-color: var(--preview-semantic-info-on);
    --bs-btn-active-bg: var(--preview-semantic-info-active);
    --bs-btn-active-border-color: var(--preview-semantic-info-active);
    --bs-btn-disabled-color: var(--preview-semantic-info);
    --bs-btn-disabled-border-color: var(--preview-semantic-info);
}

body.site-theme-preview .btn-outline-danger {
    --bs-btn-color: var(--preview-semantic-danger);
    --bs-btn-border-color: var(--preview-semantic-danger);
    --bs-btn-hover-color: var(--preview-semantic-danger-on);
    --bs-btn-hover-bg: var(--preview-semantic-danger);
    --bs-btn-hover-border-color: var(--preview-semantic-danger);
    --bs-btn-focus-shadow-rgb: var(--preview-semantic-danger-rgb);
    --bs-btn-active-color: var(--preview-semantic-danger-on);
    --bs-btn-active-bg: var(--preview-semantic-danger-active);
    --bs-btn-active-border-color: var(--preview-semantic-danger-active);
    --bs-btn-disabled-color: var(--preview-semantic-danger);
    --bs-btn-disabled-border-color: var(--preview-semantic-danger);
}

/* Account dashboard — filter strip base (applies with or without theme preview) */
.dash-content .dashboard-filter-card .card-body.dashboard-filter-card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: #f8faf9;
    border-radius: 12px;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Account dashboard — filter strip: breathing room + tint (not a flat white slab) */
body.site-theme-preview
    .dash-content
    .dashboard-filter-card
    .card-body.dashboard-filter-card-body {
    background: color-mix(
        in srgb,
        var(--preview-site-canvas-bg, #eef2f0) 92%,
        var(--preview-accent, #3f7f58) 8%
    ) !important;
    border-radius: 12px;
    border: none;
    /* Ring instead of border + inset (inset + radius often steps in WebKit) */
    box-shadow: 0 0 0 1px
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 85%, transparent);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview
        .dash-content
        .dashboard-filter-card
        .card-body.dashboard-filter-card-body {
        background: var(--preview-toolbar-active-bg, #eaf2ec) !important;
    }
}

/* Same corner radius as POS preview search strip (pos-layout-v2: .search-bar-left .input-group → 10px; not pill). */
.dash-content #dashboard_filter_form .dashboard-filter-control,
.dash-content #dashboard_filter_form .dashboard-reportrange-trigger {
    border-radius: 10px !important;
}

body.site-theme-preview
    .dash-content
    #dashboard_filter_form
    .dashboard-reportrange-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-height: 2.35rem;
    line-height: 1.35;
}

body.site-theme-preview
    .dash-content
    #dashboard_filter_form
    .dashboard-reportrange-end {
    color: var(--preview-search-fg, #26415f);
}

body.site-theme-preview
    .dash-content
    #dashboard_filter_form
    .dashboard-filter-control.form-select {
    padding-right: 2.25rem;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

body.site-theme-preview
    .dash-content
    #dashboard_filter_form
    label.form-label.small {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/*
 * Bootstrap daterangepicker is appended to document.body (not inside .dash-content).
 * Stock style.css uses purple (#51459d); wire ranges + calendar + footer buttons to theme tokens.
 */
body.site-theme-preview .daterangepicker {
    border-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 90%,
        transparent
    ) !important;
    box-shadow: 0 0.35rem 1.25rem
        color-mix(
            in srgb,
            var(--preview-accent, #3f7f58) 14%,
            rgba(15, 23, 42, 0.12)
        ) !important;
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .daterangepicker:before {
    border-bottom-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 85%,
        #94a3b8
    ) !important;
}

body.site-theme-preview .daterangepicker:after {
    border-bottom-color: var(--preview-site-card-bg, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .calendar-table {
    border-color: var(--preview-site-card-bg, #ffffff) !important;
    background-color: var(--preview-site-card-bg, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .calendar-table td,
body.site-theme-preview .daterangepicker .calendar-table th {
    color: var(--preview-site-card-fg, #1f2937) !important;
}
/* Date range input fields themselves — ensure legible text regardless of canvas darkness */
body.site-theme-preview .daterangepicker input.input-mini {
    color: var(--preview-site-card-fg, #1f2937) !important;
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    border-color: var(--preview-border-tint, #d1d5db) !important;
}

body.site-theme-preview .daterangepicker td.in-range {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 22%,
        var(--preview-site-canvas-bg, #eef4f0)
    ) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .daterangepicker td.active,
body.site-theme-preview .daterangepicker td.active:hover {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: transparent !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker td.available:hover,
body.site-theme-preview .daterangepicker th.available:hover {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker td.available:hover > span,
body.site-theme-preview .daterangepicker th.available:hover > span {
    border-color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .ranges li,
body.site-theme-preview .daterangepicker .ranges ul li {
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .daterangepicker .ranges li.active,
body.site-theme-preview .daterangepicker .ranges ul li.active {
    background-color: var(--preview-cta, #e65a28) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .ranges li:hover,
body.site-theme-preview .daterangepicker .ranges ul li:hover {
    box-shadow: none !important;
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #e65a28) 14%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .daterangepicker .ranges li.active:hover,
body.site-theme-preview .daterangepicker .ranges ul li.active:hover {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .drp-buttons {
    border-top-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 88%,
        transparent
    ) !important;
}

body.site-theme-preview .daterangepicker.show-ranges .drp-calendar.left {
    border-left-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 88%,
        transparent
    ) !important;
}

/* Apply / Cancel — picker is outside .dash-content; mirror CTA + neutral cancel */
body.site-theme-preview .daterangepicker .drp-buttons .btn.btn-primary,
body.site-theme-preview .daterangepicker .drp-buttons .applyBtn {
    background-color: var(--preview-cta, #e65a28) !important;
    border-color: var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .drp-buttons .btn.btn-primary:hover,
body.site-theme-preview .daterangepicker .drp-buttons .applyBtn:hover {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .daterangepicker .drp-buttons .btn.btn-default,
body.site-theme-preview .daterangepicker .drp-buttons .cancelBtn {
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 92%,
        #64748b
    ) !important;
    color: var(--preview-site-content-fg, #374151) !important;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview .daterangepicker td.in-range {
        background-color: var(--preview-toolbar-active-bg, #eaf2ec) !important;
    }

    body.site-theme-preview .daterangepicker .ranges li:hover,
    body.site-theme-preview .daterangepicker .ranges ul li:hover {
        background-color: var(--preview-toolbar-active-bg, #eaf2ec) !important;
    }
}

/*
 * Reports / data listings (search-filter-section, table-styles.css): reinforce secondary tokens.
 * table-styles stacks after this file — duplicate block there too so outline Reset wins over layout rules.
 */
body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-outline-secondary,
body.site-theme-preview .dash-content .data-listing-card .btn-outline-secondary,
body.site-theme-preview
    .dash-content
    .pagination-section
    .btn-outline-secondary,
body.site-theme-preview .dash-content .search-filter-section .btn-secondary,
body.site-theme-preview .dash-content .data-listing-card .btn-secondary {
    border-width: 1px !important;
    border-style: solid !important;
}

body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-outline-secondary,
body.site-theme-preview .dash-content .data-listing-card .btn-outline-secondary,
body.site-theme-preview
    .dash-content
    .pagination-section
    .btn-outline-secondary {
    color: var(--preview-secondary-outline-fg, #64748b) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    background-color: transparent !important;
}

body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-outline-secondary:focus,
body.site-theme-preview
    .dash-content
    .data-listing-card
    .btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    .data-listing-card
    .btn-outline-secondary:focus,
body.site-theme-preview
    .dash-content
    .pagination-section
    .btn-outline-secondary:hover,
body.site-theme-preview
    .dash-content
    .pagination-section
    .btn-outline-secondary:focus {
    background-color: var(
        --preview-secondary-outline-hover-bg,
        #f1f5f9
    ) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-secondary-outline-hover-fg, #334155) !important;
}

body.site-theme-preview .dash-content .search-filter-section .btn-secondary,
body.site-theme-preview .dash-content .data-listing-card .btn-secondary {
    background-color: var(--preview-secondary-solid-bg, #e2e8f0) !important;
    border-color: var(--preview-secondary-solid-border, #94a3b8) !important;
    color: var(--preview-secondary-solid-fg, #334155) !important;
}

body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-secondary:hover,
body.site-theme-preview
    .dash-content
    .search-filter-section
    .btn-secondary:focus,
body.site-theme-preview .dash-content .data-listing-card .btn-secondary:hover,
body.site-theme-preview .dash-content .data-listing-card .btn-secondary:focus {
    background-color: var(
        --preview-secondary-solid-hover-bg,
        #cbd5e1
    ) !important;
    border-color: var(
        --preview-secondary-solid-hover-border,
        #64748b
    ) !important;
    color: var(--preview-secondary-solid-hover-fg, #1e293b) !important;
}

/*
 * ---------------------------------------------------------------------------
 * Try Colors — reusable button & badge variants (Accent + CTA from FAB / JS).
 * Use with: class="btn btn-sm btn-preview-cta-ghost" etc. (body.site-theme-preview).
 * ---------------------------------------------------------------------------
 */
body.site-theme-preview .btn.btn-preview-cta-solid {
    background-color: var(--preview-cta, #1531b2) !important;
    border: 1px solid var(--preview-cta, #1531b2) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
body.site-theme-preview .btn.btn-preview-cta-solid:hover,
body.site-theme-preview .btn.btn-preview-cta-solid:focus {
    background-color: var(--preview-cta-hover, #0f2680) !important;
    border-color: var(--preview-cta-hover, #0f2680) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview .btn.btn-preview-cta-dim {
    background-color: var(--preview-cta, #1531b2) !important;
    border: 1px solid var(--preview-cta, #1531b2) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}
body.site-theme-preview .btn.btn-preview-cta-dim:hover,
body.site-theme-preview .btn.btn-preview-cta-dim:focus {
    background-color: color-mix(
        in srgb,
        var(--preview-cta, #1531b2) 88%,
        #000000
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--preview-cta, #1531b2) 88%,
        #000000
    ) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .btn.btn-preview-cta-outline {
    background-color: transparent !important;
    border: 1px solid
        var(--preview-cta-readable-on-light, var(--preview-cta, #1531b2)) !important;
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #1531b2)
    ) !important;
}
body.site-theme-preview .btn.btn-preview-cta-outline:hover,
body.site-theme-preview .btn.btn-preview-cta-outline:focus {
    background-color: var(--preview-cta, #1531b2) !important;
    border-color: var(--preview-cta, #1531b2) !important;
    color: var(--preview-cta-on, #ffffff) !important;
}

body.site-theme-preview .btn.btn-preview-cta-ghost {
    background-color: transparent !important;
    border: 1px solid
        var(--preview-cta-readable-on-light, var(--preview-cta, #1531b2)) !important;
    color: var(
        --preview-cta-readable-on-light,
        var(--preview-cta, #1531b2)
    ) !important;
}
body.site-theme-preview .btn.btn-preview-cta-ghost:hover,
body.site-theme-preview .btn.btn-preview-cta-ghost:focus {
    background-color: var(--preview-cta, #1531b2) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    border-color: var(--preview-cta, #1531b2) !important;
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview .btn.btn-preview-accent-soft {
        background: color-mix(
            in srgb,
            var(--preview-accent, #1da1f2) 14%,
            var(--preview-site-card-bg, #ffffff)
        ) !important;
        border: 1px solid
            color-mix(
                in srgb,
                var(--preview-accent, #1da1f2) 35%,
                var(--preview-site-card-bg, #ffffff)
            ) !important;
        color: var(
            --preview-accent-soft-btn-fg,
            var(
                --preview-accent-readable-on-white,
                var(--preview-accent, #1da1f2)
            )
        ) !important;
    }
    body.site-theme-preview .btn.btn-preview-accent-soft:hover,
    body.site-theme-preview .btn.btn-preview-accent-soft:focus {
        background: color-mix(
            in srgb,
            var(--preview-accent, #1da1f2) 24%,
            var(--preview-site-card-bg, #ffffff)
        ) !important;
        border-color: color-mix(
            in srgb,
            var(--preview-accent, #1da1f2) 45%,
            var(--preview-site-card-bg, #ffffff)
        ) !important;
        color: var(
            --preview-accent-soft-btn-hover-fg,
            var(
                --preview-accent-soft-btn-fg,
                var(
                    --preview-accent-readable-on-white,
                    var(--preview-accent, #1da1f2)
                )
            )
        ) !important;
    }
}

body.site-theme-preview .btn.btn-preview-accent-outline {
    background-color: transparent !important;
    border: 1px solid var(--preview-accent, #1da1f2) !important;
    color: var(--preview-accent, #1da1f2) !important;
}
body.site-theme-preview .btn.btn-preview-accent-outline:hover,
body.site-theme-preview .btn.btn-preview-accent-outline:focus {
    background: color-mix(
        in srgb,
        var(--preview-accent, #1da1f2) 18%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    border-color: var(--preview-accent, #1da1f2) !important;
    color: var(
        --preview-accent-readable-on-white,
        var(--preview-accent, #1da1f2)
    ) !important;
}

body.site-theme-preview .badge.badge-preview-cta {
    background-color: var(--preview-cta, #1531b2) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    font-weight: 600;
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview .badge.badge-preview-accent-soft {
        background: color-mix(
            in srgb,
            var(--preview-accent, #1da1f2) 12%,
            var(--preview-site-card-bg, #ffffff)
        ) !important;
        color: var(
            --preview-accent-soft-badge-fg,
            var(
                --preview-accent-readable-on-white,
                var(--preview-accent, #1da1f2)
            )
        ) !important;
        border: 1px solid
            color-mix(
                in srgb,
                var(--preview-accent, #1da1f2) 30%,
                var(--preview-site-card-bg, #ffffff)
            ) !important;
        font-weight: 600;
    }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    body.site-theme-preview .btn.btn-preview-accent-soft {
        background: #dbeafe !important;
        border: 1px solid #93c5fd !important;
        color: var(
            --preview-accent-soft-btn-fg,
            var(
                --preview-accent-readable-on-white,
                var(--preview-accent, #1da1f2)
            )
        ) !important;
    }
    body.site-theme-preview .badge.badge-preview-accent-soft {
        background: #dbeafe !important;
        color: var(
            --preview-accent-soft-badge-fg,
            var(
                --preview-accent-readable-on-white,
                var(--preview-accent, #1da1f2)
            )
        ) !important;
        border: 1px solid #93c5fd !important;
        font-weight: 600;
    }
}

/*
 * SweetAlert2 (custom.js .bs-pass-para / .bs-pass-para-pos): theme tokens instead of template violet (#51459d).
 */
body.site-theme-preview .swal2-popup.swal2-popup-try-theme {
    background: var(--preview-site-card-bg, #ffffff) !important;
    border: 1px solid
        color-mix(in srgb, var(--preview-border-tint, #c7e0d3) 55%, #e2e8f0) !important;
    border-radius: 12px !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview .swal2-popup.swal2-popup-try-theme .swal2-title {
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview
    .swal2-popup.swal2-popup-try-theme
    .swal2-html-container,
body.site-theme-preview .swal2-popup.swal2-popup-try-theme #swal2-content {
    color: var(--preview-site-content-muted, #6b7280) !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-confirm.swal2-btn-confirm-cta,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-confirm.swal2-btn-confirm-cta {
    background-color: var(--preview-cta, #e65a28) !important;
    border: 1px solid var(--preview-cta-border-edge) !important;
    color: var(--preview-cta-on, #ffffff) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-confirm.swal2-btn-confirm-cta:hover,
body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-confirm.swal2-btn-confirm-cta:focus,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-confirm.swal2-btn-confirm-cta:hover,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-confirm.swal2-btn-confirm-cta:focus {
    background-color: var(--preview-cta-hover, #c64d22) !important;
    border-color: var(--preview-cta-hover-border-edge) !important;
    color: var(--preview-cta-hover-on, #ffffff) !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-confirm.swal2-btn-confirm-cta:focus,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-confirm.swal2-btn-confirm-cta:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.28) !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-cancel.swal2-btn-cancel-outline,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-cancel.swal2-btn-cancel-outline {
    background-color: var(--preview-site-card-bg, #ffffff) !important;
    border: 1px solid var(--preview-border-tint, #c7e0d3) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-cancel.swal2-btn-cancel-outline:hover,
body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-cancel.swal2-btn-cancel-outline:focus,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-cancel.swal2-btn-cancel-outline:hover,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-cancel.swal2-btn-cancel-outline:focus {
    background-color: color-mix(
        in srgb,
        var(--preview-border-tint, #c7e0d3) 12%,
        var(--preview-site-card-bg, #ffffff)
    ) !important;
    border-color: var(--preview-secondary-outline-border, #64748b) !important;
    color: var(--preview-site-content-fg, #1f2937) !important;
}

body.site-theme-preview
    .swal2-popup
    .swal2-actions
    .swal2-cancel.swal2-btn-cancel-outline:focus,
body.site-theme-preview
    .swal2-popup
    .swal2-styled.swal2-cancel.swal2-btn-cancel-outline:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.26) !important;
}

/* “Clearing cart…” loader — replace default violet ring (style.css .swal2-loader) */
body.site-theme-preview .swal2-loader {
    border-color: var(--preview-cta, #e65a28) transparent
        var(--preview-cta, #e65a28) transparent !important;
}

body.site-theme-preview .swal2-icon.swal2-warning {
    border-color: var(--preview-cta, #e65a28) !important;
    color: var(--preview-cta, #e65a28) !important;
}