@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data:font/woff2;base64,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') format('woff2');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('data:font/woff2;base64,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') format('woff2');
}

/*
 * WMS UI system — Unified Design System Layer (Phase 1–6)
 * Centralized Design Tokens, Component Standards & Modern UI Enhancements.
 * 100% Backward-compatible with existing selectors and class names.
 */

/* Declare CSS Cascade Layer Order: system layer ALWAYS beats legacy layer */
@layer base, legacy, system;
@layer system;

:root {
    /* 1. Base Surfaces & Backgrounds (Dark Mode - Default) */
    --bg-main: #0b1120;
    --bg-sidebar: #0f172a;
    --bg-card: rgba(17, 24, 39, 0.90);
    --bg-card-hover: #1e293b;
    --bg-card-elevated: #1e293b;
    --surface-soft: rgba(148, 163, 184, 0.08);
    --surface-glass: rgba(15, 23, 42, 0.75);
    --backdrop-blur: 16px;

    /* 2. Borders & Glows */
    --border-color: rgba(203, 213, 225, 0.16);
    --border-color-subtle: rgba(203, 213, 225, 0.08);
    --border-color-hover: rgba(56, 189, 248, 0.40);
    --border-color-glow: rgba(56, 189, 248, 0.52);

    /* 3. Typography Colors */
    --text-main: #f8fafc;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #94a3b8;
    --text-disabled: #475569;

    /* 4. Semantic Status Colors (Operational meaning strictly preserved) */
    --color-blue: #38bdf8;
    --color-blue-hover: #0ea5e9;
    --color-blue-subtle: rgba(56, 189, 248, 0.12);
    --color-green: #4ade80;
    --color-green-hover: #22c55e;
    --color-green-subtle: rgba(74, 222, 128, 0.12);
    --color-red: #fb7185;
    --color-red-hover: #f43f5e;
    --color-red-subtle: rgba(251, 113, 133, 0.12);
    --color-orange: #fbbf24;
    --color-orange-hover: #f59e0b;
    --color-orange-subtle: rgba(251, 191, 36, 0.12);
    --color-accent: #fbbf24;
    --color-purple: #c4b5fd;
    --color-purple-hover: #a78bfa;
    --color-purple-subtle: rgba(196, 181, 253, 0.12);

    /* Cancelled Requisitions */
    --wms-cancelled-text: #ff8a86;
    --wms-cancelled-bg: rgba(255, 138, 134, 0.14);
    --wms-cancelled-border: rgba(239, 111, 108, 0.32);

    /* 5. Helper & Fallback Defaults */
    --notice-color: var(--text-main);
    --notice-background: var(--surface-soft);
    --input-bg: rgba(15, 23, 42, 0.65);
}

:root:has(body.light-theme),
body.light-theme {
    /* 1. Base Surfaces & Backgrounds (Light Mode) */
    --bg-main: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.96);
    --bg-card-hover: #f8fafc;
    --bg-card-elevated: #ffffff;
    --surface-soft: rgba(0, 0, 0, 0.04);
    --surface-glass: rgba(255, 255, 255, 0.90);
    --backdrop-blur: 16px;
    --input-bg: #ffffff;

    /* 2. Borders & Glows */
    --border-color: rgba(148, 163, 184, 0.32);
    --border-color-subtle: rgba(148, 163, 184, 0.18);
    --border-color-hover: rgba(2, 132, 199, 0.50);
    --border-color-glow: rgba(2, 132, 199, 0.35);

    /* 3. Typography Colors */
    --text-main: #0f172a;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;

    /* 4. Semantic Status Colors */
    --color-blue: #0284c7;
    --color-blue-hover: #0369a1;
    --color-blue-subtle: rgba(2, 132, 199, 0.12);
    --color-green: #16a34a;
    --color-green-hover: #15803d;
    --color-green-subtle: rgba(22, 163, 74, 0.12);
    --color-red: #e11d48;
    --color-red-hover: #be123c;
    --color-red-subtle: rgba(225, 29, 72, 0.12);
    --color-orange: #d97706;
    --color-orange-hover: #b45309;
    --color-orange-subtle: rgba(217, 119, 6, 0.12);
    --color-accent: #0284c7;
    --color-purple: #7c3aed;
    --color-purple-hover: #6d28d9;
    --color-purple-subtle: rgba(124, 58, 237, 0.12);

    /* Cancelled Requisitions */
    --wms-cancelled-text: #dc2626;
    --wms-cancelled-bg: rgba(220, 38, 38, 0.10);
    --wms-cancelled-border: rgba(220, 38, 38, 0.30);

    /* 5. Helper & Fallback Defaults */
    --notice-color: var(--text-main);
    --notice-background: var(--surface-soft);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
    --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border-color);

    background-color: #f1f5f9;
    color: #0f172a;
    color-scheme: light;
}

:root {

    /* 6. Typography */
    --font-heading: 'Outfit', 'Sarabun', sans-serif;
    --font-body: 'Inter', 'Sarabun', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;

    /* 7. Spacing Scale */
    --space-0_5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* 8. Controls & Touch Ergonomics */
    --control-height-sm: 34px;
    --control-height: 44px;
    --tap-target: 44px;
    --compact-action-size: 44px;
    --mobile-nav-height: 58px;
    --content-max-width: 1520px;

    /* 9. Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* 10. Multi-layer Elevation & Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-color);
    --shadow-card-hover: 0 14px 32px -4px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-color-hover);
    --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--border-color);

    /* 11. Focus Rings */
    --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.35);
    --focus-ring-error: 0 0 0 3px rgba(251, 113, 133, 0.35);
    --wms-focus-color: #38bdf8;
    --wms-focus-halo: rgba(56, 189, 248, 0.18);

    /* 12. Z-Index Invariants */
    --z-header: 50;
    --z-sidebar: 200;
    --z-mobile-nav: 100;
    --z-modal: 1000100;
}

/* Light Theme Overrides */
body.light-theme {
    --bg-main: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.96);
    --bg-card-hover: #ffffff;
    --bg-card-elevated: #ffffff;
    --surface-soft: rgba(15, 23, 42, 0.04);
    --surface-glass: rgba(255, 255, 255, 0.88);

    --border-color: rgba(15, 23, 42, 0.12);
    --border-color-subtle: rgba(15, 23, 42, 0.06);
    --border-color-hover: rgba(2, 132, 199, 0.45);
    --border-color-glow: rgba(2, 132, 199, 0.35);

    --text-main: #0f172a;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;

    --color-blue: #0284c7;
    --color-blue-hover: #0369a1;
    --color-blue-subtle: rgba(2, 132, 199, 0.10);
    --color-green: #059669;
    --color-green-hover: #047857;
    --color-green-subtle: rgba(5, 150, 105, 0.10);
    --color-red: #dc2626;
    --color-red-hover: #b91c1c;
    --color-red-subtle: rgba(220, 38, 38, 0.10);
    --color-orange: #d97706;
    --color-orange-hover: #b45309;
    --color-orange-subtle: rgba(217, 119, 6, 0.10);
    --color-purple: #9333ea;
    --color-purple-hover: #7e22ce;
    --color-purple-subtle: rgba(147, 51, 234, 0.10);

    --wms-cancelled-text: #9f1239;
    --wms-cancelled-bg: rgba(159, 18, 57, 0.08);
    --wms-cancelled-border: rgba(159, 18, 57, 0.25);

    --shadow-card: 0 4px 20px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--border-color);
    --shadow-card-hover: 0 8px 28px -4px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--border-color-hover);
    --shadow-modal: 0 20px 48px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--border-color);
    --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.25);
    --wms-focus-color: #075985;
    --wms-focus-halo: rgba(7, 89, 133, 0.20);
    --input-bg: #ffffff;
}

html {
    min-width: 320px;
    background: var(--bg-main);
}

body {
    min-width: 320px;
    color: var(--text-main);
    font-family: var(--font-body);
}

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

button {
    -webkit-tap-highlight-color: transparent;
}

/* Respect operating-system accessibility setting without altering visual hierarchy */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Strict A4 Document / Print Isolation */
@media print {
    .a4-document-container {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: none !important;
    }
}

/* Application shell ------------------------------------------------------- */
.app-container {
    min-width: 0;
    min-height: 100dvh;
}

.main-content {
    min-width: 0;
}

.main-content>* {
    min-width: 0;
}

.panel-container,
.page-panel {
    width: min(100%, var(--content-max-width));
    min-width: 0;
    margin-inline: auto;
}

.panel-header {
    display: grid;
    gap: var(--space-1);
}

.panel-header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.panel-header p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.workspace-panel-slot {
    min-width: 0;
    margin-top: 20px;
}

.panel-loading {
    display: grid;
    min-height: 220px;
    place-content: center;
    justify-items: center;
    gap: 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface-soft) 50%, transparent);
    font-size: 13px;
    font-weight: 700;
}

.panel-loading>i {
    color: var(--color-blue);
    font-size: 22px;
}

/* Shared surfaces and action rhythm -------------------------------------- */
.card-glass,
.dashboard-card,
.workflow-scan-panel,
.workflow-form-panel,
.operations-progress-card,
.operations-purchase-card,
.operations-report-card,
.operations-user-card,
.operations-tip-card,
.operations-alert-card,
.operations-backup-card,
.operations-checklist,
.stocktake-card,
.requisition-queue-card,
.req-card-item {
    min-width: 0;
    border-color: var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-glass:hover,
.dashboard-card:hover,
.operations-progress-card:hover,
.operations-purchase-card:hover,
.operations-report-card:hover,
.operations-user-card:hover,
.requisition-queue-card:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-card-hover);
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-accent {
    min-height: var(--control-height);
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: normal;
    text-align: center;
    touch-action: manipulation;
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.14s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-accent:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-success:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-accent:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-accent:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

[role='button']:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* Minimalist Clean Border Form Inputs */
input:not([type='checkbox']):not([type='radio']),
select,
textarea,
.input-text,
.input-select {
    min-width: 0;
    min-height: var(--control-height);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 8px 12px;
    font-size: var(--text-base);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

input:not([type='checkbox']):not([type='radio']):hover,
select:hover,
textarea:hover,
.input-text:hover,
.input-select:hover {
    border-color: var(--border-color-hover);
}

input:not([type='checkbox']):not([type='radio']):focus-visible,
select:focus-visible,
textarea:focus-visible,
.input-text:focus-visible,
.input-select:focus-visible {
    outline: 0;
    border-color: var(--wms-focus-color);
    box-shadow: none;
}

/* Spacious & Modern Data Tables */
.table-responsive {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color-subtle);
    color: var(--text-main);
    font-size: var(--text-sm);
    vertical-align: middle;
    transition: background-color 0.12s ease;
}

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

.table tbody tr:hover td {
    background-color: var(--surface-soft);
}

.table th,
.table td {
    overflow-wrap: anywhere;
}

/* Status Badges & Chips — Clean Rounded Minimalist */
.status-badge,
.badge,
.badge-pill,
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-badge.success,
.badge-fresh,
.badge-approved,
.badge-dispatched {
    background: var(--color-green-subtle);
    color: var(--color-green);
    border-color: color-mix(in srgb, var(--color-green) 30%, transparent);
}

.status-badge.warning,
.badge-dry,
.badge-pending,
.badge-low-stock {
    background: var(--color-orange-subtle);
    color: var(--color-orange);
    border-color: color-mix(in srgb, var(--color-orange) 30%, transparent);
}

.status-badge.danger,
.badge-rejected,
.badge-out-of-stock {
    background: var(--color-red-subtle);
    color: var(--color-red);
    border-color: color-mix(in srgb, var(--color-red) 30%, transparent);
}

.status-badge.info,
.badge-beverage,
.badge-inbound {
    background: var(--color-blue-subtle);
    color: var(--color-blue);
    border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.badge-catch-weight,
.badge-specialty {
    background: var(--color-purple-subtle);
    color: var(--color-purple);
    border-color: color-mix(in srgb, var(--color-purple) 30%, transparent);
}

.status-badge.cancelled,
.requisition-preview__status--cancelled {
    background: var(--wms-cancelled-bg);
    color: var(--wms-cancelled-text);
    border-color: var(--wms-cancelled-border);
}

/* Ensure Badge, Category and Type Labels are ALWAYS Fully Visible with text */
.badge,
.status-badge,
.system-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.badge .btn-label-text,
.status-badge .btn-label-text,
.system-tag .btn-label-text,
#panel-products .badge .btn-label-text,
#panel-products td .badge .btn-label-text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    white-space: nowrap !important;
    margin-left: 2px !important;
}

/* Global header ----------------------------------------------------------- */
.top-header {
    position: relative;
    z-index: var(--z-header);
    background: var(--bg-card);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 12px 18px;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.top-header__layout {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.top-header__brand,
.header-search,
.top-header__status,
.top-header__account-actions {
    display: flex;
    min-width: 0;
    align-items: center;
}

.top-header__brand {
    gap: var(--space-3);
}

.header-search {
    min-width: 0;
    gap: 10px;
}

.header-search img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-xs);
    object-fit: contain;
}

.header-search h1 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-header__status {
    justify-content: center;
    gap: var(--space-2);
}

.live-clock-widget {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.live-clock-widget>i {
    color: var(--color-accent);
    font-size: 13px;
}

.live-clock-widget small {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 3px;
}

.header-scanner-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--color-blue) 35%, var(--border-color));
    border-radius: var(--radius-sm);
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.top-header__account-actions {
    justify-content: flex-end;
    gap: var(--space-2);
}

