@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   DESIGN TOKENS & SYSTEMS (Theme Variables)
   ========================================================================== */
:root {
    --font-primary: 'Outfit', sans-serif;

    /* Dark Mode Defaults (Primary Theme) - Neutral warm-gray base + warm green accent */
    --bg-app: #1f1e1d;        /* warm near-black */
    --bg-sidebar: #262624;    /* slightly lifted warm charcoal */
    --bg-card: rgba(48, 48, 46, 0.65);
    --bg-input: #2a2926;
    --bg-overlay: rgba(20, 19, 18, 0.9);
    --bg-glass-active: rgba(255, 255, 255, 0.06);

    --border: rgba(255, 255, 255, 0.10); /* neutral translucent border */
    --border-focus: rgba(85, 129, 77, 0.55); /* warm green focus */

    --text-primary: #faf9f5; /* warm off-white */
    --text-secondary: #c9c6bd; /* warm light gray */
    --text-muted: #8f8d87; /* warm muted gray */

    --primary: #55814d;       /* warm sage / forest green */
    --primary-hover: #669a5d; /* brighter warm green */
    --primary-glow: rgba(85, 129, 77, 0.30);
    --primary-contrast: #faf9f5; /* off-white text, readable on the green button */

    --success: #52b788;       /* semantic green (kept) */
    --warning: #ffd166;
    --danger: #ef4444;
    --info: #90b4d8;          /* soft blue for info accents */

    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --backdrop-blur: blur(12px);
}

:root[data-theme="light"], html[data-theme="light"], body[data-theme="light"], [data-theme="light"] {
    --bg-app: #F8F9FA; /* off-white from palette */
    --bg-sidebar: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-input: #ffffff;
    --bg-overlay: rgba(248, 249, 250, 0.85);
    --bg-glass-active: rgba(0, 0, 0, 0.05);

    --border: #CED4DA; /* gray from palette */
    --border-focus: #2D6A4F;

    --text-primary: #1F3D2B; /* dark forest green text */
    --text-secondary: #2D6A4F; /* medium green text */
    --text-muted: #6c757d;

    --primary: #2D6A4F;       /* Medium Leaf Green */
    --primary-hover: #1F3D2B; /* dark forest green */
    --primary-glow: rgba(45, 106, 79, 0.15);
    --primary-contrast: #ffffff; /* white text on the green primary button */

    --shadow-premium: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-app);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.5;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   APP LOADING SPLASH — covers the viewport on first paint so a (re)load shows
   this themed loader instead of the browser's stale previous frame while the
   async auth check resolves. Faded out by hideAppLoadingOverlay() (js/auth.js).
   ========================================================================== */
#app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999998; /* above app/auth/config overlays, below the error banner */
    background-color: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.35s ease;
}
#app-loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.app-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.app-loading-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: app-loading-spin 0.8s linear infinite;
}
@keyframes app-loading-spin {
    to { transform: rotate(360deg); }
}
.app-loading-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   GLOBAL SAVING INDICATOR
   ========================================================================== */
#global-saving-indicator {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: var(--shadow-premium);
    font-size: 0.85rem;
    font-weight: 600;
    animation: savingIndicatorIn 0.2s ease;
}

.global-saving-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: savingSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes savingSpin {
    to { transform: rotate(360deg); }
}

@keyframes savingIndicatorIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Referenced by the bottom-right scan/save toasts (js/app.js, js/roasting.js)
   as `animation: fadeIn 0.3s`. Was missing entirely before — the animation
   silently no-op'd (toasts still appeared, just without the fade-in). */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons in a saving state: dim + a spinner replaces/joins the label so the
   exact control the user pressed shows feedback, not just a global toast. */
button.is-saving {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

button.is-saving::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: savingSpin 0.7s linear infinite;
}

/* Stock count sheet: a typed Actual that is not saved yet. Below it, the
   full-screen processing lock (js/app.js lockProcessingScreen) used by
   multi-step saves; it sits above #global-saving-indicator (z-index 100000). */
.stockopname-actual-input.stockopname-unsaved {
    border-color: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.processing-lock {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    cursor: wait;
    animation: fadeIn 0.15s ease;
}
.processing-lock-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 28px 32px;
    text-align: center;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-premium);
}
.processing-lock-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: savingSpin 0.8s linear infinite;
}
.processing-lock-text {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}
.processing-lock-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .processing-lock-spinner { animation-duration: 2.4s; }
}

/* Pack-from-bulk processing lock (js/packing.js lockPackBulkModal): covers
   the whole modal card, X button included, until the save is verified. */
.overlay-card.pack-bulk-locked {
    position: relative;
}
.pack-bulk-processing {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background-color: var(--bg-sidebar);
    border-radius: inherit;
    cursor: wait;
    animation: fadeIn 0.15s ease;
}
.pack-bulk-processing-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    animation: savingSpin 0.8s linear infinite;
}
.pack-bulk-processing-text {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}
.pack-bulk-processing-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 320px;
    line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
    .pack-bulk-processing-spinner { animation-duration: 2.4s; }
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */
#app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* --- Sidebar Navigation --- */
#sidebar {
    width: 260px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: background-color var(--transition-smooth), border-color var(--transition-smooth);
}

