/*
 * ASHOKA - UI v4 "gold glass"   (approved from static/ui_ref_frames/theme-demo-v4.html)
 * Loaded LAST, after style.css / app-shell.css / ui-motion.css / ui-v3.css.
 *
 * Same structure the app always had - menu on TOP, glass cards - with the craft raised:
 *   1. Tokens            one set of variables; dark mode only swaps the variables
 *   2. Backdrop          soft moving colour, so the glass has something to frost
 *   3. Top menu          one floating glass bar; active item is a solid pill
 *   4. Surfaces          cards, KPI tiles, coloured tiles, headers
 *   5. Controls          buttons, forms, tables, badges, alerts, tabs, pagination
 *   6. Overlays          dropdowns, modals, toasts, quick search
 *   7. App shell         billing pay bar, phone bottom menu, sign-in pages
 *   8. Utilities         Bootstrap text/bg helpers mapped to the tokens
 *   9. Reduce effects    html[data-fx="low"] turns blur and motion off for slow PCs
 *
 * style.css uses !important freely, so this file has to as well where they collide.
 */

/* ================================ 1. TOKENS ================================ */
.theme-fashion {
    --a: #f0b429;                 /* gold accent */
    --a-fg: #1a1203;              /* text on gold */
    --a-ink: color-mix(in srgb, var(--a) 58%, var(--ink));   /* gold that is readable as text */
    --a2: #ff8fab;                /* companion hues for the backdrop */
    --a3: #7aa7ff;
    --a-10: color-mix(in srgb, var(--a) 10%, transparent);
    --a-18: color-mix(in srgb, var(--a) 18%, transparent);
    --a-30: color-mix(in srgb, var(--a) 30%, transparent);
    --a-45: color-mix(in srgb, var(--a) 45%, transparent);

    --canvas: #e9ecf3;
    --glass: rgba(255, 255, 255, 0.56);
    --glass-2: rgba(255, 255, 255, 0.40);
    --glass-3: rgba(255, 255, 255, 0.26);
    --glass-solid: rgba(255, 255, 255, 0.82);
    --menu: #fbfbfd;              /* menus, modals, toasts: solid, so text behind never ghosts through */
    --edge: rgba(255, 255, 255, 0.85);
    --edge-soft: rgba(255, 255, 255, 0.55);
    --div: rgba(15, 23, 42, 0.075);
    --div-2: rgba(15, 23, 42, 0.14);
    --ink: #0c1020;
    --ink-2: #4a5068;
    --ink-3: #7c8299;
    --solid: #0c1020;
    --solid-fg: #ffffff;
    --sh: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 18px 44px -18px rgba(24, 32, 64, 0.22), 0 2px 6px rgba(24, 32, 64, 0.05);
    --sh-lg: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 34px 80px -22px rgba(24, 32, 64, 0.34);
    --orb-o: 0.5;
    --blur: blur(22px) saturate(175%);

    --ok: #0b8454;  --ok-bg: rgba(16, 160, 100, 0.13);  --ok-line: rgba(16, 160, 100, 0.28);
    --no: #c4352a;  --no-bg: rgba(220, 60, 50, 0.11);   --no-line: rgba(220, 60, 50, 0.26);
    --wa: #946000;  --wa-bg: rgba(235, 165, 20, 0.16);  --wa-line: rgba(235, 165, 20, 0.34);
    --in: #1b5fc6;  --in-bg: rgba(40, 120, 240, 0.11);  --in-line: rgba(40, 120, 240, 0.26);

    --r: 22px;
    --r-md: 14px;

    /* legacy tokens (style.css / ui-v3.css) now follow the new ones */
    --fx-accent: var(--a);
    --fx-accent-text: var(--a-fg);
    --fx-text: var(--ink);
    --fx-muted: var(--ink-2);
    --fx-muted-2: var(--ink-3);
    --fx-border: var(--div);
    --fx-radius: var(--r);
    --fx-radius-sm: var(--r);
    --fx-shadow: var(--sh-lg);
    --fx-shadow-sm: var(--sh);
    --v3-ink: var(--ink);
    --v3-ink-muted: var(--ink-3);
    --v3-line: var(--div);
    --v3-accent: var(--a);
    --v3-accent-deep: color-mix(in srgb, var(--a) 82%, #000);
    --v3-ring: 0 0 0 3px var(--a-30);
    --v3-shadow: var(--sh-lg);
    --v3-shadow-sm: var(--sh);

    /* Bootstrap variables */
    --bs-body-color: var(--ink);
    --bs-body-bg: transparent;
    --bs-secondary-color: var(--ink-2);
    --bs-tertiary-color: var(--ink-3);
    --bs-border-color: var(--div-2);
    --bs-link-color: var(--a-ink);
    --bs-link-hover-color: var(--ink);
    --bs-link-color-rgb: 120, 90, 20;
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--ink);

    background: var(--canvas) !important;
    color: var(--ink);
    letter-spacing: -0.008em;
}
html[data-bs-theme="dark"] .theme-fashion {
    color-scheme: dark;
    --canvas: #06070c;
    --glass: rgba(24, 27, 40, 0.52);
    --glass-2: rgba(34, 38, 56, 0.42);
    --glass-3: rgba(255, 255, 255, 0.05);
    --glass-solid: rgba(16, 18, 28, 0.86);
    --menu: #12141f;
    --edge: rgba(255, 255, 255, 0.12);
    --edge-soft: rgba(255, 255, 255, 0.07);
    --div: rgba(255, 255, 255, 0.07);
    --div-2: rgba(255, 255, 255, 0.14);
    --ink: #f3f4f9;
    --ink-2: #a8adc2;
    --ink-3: #737891;
    --solid: #f3f4f9;
    --solid-fg: #0c1020;
    --sh: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 22px 50px -20px rgba(0, 0, 0, 0.6);
    --sh-lg: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 40px 90px -24px rgba(0, 0, 0, 0.8);
    --orb-o: 0.4;
    --ok: #4ade98;  --ok-bg: rgba(74, 222, 152, 0.13);  --ok-line: rgba(74, 222, 152, 0.28);
    --no: #ff8078;  --no-bg: rgba(255, 128, 120, 0.13); --no-line: rgba(255, 128, 120, 0.28);
    --wa: #fbc658;  --wa-bg: rgba(251, 198, 88, 0.13);  --wa-line: rgba(251, 198, 88, 0.28);
    --in: #79b0ff;  --in-bg: rgba(121, 176, 255, 0.13); --in-line: rgba(121, 176, 255, 0.28);
    --bs-link-color-rgb: 240, 200, 110;
}