.header-account-action {
    position: relative;
    min-height: 38px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    overflow: visible !important;
    touch-action: manipulation;
}

.header-notification-button {
    min-width: 38px;
    padding-inline: 10px;
    position: relative !important;
    overflow: visible !important;
    border-radius: var(--radius-sm);
}

.header-notification-button.has-unread {
    border-color: color-mix(in srgb, var(--color-red) 50%, var(--border-color));
    color: var(--color-red);
    background: var(--color-red-subtle);
}

.header-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 2px solid var(--bg-card);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    z-index: 10;
}

/* Sidebar & Navigation ---------------------------------------------------- */
.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color-subtle);
}

.sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.brand-logo-img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    object-fit: contain;
}

.logo-text {
    min-width: 0;
}

.logo-text h2 {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.logo-text span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar .divider {
    margin: 12px 0;
    border-top: 1px solid var(--border-color-subtle);
}

/* Navigation Buttons & Active States */
.nav-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--control-height);
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    gap: 11px;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.nav-btn i {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.nav-btn span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-btn:hover {
    color: var(--text-main);
    background: var(--surface-soft);
    border-color: var(--border-color-subtle);
}

.nav-btn:hover i {
    color: var(--color-blue);
}

.nav-btn.active {
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
    border-left: 3px solid var(--color-blue);
    font-weight: 800;
    box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.06);
}

.nav-btn.active i {
    color: var(--color-blue);
}

.nav-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.badge-count-green {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--color-green);
    font-size: 11px;
    font-weight: 800;
}

/* User & System Status Area in Sidebar */
.sidebar-system-controls {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.sidebar-role-badge,
.sidebar-connection-badge {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-xs);
    font-weight: 700;
}

.sidebar-role-badge {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.sidebar-connection-badge {
    min-height: 28px;
    margin-top: 2px;
    padding: 4px 8px;
    font-size: 11px;
    color: var(--color-green);
    background: var(--color-green-subtle);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
}

.sidebar-theme-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.sidebar-account-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.sidebar-control-button {
    min-width: 0;
    min-height: 36px;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card);
    transition: all 0.15s ease;
}

.sidebar-control-button:hover {
    color: var(--text-main);
    border-color: var(--border-color-hover);
    background: var(--bg-card-hover);
}

.active-user-badge__icon {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--color-blue);
}

.active-user-badge__copy {
    min-width: 0;
    text-align: left;
}

.active-user-badge__name {
    overflow: hidden;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-user-badge__meta {
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 10px;
}

/* Workflow state: content should explain what happens next.  The same empty,
   notice and action spacing is used on dashboards, queues and forms. */
.operations-empty,
.empty-state,
.no-data-message {
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    text-align: center;
}

.operations-form,
.workflow-form,
.modal-form-stack {
    gap: var(--space-3);
}

.operations-form label,
.modal-form-stack label {
    min-width: 0;
}

.operations-layout,
.dashboard-grid,
.stats-grid {
    min-width: 0;
}

.panel-inline-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 700;
}

.panel-inline-notice>span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.panel-inline-notice>button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
}

.panel-inline-notice--error {
    border-color: color-mix(in srgb, var(--color-red) 48%, var(--border-color));
    color: var(--color-red);
    background: color-mix(in srgb, var(--color-red) 10%, var(--bg-card));
}

.panel-inline-notice--success {
    border-color: color-mix(in srgb, var(--color-green) 48%, var(--border-color));
    color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 10%, var(--bg-card));
}

.panel-inline-notice--warning {
    border-color: color-mix(in srgb, var(--color-orange) 48%, var(--border-color));
    color: var(--color-orange);
    background: color-mix(in srgb, var(--color-orange) 10%, var(--bg-card));
}

.panel-inline-notice--info {
    border-color: color-mix(in srgb, var(--color-blue) 48%, var(--border-color));
    color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 10%, var(--bg-card));
}

/* Dialogs and fixed mobile controls -------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.modal-card {
    position: relative;
    width: min(100%, 640px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-soft);
}

.modal-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--surface-soft);
}

body.has-modal-open .mobile-bottom-nav,
body.has-modal-open .mobile-fab-container {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .sidebar-placeholder {
        display: none !important;
    }

    .top-header__layout {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .top-header__status {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .top-header__account-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .header-scanner-status span {
        display: none;
    }

    .header-scanner-status {
        padding-inline: 9px;
    }
}

@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: 232px minmax(0, 1fr);
    }

    .sidebar {
        width: 232px;
        padding-inline: 12px;
    }

    .main-content {
        padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
    }

    .panel-header h2 {
        font-size: clamp(20px, 3vw, 24px);
    }
}

@media (max-width: 640px) {
    .main-content {
        padding: 12px 10px calc(96px + env(safe-area-inset-bottom));
    }

    .workspace-panel-slot {
        margin-top: 14px;
    }

    .top-header {
        margin-bottom: var(--space-4);
    }

    .top-header__layout {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .top-header__brand {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .top-header__status {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin: 0;
    }

    .top-header__account-actions {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        flex-shrink: 0;
    }

    .header-search {
        gap: 7px;
    }

    .header-search img {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        padding: 2px;
        border-radius: 7px;
    }

    .header-search h1 {
        font-size: 14px;
    }

    .top-header__status .header-scanner-status {
        display: none;
    }

    .live-clock-widget {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .live-clock-widget .clock-divider,
    .live-clock-widget small {
        display: none;
    }

    .header-account-summary,
    .header-account-action-label {
        display: none;
    }

    .header-account-action {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 999px;
        overflow: visible !important;
    }

    .header-account-action--logout {
        width: 58px;
        min-width: 58px;
        font-size: 0;
        border-radius: 9px;
    }

    .header-account-action--logout::after {
        content: 'ออก';
        font-size: 11px;
        font-weight: 800;
    }

    .header-notification-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        font-size: 9px;
        border: 2px solid var(--bg-main);
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
        z-index: 10;
    }

    .sidebar-account-actions {
        gap: 5px;
    }

    .sidebar-control-button {
        min-height: 38px;
        font-size: 9px;
    }

    .table {
        min-width: 600px;
    }

    .table th,
    .table td {
        padding: 10px 11px;
    }

    .panel-inline-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-inline-notice>button {
        width: 100%;
    }

    .modal-card:not(.modal-card--image):not(.modal-card--document) {
        width: min(100%, 560px);
    }
}

@media (max-width: 390px) {
    .top-header__account-actions {
        gap: 5px;
    }

    .header-account-action--logout {
        width: 52px;
        min-width: 52px;
    }

    .sidebar-account-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet workspace --------------------------------------------------------
   iPad has enough room for dense information, but not for a persistent
   desktop sidebar plus two narrow content columns.  Treat it as its own
   workspace: navigation becomes an on-demand panel and the task area keeps
   the full screen width.  This applies to every panel through shared shell,
   card, form and table classes rather than fixing one screen at a time. */