.sidebar-brand {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-slogan {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-menu {
    list-style: none;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    overflow-y: auto;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.menu-item i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.menu-item:hover {
    color: var(--text-primary);
    background-color: var(--bg-glass-active);
    transform: translateX(4px);
}

.menu-item.active {
    color: var(--bg-sidebar);
    background-color: var(--primary);
    box-shadow: 0 4px 14px var(--primary-glow);
    font-weight: 600;
}

/* Sidebar notification balloon (e.g. pending sales approvals, pending roast
   plans). Always --danger red regardless of theme/accent, so it reads as
   "needs attention" rather than blending in as a status color. Pushed to the
   end of the flex row via margin-left:auto. Populated/toggled by
   updateNavNotificationBadges() in js/app.js. */
.nav-notif-badge {
    margin-inline-start: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}
.menu-item.active .nav-notif-badge {
    background: #fff;
    color: var(--danger);
}

.menu-item.active:hover {
    transform: none;
}

.sidebar-footer {
    padding: 20px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-profile-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- Main Content Panel --- */
#main-content {
    margin-left: 260px;
    flex-grow: 1;
    padding: 32px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.page-title-section {
    display: flex;
    flex-direction: column;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-switcher-container {
    position: relative;
}

.role-switcher-select {
    appearance: none;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    padding: 8px 32px 8px 16px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    transition: border-color var(--transition-fast);
}

.role-switcher-select:focus {
    border-color: var(--primary);
}

.theme-toggle-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle-btn:hover {
    transform: rotate(15deg);
    border-color: var(--primary);
}

/* ==========================================================================
   CARDS & GRIDS
   ========================================================================== */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 24px;
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-premium);
    transition: transform var(--transition-fast), background-color var(--transition-smooth), border-color var(--transition-smooth);
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
}

/* --- Metrics Grid --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.metric-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.metric-icon-box.primary { background-color: rgba(194, 149, 110, 0.15); color: var(--primary); }
.metric-icon-box.success { background-color: rgba(16, 185, 129, 0.15); color: var(--success); }
.metric-icon-box.warning { background-color: rgba(245, 158, 11, 0.15); color: var(--warning); }
.metric-icon-box.danger { background-color: rgba(239, 68, 68, 0.15); color: var(--danger); }

.metric-info {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ==========================================================================
   BUTTONS & FORMS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-contrast);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--bg-glass-active);
    border-color: var(--text-secondary);
}

.btn-danger {
    background-color: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-success {
    background-color: var(--success);
    color: #fff;
}

.btn-success:hover {
    background-color: #429c73;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background-color: var(--bg-glass-active);
    border-color: var(--primary);
    color: var(--primary);
}

[data-theme="dark"] .btn-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e5e7eb;
}

[data-theme="dark"] .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* --- Form Controls --- */
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: var(--border-radius-sm);
    outline: none;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--border-focus);
}

textarea.form-control {
    resize: vertical;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.82rem;
}

th, td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

th {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 7px 10px;
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: var(--bg-glass-active);
}

/* Custom styling for Roasting Batch Logs to fit on one screen line-by-line */
#tab-roast-logs th,
#tab-roast-logs td {
    white-space: nowrap;
}

/* Exception for tables inside popups/modals to keep original larger size */
.overlay-card table {
    font-size: 0.9rem;
}
.overlay-card th, .overlay-card td {
    padding: 12px 16px;
}
.overlay-card th {
    font-size: 0.95rem;
}

#tab-roast-logs table {
    width: 100%;
    table-layout: auto;
}

/* Packed Coffee Stock & Packing History tables: vertical column separators */
#packed-coffee-stock-table th,
#packed-coffee-stock-table td,
#packing-history-table th,
#packing-history-table td {
    border-right: 1px solid var(--border);
}
#packed-coffee-stock-table th:last-child,
#packed-coffee-stock-table td:last-child,
#packing-history-table th:last-child,
#packing-history-table td:last-child {
    border-right: none;
}

/* Pagination Buttons styling */
.pagination-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.pagination-btn:hover {
    background-color: var(--bg-glass-active);
    border-color: var(--text-secondary);
}
.pagination-btn.active {
    background-color: var(--primary);
    color: var(--bg-sidebar);
    border-color: var(--primary);
    font-weight: 700;
}
.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   TABS SYSTEM (Subnavigation)
   ========================================================================== */
.tab-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.tab-headers {
    display: flex;
    border-bottom: 1px solid var(--border);
    gap: 4px;
}

.tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    font-weight: 600;
    cursor: grab;
    color: var(--text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
    user-select: none;
}

.tab-btn:active {
    cursor: grabbing;
}

.tab-btn.dragging {
    opacity: 0.45;
    transform: scale(0.96);
    background-color: var(--bg-glass-active);
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Tab-header notification balloon (e.g. "Dispatch Approval" / "Plans" tabs).
   Same purpose/color as .nav-notif-badge; sized slightly smaller and
   vertical-aligned to sit next to the tab label text. Populated/toggled by
   updateNavNotificationBadges() in js/app.js. */
.tab-notif-badge {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none !important;
}

/* ==========================================================================
   RECIPE COMPONENT ROW STYLING
   ========================================================================== */
.component-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 8px;
    border-radius: var(--border-radius-sm);
    border: 1px dashed var(--border);
}

.component-row .form-group {
    margin-bottom: 0;
    flex: 1;
}

.btn-remove-row {
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 8px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.btn-remove-row:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   OVERLAY & MODAL STYLES
   ========================================================================== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.overlay-card {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 32px;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Was unbounded on desktop (only the <900px media query below capped
       it), so a modal taller than the viewport — e.g. Stock Release's
       date/category/scan/coffee/lot/cart/notes stack — got clipped past the
       top and bottom of the screen with no way to scroll to the cut-off
       part. .overlay already centers this with 24px padding on all sides
       (see .overlay above), hence the 48px here. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.overlay-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.overlay-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.overlay-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Stock Release modal — two-column layout (form left, cart panel right).
   The cart panel is what makes this worth a wider modal: it keeps the staged
   items, the total and the action buttons permanently on screen, instead of
   below the fold where the operator had to scroll past the form to see what
   they were about to record. Collapses to a single column under 1000px so it
   still works on a tablet. */
.sr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
}

.sr-panel {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

/* Bounded so a long list scrolls INSIDE the panel rather than growing the
   modal until the Total/Proceed row is pushed off screen again. */
.sr-cart-scroll {
    overflow-y: auto;
    max-height: 260px;
    min-height: 120px;
}

@media (max-width: 1000px) {
    .sr-grid {
        grid-template-columns: 1fr;
    }
    .sr-cart-scroll {
        max-height: 200px;
    }
}

/* Sales Order modal (SALES_ORDER_REDESIGN_PLAN.md) — same two-column shape
   as .sr-grid/.sr-panel/.sr-cart-scroll above, kept as its own class family
   on purpose so a future change to Stock Release's layout doesn't silently
   ripple into this modal (and vice versa). */
.so-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 18px;
}

.so-panel {
    background-color: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.so-cart-scroll {
    overflow-y: auto;
    max-height: 260px;
    min-height: 120px;
}

/* Edit-from-cart state (js/sales.js enterEditMode/exitEditMode) — frames the
   whole "Edit item" assembler panel in the same primary color used for the
   card being edited in the cart, so it's obvious at a glance the form is no
   longer building a new line. Border color doubles as the transition target
   so toggling the class animates in/out instead of snapping. */
#so-assembler-block {
    border: 1px solid transparent;
    border-radius: 10px;
    transition: border-color 0.15s ease, background-color 0.15s ease, padding 0.15s ease;
}
#so-assembler-block.so-editing-mode {
    border-color: var(--primary);
    background: var(--primary-glow);
    padding: 12px;
}
#so-assembler-block.so-editing-mode .so-heading-line {
    background: var(--primary);
    opacity: 0.5;
}
#so-assembler-block.so-editing-mode #so-left-heading {
    color: var(--primary);
    font-weight: 700;
}

