/* ============================================================
   INVENTORY SYSTEM — Modern Design System v4
   Cool slate neutrals · Indigo/violet brand · Cyan accent
   Deep navy header · Clean surfaces · Refined typography
   ============================================================ */

/* Smooth cross-document view transitions (Chrome 126+) */
@view-transition { navigation: auto; }

/* ── Design Tokens — Light Mode ────────────────────────────── */
:root {
    /* Background — soft paper, slightly warm — easy on the eyes */
    --bg:               #FBFAF6;
    --bg-gradient-top:  #FDFCF9;
    --bg-gradient-btm:  #F4F2EB;

    /* Surfaces — paper-white cards */
    --surface:          #FFFFFF;
    --surface-raised:   #FAF9F4;
    --surface-overlay:  rgba(255, 255, 255, 0.97);

    /* Borders — barely-there warm haze */
    --line:             #ECEAE2;
    --line-strong:      #D6D2C5;

    /* Text — warm charcoal scale (avoids harsh pure black on cream) */
    --ink:              #2A2A2A;
    --ink-muted:        #6B6F76;
    --ink-soft:         #A8A49B;

    /* Brand — refined indigo (kept) */
    --brand:            #4F46E5;
    --brand-2:          #6366F1;
    --brand-light:      #818CF8;

    /* Accent — calm teal, pairs with paper bg better than cyan */
    --accent:           #0D9488;
    --accent-light:     #14B8A6;

    /* Semantic */
    --danger:           #DC2626;
    --success-bg:       #F0FAF3;
    --success-ink:      #15803D;
    --error-bg:         #FDF3F1;
    --error-ink:        #B91C1C;
    --info-bg:          #F2F4FE;
    --info-ink:         #3730A3;
    --warning-bg:       #FBF7E7;
    --warning-ink:      #A16207;

    /* Shadows — warm-tinted, restrained */
    --shadow-xs: 0 1px 2px rgba(60, 50, 35, 0.04);
    --shadow-sm: 0 2px 8px rgba(60, 50, 35, 0.05), 0 1px 3px rgba(60, 50, 35, 0.04);
    --shadow:    0 4px 22px rgba(60, 50, 35, 0.06), 0 1px 6px rgba(60, 50, 35, 0.04);
    --shadow-lg: 0 12px 42px rgba(60, 50, 35, 0.09), 0 4px 14px rgba(60, 50, 35, 0.05);

    /* Radius — refined, not too round */
    --radius-sm:   5px;
    --radius:      8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-full: 9999px;

    /* Focus ring — soft indigo halo, less aggressive than 0.30 */
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.22);

    /* Typography */
    --font-sans:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Sora", "Manrope", system-ui, sans-serif;
    --font-mono:    "Consolas", "Courier New", monospace;

    /* Header — deep navy (modern sidebar feel) */
    --hdr-from:       #0B1020;
    --hdr-mid:        #0F172A;
    --hdr-to:         #1E293B;
    --hdr-text:       #E2E8F0;
    --hdr-border:     rgba(255, 255, 255, 0.07);
    --hdr-btn-bg:     rgba(255, 255, 255, 0.06);
    --hdr-btn-hover:  rgba(255, 255, 255, 0.13);
    --hdr-nav-active: #0F172A;

    /* Submenu — clean white popup */
    --submenu-bg:     linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --submenu-border: #E2E8F0;
    --submenu-text:   #334155;
}

/* ── Design Tokens — Dark Mode ─────────────────────────────── */
[data-theme="dark"] {
    /* Backdrop — deep but slightly lifted from pitch black */
    --bg:               #0A0C14;
    --bg-gradient-top:  #0E1119;
    --bg-gradient-btm:  #06080F;

    /* 4-step surface scale: bg < surface < raised < line, each visibly distinct */
    --surface:          #131826;
    --surface-raised:   #1B2030;
    --surface-overlay:  rgba(19, 24, 38, 0.96);

    --line:             #262C3D;
    --line-strong:      #3A4259;

    /* Text — softened off-white reduces long-session eye strain */
    --ink:              #DCE3EE;
    --ink-muted:        #8E9AB2;
    --ink-soft:         #5A647A;

    /* Brand — refined indigo / violet */
    --brand:            #8B95FF;
    --brand-2:          #B19BFF;
    --brand-light:      #CFC2FF;

    /* Accent — slightly desaturated cyan, easier on eyes than neon */
    --accent:           #4DDDF0;
    --accent-light:     #7EE8F5;

    /* Semantic */
    --danger:           #F87171;
    --success-bg:       #062815;
    --success-ink:      #7DE7AE;
    --error-bg:         #251010;
    --error-ink:        #FCA5A5;
    --info-bg:          #0E1A2C;
    --info-ink:         #9CC4FD;
    --warning-bg:       #24190A;
    --warning-ink:      #FCD34D;

    /* Shadows — softer, layered (less crushing than 0.65 alpha) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.36), 0 1px 4px rgba(0, 0, 0, 0.22);
    --shadow:    0 6px 28px rgba(0, 0, 0, 0.42), 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 14px 48px rgba(0, 0, 0, 0.52), 0 5px 18px rgba(0, 0, 0, 0.30);

    --focus-ring: 0 0 0 3px rgba(139, 149, 255, 0.28);

    --hdr-from:       #06080F;
    --hdr-mid:        #0E1119;
    --hdr-to:         #181C28;
    --hdr-text:       #DCE3EE;
    --hdr-border:     rgba(255, 255, 255, 0.05);
    --hdr-btn-bg:     rgba(255, 255, 255, 0.05);
    --hdr-btn-hover:  rgba(255, 255, 255, 0.11);
    --hdr-nav-active: #0E1119;

    --submenu-bg:     linear-gradient(180deg, #1B2030 0%, #131826 100%);
    --submenu-border: #2A3145;
    --submenu-text:   #BAC4D8;
}

/* ── Base Reset ────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    font-size: 16px;
    color-scheme: light dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    background-image: linear-gradient(168deg, var(--bg-gradient-top) 0%, var(--bg-gradient-btm) 100%);
    background-attachment: fixed;
    transition: background 0.3s ease, color 0.22s ease;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at 8% 14%, rgba(99, 102, 241, 0.05) 0%, transparent 42%),
        radial-gradient(ellipse at 92% 88%, rgba(20, 184, 166, 0.045) 0%, transparent 42%);
}

[data-theme="dark"] body::before {
    background-image:
        radial-gradient(ellipse at 8% 14%, rgba(139, 149, 255, 0.10) 0%, transparent 42%),
        radial-gradient(ellipse at 92% 88%, rgba(77, 221, 240, 0.07) 0%, transparent 42%);
}

::selection {
    background: rgba(99, 102, 241, 0.14);
    color: var(--ink);
}

/* ── Animated Background Blobs ─────────────────────────────── */
.bg-accent {
    position: fixed;
    z-index: -2;
    border-radius: var(--radius-full);
    filter: blur(90px);
    animation: float-drift 22s ease-in-out infinite alternate;
    pointer-events: none;
    opacity: 0.55;
}

.bg-accent-one {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -160px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.14), transparent 65%);
}

.bg-accent-two {
    width: 580px;
    height: 580px;
    bottom: -240px;
    left: -180px;
    animation-delay: 2.2s;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.11), transparent 65%);
}

[data-theme="dark"] .bg-accent-one {
    background: radial-gradient(circle, rgba(139, 149, 255, 0.18), transparent 65%);
}
[data-theme="dark"] .bg-accent-two {
    background: radial-gradient(circle, rgba(77, 221, 240, 0.13), transparent 65%);
}

/* ── Back / Forward Buttons ────────────────────────────────── */
.global-back-icon {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 96;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(17, 16, 14, 0.55);
    color: #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: border-color 0.16s, background 0.16s, transform 0.18s;
}

.global-back-icon .icon { display: block; }
.global-back-icon .icon path { fill: currentColor; }

.global-back-icon:hover {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(10, 9, 8, 0.75);
    transform: translateY(-1px);
}

.global-back-icon:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.global-forward-icon { left: 54px; }

/* ── Header ────────────────────────────────────────────────── */
.main-header {
    position: sticky;
    top: 0;
    z-index: 48;
    color: var(--hdr-text);
    padding: 0.62rem 1.4rem 0.56rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    background: linear-gradient(180deg, var(--hdr-from) 0%, var(--hdr-to) 100%);
    border-bottom: 1px solid var(--hdr-border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 24px rgba(0,0,0,0.28);
    backdrop-filter: blur(12px) saturate(120%);
    transition: background 0.28s ease;
}

.main-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, transparent 80%);
}

.main-header > * { position: relative; z-index: 1; }

/* ── Header Top ────────────────────────────────────────────── */
.header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    order: 2;
    margin-left: auto;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 0.50rem;
    font-size: 0.86rem;
}

.user-actions span {
    display: inline-flex;
    align-items: center;
    gap: 0.30rem;
    padding: 0.30rem 0.62rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-full);
    background: var(--hdr-btn-bg);
    font-size: 0.80rem;
    color: rgba(240, 232, 220, 0.80);
    letter-spacing: 0.01em;
}

.user-actions strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: #E2E8F0;
}

/* header btn-light — white ghost style */
.header-top .btn-light,
.user-actions .btn-light {
    background: var(--hdr-btn-bg);
    color: rgba(240, 232, 220, 0.82);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.header-top .btn-light:hover,
.user-actions .btn-light:hover {
    background: var(--hdr-btn-hover);
    color: #E2E8F0;
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    filter: none;
    box-shadow: none;
}

/* ── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--hdr-btn-bg);
    color: var(--hdr-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s, transform 0.22s;
}

.theme-toggle:hover {
    background: var(--hdr-btn-hover);
    border-color: rgba(255,255,255,0.32);
    transform: rotate(18deg) scale(1.08);
}

.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.theme-toggle .t-sun { display: none; }
.theme-toggle .t-moon { display: none; }
[data-theme="dark"]  .theme-toggle .t-sun { display: block; }
[data-theme="light"] .theme-toggle .t-moon { display: block; }

/* ── Navigation ────────────────────────────────────────────── */
.ribbon-trigger { display: none; }

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    order: 1;
    flex: 1 1 auto;
    padding-left: 2rem;
    align-items: center;
}

body.has-global-nav-controls .main-nav { padding-left: 5.6rem; }

.main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(240, 232, 220, 0.68);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.33rem 0.68rem;
    font-size: 0.835rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: color 0.14s, background 0.14s, border-color 0.14s;
}

.main-nav a:hover {
    color: #E2E8F0;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.10);
}

.main-nav a.active {
    color: #0F172A;
    background: #E2E8F0;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

[data-theme="dark"] .main-nav a.active {
    color: #0F172A;
    background: #C7D2FE;
}

/* ── Nav Dropdown ──────────────────────────────────────────── */
.main-nav .nav-dropdown { position: relative; }

.main-nav .nav-dropdown > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: rgba(240, 232, 220, 0.68);
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.33rem 0.68rem;
    font-size: 0.835rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    user-select: none;
    transition: color 0.14s, background 0.14s, border-color 0.14s;
}

.main-nav .nav-dropdown > summary::-webkit-details-marker { display: none; }
.main-nav .nav-dropdown > summary::marker { content: ""; }

.main-nav .nav-dropdown > summary::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
    opacity: 0.50;
    margin-top: 1px;
    transition: transform 0.18s;
}

.main-nav .nav-dropdown[open] > summary::after { transform: rotate(180deg); }

.main-nav .nav-dropdown > summary:hover {
    color: #E2E8F0;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.10);
}

.main-nav .nav-dropdown.active > summary,
.main-nav .nav-dropdown[open] > summary {
    color: #0F172A;
    background: #E2E8F0;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

[data-theme="dark"] .main-nav .nav-dropdown.active > summary,
[data-theme="dark"] .main-nav .nav-dropdown[open] > summary {
    color: #0F172A;
    background: #C7D2FE;
}

/* ── Submenu ───────────────────────────────────────────────── */
.nav-submenu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 120;
    min-width: 210px;
    padding: 0.28rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--submenu-border);
    background: var(--submenu-bg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
}

.main-nav .nav-dropdown:not([open]) > .nav-submenu { display: none; }

.nav-submenu a {
    display: block;
    color: var(--submenu-text);
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 0.40rem 0.54rem;
    font-size: 0.815rem;
    font-weight: 600;
    background: transparent;
    transition: all 0.13s;
}

.nav-submenu a + a { margin-top: 0.10rem; }

.nav-submenu a:hover {
    background: var(--info-bg);
    border-color: var(--line-strong);
    color: var(--brand);
    transform: translateX(2px);
}

.nav-submenu a.active {
    color: #FFFFFF;
    background: var(--brand-2);
    border-color: transparent;
}

/* Admin link in nav */
.main-nav a[href*="/admin/"] {
    color: rgba(165, 180, 252, 0.85);
    border-color: rgba(99, 102, 241, 0.22);
    background: rgba(99, 102, 241, 0.07);
}
.main-nav a[href*="/admin/"]:hover {
    color: rgba(199, 210, 254, 1);
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.32);
}

/* ── Desktop Ribbon (peek-to-reveal) ───────────────────────── */
@media (min-width: 701px) {
    .ribbon-trigger {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 6px;
        z-index: 94;
    }

    .main-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        transform: translateY(calc(-100% + 5px));
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        overflow: visible;
        pointer-events: none;
    }

    body.ribbon-open .main-header,
.main-header:focus-within {
        transform: translateY(0);
        pointer-events: auto;
    }

    .main-header > * {
        opacity: 0;
        transform: translateY(-5px);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }

    body.ribbon-open .main-header > *,