@media (min-width: 641px) and (max-width: 1180px) {
    .app-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sidebar-placeholder {
        display: none !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -100vw !important;
        width: min(360px, 88vw) !important;
        max-width: 88vw !important;
        padding: 20px 18px !important;
        z-index: 999999 !important;
        box-shadow: 12px 0 36px rgba(2, 6, 23, 0.5) !important;
        transition: left 200ms ease !important;
    }

    .sidebar.sidebar-open,
    .sidebar.active {
        left: 0 !important;
    }

    .btn-close-sidebar,
    .btn-mobile-menu {
        display: flex !important;
    }

    /* The tablet uses the header menu, avoiding duplicate persistent menus
       while preserving the room needed for tables and approval actions. */
    .mobile-bottom-nav,
    .mobile-fab-container {
        display: none !important;
    }

    .main-content {
        padding: 20px clamp(18px, 3vw, 32px) calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .panel-container,
    .page-panel {
        width: 100%;
        max-width: none;
    }

    .workspace-panel-slot {
        margin-top: 18px;
    }

    .top-header {
        margin-bottom: 20px;
    }

    .top-header__layout {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .top-header__status {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .top-header__account-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .header-account-action {
        min-height: 42px;
        padding: 9px 11px;
        font-size: 13px;
    }

    .header-account-summary {
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .live-clock-widget,
    .header-scanner-status {
        min-height: 36px;
        font-size: 12px;
    }

    .card-glass,
    .dashboard-card,
    .workflow-scan-panel,
    .workflow-form-panel,
    .operations-progress-card,
    .operations-purchase-card,
    .operations-report-card,
    .operations-user-card,
    .operations-tip-card,
    .operations-alert-card,
    .operations-backup-card,
    .stocktake-card,
    .requisition-queue-card,
    .req-card-item {
        padding: 20px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-accent {
        min-height: 42px;
        font-size: 13px;
    }

    .operations-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .operations-tabs {
        gap: 10px;
        margin-block: 20px;
    }

    .operations-tabs button {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 13px;
    }

    .operations-user-list>div,
    .operations-order,
    .operations-alert,
    .operations-lot-list>div,
    .operations-location-report>div,
    .operations-outbox-list>div,
    .operations-backup-list>div {
        padding: 14px 16px;
        gap: 14px;
    }

    .operations-user-list strong,
    .operations-order strong,
    .operations-alert strong {
        font-size: 14px;
    }

    .operations-user-list span,
    .operations-order span,
    .operations-alert p {
        font-size: 12px;
    }

    .operations-order__actions .btn-secondary,
    .operations-order__actions .btn-success {
        min-height: 40px;
        padding: 8px 11px;
        font-size: 12px;
    }

    .operations-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .operations-metrics>div {
        padding: 14px 10px;
    }

    .operations-metrics span {
        font-size: 11px;
    }

    .operations-metrics strong {
        font-size: 24px;
    }

    .operations-receipt-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
    }

    .operations-receipt-line>strong {
        grid-column: 1 / -1;
    }

    .operations-integration-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .operations-integration-row__summary,
    .operations-endpoint {
        grid-column: 1 / -1;
    }

    .wms-form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .form-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .table {
        min-width: 640px;
    }

    .table th,
    .table td {
        padding: 12px 13px;
        font-size: 13px;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .header-account-summary {
        display: none;
    }

    .header-account-action-label {
        display: none;
    }

    .header-account-action--logout {
        min-width: 52px;
        padding-inline: 10px;
        font-size: 0;
    }

    .header-account-action--logout::after {
        content: 'ออก';
        font-size: 12px;
        font-weight: 800;
    }

    .operations-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-user-list__item {
        align-items: flex-start;
        flex-direction: column;
    }

    .operations-user-list__item>div:last-child {
        display: grid !important;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }

    .operations-user-list__item>div:last-child .btn-secondary,
    .operations-user-list__item>div:last-child .btn-success {
        width: 100%;
    }

    .operations-reset-request {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .operations-reset-request>.btn-primary {
        width: 100%;
    }
}

/* Keep logout labels ASCII-safe in CSS.  Thai characters encoded directly in
   an older stylesheet were interpreted twice by some iPad browsers. */
@media (max-width: 640px) {
    .top-header__account-actions .btn-secondary.header-account-action--logout::after {
        content: "\0e2d\0e2d\0e01";
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .header-account-action--logout {
        min-width: 108px;
    }

    .top-header__account-actions .btn-secondary.header-account-action--logout::after {
        content: "\0e2d\0e2d\0e01\0e08\0e32\0e01\0e23\0e23\0e30\0e1a";
        font-size: 12px;
        font-weight: 800;
    }
}

/* Account management ------------------------------------------------------
   Each person is a compact management record: identity and status on the
   left, deliberate actions on the right.  This prevents the large action
   buttons from visually overwhelming the employee details on tablets. */
/* Operations User List - Clean Modern Mobile & Desktop Layout */
.operations-user-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.operations-user-list__item {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: var(--bg-card, rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid var(--border-color) !important;
    border-left-width: 4px !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.operations-user-list__item:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

.operations-user-list__item--active {
    border-left-color: var(--color-green, #10b981) !important;
}

.operations-user-list__item--suspended {
    border-left-color: var(--color-red, #ef4444) !important;
    background: rgba(239, 68, 68, 0.02) !important;
}

.operations-user-list__item--pending {
    border-left-color: var(--color-accent, #f59e0b) !important;
    background: rgba(245, 158, 11, 0.03) !important;
}

.operations-user-list__identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}

.operations-user-list__identity::before {
    display: none !important;
}

.operations-user-list__identity-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.operations-user-list__avatar {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    background: rgba(56, 189, 248, 0.12) !important;
    color: var(--color-blue, #38bdf8) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.operations-user-list__avatar--admin {
    background: rgba(168, 85, 247, 0.14) !important;
    color: #c084fc !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

.operations-user-list__avatar--staff {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.operations-user-list__avatar--requester {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.operations-user-list__item--suspended .operations-user-list__avatar {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.operations-user-list__item--pending .operations-user-list__avatar {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.operations-user-list__name-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.operations-user-list__title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
}

.operations-user-list__title-row strong {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--text-main, #f8fafc) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}

.user-role-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.user-role-badge--admin {
    background: rgba(168, 85, 247, 0.14) !important;
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.user-role-badge--staff {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.user-role-badge--requester {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.user-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.user-status-badge--pending {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.user-status-badge--suspended {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.operations-user-list__meta-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 10px !important;
    font-size: 11.5px !important;
    color: var(--text-muted, #94a3b8) !important;
    line-height: 1.4 !important;
}

.operations-user-meta-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.operations-user-pending-alert {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    font-style: normal !important;
    color: var(--color-accent, #f59e0b) !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px dashed rgba(245, 158, 11, 0.3) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
}

/* User Action Buttons Row */
.operations-user-list__actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.btn-user-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
    border: 1px solid transparent !important;
}

.btn-user-action:active {
    transform: scale(0.97) !important;
}

.btn-user-action--approve {
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: #4ade80 !important;
}

.btn-user-action--approve:hover {
    background: rgba(34, 197, 94, 0.28) !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}

.btn-user-action--suspend {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-main, #e2e8f0) !important;
}

.btn-user-action--suspend:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

.btn-user-action--activate {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #4ade80 !important;
}

.btn-user-action--activate:hover {
    background: rgba(34, 197, 94, 0.24) !important;
    border-color: #22c55e !important;
}

.btn-user-action--reset {
    background: rgba(56, 189, 248, 0.08) !important;
    border-color: rgba(56, 189, 248, 0.32) !important;
    color: #38bdf8 !important;
}

.btn-user-action--reset:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

.btn-user-action--delete {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.32) !important;
    color: #f87171 !important;
}

.btn-user-action--delete:hover {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

@media (min-width: 820px) {
    .operations-user-list__item {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
    }

    .operations-user-list__identity {
        flex: 1 1 auto !important;
    }

    .operations-user-list__actions {
        display: flex !important;
        width: auto !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        gap: 8px !important;
    }

    .btn-user-action {
        width: auto !important;
        min-width: 88px !important;
        padding: 0 12px !important;
    }
}

/* Dialog foundation -------------------------------------------------------
   Legacy screens historically supplied their own full-screen overlays.  New
   portals add modal-overlay--open so every dialog shares one backdrop and
   one scroll container instead of producing overlapping frames. */
.modal-overlay.modal-overlay--open {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-modal) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(10px, 2.5vw, 24px) !important;
    background: rgba(2, 6, 23, 0.68) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.modal-overlay.modal-overlay--suspended {
    visibility: hidden !important;
    pointer-events: none !important;
}

.requisition-dispatch-modal {
    width: min(760px, calc(100vw - 32px)) !important;
}

.dispatch-scan-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
}

.dispatch-scan-controls>input {
    min-width: 0;
}

.dispatch-scan-controls>button {
    min-width: 92px;
    justify-content: center;
}

.pod-preview {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 160px;
}

.pod-preview__image {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 320px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.modal-overlay.modal-overlay--open>.modal-card:not(.modal-card--image):not(.modal-card--document) {
    width: min(720px, calc(100vw - 32px)) !important;
    height: auto !important;
    max-height: min(760px, calc(100dvh - 32px)) !important;
    margin: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.48) !important;
}

.modal-overlay.modal-overlay--open>.modal-card>.modal-header,
.modal-overlay.modal-overlay--open>.modal-card>.modal-footer {
    flex: 0 0 auto;
}

.modal-overlay.modal-overlay--open>.modal-card>.modal-body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

/* Notification center: one dialog, with readable state and no nested shade. */
.notification-center-modal__card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.notification-center-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-soft) 72%, var(--bg-card));
}

.notification-center-modal__heading,
.notification-center-modal__header-actions,
.notification-center-modal__item-main,
.notification-center-modal__item-title {
    display: flex;
    min-width: 0;
    align-items: center;
}

.notification-center-modal__heading {
    gap: 12px;
    align-items: flex-start;
}

.notification-center-modal__icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-blue) 36%, var(--border-color));
    border-radius: 12px;
    color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 13%, transparent);
    font-size: 18px;
}

.notification-center-modal__heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-main);
    font-size: 17px;
    line-height: 1.3;
}

.notification-center-modal__heading p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.notification-center-modal__unread-count,
.notification-center-modal__tab-count {
    display: inline-grid;
    min-width: 18px;
    place-items: center;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.notification-center-modal__unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 10px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.notification-center-modal__header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-center-modal__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--color-green) 40%, var(--border-color));
    border-radius: 10px;
    color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-center-modal__clear:hover {
    background: color-mix(in srgb, var(--color-green) 22%, transparent);
    border-color: var(--color-green);
}

.notification-center-modal__close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0;
    color: var(--text-muted);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.notification-center-modal__tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 10px 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-main) 45%, var(--bg-card));
    scrollbar-width: thin;
}

.notification-center-modal__tab {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-muted);
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.notification-center-modal__tab.is-active {
    border-color: color-mix(in srgb, var(--color-blue) 45%, var(--border-color));
    color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 12%, transparent);
}

.notification-center-modal__tab-count {
    min-height: 17px;
    padding: 1px 5px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
}

.notification-center-modal__list {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    gap: 10px;
    padding: 16px 20px;
    overflow: auto;
    overscroll-behavior: contain;
}

.notification-center-modal__empty {
    display: grid;
    min-height: 200px;
    place-content: center;
    justify-items: center;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.notification-center-modal__empty>i {
    margin-bottom: 10px;
    opacity: 0.38;
    font-size: 42px;
}

.notification-center-modal__empty h4 {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 15px;
}

.notification-center-modal__empty p {
    margin: 0;
    font-size: 12px;
}

.notification-center-modal__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--notice-color) 34%, var(--border-color));
    border-left: 4px solid var(--notice-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--notice-background) 55%, var(--bg-card));
}

.notification-center-modal__item.is-read {
    opacity: 0.74;
}

.notification-center-modal__item-main {
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 11px;
}

.notification-center-modal__item-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--notice-color);
    background: var(--notice-background);
    font-size: 15px;
}

.notification-center-modal__item-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.notification-center-modal__item-title {
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.notification-center-modal__item-label {
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--notice-color);
    background: var(--notice-background);
    font-size: 10px;
    font-weight: 800;
}

.notification-center-modal__item-title strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.notification-center-modal__item-time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.notification-center-modal__item-copy>p {
    margin: 5px 0 9px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notification-center-modal__item-action {
    min-height: 30px;
    padding: 4px 9px;
    border-color: color-mix(in srgb, var(--notice-color) 45%, var(--border-color));
    color: var(--notice-color);
    font-size: 10px;
}

.notification-center-modal__item-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: transparent;
    font-size: 18px;
    line-height: 1;
}

.notification-center-modal__item-close:hover,
.notification-center-modal__item-close:focus-visible {
    color: var(--notice-color);
    background: var(--notice-background);
}

/* Fast barcode registration uses the shared dialog frame and remains compact. */
.modal-overlay.modal-overlay--open>.quick-product-modal__card {
    width: min(540px, calc(100vw - 32px)) !important;
}

.quick-product-modal__card .modal-body {
    padding: 20px;
}

@media (max-width: 640px) {
    .modal-overlay.modal-overlay--open {
        align-items: center !important;
        padding: 10px !important;
    }

    .modal-overlay.modal-overlay--open>.modal-card:not(.modal-card--image):not(.modal-card--document) {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .notification-center-modal__header {
        padding: 14px;
    }

    .notification-center-modal__heading h3 {
        font-size: 15px;
    }

    .notification-center-modal__heading p {
        font-size: 11px;
    }

    .notification-center-modal__clear {
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap;
        min-height: 32px;
    }

    .notification-center-modal__clear>i {
        font-size: 12px;
    }

    .notification-center-modal__tabs {
        padding: 9px 14px;
    }

    .notification-center-modal__list {
        gap: 8px;
        padding: 12px 14px;
    }

    .notification-center-modal__item {
        padding: 11px;
    }

    .notification-center-modal__item-time {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .requisition-dispatch-modal {
        width: calc(100vw - 20px) !important;
    }

    .dispatch-scan-controls {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        gap: 5px !important;
    }

    .dispatch-scan-controls>button {
        min-width: 44px;
        width: 44px;
        padding-inline: 0 !important;
    }

    .dispatch-scan-controls>button>span {
        display: none;
    }

    .pod-preview {
        min-height: 120px;
    }

    .pod-preview__image {
        max-height: 240px !important;
    }
}

/* ==========================================================================
   RESPONSIVE REFINEMENT v14
   Final device-aware layer for phones, tablets and desktop workstations.
   Layout and presentation only; workflow handlers remain untouched.
   ========================================================================== */
:root {
    --tap-target: 44px;
    --compact-action-size: 44px;
    --mobile-nav-height: 58px;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button>i,
[role='button']>i {
    flex: 0 0 auto;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.photo-gallery-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.photo-gallery-grid>[role='button'] {
    min-width: 0;
    height: 100%;
}

.photo-gallery-filters input {
    min-width: 0;
}

@media (hover: none) and (pointer: coarse) {

    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-accent,
    .nav-btn,
    .mobile-nav-btn {
        min-height: var(--tap-target);
    }

    button,
    [role='button'] {
        touch-action: manipulation;
    }
}

@media (min-width: 1181px) {
    .main-content {
        padding-inline: clamp(24px, 2.5vw, 42px);
    }

    .panel-container,
    .page-panel {
        max-width: 1540px;
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (min-width: 641px) and (max-width: 1180px) {
    .main-content {
        width: 100%;
        padding: 20px clamp(18px, 3vw, 30px) calc(30px + env(safe-area-inset-bottom)) !important;
    }

    .panel-container,
    .page-panel {
        width: 100%;
        max-width: none;
    }

    .top-header {
        padding: 14px 16px;
    }

    .top-header__layout {
        align-items: center;
    }

    .card-glass,
    .dashboard-card,
    .workflow-scan-panel,
    .workflow-form-panel,
    .stocktake-card,
    .requisition-queue-card {
        padding: 18px !important;
    }

    .photo-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .photo-gallery-filters {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
        align-items: center !important;
    }

    .photo-gallery-filters>div:first-child {
        display: flex;
        min-width: 0;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    .photo-gallery-filters>div:first-child>button {
        flex: 0 0 auto;
    }

    .table {
        min-width: 680px;
    }

    .modal-footer {
        flex-wrap: wrap;
    }
}

@media (min-width: 641px) and (max-width: 860px) {
    .top-header__account-actions .header-account-action {
        width: var(--tap-target);
        min-width: var(--tap-target);
        height: var(--tap-target);
        min-height: var(--tap-target);
        padding: 0 !important;
        border-radius: 11px;
        font-size: 0 !important;
    }

    .top-header__account-actions .header-account-action>i {
        font-size: 15px;
    }

    .top-header__account-actions .header-account-action--logout::after {
        content: none !important;
    }
}

@media (max-width: 640px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        font-size: 13px;
    }

    .main-content {
        width: 100%;
        padding: 10px 9px calc(var(--mobile-nav-height) + 28px + env(safe-area-inset-bottom)) !important;
    }

    .panel-container,
    .page-panel {
        width: 100%;
        max-width: none;
    }

    .workspace-panel-slot {
        margin-top: 12px;
    }

    .panel-header {
        min-width: 0;
        gap: 4px;
        margin-bottom: 13px;
    }

    .panel-header h2 {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 8px;
        font-size: clamp(17px, 5vw, 20px) !important;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .panel-header h2>i {
        margin-top: 3px;
    }

    .panel-header p {
        font-size: 11.5px !important;
        line-height: 1.5;
    }

    .card-glass,
    .dashboard-card,
    .workflow-scan-panel,
    .workflow-form-panel,
    .operations-progress-card,
    .operations-purchase-card,
    .operations-report-card,
    .operations-user-card,
    .operations-tip-card,
    .operations-alert-card,
    .operations-backup-card,
    .operations-checklist,
    .stocktake-card,
    .requisition-queue-card,
    .req-card-item {
        min-width: 0;
        padding: 13px 12px !important;
        border-radius: 13px !important;
    }

    input:not([type='checkbox']):not([type='radio']),
    select,
    textarea,
    .input-text,
    .input-select {
        width: 100%;
        max-width: 100%;
        min-height: var(--tap-target);
        font-size: 16px !important;
    }

    textarea {
        line-height: 1.45;
    }

    .wms-form-grid-2,
    .wms-form-grid-3,
    .wms-form-grid-4,
    .form-row-2,
    .form-row-3,
    .form-row-2-1,
    .stats-grid,
    .metrics-grid {
        min-width: 0;
        gap: 10px !important;
    }

    .stats-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stat-card {
        min-width: 0;
        padding: 12px 10px !important;
    }

    .stat-card .stat-info h3 {
        font-size: clamp(19px, 7vw, 25px);
    }

    .top-header {
        padding: 9px 10px !important;
        border-radius: 13px;
    }

    .top-header__layout {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "brand actions" "clock actions" !important;
        column-gap: 7px !important;
        row-gap: 6px !important;
    }

    .top-header__brand,
    .header-search {
        min-width: 0;
    }

    .header-search h1 {
        max-width: clamp(108px, 35vw, 178px) !important;
        font-size: 13px !important;
    }

    .top-header__account-actions {
        gap: 5px !important;
    }

    .top-header__account-actions .header-account-action {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        font-size: 0 !important;
    }

    .top-header__account-actions .header-account-action>i {
        font-size: 15px !important;
    }

    .top-header__account-actions .header-account-action--logout::after {
        content: none !important;
    }

    .live-clock-widget {
        min-height: 26px;
        padding: 4px 7px;
        border-radius: 8px;
        font-size: 10px;
    }

    .mobile-bottom-nav {
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        height: var(--mobile-nav-height) !important;
        padding: 5px 6px !important;
        border-radius: 16px !important;
        gap: 3px;
    }

    .mobile-nav-btn {
        width: auto;
        min-width: var(--tap-target);
        height: 48px;
        min-height: 48px;
        flex: 1 1 0;
        padding: 0 4px !important;
        border-radius: 11px;
    }

    .mobile-nav-btn span {
        display: none !important;
    }

    .mobile-nav-btn i {
        margin: 0 !important;
        font-size: 19px !important;
    }

    .mobile-nav-btn.active {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-blue) 38%, transparent);
    }

    button.mobile-icon-button,
    button:has(> .btn-label-text),
    .btn-camera-trigger {
        width: var(--compact-action-size) !important;
        min-width: var(--compact-action-size) !important;
        height: var(--compact-action-size) !important;
        min-height: var(--compact-action-size) !important;
        flex: 0 0 var(--compact-action-size) !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 10px !important;
        font-size: 0 !important;
        white-space: nowrap;
    }

    button.mobile-icon-button>i,
    button:has(> .btn-label-text)>i,
    .btn-camera-trigger>i {
        margin: 0 !important;
        font-size: 16px !important;
    }

    button>.btn-label-text {
        display: none !important;
    }

    #panel-approvals td.text-center {
        min-width: 108px;
        gap: 6px !important;
    }

    #panel-approvals td.text-center .mobile-icon-button {
        display: inline-flex;
    }

    .requisition-queue-table .requisition-queue-actions {
        align-items: center;
        justify-content: flex-start !important;
    }

    .requisition-queue-table .requisition-queue-actions>button {
        flex-grow: 0 !important;
    }



    .swipe-pills-container,
    .category-filter-pills,
    .scroll-x-no-scrollbar,
    .operations-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .swipe-pills-container::-webkit-scrollbar,
    .category-filter-pills::-webkit-scrollbar,
    .scroll-x-no-scrollbar::-webkit-scrollbar,
    .operations-tabs::-webkit-scrollbar {
        display: none;
    }

    .swipe-pills-container>*,
    .category-filter-pills>*,
    .scroll-x-no-scrollbar>*,
    .operations-tabs>* {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }

    .photo-gallery-hero {
        padding: 14px !important;
        margin-bottom: 14px !important;
        border-radius: 13px !important;
    }

    .photo-gallery-hero>div {
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .photo-gallery-hero>div>div:first-child {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        font-size: 19px !important;
    }

    .photo-gallery-hero h2 {
        font-size: 16px !important;
        line-height: 1.35;
    }

    .photo-gallery-hero p {
        font-size: 11.5px !important;
        line-height: 1.5;
    }

    .photo-gallery-filters {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 11px !important;
        margin-bottom: 14px !important;
    }

    .photo-gallery-filters>div:first-child {
        display: flex !important;
        min-width: 0;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .photo-gallery-filters>div:first-child::-webkit-scrollbar {
        display: none;
    }

    .photo-gallery-filters>div:first-child>button {
        flex: 0 0 auto;
    }

    .photo-gallery-filters>div:last-child {
        width: 100%;
        min-width: 0 !important;
    }

    .photo-gallery-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .photo-gallery-grid>[role='button'] {
        border-radius: 13px !important;
    }

    .table-responsive {
        max-width: 100%;
        margin-top: 10px;
        overflow-x: auto !important;
        border-radius: 11px;
        overscroll-behavior-inline: contain;
    }

    .table:not(.requisition-queue-table):not(.stocktake-queue-table):not(.stocktake-report-table) {
        min-width: 620px;
    }

    .table th,
    .table td {
        padding: 9px 10px;
        font-size: 11.5px;
    }

    .modal-overlay.modal-overlay--open {
        align-items: center !important;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    }

    .modal-overlay.modal-overlay--open>.modal-card:not(.modal-card--image):not(.modal-card--document) {
        width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 15px !important;
    }

    .modal-header {
        min-height: 54px;
        padding: 12px 13px !important;
    }

    .modal-header h3 {
        min-width: 0;
        font-size: 14px !important;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .modal-body {
        padding: 13px !important;
    }

    .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 7px !important;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .modal-footer>button {
        width: 100%;
        min-width: 0;
        min-height: var(--tap-target);
    }

    .pod-preview {
        min-height: 108px;
    }

    .pod-preview__image {
        max-height: 220px !important;
    }
}

@media (max-width: 390px) {
    .main-content {
        padding-inline: 7px !important;
    }

    .top-header {
        padding-inline: 8px !important;
    }

    .header-search h1 {
        max-width: 106px !important;
    }

    .stats-grid,
    .metrics-grid {
        gap: 7px !important;
    }

    .stat-card {
        padding: 10px 8px !important;
    }

    .mobile-nav-btn {
        min-width: 40px;
        padding-inline: 2px !important;
    }

    .photo-gallery-hero h2 {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   Multi-Device Responsive System (PC, iPad / Tablet, Mobile)
   For History Ledger, KPI Cards, Stock Card & Quick Product Modals
   ========================================================================== */

/* Universal Scroll & Touch Rhythm */
.wms-scrollable {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.wms-scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.wms-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Tablet & iPad Specific (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .panel-header>div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .modal-card {
        max-width: 90% !important;
        width: 640px !important;
    }
}

/* Mobile Devices (Max Width 767px) */
@media (max-width: 767px) {

    /* Header Rhythm */
    .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .panel-header h2 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .panel-header p {
        font-size: 12px !important;
    }

    .panel-header>div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .panel-header>div:last-child>button {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    /* KPI Summary Cards Grid - 2x2 on Mobile */
    .card-glass>div[style*='repeat(auto-fit, minmax(210px, 1fr))'],
    div[style*='repeat(auto-fit, minmax(210px, 1fr))'] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Filter Grid - Stack 1-column on phone */
    div[style*='repeat(auto-fit, minmax(200px, 1fr))'] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Quick Date Preset Pill Bar - Horizontal Scroll */
    div[style*='ลัดช่วงเวลา'] {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px !important;
        scrollbar-width: none;
    }

    div[style*='ลัดช่วงเวลา']::-webkit-scrollbar {
        display: none;
    }

    /* View Mode Switcher Pills - Horizontal Scrollable */
    div[style*='1. บัญชีคุมรายการละเอียด'] {
        overflow-x: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    div[style*='1. บัญชีคุมรายการละเอียด']::-webkit-scrollbar {
        display: none;
    }

    div[style*='1. บัญชีคุมรายการละเอียด']>button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    /* Table Mobile Optimizations */
    .table {
        min-width: 680px !important;
    }

    .table th,
    .table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    /* Modal Form Inputs on Mobile */
    .modal-card {
        width: 100% !important;
        max-width: 98% !important;
        margin: 6px !important;
        max-height: 94dvh !important;
        border-radius: 14px !important;
    }

    .modal-body {
        padding: 12px 14px !important;
        max-height: calc(94dvh - 120px) !important;
        overflow-y: auto !important;
    }

    .modal-footer {
        padding: 10px 14px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .modal-footer>button {
        width: 100% !important;
        padding: 10px 6px !important;
    }
}

/* ============================================================
   Enhanced Universal Copy System Styling
   ============================================================ */
.truncate-copyable {
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 4px;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.truncate-copyable:hover {
    background: rgba(56, 189, 248, 0.12);
    color: var(--color-blue, #38bdf8);
}

.truncate-copyable:hover i {
    opacity: 1 !important;
    color: var(--color-blue, #38bdf8) !important;
    transform: scale(1.15);
}

.truncate-copyable.is-copied {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--color-green, #10b981) !important;
    animation: copy-pulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes copy-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   Phase 4: Core Inventory Workflows (Inbound, Outbound/Requisitions, Stocktake)
   User-Tailored Preferences:
   - Inbound: Single-flow continuous scan layout
   - Stocktake: Subtle minimalist monospace discrepancy digits
   - Requisitions & Approvals: Expandable detail cards with crisp item breakdown
   ========================================================================== */

/* 1. Inbound Panel — Single Flow Continuous Scan */
#panel-inbound .workflow-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100% !important;
}

#panel-inbound .workflow-scan-panel,
#panel-inbound .workflow-form-panel {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#panel-inbound .workflow-scan-panel:hover,
#panel-inbound .workflow-form-panel:hover {
    border-color: var(--border-color-hover);
}

#panel-inbound .inbound-queue-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 14px;
    border: 1px solid var(--border-color-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    margin-bottom: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#panel-inbound .inbound-queue-item:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--border-color);
}

#panel-inbound .inbound-queue-item-meta code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    padding: 2px 6px;
    border-radius: 4px;
}

#panel-inbound .inbound-queue-quantity-input {
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: center;
}

/* 2. Stocktake Panel — Subtle Text Discrepancy & Monospace Matrix */
.stocktake-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.stocktake-card {
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

.stocktake-queue-table,
.stocktake-report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.stocktake-queue-table th,
.stocktake-report-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.stocktake-queue-table td,
.stocktake-report-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color-subtle);
    color: var(--text-main);
    font-size: var(--text-sm);
    vertical-align: middle;
}

/* Subtle Text Discrepancy (Minimalist, no loud colors) */
.stocktake-diff-text,
.diff-positive,
.diff-negative,
.diff-neutral {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 4px;
}

.diff-positive {
    color: var(--color-green);
}

.diff-negative {
    color: var(--color-red);
}

.diff-neutral {
    color: var(--text-muted);
}

/* 3. Requisitions & Approvals — Expandable Detail Cards */
.requisition-queue-card,
.req-card-item {
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.requisition-queue-card:hover,
.req-card-item:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-card-hover);
}

.req-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-subtle);
}

.req-card-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 800;
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    padding: 3px 8px;
    border-radius: 4px;
}

.req-card-items-list {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

.req-card-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    background: var(--surface-soft);
    font-size: 13px;
}

.req-card-item-qty {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent);
}

.requisition-queue-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color-subtle);
}

/* ==========================================================================
   Phase 5: Catalog, Categories & Dashboard Analytics
   User-Tailored Preferences:
   - Dashboard: Modern stat cards with accent highlights & prominent digits
   - Products: Hybrid smart view (detailed table on desktop, cards on mobile)
   - Categories: Responsive category cards grid with badge counts
   ========================================================================== */

/* 1. Dashboard KPI Analytics */
.dashboard-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.dashboard-card,
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover,
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-card-hover);
}

/* Subtle colored accent top border for stat cards */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-blue);
}

.stat-card--inbound::before,
.stat-card--success::before {
    background: var(--color-green);
}

.stat-card--warning::before,
.stat-card--low-stock::before {
    background: var(--color-orange);
}

.stat-card--danger::before,
.stat-card--pending::before {
    background: var(--color-red);
}

.stat-card--purple::before {
    background: var(--color-purple);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 12px;
}

.stat-label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--color-blue);
    font-size: 16px;
}