@media (max-width: 1000px) {
    .so-grid {
        grid-template-columns: 1fr;
    }
    .so-cart-scroll {
        max-height: 200px;
    }
}

/* ==========================================================================
   RECIPE POTENTIAL CARDS
   ========================================================================== */
.potential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.potential-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    border-left: 4px solid var(--primary);
}

.potential-card.single-origin {
    border-left-color: var(--info);
}

.potential-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.potential-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 9999px;
    background-color: rgba(194, 149, 110, 0.15);
    color: var(--primary);
}

.potential-card.single-origin .potential-badge {
    background-color: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

.potential-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
}

.potential-yield-wrapper {
    background-color: rgba(255, 255, 255, 0.02);
    padding: 12px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border);
}

.potential-yield-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--success);
}

.potential-yield-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.potential-details {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.potential-component-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
}

.potential-component-item:last-child {
    border-bottom: none;
}

.potential-component-item.limiting {
    color: var(--danger);
    font-weight: 600;
}

/* ==========================================================================
   PRINT PREVIEW & UTILITIES
   ========================================================================== */
.print-preview-container {
    background-color: #fff;
    color: #000;
    padding: 32px;
    border-radius: var(--border-radius-sm);
    border: 1px solid #ccc;
    font-family: 'Inter', sans-serif;
    min-height: 400px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* ==========================================================================
   MOBILE NAVIGATION (hamburger + drawer sidebar)
   ========================================================================== */
#mobile-topbar {
    display: none;
}

#sidebar-backdrop {
    display: none;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    #mobile-topbar {
        display: flex;
        align-items: center;
        gap: 14px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        padding: 0 16px;
        background-color: var(--bg-sidebar);
        border-bottom: 1px solid var(--border);
        z-index: 200;
    }

    #btn-mobile-menu {
        background: none;
        border: none;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: -10px;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
    }

    #btn-mobile-menu:hover, #btn-mobile-menu:active {
        background-color: var(--bg-glass-active);
    }

    #mobile-topbar-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--primary);
    }

    #sidebar {
        top: 0;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform var(--transition-smooth);
        box-shadow: var(--shadow-premium);
    }

    #sidebar.mobile-open {
        transform: translateX(0);
    }

    [dir="rtl"] #sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] #sidebar.mobile-open {
        transform: translateX(0);
    }

    #sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
    }

    #sidebar-backdrop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    #main-content {
        margin-left: 0 !important;
        padding: 16px;
        padding-top: 72px;
    }

    .header-bar {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .tab-headers {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tab-headers::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Two-column layouts are written as hardcoded inline styles throughout
       app.js (report cards, dashboard stats, etc). An attribute selector is
       the only lever to make them stack on mobile without touching every
       call site. */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Icon-only buttons (table column filters, etc.) are 26px on desktop —
       too small to reliably tap. Bump to a real touch target on mobile.
       !important: this media query sits earlier in the file than the base
       .filter-trigger-btn rule, and both have equal specificity, so plain
       overrides here would lose the cascade. */
    .filter-trigger-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .filter-trigger-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Modals: less outer/inner padding so forms get real width to work with
       on a narrow screen, instead of losing ~30% of it to whitespace. */
    .overlay {
        padding: 12px;
    }

    .overlay-card {
        padding: 20px;
        max-height: 92vh;
        overflow-y: auto;
    }

    /* Smaller type on mobile so a page fits more without scrolling as much.
       Users can always pinch-zoom if something reads too small. */
    .page-title {
        font-size: 1.3rem !important;
    }

    .page-subtitle {
        font-size: 0.78rem !important;
    }

    .card-title {
        font-size: 1rem !important;
    }

    .overlay-title {
        font-size: 1.15rem !important;
    }

    .metric-value {
        font-size: 1.25rem !important;
    }

    #mobile-topbar-title {
        font-size: 0.95rem !important;
    }
}

/* Phone landscape: the whole sidebar is squeezed into ~375-430px of height.
   The brand header + footer (profile widget + logout) alone were eating
   ~215px of that, leaving only ~160px to scroll the actual nav — barely
   enough to see 2 items, so the Inventory submenu opened but was buried
   below the fold with nothing indicating there was more to scroll to.
   Shrink the fixed chrome so the scrollable menu area gets most of the
   height back. */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar-brand {
        padding: 8px 16px;
    }

    .sidebar-logo {
        width: 24px;
        height: 24px;
    }

    .sidebar-menu {
        padding: 6px 12px;
        gap: 2px;
    }

    .menu-item {
        padding: 7px 12px;
    }

    .menu-subitem {
        padding: 6px 16px 6px 44px;
    }

    .sidebar-footer {
        padding: 8px 16px;
        gap: 6px;
    }

    .user-profile-widget {
        padding: 2px;
        gap: 8px;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

@media print {
    body * {
        visibility: hidden;
    }
    #handover-slip-preview, #handover-slip-preview * {
        visibility: visible;
    }
    #handover-slip-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        padding: 0;
    }
}

/* ==========================================================================
   RTL LAYOUT SUPPORT
   ========================================================================== */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] #sidebar {
    border-right: none !important;
    border-left: 1px solid var(--border) !important;
}