/* ================================ 2. BACKDROP ================================ */
.theme-fashion .app-frame {
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
    /* column layout so the footer rests at the bottom on short pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.theme-fashion .app-frame > #app-main { flex: 1 0 auto; width: 100%; }
/* air between the floating menu and the page heading (Bootstrap's my-4 alone looked cramped) */
.theme-fashion .app-frame > #app-main { margin-top: 2.75rem !important; }
.theme-fashion.has-pos-paybar .app-frame > #app-main { margin-top: 2rem !important; }   /* billing screen: keep the bill high on the page */
@media (max-width: 991.98px) { .theme-fashion .app-frame > #app-main { margin-top: 1.9rem !important; } }
.theme-fashion .app-frame::before { display: none !important; }   /* old static blob */
.v4-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.v4-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-o); will-change: transform; }
.v4-orb.o1 { width: 720px; height: 720px; left: -240px; top: -330px; background: var(--a); opacity: calc(var(--orb-o) * 0.8); animation: v4-f1 26s ease-in-out infinite alternate; }
.v4-orb.o2 { width: 640px; height: 640px; right: -160px; top: 6%; background: var(--a3); animation: v4-f2 30s ease-in-out infinite alternate; }
.v4-orb.o3 { width: 680px; height: 680px; left: 22%; bottom: -320px; background: var(--a2); animation: v4-f3 34s ease-in-out infinite alternate; }
.v4-orb.o4 { width: 420px; height: 420px; right: 18%; bottom: 8%; background: var(--a); opacity: calc(var(--orb-o) * 0.55); animation: v4-f1 38s ease-in-out infinite alternate-reverse; }
@keyframes v4-f1 { to { transform: translate(90px, 70px) scale(1.12); } }
@keyframes v4-f2 { to { transform: translate(-110px, 90px) scale(0.92); } }
@keyframes v4-f3 { to { transform: translate(70px, -90px) scale(1.08); } }
.v4-bg::after {
    content: ""; position: absolute; inset: 0; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* ================================ 3. TOP MENU ================================ */
.theme-fashion .app-navbar {
    margin: 14px 22px 0;
    top: 12px;
    border-radius: 999px;
    padding: 0.5rem 0.75rem 0.5rem 1.35rem;
    background: var(--glass) !important;
    border: 1px solid var(--edge);
    box-shadow: var(--sh);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.theme-fashion .app-navbar::before { display: none; }
.theme-fashion .app-navbar > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
.theme-fashion .navbar-brand { padding: 0; margin-right: 1rem; }
/* logo: the PNG has transparent side padding, and the negative margins let it fill the pill without making the bar taller */
.theme-fashion .navbar-brand img { height: 56px; width: auto; margin: -7px -14px -7px -24px; }
html[data-bs-theme="dark"] .theme-fashion .navbar-brand img,
html[data-bs-theme="dark"] .theme-fashion .auth-brand img,
html[data-bs-theme="dark"] .theme-fashion .auth-side img { filter: invert(1); }

/* centre group sits in the free space instead of being absolutely centred over the chips */
.theme-fashion .app-nav-center {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    gap: 0.25rem;
}
.theme-fashion .navbar .nav-link.app-nav-icon {
    height: 42px;
    padding: 0 1.05rem !important;
    gap: 0.55rem;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ink-2);
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.theme-fashion .app-nav-icon::before { display: none; }
.theme-fashion .app-nav-icon i { font-size: 0.92rem; opacity: 0.85; }
.theme-fashion .app-nav-label { color: inherit; font-size: 0.85rem; font-weight: 700; }
.theme-fashion .navbar .nav-link.app-nav-icon:hover {
    background: var(--glass-2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--ink);
    transform: none;
}
.theme-fashion .navbar .nav-link.app-nav-icon.active,
.theme-fashion .navbar .nav-link.app-nav-icon.show {
    background: var(--solid) !important;
    color: var(--solid-fg);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--solid) 60%, transparent) !important;
}
.theme-fashion .navbar .nav-link.app-nav-icon.show:not(.active) { background: var(--glass-solid) !important; color: var(--ink); box-shadow: none !important; }
.theme-fashion .navbar .nav-link.app-nav-icon.active i { color: var(--a); opacity: 1; }
.theme-fashion .app-nav-icon.dropdown-toggle::after { opacity: 0.55; margin-left: 0.1rem; }

/* right side: branch chip, user chip, search, theme */
.theme-fashion .app-chip,
.theme-fashion .app-tool-btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: var(--glass-2);
    border: 1px solid var(--edge-soft);
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-fashion .navbar .nav-link.app-chip { padding: 0 0.95rem; color: var(--ink-2); }
.theme-fashion .navbar .nav-link.app-chip:hover,
.theme-fashion .app-tool-btn:hover { background: var(--glass); color: var(--ink); transform: none; box-shadow: none; }
.theme-fashion .app-tool-btn kbd {
    background: var(--glass-3); border: 1px solid var(--edge-soft); color: var(--ink-3);
    font-family: ui-monospace, monospace; font-size: 0.62rem;
}
.theme-fashion .app-tool-btn.app-theme-toggle { width: 40px; padding: 0; justify-content: center; }
.theme-fashion .navbar-toggler { border: 1px solid var(--edge-soft); border-radius: 14px; background: var(--glass-2); }
html[data-bs-theme="dark"] .theme-fashion .navbar-toggler-icon { filter: invert(1); }
/* medium desktops: icons only (active item keeps its label) so nothing collides */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .theme-fashion .app-nav-icon:not(.active) .app-nav-label { display: none; }
    .theme-fashion .navbar .nav-link.app-nav-icon { padding: 0 0.85rem !important; }
    .theme-fashion .app-tool-btn .app-tool-label, .theme-fashion .app-tool-btn kbd { display: none !important; }
}
@media (max-width: 991.98px) {
    .theme-fashion .app-navbar { margin: 10px 12px 0; top: 8px; border-radius: 26px; padding: 0.45rem 0.6rem 0.45rem 0.9rem; }
    .theme-fashion .navbar-brand img { height: 42px; margin: -2px -10px -2px -16px; }
    .theme-fashion .app-nav-center { margin: 0.5rem 0 0 !important; }
    .theme-fashion .app-nav-tools { margin: 0 0.4rem 0 auto; }
    .theme-fashion .app-tool-btn, .theme-fashion .app-tool-btn.app-theme-toggle { height: 38px; min-height: 38px; width: 38px; padding: 0; justify-content: center; }
    .theme-fashion .navbar-toggler { padding: 0.3rem 0.55rem; min-height: 38px; }
    .theme-fashion .app-frame > .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .theme-fashion .app-nav-right { gap: 0.4rem; padding-bottom: 0.4rem; align-items: stretch !important; }
}