.stat-value {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.stat-meta {
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* 2. Products Catalog — Hybrid Smart View & iPad Ergonomics */
#panel-products .product-table-wrap {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#panel-products table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}

#panel-products th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

#panel-products td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color-subtle);
    vertical-align: middle;
    font-size: var(--text-sm);
}

#panel-products .product-thumbnail {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-soft);
    border: 1px solid var(--border-color-subtle);
    flex-shrink: 0;
}

#panel-products .product-sku-badge,
#panel-products .sku-code {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

#panel-products .product-stock-qty {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
}

/* Stock Quantity & Unit Inline Alignment (e.g. '6 ขวด' always on same line) */
#panel-products td.text-right,
#panel-products td:nth-child(6) {
    white-space: nowrap !important;
    text-align: right !important;
}

#panel-products td.text-right strong,
#panel-products td:nth-child(6) strong {
    display: inline !important;
    margin-right: 4px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

#panel-products td.text-right span,
#panel-products td:nth-child(6) span {
    white-space: nowrap !important;
}

/* Unified Barcode Pill & Quick Print (User Choice A2) */
#panel-products .barcode-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-blue);
    background: var(--surface-soft);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color-subtle);
    white-space: nowrap;
}

#panel-products .uom-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-soft);
    padding: 2px 6px;
    border-radius: 4px;
    margin-inline: 4px;
    white-space: nowrap;
}

/* Action Buttons — Clean Horizontal Icons (User Choice A1: Zero vertical text wrap) */
#panel-products td:last-child {
    white-space: nowrap;
    text-align: right;
}

#panel-products td:last-child>div,
#panel-products .actions-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

#panel-products td:last-child button,
#panel-products td:last-child .btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

#panel-products td:last-child button .btn-label-text {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
}

/* iPad & Tablet Ergonomics (641px - 1180px) */
@media (min-width: 641px) and (max-width: 1180px) {
    #panel-products .product-filters-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #panel-products td {
        padding: 10px 12px;
    }

    #panel-products td:last-child button {
        padding: 6px 10px !important;
    }
}

/* 3. Category Management — Category Cards Grid */
#panel-categories .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-card-hover);
}

.category-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.category-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.category-card-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--color-blue);
    font-size: 11px;
    font-weight: 800;
}

/* ==========================================================================
   Phase 6: Supporting Modules, Barcode Generator, Photo Gallery & Settings
   User-Tailored Preferences:
   - History: Comprehensive Audit Table with transaction type badges
   - Settings: Tabbed Modern Settings with 3-tab layout
   - Photo Gallery: Compact Thumbnail Strip layout
   - Barcode Generator: Clean preview canvas with download/print controls
   ========================================================================== */

/* 1. Transaction History Audit Ledger */
#panel-history .history-table-wrap {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

.history-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.history-tx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
}

.history-tx-badge--in {
    background: var(--color-green-subtle);
    color: var(--color-green);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
}