[dir="rtl"] .menu-item {
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

[dir="rtl"] .menu-item:hover {
    transform: translateX(-4px) !important;
}

[dir="rtl"] th, [dir="rtl"] td {
    text-align: right !important;
}

[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .potential-card {
    border-left: none !important;
    border-right: 4px solid var(--primary) !important;
}

[dir="rtl"] .potential-card.single-origin {
    border-right-color: var(--info) !important;
}

[dir="rtl"] .potential-component-item {
    flex-direction: row-reverse;
}

/* ==========================================================================
   BADGE COMPONENT STYLES
   ========================================================================== */
.badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 9999px;
    font-weight: 700;
    display: inline-block;
    text-align: center;
}

.badge-single {
    background: rgba(8, 145, 178, 0.12) !important;
    color: #0891b2 !important; /* high contrast cyan for light mode */
}

[data-theme="dark"] .badge-single {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #22d3ee !important; /* bright glowing cyan for dark mode */
}

.badge-blend {
    background: rgba(109, 40, 217, 0.12) !important;
    color: #6d28d9 !important; /* high contrast purple for light mode */
}

[data-theme="dark"] .badge-blend {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #a78bfa !important; /* bright glowing purple for dark mode */
}

.badge-pre-blend {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important; /* high contrast green for light mode */
}

[data-theme="dark"] .badge-pre-blend {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important; /* bright glowing green for dark mode */
}

.badge-post-blend {
    background: rgba(180, 83, 9, 0.12) !important;
    color: #b45309 !important; /* high contrast amber for light mode */
}

[data-theme="dark"] .badge-post-blend {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important; /* bright glowing amber for dark mode */
}

/* Stock History "Roasted" type badge + amount — same amber pair as
   .badge-post-blend above, reused here because var(--warning) (#ffd166) is
   never redefined for light mode and reads as pale, low-contrast yellow on
   a white card (found live 2026-08-19). */
.badge-roasted {
    background: rgba(180, 83, 9, 0.12) !important;
    color: #b45309 !important;
}
[data-theme="dark"] .badge-roasted {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}
.text-roasted { color: #b45309; }
[data-theme="dark"] .text-roasted { color: #fbbf24; }

/* V2 Repack: rose is the one hue not already claimed by badge-single (cyan),
   badge-blend (purple), badge-pre-blend (green), or badge-post-blend
   (amber) — kept distinct on purpose so a repacked bulk never reads as one
   of those. The same rose family is reused for the repack card surface AND
   the New Repack modal accent (border/header/submit button) per explicit
   user request: one consistent color across card + modal so attention
   converges on "this is a repack" wherever it appears. */
.badge-repack {
    background: rgba(190, 24, 93, 0.12) !important;
    color: #be185d !important; /* high contrast rose for light mode */
}

[data-theme="dark"] .badge-repack {
    background: rgba(244, 114, 182, 0.15) !important;
    color: #f472b6 !important; /* bright glowing rose for dark mode */
}

.card-repack {
    background: rgba(190, 24, 93, 0.06);
    border: 1px solid rgba(190, 24, 93, 0.35) !important;
}

[data-theme="dark"] .card-repack {
    background: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.35) !important;
}

/* Ready to Pack cards for assembled/custom blends (bulk.is_post_blend) —
   same amber already reserved for "Post-Blend" everywhere else in the app
   (see .badge-post-blend above, used on the Blend Recipes table), just
   extended to the card surface itself the same way .card-repack extends
   .badge-repack's rose to the whole card. */
.card-post-blend {
    background: rgba(180, 83, 9, 0.06);
    border: 1px solid rgba(180, 83, 9, 0.35) !important;
}

[data-theme="dark"] .card-post-blend {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.35) !important;
}

/* PURCHASE_REQUEST_PLAN.md: category badges. Raw Materials reuses the same
   amber pair as .badge-post-blend/.badge-roasted, and Equipment reuses the
   same blue as .badge-potential — deliberate reuse, not an oversight: these
   badges only ever appear inside the Purchase Request section, never on the
   same screen as Blend Recipes or the Sales Order "Potential Production"
   button, so there's no risk of the two concepts being read as the same
   thing. Housekeeping Supplies reuses .badge-pre-blend's green for the same
   reason. Other is genuinely new — no neutral/gray badge existed yet. */
.badge-pr-raw {
    background: rgba(180, 83, 9, 0.12) !important;
    color: #b45309 !important;
}
[data-theme="dark"] .badge-pr-raw {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}

.badge-pr-equip {
    background: rgba(29, 78, 216, 0.12) !important;
    color: #1d4ed8 !important;
}
[data-theme="dark"] .badge-pr-equip {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60a5fa !important;
}

.badge-pr-house {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important;
}
[data-theme="dark"] .badge-pr-house {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

.badge-pr-other {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important; /* high contrast slate for light mode */
}
[data-theme="dark"] .badge-pr-other {
    background: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important; /* muted slate for dark mode */
}

/* Purchase Request row marker — the request belongs to currentUser (§3.5:
   list is global, but "mine" still needs to stand out). Same inset-shadow
   technique as nothing else in this file yet; kept as its own rule (not
   folded into a generic ".row-mine") since this is the first place the app
   needs it. */
.pr-row-mine {
    box-shadow: inset 3px 0 0 var(--primary);
}

.text-repack {
    color: #be185d;
}

[data-theme="dark"] .text-repack {
    color: #f472b6;
}

/* TEST_BATCH_CARD_PLAN.md: pinned Ready to Pack card for a roast_batches row
   still awaiting QC approval (roast_type='Test', qc_status='Pending'). The
   plan originally picked blue for this, but by the time this was built,
   SALES_ORDER_REDESIGN_PLAN.md had already claimed blue for .badge-potential
   (below) on a concurrent branch — reusing it here would make two unrelated
   "needs attention" concepts read as the same color. Teal is the next hue
   not already used by badge-single (cyan), badge-blend (purple),
   badge-pre-blend (green), badge-post-blend/roasted (amber), badge-repack
   (rose), or badge-potential (blue) — a border-left accent (not just a
   background tint) mirrors the plan's "notification, not a stock browse"
   intent for this one card type. */
.badge-test-batch {
    background: rgba(15, 118, 110, 0.12) !important;
    color: #0f766e !important; /* high contrast teal for light mode */
}

[data-theme="dark"] .badge-test-batch {
    background: rgba(45, 212, 191, 0.15) !important;
    color: #2dd4bf !important; /* bright glowing teal for dark mode */
}

.card-test-batch {
    background: rgba(15, 118, 110, 0.06);
    border: 1px solid rgba(15, 118, 110, 0.35) !important;
    border-left: 4px solid #0f766e !important;
}

[data-theme="dark"] .card-test-batch {
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.35) !important;
    border-left-color: #2dd4bf !important;
}

/* Sales Order redesign (SALES_ORDER_REDESIGN_PLAN.md): the Potential
   Production button/modal accent. Blue is the one hue not already claimed
   by badge-single (cyan), badge-blend (purple), badge-pre-blend (green),
   badge-post-blend/roasted (amber), or badge-repack (rose) — kept distinct
   so it never reads as one of those, and stays clear of --primary (a warm
   forest green, see :root), so it doesn't compete with the app's own
   primary-action color. */
.badge-potential {
    background: rgba(29, 78, 216, 0.12) !important;
    color: #1d4ed8 !important; /* high contrast blue for light mode */
}

[data-theme="dark"] .badge-potential {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60a5fa !important; /* bright glowing blue for dark mode */
}

/* Solid variant for the trigger button itself (same family as .btn-danger's
   solid fill, not the tinted badge above — the button needs to read as an
   action, not a status label). */
.btn-potential {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.btn-potential:hover {
    background-color: #1e40af;
}

[data-theme="dark"] .btn-potential {
    background-color: #3b5fd9;
    border-color: #3b5fd9;
    color: #fff;
}

[data-theme="dark"] .btn-potential:hover {
    background-color: #2f4fc0;
}

/* Add New (customer shortcut) button in the Sales Request Order modal —
   same solid-fill pattern as .btn-potential, purple family shared with
   .badge-blend so it reads as its own distinct action rather than the plain
   grey .btn-secondary it used to be (user request 2026-08-31: give it a
   color so the What's New screenshot has something to point at). */
.btn-add-customer {
    background-color: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}

.btn-add-customer:hover {
    background-color: #5b21b6;
}

[data-theme="dark"] .btn-add-customer {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}

[data-theme="dark"] .btn-add-customer:hover {
    background-color: #7c3aed;
}

.modal-repack-header {
    border-bottom-color: rgba(190, 24, 93, 0.35) !important;
}

[data-theme="dark"] .modal-repack-header {
    border-bottom-color: rgba(244, 114, 182, 0.35) !important;
}

.btn-repack-accent {
    background: #be185d !important;
    border-color: #be185d !important;
    color: #ffffff !important;
}

.btn-repack-accent:hover {
    background: #9d174d !important;
    border-color: #9d174d !important;
}

[data-theme="dark"] .btn-repack-accent {
    background: #f472b6 !important;
    border-color: #f472b6 !important;
    color: #4a0d29 !important;
}

[data-theme="dark"] .btn-repack-accent:hover {
    background: #f9a8d4 !important;
    border-color: #f9a8d4 !important;
}

/* ==========================================================================
   TABLE COLUMN FILTERS (MULTI-SELECT DROPDOWN)
   ========================================================================== */
.filterable-th {
    position: relative;
}

.th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

[dir="rtl"] .th-content {
    flex-direction: row-reverse;
}

.filter-trigger-btn {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.filter-trigger-btn:hover {
    color: var(--primary);
    background-color: rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
    transform: scale(1.05);
}

.filter-trigger-btn.active {
    color: var(--bg-sidebar) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .filter-trigger-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
}

[data-theme="dark"] .filter-trigger-btn:hover {
    color: var(--primary);
    background-color: rgba(255, 255, 255, 0.1);
}

.filter-trigger-btn svg {
    width: 13px;
    height: 13px;
    display: block;
}

/* Reusable Filter Dropdown Menu Overlay */
.filter-dropdown-menu {
    position: absolute;
    z-index: 1000;
    min-width: 200px;
    max-width: 260px;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-dropdown-menu.hidden {
    display: none !important;
}

.filter-options-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}

.filter-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.filter-option-item:hover {
    background-color: var(--bg-glass-active);
    color: var(--text-primary);
}

.filter-option-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
}

.filter-dropdown-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}

.filter-action-btn {
    background: transparent;
    border: none;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    padding: 4px 8px;
}

.filter-action-btn:hover {
    color: var(--text-primary);
}

.filter-action-btn.primary {
    color: var(--primary);
}

/* --- Sidebar Dropdown Submenu --- */
.menu-item.has-dropdown {
    cursor: pointer;
    user-select: none;
}
.menu-item.has-dropdown .dropdown-arrow {
    margin-left: auto;
    transition: transform 0.25s ease;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.menu-item.has-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: max-height 0.3s ease;
}
.sidebar-submenu.open {
    max-height: 200px;
}
.menu-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 44px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    margin: 1px 8px;
}
.menu-subitem:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
.menu-subitem.active {
    background: rgba(var(--primary-rgb, 245,158,11), 0.15);
    color: var(--primary);
    font-weight: 600;
}
.menu-subitem i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   UTILITY CLASSES (Extracted from Inline Styles)
   ========================================================================== */
