:root {
    /* ── Cool sage-green scale ─────────────────────────────── */
    --forest-950: #0c1a11;
    --forest-900: #162c1d;
    --forest-800: #26422f;
    --forest-700: #365841;
    --forest-600: #466e53;
    --forest-500: #4e7a5d;       /* darkened from #568465 → ~4.9:1 on white (WCAG AA) */
    --forest-400: #78a085;
    --forest-300: #9cbda6;
    --forest-200: #c1d8c8;
    --forest-100: #dbeadf;
    --forest-50: #edf5ef;

    /* ── Sage neutrals (cool green tint) ───────────────────── */
    --sage-50: #f1f5f2;
    --sage-100: #e2eae4;
    --sage-200: #cdd8d0;
    --cream: #f1f5f2;
}

/* ── Global typography ───────────────────────────────────── */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #1a2e20;
}

h1, h2, h3, .font-serif {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.brand-logo {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.6875rem;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    background: #ffffff;
    border-right: 1px solid var(--sage-200);
}

.sidebar-link {
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}

.sidebar-link:hover {
    background: var(--sage-50);
    border-left-color: var(--forest-300);
}

.sidebar-link.active {
    background: var(--forest-50);
    border-left-color: var(--forest-600);
    font-weight: 500;
    color: var(--forest-900);
}

/* ── Data tables ─────────────────────────────────────────── */
.data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th {
    font-weight: 600;
    font-size: 0.75rem;          /* 12px — was 11px; readability on data-dense pages */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--forest-600);    /* darker than -500 for AA on small uppercase headers */
    border-bottom: 1px solid var(--sage-200);
    padding: 0.625rem 1rem;
    white-space: nowrap;
    text-align: left;
}

.data-table tbody td {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;         /* 14px — was 13px; readability for hours-long use */
    border-bottom: 1px solid var(--sage-100);
    color: var(--forest-900);
}

.data-table tbody tr {
    transition: background 0.12s ease;
}

.data-table tbody tr:hover {
    background: var(--sage-50);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Sortable column headers */
.data-table thead th .sort-arrow {
    color: var(--forest-600);
    pointer-events: none;
}

/* ── Async operations spinner ────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: white;
    border: 1px solid var(--sage-200);
    border-radius: 0.625rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    border-color: var(--forest-200);
    box-shadow: 0 2px 12px rgba(22, 44, 29, 0.05);
}

/* ── Form inputs ──────────────────────────────────────────── */
.form-input {
    border: 1px solid var(--sage-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
    background: white;
    color: var(--forest-900);
}

.form-input:focus {
    outline: none;
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.12);
}

.form-input[readonly] {
    background: var(--sage-50);
    color: var(--forest-500);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    background: var(--forest-800);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-primary:hover {
    background: var(--forest-700);
    box-shadow: 0 1px 4px rgba(22, 44, 29, 0.15);
}

.btn-secondary {
    background: white;
    color: var(--forest-800);
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--sage-200);
    transition: all 0.15s ease;
}

.btn-secondary:hover {
    background: var(--sage-50);
    border-color: var(--forest-300);
}

.btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--sage-200);
    background: white;
    color: var(--forest-600);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-export:hover {
    background: var(--forest-50);
    border-color: var(--forest-400);
    color: var(--forest-700);
}