.main-header:focus-within > * {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav {
        overflow: visible;
        pointer-events: auto;
        align-items: center;
    }

    .main-nav .nav-dropdown { display: inline-flex; align-items: center; }

    .main-nav .nav-dropdown > .nav-submenu {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        z-index: 130;
    }

    .main-nav .nav-dropdown:not([open]) > .nav-submenu { display: none; }
    .main-nav .nav-dropdown[open] > .nav-submenu { display: block; pointer-events: auto; }

    .main-nav .nav-dropdown:hover > summary,
.main-nav .nav-dropdown:focus-within > summary {
        color: #0F172A;
        background: #E2E8F0;
        font-weight: 700;
        box-shadow: 0 1px 6px rgba(0,0,0,0.22);
    }

    [data-theme="dark"] .main-nav .nav-dropdown:hover > summary,
[data-theme="dark"] .main-nav .nav-dropdown:focus-within > summary {
        color: #0F172A;
        background: #C7D2FE;
    }
}

/* ── Container ─────────────────────────────────────────────── */
.container {
    width: min(1920px, 96%);
    margin: 1.4rem auto 2.4rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

@media (min-width: 701px) {
    .container { margin-top: 0.5rem; }
}

/* ── Flash Messages ────────────────────────────────────────── */
.messages { margin-bottom: 0.80rem; }

.message {
    border-radius: var(--radius-md);
    padding: 0.60rem 0.88rem;
    margin-bottom: 0.36rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    animation: msg-enter 0.26s ease both;
}

.message.success {
    background: var(--success-bg);
    color: var(--success-ink);
    border-color: rgba(45, 95, 45, 0.18);
}

.message.error {
    background: var(--error-bg);
    color: var(--error-ink);
    border-color: rgba(192, 57, 43, 0.20);
}

.message.info,
.message.warning {
    background: var(--info-bg);
    color: var(--info-ink);
    border-color: rgba(196, 97, 62, 0.18);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 1.30rem 1.32rem 1.40rem;
    margin-bottom: 1.05rem;
    animation: card-enter 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.25s;
}

.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(99, 102, 241, 0.55) 35%,
        rgba(99, 102, 241, 0.20) 65%,
        transparent 95%);
}

.card:nth-of-type(2) { animation-delay: 0.04s; }
.card:nth-of-type(3) { animation-delay: 0.08s; }
.card:nth-of-type(4) { animation-delay: 0.12s; }

/* Danger card */
.danger-zone-card {
    border-color: rgba(192, 57, 43, 0.20);
    background: linear-gradient(180deg, var(--error-bg), var(--surface));
}

.danger-zone-card::before {
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(192, 57, 43, 0.50) 35%,
        rgba(192, 57, 43, 0.18) 65%,
        transparent 95%);
}

/* ── Card Heading ──────────────────────────────────────────── */
.card-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.70rem;
    margin-bottom: 0.90rem;
}

.card-heading > * { min-width: 0; }

.card-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.78rem;
    line-height: 1.16;
    letter-spacing: -0.025em;
    font-weight: 700;
    flex: 1 1 300px;
    color: var(--ink);
}

.card-heading p {
    margin: 0.14rem 0 0;
    color: var(--ink-muted);
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 58ch;
    flex: 1 1 300px;
}

.card-heading > .list-toolbar,
.card-heading > form.list-toolbar {
    margin-left: auto;
    flex: 1 1 440px;
    min-width: min(100%, 300px);
    justify-content: flex-end;
}

.card-heading > .list-toolbar input[type="search"],
.card-heading > form.list-toolbar input[type="search"] {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 400px;
}

/* ── Section Titles ────────────────────────────────────────── */
.subsection-title {
    margin: 1rem 0 0.42rem;
    font-family: var(--font-display);
    font-size: 1.04rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--ink);
}

.subsection-meta {
    margin: 0 0 0.68rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

/* ── KPI Chips ─────────────────────────────────────────────── */
.kpi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
    margin-bottom: 0.90rem;
}

.kpi-chip {
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-full);
    padding: 0.32rem 0.72rem;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.kpi-chip:hover {
    background: var(--info-bg);
    border-color: var(--brand-light);
    color: var(--brand);
}

/* ── Form Grid ─────────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.80rem;
}

.compact-grid { grid-template-columns: minmax(220px, 440px); }

p { margin: 0; }

/* ── Labels ────────────────────────────────────────────────── */
label {
    display: block;
    margin-bottom: 0.22rem;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--ink-muted);
    letter-spacing: 0.01em;
}

small {
    display: block;
    margin-top: 0.26rem;
    color: var(--ink-soft);
    font-size: 0.77rem;
}

/* ── Inputs / Selects / Textareas ──────────────────────────── */
input,
select,
textarea {
    width: 100%;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 0.56rem 0.68rem;
    font: 500 0.88rem/1.45 var(--font-sans);
    color: var(--ink);
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), var(--shadow-xs);
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    -webkit-appearance: none;
    appearance: none;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), var(--shadow-xs);
}

textarea { min-height: 108px; resize: vertical; }

textarea.auto-expand-textarea {
    min-height: 48px;
    height: 48px;
    resize: none;
    overflow-y: hidden;
}

input[readonly] {
    background: var(--surface-raised);
    color: var(--ink-soft);
    cursor: default;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-2);
    box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255,255,255,0.40);
    background: var(--surface);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ── Checkbox ──────────────────────────────────────────────── */
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.44rem;
    font-weight: 600;
}

.checkbox-field input {
    width: auto;
    margin: 0;
    accent-color: var(--brand-2);
}

.checkbox-field label { margin: 0; }

/* ── Error Styles ──────────────────────────────────────────── */
.error-text {
    display: inline-block;
    color: var(--error-ink);
    font-size: 0.77rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.error-list {
    margin-top: 0.68rem;
    padding: 0.54rem 0.68rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(192, 57, 43, 0.22);
    background: var(--error-bg);
    color: var(--error-ink);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── Action Row ────────────────────────────────────────────── */
.action-row {
    margin-top: 0.80rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.46rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.05rem;
}

.action-row > * { flex: 0 0 auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.30rem;
    border: 1.5px solid rgba(180, 80, 45, 0.15);
    border-radius: var(--radius-md);
    padding: 0.50rem 0.92rem;
    color: #FFFFFF;
    background: var(--brand-2);
    box-shadow: 0 1px 4px rgba(196, 97, 62, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.13s, box-shadow 0.13s, filter 0.13s, background 0.13s;
}

.btn:hover {
    background: var(--brand);
    box-shadow: 0 4px 16px rgba(196, 97, 62, 0.38), inset 0 1px 0 rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(196, 97, 62, 0.22);
    filter: brightness(0.96);
}

.btn-light {
    background: var(--surface);
    color: var(--ink-muted);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
    border-width: 1.5px;
}

.btn-light:hover {
    background: var(--surface-raised);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    filter: none;
}

.btn-danger {
    background: var(--danger);
    border-color: rgba(160, 40, 32, 0.20);
    box-shadow: 0 1px 4px rgba(192, 57, 43, 0.30);
}

.btn-danger:hover {
    background: #A93226;
    box-shadow: 0 4px 14px rgba(192, 57, 43, 0.38);
}

.btn-sm {
    padding: 0.30rem 0.58rem;
    font-size: 0.73rem;
}

/* ── Icon Buttons ──────────────────────────────────────────── */
.icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: none;
    background: #3B82F6;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(59,130,246,0.30);
    transition: transform 0.13s, box-shadow 0.13s, background 0.13s;
}

.icon-btn:hover {
    transform: translateY(-2px);
    background: #2563EB;
    box-shadow: 0 4px 12px rgba(59,130,246,0.42);
}

.icon-btn-delete {
    background: #EF4444;
    color: #fff;
    box-shadow: 0 1px 4px rgba(239,68,68,0.30);
}

.icon-btn-delete:hover {
    background: #DC2626;
    box-shadow: 0 4px 12px rgba(239,68,68,0.42);
}

.icon { width: 0.82rem; height: 0.82rem; }
.icon path { fill: currentColor; }

/* ── Accessibility ─────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Table Wrapper ─────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: background 0.22s;
}

/* ── Sticky card helpers ───────────────────────────────────── */
.item-create-card { position: sticky; top: 12px; z-index: 1; }
.items-list-card { position: relative; z-index: 2; margin-top: 1rem; }

/* ── Scroll containers ─────────────────────────────────────── */
.items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll {
    height: 470px;
    overflow-y: auto;
}

.items-table-scroll thead th,
.purchases-table-scroll thead th,
.stock-table-scroll thead th,
.suppliers-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.purchases-table-scroll.created-batches-table-scroll,
.purchases-table-scroll.batch-stock-table-scroll {
    height: auto;
    max-height: 470px;
}

/* ── Tables ────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 0.60rem 0.85rem;
    text-align: left;
    font-size: 0.825rem;
    vertical-align: middle;
    line-height: 1.3;
    color: var(--ink);
}

th {
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.70rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1.5px solid var(--line-strong);
    white-space: nowrap;
    transition: background 0.22s;
    padding-top: 0.52rem;
    padding-bottom: 0.52rem;
}

.table-meta-row th {
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.70rem;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom-width: 1px;
    font-weight: 600;
}

tbody tr td {
    background: var(--surface);
    transition: background 0.10s;
}

tbody tr:nth-child(2n) td {
    background: var(--surface);
}

[data-theme="dark"] tbody tr:nth-child(2n) td {
    background: var(--surface);
}

tbody tr:hover td,
tbody tr:focus-within td {
    background: #FFE7C2 !important;
    color: #7A3E00 !important;
}

tbody tr:hover td:first-child,
tbody tr:focus-within td:first-child {
    box-shadow: inset 3px 0 0 #B45309;
}

/* ── Bold first data column (item/product name) ────────────── */
tbody tr td:first-child {
    font-weight: 700;
    color: var(--ink);
}

/* ── Table Links ───────────────────────────────────────────── */
.table-link {
    color: var(--brand-2);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(99, 102, 241, 0.38);
    transition: color 0.13s, border-color 0.13s;
}

.table-link:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* ── Table alignment helpers ───────────────────────────────── */
.bora-split-head,
.bora-split-subhead,
.bora-split-col,
.batch-stock-center-col { text-align: center; }

.action-cell {
    white-space: nowrap;
    vertical-align: middle;
}

.action-cell > * + * { margin-left: 0.26rem; }

.inline-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

/* ── Code Pill ─────────────────────────────────────────────── */
.code-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.50rem;
    border-radius: var(--radius-full);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    color: var(--brand-2);
    font-family: var(--font-mono);
    font-size: 0.71rem;
    font-weight: 700;
}

/* ── Status Badges ─────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.11rem 0.46rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--line-strong);
    background: var(--surface-raised);
    color: var(--ink-muted);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.status-badge-danger {
    border-color: rgba(192, 57, 43, 0.22);
    background: var(--error-bg);
    color: var(--error-ink);
}

/* ── Muted Text ────────────────────────────────────────────── */
.muted-text {
    margin-top: 0.65rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

/* ── List Toolbar ──────────────────────────────────────────── */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.46rem;
    min-width: 0;
}

.list-toolbar > * { min-width: 0; }

.list-toolbar label {
    margin: 0;
    font-size: 0.81rem;
    color: var(--ink-muted);
    font-weight: 600;
}

.list-toolbar input,
.list-toolbar select {
    width: 360px;
    max-width: 55vw;
    min-width: 0;
}

/* ── Date Input (DD/MM/YYYY) ───────────────────────────────── */
.date-ddmmyyyy-wrap {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
}

.date-ddmmyyyy-wrap .date-ddmmyyyy-display {
    flex: 1 1 auto;
    min-width: 0;
}

.date-ddmmyyyy-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--brand-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.13s, background 0.13s;
}

.date-ddmmyyyy-button:hover {
    border-color: var(--brand-light);
    background: var(--info-bg);
}

.date-ddmmyyyy-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.date-ddmmyyyy-native,
.date-ddmmyyyy-wrap > input[type="date"][data-ddmmyyyy-enhanced="1"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Ledger Filters ────────────────────────────────────────── */
.ledger-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.50rem;
    margin-bottom: 0.88rem;
}

.ledger-date-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.38rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ledger-date-toolbar .btn { white-space: nowrap; }
.ledger-date-toolbar label { white-space: nowrap; }

/* Role-based action gating — hides edit / delete controls when the
   logged-in user lacks rights on the current submenu. Server-side
   middleware also blocks direct URL hits, so this is purely UX polish. */
body[data-can-edit="0"] .icon-btn-edit,
body[data-can-edit="0"] a.icon-btn-edit,
body[data-can-edit="0"] button.icon-btn-edit {
    display: none !important;
}
body[data-can-delete="0"] .icon-btn-delete,
body[data-can-delete="0"] form.inline-form:has(.icon-btn-delete),
body[data-can-delete="0"] button.icon-btn-delete {
    display: none !important;
}

.ledger-date-toolbar .ledger-date-input {
    width: 170px;
    max-width: 170px;
    min-width: 150px;
}

.ledger-date-toolbar .date-ddmmyyyy-wrap { width: auto; flex: 0 0 auto; }
.ledger-party-toolbar { margin-left: auto; }
.ledger-party-toolbar input { width: 240px; max-width: 240px; }

/* ── Supplier Ledger ───────────────────────────────────────── */
.supplier-ledger-heading { align-items: flex-end; gap: 0.50rem; }