/* page heading */
.theme-fashion h1.h2 { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.theme-fashion h1, .theme-fashion h2, .theme-fashion h3, .theme-fashion h4, .theme-fashion h5, .theme-fashion h6,
.theme-fashion .h1, .theme-fashion .h2, .theme-fashion .h3, .theme-fashion .h4, .theme-fashion .h5, .theme-fashion .h6 { color: var(--ink); }
.theme-fashion .app-frame > .container-fluid { padding-left: 22px; padding-right: 22px; color: var(--ink); }
.theme-fashion .app-breadcrumb a { background: var(--glass-2); border: 1px solid var(--edge-soft); }
/* the billing screen sets its own 5px page padding to win space; keep it aligned with the floating menu */
.theme-fashion.has-pos-paybar .app-frame > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
.theme-fashion.has-pos-paybar .app-navbar { margin-left: 16px; margin-right: 16px; }
/* toasts sit under the floating menu instead of on top of it */
@media (min-width: 992px) { #app-toasts { top: 88px !important; right: 12px !important; } }
.theme-fashion .app-breadcrumb a:hover { background: var(--glass-solid); }

/* ================================ 4. SURFACES ================================ */
.theme-fashion .card {
    border-radius: var(--r);
    border: 1px solid var(--edge);
    background: var(--glass);
    color: var(--ink);
    box-shadow: var(--sh);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}
.theme-fashion .card::before { display: none; }                      /* old gloss overlay */
.theme-fashion .card:hover { transform: none; box-shadow: var(--sh); } /* big panels should not jump on hover */
/* a card inside a card is a quiet inset panel, not a second sheet of glass */
.theme-fashion .card .card {
    background: var(--glass-3);
    border-color: var(--edge-soft);
    border-radius: 16px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.theme-fashion .card-header,
.theme-fashion .card-header[class*="bg-"],
.theme-fashion .card-header[style] {
    background: transparent !important;
    border-bottom: 1px solid var(--div);
    color: var(--ink) !important;
    font-weight: 800;
    letter-spacing: -0.015em;
    padding: 0.9rem 1.25rem;
}
/* Pull the header's own text onto the ink colour, but leave anything inside a button
   or a badge alone - those carry their own colour. Buttons are excluded by selector
   rather than rescued afterwards: the old `color: revert-layer` rolled an
   <a class="btn"> all the way back to the browser's blue link colour. */
.theme-fashion .card-header :is(h1, h2, h3, h4, h5, h6, .card-title, span, i, small, .text-white, .text-dark, .text-primary):not(.btn, .badge, .btn *, .badge *) { color: inherit !important; }
.theme-fashion .card-header .badge { color: revert-layer; }
.theme-fashion .card-header > i:first-child,
.theme-fashion .card-header > :is(h1, h2, h3, h4, h5, h6, .card-title) > i:first-child { color: var(--a-ink) !important; margin-right: 0.35rem; }
.theme-fashion .card-body { color: var(--ink); }
.theme-fashion .card-footer { background: transparent !important; border-top: 1px solid var(--div); color: var(--ink-3); }

/* coloured tiles become tinted glass; the colour stays as a hint, the text stays readable */
.theme-fashion .card[class*="bg-"] { color: var(--ink) !important; }
.theme-fashion .card[class*="bg-"] :is(.text-white, .text-dark, .text-light, h1, h2, h3, h4, h5, h6, p, small, span):not(.badge) { color: inherit !important; }
.theme-fashion .card.bg-primary   { background: linear-gradient(160deg, var(--a-30), var(--glass) 72%) !important; border-color: var(--a-45) !important; }
.theme-fashion .card.bg-success   { background: linear-gradient(160deg, var(--ok-bg), var(--glass) 72%) !important; border-color: var(--ok-line) !important; }
.theme-fashion .card.bg-info      { background: linear-gradient(160deg, var(--in-bg), var(--glass) 72%) !important; border-color: var(--in-line) !important; }
.theme-fashion .card.bg-warning   { background: linear-gradient(160deg, var(--wa-bg), var(--glass) 72%) !important; border-color: var(--wa-line) !important; }
.theme-fashion .card.bg-danger    { background: linear-gradient(160deg, var(--no-bg), var(--glass) 72%) !important; border-color: var(--no-line) !important; }
.theme-fashion .card.bg-secondary,
.theme-fashion .card.bg-dark,
.theme-fashion .card.bg-light     { background: var(--glass-3) !important; border-color: var(--edge-soft) !important; }
.theme-fashion .card.border-primary   { border-color: var(--a-45) !important; }
.theme-fashion .card.border-success   { border-color: var(--ok-line) !important; }
.theme-fashion .card.border-info      { border-color: var(--in-line) !important; }
.theme-fashion .card.border-warning   { border-color: var(--wa-line) !important; }
.theme-fashion .card.border-danger    { border-color: var(--no-line) !important; }
.theme-fashion .card.border-dark,
.theme-fashion .card.border-secondary { border-color: var(--div-2) !important; }

/* KPI tiles (macros/glass_ui.html) */
.theme-fashion .glass-kpi { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease; }
.theme-fashion .glass-kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.theme-fashion .glass-kpi .h4 { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.theme-fashion .glass-kpi .small.text-muted { font-weight: 700; color: var(--ink-2) !important; }
.theme-fashion .glass-kpi a { color: var(--a-ink); font-weight: 700; }
.theme-fashion .glass-kpi-icon {
    width: 40px; height: 40px; border-radius: 13px;
    background: var(--glass-solid); border: 1px solid var(--edge);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.3);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.theme-fashion .glass-kpi-icon.text-primary { background: var(--a); color: var(--a-fg) !important; border-color: transparent; }

/* Dashboard revenue chart card (templates/dashboard/index.html) */
.theme-fashion .v4-hero { display: flex; flex-direction: column; overflow: hidden; min-height: 380px; }
.theme-fashion .v4-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(520px 240px at 12% 0%, var(--a-18), transparent 70%);
}
.theme-fashion .v4-hero > * { position: relative; z-index: 1; }
.v4-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 0; }
.v4-hero-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.v4-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.v4-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: v4-pulse 1.8s ease-in-out infinite; }
@keyframes v4-pulse { 50% { opacity: 0.35; transform: scale(0.8); } }
.v4-hero-value { margin-top: 8px; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.v4-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
.v4-num { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.v4-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.v4-chip i { font-size: 0.55rem; }
.v4-chip.up { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.v4-chip.down { background: var(--no-bg); color: var(--no); border-color: var(--no-line); }
.v4-hero-split { display: flex; gap: 10px; }
.v4-hero-split > div { min-width: 118px; padding: 10px 14px; border-radius: var(--r-md); background: var(--glass-3); border: 1px solid var(--edge-soft); }
.v4-hero-split small { display: block; font-size: 0.7rem; font-weight: 700; color: var(--ink-3) !important; }
.v4-hero-split b { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.v4-hero-chart { position: relative; flex: 1 1 auto; min-height: 230px; padding: 8px 14px 14px 8px; }
.v4-hero-chart canvas { position: absolute; inset: 8px 14px 14px 8px; width: calc(100% - 22px) !important; height: calc(100% - 22px) !important; }
.v4-hero-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: var(--ink-3); font-size: 0.85rem; font-weight: 500; }
.v4-hero-empty[hidden] { display: none; }
.v4-hero-empty i { font-size: 1.6rem; margin-bottom: 8px; opacity: 0.5; }
.v4-hero-empty b { color: var(--ink); font-size: 0.95rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .v4-live i { animation: none; } }

/* ================================ 5. CONTROLS ================================ */
/* --- buttons --- */
.theme-fashion .btn { font-weight: 700; letter-spacing: -0.005em; backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-fashion .btn::before { display: none; }
.theme-fashion .btn:hover { transform: none; }
.theme-fashion .btn:active { transform: scale(0.975); }
.theme-fashion .btn:focus-visible { box-shadow: 0 0 0 3.5px var(--a-30) !important; }
.theme-fashion .btn-primary,
.theme-fashion .btn-warning {
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 86%, #fff), var(--a)) !important;
    border-color: transparent !important;
    color: var(--a-fg) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 24px -10px var(--a);
}
.theme-fashion .btn-primary:hover,
.theme-fashion .btn-warning:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 14px 30px -10px var(--a); }
.theme-fashion .btn-success { background: linear-gradient(180deg, #1cb67a, #119a63); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -12px #119a63; }
.theme-fashion .btn-success:hover { filter: brightness(1.07); color: #fff; }
.theme-fashion .btn-danger { background: linear-gradient(180deg, #e5554a, #cf3d33); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -12px #cf3d33; }
.theme-fashion .btn-danger:hover { filter: brightness(1.07); color: #fff; }
.theme-fashion .btn-info { background: linear-gradient(180deg, #4a90f5, #2f76e0); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -12px #2f76e0; }
.theme-fashion .btn-info:hover { filter: brightness(1.07); color: #fff; }
.theme-fashion .btn-secondary,
.theme-fashion .btn-dark { background: var(--solid); border-color: transparent; color: var(--solid-fg); box-shadow: none; }
.theme-fashion .btn-secondary:hover,
.theme-fashion .btn-dark:hover { filter: brightness(1.2); color: var(--solid-fg); background: var(--solid); }
.theme-fashion .btn-light { background: var(--glass-solid); border-color: var(--edge); color: var(--ink); }
.theme-fashion .btn-link { color: var(--a-ink); }
.theme-fashion [class*="btn-outline-"] {
    background: var(--glass) !important;
    border: 1px solid var(--edge) !important;
    color: var(--ink) !important;
    box-shadow: 0 6px 16px -10px rgba(24, 32, 64, 0.3);
}
.theme-fashion [class*="btn-outline-"]:hover { background: var(--glass-solid) !important; color: var(--ink) !important; box-shadow: 0 10px 22px -12px rgba(24, 32, 64, 0.4); }
.theme-fashion .btn-outline-danger { color: var(--no) !important; }
.theme-fashion .btn-outline-success { color: var(--ok) !important; }
.theme-fashion .btn-outline-danger:hover { background: var(--no-bg) !important; border-color: var(--no-line) !important; color: var(--no) !important; }
.theme-fashion .btn-outline-success:hover { background: var(--ok-bg) !important; border-color: var(--ok-line) !important; color: var(--ok) !important; }
.theme-fashion .btn-check:checked + [class*="btn-outline-"],
.theme-fashion [class*="btn-outline-"].active {
    background: var(--solid) !important; border-color: transparent !important; color: var(--solid-fg) !important; box-shadow: none;
}
.theme-fashion .btn:disabled, .theme-fashion .btn.disabled { opacity: 0.5; box-shadow: none; filter: none; }
.theme-fashion .btn-group > .btn { border-radius: 999px; }
.theme-fashion .btn-group { gap: 3px; padding: 3px; border-radius: 999px; background: var(--glass-3); border: 1px solid var(--edge-soft); }
.theme-fashion .btn-group > [class*="btn-outline-"] { border-color: transparent !important; background: transparent !important; box-shadow: none; color: var(--ink-3) !important; }
.theme-fashion .btn-group > .btn-check:checked + [class*="btn-outline-"] { background: var(--glass-solid) !important; color: var(--ink) !important; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.35), 0 1px 0 var(--edge) inset; }
.theme-fashion .input-group .btn { box-shadow: none; }

/* --- forms --- */
.theme-fashion .form-control,
.theme-fashion .form-select,
.theme-fashion .input-group-text {
    border-radius: var(--r-md);
    border: 1px solid var(--div-2);
    background-color: var(--glass-2);
    color: var(--ink);
    font-weight: 600;
}
.theme-fashion .input-group-text { color: var(--ink-3); font-weight: 700; }
.theme-fashion .form-control:focus,
.theme-fashion .form-select:focus {
    border-color: var(--a);
    box-shadow: 0 0 0 4px var(--a-18);
    background-color: var(--glass-solid);
    color: var(--ink);
}
.theme-fashion .form-control::placeholder { color: var(--ink-3); font-weight: 500; }
.theme-fashion .form-control:disabled,
.theme-fashion .form-control[readonly],
.theme-fashion .form-select:disabled { background-color: var(--glass-3); color: var(--ink-2); }
.theme-fashion .form-select option { color: #111; background: #fff; }
.theme-fashion .form-label { color: var(--ink); font-weight: 700; }
.theme-fashion .form-text { color: var(--ink-3); }
.theme-fashion .form-check-input { background-color: var(--glass-2); border-color: var(--div-2); }
.theme-fashion .form-check-input:checked,
.theme-fashion .form-switch .form-check-input:checked { background-color: var(--a); border-color: var(--a); }
.theme-fashion .form-check-input:focus { box-shadow: 0 0 0 3.5px var(--a-18); border-color: var(--a); }
.theme-fashion .form-check-label { color: var(--ink); }
html[data-bs-theme="dark"] .theme-fashion .form-select {
    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='%23e8ecf5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .theme-fashion input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] .theme-fashion input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* --- tables --- */
.theme-fashion .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-striped-bg: var(--glass-3);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: var(--glass-2);
    --bs-table-hover-color: var(--ink);
    --bs-table-border-color: var(--div);
    color: var(--ink);
}
.theme-fashion .table thead th,
.theme-fashion .table-light, .theme-fashion .table .table-light > *,
.theme-fashion .table-dark, .theme-fashion .table .table-dark > * {
    background: var(--glass-3) !important;
    color: var(--ink-3) !important;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    border-bottom: 1px solid var(--div) !important;
}
.theme-fashion .table th, .theme-fashion .table td { border-color: var(--div) !important; font-weight: 500; }
.theme-fashion .table td { color: var(--ink); }
.theme-fashion .table-hover tbody tr:hover { background: var(--glass-2) !important; }
.theme-fashion .table-hover tbody tr:hover > * { color: var(--ink); }
.theme-fashion .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--glass-3); color: var(--ink); }
.theme-fashion .table-bordered, .theme-fashion .table-bordered > :not(caption) > * { border-color: var(--div) !important; }
.theme-fashion .table-success > *, .theme-fashion tr.table-success > * { background: var(--ok-bg) !important; color: var(--ink) !important; }
.theme-fashion .table-danger > *,  .theme-fashion tr.table-danger > *  { background: var(--no-bg) !important; color: var(--ink) !important; }
.theme-fashion .table-warning > *, .theme-fashion tr.table-warning > * { background: var(--wa-bg) !important; color: var(--ink) !important; }
.theme-fashion .table-info > *,    .theme-fashion tr.table-info > *    { background: var(--in-bg) !important; color: var(--ink) !important; }

/* --- badges: soft pills; the colour says the status, the text stays readable --- */
.theme-fashion .badge { font-weight: 700; border: 1px solid transparent; border-radius: 999px; padding: 0.34em 0.75em; }
.theme-fashion .badge:is(.bg-success, .text-bg-success)     { background: var(--ok-bg) !important; color: var(--ok) !important; border-color: var(--ok-line); }
.theme-fashion .badge:is(.bg-danger, .text-bg-danger)       { background: var(--no-bg) !important; color: var(--no) !important; border-color: var(--no-line); }
.theme-fashion .badge:is(.bg-warning, .text-bg-warning)     { background: var(--wa-bg) !important; color: var(--wa) !important; border-color: var(--wa-line); }
.theme-fashion .badge:is(.bg-info, .text-bg-info)           { background: var(--in-bg) !important; color: var(--in) !important; border-color: var(--in-line); }
.theme-fashion .badge:is(.bg-primary, .text-bg-primary)     { background: var(--a-18) !important; color: var(--a-ink) !important; border-color: var(--a-45); }
.theme-fashion .badge:is(.bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light) { background: var(--glass-3) !important; color: var(--ink-2) !important; border-color: var(--div-2); }
.theme-fashion .badge:is(.bg-dark, .text-bg-dark)           { background: var(--solid) !important; color: var(--solid-fg) !important; }
.theme-fashion .transfer-nav-badge,
.theme-fashion .app-bottom-nav .badge { background: #e5484d !important; color: #fff !important; border: 0; }

/* --- alerts --- */
.theme-fashion .alert { border-radius: var(--r-md); border: 1px solid var(--div-2); background: var(--glass-3); color: var(--ink); font-weight: 500; }
.theme-fashion .alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.theme-fashion .alert-danger  { background: var(--no-bg); color: var(--no); border-color: var(--no-line); }
.theme-fashion .alert-warning { background: var(--wa-bg); color: var(--wa); border-color: var(--wa-line); }
.theme-fashion .alert-info    { background: var(--in-bg); color: var(--in); border-color: var(--in-line); }
.theme-fashion .alert-primary { background: var(--a-18); color: var(--a-ink); border-color: var(--a-45); }
.theme-fashion .alert :is(strong, b, .alert-heading) { color: inherit; }
.theme-fashion .alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* --- tabs, pills, pagination, progress, lists --- */
.theme-fashion .nav-tabs { border-bottom: 1px solid var(--div); }
.theme-fashion .nav-tabs .nav-link { color: var(--ink-3); }
.theme-fashion .nav-tabs .nav-link:hover { color: var(--ink); }
.theme-fashion .nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--a); background: transparent; }
.theme-fashion .nav-pills .nav-link { color: var(--ink-2); }
.theme-fashion .nav-pills .nav-link.active { background: var(--solid); color: var(--solid-fg); }
.theme-fashion .page-link { background: var(--glass); border-color: var(--edge); color: var(--ink); border-radius: 999px !important; margin: 0 2px; font-weight: 700; }
.theme-fashion .page-link:hover { background: var(--glass-solid); color: var(--ink); }
.theme-fashion .page-item.active .page-link { background: var(--solid); border-color: transparent; color: var(--solid-fg); }
.theme-fashion .page-item.disabled .page-link { background: var(--glass-3); color: var(--ink-3); border-color: var(--edge-soft); }
.theme-fashion .progress { background: var(--glass-3); border-radius: 999px; }
.theme-fashion .progress-bar { background-color: var(--a); color: var(--a-fg); font-weight: 700; }
.theme-fashion .progress-bar.bg-success { background-color: #16a36a !important; color: #fff; }
.theme-fashion .progress-bar.bg-danger { background-color: #dc4a40 !important; color: #fff; }
.theme-fashion .list-group-item { background: transparent; color: var(--ink); border-color: var(--div); }
.theme-fashion .list-group-item.active { background: var(--a-18); color: var(--ink); border-color: var(--a-45); }
.theme-fashion .list-group-item-action:hover { background: var(--glass-2); color: var(--ink); }
.theme-fashion hr, .theme-fashion .dropdown-divider { border-color: var(--div-2); opacity: 1; }
.theme-fashion .spinner-border.text-primary { color: var(--a) !important; }
.theme-fashion kbd { background: var(--glass-solid); color: var(--ink); border: 1px solid var(--div-2); border-bottom-width: 2px; border-radius: 6px; box-shadow: none; }
.theme-fashion .accordion-item { background: var(--glass-3); border-color: var(--div); color: var(--ink); }
.theme-fashion .accordion-button { background: transparent; color: var(--ink); font-weight: 700; box-shadow: none; }
.theme-fashion .accordion-button:not(.collapsed) { background: var(--a-10); color: var(--ink); }

/* --- DataTables --- */
.theme-fashion .dataTables_wrapper .dataTables_filter input,
.theme-fashion .dataTables_wrapper .dataTables_length select {
    background: var(--glass-2); border: 1px solid var(--div-2); color: var(--ink); border-radius: 999px;
}
.theme-fashion .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-18); outline: none; }
.theme-fashion .dataTables_wrapper :is(.dataTables_info, .dataTables_length, .dataTables_filter) { color: var(--ink-3); }
.theme-fashion .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ink) !important; border-radius: 999px !important; border: 1px solid transparent !important; background: transparent !important; }
.theme-fashion .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.theme-fashion .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--solid) !important; color: var(--solid-fg) !important; border-color: transparent !important; }
.theme-fashion .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--glass-solid) !important; border-color: var(--edge) !important; color: var(--ink) !important; }
.theme-fashion .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--ink-3) !important; }
.theme-fashion .dataTables_wrapper .dataTables_processing { background: var(--menu); color: var(--ink); border: 1px solid var(--edge); }

/* ================================ 6. OVERLAYS ================================ */
.theme-fashion .dropdown-menu {
    background: var(--menu);
    border: 1px solid var(--edge);
    border-radius: 18px;
    padding: 0.45rem;
    box-shadow: var(--sh-lg);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    color: var(--ink);
}
.theme-fashion .dropdown-item { border-radius: 12px; padding: 0.55rem 0.8rem; font-weight: 600; color: var(--ink-2); }
.theme-fashion .dropdown-item i { color: var(--ink-3); transition: color 0.13s ease; }
.theme-fashion .dropdown-item:hover,
.theme-fashion .dropdown-item:focus { background: var(--a-18); color: var(--ink); }
.theme-fashion .dropdown-item:hover i { color: var(--a-ink); }
.theme-fashion .dropdown-item.active,
.theme-fashion .dropdown-item:active { background: var(--solid); color: var(--solid-fg); }
.theme-fashion .dropdown-item.active i { color: var(--a); }
.theme-fashion .dropdown-header { color: var(--ink-3); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.theme-fashion .modal-content {
    background: var(--menu);
    border: 1px solid var(--edge);
    border-radius: 26px;
    box-shadow: var(--sh-lg);
    color: var(--ink);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.theme-fashion .modal-header, .theme-fashion .modal-footer { border-color: var(--div); background: transparent !important; color: var(--ink) !important; }
.theme-fashion .modal-header[class*="bg-"] :is(.modal-title, i, span) { color: var(--ink) !important; }
.theme-fashion .modal-title { color: var(--ink); }
.theme-fashion .modal-backdrop.show { opacity: 0.45; }
html[data-bs-theme="dark"] .theme-fashion .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.theme-fashion .offcanvas { background: var(--menu); color: var(--ink); }
.theme-fashion .popover { background: var(--menu); border-color: var(--edge); border-radius: 16px; }
.theme-fashion .popover-body { color: var(--ink); }

#app-toasts .toast { background: var(--menu); border: 1px solid var(--edge); color: var(--ink); border-radius: 18px; box-shadow: var(--sh-lg); }
.theme-fashion .app-celebrate .app-celebrate-card { background: var(--menu); color: var(--ink); border: 1px solid var(--edge); }
.theme-fashion .app-cmdk-panel { background: var(--menu); border: 1px solid var(--edge); border-radius: 26px; }
.theme-fashion .app-cmdk-input-wrap input { color: var(--ink); }
.theme-fashion .app-cmdk-item { color: var(--ink); }
.theme-fashion .app-cmdk-item i { background: var(--glass-3); border: 1px solid var(--edge-soft); color: var(--ink-2); }
.theme-fashion .app-cmdk-item[aria-selected="true"],
.theme-fashion .app-cmdk-item:hover { background: var(--a-18); }
.theme-fashion .app-cmdk-item[aria-selected="true"] i { background: var(--a); color: var(--a-fg); border-color: transparent; }
.theme-fashion :is(.app-cmdk-input-wrap, .app-cmdk-foot, .app-shortcut-row) kbd { background: var(--glass-3); border-color: var(--div-2); color: var(--ink-2); }
.theme-fashion .app-backtop { background: var(--menu); border-color: var(--edge); color: var(--ink); }
.theme-fashion .app-confirm .app-confirm-icon { background: var(--a-30); color: var(--ink); }

/* ================================ 7. APP SHELL ================================ */
/* billing pay bar: a floating glass slab instead of a full-width strip */
.theme-fashion .pos-paybar {
    left: 22px; right: 22px; bottom: 14px;
    border-radius: 26px;
    border: 1px solid var(--edge);
    background: var(--menu);
    box-shadow: var(--sh-lg);
    padding: 0.7rem 0.9rem 0.7rem 1.4rem;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}
.theme-fashion .pos-paybar-amount { color: var(--ink); font-size: 2rem; letter-spacing: -0.045em; }
.theme-fashion .pos-paybar-count-badge { background: var(--glass-3); border: 1px solid var(--edge-soft); color: var(--ink); }
.theme-fashion :is(.pos-paybar-count-label, .pos-paybar-keys, .pos-paybar-total-label, .pos-paybar-roundoff) { color: var(--ink-3); }
.theme-fashion .pos-paybar-keys kbd { background: var(--glass-3); border-color: var(--div-2); color: var(--ink-2); }
.theme-fashion .pos-paybar-btn,
.theme-fashion .pos-paybar-btn:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 86%, #fff), var(--a));
    color: var(--a-fg);
    border-color: transparent;
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 12px 26px -10px var(--a);
}
.theme-fashion .pos-paybar-btn kbd { background: rgba(0, 0, 0, 0.12); color: inherit; border: 0; }
/* Complete Sale: rich gold when the bill has items; while the bill is empty it stays clearly gold
   (app-shell.css faded it to 55%, which looked washed-out on glass) and only loses its glow. */
.theme-fashion .pos-paybar-btn,
.theme-fashion .pos-paybar-btn:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 78%, #fff) 0%, var(--a) 48%, color-mix(in srgb, var(--a) 82%, #b45309) 100%);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -1px 0 rgba(0, 0, 0, 0.08) inset, 0 14px 28px -10px var(--a), 0 4px 10px -4px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.theme-fashion .pos-paybar-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.theme-fashion .pos-paybar-btn:active { transform: translateY(0); filter: brightness(0.97); }
.theme-fashion .pos-paybar-btn i { font-size: 1.1em; }
.theme-fashion .pos-paybar.is-empty .pos-paybar-btn {
    opacity: 0.9;
    filter: saturate(0.85);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 10px -6px rgba(0, 0, 0, 0.25);
}
.theme-fashion .pos-paybar-btn:disabled { opacity: 0.75; transform: none; }
@media (max-width: 767.98px) { .theme-fashion .pos-paybar { left: 10px; right: 10px; bottom: 10px; border-radius: 22px; padding: 0.55rem 0.6rem 0.55rem 0.9rem; } }

.theme-fashion .app-bottom-nav { background: var(--menu); border-color: var(--edge); box-shadow: var(--sh-lg); }
.theme-fashion .app-bottom-nav-item { color: var(--ink-3); }
.theme-fashion .app-bottom-nav-item:hover, .theme-fashion .app-bottom-nav-item:focus-visible { color: var(--ink); background: var(--glass-3); }
.theme-fashion .app-bottom-nav-item.active { color: var(--ink); background: var(--a-18); }
.theme-fashion .app-bottom-nav-primary { color: var(--ink); }
.theme-fashion .app-bottom-nav-fab {
    background: linear-gradient(145deg, color-mix(in srgb, var(--a) 70%, #fff), var(--a));
    color: var(--a-fg);
    border-color: var(--menu);
    box-shadow: 0 12px 24px -8px var(--a), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.theme-fashion .footer { background: transparent !important; border-top: 1px solid var(--div); color: var(--ink-3); backdrop-filter: none; }

/* sign-in, OTP, password pages */
.theme-fashion .auth-shell::before, .theme-fashion .auth-shell::after { display: none; }   /* the page backdrop already does this */
.theme-fashion .auth-card { background: var(--glass); border-color: var(--edge); box-shadow: var(--sh-lg); color: var(--ink); border-radius: 30px; }
.theme-fashion .auth-side { background: radial-gradient(520px 320px at 10% 0%, var(--a-30), transparent 65%), var(--glass-3); border-right: 1px solid var(--div); color: var(--ink); }
.theme-fashion .auth-feature { background: var(--glass-2); border-color: var(--edge-soft); box-shadow: none; color: var(--ink); }
.theme-fashion .auth-feature-icon { background: var(--a); color: var(--a-fg); }
.theme-fashion .auth-icon { background: linear-gradient(145deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); color: var(--a-fg); box-shadow: 0 14px 28px -10px var(--a); }
.theme-fashion :is(.auth-subtitle, .auth-footer, .auth-strength-text, .auth-timer) { color: var(--ink-3); }
.theme-fashion .auth-links a, .theme-fashion .auth-link-btn { color: var(--ink-2); }
.theme-fashion .auth-links a:hover { color: var(--ink); }
.theme-fashion .auth-card .form-control,
.theme-fashion .auth-card .input-group-text { background-color: var(--glass-2); border-color: var(--div-2); color: var(--ink); }
.theme-fashion .auth-card .form-control:focus { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-18); background-color: var(--glass-solid); }
.theme-fashion .auth-card .input-group > .btn { border-color: var(--div-2) !important; }
.theme-fashion .auth-timer { background: var(--glass-3); }
.theme-fashion .account-card { background: var(--glass-2); border-color: var(--edge-soft); color: var(--ink); }
.theme-fashion .account-card:hover { border-color: var(--a-45); }
.theme-fashion .account-card.selected { border-color: var(--a); background: var(--a-18); box-shadow: 0 0 0 4px var(--a-18); }
.theme-fashion .account-name { color: var(--ink); }
.theme-fashion :is(.account-role, .account-branch) { color: var(--ink-3); }
.theme-fashion .userid-display { background: var(--a-18); border-color: var(--a-45); }
.theme-fashion .userid-display .userid-value { color: var(--ink); }
.theme-fashion .change-id-section { background: var(--glass-3); border-color: var(--div); }

/* ================================ 8. UTILITIES ================================ */
.theme-fashion .text-dark, .theme-fashion .text-body, .theme-fashion .text-black { color: var(--ink) !important; }
.theme-fashion .text-muted, .theme-fashion .text-secondary, .theme-fashion .text-body-secondary { color: var(--ink-3) !important; }
.theme-fashion small, .theme-fashion .small { color: inherit; }
.theme-fashion .text-primary { color: var(--a-ink) !important; }
.theme-fashion .text-success { color: var(--ok) !important; }
.theme-fashion .text-danger  { color: var(--no) !important; }
.theme-fashion .text-warning { color: var(--wa) !important; }
.theme-fashion .text-info    { color: var(--in) !important; }
.theme-fashion a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.app-bottom-nav-item):not(.list-group-item) { color: var(--a-ink); }
.theme-fashion .bg-white { background-color: transparent !important; }
.theme-fashion .bg-light { background-color: var(--glass-3) !important; }
.theme-fashion .footer, .theme-fashion .footer.bg-light { background: transparent !important; margin-top: 1.5rem; }
.theme-fashion :is(.border, .border-top, .border-bottom, .border-start, .border-end) { border-color: var(--div-2) !important; }
.theme-fashion .shadow, .theme-fashion .shadow-sm, .theme-fashion .shadow-lg { box-shadow: var(--sh) !important; }
.theme-fashion .gradient-bg { background: var(--glass-3); }
.theme-fashion .quick-stats-item { border-color: var(--edge-soft) !important; background: var(--glass-3) !important; border-radius: 16px !important; }
.theme-fashion .quick-stats-item:hover { background: var(--glass-2) !important; }
/* round icon chips on the dashboard: soft tint instead of a solid Bootstrap colour */
.theme-fashion .icon-bg-circle { border-radius: 14px !important; border: 1px solid transparent; }
.theme-fashion .icon-bg-circle.bg-success { background: var(--ok-bg) !important; border-color: var(--ok-line); }
.theme-fashion .icon-bg-circle.bg-success i { color: var(--ok) !important; }
.theme-fashion .icon-bg-circle.bg-info { background: var(--in-bg) !important; border-color: var(--in-line); }
.theme-fashion .icon-bg-circle.bg-info i { color: var(--in) !important; }
.theme-fashion .icon-bg-circle.bg-warning { background: var(--wa-bg) !important; border-color: var(--wa-line); }
.theme-fashion .icon-bg-circle.bg-warning i { color: var(--wa) !important; }
.theme-fashion .icon-bg-circle.bg-primary { background: var(--a-18) !important; border-color: var(--a-45); }
.theme-fashion .icon-bg-circle.bg-primary i { color: var(--a-ink) !important; }
.theme-fashion .icon-bg-circle.bg-danger { background: var(--no-bg) !important; border-color: var(--no-line); }
.theme-fashion .icon-bg-circle.bg-danger i { color: var(--no) !important; }
.theme-fashion ::selection { background: var(--a-30); color: var(--ink); }
/* templates that hard-code white panels inline: soften them in dark mode */
html[data-bs-theme="dark"] .theme-fashion :is([style*="background: #fff"], [style*="background:#fff"], [style*="background-color: #fff"], [style*="background-color:#fff"], [style*="background: white"], [style*="background-color: white"], [style*="background: #f8f9fa"], [style*="background-color: #f8f9fa"]) {
    background: var(--glass-3) !important;
    color: var(--ink) !important;
}
html[data-bs-theme="dark"] .theme-fashion :is([style*="color: #333"], [style*="color:#333"], [style*="color: #000"], [style*="color: black"], [style*="color: #212529"], [style*="color: #495057"]) { color: var(--ink) !important; }
html[data-bs-theme="dark"] .theme-fashion :is([style*="color: #666"], [style*="color:#666"], [style*="color: #6c757d"]) { color: var(--ink-3) !important; }

/* ================================ 9. REDUCE EFFECTS ================================ */
/* For older counter PCs: no blur, no moving backdrop, solid surfaces. Same layout and colours. */
html[data-fx="low"] .theme-fashion { --blur: none; --glass: var(--glass-solid); --glass-2: var(--glass-solid); }
html[data-fx="low"] .v4-orb { animation: none; filter: blur(60px); opacity: calc(var(--orb-o) * 0.6); }
html[data-fx="low"] .v4-bg::after { display: none; }
html[data-fx="low"] .theme-fashion :is(.card, .app-navbar, .dropdown-menu, .modal-content, .pos-paybar, .app-bottom-nav, .auth-card, .app-cmdk-panel, #app-toasts .toast) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-fx="low"] .theme-fashion .card, html[data-fx="low"] .theme-fashion #app-main { animation: none !important; }
.dropdown-item.app-fx-option { display: flex; align-items: center; }
.dropdown-item.app-fx-option .app-theme-check { margin-left: auto; opacity: 0; }
html[data-fx="low"] .dropdown-item.app-fx-option .app-theme-check { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .v4-orb { animation: none; }
    .theme-fashion .glass-kpi { transition: none; }
}
/* Paper is always light: printing from dark mode must not give pale text on white */
@media print {
    .v4-bg { display: none !important; }
    .theme-fashion, html[data-bs-theme="dark"] .theme-fashion {
        --ink: #000; --ink-2: #333; --ink-3: #555; --div: #ddd; --div-2: #ccc;
        --glass: #fff; --glass-2: #fff; --glass-3: #fff; --glass-solid: #fff; --menu: #fff;
        --edge: #ddd; --edge-soft: #ddd; --sh: none; --sh-lg: none; --blur: none;
        --ok: #0b6b44; --no: #a52a21; --wa: #7a5000; --in: #164f9e;
        background: #fff !important;
    }
    .theme-fashion .card { background: #fff !important; border-color: #ddd !important; backdrop-filter: none !important; box-shadow: none !important; }
    .theme-fashion .navbar-brand img { filter: none !important; }
}