.text-center { text-align: center; }
.text-center-muted { text-align: center; color: var(--text-muted); }
.text-muted-xs { color: var(--text-muted); font-size: 0.75rem; }
.text-secondary-xs { font-size: 0.75rem; color: var(--text-secondary); }
.text-muted-color { color: var(--text-muted); }
.text-nowrap { white-space: nowrap; }
.va-middle { vertical-align: middle; }
.va-middle-mr-1 { vertical-align: middle; margin-right: 4px; }
.va-top-pt-3 { vertical-align: top; padding-top: 12px; }
.flex-1 { flex: 1; }
.flex-1-mb-0 { flex: 1; margin-bottom: 0; }
.mt-3 { margin-top: 15px; }
.mt-25 { margin-top: 12px; }
.mb-05 { margin-bottom: 2px; }
.ml-1 { margin-left: 4px; }
.modal-footer-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.modal-footer-actions-lg { display: flex; justify-content: flex-end; gap: 12px; margin-top: 25px; }
.table-empty-state { text-align: center; color: var(--text-muted); padding: 20px; }
.label-xs-nowrap { font-size: 0.78rem; margin-bottom: 4px; white-space: nowrap; }
.icon-inline-xs { width: 12px; height: 12px; vertical-align: middle; margin-right: 4px; }


/* ==========================================================================
   CRM MANAGEMENT PAGE (CRM_PAGE_PLAN.md §7)
   Semua warna lewat custom property — variabel yang sama menggerakkan mode
   gelap dan terang, jadi tidak ada satu pun warna yang ditulis langsung di
   sini kecuali lapisan transparan di atas warna teks/primary yang sudah ada.
   ========================================================================== */
.crm-tile-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-tile-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); min-width: 92px;
}
.crm-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-tile.active { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.crm-tile-count { opacity: 0.7; margin-inline-start: 4px; font-variant-numeric: tabular-nums; }

.crm-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin: 14px 0;
}
.crm-kpi {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--border-radius); padding: 14px 16px; cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.crm-kpi:hover { border-color: var(--border-focus); transform: translateY(-1px); }
.crm-kpi.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-glow); }
.crm-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.crm-kpi-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.crm-kpi-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