.btn-danger {
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.btn-danger:hover {
    color: #991b1b;
}

/* Filled danger button — the one source of truth for destructive confirm
   actions (modals, delete buttons). Replaces ad-hoc `bg-red-700 text-white`. */
.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: #b91c1c;
    border-radius: 0.375rem;
    transition: background 0.15s ease;
}
.btn-danger-solid:hover { background: #991b1b; }

/* ── Decision action chips (accept / reject / skip) ─────────
   One source of truth for the decision verbs, used in the pending
   queue cards, the decided-history table, the bulk bar, and the JS
   action rebuild. Previously these were re-styled inline in 4 places.
   .btn-chip = shape/size base; -sm / -lg = density variants. */
.btn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-chip-sm { padding: 0.25rem 0.5rem; }
.btn-chip-lg { padding: 0.5rem 1rem; font-size: 0.8125rem; }

.btn-accept  { background: #ecfdf5; color: #047857; }
.btn-accept:hover  { background: #d1fae5; }
.btn-reject  { background: #fef2f2; color: #dc2626; }
.btn-reject:hover  { background: #fee2e2; }
.btn-skip    { background: #f3f4f6; color: #4b5563; }
.btn-skip:hover    { background: #e5e7eb; }

/* ── Status badges ────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.badge-active   { background: var(--forest-50); color: var(--forest-700); }
.badge-inactive { background: #f3f4f6; color: #6b7280; }
.badge-superadmin { background: #fef2f2; color: #991b1b; }
.badge-am       { background: var(--forest-100); color: var(--forest-700); }
.badge-brand-admin { background: #faf5ff; color: #6b21a8; }
.badge-warehouse { background: #fffbeb; color: #92400e; }
.badge-production { background: #f0fdf4; color: #166534; }

/* Semantic status badges — use these instead of ad-hoc bg-*-50/text-*-700.
   All foreground colours meet WCAG AA on their tint. */
.badge-success { background: #f0fdf4; color: #166534; }
.badge-warning { background: #fffbeb; color: #92400e; }
.badge-danger  { background: #fef2f2; color: #991b1b; }
.badge-info    { background: #eff6ff; color: #1e40af; }
.badge-neutral { background: #f3f4f6; color: #4b5563; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border: 1px solid var(--sage-200);
    border-radius: 0.5rem;
    color: var(--forest-800);
    transition: all 0.15s ease;
}

.pagination-link:hover {
    background: var(--sage-50);
    border-color: var(--forest-300);
}

/* ── Search input ─────────────────────────────────────────── */
.search-input {
    border: 1px solid var(--sage-200);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    padding-left: 2.25rem;
    font-size: 0.8125rem;
    background: white;
    transition: all 0.15s ease;
    width: 16rem;
    color: var(--forest-900);
}

.search-input:focus {
    outline: none;
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.12);
}

.search-input::placeholder {
    color: var(--forest-500);    /* was forest-400 — more legible hint text */
    opacity: 0.8;
}

/* ── HTMX indicators ─────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop {
    background: rgba(12, 26, 17, 0.45);
    backdrop-filter: blur(3px);
}

/* ── Sidebar nav counts ───────────────────────────────────── */
.nav-count {
    font-size: 0.6875rem;        /* 11px — was 10px */
    font-weight: 500;
    color: var(--forest-600);    /* was forest-400 (2.9:1, failed AA on white) */
    min-width: 1.25rem;
    text-align: right;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-count-visible {
    opacity: 0.9;                /* was 0.6 — opacity compounded the low contrast */
}

/* ── Divider labels ───────────────────────────────────────── */
.divider-label {
    font-size: 0.6875rem;        /* 11px — was 10px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--forest-600);    /* was forest-400 — AA on white */
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sage-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--forest-300); }

/* ── Credential cards ─────────────────────────────────────── */
.cred-card {
    transition: all 0.2s ease;
}

.cred-card:hover {
    border-color: var(--forest-200);
    box-shadow: 0 2px 12px rgba(22, 44, 29, 0.05);
}

.cred-initials-badge {
    letter-spacing: 0.05em;
}

.cred-field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--forest-600);    /* was forest-400 — AA on white */
    min-width: 5.5rem;
    flex-shrink: 0;
}

.cred-action-btn {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: var(--forest-300);
    transition: all 0.15s ease;
    opacity: 0;
}

.cred-field-row:hover .cred-action-btn,
.cred-action-btn:focus {
    opacity: 1;
}

.cred-action-btn:hover {
    color: var(--forest-600);
    background: var(--forest-50);
}

/* ── Stats cards ──────────────────────────────────────────── */
.stat-card {
    background: white;
    border: 1px solid var(--sage-200);
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

.stat-card:hover {
    border-color: var(--forest-200);
    box-shadow: 0 2px 8px rgba(22, 44, 29, 0.04);
}

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--forest-600);    /* was forest-400 — AA on white */
}

/* ── Link styles ──────────────────────────────────────────── */
.link-primary {
    color: var(--forest-600);
    transition: color 0.15s ease;
}

.link-primary:hover {
    color: var(--forest-800);
}

/* ── Brand switcher ───────────────────────────────────────── */
.brand-select {
    background: var(--sage-50);
    border: 1px solid var(--sage-200);
    color: var(--forest-900);
    font-size: 0.8125rem;
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
    width: 100%;
    transition: border-color 0.15s ease;
}

.brand-select:focus {
    outline: none;
    border-color: var(--forest-400);
}

.brand-select option {
    background: white;
    color: var(--forest-900);
}

/* ── Toast notifications ──────────────────────────────────── */
.toast {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    background: white;
    border: 1px solid var(--sage-200);
    box-shadow: 0 8px 30px rgba(12, 26, 17, 0.1), 0 2px 8px rgba(12, 26, 17, 0.05);
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    min-width: 280px;
    max-width: 420px;
}

.toast-enter {
    transform: translateX(0);
    opacity: 1;
}

.toast-exit {
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
}

.toast-success { border-left: 3px solid var(--forest-500); }
.toast-error   { border-left: 3px solid #ef4444; }
.toast-warning { border-left: 3px solid #f59e0b; }
.toast-info    { border-left: 3px solid #3b82f6; }

.toast-icon { flex-shrink: 0; display: flex; align-items: center; }
.toast-text { flex: 1; color: var(--forest-900); line-height: 1.4; }

.toast-close {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--forest-300);
    font-size: 1.125rem;
    padding: 0 0.125rem;
    transition: color 0.15s ease;
    line-height: 1;
}

.toast-close:hover { color: var(--forest-600); }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    animation: toast-timer 4s linear forwards;
}

.toast-progress-success { background: var(--forest-500); }
.toast-progress-error   { background: #ef4444; }
.toast-progress-warning { background: #f59e0b; }
.toast-progress-info    { background: #3b82f6; }

@keyframes toast-timer {
    from { width: 100%; }
    to { width: 0%; }
}

/* ── Selection / accent override ──────────────────────────── */
::selection {
    background: var(--forest-200);
    color: var(--forest-900);
}

/* ── Focus-visible ring ───────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--forest-400);
    outline-offset: 2px;
}

/* ── Mobile sidebar ──────────────────────────────────────── */
.sidebar-open {
    transform: translateX(0) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ══════════════════════════════════════════════════════════ */

/* ── Responsive tables ───────────────────────────────────── */
/* Any card/div containing a data-table becomes scrollable on small screens */
.card:has(.data-table),
.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1023px) {
    .data-table {
        min-width: 600px;
    }
}

/* ── Small-screen table compaction ───────────────────────── */
@media (max-width: 639px) {
    .data-table thead th {
        padding: 0.5rem 0.625rem;
        font-size: 0.625rem;
    }
    .data-table tbody td {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
    /* Hide lower-priority columns on tiny screens */
    .data-table .hide-mobile {
        display: none;
    }
}

/* Touch devices can't hover, so row actions/controls revealed only on hover
   (opacity-0 group-hover:opacity-100) are invisible & unusable. Force them
   visible wherever the primary input has no hover (phones/tablets). */
@media (hover: none) {
    .opacity-0.group-hover\:opacity-100 {
        opacity: 1 !important;
    }
}

/* ── Responsive stat cards ───────────────────────────────── */
@media (max-width: 639px) {
    .stat-card {
        padding: 0.75rem 1rem;
    }
    .stat-card .text-2xl {
        font-size: 1.25rem;
    }
}

/* ── Responsive form rows ────────────────────────────────── */
@media (max-width: 639px) {
    .form-row-responsive {
        flex-direction: column;
    }
    .form-row-responsive > * {
        width: 100%;
    }
}

/* ── Mobile page headers ─────────────────────────────────── */
@media (max-width: 639px) {
    h1.font-serif, h1.text-2xl {
        font-size: 1.25rem;
    }
    /* Stack header + action buttons vertically */
    .mb-6.flex.items-center.justify-between,
    .mb-6.flex.items-start.justify-between {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    /* Full-width action buttons on mobile */
    .btn-primary {
        text-align: center;
    }
}

/* ── Mobile cards ────────────────────────────────────────── */
@media (max-width: 639px) {
    .card {
        border-radius: 0.5rem;
    }
    .card .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .card .p-6 {
        padding: 1rem;
    }
    .card .p-5 {
        padding: 0.875rem;
    }
}

/* ── Mobile search input ─────────────────────────────────── */
@media (max-width: 639px) {
    .search-input {
        width: 100%;
    }
}

/* ── Mobile toolbar spacing ──────────────────────────────── */
@media (max-width: 639px) {
    .flex.items-center.gap-3 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ── Mobile badge text ───────────────────────────────────── */
@media (max-width: 639px) {
    .badge {
        font-size: 0.5625rem;
        padding: 0.0625rem 0.5rem;
    }
}

/* ── Touch-friendly tap targets ──────────────────────────── */
@media (max-width: 1023px) {
    .sidebar-link {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    .btn-primary, .btn-secondary {
        min-height: 2.5rem;
    }
    .btn-export {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ── Mobile variant tags ─────────────────────────────────── */
@media (max-width: 639px) {
    .variant-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ── Full-width modals on mobile ─────────────────────────── */
@media (max-width: 639px) {
    .fixed .bg-white.rounded-lg.shadow-xl {
        margin: 0.5rem;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS & TRANSITIONS
   ══════════════════════════════════════════════════════════ */

/* ── Smooth scroll ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Page loading bar (top) ─────────────────────────────── */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--forest-400), var(--forest-600), var(--forest-400));
    background-size: 200% 100%;
    z-index: 9999;
    width: 0%;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

#page-loader.loading {
    opacity: 1;
    animation: loader-progress 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               loader-shimmer 1.5s ease-in-out infinite;
}

#page-loader.done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.15s ease-out, opacity 0.35s ease 0.15s;
}

@keyframes loader-progress {
    0%   { width: 0%; }
    20%  { width: 30%; }
    50%  { width: 60%; }
    80%  { width: 82%; }
    100% { width: 90%; }
}

@keyframes loader-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Content entrance ───────────────────────────────────── */
.page-enter {
    animation: fadeSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card hover lift ────────────────────────────────────── */
.card {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
    border-color: var(--forest-200);
    box-shadow: 0 4px 16px rgba(22, 44, 29, 0.07);
    transform: translateY(-1px);
}

.card:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* ── Stat card hover ────────────────────────────────────── */
.stat-card {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card:hover {
    border-color: var(--forest-200);
    box-shadow: 0 4px 16px rgba(22, 44, 29, 0.06);
    transform: translateY(-1px);
}

/* ── Button press animation ─────────────────────────────── */
.btn-primary {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:active {
    transform: scale(0.97);
    box-shadow: none;
}

.btn-secondary:active {
    transform: scale(0.97);
}

.btn-export:active {
    transform: scale(0.92);
}

/* ── Table row stagger entrance ─────────────────────────── */
.data-table tbody tr {
    animation: tableRowIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tableRowIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger delays for first 20 rows */
.data-table tbody tr:nth-child(1)  { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(2)  { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(3)  { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(4)  { animation-delay: 0.08s; }
.data-table tbody tr:nth-child(5)  { animation-delay: 0.10s; }
.data-table tbody tr:nth-child(6)  { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(7)  { animation-delay: 0.14s; }
.data-table tbody tr:nth-child(8)  { animation-delay: 0.16s; }
.data-table tbody tr:nth-child(9)  { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
.data-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
.data-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
.data-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
.data-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
.data-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
.data-table tbody tr:nth-child(n+16) { animation-delay: 0.32s; }

/* ── Clickable table rows ───────────────────────────────── */
.data-table tbody tr[onclick],
.data-table tbody tr a {
    cursor: pointer;
}

.data-table tbody tr:hover {
    background: var(--sage-50);
    transition: background 0.15s ease;
}

/* ── Modal transitions ──────────────────────────────────── */
.modal-backdrop {
    background: rgba(12, 26, 17, 0.45);
    backdrop-filter: blur(3px);
    animation: backdropIn 0.2s ease both;
}

@keyframes backdropIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to   { opacity: 1; backdrop-filter: blur(3px); }
}

.modal-content {
    animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Badge entrance animation ───────────────────────────── */
.badge {
    animation: badgeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes badgeIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Running status pulse ───────────────────────────────── */
.badge-running, .status-running {
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ── Form input focus glow ──────────────────────────────── */
.form-input {
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.form-input:focus {
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.12);
}

/* ── Checkbox & toggle smooth ───────────────────────────── */
input[type="checkbox"] {
    transition: all 0.15s ease;
}

input[type="checkbox"]:checked {
    animation: checkPop 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes checkPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ── Sidebar nav count fade in ──────────────────────────── */
.nav-count {
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Sidebar link smooth interactions ───────────────────── */
.sidebar-link {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    border-left: 2px solid transparent;
}

.sidebar-link:hover {
    background: var(--sage-50);
    border-left-color: var(--forest-300);
    padding-left: calc(0.75rem + 2px);
}

.sidebar-link.active {
    background: var(--forest-50);
    border-left-color: var(--forest-600);
    font-weight: 500;
    color: var(--forest-900);
}

/* ── Sidebar link icons ─────────────────────────────────── */
.sidebar-link svg {
    transition: opacity 0.2s ease;
}

.sidebar-link:hover svg {
    opacity: 0.7;
}

.sidebar-link.active svg {
    opacity: 0.8;
}

/* ── Colour/size tag transitions ────────────────────────── */
.variant-tag, [class*="bg-forest-50"] {
    transition: all 0.15s ease;
}

/* ── Search input expand on focus ───────────────────────── */
.search-input {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.search-input:focus {
    width: 20rem;
}

@media (max-width: 639px) {
    .search-input:focus {
        width: 100%;
    }
}

/* ── Link underline animation ───────────────────────────── */
a.link-animated {
    position: relative;
    text-decoration: none;
}

a.link-animated::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

a.link-animated:hover::after {
    width: 100%;
}

/* ── Skeleton loading shimmer ───────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--sage-100) 25%, var(--sage-50) 50%, var(--sage-100) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Dropdown/select smooth ─────────────────────────────── */
select, .brand-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:focus, .brand-select:focus {
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.1);
}

/* ── Export button tooltip ──────────────────────────────── */
.btn-export {
    position: relative;
}

.btn-export::after {
    content: 'Export CSV';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--forest-900);
    color: white;
    border-radius: 0.375rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-export:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Batch card status dropdown ─────────────────────────── */
.status-select {
    transition: all 0.2s ease;
}

/* ── Ripple effect on interactive elements ──────────────── */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(22, 44, 29, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ripple:active::before {
    opacity: 1;
    transition-duration: 0.1s;
}

/* ── Tab switching animation ────────────────────────────── */
.tab-content {
    animation: tabFade 0.25s ease both;
}

@keyframes tabFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Brand card hover on dashboard ──────────────────────── */
.brand-card {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22, 44, 29, 0.08);
}

/* ══════════════════════════════════════════════════════════
   CUSTOM SELECT DROPDOWNS
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────── */
.custom-select {
    position: relative;
    width: 100%;
}

/* ── Trigger button ──────────────────────────────────────── */
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--sage-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background: white;
    color: var(--forest-900);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.25s ease, background 0.15s ease;
    user-select: none;
    min-height: 2.375rem;
    text-align: left;
    line-height: 1.4;
}

.custom-select-trigger:hover {
    border-color: var(--forest-300);
    background: var(--sage-50);
}

.custom-select-trigger:focus {
    outline: none;
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.12);
}

.custom-select.open .custom-select-trigger {
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px rgba(70, 110, 83, 0.12);
}

/* ── Trigger text ────────────────────────────────────────── */
.custom-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-placeholder {
    color: var(--forest-500);    /* was forest-400 @ .6 (2.9:1) — now AA */
    opacity: 0.85;
}

/* ── Chevron icon ────────────────────────────────────────── */
.custom-select-arrow {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    color: var(--forest-400);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--forest-600);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--sage-200);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(12, 26, 17, 0.1), 0 2px 8px rgba(12, 26, 17, 0.04);
    z-index: 60;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.custom-select.open .custom-select-dropdown {
    max-height: 15rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Options scrollable area ─────────────────────────────── */
.custom-select-options {
    overflow-y: auto;
    max-height: 14.5rem;
    padding: 0.25rem;
}

.custom-select-options::-webkit-scrollbar { width: 4px; }
.custom-select-options::-webkit-scrollbar-track { background: transparent; }
.custom-select-options::-webkit-scrollbar-thumb { background: var(--sage-200); border-radius: 2px; }

/* ── Type-to-filter search box (long lists only) ─────────── */
.custom-select-search {
    display: block;
    width: calc(100% - 0.5rem);
    margin: 0.25rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--forest-900);
    background: var(--sage-50);
    border: 1px solid var(--sage-200);
    border-radius: 0.375rem;
    outline: none;
    box-sizing: border-box;
}
.custom-select-search:focus { border-color: var(--forest-400); background: #fff; }
.custom-select-search::placeholder { color: var(--forest-900); opacity: 0.4; }

.custom-select-noresults {
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--forest-900);
    opacity: 0.5;
    text-align: center;
}

/* Make room for the search box without clipping the option list */
.custom-select.open .custom-select-dropdown.cs-has-search { max-height: 17rem; }
.custom-select-dropdown.cs-has-search .custom-select-options { max-height: 13rem; }

/* ── Individual option ───────────────────────────────────── */
.custom-select-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--forest-900);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, padding-left 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.custom-select-option:hover,
.custom-select-option.highlighted {
    background: var(--forest-50);
    color: var(--forest-800);
    padding-left: 1rem;
}

.custom-select-option.selected {
    background: var(--forest-50);
    color: var(--forest-800);
    font-weight: 500;
}

/* Selected check mark */
.custom-select-option.selected::after {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.625rem;
    margin-left: auto;
    border: solid var(--forest-600);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    flex-shrink: 0;
    animation: checkIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes checkIn {
    from { opacity: 0; transform: rotate(45deg) scale(0.5); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* ── Size variants ───────────────────────────────────────── */
.custom-select-trigger.text-sm {
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    min-height: 2.125rem;
}

.custom-select-trigger.text-xs {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    min-height: 1.875rem;
}

.custom-select-trigger.text-xs .custom-select-arrow,
.custom-select-trigger.text-sm .custom-select-arrow {
    width: 0.875rem;
    height: 0.875rem;
}

/* ── Disabled state ──────────────────────────────────────── */
.custom-select.disabled .custom-select-trigger {
    background: var(--sage-50);
    color: #6b7280;
    cursor: not-allowed;
    border-color: var(--sage-200);
}

.custom-select.disabled .custom-select-trigger:hover {
    border-color: var(--sage-200);
    background: var(--sage-50);
}

/* ── Native select hidden (but still submits form) ───────── */
.custom-select select {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Filter-type selects (smaller inline) ────────────────── */
.custom-select-inline .custom-select-trigger {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-height: 1.75rem;
    border-radius: 0.375rem;
}

.custom-select-inline .custom-select-dropdown {
    min-width: 10rem;
}

.custom-select-inline .custom-select-option {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 639px) {
    .custom-select-dropdown {
        max-height: 12rem;
    }
    .custom-select.open .custom-select-dropdown {
        max-height: 12rem;
    }
}

/* ══════════════════════════════════════════════════════════
   STOCK ENTRY MATRIX — MOBILE (375 px phone optimised)
   ══════════════════════════════════════════════════════════ */

/*
 * Warehouse staff count stock on their phones. The colour×size
 * matrix grid must be usable at 375 px.  Key constraints:
 *   – font-size ≥ 16 px on <input> prevents iOS auto-zoom
 *   – touch targets ≥ 40 px tall
 *   – colour column sticks left, but truncates to save space
 *   – horizontal scroll still works for many-size products
 */

@media (max-width: 639px) {
    /* ── Matrix quantity inputs ─────────────────────────────── */
    .qty-input {
        font-size: 1rem !important;       /* 16 px — prevents iOS zoom */
        width: 2.75rem !important;         /* 44 px — narrower than desktop 64 px */
        min-height: 2.5rem;                /* 40 px touch target */
        padding: 0.375rem 0 !important;    /* vertical only — no side padding */
        border-radius: 0.375rem;
    }

    /* ── Tighter table cell padding ────────────────────────── */
    .product-form table td {
        padding: 0.125rem 0.125rem;
    }
    .product-form table th {
        padding: 0.375rem 0.125rem;
        font-size: 0.5625rem;             /* 9 px — compact headers */
        min-width: unset !important;       /* override inline min-w-[70px] */
        letter-spacing: 0;
    }

    /* ── Sticky colour column — truncated ──────────────────── */
    .product-form td.sticky,
    .product-form th.sticky {
        max-width: 4.5rem;                 /* 72 px */
        padding-left: 0.375rem !important;
        padding-right: 0.25rem !important;
        font-size: 0.6875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Row / column / grand total cells ──────────────────── */
    .product-form .row-total,
    .product-form .col-total,
    .product-form .grand-total {
        font-size: 0.6875rem;
        padding: 0.25rem 0.125rem !important;
    }

    /* ── Product card header compact ───────────────────────── */
    .product-form > .px-6 {
        padding: 0.625rem 0.75rem !important;
    }
    .product-form .font-serif {
        font-size: 0.875rem;
    }

    /* ── Product nav chips — horizontal scroll ─────────────── */
    #product-nav > .flex {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.375rem;
        scrollbar-width: none;             /* Firefox */
    }
    #product-nav > .flex::-webkit-scrollbar {
        display: none;                     /* Chrome/Safari */
    }
    .product-chip {
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }

    /* ── Save bar compact ──────────────────────────────────── */
    #save-bar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    #save-bar .btn-primary {
        padding: 0.375rem 0.875rem;
        font-size: 0.75rem;
    }

    /* ── Session controls card — stack on mobile ───────────── */
    .session-controls {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    .session-controls > div {
        width: 100%;
    }
    .session-controls .form-input,
    .session-controls .custom-select-trigger {
        width: 100%;
    }

    /* ── Add-product section — stack ───────────────────────── */
    .add-product-row {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    .add-product-row > div {
        width: 100%;
        min-width: unset !important;
    }
    .add-product-row .custom-select {
        width: 100%;
    }

    /* ── Batch import row — stack ──────────────────────────── */
    .batch-import-row {
        flex-direction: column;
        gap: 0.75rem !important;
    }
    .batch-import-row > div,
    .batch-import-row > button {
        width: 100%;
        min-width: unset !important;
    }

    /* ── Summary modal — full-width on phone ───────────────── */
    #summary-modal .bg-white {
        margin: 0.25rem;
        max-height: 90vh;
        border-radius: 0.75rem;
    }
    #summary-modal .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ── Page header compact ───────────────────────────────── */
    .stock-entry-header {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .stock-entry-header h1 {
        font-size: 1.125rem;
    }
    .stock-entry-header .badge {
        font-size: 0.5625rem;
    }
}

/* Read-only matrix quantity display — also needs touch-friendly sizing */
@media (max-width: 639px) {
    .qty-display {
        font-size: 0.875rem;
        min-width: 2.75rem;
        display: inline-block;
        text-align: center;
    }
}

/* ── Reduce motion for accessibility ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ── Command palette (Ctrl+K) ───────────────────────────────────────────────
   DOM built by static/js/command-palette.js; data from #cmdk-data in base.html. */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(22, 44, 29, 0.32);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 0;
}
.cmdk-overlay.hidden { display: none; }
.cmdk-panel {
    width: 100%;
    max-width: 34rem;
    background: #fff;
    border: 1px solid var(--sage-200);
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(22, 44, 29, 0.18);
    overflow: hidden;
    animation: cmdk-pop 0.12s ease-out;
}
@keyframes cmdk-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}
.cmdk-inputrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sage-100);
}
.cmdk-icon { height: 1rem; width: 1rem; color: var(--forest-400); flex-shrink: 0; }
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--forest-900, #162c1d);
    font-family: inherit;
}
.cmdk-kbd {
    font-size: 0.625rem;
    color: var(--forest-400);
    border: 1px solid var(--sage-200);
    border-radius: 0.25rem;
    padding: 0.0625rem 0.375rem;
}
.cmdk-list { max-height: 19rem; overflow-y: auto; padding: 0.375rem 0 0.5rem; }
.cmdk-group {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--forest-400);
    font-weight: 600;
    padding: 0.625rem 1rem 0.25rem;
}
.cmdk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0.375rem;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #1a2e20;
    cursor: pointer;
}
.cmdk-item.cmdk-sel { background: var(--forest-50); }
.cmdk-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint { font-size: 0.6875rem; color: var(--forest-400); flex-shrink: 0; }
.cmdk-empty { padding: 1.25rem 1rem; font-size: 0.8125rem; color: var(--forest-400); text-align: center; }
.cmdk-foot {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--sage-100);
    font-size: 0.6875rem;
    color: var(--forest-400);
}
.cmdk-foot b {
    font-weight: 500;
    border: 1px solid var(--sage-200);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
}
.cmdk-foot-right { margin-left: auto; }

/* ── Grid entry (stock supplied / counts / moves / gifting) ────────────────
   Behavior lives in static/js/grid-entry.js. */
/* A counted (non-zero) cell — visibly distinct from untouched ones, so a
   half-done session reads at a glance. */
.qty-input.qty-filled {
    background: var(--forest-50);
    border-color: var(--forest-300);
    font-weight: 600;
    color: var(--forest-800);
}
.key-hint {
    font-weight: 500;
    border: 1px solid var(--sage-200);
    border-radius: 0.25rem;
    padding: 0 0.3125rem;
    font-size: 0.625rem;
    color: var(--forest-900);
    opacity: 0.6;
}

/* Range highlight (Shift+arrows / Shift+click) — the rectangle Ctrl+R/Ctrl+D
   act on. Declared after .qty-filled so selection wins visually. */
.qty-input.qty-range {
    background: var(--forest-100);
    border-color: var(--forest-500);
    box-shadow: inset 0 0 0 1px var(--forest-500);
}