.supplier-ledger-title,
.supplier-ledger-heading > h2:not(.supplier-ledger-title) {
    font-size: 1.34rem;
    line-height: 1.12;
    white-space: nowrap;
    flex: 1 1 320px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.supplier-ledger-toolbar {
    flex: 1 1 600px;
    min-width: min(100%, 320px);
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.supplier-ledger-toolbar .ledger-date-input { width: 150px; max-width: 150px; min-width: 120px; }
.supplier-ledger-toolbar .date-ddmmyyyy-wrap { width: auto; flex: 0 0 auto; }
.supplier-ledger-toolbar label { white-space: nowrap; }

.supplier-ledger-toolbar #supplier-ledger-search,
.supplier-ledger-toolbar #purchase-transport-ledger-search,
.supplier-ledger-toolbar #sales-transport-ledger-search,
.supplier-ledger-toolbar #sales-party-ledger-search {
    width: 220px;
    max-width: 320px;
    min-width: 150px;
    flex: 1 1 220px;
}

.supplier-ledger-overview-row {
    display: flex;
    align-items: center;
    gap: 0.60rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 0.88rem;
}

.supplier-ledger-kpi-inline {
    margin: 0;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.12rem;
}

.supplier-ledger-kpi-inline .kpi-chip { white-space: nowrap; flex: 0 0 auto; }
.supplier-ledger-overview-actions { margin: 0 0 0 auto; flex-wrap: nowrap; flex: 0 0 auto; }

/* ── Batch Stock Toolbar ───────────────────────────────────── */
.batch-stock-toolbar-inline {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    margin-bottom: 0.88rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.batch-filter-inline-field {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.batch-stock-toolbar-inline label {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-weight: 600;
    white-space: nowrap;
    display: block;
    line-height: 1.1;
}

.batch-stock-toolbar-inline .ledger-date-input {
    width: 128px !important;
    max-width: 128px !important;
    min-width: 128px !important;
    padding: 0.44rem 0.50rem;
}

.batch-stock-toolbar-inline .batch-stock-name-select {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    padding: 0.44rem 0.50rem;
}

.batch-stock-toolbar-inline .btn { white-space: nowrap; }
.batch-stock-toolbar-inline > .btn { align-self: flex-end; }

.batch-stock-search-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex: 0 0 auto;
}

.batch-stock-search-group #batch-stock-search {
    width: 210px !important;
    max-width: 210px !important;
    min-width: 180px !important;
    padding: 0.44rem 0.54rem;
}

/* ── Batch Type Tabs ───────────────────────────────────────── */
.batch-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-bottom: 0.88rem;
}

.batch-tab {
    text-decoration: none;
    border: 1.5px solid var(--line-strong);
    background: var(--surface-raised);
    color: var(--ink-muted);
    border-radius: var(--radius-full);
    padding: 0.30rem 0.72rem;
    font-weight: 600;
    font-size: 0.81rem;
    transition: all 0.14s;
}

.batch-tab:hover {
    border-color: var(--brand-light);
    background: var(--info-bg);
    color: var(--brand);
    transform: translateY(-1px);
}

.batch-tab.active {
    background: var(--brand-2);
    color: #FFFFFF;
    border-color: var(--brand-2);
    box-shadow: 0 2px 10px rgba(196, 97, 62, 0.28);
    font-weight: 700;
}

/* ── Batch Actions / Inline Form ───────────────────────────── */
.batch-type-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.56rem;
    margin-bottom: 0.88rem;
}

.batch-type-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.44rem;
    background: var(--surface-raised);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.50rem 0.60rem;
}

.batch-type-inline-form label { margin: 0; font-size: 0.81rem; }
.batch-type-inline-form input,
.batch-type-inline-form select { width: 280px; }
.batch-type-inline-form select { width: 150px; }

/* ── Bora Equation ─────────────────────────────────────────── */
.bora-equation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 0.56rem;
    align-items: end;
    margin-bottom: 0.26rem;
}

.bora-equation-field { margin: 0; }
.bora-equation-field label { text-align: center; letter-spacing: 0.02em; margin-bottom: 0.44rem; }
.bora-equation-field input { border-width: 2px; border-radius: 0; min-height: 44px; }
.bora-equation-field input[readonly] { color: var(--ink); font-weight: 700; }

/* ── Quantity / Unit Pair ──────────────────────────────────── */
.quantity-unit-pair {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr);
    gap: 0.38rem;
    align-items: start;
}

.quantity-unit-pair > * { min-width: 0; }

/* ── Checkbox cell ─────────────────────────────────────────── */
.checkbox-cell { text-align: center; }
.checkbox-cell input { width: auto; accent-color: var(--brand-2); }

/* ── Batch Ingredient ──────────────────────────────────────── */
.batch-ingredient-controls {
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 0.50rem;
}

.batch-ingredient-controls .subsection-title { margin: 0; }

.batch-ingredient-actions {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 0.44rem;
    white-space: nowrap;
}

.batch-ingredient-actions > * { flex: 0 0 auto; }

.csv-upload-input { width: 360px !important; min-width: 260px; max-width: 360px; padding: 0.40rem 0.54rem; }
.csv-upload-help { margin: 0 0 0.44rem; font-size: 0.77rem; }

.batch-ingredient-scroll { max-height: 430px; overflow-y: auto; }
.batch-ingredient-scroll .quantity-unit-pair { grid-template-columns: minmax(140px, 1fr); }
.batch-ingredient-scroll th.total-qty-col,
.batch-ingredient-scroll td.total-qty-col { text-align: center; white-space: nowrap; }
.batch-ingredient-scroll td.total-qty-col .js-total-quantity,
.batch-ingredient-scroll th.total-qty-col .js-grand-total-quantity { font-weight: 800; color: var(--brand-2); }
.batch-ingredient-scroll th.total-qty-col .total-qty-header-value { margin-top: 0.12rem; font-size: 0.84rem; line-height: 1.15; }
.batch-ingredient-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* ── Batch Actual Bora ─────────────────────────────────────── */
.batch-actual-bora-form { display: flex; align-items: center; gap: 0.34rem; }
.batch-stock-edit-btn { padding: 0.34rem 0.62rem; }
.batch-actual-bora-input { width: 110px; min-width: 95px; max-width: 130px; padding: 0.36rem 0.44rem; }
.batch-actual-bora-save,
.batch-actual-bora-edit,
.batch-actual-bora-cancel { padding: 0.36rem 0.58rem; }

/* ── Stock Filter / Charts ─────────────────────────────────── */
.stock-filter-grid { margin-bottom: 0.80rem; }
.stock-filter-action { display: flex; align-items: flex-end; }

.chart-metric-row { display: flex; align-items: center; gap: 0.44rem; }
.chart-metric-row label { margin: 0; }
.chart-metric-row select { width: 150px; }

.stock-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.80rem;
}

.stock-chart-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 0.80rem;
    min-height: 282px;
    transition: background 0.22s, border-color 0.22s;
}

.stock-chart-card canvas { width: 100%; height: 220px !important; max-height: 220px; }

/* ── Login Card ────────────────────────────────────────────── */
.login-card {
    max-width: 480px;
    margin: 2.5rem auto;
}

/* ── Custom Scrollbars ─────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }

::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    border: 2px solid var(--bg);
    background: var(--line-strong);
}

::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(22px, -18px, 0); }
}

@keyframes msg-enter {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── View Transition Styles ────────────────────────────────── */
::view-transition-old(root) {
    animation: 180ms ease both vt-fade-out;
}