.crm-table-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.crm-table-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-search { min-width: 220px; }
.crm-status-select { width: auto; min-width: 140px; }
.crm-table-foot {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border);
    font-size: 0.75rem;
}

.crm-right { text-align: right; }
.crm-center { text-align: center; }
.crm-muted { color: var(--text-muted); }
.crm-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.crm-sub-inline { font-size: 0.72rem; }
.crm-late { color: var(--danger); }
.crm-soon { color: var(--warning); }

.crm-row { cursor: pointer; }
.crm-row:hover { background: var(--bg-glass-active); }
.crm-row-muted { opacity: 0.6; }
.crm-owner-btn { padding: 2px 6px; margin-inline-start: 6px; font-size: 0.7rem; line-height: 1; }

.crm-chip {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.crm-chip-green { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.crm-chip-amber { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.crm-chip-red   { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger); }
.crm-chip-grey  { background: var(--bg-glass-active); color: var(--text-muted); }

.crm-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; }
.crm-spark i {
    width: 5px; display: block; border-radius: 1px;
    background: color-mix(in srgb, var(--primary) 55%, transparent);
}
.crm-spark i.hi { background: var(--primary); }

.crm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.crm-dot-ok { background: var(--success); }
.crm-dot-warn { background: var(--warning); }

/* --- modal --- */
.crm-modal { text-align: start; }
.crm-modal-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.crm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-mtab.active { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.crm-mpane { display: block; }
.crm-mpane.hidden { display: none; }

.crm-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px; margin-bottom: 14px;
}
.crm-stat {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--border-radius-sm); padding: 10px 12px;
}
.crm-stat b { display: block; font-size: 1.05rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.crm-stat span { font-size: 0.68rem; color: var(--text-muted); }

.crm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.crm-card {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--border-radius-sm); padding: 14px; margin-bottom: 12px;
}
.crm-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: 10px;
}
.crm-big { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.crm-forecast { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.crm-right-block { text-align: end; }

/* Grid dua baris, BUKAN flex: label bulan seperti "Oct '25" melipat jadi dua
   baris dan, di layout flex, ikut mendorong batangnya naik sehingga batang
   nol tidak lagi sejajar dengan tetangganya. Dengan grid, seluruh label
   berbagi satu baris yang tingginya ditentukan label tertinggi, jadi semua
   batang berdiri di garis dasar yang sama. */
.crm-bars {
    display: grid; grid-template-rows: 120px auto;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 10px;
}
.crm-bar-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; min-width: 0; }
.crm-bar { background: var(--primary); border-radius: 4px 4px 0 0; min-height: 3px; }
.crm-bar-val { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.crm-bar-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 6px; text-align: center; align-self: stretch; }

.crm-legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.8rem; }
.crm-legend-row > :last-child { margin-inline-start: auto; white-space: nowrap; }
.crm-legend-bar { flex: 1; height: 6px; background: var(--bg-glass-active); border-radius: 3px; overflow: hidden; }
.crm-legend-bar i { display: block; height: 100%; background: var(--primary); }

.crm-cadence { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crm-dot-order { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); display: inline-block; }
.crm-gap {
    font-size: 0.66rem; color: var(--text-muted); background: var(--bg-glass-active);
    border-radius: 999px; padding: 1px 7px;
}