.history-tx-badge--out {
    background: var(--color-red-subtle);
    color: var(--color-red);
    border: 1px solid color-mix(in srgb, var(--color-red) 30%, transparent);
}

.history-tx-badge--adjust {
    background: var(--color-blue-subtle);
    color: var(--color-blue);
    border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.history-qty-plus {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-green);
}

.history-qty-minus {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-red);
}

.history-timestamp {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* 2. Dynamic Whitelabel Settings */
.settings-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-5);
}

.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.settings-tab-btn:hover {
    color: var(--text-main);
    background: var(--surface-soft);
}

.settings-tab-btn.active {
    color: var(--color-blue);
    background: var(--color-blue-subtle);
    border-color: color-mix(in srgb, var(--color-blue) 30%, transparent);
}

.settings-card {
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: var(--space-4);
}

.settings-section-title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color-subtle);
}

/* 3. Photo Gallery — Compact Thumbnail Strip */
#panel-photos .photo-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 10px !important;
    margin-top: var(--space-4);
}

#panel-photos .photo-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#panel-photos .photo-card:hover {
    transform: scale(1.04);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-md);
}

#panel-photos .photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. Barcode / QR Generator */
#panel-barcode .barcode-generator-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

#panel-barcode .barcode-canvas-wrap {
    padding: 16px;
    background: #ffffff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin: 16px 0;
}

/* ==========================================================================
   Universal Compact & Multi-Device Responsive Refinement
   User-Tailored Preferences:
   - Smart Truncation + Tooltips (Prevents long text from distorting layouts)
   - Standard Comfort Spacing (Comfortable breathing room with zero body overflow)
   - Responsive Mobile Cards (Vertical stacked cards on screens <= 640px)
   ========================================================================== */

/* 1. Universal Smart Truncation & Non-Distortion Guards */
.truncate-smart,
.text-truncate-smart {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table th,
.table td {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table td:hover {
    overflow: visible;
}

/* Guard all flex and grid children from expanding uncontrollably */
.app-container,
.main-content,
.panel-container,
.page-panel,
.dashboard-grid,
.stats-grid,
.workflow-grid,
.stocktake-grid,
.category-grid,
.photo-gallery-grid {
    min-width: 0;
    max-width: 100%;
}

.dashboard-card,
.stat-card,
.category-card,
.workflow-scan-panel,
.workflow-form-panel,
.stocktake-card,
.requisition-queue-card,
.req-card-item {
    min-width: 0;
    word-break: break-word;
}

/* 2. Device-Specific Responsiveness (Desktop / Tablet / Mobile) */

/* Large Desktop (>= 1200px) */
@media (min-width: 1200px) {

    .panel-container,
    .page-panel {
        max-width: 1520px;
        padding-inline: var(--space-4);
    }
}

/* Tablet & Medium Screens (641px - 1180px) */
@media (min-width: 641px) and (max-width: 1180px) {
    .main-content {
        padding: 16px 20px calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .stats-grid,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-3);
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile Handheld Screens (<= 640px) */
@media (max-width: 640px) {
    .main-content {
        padding: 12px 10px calc(var(--mobile-nav-height) + 24px + env(safe-area-inset-bottom)) !important;
    }

    .stats-grid,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .stat-card,
    .dashboard-card {
        padding: 14px 16px;
    }

    .stat-value {
        font-size: 24px;
    }

    /* Transform regular data tables into clean readable vertical cards on small screens */
    .table-responsive {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .table.table-mobile-cards thead {
        display: none;
    }

    .table.table-mobile-cards tbody,
    .table.table-mobile-cards tr,
    .table.table-mobile-cards td {
        display: block;
        width: 100%;
    }

    .table.table-mobile-cards tr {
        margin-bottom: 12px;
        padding: 12px 14px;
        border-radius: var(--radius-md);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-xs);
    }

    .table.table-mobile-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid var(--border-color-subtle);
        font-size: 13px;
        max-width: 100%;
        white-space: normal;
    }

    .table.table-mobile-cards td:last-child {
        border-bottom: none;
        padding-top: 10px;
        justify-content: flex-end;
    }

    .table.table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 12px;
        flex-shrink: 0;
    }

    /* Minimum touch targets on all interactive controls */
    button,
    .btn,
    .nav-btn,
    .mobile-nav-btn,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    /* Products Catalog: Modern Mobile App List View (SaaS Mobile App Style) */
    #panel-products .product-table-wrap {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #panel-products table {
        min-width: 100% !important;
        display: block !important;
        border: none !important;
    }

    #panel-products thead {
        display: none !important;
    }

    #panel-products tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Modern Slim App Row Card */
    #panel-products tbody tr {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "thumb info stock"
            "thumb meta actions" !important;
        align-items: center !important;
        gap: 4px 12px !important;
        padding: 10px 14px !important;
        border-radius: var(--radius-md) !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-xs) !important;
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    }

    #panel-products tbody tr:active {
        transform: scale(0.99) !important;
        background: var(--surface-soft) !important;
    }

    /* Thumbnail (Left side) */
    #panel-products td:nth-child(1) {
        grid-area: thumb !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
        width: 48px !important;
        height: 48px !important;
    }

    #panel-products .product-thumbnail {
        width: 48px !important;
        height: 48px !important;
        border-radius: var(--radius-sm) !important;
        object-fit: cover !important;
        border: 1px solid var(--border-color-subtle) !important;
    }

    /* SKU & Title (Center Top) */
    #panel-products td:nth-child(2) {
        display: none !important;
    }

    #panel-products td:nth-child(3) {
        grid-area: info !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
        min-width: 0 !important;
        font-family: var(--font-heading) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Category & Barcode Meta (Center Bottom) */
    #panel-products td:nth-child(4) {
        grid-area: meta !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #panel-products td:nth-child(5) {
        display: none !important;
    }

    /* Stock Qty (Right Top: Prominent Accent Pill) */
    #panel-products td:nth-child(6) {
        grid-area: stock !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
        white-space: nowrap !important;
    }

    #panel-products .product-stock-qty {
        font-family: var(--font-mono) !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: var(--color-blue) !important;
        background: var(--color-blue-subtle) !important;
        padding: 2px 7px !important;
        border-radius: var(--radius-xs) !important;
    }

    /* Actions (Right Bottom: Quick Icons) */
    #panel-products td:nth-child(7),
    #panel-products td:last-child {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
    }

    #panel-products td:last-child button {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        border-radius: var(--radius-xs) !important;
        touch-action: manipulation !important;
    }

    #panel-products td:last-child button .btn-label-text {
        display: none !important;
    }

    /* ==========================================================================
       Requisitions Queue Mobile Ergonomics (Approvals Panel)
       User Choices:
       - Minimal Clean Card (A1)
       - Horizontal Icon Action Group (A2)
       - Unified Requester & Department (A3)
       ========================================================================== */
    .requisition-queue-table-wrap {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .requisition-queue-table {
        min-width: 100% !important;
        display: block !important;
        border: none !important;
    }

    .requisition-queue-table thead {
        display: none !important;
    }

    .requisition-queue-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .requisition-queue-table .requisition-queue-row {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        border-radius: var(--radius-md) !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-card) !important;
        gap: 8px !important;
    }

    .requisition-queue-table .requisition-queue-row td {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 0 !important;
        border-bottom: none !important;
        /* Minimal clean: no cluttered thin divider lines */
        font-size: 13px !important;
        color: var(--text-main) !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: right !important;
    }

    .requisition-queue-table .requisition-queue-row td::before {
        content: attr(data-label) !important;
        color: var(--text-muted) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
        text-align: left !important;
    }

    /* Requester & Department Unified Right-Aligned */
    .requisition-queue-table .requisition-queue-row td[data-label="ผู้ขอเบิก"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: right !important;
    }

    .requisition-queue-table .requisition-queue-row td[data-label="ผู้ขอเบิก"] strong {
        display: inline !important;
        margin-right: 4px !important;
        font-weight: 700 !important;
    }

    .requisition-queue-department {
        display: inline-block !important;
        padding: 2px 8px !important;
        border-radius: 6px !important;
        background: var(--surface-soft) !important;
        color: var(--color-blue) !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        border: 1px solid var(--border-color-subtle) !important;
    }

    .requisition-queue-table .requisition-queue-items {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 8px !important;
        border-top: 1px dashed var(--border-color-subtle) !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        color: var(--text-muted) !important;
        text-align: right !important;
    }

    /* Horizontal Action & Status Group (User Choice A2: 44px touch targets) */
    .requisition-queue-table .requisition-queue-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px !important;
        margin-top: 10px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--border-color-subtle) !important;
        width: 100% !important;
    }

    .requisition-queue-table .requisition-queue-actions::before {
        display: none !important;
        /* Remove legacy 'การจัดการ' label text */
    }

    .requisition-queue-table .requisition-queue-actions>button,
    .requisition-queue-table .requisition-queue-actions>.status-badge {
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: var(--radius-sm) !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
        padding: 0 12px !important;
    }

    .requisition-queue-table .requisition-queue-actions>button.btn-secondary {
        flex: 0 0 52px !important;
        max-width: 52px !important;
        padding: 0 !important;
    }

    .requisition-queue-table .requisition-queue-actions>button.btn-success,
    .requisition-queue-table .requisition-queue-actions>button.btn-danger,
    .requisition-queue-table .requisition-queue-actions>.status-badge {
        flex: 1 !important;
    }

    .requisition-queue-table .requisition-queue-actions>button i,
    .requisition-queue-table .requisition-queue-actions>.status-badge i {
        font-size: 15px !important;
    }

    /* ==========================================================================
       Requisition Details Modal Mobile Refinements (Document Preview)
       User Choices:
       - Compact 2x2 Grid (A1)
       - Clean Scrollable Table (A2)
       - Full-Width Stacked Action Buttons (A3)
       ========================================================================== */
    .modal-card--document {
        width: 100% !important;
        max-width: 96% !important;
        max-height: 92vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-card--document .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px !important;
    }

    /* User Choice A1: Compact 2x2 Grid for Requester Info Boxes */
    .requisition-preview__meta {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 12px 0 !important;
    }

    .requisition-preview__meta>div {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        background: var(--surface-soft) !important;
        border: 1px solid var(--border-color-subtle) !important;
    }

    .requisition-preview__meta dt {
        font-size: 10px !important;
        color: var(--text-muted) !important;
        margin-bottom: 2px !important;
    }

    .requisition-preview__meta dd {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* User Choice A2: Clean Scrollable Table inside Modal */
    .requisition-preview__table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        margin-top: 10px !important;
    }

    .requisition-preview__table {
        width: 100% !important;
        min-width: 100% !important;
        font-size: 12px !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
    }

    .requisition-preview__table th,
    .requisition-preview__table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.45 !important;
    }

    .requisition-preview__table td:last-child {
        text-align: right !important;
        font-weight: 700 !important;
        color: var(--color-green) !important;
        white-space: nowrap !important;
    }

    /* User Choice A3: Full-Width Stacked Action Buttons in Modal Footer */
    .modal-card--document .modal-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-color) !important;
        flex-shrink: 0 !important;
    }

    .modal-card--document .modal-footer button,
    .modal-card--document .modal-footer .btn-primary,
    .modal-card--document .modal-footer .btn-secondary,
    .modal-card--document .modal-footer .btn-success,
    .modal-card--document .modal-footer .btn-danger,
    .modal-card--document .modal-footer .requisition-cancel-approved-button {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .modal-card--document .modal-footer .btn-label-text {
        display: inline !important;
        visibility: visible !important;
    }

    .modal-card--document .modal-footer .btn-secondary {
        order: 10 !important;
        /* Always position 'ปิดหน้าต่าง' cleanly at the bottom */
    }

    /* ==========================================================================
       Proof of Delivery (POD) Dispatch Modal — Clean & Minimal Mobile Design
       User Goal: สะอาด เรียบง่าย สบายตา ใช้งานง่าย
       ========================================================================== */
    .requisition-dispatch-modal {
        width: 100% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: var(--radius-lg) !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-modal) !important;
    }

    .requisition-dispatch-modal .modal-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--border-color-subtle) !important;
    }

    .requisition-dispatch-modal .modal-header h3 {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .requisition-dispatch-modal .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Minimal Top Metadata */
    .requisition-dispatch-modal .modal-body>div:nth-child(1),
    .requisition-dispatch-modal .modal-body>div:nth-child(2) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        border-radius: var(--radius-sm) !important;
        background: var(--surface-soft) !important;
        border: 1px solid var(--border-color-subtle) !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(1) label,
    .requisition-dispatch-modal .modal-body>div:nth-child(2) label {
        margin: 0 !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
        font-weight: 600 !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(1) code {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: var(--color-blue) !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(2) span {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--text-main) !important;
        text-align: right !important;
    }

    /* Clean Checklist Container */
    .requisition-dispatch-modal .modal-body>div:nth-child(3) {
        background: transparent !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-md) !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(3) strong {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(3) button.btn-secondary {
        white-space: nowrap !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        background: var(--color-blue-subtle) !important;
        color: var(--color-blue) !important;
        border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent) !important;
        cursor: pointer !important;
    }

    /* Barcode Scan Control Row — Spacious Input with 2 Icon Buttons */
    .requisition-dispatch-modal .dispatch-scan-controls {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 10px 0 !important;
        width: 100% !important;
    }

    .requisition-dispatch-modal .dispatch-scan-controls input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
        font-size: 13px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
    }

    .requisition-dispatch-modal .dispatch-scan-controls button.btn-primary,
    .requisition-dispatch-modal .dispatch-scan-controls button.btn-accent {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .requisition-dispatch-modal .dispatch-scan-controls button.btn-primary {
        background: var(--color-blue) !important;
        color: #ffffff !important;
        border: none !important;
    }

    .requisition-dispatch-modal .dispatch-scan-controls button.btn-accent {
        background: rgba(168, 85, 247, 0.15) !important;
        border: 1px solid var(--color-purple) !important;
        color: var(--color-purple) !important;
    }

    .requisition-dispatch-modal .dispatch-scan-controls button span {
        display: none !important;
    }

    /* Checklist Item Rows */
    .requisition-dispatch-modal .modal-body>div:nth-child(3)>div:last-child {
        gap: 6px !important;
        max-height: 160px !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(3)>div:last-child>div {
        border-radius: 8px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* Clean Single-Field Officer Input */
    .requisition-dispatch-modal .modal-body>div:nth-child(4) {
        margin: 0 !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(4) label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        margin-bottom: 4px !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(4) input {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
        font-size: 13px !important;
        padding: 0 12px !important;
    }

    /* Clean POD Camera Action Button (Targeted specifically) */
    .requisition-dispatch-modal .modal-body>div:nth-child(5) {
        margin: 0 !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(5) label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        margin-bottom: 4px !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(5) button {
        width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        border: 1.5px solid var(--color-green) !important;
        background: var(--color-green-subtle) !important;
        color: var(--color-green) !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        margin-bottom: 2px !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(5) button:active {
        transform: scale(0.99) !important;
        background: rgba(16, 185, 129, 0.2) !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(5) button i {
        font-size: 16px !important;
        color: var(--color-green) !important;
    }

    .requisition-dispatch-modal .modal-body>div:nth-child(5) p {
        font-size: 10px !important;
        color: var(--text-muted) !important;
        margin-top: 2px !important;
        text-align: center !important;
    }

    /* Modal Footer Buttons */
    .requisition-dispatch-modal .modal-footer {
        display: flex !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        border-top: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
        flex-shrink: 0 !important;
    }

    .requisition-dispatch-modal .modal-footer button {
        flex: 1 !important;
        min-height: 44px !important;
        height: 44px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }
}

/* ==========================================================================
   High-Performance Rendering Optimizations (Zero-Lag & GPU-Accelerated)
   ========================================================================== */

/* 1. CSS Content Visibility (Virtualize off-screen elements in long tables & grids) */
.history-table-wrap,
.product-table-wrap,
.stocktake-table-wrap,
#panel-history .history-table-wrap tbody tr,
#panel-products .product-table-wrap tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: 0 48px;
}

/* 2. Hardware Compositing Hints for Fixed Shell Elements */
.top-header,
.mobile-bottom-nav,
.modal-overlay,
.toast-notification {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* 3. Smooth scrolling without layout thrashing */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Product Summary & Stock Card Horizontal Metrics Grid (Mobile & Desktop)
   ========================================================================== */

.product-summary-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.45) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
    margin-bottom: 12px !important;
}

.product-summary-metrics-grid>div,
.product-summary-metrics-grid .metric-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 8px 6px !important;
    min-width: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-summary-metrics-grid>div:nth-child(1),
.product-summary-metrics-grid .metric-pill-in {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.product-summary-metrics-grid>div:nth-child(2),
.product-summary-metrics-grid .metric-pill-out {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.product-summary-metrics-grid>div:nth-child(3),
.product-summary-metrics-grid .metric-pill-net {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.product-summary-metrics-grid>div>div,
.product-summary-metrics-grid .metric-pill>div {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.product-summary-metrics-grid>div>strong,
.product-summary-metrics-grid .metric-pill>strong {
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
}

.product-summary-metrics-grid>div>span,
.product-summary-metrics-grid .metric-pill>span {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    margin-top: 1px !important;
}

/* Stock Card Horizontal Metrics Strip */
.stock-card-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.stock-card-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
}

.stock-card-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    text-align: center !important;
}

.stock-card-metrics-grid>div,
.stock-card-metrics-grid .metric-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 8px 6px !important;
    min-width: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stock-card-metrics-grid>div:nth-child(1),
.stock-card-metrics-grid .metric-pill-in {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.stock-card-metrics-grid>div:nth-child(2),
.stock-card-metrics-grid .metric-pill-out {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.stock-card-metrics-grid>div:nth-child(3),
.stock-card-metrics-grid .metric-pill-net {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.stock-card-metrics-grid>div>div,
.stock-card-metrics-grid .metric-pill>div {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.stock-card-metrics-grid>div>strong,
.stock-card-metrics-grid .metric-pill>strong {
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
}

.stock-card-metrics-grid>div>span,
.stock-card-metrics-grid .metric-pill>span {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    margin-top: 1px !important;
}

/* ==========================================================================
   LIGHT MODE: Crystal Clear, High-Contrast Typography & Pristine Cards
   ========================================================================== */
body.light-theme .product-summary-metrics-grid,
body.light-theme .stock-card-metrics-grid {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(1),
body.light-theme .stock-card-metrics-grid>div:nth-child(1),
body.light-theme .product-summary-metrics-grid .metric-pill-in,
body.light-theme .stock-card-metrics-grid .metric-pill-in {
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.08) !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(1)>div,
body.light-theme .stock-card-metrics-grid>div:nth-child(1)>div,
body.light-theme .product-summary-metrics-grid .metric-pill-in>div,
body.light-theme .stock-card-metrics-grid .metric-pill-in>div {
    color: #15803d !important;
    font-weight: 800 !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(1)>strong,
body.light-theme .stock-card-metrics-grid>div:nth-child(1)>strong,
body.light-theme .product-summary-metrics-grid .metric-pill-in>strong,
body.light-theme .stock-card-metrics-grid .metric-pill-in>strong {
    color: #166534 !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(1)>span,
body.light-theme .stock-card-metrics-grid>div:nth-child(1)>span,
body.light-theme .product-summary-metrics-grid .metric-pill-in>span,
body.light-theme .stock-card-metrics-grid .metric-pill-in>span {
    color: #15803d !important;
    font-weight: 700 !important;
    opacity: 0.95 !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(2),
body.light-theme .stock-card-metrics-grid>div:nth-child(2),
body.light-theme .product-summary-metrics-grid .metric-pill-out,
body.light-theme .stock-card-metrics-grid .metric-pill-out {
    background: #ffffff !important;
    border: 1.5px solid #fca5a5 !important;
    box-shadow: 0 1px 4px rgba(190, 18, 60, 0.08) !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(2)>div,
body.light-theme .stock-card-metrics-grid>div:nth-child(2)>div,
body.light-theme .product-summary-metrics-grid .metric-pill-out>div,
body.light-theme .stock-card-metrics-grid .metric-pill-out>div {
    color: #be123c !important;
    font-weight: 800 !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(2)>strong,
body.light-theme .stock-card-metrics-grid>div:nth-child(2)>strong,
body.light-theme .product-summary-metrics-grid .metric-pill-out>strong,
body.light-theme .stock-card-metrics-grid .metric-pill-out>strong {
    color: #9f1239 !important;
    font-weight: 900 !important;
    font-size: 15px !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(2)>span,
body.light-theme .stock-card-metrics-grid>div:nth-child(2)>span,
body.light-theme .product-summary-metrics-grid .metric-pill-out>span,
body.light-theme .stock-card-metrics-grid .metric-pill-out>span {
    color: #be123c !important;
    font-weight: 700 !important;
    opacity: 0.95 !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(3),
body.light-theme .stock-card-metrics-grid>div:nth-child(3),
body.light-theme .product-summary-metrics-grid .metric-pill-net,
body.light-theme .stock-card-metrics-grid .metric-pill-net {
    background: #ffffff !important;
    border: 1.5px solid #7dd3fc !important;
    box-shadow: 0 1px 4px rgba(3, 105, 161, 0.08) !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(3)>div,
body.light-theme .stock-card-metrics-grid>div:nth-child(3)>div,
body.light-theme .product-summary-metrics-grid .metric-pill-net>div,
body.light-theme .stock-card-metrics-grid .metric-pill-net>div {
    color: #0369a1 !important;
    font-weight: 800 !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(3)>strong,
body.light-theme .stock-card-metrics-grid>div:nth-child(3)>strong,
body.light-theme .product-summary-metrics-grid .metric-pill-net>strong,
body.light-theme .stock-card-metrics-grid .metric-pill-net>strong {
    font-weight: 900 !important;
    font-size: 15px !important;
}

body.light-theme .product-summary-metrics-grid>div:nth-child(3)>span,
body.light-theme .stock-card-metrics-grid>div:nth-child(3)>span,
body.light-theme .product-summary-metrics-grid .metric-pill-net>span,
body.light-theme .stock-card-metrics-grid .metric-pill-net>span {
    color: #0369a1 !important;
    font-weight: 700 !important;
    opacity: 0.95 !important;
}

@media (max-width: 640px) {
    .product-summary-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 6px !important;
    }

    .product-summary-metrics-grid>div>div {
        font-size: 9px !important;
    }

    .product-summary-metrics-grid>div>strong {
        font-size: 12px !important;
    }

    .stock-card-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 8px 4px !important;
    }

    .stock-card-metrics-grid>div>div {
        font-size: 9px !important;
    }

    .stock-card-metrics-grid>div>strong {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   Quick Date Preset Horizontal Scroll Strip & Collapsible Filters
   ========================================================================== */

.quick-date-scroll-strip {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 2px !important;
}

.quick-date-scroll-strip::-webkit-scrollbar {
    display: none !important;
}

.quick-date-scroll-strip .date-chip {
    flex-shrink: 0 !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.quick-date-scroll-strip .date-chip:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

.quick-date-scroll-strip .date-chip.active {
    background: var(--color-blue, #38bdf8) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    border-color: var(--color-blue, #38bdf8) !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3) !important;
}

.history-search-main-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.history-filter-drawer {
    animation: fadeInSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Filmstrip Universal Theme (Full Dark / Light Mode Support & Mobile Optimized)
   ========================================================================== */

.filmstrip-roll-card.minimal {
    background: var(--bg-card, rgba(19, 27, 46, 0.95)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--text-main, #f8fafc) !important;
    text-align: left !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.light-theme .filmstrip-roll-card.minimal {
    background: #ffffff !important;
    border: 1px solid rgba(71, 85, 105, 0.18) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    color: #1e293b !important;
}

.filmstrip-roll-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    padding-bottom: 12px !important;
}

body.light-theme .filmstrip-roll-header {
    border-bottom-color: rgba(71, 85, 105, 0.12) !important;
}

.filmstrip-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.3)) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: var(--color-blue, #38bdf8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

body.light-theme .filmstrip-avatar {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}

.filmstrip-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.light-theme .filmstrip-toolbar {
    background: #f8fafc !important;
    border-color: rgba(71, 85, 105, 0.15) !important;
}

.film-strip-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.film-frame-minimal {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

body.light-theme .film-frame-minimal {
    background: #ffffff !important;
    border: 1px solid rgba(71, 85, 105, 0.18) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.film-frame-minimal:hover {
    border-color: var(--color-blue, #38bdf8) !important;
}

body.light-theme .film-frame-minimal:hover {
    border-color: #0284c7 !important;
}

.filmstrip-item-tag {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.light-theme .filmstrip-item-tag {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Edge-to-Edge Full Width for Requester Filmstrip on all devices */
#panel-requester-filmstrip {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#panel-requester-filmstrip .card-glass {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.filmstrip-roll-card.minimal {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 992px) {

    .main-content:has(#panel-requester-filmstrip.active),
    body.requester-mode .main-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #panel-requester-filmstrip {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .filmstrip-roll-card.minimal {
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }

    .filmstrip-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 10px !important;
    }

    .filmstrip-toolbar>div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .filmstrip-toolbar>div>button {
        width: 100% !important;
        justify-content: center !important;
    }

    .film-strip-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .film-frame-minimal {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
}

/* Quick Status Filter Chips for Filmstrip Panel */
.filmstrip-status-chips {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 6px 0 2px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.filmstrip-filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-muted, #94a3b8) !important;
    transition: all 0.2s ease !important;
}

.filmstrip-filter-chip:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-main, #f8fafc) !important;
}

.filmstrip-filter-chip.active {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.35) !important;
}

.filmstrip-filter-chip.chip-warning.active {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.filmstrip-filter-chip.chip-success.active {
    background: linear-gradient(135deg, #059669, #047857) !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.filmstrip-filter-chip.chip-info.active {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    border-color: #14b8a6 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35) !important;
}

.filmstrip-filter-chip.chip-danger.active {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
}

.chip-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: inherit !important;
}

body.light-theme .filmstrip-filter-chip {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

body.light-theme .filmstrip-filter-chip:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

body.light-theme .filmstrip-filter-chip.active {
    color: #ffffff !important;
}

body.light-theme .chip-badge {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Accordion Expand / Collapse Buttons */
.filmstrip-expand-btn {
    width: 100% !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px dashed rgba(56, 189, 248, 0.35) !important;
    color: var(--color-blue, #38bdf8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.filmstrip-expand-btn:hover {
    background: rgba(56, 189, 248, 0.16) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    transform: translateY(-1px) !important;
}

body.light-theme .filmstrip-expand-btn {
    background: #e0f2fe !important;
    border: 1px dashed #0284c7 !important;
    color: #0369a1 !important;
}

body.light-theme .filmstrip-expand-btn:hover {
    background: #bae6fd !important;
}

.accordion-indicator-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    color: var(--color-blue, #38bdf8) !important;
    flex-shrink: 0 !important;
}

body.light-theme .accordion-indicator-btn {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0369a1 !important;
}

/* Filmstrip Search & Filter Bar (Balanced Single-Row / Clean Mobile 2-Row) */
.filmstrip-filter-bar {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.filmstrip-filter-bar .search-box {
    flex: 1 1 auto !important;
    min-width: 180px !important;
    height: 42px !important;
}

.filmstrip-filter-bar .search-box input {
    height: 100% !important;
    font-size: 13px !important;
}

.filmstrip-filter-bar .dept-select {
    flex: 0 0 220px !important;
    width: 220px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

.filmstrip-filter-bar .btn-refresh {
    flex: 0 0 auto !important;
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .filmstrip-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .filmstrip-filter-bar .search-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    .filmstrip-filter-bar .dept-select {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* ==========================================================================
   SETTINGS PANEL REDESIGN (PC, iPad, Mobile)
   ========================================================================== */
    .settings-panel-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 90px !important;
    }

    /* ==========================================================================
   SETTINGS PANEL - UNIFIED MODERN CAPSULE & CENTERED CARDS (PC, IPAD & MOBILE)
   ========================================================================== */

    /* 1. Master Container (Centered, Max-Width 1080px for perfect eye balance) */
    .settings-unified-container {
        width: 100% !important;
        max-width: 1080px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        padding: 4px 0 32px 0 !important;
    }

    /* 2. Top Horizontal Capsule Bar */
    .settings-capsule-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        background: var(--bg-card, rgba(15, 23, 42, 0.65)) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
        border-radius: 16px !important;
        padding: 8px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    }

    body.light-theme .settings-capsule-nav {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    }

    .settings-capsule-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 18px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        color: var(--text-muted, #94a3b8) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap !important;
        outline: none !important;
        user-select: none !important;
        box-sizing: border-box !important;
    }

    .settings-capsule-btn:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--text-main, #f8fafc) !important;
        transform: translateY(-1px) !important;
    }

    .settings-capsule-btn.active {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border-color: rgba(56, 189, 248, 0.5) !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
        transform: translateY(-1px) !important;
    }

    body.light-theme .settings-capsule-btn {
        color: #475569 !important;
    }

    body.light-theme .settings-capsule-btn:hover {
        background: #f1f5f9 !important;
        color: #0f172a !important;
    }

    body.light-theme .settings-capsule-btn.active {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
    }

    /* 3. Main Focused Content Card */
    .settings-section-card {
        background: var(--bg-card, rgba(15, 23, 42, 0.75)) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
        border-radius: 18px !important;
        padding: 26px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.light-theme .settings-section-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    }

    .settings-section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-bottom: 14px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .settings-section-header h3 {
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: var(--text-main, #f8fafc) !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .settings-section-header p {
        margin: 4px 0 0 0 !important;
        font-size: 12px !important;
        color: var(--text-muted, #94a3b8) !important;
    }

    body.light-theme .settings-section-header h3 {
        color: #0f172a !important;
    }

    /* 4. Strict Horizontal Item Rows (No Wrapping) */
    .settings-item-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        transition: border-color 0.15s ease !important;
    }

    body.light-theme .settings-item-row {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }

    .settings-item-row:hover {
        border-color: rgba(56, 189, 248, 0.35) !important;
    }

    .settings-item-row .emoji-input,
    .settings-item-row input.settings-input-emoji {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        text-align: center !important;
        font-size: 16px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        border-radius: 8px !important;
    }

    .settings-item-row .dept-input,
    .settings-item-row input.settings-input-dept {
        width: 160px !important;
        min-width: 130px !important;
        max-width: 200px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    .settings-item-row .url-input,
    .settings-item-row .name-input,
    .settings-item-row input.settings-input-flex {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 120px !important;
        height: 42px !important;
        border-radius: 8px !important;
    }

    .settings-item-row .btn-delete-row {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 8px !important;
        color: #f43f5e !important;
        border: 1px solid rgba(244, 63, 94, 0.3) !important;
        background: rgba(244, 63, 94, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    .settings-item-row .btn-delete-row:hover {
        background: rgba(244, 63, 94, 0.25) !important;
        border-color: #f43f5e !important;
        transform: scale(1.04) !important;
    }

    /* Feature Toggle Row */
    .settings-toggle-row {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        user-select: none !important;
    }

    .settings-toggle-row:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(56, 189, 248, 0.25) !important;
    }

    body.light-theme .settings-toggle-row {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }

    body.light-theme .settings-toggle-row:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }

    /* 5. Mobile & Tablet Responsiveness */
    @media (max-width: 860px) {
        .settings-capsule-nav {
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            padding: 6px !important;
            border-radius: 12px !important;
            scrollbar-width: none !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .settings-capsule-nav::-webkit-scrollbar {
            display: none !important;
        }

        .settings-capsule-btn {
            padding: 9px 14px !important;
            font-size: 12px !important;
            flex-shrink: 0 !important;
        }

        .settings-section-card {
            padding: 16px !important;
        }
    }

    /* ==========================================================================
   PC & DESKTOP WIDESCREEN HARMONIZATION (CLEAN SYSTEMATIC GRID)
   ========================================================================== */
    @media (min-width: 1024px) {

        /* 1. Global Desktop Container & Panels */
        .main-content {
            max-width: 1560px !important;
            margin: 0 auto !important;
            padding: 24px 32px 60px 32px !important;
            box-sizing: border-box !important;
        }

        .page-panel {
            max-width: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 2. Standardized Desktop Stats & Metric Cards (4 Columns) */
        .stats-grid,
        .metrics-grid,
        .analytics-stats-grid,
        .dashboard-grid {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 18px !important;
            margin-bottom: 24px !important;
        }

        /* 3. Standardized Desktop 3-Column Grids (Requisitions, Queue, Filmstrip) */
        .film-strip-grid,
        .requisitions-grid,
        .requisition-queue-grid,
        .queue-grid {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 18px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 4. Standardized Desktop 4-Column Product Catalog Grid */
        .product-catalog-grid,
        .products-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
            gap: 18px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 5. Standardized Desktop 2-Column Settings & Operations Grids */
        .settings-grid-layout,
        .two-col-grid,
        .grid-2 {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 20px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 6. Desktop Card Glass Standardization */
        .card-glass {
            border-radius: 16px !important;
            padding: 20px 24px !important;
            box-sizing: border-box !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
        }

        /* 7. Desktop Table Refinements */
        .table-responsive {
            border-radius: 12px !important;
            overflow: hidden !important;
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
        }

        .table th {
            padding: 12px 16px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
        }

        .table td {
            padding: 12px 16px !important;
            font-size: 13px !important;
        }

        /* 8. Desktop Control Elements (Inputs, Selects, Buttons) */
        .search-box,
        .input-text,
        .input-select {
            height: 42px !important;
            border-radius: 10px !important;
            font-size: 13px !important;
        }

        .btn-accent,
        .btn-secondary,
        .btn-success,
        .btn-danger {
            height: 42px !important;
            border-radius: 10px !important;
            padding: 0 18px !important;
            font-size: 13px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
        }

        /* 9. Header Consistency */
        .panel-header {
            margin-bottom: 20px !important;
            padding-bottom: 12px !important;
            border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
        }

        .panel-header h2 {
            font-size: 22px !important;
            font-weight: 800 !important;
            margin: 0 0 6px 0 !important;
        }

        .panel-header p {
            font-size: 13px !important;
            margin: 0 !important;
            color: var(--text-muted, #94a3b8) !important;
        }
    }

    /* ==========================================================================
   UNIFIED SETTINGS PANEL STYLING (PC / iPad / Mobile - Dual Theme Support)
   ========================================================================== */
    #root #panel-database-settings .settings-unified-container {
        width: 100% !important;
        max-width: 1080px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 1. Capsule Navigation Bar */
    #root #panel-database-settings .settings-capsule-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(15, 23, 42, 0.75) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        padding: 8px !important;
        margin-bottom: 22px !important;
        box-sizing: border-box !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    }

    body.light-theme #root #panel-database-settings .settings-capsule-nav {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    #root #panel-database-settings .settings-capsule-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 18px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #94a3b8 !important;
        box-shadow: none !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap !important;
        outline: none !important;
        user-select: none !important;
    }

    body.light-theme #root #panel-database-settings .settings-capsule-btn {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }

    #root #panel-database-settings .settings-capsule-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    body.light-theme #root #panel-database-settings .settings-capsule-btn:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    #root #panel-database-settings .settings-capsule-btn.active {
        border: 1px solid rgba(56, 189, 248, 0.6) !important;
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.38) !important;
    }

    body.light-theme #root #panel-database-settings .settings-capsule-btn.active {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        border: 1px solid #0284c7 !important;
    }

    /* 2. Main Section Card */
    #root #panel-database-settings .settings-section-card {
        background: rgba(17, 24, 39, 0.90) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 18px !important;
        padding: 26px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
        width: 100% !important;
        max-width: 100% !important;
        color: #f8fafc !important;
    }

    body.light-theme #root #panel-database-settings .settings-section-card {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    }

    /* 3. Section Header */
    #root #panel-database-settings .settings-section-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-bottom: 14px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    body.light-theme #root #panel-database-settings .settings-section-header {
        border-bottom: 1px solid #e2e8f0 !important;
    }

    #root #panel-database-settings .settings-section-header h3 {
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    body.light-theme #root #panel-database-settings .settings-section-header h3 {
        color: #0f172a !important;
    }

    #root #panel-database-settings .settings-section-header p {
        margin: 4px 0 0 0 !important;
        font-size: 12px !important;
        color: #94a3b8 !important;
    }

    body.light-theme #root #panel-database-settings .settings-section-header p {
        color: #64748b !important;
    }

    /* 4. Form Inputs & Textareas */
    #root #panel-database-settings input.input-text,
    #root #panel-database-settings .settings-input-flex,
    #root #panel-database-settings .settings-input-dept,
    #root #panel-database-settings .settings-input-emoji {
        background: rgba(15, 23, 42, 0.7) !important;
        color: #f8fafc !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

    body.light-theme #root #panel-database-settings input.input-text,
    body.light-theme #root #panel-database-settings .settings-input-flex,
    body.light-theme #root #panel-database-settings .settings-input-dept,
    body.light-theme #root #panel-database-settings .settings-input-emoji {
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
    }

    #root #panel-database-settings input:focus {
        border-color: #38bdf8 !important;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
    }

    /* 5. Toggles & Feature Rows */
    #root #panel-database-settings .settings-toggle-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px 18px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        cursor: pointer !important;
        user-select: none !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        color: #f8fafc !important;
    }

    body.light-theme #root #panel-database-settings .settings-toggle-row {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
    }

    #root #panel-database-settings .settings-toggle-row strong {
        display: block !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #f8fafc !important;
    }

    body.light-theme #root #panel-database-settings .settings-toggle-row strong {
        color: #0f172a !important;
    }

    #root #panel-database-settings .settings-toggle-row div.subtitle {
        font-size: 12px !important;
        color: #94a3b8 !important;
        margin-top: 2px !important;
    }

    body.light-theme #root #panel-database-settings .settings-toggle-row div.subtitle {
        color: #64748b !important;
    }

    #root #panel-database-settings .settings-toggle-row input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        accent-color: #0284c7 !important;
    }

    /* 6. Item Rows (Products / Requisitions / Endpoints) */
    #root #panel-database-settings .settings-item-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    body.light-theme #root #panel-database-settings .settings-item-row {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* 7. Product Type Live Preview Badges */
    #root #panel-database-settings .settings-preview-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f1f5f9 !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        user-select: none !important;
    }

    body.light-theme #root #panel-database-settings .settings-preview-badge {
        background: #f1f5f9 !important;
        color: #1e293b !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    #root #panel-database-settings .settings-preview-badge.active {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        border: 1px solid #38bdf8 !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.38) !important;
    }

    body.light-theme #root #panel-database-settings .settings-preview-badge.active {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        color: #ffffff !important;
        border: 1px solid #0284c7 !important;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
    }

    /* 8. Emoji Picker Component */
    #root #panel-database-settings .settings-emoji-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        font-size: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(15, 23, 42, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        user-select: none !important;
        position: relative !important;
    }

    body.light-theme #root #panel-database-settings .settings-emoji-btn {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
    }

    #root #panel-database-settings .settings-emoji-btn:hover {
        border-color: #38bdf8 !important;
        transform: scale(1.05) !important;
        box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
    }

    #root #panel-database-settings .settings-emoji-popover {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        z-index: 1050 !important;
        width: 330px !important;
        max-width: 90vw !important;
        max-height: 380px !important;
        overflow-y: auto !important;
        background: rgba(15, 23, 42, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    body.light-theme #root #panel-database-settings .settings-emoji-popover {
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
    }

    #root #panel-database-settings .emoji-category-title {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #94a3b8 !important;
        margin: 8px 0 4px 0 !important;
        text-align: left !important;
    }

    body.light-theme #root #panel-database-settings .emoji-category-title {
        color: #64748b !important;
    }

    #root #panel-database-settings .emoji-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    #root #panel-database-settings .emoji-grid-item {
        font-size: 20px !important;
        height: 38px !important;
        border-radius: 8px !important;
        border: 1px solid transparent !important;
        background: rgba(255, 255, 255, 0.05) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
        user-select: none !important;
    }

    body.light-theme #root #panel-database-settings .emoji-grid-item {
        background: #f1f5f9 !important;
    }

    #root #panel-database-settings .emoji-grid-item:hover {
        background: rgba(56, 189, 248, 0.22) !important;
        border-color: #38bdf8 !important;
        transform: scale(1.15) !important;
    }

    /* Floating Pill Dock & Theme Polish */
    .stocktake-floating-pill-dock {
        background: rgba(15, 23, 42, 0.92) !important;
        border: 1px solid rgba(16, 185, 129, 0.45) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(16, 185, 129, 0.25) !important;
    }

    body.light-theme .stocktake-floating-pill-dock {
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(16, 185, 129, 0.5) !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15), 0 0 20px rgba(16, 185, 129, 0.2) !important;
    }

    body.light-theme .card-glass {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(148, 163, 184, 0.32);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    }

    body.light-theme .btn-secondary {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #334155;
    }

    body.light-theme .btn-secondary:hover:not(:disabled) {
        background: #f1f5f9;
        color: #0f172a;
    }

    body.light-theme .table thead tr {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    body.light-theme .table tbody tr {
        border-bottom: 1px solid #f1f5f9;
    }

    body.light-theme .table tbody tr:hover {
        background: rgba(2, 132, 199, 0.03);
    }

}

/* Health Metric Pills */
.settings-health-pill,
#root #panel-database-settings .settings-health-pill {
    background: rgba(15, 23, 42, 0.85) !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.settings-health-pill:hover,
#root #panel-database-settings .settings-health-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .settings-health-pill,
body.light-theme #root #panel-database-settings .settings-health-pill {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

/* Interactive Driver Selector Cards */
.settings-driver-grid,
#root #panel-database-settings .settings-driver-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.settings-driver-card,
#root #panel-database-settings .settings-driver-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    user-select: none !important;
}

body.light-theme .settings-driver-card,
body.light-theme #root #panel-database-settings .settings-driver-card {
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
}

.settings-driver-card:hover,
#root #panel-database-settings .settings-driver-card:hover {
    border-color: rgba(2, 132, 199, 0.6) !important;
    transform: translateY(-2px) !important;
}

.settings-driver-card.active,
#root #panel-database-settings .settings-driver-card.active {
    border-color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.15) !important;
    box-shadow: 0 0 20px rgba(2, 132, 199, 0.3) !important;
}

body.light-theme .settings-driver-card.active,
body.light-theme #root #panel-database-settings .settings-driver-card.active {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15) !important;
}

/* Supabase Connection Box */
.settings-supabase-box,
#root #panel-database-settings .settings-supabase-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
    padding: 22px !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .settings-supabase-box,
body.light-theme #root #panel-database-settings .settings-supabase-box {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
    border: 1.5px solid #fde68a !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08) !important;
}

/* SQLite Info Box */
.settings-sqlite-box,
#root #panel-database-settings .settings-sqlite-box {
    background: linear-gradient(135deg, rgba(56, 139, 253, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    padding: 18px 22px !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(56, 139, 253, 0.3) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #e2e8f0 !important;
}

body.light-theme .settings-sqlite-box,
body.light-theme #root #panel-database-settings .settings-sqlite-box {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    color: #1e3a8a !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06) !important;
}

/* Backup Cards */
.settings-backup-dl-card,
#root #panel-database-settings .settings-backup-dl-card {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    transition: all 0.25s ease !important;
}

body.light-theme .settings-backup-dl-card,
body.light-theme #root #panel-database-settings .settings-backup-dl-card {
    background: #f8fafc !important;
    border: 1.5px solid #bae6fd !important;
}

.settings-backup-upload-card,
#root #panel-database-settings .settings-backup-upload-card {
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 16px !important;
    transition: all 0.25s ease !important;
}

body.light-theme .settings-backup-upload-card,
body.light-theme #root #panel-database-settings .settings-backup-upload-card {
    background: #f8fafc !important;
    border: 1.5px solid #bbf7d0 !important;
}

/* ==========================================================================
       MODERN INTERACTIVE JSON DRAG & DROP UPLOAD ZONE
       ========================================================================== */
.settings-json-dropzone,
.settings-json-dropzone-large,
#root #panel-database-settings .settings-json-dropzone,
#root #panel-database-settings .settings-json-dropzone-large {
    border: 2px dashed rgba(16, 185, 129, 0.5) !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    background: rgba(16, 185, 129, 0.04) !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 160px !important;
}

.settings-json-dropzone:hover,
.settings-json-dropzone.dragover,
.settings-json-dropzone-large:hover,
.settings-json-dropzone-large.dragover,
#root #panel-database-settings .settings-json-dropzone:hover,
#root #panel-database-settings .settings-json-dropzone.dragover,
#root #panel-database-settings .settings-json-dropzone-large:hover,
#root #panel-database-settings .settings-json-dropzone-large.dragover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18) !important;
}

body.light-theme .settings-json-dropzone,
body.light-theme .settings-json-dropzone-large,
body.light-theme #root #panel-database-settings .settings-json-dropzone,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large {
    background: #f0fdf4 !important;
    border: 2px dashed #86efac !important;
}

body.light-theme .settings-json-dropzone:hover,
body.light-theme .settings-json-dropzone.dragover,
body.light-theme .settings-json-dropzone-large:hover,
body.light-theme .settings-json-dropzone-large.dragover,
body.light-theme #root #panel-database-settings .settings-json-dropzone:hover,
body.light-theme #root #panel-database-settings .settings-json-dropzone.dragover,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large:hover,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large.dragover {
    background: #dcfce7 !important;
    border-color: #22c55e !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.14) !important;
}

.settings-dropzone-icon-circle,
.settings-dropzone-circle-lg,
#root #panel-database-settings .settings-dropzone-icon-circle,
#root #panel-database-settings .settings-dropzone-circle-lg {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* Selected File Display Card */
.settings-selected-file-card,
#root #panel-database-settings .settings-selected-file-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    border: 1.5px solid #10b981 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15) !important;
}

body.light-theme .settings-selected-file-card,
body.light-theme #root #panel-database-settings .settings-selected-file-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 1.5px solid #86efac !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.1) !important;
}

.settings-file-badge,
#root #panel-database-settings .settings-file-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

body.light-theme .settings-file-badge,
body.light-theme #root #panel-database-settings .settings-file-badge {
    background: #dcfce7 !important;
    color: #15803d !important;
}

/* ==========================================================================
       LUXURY FEATURE TOGGLE SWITCH CARDS (Apple / Tesla Settings Style)
       ========================================================================== */
.settings-switches-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 14px !important;
}

.settings-switch-card {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

body.light-theme .settings-switch-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
}

.settings-switch-card:hover {
    border-color: rgba(2, 132, 199, 0.4) !important;
    transform: translateY(-1px) !important;
}

.settings-switch-card.active {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: rgba(2, 132, 199, 0.6) !important;
}

body.light-theme .settings-switch-card.active {
    background: #f0f9ff !important;
    border-color: #38bdf8 !important;
}

.settings-switch-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-blue, #0284c7) !important;
}

body.light-theme .settings-switch-icon-box {
    background: #e0f2fe !important;
}

.settings-switch-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.settings-switch-info .title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-main, #ffffff) !important;
    margin-bottom: 2px !important;
}

body.light-theme .settings-switch-info .title {
    color: #0f172a !important;
}

.settings-switch-info .desc {
    font-size: 11px !important;
    color: var(--text-muted, #94a3b8) !important;
    line-height: 1.4 !important;
}

/* iOS Toggle Switch Element */
.settings-switch-toggle {
    width: 44px !important;
    height: 24px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    transition: background 0.25s ease !important;
    flex-shrink: 0 !important;
}

body.light-theme .settings-switch-toggle {
    background: #cbd5e1 !important;
}

.settings-switch-toggle .toggle-knob {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.settings-switch-toggle.checked {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
}

.settings-switch-toggle.checked .toggle-knob {
    transform: translateX(20px) !important;
}

/* ==========================================================================
       LUXURY EMERGENCY BUTTON CARDS
       ========================================================================== */
.settings-emergency-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 14px !important;
}

.settings-emergency-card {
    border-radius: 14px !important;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    border: 1.5px solid transparent !important;
    text-align: left !important;
    position: relative !important;
}

.settings-emergency-card.demo {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

body.light-theme .settings-emergency-card.demo {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.settings-emergency-card.purge {
    background: rgba(234, 88, 12, 0.08) !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
}

body.light-theme .settings-emergency-card.purge {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
}

.settings-emergency-card.empty {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

body.light-theme .settings-emergency-card.empty {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.settings-emergency-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.settings-emergency-card .card-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.settings-emergency-card.demo .card-title {
    color: #f59e0b !important;
}

.settings-emergency-card.purge .card-title {
    color: #ea580c !important;
}

.settings-emergency-card.empty .card-title {
    color: #ef4444 !important;
}

.settings-emergency-card .card-desc {
    font-size: 11px !important;
    color: var(--text-muted, #94a3b8) !important;
    line-height: 1.4 !important;
}

.settings-emergency-card .card-action-btn {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    transition: opacity 0.2s ease !important;
}

.settings-emergency-card.demo .card-action-btn {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

body.light-theme .settings-emergency-card.demo .card-action-btn {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}

.settings-emergency-card.purge .card-action-btn {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
}

/* ==========================================================================
       SUB-TAB NAVIGATION BAR FOR TAB 6 (3 Clean Segmented Sub-Views)
       ========================================================================== */
.settings-subnav,
#root #panel-database-settings .settings-subnav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 24px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.settings-subnav::-webkit-scrollbar {
    display: none !important;
}

body.light-theme .settings-subnav,
body.light-theme #root #panel-database-settings .settings-subnav {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

.settings-subnav-btn,
#root #panel-database-settings .settings-subnav-btn {
    flex: 1 !important;
    min-width: 200px !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.settings-subnav-btn:hover,
#root #panel-database-settings .settings-subnav-btn:hover {
    color: var(--text-main, #ffffff) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.light-theme .settings-subnav-btn:hover,
body.light-theme #root #panel-database-settings .settings-subnav-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

.settings-subnav-btn.active,
#root #panel-database-settings .settings-subnav-btn.active {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35) !important;
}

body.light-theme .settings-subnav-btn.active,
body.light-theme #root #panel-database-settings .settings-subnav-btn.active {
    background: #ffffff !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
       SEGMENTED SWITCH FOR DATABASE DRIVER
       ========================================================================== */
.settings-segmented-switch,
#root #panel-database-settings .settings-segmented-switch {
    display: flex !important;
    background: rgba(15, 23, 42, 0.7) !important;
    padding: 5px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
}

body.light-theme .settings-segmented-switch,
body.light-theme #root #panel-database-settings .settings-segmented-switch {
    background: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
}

.settings-segmented-btn,
#root #panel-database-settings .settings-segmented-btn {
    flex: 1 !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.settings-segmented-btn:hover,
#root #panel-database-settings .settings-segmented-btn:hover {
    color: var(--text-main, #ffffff) !important;
}

body.light-theme .settings-segmented-btn:hover,
body.light-theme #root #panel-database-settings .settings-segmented-btn:hover {
    color: #0f172a !important;
}

.settings-segmented-btn.active,
#root #panel-database-settings .settings-segmented-btn.active {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3) !important;
}

body.light-theme .settings-segmented-btn.active,
body.light-theme #root #panel-database-settings .settings-segmented-btn.active {
    background: #ffffff !important;
    color: #0284c7 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
       LARGE LUXURY JSON DROPZONE
       ========================================================================== */
.settings-json-dropzone-large,
#root #panel-database-settings .settings-json-dropzone-large {
    border: 2.5px dashed rgba(16, 185, 129, 0.45) !important;
    border-radius: 20px !important;
    padding: 40px 24px !important;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    position: relative !important;
}

.settings-json-dropzone-large:hover,
.settings-json-dropzone-large.dragover,
#root #panel-database-settings .settings-json-dropzone-large:hover,
#root #panel-database-settings .settings-json-dropzone-large.dragover {
    border-color: #10b981 !important;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.16) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    transform: translateY(-3px) scale(1.005) !important;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.22) !important;
}

body.light-theme .settings-json-dropzone-large,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large {
    background: radial-gradient(circle at center, #f0fdf4 0%, #ffffff 100%) !important;
    border: 2.5px dashed #86efac !important;
}

body.light-theme .settings-json-dropzone-large:hover,
body.light-theme .settings-json-dropzone-large.dragover,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large:hover,
body.light-theme #root #panel-database-settings .settings-json-dropzone-large.dragover {
    background: #dcfce7 !important;
    border-color: #10b981 !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.16) !important;
}

.settings-dropzone-circle-lg {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4) !important;
    transition: transform 0.3s ease !important;
}

.settings-json-dropzone-large:hover .settings-dropzone-circle-lg {
    transform: scale(1.1) rotate(5deg) !important;
}

/* Light Theme Input & Select Refinements */
body.light-theme #root #panel-database-settings input.input-text,
body.light-theme #root #panel-database-settings select.input-text,
body.light-theme #root #panel-database-settings .settings-input-flex,
body.light-theme #root #panel-database-settings .settings-input-dept {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme #root #panel-database-settings input.input-text:focus,
body.light-theme #root #panel-database-settings select.input-text:focus,
body.light-theme #root #panel-database-settings .settings-input-flex:focus,
body.light-theme #root #panel-database-settings .settings-input-dept:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
}

}