::view-transition-new(root) {
    animation: 260ms ease both vt-fade-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: ≤ 980px ───────────────────────────────────── */
@media (max-width: 980px) {
    .container { width: min(1920px, 98.8%); }
    .card-heading { flex-direction: column; align-items: flex-start; }
    .supplier-ledger-title { font-size: 1.24rem; }
    .item-create-card { position: static; top: auto; }
}

/* ── Responsive: Mobile ≤ 700px ────────────────────────────── */
@media (max-width: 700px) {
    .main-header { display: block; padding: 0.78rem 0.88rem 0.88rem; }
    .user-actions { width: 100%; justify-content: space-between; }
    .header-top { order: initial; margin-left: 0; }
    .main-nav { order: initial; gap: 0.30rem; margin-top: 0.36rem; padding-left: 0; }
    .main-nav a { padding: 0.30rem 0.58rem; font-size: 0.78rem; }
    .main-nav .nav-dropdown > summary { padding: 0.30rem 0.58rem; font-size: 0.78rem; }
    .main-nav .nav-dropdown { width: 100%; }
    .main-nav .nav-dropdown > summary { width: 100%; justify-content: center; }
    .global-back-icon { top: 7px; left: 8px; width: 36px; height: 36px; }
    .global-forward-icon { left: 48px; }
    .nav-submenu { position: static; margin-top: 0.34rem; min-width: 0; width: 100%; }
    .container { width: 98%; margin-top: 0.88rem; }
    .card { border-radius: var(--radius-lg); padding: 0.90rem; }
    .card-heading h2 { font-size: 1.42rem; }
    .form-grid { grid-template-columns: 1fr; }

    .items-table-scroll,
.purchases-table-scroll,
.suppliers-table-scroll,
.stock-table-scroll { height: 350px; }

    .purchases-table-scroll.batch-stock-table-scroll,
.purchases-table-scroll.created-batches-table-scroll { height: auto; max-height: 350px; }

    .stock-chart-grid { grid-template-columns: 1fr; }
    .stock-chart-card { min-height: 250px; }
    .stock-chart-card canvas { height: 180px !important; max-height: 180px; }

    .list-toolbar { width: 100%; flex-direction: column; align-items: flex-start; }
    .list-toolbar input,
.list-toolbar select { width: 100%; max-width: 100%; }

    .ledger-filter-row { width: 100%; flex-direction: column; align-items: stretch; }
    .ledger-date-toolbar,
.ledger-party-toolbar { width: 100%; }
    .ledger-party-toolbar { margin-left: 0; }
    .ledger-date-toolbar .ledger-date-input { width: 100%; max-width: 100%; min-width: 0; }

    .ledger-date-toolbar .date-ddmmyyyy-wrap,
.supplier-ledger-toolbar .date-ddmmyyyy-wrap { width: 100%; max-width: 100%; min-width: 0; flex: 1 1 100%; }

    .supplier-ledger-toolbar { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .supplier-ledger-toolbar #supplier-ledger-search,
.supplier-ledger-toolbar #purchase-transport-ledger-search,
.supplier-ledger-toolbar #sales-transport-ledger-search,
.supplier-ledger-toolbar #sales-party-ledger-search { width: 100%; max-width: 100%; min-width: 0; }

    .supplier-ledger-overview-row { flex-wrap: wrap; overflow-x: visible; }
    .supplier-ledger-kpi-inline { flex-wrap: wrap; width: 100%; overflow-x: visible; padding-bottom: 0; }
    .supplier-ledger-overview-actions { width: 100%; margin-top: 0; margin-left: 0; }

    .batch-stock-toolbar-inline { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
    .batch-type-inline-form { width: 100%; }
    .batch-type-inline-form input,
.batch-type-inline-form select { width: 100%; }
    .csv-upload-input { width: 220px; min-width: 180px; }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   UI REFRESH v5  ·  All-page component upgrades (2026-05-19)
   One file — every inventory page gets the same polish pass:
   Cards, tables, toolbars, badges, tabs, KPI chips, form areas.
════════════════════════════════════════════════════════════════ */

/* ── Card: fuller accent bar + lifted shadow ───────────────── */
.card::before {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand)   0%,
        var(--brand-2) 38%,
        var(--accent)  78%,
        transparent    100%
    );
    opacity: 0.85;
}

[data-theme="dark"] .card::before { opacity: 0.65; }

.card {
    box-shadow:
        0 2px 12px rgba(60,50,35,.06),
        0 6px 28px rgba(60,50,35,.04),
        0 1px 4px rgba(60,50,35,.05);
}

[data-theme="dark"] .card {
    box-shadow:
        0 2px 14px rgba(0,0,0,.28),
        0 6px 32px rgba(0,0,0,.22);
}

/* ── Earlier th rule kept compact to match the late-binding rule (line 2256). */
th {
    padding-top:    0.36rem;
    padding-bottom: 0.36rem;
    font-size:      0.62rem;
    letter-spacing: 0.10em;
}

/* ── Table body: theme-consistent row alternation ──────────── */
tbody tr:nth-child(2n) td { background: var(--surface-raised); }

[data-theme="dark"] tbody tr:nth-child(2n) td { background: var(--surface-raised); }

/* ── Hover accent: slightly stronger left bar ──────────────── */
tbody tr:hover td:first-child,
tbody tr:focus-within td:first-child {
    box-shadow: inset 4px 0 0 var(--brand-2);
}

/* ── Ledger filter bar: card-like pill wrapper ─────────────── */
.ledger-filter-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.68rem 0.90rem;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1rem;
}

/* ── Batch stock toolbar: same card feel ───────────────────── */
.batch-stock-toolbar-inline {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.60rem 0.80rem;
    box-shadow: var(--shadow-xs);
    margin-bottom: 1rem;
}

/* ── Batch type tabs: tighter + active glow ───────────────── */
.batch-tab {
    font-size: 0.78rem;
    padding: 0.28rem 0.68rem;
}

.batch-tab.active {
    box-shadow:
        0 2px 12px rgba(99,102,241,.32),
        0 0 0 1px var(--brand-2);
}

/* ── KPI chip colour variants ──────────────────────────────── */
.kpi-chip-success {
    background: rgba(5,150,105,.10);
    border-color: rgba(5,150,105,.24);
    color: #059669;
}
.kpi-chip-warning {
    background: rgba(217,119,6,.10);
    border-color: rgba(217,119,6,.24);
    color: #D97706;
}
.kpi-chip-danger {
    background: rgba(220,38,38,.10);
    border-color: rgba(220,38,38,.24);
    color: #DC2626;
}
.kpi-chip-brand {
    background: var(--info-bg);
    border-color: var(--brand-light);
    color: var(--brand);
}
.kpi-chip-cyan {
    background: rgba(8,145,178,.10);
    border-color: rgba(8,145,178,.24);
    color: #0891B2;
}
.kpi-chip-purple {
    background: rgba(109,40,217,.10);
    border-color: rgba(109,40,217,.24);
    color: #7C3AED;
}

[data-theme="dark"] .kpi-chip-success { background: rgba(52,211,153,.14); color: #34D399; border-color: rgba(52,211,153,.28); }
[data-theme="dark"] .kpi-chip-warning { background: rgba(251,191,36,.14); color: #FBBF24; border-color: rgba(251,191,36,.28); }
[data-theme="dark"] .kpi-chip-danger { background: rgba(248,113,113,.14); color: #F87171; border-color: rgba(248,113,113,.28); }
[data-theme="dark"] .kpi-chip-cyan { background: rgba(34,211,238,.12); color: #22D3EE; border-color: rgba(34,211,238,.26); }
[data-theme="dark"] .kpi-chip-purple { background: rgba(192,132,252,.12); color: #C084FC; border-color: rgba(192,132,252,.26); }

/* ── Status badge colour variants ──────────────────────────── */
.status-badge-success {
    background: rgba(5,150,105,.10);
    border-color: rgba(5,150,105,.24);
    color: #059669;
}
.status-badge-warning {
    background: rgba(217,119,6,.10);
    border-color: rgba(217,119,6,.24);
    color: #D97706;
}
.status-badge-info {
    background: var(--info-bg);
    border-color: var(--brand-light);
    color: var(--brand);
}
.status-badge-purple {
    background: rgba(109,40,217,.10);
    border-color: rgba(109,40,217,.24);
    color: #7C3AED;
}
.status-badge-cyan {
    background: rgba(8,145,178,.10);
    border-color: rgba(8,145,178,.24);
    color: #0891B2;
}

[data-theme="dark"] .status-badge-success { background: rgba(52,211,153,.14); color: #34D399; border-color: rgba(52,211,153,.28); }
[data-theme="dark"] .status-badge-warning { background: rgba(251,191,36,.14); color: #FBBF24; border-color: rgba(251,191,36,.28); }
[data-theme="dark"] .status-badge-info { background: rgba(129,140,248,.12); color: #818CF8; border-color: rgba(129,140,248,.28); }
[data-theme="dark"] .status-badge-purple { background: rgba(192,132,252,.12); color: #C084FC; border-color: rgba(192,132,252,.26); }
[data-theme="dark"] .status-badge-cyan { background: rgba(34,211,238,.12); color: #22D3EE; border-color: rgba(34,211,238,.26); }

/* ── Number highlight helpers ──────────────────────────────── */
.num-highlight { font-weight: 800; color: var(--brand-2); }
.num-highlight-success { font-weight: 800; color: var(--success-ink); }
.num-highlight-danger { font-weight: 800; color: var(--danger); }
.num-highlight-muted { font-weight: 700; color: var(--ink-muted); }

/* ── Subtle section divider ────────────────────────────────── */
.section-divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0.90rem 0;
}

/* ── Page-level summary stats strip ───────────────────────── */
.page-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.60rem;
    margin-bottom: 1rem;
}

.page-stat-chip {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.60rem 0.95rem;
    min-width: 110px;
    box-shadow: var(--shadow-xs);
    transition: transform 0.18s, box-shadow 0.18s;
}

.page-stat-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.page-stat-chip-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    margin-bottom: 0.20rem;
}

.page-stat-chip-value {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
}

.page-stat-chip-value small {
    display: inline;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-left: 0.18rem;
}

/* Chip colour accents */
.page-stat-chip-purple { border-top: 3px solid #7C3AED; }
.page-stat-chip-cyan { border-top: 3px solid #0891B2; }
.page-stat-chip-green { border-top: 3px solid #059669; }
.page-stat-chip-orange { border-top: 3px solid #D97706; }
.page-stat-chip-rose { border-top: 3px solid #BE185D; }
.page-stat-chip-brand { border-top: 3px solid var(--brand); }

/* ── Table action cell: icon buttons ───────────────────────── */
.icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    background: #3B82F6;
    color: #fff;
    border: none;
    box-shadow: 0 1px 4px rgba(59,130,246,0.30);
}

/* ── Search / filter input inside toolbars ─────────────────── */
.list-toolbar input[type="search"],
.list-toolbar input[type="text"],
.list-toolbar select {
    border-radius: var(--radius-md);
}

/* ── Improved button primary appearance ────────────────────── */
.btn {
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
}

/* ── Empty / zero-state row ────────────────────────────────── */
.table-empty-row td {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ink-muted);
    font-size: 0.84rem;
    font-style: italic;
}

/* ── Filter bar label "From / To" style ────────────────────── */
.ledger-date-toolbar label,
.ledger-filter-row label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}

/* ── Sidebar shell ──────────────────────────────────────────── */

/* ── Brand ──────────────────────────────────────────────────── */

/* ── Nav scroll area ────────────────────────────────────────── */

/* ── Dashboard standalone link ──────────────────────────────── */

/* ── Section groups ─────────────────────────────────────────── */

/* ── Sub-items ──────────────────────────────────────────────── */

/* ── Footer ─────────────────────────────────────────────────── */

/* Sun/moon toggle visibility */

/* Reposition floating back/forward buttons */

/* ── Hamburger (mobile) ─────────────────────────────────────── */

/* ── Backdrop (mobile) ──────────────────────────────────────── */

/* ── Collapse toggle button ─────────────────────────────────── */

/* Arrow flips when collapsed */

/* Hide text labels in collapsed (non-peeking) state */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — comprehensive upgrade  2026-05-19
══════════════════════════════════════════════════════════════ */

/* ── 1. Horizontal scroll on ALL table containers ───────────── */
.items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll,
.batch-stock-table-scroll,
.created-batches-table-scroll,
.batch-ingredient-scroll,
.dispatch-history-table,
.dispatch-lines-table,
.dispatch-lines-wrap,
.orderbook-detail-table,
.coupon-purchase-matrix-wrap,
.db-table-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* thin scrollbar on desktop */
.items-table-scroll::-webkit-scrollbar,
.purchases-table-scroll::-webkit-scrollbar,
.stock-table-scroll::-webkit-scrollbar,
.suppliers-table-scroll::-webkit-scrollbar,
.batch-ingredient-scroll::-webkit-scrollbar { height: 5px; }

/* ── 2. Sidebar-aware: 1024–1280px tablet ───────────────────── */

/* ── 3. Medium screens: ≤ 1024px ───────────────────────────── */
@media (max-width: 1024px) {
    .bora-equation-grid { grid-template-columns: 1fr 1fr; }
    .dispatch-trip-grid { grid-template-columns: repeat(2, 1fr); }
    .notes-card-grid { grid-template-columns: repeat(2, 1fr); }
    .coupon-purchase-history-toolbar { flex-wrap: wrap; }
    .payments-entry-date-toolbar { flex-wrap: wrap; }
    .orderbook-records-toolbar { flex-wrap: wrap; }
    .coupon-details-toolbar { flex-wrap: wrap; }
    .godown-summary-row { flex-wrap: wrap; }
}

/* ── 4. Tablet: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Forms: max 2 columns */
    .form-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

    /* Page-specific grids → 1 col */
    .dispatch-trip-grid { grid-template-columns: 1fr 1fr; }
    .bora-equation-grid { grid-template-columns: 1fr; }
    .notes-card-grid { grid-template-columns: 1fr; }

    /* Toolbars: always wrap */
    .created-bora-filter-toolbar,
.notes-filter-row,
.notes-toolbar,
.orderbook-filter-form,
.orderbook-search-toolbar,
.coupon-purchase-date-row,
.godown-stock-detail-row,
.action-row { flex-wrap: wrap; }

    /* Inline filters */
    .batch-filter-inline-field { min-width: 130px; }

    /* Ledger toolbars */
    .ledger-date-toolbar { flex-wrap: wrap; }
    .ledger-party-toolbar { flex-wrap: wrap; }

    /* Dispatch serial / action columns: shrink */
    .dispatch-sr-col { width: 2rem; }
    .dispatch-action-col { width: 5rem; }

    /* Batch stock chip row: scroll */
    .batch-segment-chip-wrap { overflow-x: auto; }
}

/* ── 5. Phone: ≤ 540px ──────────────────────────────────────── */
@media (max-width: 540px) {
    /* Single-column everything */
    .form-grid,
.compact-grid { grid-template-columns: 1fr !important; }
    .dispatch-trip-grid { grid-template-columns: 1fr; }

    /* Card padding */
    .card { padding: 0.72rem; border-radius: var(--radius-lg); }
    .card-heading h2 { font-size: 1.22rem; }

    /* Buttons: full-width in action rows */
    .action-row .btn,
.dispatch-submit-row .btn { width: 100%; text-align: center; }

    /* Dispatch lines: unlock width so table scrolls */
    .dispatch-lines-wrap { overflow-x: auto; }

    /* Table scroll areas: shorter on phones */
    .items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll { height: 280px; }

    /* Batch inline form */
    .batch-type-inline-form { flex-direction: column; align-items: stretch; }
    .batch-type-inline-form input,
.batch-type-inline-form select { width: 100%; }

    /* Notes compose */
    .notes-compose-form { flex-direction: column; }

    /* Page stat strip: 2-column wrap */
    .page-stat-strip { flex-wrap: wrap; }
    .page-stat-chip { flex: 1 1 calc(50% - 0.5rem); }

    /* DB dashboard charts */
    .db-charts-row { grid-template-columns: 1fr; }

    /* Hide collapse btn on phone (no room) */
    
    /* Hamburger spacing */
    }

/* ══════════════════════════════════════════════════════════════
   CARD & TABLE DESIGN REFRESH  ·  v2 — 2026-05-19
══════════════════════════════════════════════════════════════ */

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    border-radius: 20px;
    padding: 1.45rem 1.55rem 1.55rem;
    box-shadow:
        0 1px 2px rgba(60,50,35,.03),
        0 3px 10px rgba(60,50,35,.05),
        0 8px 28px rgba(60,50,35,.05);
    border: 1px solid var(--line);
    transition: border-color 0.22s, box-shadow 0.26s, background 0.25s, transform 0.22s;
}

.card:hover {
    box-shadow:
        0 2px 4px rgba(60,50,35,.04),
        0 6px 20px rgba(60,50,35,.08),
        0 16px 48px rgba(60,50,35,.07);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

/* Vibrant 3-stop gradient top bar */
.card::before {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand)       0%,
        var(--brand-2)    30%,
        var(--accent)     70%,
        transparent      100%
    );
    opacity: 0.85;
    border-radius: 20px 20px 0 0;
}

[data-theme="dark"] .card {
    box-shadow:
        0 1px 3px rgba(0,0,0,.18),
        0 4px 16px rgba(0,0,0,.22),
        0 10px 36px rgba(0,0,0,.18);
}

[data-theme="dark"] .card:hover {
    box-shadow:
        0 2px 6px rgba(0,0,0,.22),
        0 8px 26px rgba(0,0,0,.30),
        0 18px 52px rgba(0,0,0,.22);
}

[data-theme="dark"] .card::before { opacity: 0.55; }

/* Card heading tweak */
.card-heading h2 {
    font-size: 1.65rem;
    letter-spacing: -0.028em;
}

/* ── Table Wrapper ──────────────────────────────────────────── */
.table-wrap {
    border-radius: 16px;
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(60,50,35,.04),
        0 4px 16px rgba(60,50,35,.05);
}

[data-theme="dark"] .table-wrap {
    box-shadow: 0 2px 12px rgba(0,0,0,.22);
}

/* ── Table Base ─────────────────────────────────────────────── */
table {
    border-collapse: separate;
    border-spacing: 0;
}

/* ── Header row ─── compact density to match Purchase History atlr-table */
th {
    background: var(--surface-raised);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0.36rem 0.75rem;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

/* Brand-tinted left edge on first th (tightened) */
thead tr th:first-child {
    padding-left: 0.75rem;
    border-left: none;
}

/* ── Data cells ─── compact density to match atlr-table */
td {
    padding: 0.34rem 0.75rem;
    font-size: 0.76rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    line-height: 1.2;
}

td:first-child { padding-left: 1.1rem; }

/* ── Zebra — single-token, theme-safe ───────────────────────── */
tbody tr:nth-child(even) td {
    background: var(--surface-raised);
}

[data-theme="dark"] tbody tr:nth-child(even) td {
    background: rgba(255,255,255,.025);
}

/* ── Row hover — warm orange to match Purchase History spec ── */
tbody tr:hover td,
tbody tr:focus-within td {
    background: #FFE7C2 !important;
    color: #7A3E00 !important;
    transition: background 0.12s ease-in-out;
}

tbody tr:hover td a,
tbody tr:focus-within td a {
    color: #7A3E00 !important;
    text-decoration: underline;
}

tbody tr:hover td:first-child,
tbody tr:focus-within td:first-child {
    box-shadow: inset 3px 0 0 #B45309;
}

[data-theme="dark"] tbody tr:hover td,
[data-theme="dark"] tbody tr:focus-within td {
    background: #4A2A07 !important;
    color: #FDD9A4 !important;
}

[data-theme="dark"] tbody tr:hover td a,
[data-theme="dark"] tbody tr:focus-within td a {
    color: #FDD9A4 !important;
}

/* Last row: no bottom border */
tbody tr:last-child td { border-bottom: none; }

/* ── Status badges: more rounded & vivid ────────────────────── */
.status-badge {
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: none;
}

/* ── Code pill ──────────────────────────────────────────────── */
.code-pill {
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 0.15rem 0.48rem;
}

/* ── Icon buttons in tables ─────────────────────────────────── */
.icon-btn {
    border-radius: 9px;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    background: #3B82F6;
    color: #fff;
    box-shadow: 0 1px 4px rgba(59,130,246,0.30);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.icon-btn:hover {
    transform: translateY(-2px);
    background: #2563EB;
    box-shadow: 0 4px 12px rgba(59,130,246,0.42);
}

.icon-btn-delete {
    background: #EF4444;
    color: #fff;
    box-shadow: 0 1px 4px rgba(239,68,68,0.30);
}

.icon-btn-delete:hover {
    background: #DC2626;
    box-shadow: 0 4px 12px rgba(239,68,68,0.42);
}

/* ── Button icon support ────────────────────────────────────── */
.btn.has-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.38em;
}
.btn.has-icon svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

/* ── POS-style Multi-item Purchase Form (compact) ─────────────── */
.pos-form-card { padding: 0; overflow: visible; }

/* ── Compact single-bar header ── */
.pos-compact-head {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.52rem 1rem;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.pos-title-wrap { flex: 0 0 auto; }
.pos-form-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pos-form-subtitle {
    margin: 0;
    font-size: 0.7rem;
    color: var(--ink-muted);
    line-height: 1.3;
}
/* The form sits inline inside the header bar */
.pos-head-form-inline {
    display: contents; /* children participate in parent flex */
}
.pos-head-field {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    flex: 0 0 auto;
}
.pos-head-desc { flex: 1 1 160px; }
.pos-field-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.pos-head-field input {
    min-height: 30px;
    padding: 0.2rem 0.58rem;
    font-size: 0.83rem;
    border-radius: 8px;
}
.pos-head-links {
    flex: 0 0 auto;
    font-size: 0.72rem;
    margin-left: auto;
    white-space: nowrap;
}

/* ── Error list ── */
.pos-error-list {
    margin: 0.4rem 1rem 0;
    padding: 0.5rem 0.75rem;
    background: rgba(220,38,38,.07);
    border-left: 3px solid var(--error, #dc2626);
    border-radius: 0 7px 7px 0;
    font-size: 0.8rem;
    color: var(--error, #dc2626);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* ── Lines section ── */
.pos-lines-section { padding: 0.45rem 1rem 0.3rem; }
.pos-lines-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.38rem;
}
.pos-lines-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ── Table ── */
.pos-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
}
table.pos-lines-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    font-size: 0.81rem;
}
.pos-lines-table thead th {
    background: var(--surface-raised);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 0.38rem 0.45rem;
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
.pos-lines-table thead th:first-child { text-align: center; }
.pos-lines-table tbody td {
    padding: 0.22rem 0.28rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.pos-lines-table tbody tr:last-child td { border-bottom: none; }
.pos-lines-table tbody tr:hover td { background: rgba(99,102,241,.035); }
.pos-line-num {
    text-align: center;
    font-weight: 700;
    color: var(--ink-muted);
    font-size: 0.7rem;
    width: 30px;
    padding: 0 !important;
}
.pos-lines-table td input,
.pos-lines-table td select {
    width: 100%;
    min-height: 26px;
    padding: 0.15rem 0.38rem;
    font-size: 0.8rem;
    border-radius: 6px;
    min-width: 0;
    margin: 0;
}
.pos-lines-table td input[readonly] {
    background: var(--surface-raised);
    color: var(--ink-muted);
    border-color: transparent;
    cursor: default;
}

/* Column widths */
.pos-col-num { width: 32px; text-align: center; }
.pos-col-supplier { min-width: 130px; }
.pos-col-orderno { width: 80px; min-width: 60px; }
.pos-col-item { min-width: 130px; }
.pos-col-qty { width: 70px; }
.pos-col-unit { width: 80px; }
.pos-col-rate { width: 78px; }
.pos-col-amt { width: 80px; }
.pos-col-godown { min-width: 108px; }
.pos-col-tp { min-width: 120px; }
.pos-col-trqty { width: 66px; }
.pos-col-trrate { width: 72px; }
.pos-col-tramt { width: 78px; }
.pos-col-del { width: 32px; text-align: center; }

/* Force consistent padding on # and delete columns in both header and body */
.pos-lines-table thead th.pos-col-num,
.pos-lines-table tbody td.pos-col-num,
.pos-lines-table thead th.pos-col-del,
.pos-lines-table tbody td.pos-col-del {
    padding: 0.28rem 0 !important;
    text-align: center !important;
}

/* Delete row button */
.pos-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--error, #dc2626);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.pos-del-btn:hover {
    background: rgba(220,38,38,.1);
    border-color: rgba(220,38,38,.22);
}

/* ── Totals row ── */
.pos-totals-row td {
    background: var(--surface-raised);
    padding: 0.32rem 0.28rem;
    border-top: 2px solid var(--line-strong, var(--line));
}
.pos-totals-label {
    text-align: right;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-right: 0.45rem !important;
}
.pos-totals-row input[readonly] {
    background: transparent !important;
    border: none !important;
    font-weight: 800;
    color: var(--brand);
    padding: 0 !important;
    font-size: 0.85rem;
    width: 100%;
    min-height: 0 !important;
    cursor: default;
}

/* ── Save button row ── */
.pos-form-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.6rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pos-compact-head { flex-wrap: wrap; }
    .pos-head-links { margin-left: 0; width: 100%; }
}
@media (max-width: 580px) {
    .pos-head-desc { flex: 1 1 100%; order: 3; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLE SEARCH BAR  ·  boxed search row above tables
═══════════════════════════════════════════════════════════════ */

.tbl-search-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.78rem;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-lg);
    margin: 0 0 0.70rem;
}

.tbl-search-icon {
    flex: 0 0 auto;
    color: var(--ink-muted);
    pointer-events: none;
}

.tbl-search-input {
    flex: 1 1 0;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.18rem 0.35rem !important;
    font-size: 0.87rem;
    color: var(--ink);
    outline: none;
}

.tbl-search-input::placeholder { color: var(--ink-muted); }

.tbl-search-sep {
    width: 1px;
    align-self: stretch;
    background: var(--line-strong);
    margin: 0.1rem 0;
    flex: 0 0 auto;
}

.tbl-filter-label {
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    white-space: nowrap;
}

.tbl-filter-select {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-raised);
    font-size: 0.80rem;
    padding: 0.22rem 0.60rem 0.22rem 0.45rem;
    color: var(--ink);
    cursor: pointer;
    min-height: 28px;
    outline: none;
}

.tbl-filter-select:focus { border-color: var(--brand-light); }

@media (max-width: 600px) {
    .tbl-search-bar { flex-wrap: wrap; }
    .tbl-search-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR  ·  light-mode palette
   Dark mode keeps the existing #0B1020 colours unchanged.
═══════════════════════════════════════════════════════════════ */

/* Nav scroll-thumb */

/* Top-level standalone link */

/* Group toggle */

/* Sub-items */

/* Footer */

/* Footer icon buttons (theme toggle, logout, etc.) */

/* Mobile hamburger */

/* Collapse toggle button inside brand */

/* ═══════════════════════════════════════════════════════════════
   FLAT LAYOUT — REMOVED. Cards keep their surface, border, shadow.
═══════════════════════════════════════════════════════════════ */

.card::before { display: none !important; }

/* Keep danger-zone card readable */
.danger-zone-card,
.danger-zone-card:hover {
    background: var(--error-bg) !important;
    border: 1px solid rgba(192,57,43,0.22) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* POS form needs overflow for dropdowns */
.pos-form-card { overflow: visible !important; }

/*
   IMPORTANT: Do NOT set overflow-x: auto here.
   Per CSS spec, mixing overflow-x:auto with overflow-y:visible forces
   overflow-y to be computed as auto, turning sidebar-nav into a scroll
   container that clips the absolutely-positioned dropdown panels.
   Keep both axes visible so dropdowns can escape below the navbar.
*/

/* ── Group (section with dropdown) ─────────────────────────── */

/* Hover — highlight toggle */

/* Dropdown open via click (touch fallback) — highlight toggle */

/* Current page is inside this section — persistent highlight */

/* ── Dropdown panel (absolute below the toggle) ─────────────── */

/* Open via hover (desktop primary) or click (touch fallback) */

/* ── Sub-items inside dropdown ──────────────────────────────── */

/* ── Footer (user) → right side of bar ─────────────────────── */

/* Hide username text in compact top bar */

/* Back/forward buttons: sit just inside the top navbar (vertically centred) */

/* ── Light-mode overrides ───────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   PREMIUM ENHANCEMENT LAYER — v5
   Glass morphism · Micro-interactions · Scroll-driven motion ·
   Modern scrollbars · Refined focus · Skeletons · Toast polish
   ════════════════════════════════════════════════════════════════ */

/* ── Refined tokens that build on v4 ─────────────────────────── */
:root {
    --motion-fast: 120ms;
    --motion: 200ms;
    --motion-slow: 360ms;
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --glass-bg-light:    rgba(255, 255, 255, 0.72);
    --glass-bg-dark:     rgba(19, 24, 38, 0.62);
    --glass-border:      color-mix(in srgb, var(--brand) 22%, transparent);
    --halo-brand:        color-mix(in srgb, var(--brand) 18%, transparent);
    --halo-accent:       color-mix(in srgb, var(--accent) 22%, transparent);
    --gradient-brand:    linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --gradient-soft:     linear-gradient(135deg,
                            color-mix(in srgb, var(--brand) 14%, transparent) 0%,
                            color-mix(in srgb, var(--accent) 10%, transparent) 100%);
}

html { accent-color: var(--brand); }
html,
body { scrollbar-gutter: stable; }

/* ── Modern themed scrollbars ────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--motion) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--brand) 55%, transparent);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Refined focus rings — visible but never harsh ──────────── */
:where(input,
select,
textarea,
button,
a,
[tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--halo-brand), 0 0 0 1px var(--brand);
    border-color: var(--brand) !important;
    transition: box-shadow var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}

/* ── Card: floating lift on hover, subtle scale ─────────────── */
.card {
    transition:
        border-color var(--motion) var(--ease-out),
        box-shadow var(--motion) var(--ease-out),
        transform var(--motion) var(--ease-out),
        background var(--motion) var(--ease-out);
    will-change: transform;
}
.card:hover:not(.danger-zone-card) {
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
    transform: translateY(-2px);
}

/* ── Buttons: depth on hover, press ripple feel ─────────────── */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--motion-fast) var(--ease-spring),
        box-shadow var(--motion) var(--ease-out),
        background var(--motion) var(--ease-out),
        filter var(--motion-fast) var(--ease-out);
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
        rgba(255,255,255,0.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--motion) var(--ease-out);
    pointer-events: none;
    z-index: -1;
}
.btn:hover { transform: translateY(-1.5px) scale(1.01); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 60ms; }

/* Primary action: gradient sheen */
.btn:not(.btn-light):not(.btn-danger):not(:disabled) {
    background-image: linear-gradient(135deg,
        var(--brand-2) 0%,
        color-mix(in srgb, var(--brand-2) 88%, var(--accent)) 100%);
}

/* ── Inputs: animated underline focus ───────────────────────── */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="url"],
input[type="time"],
select,
textarea {
    transition:
        border-color var(--motion) var(--ease-out),
        box-shadow var(--motion) var(--ease-out),
        background var(--motion) var(--ease-out);
}

/* Inputs gain a soft halo on hover */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([disabled]):not([readonly]):hover,
select:not([disabled]):hover,
textarea:not([disabled]):not([readonly]):hover {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--line-strong));
}

/* ── Tabular numbers everywhere counts matter ───────────────── */
.table td,
.table th,
.input-amount,
.input-numeric,
[data-numeric],
.amount,
.qty,
.totals,
input[type="number"],
input[inputmode="decimal"],
input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ── Table row hover: gentle highlight + side accent ────────── */
.table tbody tr {
    transition: background var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    position: relative;
}
.table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 4%, transparent);
}
.table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--brand);
}

/* ── Section dividers: gradient hairline ─────────────────────── */
hr,
.divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--line-strong) 18%,
        var(--line-strong) 82%,
        transparent 100%);
}

/* ── Glass surface utility (modals, popovers, sticky bars) ──── */
.glass {
    background: var(--glass-bg-light);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}
[data-theme="dark"] .glass { background: var(--glass-bg-dark); }

/* ── Gradient text utility (headings on hero areas) ─────────── */
.text-gradient {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ── Toast / message polish ─────────────────────────────────── */
.message {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    animation: toast-in 380ms var(--ease-spring) both;
    position: relative;
    overflow: hidden;
    padding-left: 1.05rem;
}
.message::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--brand);
}
.message.success::before { background: var(--success-ink); }
.message.error::before { background: var(--error-ink); }
.message.warning::before { background: var(--warning-ink); }
.message.info::before { background: var(--info-ink); }

@keyframes toast-in {
    0% { transform: translateY(-8px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ── Skeleton loader utility ────────────────────────────────── */
.skeleton {
    display: block;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ink) 6%, transparent) 0%,
        color-mix(in srgb, var(--ink) 12%, transparent) 50%,
        color-mix(in srgb, var(--ink) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
    min-height: 0.85em;
    color: transparent;
    user-select: none;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Modern checkbox/radio: animated check ──────────────────── */
input[type="checkbox"]:not(.legacy),
input[type="radio"]:not(.legacy) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--motion) var(--ease-out),
                border-color var(--motion) var(--ease-out),
                transform var(--motion-fast) var(--ease-spring);
    vertical-align: middle;
}
input[type="radio"]:not(.legacy) { border-radius: var(--radius-full); }
input[type="checkbox"]:not(.legacy)::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    transform: scale(0) rotate(-30deg);
    transition: transform var(--motion) var(--ease-spring);
    background-color: var(--surface);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
input[type="radio"]:not(.legacy)::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    transform: scale(0);
    transition: transform var(--motion) var(--ease-spring);
    background: var(--surface);
}
input[type="checkbox"]:not(.legacy):checked,
input[type="radio"]:not(.legacy):checked {
    background: var(--brand);
    border-color: var(--brand);
}
input[type="checkbox"]:not(.legacy):checked::before,
input[type="radio"]:not(.legacy):checked::before {
    transform: scale(1) rotate(0);
}
input[type="checkbox"]:not(.legacy):hover,
input[type="radio"]:not(.legacy):hover {
    border-color: var(--brand);
}

/* ── Loading spinner utility ────────────────────────────────── */
.spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--brand) 22%, transparent);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spinner-rotate 720ms linear infinite;
    display: inline-block;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* ── Sidebar item: gradient indicator on active ─────────────── */

/* ── Empty-state styling for tables ─────────────────────────── */
.table-empty-row td,
.empty-state {
    color: var(--ink-soft);
    font-style: italic;
    text-align: center;
    padding: 2rem 1rem;
}
.empty-state-illustration {
    display: block;
    margin: 0 auto 0.8rem;
    width: 64px;
    height: 64px;
    opacity: 0.5;
}

/* ── Page transitions (Chrome 126+ supports natively) ───────── */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: vt-fade-out 200ms var(--ease-out) both;
    }
    ::view-transition-new(root) {
        animation: vt-fade-in 280ms var(--ease-out) both;
    }
    @keyframes vt-fade-out { to { opacity: 0; transform: scale(0.985); } }
    @keyframes vt-fade-in  { from { opacity: 0; transform: scale(1.005); } }
}

/* ── Sticky table headers — universal across READ-ONLY list tables ───
   Every <thead th> sticks just below the main page header.
   --main-header-height is set dynamically by ux-enhancements.js on load
   and resize. Fallback is 56px which matches the default header height.
   .pos-lines-table is EXCLUDED — it's an input editor, sticky thead
   would cause form rows to scroll behind the headers as users add lines. */
.table thead th,
.table-wrap thead th,
.items-table-scroll thead th,
.purchases-table-scroll thead th,
.stock-table-scroll thead th,
.suppliers-table-scroll thead th {
    position: sticky !important;
    top: var(--main-header-height, 56px) !important;
    z-index: 10;
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 -1px 0 var(--line);
}
/* Belt-and-suspenders: explicitly UN-stick the POS editor thead in
   case any other rule tries to stick it. */
.pos-lines-table thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    backdrop-filter: none !important;
}
/* Scroll-shadow under the header when the table body is scrolled */
.table-wrap thead::after,
.items-table-scroll thead::after,
.purchases-table-scroll thead::after,
.stock-table-scroll thead::after,
.suppliers-table-scroll thead::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, transparent), transparent);
    pointer-events: none;
    opacity: 0;
}

/* ── Reduced-motion respect ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Selection: brand-tinted ─────────────────────────────────── */
::selection {
    background: color-mix(in srgb, var(--brand) 28%, transparent);
    color: var(--ink);
}

/* ── Print-friendly: hide motion, flatten shadows ───────────── */
@media print {
    *,
*::before,
*::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    body::before,
.bg-accent { display: none !important; }
}

/* ── Disabled states across the board ───────────────────────── */
:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    filter: saturate(0.6);
}

/* ── Date input: click anywhere to open picker ─────────────────
   Bulletproof CSS-only fix. The native ::-webkit-calendar-picker-indicator
   is stretched to span the entire input as an invisible overlay, so any
   click on the input is a click on the picker trigger. We render our own
   calendar glyph as the input's background-image to keep the icon visible.
   Works in Chrome / Edge / Safari. Firefox already opens on any click. */
input[type="date"]:not([disabled]):not([readonly]),
input[type="datetime-local"]:not([disabled]):not([readonly]),
input[type="month"]:not([disabled]):not([readonly]),
input[type="week"]:not([disabled]):not([readonly]),
input[type="time"]:not([disabled]):not([readonly]) {
    cursor: pointer;
    position: relative;
    padding-right: 2.2rem;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem 1rem;
}