.crm-timeline { border-inline-start: 2px solid var(--border); padding-inline-start: 14px; }
.crm-tl-item { display: flex; gap: 12px; margin-bottom: 14px; }
.crm-tl-date { min-width: 58px; font-size: 0.72rem; color: var(--text-muted); padding-top: 2px; }
.crm-tl-title { font-weight: 600; color: var(--text-primary); }
.crm-recap-line { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

.crm-empty-pane {
    border: 1px dashed var(--border); border-radius: var(--border-radius);
    padding: 40px 24px; text-align: center;
}
.crm-empty-title { font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.crm-notes { margin: 0; padding-inline-start: 18px; color: var(--text-secondary); font-size: 0.82rem; line-height: 1.7; }

/* Judul tabel CRM + tombol reset yang hanya muncul saat ada filter aktif */
.crm-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- Modal customer: dua kolom yang tingginya saling mengunci --------------
   Kolom kanan adalah satu tumpukan: kartu ritme sekecil isinya (.crm-hug),
   kartu perkiraan mengambil semua sisanya (.crm-fill). Sebelumnya keduanya
   dipaksa sama tinggi, sehingga ritme punya ruang kosong 130 px sementara
   perkiraan berdesakan. */
.crm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: stretch; }
.crm-stack { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.crm-stack > .crm-card { margin-bottom: 0; }
.crm-hug { flex: 0 0 auto; }
.crm-fill { flex: 1 1 auto; display: flex; flex-direction: column; }

/* baris filter periode — selebar kolom yang dikendalikannya, bukan selebar modal */
.crm-periods { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-period.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.crm-range { font-size: 0.72rem; margin-inline-start: auto; white-space: nowrap; }
.crm-period-total {
    margin-top: auto; padding-top: 12px; font-size: 0.72rem;
    border-top: 1px solid var(--border);
}

/* titik ritme membawa kg ordernya */
.crm-cadence { align-items: flex-end; }
.crm-point { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 42px; }
.crm-point-kg { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-point-date { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }
.crm-gap { margin-bottom: 22px; }
/* order yang DIPERKIRAKAN — berongga, supaya tidak pernah terbaca sebagai
   order yang sudah terjadi */
.crm-point-next .crm-dot-order { background: transparent; border: 1px dashed var(--text-muted); }
.crm-point-next .crm-point-kg { color: var(--text-muted); font-weight: 600; }
.crm-gap-next { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }

.crm-rule { height: 1px; background: var(--border); margin: 14px 0; }
.crm-forecast-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.crm-forecast-table th {
    text-align: start; color: var(--text-muted); font-weight: 500;
    font-size: 0.68rem; padding-bottom: 6px; border: 0;
}
.crm-forecast-table td { padding: 5px 0; border: 0; font-variant-numeric: tabular-nums; }
.crm-forecast-table tfoot td { border-top: 1px solid var(--border); padding-top: 8px; font-weight: 700; }
.crm-forecast-note { margin-top: auto; padding-top: 12px; font-size: 0.72rem; line-height: 1.6; }

/* Tombol kembali di modal customer — hanya muncul kalau modal itu dibuka
   dari daftar customer milik seorang sales. */
.crm-back { margin-bottom: 10px; }

/* Sub-tab di dalam tab Performance halaman CRM. Sengaja BUKAN .tab-btn:
   restoreLastTab() menyapu seluruh .tab-btn dalam satu section, sehingga tab
   bersarang akan saling mematikan. */
.crm-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-subtab.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }

/* Tracking — blend result (custom blend / recipe post-blend): the blend's
   own facts, then one table row per component (2026-09-29). */
.trk-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 6px; vertical-align: middle; margin-left: 8px; }
.trk-code-chip { border: 1px solid var(--primary); color: var(--primary); background: var(--primary-glow); border-radius: 8px; padding: 1px 10px; font-size: 0.9rem; font-weight: 600; font-family: monospace; }
.trk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 12px 0 0; }
.trk-facts div { display: grid; gap: 2px; }
.trk-facts dt { font-size: 0.75rem; color: var(--text-muted); }
.trk-facts dd { margin: 0; font-weight: 600; }
.trk-facts dd small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.trk-mono { font-family: monospace; font-variant-numeric: tabular-nums; }
.trk-comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.trk-comp-head h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.trk-comp-head span { font-size: 0.8rem; color: var(--text-muted); }
.trk-table { min-width: 1080px; }
.trk-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; }
.trk-table td { padding: 9px 10px; vertical-align: top; }
.trk-table tfoot td { font-weight: 700; border-top: 1px solid var(--border); border-bottom: none; background-color: rgba(0, 0, 0, 0.08); }
.trk-table .trk-num { text-align: right; font-family: monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trk-dash { color: var(--text-muted); }
.trk-ing { font-weight: 700; min-width: 170px; }
.trk-ing small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.trk-pill { display: inline-block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-bottom: 3px; }
.trk-pill-bulk, .trk-pill-roast { background: var(--primary-glow); color: var(--primary); }
.trk-pill-packed { background: rgba(88, 146, 204, 0.16); color: #3d78b5; }
[data-theme="dark"] .trk-pill-packed { color: var(--info); }
.trk-pill-unreg { background: rgba(180, 83, 9, 0.12); color: #b45309; }
[data-theme="dark"] .trk-pill-unreg { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.trk-lot { display: block; white-space: nowrap; font-family: monospace; font-size: 0.75rem; color: var(--text-secondary); }
.trk-unreg-note { color: var(--text-secondary); }
.trk-unreg-note b { color: #b45309; }
[data-theme="dark"] .trk-unreg-note b { color: #fbbf24; }
.trk-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--primary); vertical-align: middle; margin-left: 8px; opacity: 0.7; }

/* Stock count sheet: one tab per category / per machine for packed. Not
   .tab-btn on purpose (restoreLastTab sweeps every .tab-btn in a section). */
.so-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.so-tab.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.so-tab-count { font-family: monospace; font-size: 0.75rem; opacity: 0.75; margin-left: 4px; }

/* Completed Order — Ordered vs Dispatched (2026-10-04). */
.hist-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hist-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.hist-chip-n { font-family: monospace; font-size: 0.75rem; opacity: 0.75; margin-left: 4px; }
tr.hist-row { cursor: pointer; }
tr.hist-row:hover > td { background: rgba(127, 127, 127, 0.06); }
tr.hist-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
tr.hist-none > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.hist-partial > td:first-child { box-shadow: inset 3px 0 0 #b45309; }
[data-theme="dark"] tr.hist-partial > td:first-child { box-shadow: inset 3px 0 0 #fbbf24; }
.hist-lines { display: grid; gap: 6px; min-width: 360px; }
.hist-line { display: grid; grid-template-columns: minmax(120px, 1fr) auto 44px 96px; gap: 8px; align-items: center; font-size: 0.82rem; }
.hist-name { font-weight: 600; color: var(--text-primary); }
.hist-mach { font-size: 0.68rem; color: #0891b2; font-weight: 600; background: rgba(6, 182, 212, 0.1); padding: 0 5px; border-radius: 3px; white-space: nowrap; }
.hist-size { font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.hist-qty { font-family: monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hist-qty b { font-weight: 700; }
.hist-qty .of { color: var(--text-muted); }
.hist-qty.ok b { color: var(--success); }
.hist-qty.part b { color: #b45309; }
[data-theme="dark"] .hist-qty.part b { color: #fbbf24; }
.hist-qty.none b { color: var(--danger); }
.hist-short { display: block; font-family: inherit; font-size: 0.68rem; color: var(--text-muted); }
.hist-tot { display: grid; gap: 1px; text-align: right; white-space: nowrap; }
.hist-tot b { font-family: monospace; font-size: 0.9rem; }
.hist-tot span, .hist-sub { font-size: 0.74rem; color: var(--text-muted); }
small.hist-sub { display: block; }
.hist-waiting { font-size: 0.72rem; color: #b45309; font-weight: 600; }
[data-theme="dark"] .hist-waiting { color: #fbbf24; }
.hist-pill { display: inline-block; font-size: 0.72rem; padding: 2px 10px; border-radius: 9999px; font-weight: 700; white-space: nowrap; }
.hist-pill-full { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.hist-pill-partial { background: rgba(180, 83, 9, 0.12); color: #b45309; }
[data-theme="dark"] .hist-pill-partial { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.hist-pill-none { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.hist-pill-ready { background: rgba(6, 182, 212, 0.15); color: #0891b2; }
tr.hist-detail > td { background: rgba(127, 127, 127, 0.05); padding: 0; }
.hist-detail-box { padding: 14px 16px 16px 20px; display: grid; gap: 12px; }
.hist-detail-head { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-secondary); }
.hist-warn { border: 1px solid var(--danger); background: rgba(239, 68, 68, 0.08); border-radius: 8px; padding: 9px 12px; font-size: 0.82rem; }
.hist-warn b { color: var(--danger); }
.hist-dtable { min-width: 680px; }
.hist-dtable .num { text-align: right; font-family: monospace; }

/* Item Return (js/returns.js, 2026-10-04). Amber = the .badge-roasted pair
   (var(--warning) is never redefined for light mode). */
.ret-req { color: var(--danger); }
.ret-hint { font-size: 0.76rem; color: var(--text-muted); }
.ret-hint.ret-err, .ret-err { color: var(--danger); font-weight: 600; }
.ret-hint.ret-ok { color: var(--success); }
.ret-why { font-size: 0.78rem; color: var(--danger); min-height: 1.1em; }
.ret-sub { display: block; font-size: 0.74rem; color: var(--text-muted); font-weight: 400; }
.ret-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.ret-seg button { border: 0; background: transparent; color: var(--text-secondary); padding: 6px 12px; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.ret-seg button.active { background: var(--primary-glow); color: var(--primary); }
.ret-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.ret-item-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 10px; margin: 12px 0 10px; font-weight: 700; }
.ret-scanbox { background: var(--primary-glow); border: 1px solid var(--border-focus); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; }
.ret-coffee { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 8px; cursor: pointer; }
.ret-coffee.ret-filled { border-color: var(--info); }
.ret-coffee-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ret-coffee-head > span:first-child { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.ret-mode { transition: opacity .15s ease, filter .15s ease; }
.ret-mode.ret-off { opacity: 0.5; filter: grayscale(0.6); }
@media (prefers-reduced-motion: reduce) { .ret-mode { transition: none; } }
.ret-resolved { min-height: 1.2em; }
.ret-found { background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.45); border-radius: 8px; padding: 7px 10px; font-size: 0.8rem; }
.ret-unknown { background: rgba(180, 83, 9, 0.1); border: 1px solid rgba(180, 83, 9, 0.45); border-radius: 8px; padding: 7px 10px; font-size: 0.8rem; }
.ret-unknown b { color: #b45309; }
[data-theme="dark"] .ret-unknown { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.45); }
[data-theme="dark"] .ret-unknown b { color: #fbbf24; }
.ret-link { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer; }
.ret-count { font-size: 0.7rem; color: var(--primary); background: var(--primary-glow); border-radius: 20px; padding: 2px 9px; }
.ret-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; cursor: pointer; font-size: 0.82rem; }
.ret-line b { overflow-wrap: anywhere; }
.ret-line.ret-editing { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ret-line:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ret-x { background: none; border: 0; color: var(--text-muted); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ret-note { display: grid; gap: 2px; background: var(--primary-glow); border: 1px solid var(--border-focus); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 0.85rem; }
.ret-note span { color: var(--text-secondary); font-size: 0.8rem; }
.ret-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ret-meta div { display: grid; gap: 1px; }
.ret-meta span { font-size: 0.72rem; color: var(--text-muted); }
.ret-meta b { font-size: 0.88rem; overflow-wrap: anywhere; }
.ret-table { min-width: 720px; }
.ret-table td, .ret-table th { vertical-align: top; }
.ret-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 2px; }
.ret-total-row span { font-size: 0.8rem; color: var(--text-secondary); }
.ret-total-row b { font-size: 1.4rem; color: var(--primary); }
.ret-sendto { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 10px; }
.ret-sendto-head { font-weight: 800; font-size: 1rem; }
.ret-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .ret-opts { grid-template-columns: 1fr; } }
.ret-opt { text-align: left; border: 1px solid var(--border); background: transparent; color: var(--text-primary); border-radius: 10px; padding: 11px 12px; display: grid; gap: 3px; cursor: pointer; }
.ret-opt b { font-size: 0.9rem; }
.ret-opt span { font-size: 0.76rem; color: var(--text-muted); }
.ret-opt.active { border-color: var(--primary); background: var(--primary-glow); }
.ret-opt:disabled { opacity: 0.4; cursor: not-allowed; }
.ret-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ret-dest { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; font-size: 0.84rem; display: grid; gap: 3px; }
.ret-dest:empty { display: none; }
.ret-dest span { color: var(--text-muted); font-size: 0.78rem; }
.ret-q, .ret-tick { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; font-size: 1.4rem; font-weight: 800; }
.ret-q { background: rgba(180, 83, 9, 0.12); color: #b45309; }
[data-theme="dark"] .ret-q { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.ret-tick { background: var(--primary-glow); color: var(--success); }
.ret-result { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 0.85rem; }
.ret-print-lot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: end; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ret-pill { display: inline-block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; }
.ret-pill-need { background: rgba(180, 83, 9, 0.12); color: #b45309; }
[data-theme="dark"] .ret-pill-need { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.ret-pill-partial, .ret-pill-inventory { background: rgba(6, 182, 212, 0.14); color: #0891b2; }
.ret-pill-done, .ret-pill-bulk { background: rgba(16, 185, 129, 0.14); color: var(--success); }
.ret-pill-waste { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.ret-main td small.ret-sub + .ret-pill { margin-top: 4px; }
.ret-main tr.ret-grp-first td { border-top: 2px solid var(--border); }
.ret-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 0.76rem; }
.ret-chips { display: flex; gap: 6px; }
.ret-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
/* Edit Return modal (js/returns.js openEditReturnModal) */
.ret-ed-head { display: grid; grid-template-columns: 170px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; }
.ret-ed-head .form-group { margin-bottom: 0; }
.ret-ed-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px 110px 110px 120px; gap: 8px; }
.ret-ed-grid .form-group { margin-bottom: 0; }
@media (max-width: 900px) { .ret-ed-head, .ret-ed-grid { grid-template-columns: 1fr 1fr; } }
.ret-ed-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 8px; }
.ret-ed-card.ret-ed-new { border-style: dashed; border-color: var(--primary); }
.ret-ed-card.ret-ed-is-removed { opacity: 0.6; }
.ret-ed-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ret-ed-actions { display: inline-flex; gap: 8px; align-items: center; }
.ret-ed-lock { background: var(--bg-app); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; color: var(--text-secondary); }
.ret-ed-edit { border: 1px solid var(--border-focus); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.ret-ed-title { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.ret-ed-title .ret-hint { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ret-ed-note { border-radius: 8px; padding: 7px 10px; font-size: 0.8rem; margin-top: 6px; }
.ret-ed-note-ok { background: var(--primary-glow); color: var(--success); }
.ret-ed-note-split { background: rgba(180, 83, 9, 0.1); color: #b45309; }
[data-theme="dark"] .ret-ed-note-split { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.form-control.ret-changed { border-color: #b45309; box-shadow: 0 0 0 1px #b45309; }
[data-theme="dark"] .form-control.ret-changed { border-color: #fbbf24; box-shadow: 0 0 0 1px #fbbf24; }
.ret-ed-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }