/* ==========================================================================
           TEAMBLAST.ORG / PAMIR.AI DESIGN SYSTEM & EXCEL MATRIX STYLES
           Aesthetic: Retro-Futuristic Hardware + Tactile Cyberpunk + Precision Grid
           ========================================================================== */
        :root {
            /* Dark Mode Tokens (Default) */
            --bg-black: #09090b;
            --bg-zebra: #0e0e12;
            --bg-row-active: #1c1512;
            --bg-row-selected: #1f140e;
            --bg-row-completed: #0d1f1a;
            --bg-surface-1: #111114;
            --bg-surface-2: #16161a;
            --bg-surface-3: #1f1f24;
            --bg-hover: #26262d;
            --bg-active: #2e2e36;

            --border-subtle: #222227;
            --border-medium: #2e2e36;
            --border-strong: #3f3f4a;

            --text-main: #f4f4f5;
            --text-muted: #8e8e98;
            --text-dim: #5c5c66;

            /* Brand Colors */
            --pamir-orange: #FF5C00;
            --pamir-orange-hover: #ff7524;
            --pamir-orange-glow: rgba(255, 92, 0, 0.28);
            --pamir-orange-subtle: rgba(255, 92, 0, 0.12);

            /* Status Colors */
            --status-active: #10b981;
            --status-active-glow: rgba(16, 185, 129, 0.25);
            --status-prov: #38bdf8;
            --status-idle: #eab308;
            --status-alert: #f43f5e;

            /* Typography Tokens */
            --font-pixel: 'Silkscreen', monospace;
            --font-mono: 'JetBrains Mono', monospace;
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

            /* Layout Sizing */
            --nav-height: 54px;
            --formula-bar-height: 40px;
            --footer-height: 34px;

            /* Table Density */
            --cell-height: 32px;
            --cell-px: 10px;
            --cell-py: 5px;
            --font-size: 12px;

            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            color-scheme: dark;
        }

        /* ==========================================================================
           LIGHT THEME TOKENS (Industrial White Ceramic & Aluminum Aesthetic)
           ========================================================================== */
        html.light,
        [data-theme="light"] {
            --bg-black: #f5f5f7;
            --bg-zebra: #ededf2;
            --bg-row-active: #fff1e6;
            --bg-row-selected: #ffe8d6;
            --bg-row-completed: #e6f7f1;
            --bg-surface-1: #ffffff;
            --bg-surface-2: #f0f0f4;
            --bg-surface-3: #e5e5eb;
            --bg-hover: #e8e8ee;
            --bg-active: #dddee4;

            --border-subtle: #e2e2e8;
            --border-medium: #d4d4dc;
            --border-strong: #a8a8b6;

            --text-main: #141418;
            --text-muted: #5e5e6b;
            --text-dim: #64748b;

            --pamir-orange: #FF5C00;
            --pamir-orange-hover: #e05200;
            --pamir-orange-glow: rgba(255, 92, 0, 0.2);
            --pamir-orange-subtle: rgba(255, 92, 0, 0.08);

            --status-active: #059669;
            --status-active-glow: rgba(5, 150, 105, 0.2);
            --status-prov: #0284c7;
            --status-idle: #d97706;
            --status-alert: #e11d48;
            color-scheme: light;
        }

        /* Density Classes */
        body.dens-sm {
            --cell-height: 28px;
            --cell-px: 8px;
            --cell-py: 4px;
            --font-size: 11.5px;
            --summary-panel-width: 310px;
            --summary-base-font-size: 10px;
            --summary-title-font-size: 9px;
            --summary-hero-job-size: 12.5px;
            --summary-hero-customer-size: 10.5px;
            --summary-status-font-size: 10px;
            --summary-group-header-size: 8.5px;
            --summary-field-font-size: 10px;
            --summary-key-font-size: 9px;
            --summary-val-font-size: 10px;
            --summary-label-font-size: 8px;
            --summary-badge-font-size: 8.5px;
            --summary-btn-font-size: 8px;
            --summary-pill-font-size: 9px;
            --summary-field-py: 3.5px;
            --summary-field-px: 8px;
        }
        body.dens-md {
            --cell-height: 35px;
            --cell-px: 10px;
            --cell-py: 6px;
            --font-size: 12.5px;
            --summary-panel-width: 330px;
            --summary-base-font-size: 11.5px;
            --summary-title-font-size: 10px;
            --summary-hero-job-size: 14px;
            --summary-hero-customer-size: 12px;
            --summary-status-font-size: 11.5px;
            --summary-group-header-size: 9.5px;
            --summary-field-font-size: 11px;
            --summary-key-font-size: 10.5px;
            --summary-val-font-size: 11px;
            --summary-label-font-size: 9px;
            --summary-badge-font-size: 9.5px;
            --summary-btn-font-size: 9px;
            --summary-pill-font-size: 10px;
            --summary-field-py: 5px;
            --summary-field-px: 10px;
        }
        body.dens-lg {
            --cell-height: 42px;
            --cell-px: 14px;
            --cell-py: 8px;
            --font-size: 14px;
            --summary-panel-width: 360px;
            --summary-base-font-size: 13.5px;
            --summary-title-font-size: 12px;
            --summary-hero-job-size: 17px;
            --summary-hero-customer-size: 14px;
            --summary-status-font-size: 13.5px;
            --summary-group-header-size: 11.5px;
            --summary-field-font-size: 13px;
            --summary-key-font-size: 12px;
            --summary-val-font-size: 13px;
            --summary-label-font-size: 11px;
            --summary-badge-font-size: 11px;
            --summary-btn-font-size: 10.5px;
            --summary-pill-font-size: 12px;
            --summary-field-py: 7px;
            --summary-field-px: 12px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        ::selection {
            background-color: var(--pamir-orange);
            color: #ffffff;
        }

        body {
            font-family: var(--font-sans);
            background-color: var(--bg-black);
            color: var(--text-main);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100dvh;
            width: 100%;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Instant Theme Switching (0ms Hardware Terminal Response) */
        html.theme-switching *,
        html.theme-switching *::before,
        html.theme-switching *::after {
            transition: none !important;
            animation: none !important;
        }

        /* Custom Scrollbars */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-black); border-left: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); }
        ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 0px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

        /* ==========================================================================
           TOP NAVIGATION BAR
           ========================================================================== */
        .top-nav {
            min-height: var(--nav-height);
            width: 100%;
            background-color: var(--bg-surface-1);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 14px;
            z-index: 60;
            gap: 10px;
            flex-wrap: nowrap;
            flex-shrink: 0;
        }

        .nav-left, .nav-right {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: nowrap;
            min-width: 0;
        }

        .nav-left {
            flex-shrink: 0;
        }

        .nav-right {
            margin-left: auto;
            flex-shrink: 0;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--text-main);
            user-select: none;
        }

        .logo-box {
            width: 30px;
            height: 30px;
            background-color: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--transition-normal), border-color var(--transition-fast);
        }

        .brand-logo:hover .logo-box {
            border-color: var(--pamir-orange);
            transform: rotate(90deg);
        }

        .logo-icon {
            width: 18px;
            height: 18px;
        }

        .brand-text {
            display: flex;
            align-items: baseline;
            gap: 7px;
        }

        .brand-name {
            font-family: var(--font-pixel);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.8px;
            color: var(--text-main);
        }

        .brand-sub {
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 600;
            color: var(--pamir-orange);
            background: var(--pamir-orange-subtle);
            padding: 1px 6px;
            border-radius: 2px;
            border: 1px solid rgba(255, 92, 0, 0.3);
            letter-spacing: 0.5px;
        }

        /* Density Control */
        .nav-density-control {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            padding: 3px 8px;
            border-radius: 2px;
        }

        .control-sublabel {
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--text-muted);
        }

        .density-buttons {
            display: flex;
            gap: 3px;
        }

        .density-btn {
            background: var(--bg-surface-3);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            padding: 2px 7px;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 600;
            border-radius: 2px;
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .density-btn:hover {
            color: var(--text-main);
            border-color: var(--border-medium);
        }

        .density-btn.active {
            background: var(--pamir-orange);
            color: #ffffff;
            border-color: var(--pamir-orange);
            box-shadow: 0 0 8px var(--pamir-orange-glow);
        }

        /* Tactile Hardware Buttons */
        .hw-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            color: var(--text-main);
            padding: 5px 10px;
            cursor: pointer;
            font-family: var(--font-pixel);
            font-size: 9px;
            letter-spacing: 0.5px;
            border-radius: 2px;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
            user-select: none;
            white-space: nowrap;
        }

        .hw-btn:hover {
            border-color: var(--pamir-orange);
            background: var(--bg-hover);
            color: var(--text-main);
            box-shadow: 0 0 8px var(--pamir-orange-glow);
        }

        .hw-btn svg {
            color: var(--pamir-orange);
            flex-shrink: 0;
        }

        .hw-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed !important;
            border-color: var(--border-subtle) !important;
            box-shadow: none !important;
            pointer-events: auto;
        }

        .hw-btn:disabled:hover {
            border-color: var(--border-subtle) !important;
            background: var(--bg-surface-2) !important;
            box-shadow: none !important;
            color: var(--text-muted) !important;
        }

        .hw-btn:disabled svg {
            color: var(--text-dim) !important;
        }

        .hw-btn-primary {
            background: var(--pamir-orange);
            border-color: var(--pamir-orange);
            color: #ffffff;
        }

        .hw-btn-primary svg {
            color: #ffffff;
        }

        .hw-btn-primary:hover {
            background: var(--pamir-orange-hover);
            border-color: var(--pamir-orange-hover);
            color: #ffffff;
            box-shadow: 0 0 12px var(--pamir-orange-glow);
            transform: translateY(-1px);
        }

        .hw-btn-success {
            border-color: rgba(16, 185, 129, 0.4);
            color: var(--status-active);
            background: rgba(16, 185, 129, 0.08);
        }

        .hw-btn-success svg { color: var(--status-active); }

        .hw-btn-success:hover {
            border-color: var(--status-active);
            background: var(--status-active);
            color: #ffffff;
            box-shadow: 0 0 10px var(--status-active-glow);
        }
        .hw-btn-success:hover svg { color: #ffffff; }

        .hw-btn-danger {
            border-color: rgba(244, 63, 94, 0.4);
            color: var(--status-alert);
            background: rgba(244, 63, 94, 0.08);
        }

        .hw-btn-danger svg { color: var(--status-alert); }

        .hw-btn-danger:hover {
            border-color: var(--status-alert);
            background: var(--status-alert);
            color: #ffffff;
            box-shadow: 0 0 10px rgba(244, 63, 94, 0.35);
        }
        .hw-btn-danger:hover svg { color: #ffffff; }

        .hw-btn-cyan {
            border-color: rgba(56, 189, 248, 0.4);
            color: var(--status-prov);
            background: rgba(56, 189, 248, 0.08);
        }

        .hw-btn-cyan svg { color: var(--status-prov); }

        .hw-btn-cyan:hover {
            border-color: var(--status-prov);
            background: var(--status-prov);
            color: #ffffff;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
        }
        .hw-btn-cyan:hover svg { color: #ffffff; }

        .nav-divider {
            width: 1px;
            height: 20px;
            background: var(--border-medium);
        }

        .live-counter {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-mono);
            font-size: 11px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            padding: 4px 10px;
            border-radius: 2px;
        }

        .counter-tag { color: var(--text-dim); font-size: 10px; font-weight: 600; }
        .counter-value { color: var(--pamir-orange); font-weight: 700; }

        /* ==========================================================================
           FORMULA / MATRIX ACTION RIBBON BAR
           ========================================================================== */
        .matrix-formula-bar {
            min-height: var(--formula-bar-height);
            background: var(--bg-surface-1);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            padding: 4px 14px;
            gap: 8px;
            flex-shrink: 0;
            z-index: 50;
            flex-wrap: nowrap;
        }

        .formula-cell-indicator {
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            color: var(--pamir-orange);
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            padding: 3px 8px;
            min-width: 48px;
            text-align: center;
            border-radius: 2px;
            user-select: none;
            flex-shrink: 0;
        }

        .formula-col-label {
            font-family: var(--font-mono);
            font-size: 10px;
            color: var(--text-muted);
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            padding: 3px 8px;
            border-radius: 2px;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }

        .formula-input {
            flex: 1 1 200px;
            min-width: 130px;
            height: 28px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            border-radius: 2px;
            padding: 0 10px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-main);
            outline: none;
            transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .formula-input:focus {
            background: var(--bg-surface-3);
            border-color: var(--pamir-orange);
            box-shadow: 0 0 0 1px var(--pamir-orange-glow);
        }

        .formula-input::placeholder {
            color: var(--text-dim);
            font-size: 10px;
        }

        .formula-search-wrap {
            flex: 1.15 1 220px;
            position: relative;
            display: flex;
            align-items: center;
            min-width: 160px;
        }

        .formula-search-wrap input {
            width: 100%;
            height: 28px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            border-radius: 2px;
            padding: 0 28px 0 30px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 11px;
            outline: none;
            transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .formula-search-wrap input:focus {
            background: var(--bg-surface-3);
            border-color: var(--pamir-orange);
            box-shadow: 0 0 0 1px var(--pamir-orange-glow);
        }

        .formula-search-wrap input::placeholder {
            color: var(--text-dim);
            font-size: 11px;
        }

        .formula-search-wrap .search-icon {
            position: absolute;
            left: 9px;
            color: var(--text-muted);
            pointer-events: none;
        }

        .clear-search-btn {
            position: absolute;
            right: 8px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 15px;
            cursor: pointer;
            line-height: 1;
        }

        .clear-search-btn:hover { color: var(--pamir-orange); }

        .columns-active-count {
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 2px;
            background: rgba(255, 92, 0, 0.16);
            color: var(--pamir-orange);
            border: 1px solid rgba(255, 92, 0, 0.35);
        }

        /* ==========================================================================
           COMPACT ICON BUTTONS & SMART TOOLBAR DROPDOWNS
           ========================================================================== */
        .toolbar-btn-group {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }

        .hw-icon-btn {
            padding: 0;
            width: 28px;
            height: 28px;
            justify-content: center;
            flex-shrink: 0;
        }

        .toolbar-dropdown {
            position: relative;
            display: inline-flex;
            flex-shrink: 0;
        }

        .toolbar-dropdown.open > .hw-btn {
            border-color: var(--pamir-orange);
            background: var(--bg-surface-3);
            box-shadow: 0 0 10px var(--pamir-orange-glow);
        }

        .toolbar-caret {
            width: 10px;
            height: 10px;
            opacity: 0.75;
            transition: transform var(--transition-fast);
        }

        .toolbar-dropdown.open .toolbar-caret {
            transform: rotate(180deg);
            opacity: 1;
        }

        .toolbar-menu-panel {
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            min-width: 215px;
            background: var(--bg-surface-1);
            border: 1px solid var(--pamir-orange);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), 0 0 14px var(--pamir-orange-glow);
            padding: 6px;
            border-radius: 2px;
            z-index: 90;
            display: none;
            flex-direction: column;
            gap: 2px;
        }

        .toolbar-dropdown.open > .toolbar-menu-panel {
            display: flex;
        }

        .toolbar-menu-header {
            font-family: var(--font-pixel);
            font-size: 8.5px;
            letter-spacing: 0.7px;
            color: var(--text-dim);
            text-transform: uppercase;
            padding: 4px 8px 5px;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
        }

        .toolbar-menu-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 6px 9px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 2px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 500;
            text-align: left;
            cursor: pointer;
            transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
            white-space: nowrap;
        }

        .toolbar-menu-item-left {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .toolbar-menu-item svg {
            color: var(--pamir-orange);
            flex-shrink: 0;
        }

        .toolbar-menu-item:hover {
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        .toolbar-menu-item-cyan svg { color: var(--status-prov); }
        .toolbar-menu-item-cyan:hover {
            border-color: rgba(56, 189, 248, 0.45);
            background: rgba(56, 189, 248, 0.1);
        }

        .toolbar-menu-item-success svg { color: var(--status-active); }
        .toolbar-menu-item-success:hover {
            border-color: rgba(16, 185, 129, 0.45);
            background: rgba(16, 185, 129, 0.1);
        }

        .toolbar-menu-item-danger {
            color: var(--status-alert);
        }
        .toolbar-menu-item-danger svg { color: var(--status-alert); }
        .toolbar-menu-item-danger:hover {
            border-color: rgba(244, 63, 94, 0.5);
            background: rgba(244, 63, 94, 0.12);
        }

        .toolbar-menu-divider {
            height: 1px;
            background: var(--border-subtle);
            margin: 4px 2px;
        }

        .toolbar-menu-kbd {
            font-family: var(--font-mono);
            font-size: 9.5px;
            color: var(--text-dim);
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            padding: 1px 5px;
            border-radius: 2px;
        }

        .toolbar-active-badge {
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 2px;
            background: var(--pamir-orange);
            color: #ffffff;
            line-height: 1.25;
        }

        .toolbar-filter-chip-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            padding: 2px 4px 4px;
        }

        .toolbar-filter-chip {
            padding: 5px 6px;
            font-family: var(--font-mono);
            font-size: 9.5px;
            font-weight: 600;
            text-align: center;
            border-radius: 2px;
            border: 1px solid var(--border-medium);
            background: var(--bg-surface-2);
            color: var(--text-muted);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .toolbar-filter-chip:hover {
            color: var(--text-main);
            border-color: var(--border-strong);
        }

        .toolbar-filter-chip.active {
            border-color: var(--pamir-orange);
            background: var(--pamir-orange-subtle);
            color: var(--pamir-orange);
            font-weight: 700;
        }

        @media (max-width: 1260px) {
            .nav-density-control .control-sublabel {
                display: none;
            }
            #themeLabel {
                display: none;
            }
            #themeToggleBtn {
                padding: 5px 8px;
            }
            .brand-sub {
                display: none;
            }
        }

        @media (max-width: 980px) {
            .top-nav,
            .nav-left,
            .nav-right,
            .matrix-formula-bar {
                flex-wrap: wrap;
            }
        }

        /* ==========================================================================
           SPREADSHEET / EXCEL MATRIX VIEWPORT & RIGHT SUMMARY PANEL
           ========================================================================== */
        .main-workspace-split {
            flex: 1;
            display: flex;
            min-height: 0;
            overflow: hidden;
            position: relative;
        }

        .spreadsheet-container {
            flex: 1;
            min-width: 0;
            overflow: auto;
            position: relative;
            background-color: var(--bg-black);
            contain: strict;
        }

        .record-summary-panel {
            width: var(--summary-panel-width, 330px);
            min-width: var(--summary-panel-width, 330px);
            max-width: var(--summary-panel-width, 330px);
            flex-shrink: 0;
            background-color: var(--bg-surface-1);
            border-left: 1px solid var(--border-strong);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 22;
            contain: layout style;
            font-size: var(--summary-base-font-size, 11.5px);
            transition: width var(--transition-fast);
        }

        .record-summary-panel.collapsed {
            display: none;
        }

        .summary-panel-header {
            background-color: var(--bg-surface-2);
            border-bottom: 1px solid var(--border-medium);
            padding: var(--summary-field-py, 8px) var(--summary-field-px, 12px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-shrink: 0;
        }

        .summary-panel-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-pixel);
            font-size: var(--summary-title-font-size, 10px);
            letter-spacing: 0.7px;
            color: var(--text-main);
            text-transform: uppercase;
        }

        .summary-panel-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .summary-panel-body > * {
            flex-shrink: 0;
        }

        .summary-hero-card {
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            border-left: 3px solid var(--pamir-orange);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-shrink: 0;
        }

        .summary-status-box {
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            padding: 8px 10px;
            font-family: var(--font-mono);
            font-size: var(--summary-status-font-size, 11.5px);
            line-height: 1.45;
            color: var(--text-main);
            white-space: pre-wrap;
            word-break: break-word;
            cursor: pointer;
            transition: border-color var(--transition-fast);
        }

        .summary-status-box:hover {
            border-color: var(--pamir-orange);
        }

        .summary-group-card {
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            flex-shrink: 0;
            border-radius: 2px;
            overflow: hidden;
        }

        .summary-group-header {
            padding: var(--summary-field-py, 5px) var(--summary-field-px, 10px);
            font-family: var(--font-mono);
            font-size: var(--summary-group-header-size, 9.5px);
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            background: var(--bg-surface-3);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            transition: background var(--transition-fast);
        }

        .summary-group-header:hover {
            background: var(--bg-hover);
        }

        .summary-group-card.is-collapsed .summary-group-header {
            border-bottom: none;
        }

        .summary-field-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            padding: var(--summary-field-py, 5px) var(--summary-field-px, 10px);
            border-bottom: 1px solid var(--border-subtle);
            font-family: var(--font-mono);
            font-size: var(--summary-field-font-size, 11px);
            cursor: pointer;
        }

        .summary-field-row:last-child {
            border-bottom: none;
        }

        .summary-field-row:hover {
            background-color: var(--bg-hover);
        }

        .summary-field-row.active-field {
            background-color: var(--bg-row-active);
            box-shadow: inset 2px 0 0 var(--pamir-orange);
        }

        .summary-field-key {
            color: var(--text-muted);
            font-size: var(--summary-key-font-size, 10.5px);
            flex-shrink: 0;
        }

        .summary-field-val {
            color: var(--text-main);
            font-weight: 500;
            text-align: right;
            word-break: break-word;
            white-space: pre-wrap;
            font-size: var(--summary-val-font-size, 11px);
        }

        .summary-field-val.empty {
            color: var(--text-dim);
            font-weight: 400;
        }

        /* Density scaling overrides for inner elements of Summary Card */
        .record-summary-panel .date-badge,
        .record-summary-panel .container-badge {
            font-size: var(--summary-badge-font-size, 10px);
        }

        .record-summary-panel .cell-pill,
        .record-summary-panel .pill-handling {
            font-size: var(--summary-pill-font-size, 10px);
        }

        .record-summary-panel .hw-btn {
            font-size: var(--summary-btn-font-size, 9px);
        }

        .record-summary-panel .summary-hero-sublabel {
            font-size: var(--summary-label-font-size, 9px) !important;
        }

        .record-summary-panel .summary-hero-title {
            font-size: var(--summary-hero-job-size, 14px) !important;
        }

        .record-summary-panel .summary-hero-customer {
            font-size: var(--summary-hero-customer-size, 12px) !important;
        }

        .record-summary-panel .summary-section-label {
            font-size: var(--summary-label-font-size, 9.5px) !important;
        }

        .record-summary-panel .summary-edit-btn {
            font-size: var(--summary-btn-font-size, 9px) !important;
        }

        .record-summary-panel .summary-progress-label {
            font-size: var(--summary-label-font-size, 9.5px) !important;
        }

        .record-summary-panel #summaryRowBadge {
            font-size: var(--summary-badge-font-size, 10px) !important;
        }

        /* Specific density overrides for Tailwind utility font-size classes in summary panel */
        body.dens-sm .record-summary-panel .text-\[9px\],
        body.dens-sm .record-summary-panel .text-\[9\.5px\],
        body.dens-sm .record-summary-panel .text-\[8px\],
        body.dens-sm .record-summary-panel [class*="text-[9px]"],
        body.dens-sm .record-summary-panel [class*="text-[9.5px]"],
        body.dens-sm .record-summary-panel [class*="text-[8px]"] {
            font-size: var(--summary-label-font-size, 8px) !important;
        }
        body.dens-sm .record-summary-panel .text-\[10px\],
        body.dens-sm .record-summary-panel .text-xs,
        body.dens-sm .record-summary-panel [class*="text-[10px]"] {
            font-size: var(--summary-hero-customer-size, 10.5px) !important;
        }
        body.dens-sm .record-summary-panel .text-sm {
            font-size: var(--summary-hero-job-size, 12.5px) !important;
        }

        body.dens-md .record-summary-panel .text-\[9px\],
        body.dens-md .record-summary-panel .text-\[9\.5px\],
        body.dens-md .record-summary-panel [class*="text-[9px]"],
        body.dens-md .record-summary-panel [class*="text-[9.5px]"] {
            font-size: var(--summary-label-font-size, 9px) !important;
        }
        body.dens-md .record-summary-panel .text-\[8px\],
        body.dens-md .record-summary-panel [class*="text-[8px]"] {
            font-size: 8px !important;
        }
        body.dens-md .record-summary-panel .text-\[10px\],
        body.dens-md .record-summary-panel .text-xs,
        body.dens-md .record-summary-panel [class*="text-[10px]"] {
            font-size: var(--summary-hero-customer-size, 12px) !important;
        }
        body.dens-md .record-summary-panel .text-sm {
            font-size: var(--summary-hero-job-size, 14px) !important;
        }

        body.dens-lg .record-summary-panel .text-\[9px\],
        body.dens-lg .record-summary-panel .text-\[9\.5px\],
        body.dens-lg .record-summary-panel .text-\[8px\],
        body.dens-lg .record-summary-panel [class*="text-[9px]"],
        body.dens-lg .record-summary-panel [class*="text-[9.5px]"],
        body.dens-lg .record-summary-panel [class*="text-[8px]"] {
            font-size: var(--summary-label-font-size, 11px) !important;
        }
        body.dens-lg .record-summary-panel .text-\[10px\],
        body.dens-lg .record-summary-panel .text-xs,
        body.dens-lg .record-summary-panel [class*="text-[10px]"] {
            font-size: var(--summary-hero-customer-size, 14px) !important;
        }
        body.dens-lg .record-summary-panel .text-sm {
            font-size: var(--summary-hero-job-size, 17px) !important;
        }

        .summary-progress-track {
            width: 100%;
            height: 4px;
            background: var(--bg-surface-3);
            overflow: hidden;
            border-radius: 2px;
        }

        .summary-progress-bar {
            height: 100%;
            background: var(--pamir-orange);
            transition: width var(--transition-base);
        }

        table {
            border-collapse: collapse;
            table-layout: auto;
            width: max-content;
            font-family: var(--font-mono);
        }

        th {
            background-color: var(--bg-surface-2);
            border-bottom: 2px solid var(--border-strong);
            border-right: 1px solid var(--border-medium);
            border-top: 3px solid var(--border-strong);
            padding: 6px var(--cell-px);
            font-family: var(--font-sans);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: 0.25px;
            text-align: left;
            color: var(--text-main);
            position: sticky;
            top: 0;
            z-index: 20;
            user-select: none;
            width: auto;
            min-width: 68px;
            white-space: nowrap;
            cursor: pointer;
            vertical-align: top;
        }

        .th-wrap {
            display: flex;
            flex-direction: column;
            gap: 2px;
            line-height: 1.25;
        }

        .th-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
        }

        .th-group-tag {
            font-family: var(--font-mono);
            font-size: 8.5px;
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            opacity: 0.85;
        }

        .th-title {
            font-family: var(--font-sans);
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: 0.2px;
            white-space: nowrap;
        }

        .th-sub {
            font-family: var(--font-mono);
            font-size: 9.5px;
            font-weight: 500;
            color: var(--text-muted);
            white-space: nowrap;
        }

        /* Group Color-Coded Header Top Bars */
        th.group-essential { border-top-color: var(--pamir-orange); }
        th.group-essential .th-group-tag { color: var(--pamir-orange); }

        th.group-shipping { border-top-color: #38bdf8; }
        th.group-shipping .th-group-tag { color: #38bdf8; }

        th.group-customs { border-top-color: #a855f7; }
        th.group-customs .th-group-tag { color: #a855f7; }

        th.group-local { border-top-color: #f59e0b; }
        th.group-local .th-group-tag { color: #f59e0b; }

        th.group-haulage { border-top-color: #10b981; }
        th.group-haulage .th-group-tag { color: #10b981; }

        th.group-finance { border-top-color: #f43f5e; }
        th.group-finance .th-group-tag { color: #f43f5e; }

        th.group-custom { border-top-color: #14b8a6; }
        th.group-custom .th-group-tag { color: #14b8a6; }

        th:hover {
            background-color: var(--bg-hover);
            color: var(--text-main);
        }

        th.active-col {
            background-color: var(--bg-active) !important;
            border-bottom: 2px solid var(--pamir-orange) !important;
            box-shadow: inset 0 -2px 0 var(--pamir-orange);
        }

        th.active-col .th-title {
            color: var(--pamir-orange);
        }

        th.sort-asc, th.sort-desc {
            color: var(--pamir-orange);
            border-bottom-color: var(--pamir-orange);
        }

        th.sort-asc .th-title::after { content: " ▲"; font-size: 9px; color: var(--pamir-orange); }
        th.sort-desc .th-title::after { content: " ▼"; font-size: 9px; color: var(--pamir-orange); }

        /* Frozen / Pinned Left Columns (#, ACTION, SEL, Job No.) */
        th[data-col="0"],
        td[data-col="0"] {
            min-width: 48px;
            width: 48px;
            max-width: 48px;
            position: sticky;
            left: 0px;
            text-align: center;
        }

        th[data-col="actions"],
        td[data-col="actions"] {
            min-width: 80px;
            width: 80px;
            max-width: 80px;
            position: sticky;
            left: 48px;
            text-align: center;
            cursor: default;
        }

        th[data-col="1"],
        td[data-col="1"] {
            min-width: 50px;
            width: 50px;
            max-width: 50px;
            position: sticky;
            left: 128px;
            text-align: center;
        }

        th[data-col="2"],
        td[data-col="2"] {
            min-width: 100px;
            width: auto;
            position: sticky;
            left: 178px;
            border-right: 2px solid var(--border-strong) !important;
            box-shadow: 4px 0 8px rgba(0, 0, 0, 0.22);
        }

        html.light th[data-col="2"],
        html.light td[data-col="2"] {
            box-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
        }

        th[data-col="0"],
        th[data-col="actions"],
        th[data-col="1"],
        th[data-col="2"] {
            z-index: 30;
            background-color: var(--bg-surface-3);
        }

        td[data-col="0"],
        td[data-col="actions"],
        td[data-col="1"],
        td[data-col="2"] {
            z-index: 12;
            background-color: var(--bg-surface-1);
        }

        th[data-col="10"] { min-width: 140px; }

        /* Table Body Rows & Zebra Striping */
        tbody tr {
            border-bottom: 1px solid var(--border-subtle);
            background-color: var(--bg-black);
        }

        tbody tr:nth-child(even) td {
            background-color: var(--bg-zebra);
        }

        tbody tr:nth-child(even) td[data-col="0"],
        tbody tr:nth-child(even) td[data-col="actions"],
        tbody tr:nth-child(even) td[data-col="1"],
        tbody tr:nth-child(even) td[data-col="2"] {
            background-color: var(--bg-surface-2);
        }

        tbody tr:hover td {
            background-color: var(--bg-hover) !important;
        }

        /* Active Row Guide-Rail Highlighting */
        tbody tr.active-row td {
            background-color: var(--bg-row-active) !important;
            border-top: 1px solid rgba(255, 92, 0, 0.38);
            border-bottom: 1px solid rgba(255, 92, 0, 0.38);
        }

        tbody tr.active-row td[data-col="0"] {
            box-shadow: inset 3px 0 0 var(--pamir-orange);
            color: var(--pamir-orange) !important;
            font-weight: 700;
        }

        tbody tr.active-row td[data-col="2"] .job-no-badge {
            color: var(--pamir-orange);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        tbody tr.row-selected td {
            background-color: var(--bg-row-selected) !important;
        }

        /* Completed Row Styling */
        tr.completed-row td {
            background-color: var(--bg-row-completed) !important;
            color: var(--status-active);
        }
        tr.completed-row:hover td {
            background-color: rgba(16, 185, 129, 0.18) !important;
        }

        td {
            border-right: 1px solid var(--border-subtle);
            border-bottom: 1px solid var(--border-subtle);
            height: var(--cell-height);
            padding: 0;
            margin: 0;
            font-size: var(--font-size);
            font-family: var(--font-mono);
            color: var(--text-main);
            position: relative;
            cursor: cell;
            white-space: nowrap;
            width: auto;
            vertical-align: middle;
        }

        td[data-col="0"] {
            color: var(--text-muted);
            font-size: 11px;
            border-right: 1px solid var(--border-medium);
        }

        .cell-content {
            padding: var(--cell-py) var(--cell-px);
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            pointer-events: none;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        td[data-col="10"],
        td.multiline-cell {
            white-space: pre;
            height: auto;
            overflow: visible;
        }

        td[data-col="10"] .cell-content,
        td.multiline-cell .cell-content {
            white-space: pre;
            height: auto;
            min-height: var(--cell-height);
            overflow: visible;
            line-height: 1.45;
        }

        td[data-col="0"] .cell-content,
        td[data-col="actions"] .cell-content,
        td[data-col="1"] .cell-content {
            width: 100%;
            justify-content: center;
        }

        td[data-col="actions"] .cell-content {
            padding: 2px 4px;
        }

        .row-inline-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            pointer-events: auto;
        }

        .row-act-btn {
            width: 21px;
            height: 21px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 2px;
            border: 1px solid var(--border-subtle);
            background: var(--bg-surface-2);
            color: var(--text-muted);
            cursor: pointer;
            pointer-events: auto;
            transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
        }

        .row-act-btn svg {
            width: 11px;
            height: 11px;
            flex-shrink: 0;
        }

        .row-act-dup:hover {
            border-color: var(--status-prov);
            background: rgba(56, 189, 248, 0.16);
            color: var(--status-prov);
            box-shadow: 0 0 6px rgba(56, 189, 248, 0.3);
        }

        .row-act-complete:hover {
            border-color: var(--status-active);
            background: rgba(16, 185, 129, 0.16);
            color: var(--status-active);
            box-shadow: 0 0 6px var(--status-active-glow);
        }

        .row-act-unlock {
            border-color: rgba(16, 185, 129, 0.55);
            background: rgba(16, 185, 129, 0.15);
            color: var(--status-active);
        }

        .row-act-unlock:hover {
            border-color: var(--pamir-orange);
            background: var(--pamir-orange-subtle);
            color: var(--pamir-orange);
            box-shadow: 0 0 6px var(--pamir-orange-glow);
        }

        .row-act-del:hover {
            border-color: var(--status-alert);
            background: rgba(244, 63, 94, 0.16);
            color: var(--status-alert);
            box-shadow: 0 0 6px rgba(244, 63, 94, 0.3);
        }

        td.active {
            outline: 2px solid var(--pamir-orange);
            outline-offset: -2px;
            background-color: rgba(255, 92, 0, 0.22) !important;
            z-index: 15;
        }

        td.in-selection-range {
            background-color: rgba(255, 92, 0, 0.13) !important;
            box-shadow: inset 0 0 0 1px rgba(255, 92, 0, 0.42);
        }

        td.copied-cell {
            outline: 2px dashed #10b981;
            outline-offset: -2px;
        }

        th.in-selection-col {
            background-color: rgba(255, 92, 0, 0.12) !important;
            border-bottom: 2px solid rgba(255, 92, 0, 0.7) !important;
        }

        td.editing {
            outline: 2px solid var(--pamir-orange);
            outline-offset: -2px;
            z-index: 18;
            background: var(--bg-surface-2) !important;
            box-shadow: 0 0 12px var(--pamir-orange-glow);
        }

        td.editing .cell-content { visibility: hidden; }
        td.editing-textarea .cell-content { display: flex; visibility: hidden; }

        td input[type="text"],
        td input[type="number"],
        td input[type="date"],
        td input[type="datetime-local"],
        td select,
        td textarea {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: var(--cell-py) var(--cell-px);
            font-size: var(--font-size);
            font-family: var(--font-mono);
            box-sizing: border-box;
            background: var(--bg-surface-2);
            color: var(--text-main);
            resize: none;
        }

        td select { cursor: pointer; }

        td textarea {
            height: auto;
            min-height: calc(var(--cell-height) * 2.5);
            min-width: 260px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 25;
            background: var(--bg-surface-1);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 10px var(--pamir-orange-glow);
            border: 1px solid var(--pamir-orange);
            color: var(--text-main);
        }

        input[type="checkbox"] {
            cursor: pointer;
            width: 14px;
            height: 14px;
            pointer-events: auto;
            accent-color: var(--pamir-orange);
        }

        td[data-col="5"],
        td[data-col="6"],
        td[data-col="7"],
        td[data-col="8"],
        td[data-col="9"] {
            cursor: pointer;
            user-select: none;
        }

        td[data-col="5"]:hover .cell-pill,
        td[data-col="6"]:hover .cell-pill,
        td[data-col="7"]:hover .cell-pill,
        td[data-col="8"]:hover .cell-pill,
        td[data-col="9"]:hover .pill-handling {
            filter: brightness(1.18);
            transform: translateY(-0.5px);
        }

        /* ==========================================================================
           CELL BADGES & PILLS (TEAMBLAST.ORG STYLE)
           ========================================================================== */
        .cell-pill {
            display: inline-flex;
            align-items: center;
            padding: 1px 7px;
            border-radius: 20px;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.4px;
            line-height: 1.4;
        }

        /* Move Direction Pills */
        .pill-move-IN { background: rgba(56, 189, 248, 0.12); color: var(--status-prov); border: 1px solid rgba(56, 189, 248, 0.3); }
        .pill-move-OUT { background: rgba(255, 92, 0, 0.12); color: var(--pamir-orange); border: 1px solid rgba(255, 92, 0, 0.3); }
        .pill-move-LOCAL { background: rgba(16, 185, 129, 0.12); color: var(--status-active); border: 1px solid rgba(16, 185, 129, 0.3); }
        .pill-move-OTHER { background: rgba(142, 142, 152, 0.14); color: var(--text-muted); border: 1px solid var(--border-strong); }

        /* Mode Pills */
        .pill-mode-SEA { background: rgba(14, 165, 233, 0.12); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
        .pill-mode-AIR { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .pill-mode-ROAD { background: rgba(234, 179, 8, 0.12); color: var(--status-idle); border: 1px solid rgba(234, 179, 8, 0.3); }
        .pill-mode-OTHER { background: rgba(142, 142, 152, 0.14); color: var(--text-muted); border: 1px solid var(--border-strong); }

        /* Type Pills */
        .pill-type-FCL { background: rgba(6, 182, 212, 0.12); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); }
        .pill-type-LCL { background: rgba(99, 102, 241, 0.12); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
        .pill-type-CONSOL { background: rgba(236, 72, 153, 0.12); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
        .pill-type-BTB { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .pill-type-FTL { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
        .pill-type-LTL { background: rgba(16, 185, 129, 0.12); color: var(--status-active); border: 1px solid rgba(16, 185, 129, 0.3); }
        .pill-type-OTHER { background: rgba(142, 142, 152, 0.14); color: var(--text-muted); border: 1px solid var(--border-strong); }

        /* Level Pills */
        .pill-level-DIRECT { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.32); }
        .pill-level-MASTER { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.32); }
        .pill-level-HOUSE { background: rgba(249, 115, 22, 0.12); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.32); }

        /* Handling Pills */
        .pill-handling {
            background: var(--bg-surface-3);
            color: var(--text-main);
            border: 1px solid var(--border-medium);
            border-radius: 2px;
            font-size: 10px;
            padding: 1px 6px;
        }
        .pill-handling-DOOR2DOOR,
        .pill-handling-DOOR { border-left: 2px solid #a855f7; }
        .pill-handling-DOOR2PORT { border-left: 2px solid #818cf8; }
        .pill-handling-PORT2DOOR,
        .pill-handling-PORT { border-left: 2px solid #38bdf8; }
        .pill-handling-FULL { border-left: 2px solid var(--pamir-orange); }
        .pill-handling-CUSTOMS { border-left: 2px solid #00d2ff; }
        .pill-handling-HAULAGE { border-left: 2px solid var(--status-active); }
        .pill-handling-HANDOVER { border-left: 2px solid var(--status-idle); }
        .pill-handling-OTHER { border-left: 2px solid var(--text-muted); }

        /* Date Badge */
        .date-badge {
            display: inline-flex;
            align-items: center;
            padding: 1px 6px;
            font-family: var(--font-mono);
            font-size: 11px;
            border-radius: 2px;
            letter-spacing: 0.4px;
            background: rgba(255, 92, 0, 0.09);
            color: var(--pamir-orange);
            border: 1px solid rgba(255, 92, 0, 0.28);
        }

        /* Container & Job No Badge */
        .job-no-badge {
            font-weight: 700;
            color: var(--text-main);
            letter-spacing: 0.4px;
        }

        .job-no-cell-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            gap: 6px;
        }

        .job-overview-actions {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            margin-left: auto;
            pointer-events: auto;
            flex-shrink: 0;
        }

        .job-overview-inline-link {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 1px 5px;
            font-family: var(--font-mono);
            font-size: 9.5px;
            font-weight: 700;
            line-height: 1.25;
            border-radius: 2px;
            text-decoration: none;
            cursor: pointer;
            background: rgba(56, 189, 248, 0.12);
            color: var(--status-prov);
            border: 1px solid rgba(56, 189, 248, 0.35);
            transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
        }

        .job-overview-inline-link:hover {
            background: rgba(255, 92, 0, 0.2);
            color: var(--pamir-orange);
            border-color: var(--pamir-orange);
            transform: translateY(-0.5px);
        }

        .job-overview-inline-link.is-linked {
            background: rgba(16, 185, 129, 0.15);
            color: var(--status-active);
            border-color: rgba(16, 185, 129, 0.45);
        }

        .job-overview-inline-link.is-linked:hover {
            background: rgba(16, 185, 129, 0.28);
            color: #ecfdf5;
            border-color: var(--status-active);
        }

        .job-overview-inline-link.is-sheet-btn {
            background: var(--bg-surface-3);
            color: var(--text-muted);
            border-color: var(--border-medium);
            padding: 1px 4px;
        }

        .job-overview-inline-link.is-sheet-btn:hover {
            color: var(--pamir-orange);
            border-color: var(--pamir-orange);
        }

        .job-overview-inline-link.is-empty-row {
            opacity: 0;
            font-size: 9px;
            padding: 1px 5px;
        }

        tr:hover .job-overview-inline-link.is-empty-row,
        tr.active-row .job-overview-inline-link.is-empty-row {
            opacity: 0.85;
        }

        .job-overview-inline-link.is-empty-row:hover {
            opacity: 1 !important;
        }

        .container-badge {
            font-family: var(--font-mono);
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--status-prov);
            background: rgba(56, 189, 248, 0.08);
            padding: 1px 6px;
            border-radius: 2px;
            border: 1px solid rgba(56, 189, 248, 0.25);
        }

        .hidden-col { display: none !important; }
        tr.hidden { display: none !important; }

        /* ==========================================================================
           MODALS & POPOVERS (TEAMBLAST.ORG HARDWARE TERMINAL STYLE)
           ========================================================================== */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(9, 9, 11, 0.8);
            backdrop-filter: blur(5px);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }

        html.light .modal-overlay {
            background: rgba(240, 240, 245, 0.75);
        }

        .modal-card {
            background: var(--bg-surface-1);
            border: 1px solid var(--pamir-orange);
            box-shadow: 0 0 30px rgba(255, 92, 0, 0.22);
            width: 100%;
            max-width: 480px;
            color: var(--text-main);
            overflow: hidden;
        }

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

        .modal-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-pixel);
            font-size: 11px;
            letter-spacing: 0.8px;
            color: var(--text-main);
        }

        .pixel-prefix {
            font-family: var(--font-pixel);
            color: #000000;
            background: var(--pamir-orange);
            padding: 1px 4px;
            font-size: 10px;
            line-height: 1;
        }

        .modal-body {
            padding: 18px;
            font-family: var(--font-mono);
            font-size: 12px;
        }

        .modal-footer {
            background: var(--bg-surface-2);
            border-top: 1px solid var(--border-medium);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
        }

        .field-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--text-dim);
            margin-bottom: 5px;
            text-transform: uppercase;
        }

        .field-input {
            width: 100%;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            padding: 8px 10px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 12px;
            outline: none;
            border-radius: 2px;
        }

        .field-input:focus {
            border-color: var(--pamir-orange);
            box-shadow: 0 0 0 1px var(--pamir-orange-glow);
        }

        /* Columns Dropdown Panel */
        .col-dropdown-panel {
            background: var(--bg-surface-1);
            border: 1px solid var(--pamir-orange);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 14px var(--pamir-orange-glow);
            color: var(--text-main);
            font-family: var(--font-mono);
        }

        /* ==========================================================================
           DATE & TIME PICKER POPUP (FOR CARGO DELIVERY & DATETIME COLUMNS)
           ========================================================================== */
        .datetime-cell-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: var(--cell-py) var(--cell-px);
            font-size: var(--font-size);
            font-family: var(--font-mono);
            box-sizing: border-box;
            background: var(--bg-surface-2);
            color: var(--pamir-orange);
            font-weight: 500;
            cursor: pointer;
        }

        .datetime-picker-popup {
            position: fixed;
            z-index: 1000;
            background: var(--bg-surface-1);
            border: 1px solid var(--pamir-orange);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 20px var(--pamir-orange-glow);
            width: 340px;
            color: var(--text-main);
            font-family: var(--font-mono);
            border-radius: 3px;
            animation: dtpFadeIn 0.12s ease-out;
            user-select: none;
        }

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

        .dtp-header {
            background: var(--bg-surface-2);
            border-bottom: 1px solid var(--border-medium);
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dtp-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-pixel);
            font-size: 10px;
            letter-spacing: 0.5px;
            color: var(--text-main);
        }

        .dtp-body {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 11px;
        }

        .dtp-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .dtp-row-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .dtp-quick-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
        }

        .dtp-pill {
            background: var(--bg-surface-3);
            border: 1px solid var(--border-subtle);
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: 10px;
            padding: 2.5px 7px;
            border-radius: 2px;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .dtp-pill:hover, .dtp-pill:focus {
            background: var(--bg-hover);
            color: var(--pamir-orange);
            border-color: var(--pamir-orange);
            outline: none;
        }

        .dtp-pill.active {
            background: var(--pamir-orange-subtle);
            color: var(--pamir-orange);
            border-color: var(--pamir-orange);
            font-weight: 600;
        }

        .dtp-preview-box {
            background: var(--bg-surface-2);
            border: 1px dashed var(--border-medium);
            padding: 6px 10px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
        }

        .dtp-preview-val {
            color: var(--pamir-orange);
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .dtp-footer {
            background: var(--bg-surface-2);
            border-top: 1px solid var(--border-medium);
            padding: 8px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }

        /* ==========================================================================
           MINIMAL BLUEPRINT FOOTER
           ========================================================================== */
        .minimal-footer {
            height: var(--footer-height);
            width: 100%;
            background-color: var(--bg-surface-1);
            border-top: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
            z-index: 40;
            flex-shrink: 0;
        }

        .footer-left, .footer-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sys-code {
            font-family: var(--font-pixel);
            font-size: 9px;
            color: var(--text-main);
            letter-spacing: 0.5px;
        }

        .f-sep { color: var(--border-strong); }
        .footer-center {
            display: flex;
            align-items: center;
            gap: 6px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            flex: 1 1 auto;
            min-width: 0;
            padding: 0 4px;
        }
        .footer-center::-webkit-scrollbar {
            display: none;
        }
        .f-hint-btn {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
        }
        .f-hint-tag {
            font-size: 8.5px;
            font-weight: 700;
            font-family: var(--font-pixel);
            color: var(--pamir-orange);
            background: var(--pamir-orange-subtle);
            border: 1px solid rgba(255, 92, 0, 0.4);
            border-radius: 2px;
            padding: 1px 5px;
            letter-spacing: 0.5px;
            transition: all var(--transition-fast);
        }
        .f-hint-tag:hover {
            background: var(--pamir-orange);
            color: #000;
        }
        .f-hint-list {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            color: var(--text-dim);
        }
        .f-hint-item {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
        }
        .f-hint-sep {
            color: var(--border-strong);
            opacity: 0.6;
            font-size: 8px;
        }
        .f-kbd {
            display: inline-block;
            padding: 0.5px 4px;
            font-size: 9px;
            font-family: var(--font-mono);
            font-weight: 700;
            line-height: 1.25;
            color: var(--text-main);
            background-color: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            border-bottom: 2px solid var(--border-strong);
            border-radius: 2px;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
            vertical-align: baseline;
            letter-spacing: 0.2px;
        }
        .f-hint-more {
            background: transparent;
            border: 1px solid var(--border-subtle);
            border-radius: 2px;
            color: var(--text-dim);
            font-size: 9px;
            font-family: var(--font-mono);
            font-weight: 700;
            padding: 1px 4px;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
            transition: all var(--transition-fast);
        }
        .f-hint-more:hover {
            color: var(--pamir-orange);
            border-color: var(--pamir-orange);
            background: var(--bg-surface-2);
        }
        .f-hint { font-size: 10.5px; color: var(--text-dim); }
        .secure-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--status-active);
            font-size: 10px;
            font-weight: 600;
        }
        .pulse-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--status-active);
            box-shadow: 0 0 8px var(--status-active);
        }
        .time-display {
            color: var(--pamir-orange);
            font-weight: 600;
        }

        @media (max-width: 1024px) {
            .footer-center { display: none; }
        }

        /* ==========================================================================
           FLOATING ACTION PAD (TODAY'S OPERATIONS & QUICK MEMO/TO-DO)
           ========================================================================== */
        .floating-pad {
            position: fixed;
            width: 370px;
            min-width: 310px;
            max-width: 580px;
            height: 520px;
            min-height: 260px;
            max-height: 85vh;
            background: var(--bg-surface-1);
            border: 1px solid var(--border-strong);
            border-radius: 6px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 92, 0, 0.35);
            z-index: 120;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-family: var(--font-mono);
            backdrop-filter: blur(12px);
            resize: both;
        }

        .floating-pad.collapsed {
            height: auto !important;
            min-height: 0 !important;
            resize: none !important;
        }

        .floating-pad.collapsed .floating-pad-body {
            display: none !important;
        }

        .floating-pad-header {
            background: var(--bg-surface-2);
            border-bottom: 1px solid var(--border-medium);
            padding: 8px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: move;
            user-select: none;
            touch-action: none;
            flex-shrink: 0;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .pad-drag-handle {
            color: var(--pamir-orange);
            font-size: 13px;
            line-height: 1;
            letter-spacing: -1px;
            cursor: grab;
            padding: 0 2px;
        }

        .pad-drag-handle:active {
            cursor: grabbing;
        }

        .pad-date-pill {
            font-size: 9px;
            font-weight: 700;
            padding: 1.5px 6px;
            border-radius: 3px;
            background: var(--pamir-orange-subtle);
            color: var(--pamir-orange);
            border: 1px solid rgba(255, 92, 0, 0.35);
            text-transform: uppercase;
            white-space: nowrap;
        }

        .pad-hdr-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            font-size: 11px;
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .pad-hdr-btn:hover {
            color: var(--text-main);
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        .pad-hdr-btn.close-btn:hover {
            color: #ffffff;
            background: var(--status-alert);
            border-color: var(--status-alert);
        }

        .floating-pad-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            min-height: 0;
        }

        /* Top Section: Today's Operations */
        .floating-pad-top-section {
            display: flex;
            flex-direction: column;
            flex: 0 0 50%;
            height: 50%;
            min-height: 60px;
            max-height: calc(100% - 60px);
            overflow: hidden;
            background: var(--bg-surface-1);
        }

        /* Resizer / Splitter between Top and Bottom Sections */
        .pad-section-resizer {
            height: 7px;
            background: var(--bg-surface-2);
            border-top: 1px solid var(--border-subtle);
            border-bottom: 1px solid var(--border-subtle);
            cursor: row-resize;
            user-select: none;
            touch-action: none;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background var(--transition-fast), border-color var(--transition-fast);
            position: relative;
            z-index: 10;
        }

        .pad-section-resizer:hover,
        .pad-section-resizer.resizing {
            background: var(--bg-hover);
            border-color: var(--pamir-orange);
        }

        .pad-resizer-line {
            width: 28px;
            height: 2px;
            background: var(--border-strong);
            border-radius: 1px;
            transition: background var(--transition-fast), width var(--transition-fast);
        }

        .pad-section-resizer:hover .pad-resizer-line,
        .pad-section-resizer.resizing .pad-resizer-line {
            background: var(--pamir-orange);
            width: 44px;
        }

        .pad-resizer-btn {
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-size: 7.5px;
            padding: 0 4px;
            cursor: pointer;
            line-height: 1;
            transition: color var(--transition-fast);
            z-index: 12;
            user-select: none;
        }

        .pad-resizer-btn:hover {
            color: var(--pamir-orange);
        }

        .pad-section-header {
            padding: 6px 10px;
            background: var(--bg-surface-2);
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.5px;
            flex-shrink: 0;
        }

        .pad-section-title {
            color: var(--text-main);
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .pad-badge-count {
            padding: 1px 6px;
            font-size: 9px;
            border-radius: 2px;
            background: rgba(16, 185, 129, 0.16);
            color: var(--status-active);
            border: 1px solid rgba(16, 185, 129, 0.35);
            font-weight: 700;
        }

        .pad-refresh-btn {
            background: transparent;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 12px;
            padding: 0 4px;
            line-height: 1;
        }

        .pad-refresh-btn:hover {
            color: var(--pamir-orange);
        }

        .pad-events-container {
            overflow-y: auto;
            padding: 6px;
            gap: 6px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .pad-event-card {
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            border-left: 3px solid var(--pamir-orange);
            border-radius: 3px;
            padding: 6px 8px;
            font-size: 10px;
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .pad-event-card:hover {
            background: var(--bg-hover);
            border-color: var(--pamir-orange);
            transform: translateX(2px);
        }

        .pad-event-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }

        .pad-event-badge {
            font-size: 8.5px;
            font-weight: 700;
            padding: 1.5px 5.5px;
            border-radius: 2px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .pad-event-job {
            font-weight: 700;
            color: var(--text-main);
            font-size: 10.5px;
        }

        .pad-event-meta {
            color: var(--text-muted);
            font-size: 9.5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .pad-empty-state {
            padding: 24px 12px;
            text-align: center;
            color: var(--text-dim);
            font-size: 10.5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin: auto;
        }

        /* Bottom Section: Quick Memo & To-Do */
        .floating-pad-bottom-section {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 60px;
            overflow: hidden;
            background: var(--bg-surface-1);
        }

        .pad-tab-bar {
            display: flex;
            background: var(--bg-surface-2);
            border-bottom: 1px solid var(--border-medium);
            flex-shrink: 0;
        }

        .pad-tab {
            flex: 1;
            padding: 6px 8px;
            font-size: 10px;
            font-weight: 700;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-muted);
            cursor: pointer;
            text-align: center;
            transition: all var(--transition-fast);
        }

        .pad-tab:hover {
            color: var(--text-main);
            background: var(--bg-surface-3);
        }

        .pad-tab.active {
            color: var(--pamir-orange);
            border-bottom-color: var(--pamir-orange);
            background: var(--bg-surface-1);
        }

        .pad-tab-panel {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 6px;
            overflow: hidden;
            min-height: 0;
        }

        .pad-memo-textarea {
            width: 100%;
            flex: 1;
            min-height: 65px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: 3px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 10.5px;
            padding: 6px 8px;
            resize: none;
            outline: none;
            line-height: 1.45;
        }

        .pad-memo-textarea:focus {
            border-color: var(--pamir-orange);
            box-shadow: 0 0 6px var(--pamir-orange-glow);
        }

        .pad-memo-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 5px;
            flex-shrink: 0;
            flex-wrap: wrap;
            gap: 4px;
        }

        /* To-Do Checklist */
        .pad-todo-input-row {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
            flex-shrink: 0;
        }

        .pad-todo-input {
            flex: 1;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: 3px;
            color: var(--text-main);
            font-family: var(--font-mono);
            font-size: 10.5px;
            padding: 4px 6px;
            outline: none;
        }

        .pad-todo-input:focus {
            border-color: var(--pamir-orange);
        }

        .pad-todo-list {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding-right: 2px;
        }

        .pad-todo-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 6px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: 2px;
            font-size: 10px;
            transition: all var(--transition-fast);
        }

        .pad-todo-item:hover {
            border-color: var(--border-medium);
        }

        .pad-todo-item.done {
            opacity: 0.55;
            background: var(--bg-surface-1);
        }

        .pad-todo-item.done .pad-todo-text {
            text-decoration: line-through;
            color: var(--text-dim);
        }

        .pad-todo-checkbox {
            cursor: pointer;
            accent-color: var(--pamir-orange);
        }

        .pad-todo-text {
            flex: 1;
            color: var(--text-main);
            word-break: break-word;
        }

        .pad-todo-delete-btn {
            background: transparent;
            border: none;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 12px;
            padding: 0 4px;
            line-height: 1;
        }

        .pad-todo-delete-btn:hover {
            color: var(--status-alert);
        }

        .pad-todo-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 5px;
            border-top: 1px solid var(--border-subtle);
            margin-top: 4px;
            flex-shrink: 0;
            flex-wrap: wrap;
            gap: 4px;
        }

        @keyframes rowPulseGlow {
            0% { background-color: rgba(255, 92, 0, 0.45) !important; outline: 2px solid var(--pamir-orange); }
            50% { background-color: rgba(56, 189, 248, 0.35) !important; outline: 2px solid var(--status-prov); }
            100% { background-color: inherit; outline: none; }
        }
        .row-highlight-flash td {
            animation: rowPulseGlow 1.8s ease-out;
        }

        /* ==========================================================================
           MULTI-USER AUTHENTICATION & ADMIN MANAGEMENT STYLES
           ========================================================================== */
        .user-pill-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--bg-surface-2);
            border: 1px solid var(--border-medium);
            color: var(--text-main);
            padding: 4px 9px;
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: 10.5px;
            font-weight: 600;
            border-radius: 2px;
            transition: border-color var(--transition-fast), background-color var(--transition-fast);
        }
        .user-pill-btn:hover {
            border-color: var(--pamir-orange);
            background: var(--bg-hover);
        }
        .user-role-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--status-active);
            box-shadow: 0 0 6px var(--status-active-glow);
        }
        .user-role-dot.is-admin {
            background: var(--pamir-orange);
            box-shadow: 0 0 6px var(--pamir-orange-glow);
        }

        /* Login Screen Layout */
        .auth-shell {
            min-height: 100dvh;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            background-color: var(--bg-black);
            background-image:
                linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 32px 32px;
        }
        html.light .auth-shell {
            background-image:
                linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
        }
        .auth-card {
            width: 100%;
            max-width: 430px;
            background: var(--bg-surface-1);
            border: 1px solid var(--border-strong);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        }

        /* ==========================================================================
           JOB DELEGATION & HANDOVER BADGES
           ========================================================================== */
        .delegation-pill {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 5px;
            font-family: var(--font-mono);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.3px;
            border-radius: 2px;
            cursor: pointer;
            white-space: nowrap;
            text-transform: uppercase;
            line-height: 1.3;
        }
        .delegation-pill-in {
            background: rgba(56, 189, 248, 0.16);
            color: var(--status-prov);
            border: 1px solid rgba(56, 189, 248, 0.45);
        }
        .delegation-pill-in:hover {
            background: rgba(56, 189, 248, 0.28);
            border-color: var(--status-prov);
        }
        .delegation-pill-out {
            background: rgba(234, 179, 8, 0.15);
            color: var(--status-idle);
            border: 1px solid rgba(234, 179, 8, 0.45);
        }
        .delegation-pill-out:hover {
            background: rgba(234, 179, 8, 0.28);
            border-color: var(--status-idle);
        }
        #spreadsheet tbody tr.delegated-in-row td:first-child {
            box-shadow: inset 3px 0 0 var(--status-prov);
        }
        #spreadsheet tbody tr.delegated-out-row td:first-child {
            box-shadow: inset 3px 0 0 var(--status-idle);
        }
        .delegate-mode-card {
            border: 1px solid var(--border-medium);
            background: var(--bg-surface-2);
            padding: 10px 12px;
            border-radius: 2px;
            cursor: pointer;
            transition: border-color var(--transition-fast), background-color var(--transition-fast);
        }
        .delegate-mode-card:hover {
            border-color: var(--border-strong);
            background: var(--bg-hover);
        }
        .delegate-mode-card.active {
            border-color: var(--pamir-orange);
            background: var(--pamir-orange-subtle);
        }

        /* ==========================================================================
           ORIGOLINK MODAL & NOTICE BOX THEME STYLES (LIGHT & DARK ADAPTIVE)
           ========================================================================== */
        .origo-notice-box {
            padding: 12px 14px;
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 12px;
            border-width: 1px;
            border-style: solid;
            color: var(--text-main);
            transition: background var(--transition-fast), border-color var(--transition-fast);
        }

        .origo-notice-box.customs {
            background: rgba(2, 132, 199, 0.08);
            border-color: var(--status-prov);
        }
        html.dark .origo-notice-box.customs,
        [data-theme="dark"] .origo-notice-box.customs {
            background: rgba(56, 189, 248, 0.12);
        }

        .origo-notice-box.transport {
            background: rgba(5, 150, 105, 0.08);
            border-color: var(--status-active);
        }
        html.dark .origo-notice-box.transport,
        [data-theme="dark"] .origo-notice-box.transport {
            background: rgba(16, 185, 129, 0.12);
        }

        .origo-notice-box.verified {
            background: rgba(5, 150, 105, 0.08);
            border-color: var(--status-active);
        }
        html.dark .origo-notice-box.verified,
        [data-theme="dark"] .origo-notice-box.verified {
            background: rgba(16, 185, 129, 0.10);
        }

        .origo-notice-box.override-blocked {
            background: rgba(225, 29, 72, 0.08);
            border-color: var(--status-alert);
            border-width: 2px;
        }
        html.dark .origo-notice-box.override-blocked,
        [data-theme="dark"] .origo-notice-box.override-blocked {
            background: rgba(244, 63, 94, 0.14);
        }

        .origo-row-badge {
            display: inline-flex;
            align-items: center;
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            background: var(--bg-surface-1);
            color: var(--text-main);
            border: 1px solid var(--border-strong);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .origo-prefix-pill {
            display: inline-flex;
            align-items: center;
            padding: 2px 7px;
            border-radius: 3px;
            font-family: var(--font-mono);
            font-weight: 800;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #ffffff !important;
        }
        .origo-prefix-pill.customs {
            background: #2563eb;
        }
        .origo-prefix-pill.transport {
            background: #059669;
        }

        .origo-meta-row {
            margin-top: 8px;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            color: var(--text-muted);
        }
        .origo-meta-row strong {
            color: var(--text-main);
            font-weight: 700;
        }

        .origo-mismatch-box {
            margin-top: 8px;
            padding: 8px 10px;
            background: rgba(225, 29, 72, 0.10);
            border: 1px solid var(--status-alert);
            color: var(--text-main);
            font-size: 11.5px;
            font-weight: 600;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .origo-mismatch-box svg {
            color: var(--status-alert);
            flex-shrink: 0;
        }

        .modal-header button:hover {
            color: var(--text-main) !important;
        }