input[type="date"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
input[type="datetime-local"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
input[type="time"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
[data-theme="dark"] input[type="date"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
[data-theme="dark"] input[type="datetime-local"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
[data-theme="dark"] input[type="time"]:not([disabled]):not([readonly]) {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

/* The killer move: stretch the native picker indicator to cover the
   entire input. Then any click anywhere on the input is the picker. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
    opacity: 0;            /* hide the default tiny icon — ours is on the input bg */
    z-index: 1;
}

/* ── Optional ribbon for "verified" / status pills ──────────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.pill.success {
    background: var(--success-bg);
    color: var(--success-ink);
    border-color: color-mix(in srgb, var(--success-ink) 30%, transparent);
}
.pill.warning {
    background: var(--warning-bg);
    color: var(--warning-ink);
    border-color: color-mix(in srgb, var(--warning-ink) 30%, transparent);
}
.pill.danger {
    background: var(--error-bg);
    color: var(--error-ink);
    border-color: color-mix(in srgb, var(--error-ink) 30%, transparent);
}

/* ── Container queries: cards adapt to their own width ──────── */
@container (max-width: 520px) {
    .card-heading {
        flex-direction: column;
        align-items: stretch;
    }
    .card-heading > .list-toolbar { margin-left: 0; }
}

/* The page heading (h1, h2 first-of-type) gets just a hair of breathing room */
/* Premium version marker — paste this into DevTools console to verify:
   getComputedStyle(document.documentElement).getPropertyValue('--ux-premium-version') */
html { --ux-premium-version: "10"; }

/* Also kill any stray .nav-submenu / .nav-dropdown leftover from the
   legacy .main-header in case display:none ever fails to cascade. */

/* ── Date field: hide standalone calendar icon button ──────────
   The text input itself is now clickable as a picker trigger
   (see date-ddmmyyyy.js → openOnPointerStart). Keep the button
   in the DOM so JS can programmatically click it, but visually
   hide it so the date field looks like a clean text input. */
.date-ddmmyyyy-button {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Adjust the wrap so the input fills its slot without leftover gap */
.date-ddmmyyyy-wrap {
    gap: 0 !important;
}

/* Render OUR brand calendar icon as a background on the display input
   so users still see a visual cue that this is a date field. */
.date-ddmmyyyy-display {
    padding-right: 2.2rem !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7rem center !important;
    background-size: 1rem 1rem !important;
    cursor: pointer !important;
}
[data-theme="dark"] .date-ddmmyyyy-display {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B95FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM-12 FIXES — header always visible + sticky table headers
═══════════════════════════════════════════════════════════════ */

/* 1. Kill ribbon-peek auto-hide. Header is always visible, sticks on scroll. */
@media (min-width: 701px) {
    html .main-header {
        position: sticky !important;
        top: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    html .main-header > * {
        opacity: 1 !important;
        transform: none !important;
    }
    html .ribbon-trigger { display: none !important; }
}

/* 2. Sticky table headers INSIDE scroll containers must use top:0
      (not --main-header-height), since they stick within the container,
      not the viewport. This was leaving 56px of the first row visible
      above the sticky header. */
.items-table-scroll thead th,
.purchases-table-scroll thead th,
.stock-table-scroll thead th,
.suppliers-table-scroll thead th,
.batch-stock-table-scroll thead th,
.created-batches-table-scroll thead th,
.batch-ingredient-scroll thead th {
    top: 0 !important;
    z-index: 12 !important;
    background: var(--surface) !important;
    box-shadow: 0 2px 0 var(--line), inset 0 -1px 0 var(--line) !important;
}

/* Reset container margin so the now-visible sticky header doesn't fight it */
html body main.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.container { margin-bottom: 1.4rem; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM-18 — table body is the ONLY scrollable area on list pages.
   The page-title row, the toolbar, and the column-header row all
   stay locked at the top; only the data rows scroll. A visible
   custom scrollbar is rendered on the right of the table.
═══════════════════════════════════════════════════════════════ */

/* Inner-scroll on every list-table container. max-height is sized
   so it fills the viewport minus an allowance for page-title + toolbar
   above and a little margin below. Tweak the 220px if a specific page
   feels too cramped or too loose. */
.items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll,
.batch-stock-table-scroll,
.created-batches-table-scroll,
.batch-ingredient-scroll,
.table-wrap {
    max-height: calc(100vh - 220px) !important;
    min-height: 220px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain;
}

/* Sticky column header — sticks at the TOP of its own scroll container
   (top:0), not the viewport. The scroll container is itself below the
   page header, so the column row stays visible while rows scroll. */
.items-table-scroll thead th,
.purchases-table-scroll thead th,
.stock-table-scroll thead th,
.suppliers-table-scroll thead th,
.batch-stock-table-scroll thead th,
.created-batches-table-scroll thead th,
.batch-ingredient-scroll thead th,
.table-wrap thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 -1px 0 var(--line) !important;
    backdrop-filter: none !important;
}

/* Visible, themed scrollbar on the table */
.items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll,
.batch-stock-table-scroll,
.created-batches-table-scroll,
.batch-ingredient-scroll,
.table-wrap {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent;
}
.items-table-scroll::-webkit-scrollbar,
.purchases-table-scroll::-webkit-scrollbar,
.stock-table-scroll::-webkit-scrollbar,
.suppliers-table-scroll::-webkit-scrollbar,
.batch-stock-table-scroll::-webkit-scrollbar,
.created-batches-table-scroll::-webkit-scrollbar,
.batch-ingredient-scroll::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.items-table-scroll::-webkit-scrollbar-thumb,
.purchases-table-scroll::-webkit-scrollbar-thumb,
.stock-table-scroll::-webkit-scrollbar-thumb,
.suppliers-table-scroll::-webkit-scrollbar-thumb,
.batch-stock-table-scroll::-webkit-scrollbar-thumb,
.created-batches-table-scroll::-webkit-scrollbar-thumb,
.batch-ingredient-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.items-table-scroll::-webkit-scrollbar-thumb:hover,
.purchases-table-scroll::-webkit-scrollbar-thumb:hover,
.stock-table-scroll::-webkit-scrollbar-thumb:hover,
.suppliers-table-scroll::-webkit-scrollbar-thumb:hover,
.batch-stock-table-scroll::-webkit-scrollbar-thumb:hover,
.created-batches-table-scroll::-webkit-scrollbar-thumb:hover,
.batch-ingredient-scroll::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--brand);
    background-clip: content-box;
}
.items-table-scroll::-webkit-scrollbar-track,
.purchases-table-scroll::-webkit-scrollbar-track,
.stock-table-scroll::-webkit-scrollbar-track,
.suppliers-table-scroll::-webkit-scrollbar-track,
.batch-stock-table-scroll::-webkit-scrollbar-track,
.created-batches-table-scroll::-webkit-scrollbar-track,
.batch-ingredient-scroll::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
}

/* Make the page header SOLID so scrolling content can't ghost through it */
html .main-header {
    background-color: var(--hdr-from, #0F172A) !important;
    background-image: none !important;
    backdrop-filter: none !important;
}
[data-theme="light"] html .main-header {
    background-color: var(--hdr-from, #1E293B) !important;
}

/* Page header — solid surface, no gradient, no blur. Adapts to theme via --hdr-* vars */
html .main-header {
    background-color: var(--hdr-from) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    color: var(--hdr-text) !important;
    border-bottom: 1px solid var(--hdr-border) !important;
    box-shadow: 0 1px 0 var(--atl-hair-2) !important;
}
html .main-header * { color: inherit; }
html .main-nav a,
html .main-nav .nav-dropdown > summary,
html .main-nav .nav-dropdown > .nav-dropdown-toggle {
    color: var(--hdr-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html .main-nav a:hover,
html .main-nav .nav-dropdown > summary:hover,
html .main-nav .nav-dropdown:hover > summary {
    color: var(--atl-accent) !important;
    background: var(--atl-accent-tint) !important;
    border-color: var(--atl-accent-edge) !important;
}
html .main-nav a.active,
html .main-nav .nav-dropdown.active > summary,
html .main-nav .nav-dropdown[open] > summary {
    color: var(--atl-accent) !important;
    background: var(--atl-accent-tint) !important;
    font-weight: 700 !important;
}
html .main-nav .nav-submenu {
    background: var(--atl-surface) !important;
    border: 1px solid var(--atl-hair) !important;
    box-shadow: var(--atl-shadow) !important;
}
html .main-nav .nav-submenu a {
    color: var(--atl-ink) !important;
}
html .main-nav .nav-submenu a:hover,
html .main-nav .nav-submenu a.active {
    background: var(--atl-accent-tint) !important;
    color: var(--atl-accent) !important;
}

/* ── Nested SUBGROUP — hover-triggered FLY-OUT to the right ──────
   (e.g. "Purchase Definition" expands its children as a side panel) */
html .main-nav .nav-subgroup {
    position: relative;
    display: block;
    margin: 0.05rem 0;
}
html .main-nav .nav-subgroup > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    color: var(--atl-ink-2) !important;
    background: transparent !important;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 7px;
    transition: background .14s, color .14s;
}
html .main-nav .nav-subgroup > summary::-webkit-details-marker { display: none; }
html .main-nav .nav-subgroup > summary::marker { content: ""; }
html .main-nav .nav-subgroup:hover > summary,
html .main-nav .nav-subgroup:focus-within > summary,
html .main-nav .nav-subgroup[open] > summary {
    background: var(--atl-accent-tint) !important;
    color: var(--atl-accent) !important;
}
html .main-nav .nav-subgroup.active > summary {
    color: var(--atl-accent) !important;
    background: var(--atl-accent-tint) !important;
}
html .main-nav .nav-subgroup-chevron {
    /* Chevron points right — fly-out direction */
    transform: rotate(0deg);
    opacity: 0.7;
    flex-shrink: 0;
    transition: transform .15s ease, opacity .15s ease;
}
html .main-nav .nav-subgroup:hover > summary .nav-subgroup-chevron,
html .main-nav .nav-subgroup[open] > summary .nav-subgroup-chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* The fly-out panel itself — absolutely positioned to the right */
html .main-nav .nav-subgroup-items {
    position: absolute !important;
    top: -0.4rem;
    left: 100%;
    margin-left: 0.4rem;
    min-width: 200px;
    padding: 0.35rem !important;
    background: var(--atl-surface) !important;
    border: 1px solid var(--atl-hair) !important;
    border-radius: 10px !important;
    box-shadow: var(--atl-shadow-lift, 0 14px 40px -12px rgba(15,26,51,.25)) !important;
    z-index: 150;
    display: flex !important;
    flex-direction: column;
    gap: 0.05rem;
    /* Hidden by default; revealed on hover or when [open] */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
    pointer-events: none;
}
/* Invisible bridge so cursor can travel from summary → panel without losing hover */
html .main-nav .nav-subgroup-items::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -0.5rem;
    width: 0.6rem;
}
html .main-nav .nav-subgroup:hover > .nav-subgroup-items,
html .main-nav .nav-subgroup:focus-within > .nav-subgroup-items,
html .main-nav .nav-subgroup[open] > .nav-subgroup-items {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity .14s ease, transform .14s ease;
}

/* When ANY subgroup in the parent dropdown is currently being hovered,
   hide every OTHER subgroup's fly-out — only one panel shows at a time. */
html .main-nav .nav-dropdown:has(.nav-subgroup:hover) .nav-subgroup:not(:hover) > .nav-subgroup-items {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Same protection on focus-within (keyboard nav) */
html .main-nav .nav-dropdown:has(.nav-subgroup:focus-within) .nav-subgroup:not(:focus-within) > .nav-subgroup-items {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html .main-nav .nav-subgroup-items a {
    padding: 0.55rem 0.8rem !important;
    font-size: 0.85rem !important;
    color: var(--atl-ink) !important;
    background: transparent !important;
    border-radius: 7px !important;
    text-decoration: none;
    transition: background .14s, color .14s;
    white-space: nowrap;
}
html .main-nav .nav-subgroup-items a:hover,
html .main-nav .nav-subgroup-items a.active {
    background: var(--atl-accent-tint) !important;
    color: var(--atl-accent) !important;
}
html .user-actions span {
    background: var(--atl-surface-2) !important;
    color: var(--atl-ink-2) !important;
    border-color: var(--atl-hair) !important;
}
html .user-actions strong {
    color: var(--atl-ink) !important;
}
html .header-top .btn-light,
html .user-actions .btn-light {
    background: var(--atl-surface) !important;
    color: var(--atl-ink) !important;
    border-color: var(--atl-hair) !important;
}
html .theme-toggle {
    background: var(--atl-surface-2) !important;
    color: var(--atl-ink) !important;
    border-color: var(--atl-hair) !important;
}
html .theme-toggle:hover {
    background: var(--atl-accent-tint) !important;
    color: var(--atl-accent) !important;
    border-color: var(--atl-accent-edge) !important;
}
html .global-back-icon {
    background: var(--atl-surface) !important;
    color: var(--atl-ink-2) !important;
    border-color: var(--atl-hair) !important;
}
html .global-back-icon:hover {
    background: var(--atl-accent-tint) !important;
    color: var(--atl-accent) !important;
    border-color: var(--atl-accent-edge) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM-15 — open nav dropdowns on hover (desktop)
═══════════════════════════════════════════════════════════════ */
@media (min-width: 701px) {
    /* Reveal submenu on hover/focus regardless of <details> open state */
    .main-nav .nav-dropdown:hover > .nav-submenu,
    .main-nav .nav-dropdown:focus-within > .nav-submenu {
        display: block !important;
        pointer-events: auto !important;
    }
    /* Hide the default <summary> marker triangle, keep our chevron */
    .main-nav .nav-dropdown > summary { list-style: none; }
    .main-nav .nav-dropdown > summary::-webkit-details-marker { display: none; }
    /* Hover area extends to bridge the small gap between summary and submenu
       so the menu doesn't snap shut while the cursor crosses */
    .main-nav .nav-dropdown { position: relative; }
    .main-nav .nav-dropdown::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        height: 10px;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM-23 · BLUE FINTECH × DEEP NAVY THEME
   LIGHT: clean white-and-blue dashboard (Mercury, Stripe, Brex feel)
   DARK:  deep midnight navy with electric-blue + gold accents
          (modern blockchain dashboard feel)
═══════════════════════════════════════════════════════════════ */

:root {
    --atl-bg:        #F4F2EE;
    --atl-bg-tint:   #EBE9E4;
    --atl-surface:   #FFFFFF;
    --atl-surface-2: #FAF8F4;
    --atl-hair:      #E5E1DA;
    --atl-hair-2:    #EFECE6;
    --atl-ink:       #0F1A33;
    --atl-ink-2:     #4A5872;
    --atl-ink-3:     #8A95AB;
    --atl-ink-faint: #BDC4D3;
    --atl-accent:    #26619C;
    --atl-accent-2:  #1F517F;
    --atl-accent-tint: #E8EEF6;
    --atl-accent-edge: #BCCEE0;
    --atl-gold:      #F4C547;
    --atl-gold-tint: #FFF7E0;
    --atl-gold-edge: #F0DC95;
    --atl-warn:      #E63946;
    --atl-warn-tint: #FCE8EA;
    --atl-warn-edge: #F4BFC4;
    --atl-shadow:    0 1px 0 rgba(15,26,51,.04), 0 8px 24px -10px rgba(15,26,51,.14);
    --atl-shadow-lift: 0 1px 0 rgba(15,26,51,.06), 0 18px 44px -16px rgba(15,26,51,.22);
    --atl-glow:      none;
    --atl-font-sans: 'Hanken Grotesk', 'Manrope', ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --atl-font-display: 'Hanken Grotesk', 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --atl-font-mono: 'DM Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="dark"] :root,
[data-theme="dark"] {
    --atl-bg:        #0A1428;
    --atl-bg-tint:   #0F1A38;
    --atl-surface:   #122242;
    --atl-surface-2: #18294E;
    --atl-hair:      #1E3358;
    --atl-hair-2:    #182846;
    --atl-ink:       #F1F5FC;
    --atl-ink-2:     #A8B8D4;
    --atl-ink-3:     #6B7FA0;
    --atl-ink-faint: #3D5478;
    --atl-accent:    #5B91D6;
    --atl-accent-2:  #7BA8E0;
    --atl-accent-tint: #16263F;
    --atl-accent-edge: #2C4B72;
    --atl-gold:      #F4C547;
    --atl-gold-tint: #2C2310;
    --atl-gold-edge: #594822;
    --atl-warn:      #FF6B7B;
    --atl-warn-tint: #2C1418;
    --atl-warn-edge: #4D2228;
    --atl-shadow:    0 1px 0 rgba(0,0,0,.5), 0 14px 38px -14px rgba(0,0,0,.7);
    --atl-shadow-lift: 0 1px 0 rgba(0,0,0,.6), 0 30px 70px -22px rgba(0,0,0,.8);
    --atl-glow:      0 0 0 1px rgba(79,124,255,.18), 0 0 40px -6px rgba(79,124,255,.15);
}

/* ── Body background — solid, calm, single color (no pastel mesh) ─ */
body {
    font-family: var(--atl-font-sans) !important;
    background: var(--atl-bg) !important;
    background-image: none !important;
}
body::after { content: none !important; }
body::before { content: none !important; }

/* ── Page-title rows — heavy modern sans (matches reference dashboards) ── */
.card-heading h2,
.pos-form-title,
.ph-head h2,
.db-page h1,
.dashboard-page h1 {
    font-family: var(--atl-font-display) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.022em !important;
    color: var(--atl-ink) !important;
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
}

/* ── Cards: clean surface + visible border + lift shadow ── */
.card,
.items-list-card,
.pos-form-card {
    background: var(--atl-surface) !important;
    border: 1px solid color-mix(in srgb, var(--atl-ink) 14%, transparent) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 2px 6px -2px rgba(15, 23, 42, 0.08),
        0 12px 28px -10px rgba(15, 23, 42, 0.14) !important;
}

/* ── Card heading: stack title + subtitle vertically, not float-apart ──
   IMPORTANT: also reset the children's `flex: 1 1 300px` from the
   original .card-heading h2/p rules — in a column-flex container
   that 300px becomes the MAIN-axis size (height), creating a 300px
   tall blank h2 + 300px tall blank p = ~600px of empty space. */
.card-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.18rem !important;
    margin-bottom: 1rem !important;
}
.card-heading h2 {
    margin: 0 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}
.card-heading p,
.card-heading > .subsection-meta {
    margin: 0 !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    color: var(--atl-ink-3) !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
}
/* Allow pages that need title-on-left + actions-on-right to opt out
   by adding `.card-heading--row` */
.card-heading--row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* ── Muted-text links → lapis accent ─────────────────────────── */
.muted-text a,
.subsection-meta a,
.table-link {
    color: var(--atl-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border-bottom: 1px solid transparent;
    transition: border-color .14s;
}
.muted-text a:hover,
.subsection-meta a:hover,
.table-link:hover {
    border-bottom-color: var(--atl-accent) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .items-list-card,
[data-theme="dark"] .pos-form-card {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--atl-accent) 4%, transparent) 0%, transparent 100%) !important;
}

/* ── Filter toolbars (the date-range + search + apply rows) ───── */
.list-toolbar,
.ledger-date-toolbar,
.supplier-ledger-toolbar,
.ph-date-bar {
    background: var(--atl-surface) !important;
    border: 1px solid var(--atl-hair) !important;
    border-radius: 12px !important;
    padding: 0.55rem 0.75rem !important;
    gap: 0.55rem !important;
    box-shadow: 0 1px 0 rgba(20,24,31,.03) !important;
}
.list-toolbar input[type="text"],
.list-toolbar input[type="search"],
.list-toolbar input[type="date"],
.list-toolbar select,
.ledger-date-toolbar input,
.ledger-date-toolbar select,
.supplier-ledger-toolbar input,
.supplier-ledger-toolbar select,
.ph-date-bar input,
.ph-date-bar select,
.ph-search-input {
    font-family: var(--atl-font-sans) !important;
    background: var(--atl-surface-2) !important;
    border: 1px solid var(--atl-hair) !important;
    border-radius: 9px !important;
    color: var(--atl-ink) !important;
    padding: 0.42rem 0.6rem !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.list-toolbar input:focus,
.list-toolbar select:focus,
.ledger-date-toolbar input:focus,
.ledger-date-toolbar select:focus,
.supplier-ledger-toolbar input:focus,
.supplier-ledger-toolbar select:focus,
.ph-date-bar input:focus,
.ph-date-bar select:focus,
.ph-search-input:focus {
    outline: 0 !important;
    border-color: var(--atl-accent) !important;
    box-shadow: 0 0 0 4px var(--atl-accent-tint) !important;
}
.list-toolbar label,
.ledger-date-toolbar label,
.supplier-ledger-toolbar label,
.ph-date-bar label {
    font-family: var(--atl-font-sans) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--atl-ink-3) !important;
}

/* ── Buttons: primary = ink (light) / accent (dark) ───────────── */
.btn:not(.btn-light):not(.btn-danger):not(.btn-warning):not(.btn-success) {
    background: var(--atl-ink) !important;
    color: var(--atl-surface) !important;
    border: 1px solid var(--atl-ink) !important;
    border-radius: 10px !important;
    font-family: var(--atl-font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px -8px rgba(20,24,31,.45) !important;
    transition: transform .15s, box-shadow .15s !important;
}
.btn:not(.btn-light):not(.btn-danger):not(.btn-warning):not(.btn-success):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 24px -10px rgba(20,24,31,.65) !important;
}
[data-theme="dark"] .btn:not(.btn-light):not(.btn-danger):not(.btn-warning):not(.btn-success) {
    background: var(--atl-accent) !important;
    color: #0A1612 !important;
    border-color: var(--atl-accent) !important;
}
.btn-light {
    background: var(--atl-surface) !important;
    color: var(--atl-ink-2) !important;
    border: 1px solid var(--atl-hair) !important;
    border-radius: 10px !important;
    font-family: var(--atl-font-sans) !important;
    font-weight: 600 !important;
}
.btn-light:hover {
    background: var(--atl-surface-2) !important;
    color: var(--atl-ink) !important;
    border-color: var(--atl-ink-faint) !important;
}
.btn-danger {
    background: var(--atl-warn) !important;
    color: #FFF !important;
    border: 1px solid var(--atl-warn) !important;
    border-radius: 10px !important;
    font-family: var(--atl-font-sans) !important;
    font-weight: 600 !important;
}

/* ── Tables: refined typography + spacing ─────────────────────── */
.table-wrap table,
.items-table-scroll table,
.purchases-table-scroll table,
.stock-table-scroll table,
.suppliers-table-scroll table {
    font-family: var(--atl-font-sans) !important;
}
.table-wrap table tbody td,
.items-table-scroll table tbody td,
.purchases-table-scroll table tbody td,
.stock-table-scroll table tbody td,
.suppliers-table-scroll table tbody td {
    padding: 0.78rem 0.9rem !important;
    color: var(--atl-ink) !important;
    border-bottom: 1px solid var(--atl-hair-2) !important;
    font-size: 0.87rem !important;
}
.table-wrap table tbody tr,
.items-table-scroll table tbody tr,
.purchases-table-scroll table tbody tr,
.stock-table-scroll table tbody tr,
.suppliers-table-scroll table tbody tr {
    transition: background .14s !important;
    position: relative;
}
.table-wrap table tbody tr:hover,
.items-table-scroll table tbody tr:hover,
.purchases-table-scroll table tbody tr:hover,
.stock-table-scroll table tbody tr:hover,
.suppliers-table-scroll table tbody tr:hover {
    background: var(--atl-surface-2) !important;
}

/* Numeric-looking cells get mono tabular nums when wrapped in spans */
.table-wrap td.num,
.table-wrap td[align="right"],
.purchases-table-scroll td.num,
.stock-table-scroll td.num {
    font-family: var(--atl-font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
}

/* ── Override premium-18 sticky thead with Atelier polish ─────── */
.items-table-scroll thead th,
.purchases-table-scroll thead th,
.stock-table-scroll thead th,
.suppliers-table-scroll thead th,
.batch-stock-table-scroll thead th,
.created-batches-table-scroll thead th,
.batch-ingredient-scroll thead th,
.table-wrap thead th {
    font-family: var(--atl-font-sans) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--atl-ink-3) !important;
    background-color: var(--atl-surface) !important;
    background-image: linear-gradient(180deg, var(--atl-surface) 0%, var(--atl-surface) 100%) !important;
    padding: 0.85rem 0.9rem 0.65rem !important;
    border-bottom: 1px solid var(--atl-hair) !important;
    box-shadow: 0 1px 0 var(--atl-hair) !important;
    backdrop-filter: none !important;
}

/* ── Icon-buttons (edit/delete row actions) ───────────────────── */
.icon-btn,
.icon-btn-edit,
.icon-btn-delete {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: var(--atl-surface) !important;
    border: 1px solid var(--atl-hair) !important;
    color: var(--atl-ink-2) !important;
    transition: all .14s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.icon-btn:hover {
    border-color: var(--atl-ink-faint) !important;
    color: var(--atl-ink) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px -4px rgba(20,24,31,.18) !important;
}
.icon-btn-edit:hover {
    border-color: var(--atl-accent-edge) !important;
    color: var(--atl-accent) !important;
    background: var(--atl-accent-tint) !important;
}
.icon-btn-delete:hover {
    border-color: var(--atl-warn-edge) !important;
    color: var(--atl-warn) !important;
    background: var(--atl-warn-tint) !important;
}

/* ── Cleaner scrollbar tint everywhere ────────────────────────── */
.items-table-scroll::-webkit-scrollbar-thumb,
.purchases-table-scroll::-webkit-scrollbar-thumb,
.stock-table-scroll::-webkit-scrollbar-thumb,
.suppliers-table-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--atl-ink) 18%, transparent) !important;
    border: 3px solid var(--atl-surface) !important;
    border-radius: 99px !important;
}

/* ── Remap the ORIGINAL core CSS vars to the new Atelier palette so
   every page that already references --surface / --ink / --brand /
   --bg etc. automatically picks up the new blue-fintech / navy theme.
   This is the single point of truth for the whole app's color system. */
:root {
    --bg:               var(--atl-bg);
    --bg-gradient-top:  var(--atl-bg);
    --bg-gradient-btm:  var(--atl-bg-tint);

    --surface:          var(--atl-surface);
    --surface-raised:   var(--atl-surface-2);
    --surface-overlay:  var(--atl-surface);

    --line:             var(--atl-hair-2);
    --line-strong:      var(--atl-hair);

    --ink:              var(--atl-ink);
    --ink-muted:        var(--atl-ink-2);
    --ink-soft:         var(--atl-ink-3);

    --brand:            var(--atl-accent);
    --brand-2:          var(--atl-accent);
    --brand-light:      color-mix(in srgb, var(--atl-accent) 70%, white);

    --accent:           var(--atl-accent);
    --accent-light:     color-mix(in srgb, var(--atl-accent) 80%, white);

    --danger:           var(--atl-warn);
    --success-bg:       var(--atl-accent-tint);
    --success-ink:      var(--atl-accent);

    --info-bg:          var(--atl-accent-tint);
    --info-ink:         var(--atl-accent);
    --warning-bg:       var(--atl-gold-tint, #FFF7E0);
    --warning-ink:      #A16207;

    /* Page header — LIGHT in light mode (white surface, dark ink text) */
    --hdr-from:         var(--atl-surface);
    --hdr-mid:          var(--atl-surface);
    --hdr-to:           var(--atl-surface);
    --hdr-text:         var(--atl-ink);
    --hdr-border:       var(--atl-hair);
    --hdr-btn-bg:       var(--atl-surface-2);
    --hdr-btn-hover:    var(--atl-bg-tint);
    --hdr-nav-active:   var(--atl-accent);
}
[data-theme="dark"] :root,
[data-theme="dark"] {
    --bg:               var(--atl-bg);
    --bg-gradient-top:  var(--atl-bg);
    --bg-gradient-btm:  var(--atl-bg-tint);

    --surface:          var(--atl-surface);
    --surface-raised:   var(--atl-surface-2);
    --surface-overlay:  var(--atl-surface);

    --line:             var(--atl-hair-2);
    --line-strong:      var(--atl-hair);

    --ink:              var(--atl-ink);
    --ink-muted:        var(--atl-ink-2);
    --ink-soft:         var(--atl-ink-3);

    --brand:            var(--atl-accent);
    --brand-2:          var(--atl-accent);
    --brand-light:      color-mix(in srgb, var(--atl-accent) 70%, white);

    --accent:           var(--atl-accent);
    --accent-light:     color-mix(in srgb, var(--atl-accent) 80%, white);

    --danger:           var(--atl-warn);
    --success-bg:       var(--atl-accent-tint);
    --success-ink:      var(--atl-accent);

    --info-bg:          var(--atl-accent-tint);
    --info-ink:         var(--atl-accent);
    --warning-bg:       var(--atl-gold-tint);
    --warning-ink:      var(--atl-gold);

    /* In dark mode the main header blends into the deep navy bg */
    --hdr-from:         var(--atl-surface);
    --hdr-mid:          var(--atl-surface-2);
    --hdr-to:           var(--atl-bg-tint);
    --hdr-text:         var(--atl-ink);
    --hdr-border:       var(--atl-hair);
    --hdr-btn-bg:       rgba(255,255,255,.04);
    --hdr-btn-hover:    rgba(255,255,255,.10);
    --hdr-nav-active:   var(--atl-accent);
}

/* ── Theme-aware highlighted rows (totals, summaries, meta) ───
   Pages used to hardcode peach/cream backgrounds that clashed in
   dark mode. Map every common "highlight row" class to Atelier
   accent tints so they look intentional in both themes. */
tr.table-meta-row,
tr.table-meta-row > td,
tr.table-meta-row > th,
tr.batch-stock-total-row,
tr.batch-stock-total-row > td,
tr.batch-stock-total-row > th,
tr.dispatch-total-row,
tr.dispatch-total-row > td,
tr.dispatch-total-row > th,
tr.godown-summary-row,
tr.godown-summary-row > td,
tr.godown-summary-row > th,
tr.purchase-register-summary-row,
tr.purchase-register-summary-row > td,
tr.purchase-register-summary-row > th,
tr.summary-row,
tr.summary-row > td,
tr.summary-row > th,
tr.total-row,
tr.total-row > td,
tr.total-row > th {
    background: var(--atl-accent-tint) !important;
    background-color: var(--atl-accent-tint) !important;
    background-image: none !important;
    color: var(--atl-accent) !important;
    font-weight: 600 !important;
}
tr.table-meta-row > td,
tr.table-meta-row > th,
tr.batch-stock-total-row > td,
tr.batch-stock-total-row > th,
tr.dispatch-total-row > td,
tr.dispatch-total-row > th,
tr.godown-summary-row > td,
tr.godown-summary-row > th,
tr.purchase-register-summary-row > td,
tr.purchase-register-summary-row > th {
    border-top: 1px solid var(--atl-accent-edge) !important;
    border-bottom: 1px solid var(--atl-accent-edge) !important;
}

/* Grand-total rows — accent blue with white text in BOTH themes.
   Specificity must beat the global thead-th color rule (0-1-2),
   so we anchor on the scroll container too (0-2-3 / 0-2-4). */
tr.grand-total-row,
tr.grand-total-row > td,
tr.grand-total-row > th,
tr.purchase-category-grand-total-row,
tr.purchase-category-grand-total-row > td,
tr.purchase-category-grand-total-row > th,
.purchases-table-scroll thead tr.purchase-category-grand-total-row > th,
.purchases-table-scroll thead tr.grand-total-row > th,
.table-wrap thead tr.purchase-category-grand-total-row > th,
.table-wrap thead tr.grand-total-row > th,
.items-table-scroll thead tr.grand-total-row > th,
.stock-table-scroll thead tr.grand-total-row > th {
    background: var(--atl-accent) !important;
    background-color: var(--atl-accent) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    font-size: 0.95rem !important;
}
/* First-cell label keeps the uppercase micro-cap look but still white */
.purchases-table-scroll thead tr.purchase-category-grand-total-row > th:first-child,
tr.purchase-category-grand-total-row > th:first-child,
tr.grand-total-row > th:first-child {
    color: #FFFFFF !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
}

/* ── Opaque cards, no overlays. Row hovers stay inside the border. */
.card,
.items-list-card,
.pos-form-card {
    background-color: var(--atl-surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
}
/* POS form card needs to ALLOW overflow — the wide line-items table
   inside .pos-table-wrap scrolls horizontally and the help dropdowns
   (item/supplier select chips) escape outside the card on click. */
.pos-form-card {
    overflow: visible !important;
}
.card .card-heading,
.items-list-card .card-heading,
.pos-form-card .pos-compact-head {
    background-color: var(--atl-surface) !important;
}

/* ── Kill .card:hover lift/transform — data dashboards don't need
   marketing-style hover animations on whole cards (the cursor is
   over the card constantly while reading a table). The 1px shift
   was making the border look like it "disappeared" on hover. */
.card:hover,
.items-list-card:hover,
.pos-form-card:hover {
    transform: none !important;
    border-color: color-mix(in srgb, var(--atl-ink) 14%, transparent) !important;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 2px 6px -2px rgba(15, 23, 42, 0.08),
        0 12px 28px -10px rgba(15, 23, 42, 0.14) !important;
}
/* Universal table treatment — every table container across the app */
.table-wrap,
.items-table-scroll,
.purchases-table-scroll,
.stock-table-scroll,
.suppliers-table-scroll,
.batch-stock-table-scroll,
.created-batches-table-scroll,
.batch-ingredient-scroll,
.coupon-purchase-matrix-wrap,
.dispatch-history-table,
.dispatch-lines-wrap,
.orderbook-detail-table,
.stock-transfer-qty-table-wrap,
.uperm-table-wrap,
.db-table-inner,
.table-wrap table,
.items-table-scroll table,
.purchases-table-scroll table,
.stock-table-scroll table,
.suppliers-table-scroll table,
.dispatch-lines-table,
.orderbook-detail-table,
.coupon-purchase-matrix,
.db-table {
    background-color: var(--atl-surface) !important;
}

/* Row backgrounds + zebra striping (every read-only list table) */
.table-wrap table tbody td,
.items-table-scroll table tbody td,
.purchases-table-scroll table tbody td,
.stock-table-scroll table tbody td,
.suppliers-table-scroll table tbody td,
.dispatch-lines-table tbody td,
.orderbook-detail-table tbody td,
.coupon-purchase-matrix tbody td,
.db-table tbody td,
.stock-transfer-qty-table-wrap table tbody td,
.uperm-table-wrap table tbody td,
.db-table-inner table tbody td {
    background-color: var(--atl-surface);
}
.table-wrap table tbody tr:nth-child(even) td,
.items-table-scroll table tbody tr:nth-child(even) td,
.purchases-table-scroll table tbody tr:nth-child(even) td,
.stock-table-scroll table tbody tr:nth-child(even) td,
.suppliers-table-scroll table tbody tr:nth-child(even) td,
.dispatch-lines-table tbody tr:nth-child(even) td,
.orderbook-detail-table tbody tr:nth-child(even) td,
.coupon-purchase-matrix tbody tr:nth-child(even) td,
.db-table tbody tr:nth-child(even) td,
.stock-transfer-qty-table-wrap table tbody tr:nth-child(even) td,
.uperm-table-wrap table tbody tr:nth-child(even) td,
.db-table-inner table tbody tr:nth-child(even) td {
    background-color: var(--atl-surface-2);
}

/* Hover state — accent-tint applied directly to <td> so it can't be
   masked by a sticky cell or transparent <tr> background */
.table-wrap table tbody tr:hover td,
.items-table-scroll table tbody tr:hover td,
.purchases-table-scroll table tbody tr:hover td,
.stock-table-scroll table tbody tr:hover td,
.suppliers-table-scroll table tbody tr:hover td,
.dispatch-lines-table tbody tr:hover td,
.orderbook-detail-table tbody tr:hover td,
.coupon-purchase-matrix tbody tr:hover td,
.db-table tbody tr:hover td,
.stock-transfer-qty-table-wrap table tbody tr:hover td,
.uperm-table-wrap table tbody tr:hover td,
.db-table-inner table tbody tr:hover td {
    background-color: var(--atl-accent-tint) !important;
}

/* Sticky thead consistency on the additional containers */
.dispatch-lines-table thead th,
.orderbook-detail-table thead th,
.coupon-purchase-matrix thead th,
.db-table thead th,
.stock-transfer-qty-table-wrap table thead th,
.uperm-table-wrap table thead th,
.db-table-inner table thead th {
    font-family: var(--atl-font-sans) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--atl-ink-3) !important;
    background-color: var(--atl-surface) !important;
    background-image: none !important;
    padding: 0.85rem 0.9rem 0.65rem !important;
    border-bottom: 1px solid var(--atl-hair) !important;
    box-shadow: 0 1px 0 var(--atl-hair) !important;
    backdrop-filter: none !important;
}

/* POS line-items table is COMPLETELY LEFT ALONE — page-level CSS
   handles all styling. Universal retrofit must not touch it. */

/* Standalone wrappers (not nested in a card) get the card chrome too */
.db-table-card,
.coupon-purchase-matrix-wrap,
.uperm-table-wrap {
    background-color: var(--atl-surface) !important;
    border: 1px solid color-mix(in srgb, var(--atl-ink) 14%, transparent) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 2px 6px -2px rgba(15, 23, 42, 0.08),
        0 12px 28px -10px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden;
}

/* ── Don't bleed retrofit into the dedicated .atlr design ─────── */
.atlr { background: var(--bg) !important; }
.atlr .btn,
.atlr .btn-light,
.atlr .btn-danger,
.atlr .icon-btn,
.atlr .icon-btn-edit,
.atlr .icon-btn-delete {
    /* leave Atelier-native components alone */
    all: revert;
}

/* ── End of Premium Enhancement Layer ───────────────────────── */