/* TBHOS extracted legacy CSS - 20260702-subdomain-phase1 */

        :root {
            --sidebar-width: 260px;
            --primary-color: #2563eb;
            --primary-dark: #1d4ed8;
            --success-color: #16a34a;
            --danger-color: #dc2626;
            --bg-light: #f3f6fb;
            --card-bg: #ffffff;
            --text-main: #0f172a;
            --text-soft: #64748b;
            --border-color: #e2e8f0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-light);
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            color: var(--text-main);
            margin: 0;
        }

        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background: #fff;
            border-right: 1px solid var(--border-color);
            z-index: 1000;
            overflow-y: auto;
        }

        .brand-wrap {
            padding: 26px 22px 18px;
            border-bottom: 1px solid var(--border-color);
        }

        .brand-title {
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.3px;
            line-height: 1.2;
        }

        .brand-title .blue {
            color: var(--primary-color);
        }

        .brand-subtitle {
            margin-top: 6px;
            font-size: 11px;
            color: var(--text-soft);
        }

        .brand-header {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .brand-logo {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            overflow: hidden;
            background: #eff6ff;
            border: 1px solid #dbeafe;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            flex-shrink: 0;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
        }

        .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .brand-logo.has-image img {
            display: block;
        }

        .brand-logo.has-image .brand-logo-fallback {
            display: none;
        }

        .brand-logo-fallback {
            font-size: 20px;
        }

        .brand-text {
            min-width: 0;
            flex: 1;
        }

        .nav-link {
            color: #64748b;
            padding: 12px 16px;
            margin: 4px 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: 0.2s ease;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
        }

        .nav-link:hover {
            background: #eff6ff;
            color: var(--primary-color);
        }

        .nav-link.active {
            background: linear-gradient(135deg, var(--primary-color), #3b82f6);
            color: white !important;
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
        }

        .nav-link i {
            font-size: 16px;
        }

        .nav-category {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
            color: #94a3b8;
            padding: 18px 20px 6px 20px;
        }

        #content {
            margin-left: var(--sidebar-width);
            width: calc(100% - var(--sidebar-width));
            max-width: calc(100vw - var(--sidebar-width));
            min-width: 0;
            padding: 32px;
            overflow-x: hidden;
        }

        .content-section,
        .content-section > .row,
        .content-section .card,
        .content-section [class*="col-"] {
            min-width: 0;
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
            animation: fadeIn 0.28s ease;
        }

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

        .page-title {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            color: #0f172a;
        }

        .page-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 22px;
            flex-wrap: wrap;
        }

        .card {
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
            background: var(--card-bg);
        }

        .asset-card {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            border: none;
            transition: transform 0.25s ease;
        }

        .asset-card:hover {
            transform: translateY(-3px);
        }

        .asset-icon {
            font-size: 2.3rem;
            opacity: 0.9;
        }

        .table-stok thead th {
            text-align: center;
            background-color: #111827;
            color: white;
            border: 1px solid #1f2937;
            white-space: nowrap;
            padding: 12px;
            font-size: 12px;
        }

        .table-stok tbody td {
            text-align: center;
            border: 1px solid #e5e7eb;
            vertical-align: middle;
            font-size: 13px;
        }

        .sticky-col {
            position: sticky;
            left: 0;
            background-color: white !important;
            z-index: 5;
            text-align: left !important;
            min-width: 250px;
            box-shadow: 2px 0 8px rgba(0,0,0,0.04);
        }

        .img-preview {
            width: 46px;
            height: 46px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            overflow: hidden;
            background: #f8fafc;
            flex-shrink: 0;
        }

        .product-checkbox {
            transform: scale(1.15);
            cursor: pointer;
        }

        .table thead th {
            font-size: 12px;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table tbody td {
            font-size: 13px;
            vertical-align: middle;
        }

        .dropzone {
            border: 2px dashed #60a5fa;
            border-radius: 16px;
            padding: 40px 20px;
            text-align: center;
            background-color: #f8fbff;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dropzone:hover {
            background-color: #eef6ff;
            border-color: #2563eb;
        }

        .dropzone.dragover {
            background-color: #eaf3ff;
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }

        .out-shopee-context-info {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
            padding: 12px 14px;
            border: 1px solid #dbeafe;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .out-shopee-context-info.is-warning {
            border-color: #fde68a;
            background: linear-gradient(180deg, #fffdf5 0%, #fff7db 100%);
        }

        .out-shopee-context-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 4px;
        }

        .out-shopee-context-value {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.5;
        }

        .out-shopee-context-warning {
            display: none;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 700;
            color: #b45309;
        }

        .out-shopee-context-warning.show {
            display: inline-flex;
        }

        .import-progress {
            display: none;
            margin-top: 20px;
        }

        .history-card table thead th {
            background: #f8fafc;
            color: #334155;
            border-bottom: 1px solid #e2e8f0;
            font-weight: 800;
        }

        .section-note {
            color: #64748b;
            font-size: 13px;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border-radius: 12px !important;
            min-height: 44px;
        }

        .btn {
            border-radius: 12px;
            font-weight: 700;
        }

        .btn-sm {
            border-radius: 10px;
        }

        .table-responsive::-webkit-scrollbar,
        #sidebar::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .table-responsive::-webkit-scrollbar-thumb,
        #sidebar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        
        .multi-price-card {
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 16px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .multi-price-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .multi-price-title {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: -0.01em;
        }

        .multi-price-subtitle {
            font-size: 12px;
            color: #64748b;
            margin-top: 4px;
            line-height: 1.55;
        }

        .multi-price-list {
            display: grid;
            gap: 12px;
        }

        .multi-price-row {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            padding: 12px;
        }

        .multi-price-row.primary {
            border-color: #bfdbfe;
            background: #f8fbff;
        }

        .multi-price-row-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .multi-price-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .multi-price-row-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
            gap: 10px;
        }

        .multi-price-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            font-size: 12px;
            color: #64748b;
            background: #f8fafc;
        }

        .editable-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #2563eb;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .editable-tag-label {
            cursor: pointer;
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .editable-tag button {
            border: none;
            background: transparent;
            color: inherit;
            padding: 0;
            line-height: 1;
        }

        .editable-tag button:hover {
            opacity: 0.85;
        }


        .out-pane-switcher {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
        }

        .out-pane-btn {
            border: none;
            background: transparent;
            color: #64748b;
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.18s ease;
        }

        .out-pane-btn:hover {
            background: #f8fafc;
            color: #0f172a;
        }

        .out-pane-btn.active {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(220, 38, 38, 0.16);
        }

        .out-pane-btn.active[data-out-pane="exchange"] {
            background: linear-gradient(135deg, #f97316, #fb923c);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(249, 115, 22, 0.16);
        }
        .exchange-summary-card {
            border: 1px solid #fed7aa;
            background: linear-gradient(135deg, #fff7ed 0%, #ffffff 72%);
            border-radius: 18px;
            padding: 14px 16px;
            font-size: 12px;
            color: #9a3412;
            font-weight: 700;
        }

        .out-pane-content {
            display: none;
        }

        .out-pane-content.active {
            display: block;
            animation: fadeIn 0.24s ease;
        }

        .out-pane-shell {
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
            overflow: visible;
        }

        .out-pane-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .out-pane-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #dc2626;
            margin-bottom: 6px;
        }

        .out-pane-title {
            font-size: 19px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

        .out-pane-subtitle {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.6;
            color: #64748b;
            max-width: 760px;
        }

        .out-manual-table-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            overflow: visible;
        }

        .out-manual-table-scroll {
            overflow-x: auto;
            overflow-y: visible;
            padding: 0 0 18px;
        }

        .out-manual-table {
            min-width: 1680px;
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        .out-manual-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc;
            color: #475569;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 10px 12px;
            border-bottom: 1px solid #e2e8f0;
            white-space: nowrap;
        }

        .out-manual-table tbody td {
            padding: 8px 10px 14px;
            border-bottom: 1px solid #eef2f7;
            vertical-align: top;
            background: #ffffff;
        }

        .out-manual-table tbody tr:last-child td {
            border-bottom: none;
            padding-bottom: 22px;
        }

        .out-manual-table .batch-produk-cell {
            min-width: 320px;
        }

        .out-manual-table .batch-hpp-average-cell,
        .out-manual-table .batch-marketplace-cell,
        .out-manual-table .batch-store-cell,
        .out-manual-table .batch-warna-cell,
        .out-manual-table .batch-size-cell,
        .out-manual-table .batch-no-pesanan-cell {
            min-width: 160px;
        }

        .out-manual-table .batch-jumlah-cell,
        .out-manual-table .batch-harga-jual-cell,
        .out-manual-table .batch-aksi-cell {
            min-width: 120px;
        }

        .out-manual-row-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: #fee2e2;
            color: #b91c1c;
            font-size: 11px;
            font-weight: 800;
        }

        .out-manual-table .form-control,
        .out-manual-table .form-select {
            min-height: 36px;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 10px !important;
        }

        .out-manual-table .product-search-input {
            padding-right: 34px;
        }

        .out-manual-table .product-search-icon {
            right: 11px;
            font-size: 12px;
        }

        .out-manual-table .product-search-hint {
            font-size: 10px;
            margin-top: 5px;
        }

        .out-manual-table .product-suggestion-name {
            font-size: 12px;
        }

        .out-manual-table .product-suggestion-meta {
            font-size: 10px;
        }

        .out-manual-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 18px;
        }

        .out-manual-actions-left,
        .out-manual-actions-right {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }

        .out-manual-summary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #fff1f2;
            color: #9f1239;
            font-size: 12px;
            font-weight: 700;
            border: 1px solid #fecdd3;
        }



        .return-marketplace-form-shell {
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 18px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }
        .return-marketplace-hero {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .return-marketplace-hero h5 { margin: 10px 0 6px; font-weight: 800; color: #0f172a; }
        .return-marketplace-hero p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.65; max-width: 760px; }
        .return-marketplace-mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; min-width: min(520px, 100%); }
        .return-marketplace-mini-kpis > div { border: 1px solid #dbeafe; background: #f8fbff; border-radius: 16px; padding: 12px; }
        .return-marketplace-mini-kpis span { display: block; font-size: 10px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
        .return-marketplace-mini-kpis strong { display: block; margin-top: 5px; font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .return-marketplace-flow-note { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
        .return-marketplace-flow-note div { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 800; }
        .return-marketplace-sheet-wrap { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; overflow: hidden; }
        .return-marketplace-sheet-scroll { overflow-x: auto; padding-bottom: 8px; }
        .return-marketplace-sheet-table { min-width: 1840px; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
        .return-marketplace-sheet-table thead th { background: #f8fafc; color: #475569; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #e2e8f0; padding: 10px; white-space: nowrap; }
        .return-marketplace-sheet-table tbody td { border-bottom: 1px solid #eef2f7; border-right: 1px solid #eef2f7; padding: 8px; vertical-align: top; background: #fff; }
        .return-marketplace-sheet-table .form-control, .return-marketplace-sheet-table .form-select, .return-marketplace-cost-panel .form-control { min-height: 36px; font-size: 12px; border-radius: 10px !important; padding: 6px 9px; }
        .rm-col-no { width: 52px; } .rm-col-date { width: 180px; } .rm-col-market,.rm-col-store { width: 160px; } .rm-col-order,.rm-col-resi,.rm-col-customer { width: 170px; } .rm-col-product { width: 320px; } .rm-col-variant { width: 140px; } .rm-col-qty { width: 90px; } .rm-col-condition { width: 170px; } .rm-col-reason { width: 160px; }
        .return-sheet-row-number { display: inline-flex; width: 28px; height: 28px; border-radius: 999px; align-items: center; justify-content: center; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 900; }
        .return-cell-hint { font-size: 10px; color: #64748b; margin-top: 5px; line-height: 1.35; }
        .return-marketplace-cost-panel { border: 1px solid #dbeafe; border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); padding: 16px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05); }
        .return-cost-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed #dbeafe; }
        .return-cost-title h6 { margin: 0; font-weight: 900; color: #0f172a; display: inline-flex; align-items: center; gap: 8px; }
        .return-cost-title h6::before { content: '\F63B'; font-family: 'bootstrap-icons'; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 14px; }
        .return-cost-title p { margin: 6px 0 0; font-size: 12px; color: #64748b; line-height: 1.55; max-width: 720px; }
        .return-cost-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr); gap: 12px; align-items: stretch; }
        .return-cost-field { position: relative; border: 1px solid #e2e8f0; background: #fff; border-radius: 16px; padding: 14px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035); }
        .return-cost-field.featured { border-color: #bfdbfe; background: linear-gradient(180deg, #ffffff, #f8fbff); }
        .return-cost-field.total { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #ffffff); }
        .return-cost-field label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 900; color: #334155; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .035em; }
        .return-cost-field label::after { content: 'Manual'; display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
        .return-cost-field.total label::after { content: 'Auto'; background: #fef3c7; color: #92400e; }
        .return-cost-field .form-control { min-height: 42px !important; font-size: 14px !important; font-weight: 800; border-radius: 12px !important; background: #ffffff; }
        .return-cost-field .form-control:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08); }
        .return-cost-field small { display: block; margin-top: 8px; font-size: 11px; color: #64748b; line-height: 1.45; min-height: 32px; }
        .return-cost-formula { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 14px; background: #eff6ff; color: #1e40af; font-size: 12px; font-weight: 800; }
        .return-cost-formula span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 5px 10px; border-radius: 999px; background: #ffffff; border: 1px solid #bfdbfe; }
        .return-marketplace-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
        .return-action-info { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; color: #1d4ed8; font-size: 12px; font-weight: 800; }
        @media (max-width: 1200px) { .return-cost-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } }
        @media (max-width: 768px) { .return-marketplace-mini-kpis, .return-cost-grid { grid-template-columns: 1fr; } }

        .stok-in-pane-switcher {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
            flex-wrap: wrap;
        }

        .stok-in-pane-btn {
            border: none;
            background: transparent;
            color: #64748b;
            padding: 9px 14px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .stok-in-pane-btn:hover {
            background: #f8fafc;
            color: #0f172a;
        }

        .stok-in-pane-btn.active {
            background: linear-gradient(135deg, #16a34a, #22c55e);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(22, 163, 74, 0.14);
        }

        .stok-in-pane-content {
            display: none;
        }

        .stok-in-pane-content.active {
            display: block;
            animation: fadeIn 0.24s ease;
        }

        .stok-in-legacy-note {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            margin-bottom: 16px;
            border-radius: 14px;
            border: 1px solid #fde68a;
            background: #fffbeb;
            color: #92400e;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.55;
        }


        /* Stok In solid theme: selaras dengan gaya Stok Out, tanpa warna merah */
        #in-section .page-head {
            align-items: flex-start;
        }

        #in-section .section-note {
            max-width: 760px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
        }

        .stok-in-modern-shell {
            border: 1px solid rgba(226, 232, 240, 0.95) !important;
            border-radius: 22px !important;
            background: #ffffff !important;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06) !important;
            overflow: visible;
        }

        .stok-in-modern-shell label,
        .stok-in-modern-shell .small.fw-bold {
            font-size: 12px;
            font-weight: 700 !important;
            color: #475569;
            margin-bottom: 6px;
        }

        .stok-in-modern-shell .form-control,
        .stok-in-modern-shell .form-select {
            min-height: 40px;
            border-radius: 12px !important;
            border-color: #dbe3ef;
            font-size: 12px;
            color: #0f172a;
            box-shadow: none;
        }

        .stok-in-modern-shell .form-control:focus,
        .stok-in-modern-shell .form-select:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }

        .return-marketplace-form-shell {
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 18px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }
        .return-marketplace-hero {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .return-marketplace-hero h5 { margin: 10px 0 6px; font-weight: 800; color: #0f172a; }
        .return-marketplace-hero p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.65; max-width: 760px; }
        .return-marketplace-mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; min-width: min(520px, 100%); }
        .return-marketplace-mini-kpis > div { border: 1px solid #dbeafe; background: #f8fbff; border-radius: 16px; padding: 12px; }
        .return-marketplace-mini-kpis span { display: block; font-size: 10px; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
        .return-marketplace-mini-kpis strong { display: block; margin-top: 5px; font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .return-marketplace-flow-note { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
        .return-marketplace-flow-note div { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 800; }
        .return-marketplace-sheet-wrap { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; overflow: hidden; }
        .return-marketplace-sheet-scroll { overflow-x: auto; padding-bottom: 8px; }
        .return-marketplace-sheet-table { min-width: 1840px; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
        .return-marketplace-sheet-table thead th { background: #f8fafc; color: #475569; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #e2e8f0; padding: 10px; white-space: nowrap; }
        .return-marketplace-sheet-table tbody td { border-bottom: 1px solid #eef2f7; border-right: 1px solid #eef2f7; padding: 8px; vertical-align: top; background: #fff; }
        .return-marketplace-sheet-table .form-control, .return-marketplace-sheet-table .form-select, .return-marketplace-cost-panel .form-control { min-height: 36px; font-size: 12px; border-radius: 10px !important; padding: 6px 9px; }
        .rm-col-no { width: 52px; } .rm-col-date { width: 180px; } .rm-col-market,.rm-col-store { width: 160px; } .rm-col-order,.rm-col-resi,.rm-col-customer { width: 170px; } .rm-col-product { width: 320px; } .rm-col-variant { width: 140px; } .rm-col-qty { width: 90px; } .rm-col-condition { width: 170px; } .rm-col-reason { width: 160px; }
        .return-sheet-row-number { display: inline-flex; width: 28px; height: 28px; border-radius: 999px; align-items: center; justify-content: center; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 900; }
        .return-cell-hint { font-size: 10px; color: #64748b; margin-top: 5px; line-height: 1.35; }
        .return-marketplace-cost-panel { border: 1px solid #dbeafe; border-radius: 20px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); padding: 16px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05); }
        .return-cost-title { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed #dbeafe; }
        .return-cost-title h6 { margin: 0; font-weight: 900; color: #0f172a; display: inline-flex; align-items: center; gap: 8px; }
        .return-cost-title h6::before { content: '\F63B'; font-family: 'bootstrap-icons'; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 14px; }
        .return-cost-title p { margin: 6px 0 0; font-size: 12px; color: #64748b; line-height: 1.55; max-width: 720px; }
        .return-cost-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(240px, 1fr); gap: 12px; align-items: stretch; }
        .return-cost-field { position: relative; border: 1px solid #e2e8f0; background: #fff; border-radius: 16px; padding: 14px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035); }
        .return-cost-field.featured { border-color: #bfdbfe; background: linear-gradient(180deg, #ffffff, #f8fbff); }
        .return-cost-field.total { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #ffffff); }
        .return-cost-field label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 900; color: #334155; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .035em; }
        .return-cost-field label::after { content: 'Manual'; display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 9px; font-weight: 900; letter-spacing: .04em; }
        .return-cost-field.total label::after { content: 'Auto'; background: #fef3c7; color: #92400e; }
        .return-cost-field .form-control { min-height: 42px !important; font-size: 14px !important; font-weight: 800; border-radius: 12px !important; background: #ffffff; }
        .return-cost-field .form-control:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08); }
        .return-cost-field small { display: block; margin-top: 8px; font-size: 11px; color: #64748b; line-height: 1.45; min-height: 32px; }
        .return-cost-formula { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 14px; background: #eff6ff; color: #1e40af; font-size: 12px; font-weight: 800; }
        .return-cost-formula span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 5px 10px; border-radius: 999px; background: #ffffff; border: 1px solid #bfdbfe; }
        .return-marketplace-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
        .return-action-info { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; color: #1d4ed8; font-size: 12px; font-weight: 800; }
        @media (max-width: 1200px) { .return-cost-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } }
        @media (max-width: 768px) { .return-marketplace-mini-kpis, .return-cost-grid { grid-template-columns: 1fr; } }

        .stok-in-pane-switcher {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
            flex-wrap: wrap;
        }

        .stok-in-pane-btn {
            border: none;
            background: transparent;
            color: #64748b;
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.02em;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .stok-in-pane-btn:hover {
            background: #f8fafc;
            color: #0f172a;
        }

        .stok-in-pane-btn.active[data-stok-in-pane="masuk"] {
            background: linear-gradient(135deg, #16a34a, #22c55e);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(22, 163, 74, 0.16);
        }

        .stok-in-pane-btn.active[data-stok-in-pane="awal"] {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
        }

        .stok-in-pane-btn.active[data-stok-in-pane="return"] {
            background: linear-gradient(135deg, #475569, #64748b);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(71, 85, 105, 0.16);
        }
        .stok-in-pane-btn.active[data-stok-in-pane="return_dropship"] {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(124, 58, 237, 0.16);
        }
        .stok-in-pane-btn.active[data-stok-in-pane="packing"] {
            background: linear-gradient(135deg, #0f766e, #14b8a6);
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(20, 184, 166, 0.16);
        }


        .stok-in-pane-content {
            display: none;
        }

        .stok-in-pane-content.active {
            display: block;
            animation: fadeIn 0.24s ease;
        }

        .stok-in-pane-header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 18px;
            padding: 16px 18px;
            border-radius: 18px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
        }

        .stok-in-pane-header::before {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: 5px;
            border-radius: 18px 0 0 18px;
            background: #16a34a;
        }

        .stok-in-pane-header.stok-in-pane-header-masuk {
            border-color: #bbf7d0;
            background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 72%);
        }

        .stok-in-pane-header.stok-in-pane-header-awal {
            border-color: #bfdbfe;
            background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
        }

        .stok-in-pane-header.stok-in-pane-header-awal::before {
            background: #2563eb;
        }

        .stok-in-pane-header.stok-in-pane-header-return {
            border-color: #cbd5e1;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 72%);
        }

        .stok-in-pane-header.stok-in-pane-header-return::before {
            background: #64748b;
        }

        .stok-in-pane-title {
            font-size: 19px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .stok-in-pane-subtitle {
            margin-top: 5px;
            font-size: 12px;
            line-height: 1.55;
            color: #64748b;
            font-weight: 600;
        }

        .stok-in-pane-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .stok-in-legacy-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            color: #475569;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.03em;
        }

        .stok-in-help-wrap {
            position: relative;
            display: inline-flex;
        }

        .stok-in-help-btn {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid #cbd5e1;
            background: #ffffff;
            color: #475569;
            font-size: 12px;
            font-weight: 900;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.16s ease;
        }

        .stok-in-help-btn:hover,
        .stok-in-help-btn.active {
            background: #eff6ff;
            color: #2563eb;
            border-color: #bfdbfe;
        }

        .stok-in-help-popover {
            display: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            z-index: 5200;
            width: min(320px, calc(100vw - 32px));
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid #dbeafe;
            background: #ffffff;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
            color: #334155;
            font-size: 12px;
            line-height: 1.55;
        }

        .stok-in-help-popover.show {
            display: block;
        }

        .stok-in-help-popover ul {
            margin: 0;
            padding-left: 18px;
        }

        .stok-in-soft-card,
        .stok-in-modern-shell .batch-card,
        .stok-in-modern-shell .batch-row,
        .stok-in-modern-shell .stok-awal-matrix-card,
        .stok-in-modern-shell #in_supplier_panel {
            border: 1px solid #e2e8f0 !important;
            border-radius: 18px !important;
            background: #ffffff !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
        }

        .stok-in-modern-shell #in_supplier_panel .card-body,
        .stok-in-soft-card .card-body {
            padding: 18px !important;
        }

        .stok-in-modern-shell .batch-card {
            padding: 14px;
            border-style: solid !important;
            background: #f8fafc !important;
        }

        .stok-in-modern-shell .batch-row {
            padding: 13px;
            margin-bottom: 12px;
        }

        .stok-in-modern-shell .batch-row-title {
            font-size: 11px;
            color: #475569;
            letter-spacing: 0.05em;
        }

        .stok-in-modern-shell .batch-summary {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
            border-radius: 14px;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 700;
        }

        .stok-in-modern-shell .hero-badge-soft {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            border-radius: 999px;
            padding: 7px 10px;
            font-size: 11px;
            font-weight: 800;
        }

        .stok-in-modern-shell #btnSubmitStokInMassal.btn-success {
            background: linear-gradient(135deg, #16a34a, #22c55e) !important;
            border-color: #16a34a !important;
            box-shadow: 0 12px 24px rgba(22, 163, 74, 0.18) !important;
        }

        .stok-in-modern-shell #btnSubmitStokInMassal.btn-warning {
            background: linear-gradient(135deg, #475569, #64748b) !important;
            border-color: #475569 !important;
            color: #ffffff !important;
            box-shadow: 0 12px 24px rgba(71, 85, 105, 0.16) !important;
        }

        .stok-in-modern-shell .btn-outline-success {
            color: #15803d;
            border-color: #86efac;
            background: #ffffff;
        }

        .stok-in-modern-shell .btn-outline-success:hover {
            color: #ffffff;
            background: #16a34a;
            border-color: #16a34a;
        }

        .stok-in-modern-shell .table thead th,
        .stok-in-modern-shell .table-stok thead th {
            background: #f8fafc !important;
            color: #475569 !important;
            border-color: #e2e8f0 !important;
            font-size: 11px;
            font-weight: 800;
            padding: 9px 10px;
        }

        .stok-in-modern-shell .table tbody td,
        .stok-in-modern-shell .table-stok tbody td {
            font-size: 12px;
            padding: 8px 10px;
        }

        .stok-in-modern-shell .stok-awal-matrix-copy {
            display: none;
        }

        .stok-in-modern-shell .stok-awal-matrix-title {
            font-size: 14px;
            font-weight: 800;
            color: #0f172a;
        }

        .stok-in-legacy-note {
            display: none !important;
        }


        @media (max-width: 991.98px) {
            .inbon-summary-grid.inbon-summary-grid-supplier {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .multi-price-row-grid {
                grid-template-columns: 1fr;
            }
        }

        .batch-card {
            border: 1px dashed #cbd5e1;
            border-radius: 16px;
            padding: 16px;
            background: #f8fafc;
        }

        .batch-row {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 16px;
            background: #fff;
            margin-bottom: 14px;
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
        }

        .batch-row:last-child {
            margin-bottom: 0;
        }

        .batch-row-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .batch-row-title {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #475569;
            margin: 0;
        }

        .batch-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .batch-summary {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e3a8a;
            border-radius: 14px;
            padding: 12px 14px;
            font-size: 13px;
            font-weight: 600;
        }

        .product-search-wrap {
            position: relative;
        }

        .product-search-input {
            padding-right: 40px;
        }

        .product-search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            pointer-events: none;
            z-index: 2;
        }

        .product-suggestions {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #dbeafe;
            border-radius: 14px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
            padding: 8px;
            z-index: 30;
            max-height: 290px;
            overflow-y: auto;
            display: none;
        }

        body > .product-suggestions {
            position: fixed;
            inset: auto auto auto auto;
            z-index: 5000;
            min-width: 260px;
            max-width: calc(100vw - 24px);
            pointer-events: auto;
        }

        .product-suggestions.show {
            display: block;
        }

        .product-suggestion-item {
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .product-suggestion-item:hover,
        .product-suggestion-item.active {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .product-suggestion-name {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.35;
        }

        .product-suggestion-meta {
            font-size: 11px;
            color: #64748b;
            margin-top: 3px;
        }

        .product-search-hint {
            margin-top: 6px;
            font-size: 11px;
            color: #94a3b8;
        }


        .out-shopee-map-search {
            position: relative;
            min-width: 320px;
        }

        .out-shopee-map-search-input {
            padding-right: 68px;
            font-size: 12px;
            min-height: 38px;
        }

        .out-shopee-map-search-actions {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            z-index: 2;
            color: #94a3b8;
        }

        .out-shopee-map-search-clear {
            border: none;
            background: transparent;
            padding: 0;
            line-height: 1;
            color: #94a3b8;
            display: none;
        }

        .out-shopee-map-search-clear.show {
            display: inline-flex;
        }

        .out-shopee-map-search-clear:hover {
            color: #475569;
        }

        .out-shopee-map-search-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #dbeafe;
            border-radius: 14px;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
            padding: 8px;
            max-height: 320px;
            overflow-y: auto;
            z-index: 35;
            display: none;
        }

        .out-shopee-map-search-menu.show {
            display: block;
        }

        .out-shopee-map-search-item {
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 10px 12px;
            cursor: pointer;
            transition: all 0.16s ease;
        }

        .out-shopee-map-search-item:hover,
        .out-shopee-map-search-item.active {
            background: #eff6ff;
            border-color: #bfdbfe;
        }

        .out-shopee-map-search-name {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
        }

        .out-shopee-map-search-meta {
            font-size: 11px;
            color: #64748b;
            margin-top: 3px;
        }

        .out-shopee-map-search-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            padding: 12px;
            text-align: center;
            font-size: 11px;
            color: #64748b;
            background: #f8fafc;
        }

        .out-shopee-map-search mark {
            background: #fef08a;
            color: inherit;
            padding: 0 1px;
            border-radius: 4px;
        }

        .out-shopee-map-search-hint {
            margin-top: 6px;
            font-size: 10px;
            color: #94a3b8;
        }


        .analytics-kpi-card {
            border-radius: 24px;
            border: 1px solid rgba(203, 213, 225, 0.82);
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            position: relative;
        }

        .analytics-kpi-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, #cbd5e1, rgba(203, 213, 225, 0.18));
        }

        .analytics-kpi-card.analytics-accent-blue::before {
            background: linear-gradient(90deg, #2563eb, #60a5fa);
        }

        .analytics-kpi-card.analytics-accent-green::before {
            background: linear-gradient(90deg, #059669, #34d399);
        }

        .analytics-kpi-card.analytics-accent-red::before {
            background: linear-gradient(90deg, #dc2626, #fb7185);
        }

        .analytics-kpi-card.analytics-accent-amber::before {
            background: linear-gradient(90deg, #d97706, #fbbf24);
        }

        .analytics-kpi-card.analytics-accent-slate::before {
            background: linear-gradient(90deg, #475569, #94a3b8);
        }

        .analytics-kpi-card.analytics-accent-violet::before {
            background: linear-gradient(90deg, #7c3aed, #a78bfa);
        }

        .analytics-kpi-card.analytics-accent-emerald::before {
            background: linear-gradient(90deg, #047857, #10b981);
        }

        .analytics-kpi-card.analytics-accent-rose::before {
            background: linear-gradient(90deg, #e11d48, #fb7185);
        }

        .analytics-kpi-card.analytics-accent-cyan::before {
            background: linear-gradient(90deg, #0891b2, #67e8f9);
        }

        .analytics-kpi-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 10px;
        }

        .analytics-kpi-value {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.04;
            letter-spacing: -0.03em;
            color: #0f172a;
        }

        .analytics-kpi-sub {
            margin-top: 10px;
            font-size: 12px;
            color: #64748b;
            font-weight: 600;
            line-height: 1.55;
        }

        .analytics-kpi-icon {
            width: 58px;
            height: 58px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            opacity: 1;
            flex-shrink: 0;
            background: #eff6ff;
            color: #1d4ed8;
            box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.95);
        }

        .analytics-kpi-card .analytics-kpi-icon.text-success,
        .analytics-kpi-card .analytics-kpi-icon.text-danger,
        .analytics-kpi-card .analytics-kpi-icon.text-warning,
        .analytics-kpi-card .analytics-kpi-icon.text-primary,
        .analytics-kpi-card .analytics-kpi-icon.text-secondary {
            color: inherit !important;
        }

        .analytics-kpi-card.analytics-accent-blue .analytics-kpi-icon {
            background: rgba(37, 99, 235, 0.10);
            color: #2563eb;
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.45);
        }

        .analytics-kpi-card.analytics-accent-green .analytics-kpi-icon,
        .analytics-kpi-card.analytics-accent-emerald .analytics-kpi-icon {
            background: rgba(5, 150, 105, 0.10);
            color: #059669;
            box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.45);
        }

        .analytics-kpi-card.analytics-accent-red .analytics-kpi-icon,
        .analytics-kpi-card.analytics-accent-rose .analytics-kpi-icon {
            background: rgba(225, 29, 72, 0.10);
            color: #e11d48;
            box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.38);
        }

        .analytics-kpi-card.analytics-accent-amber .analytics-kpi-icon {
            background: rgba(217, 119, 6, 0.12);
            color: #d97706;
            box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.42);
        }

        .analytics-kpi-card.analytics-accent-violet .analytics-kpi-icon {
            background: rgba(124, 58, 237, 0.10);
            color: #7c3aed;
            box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.44);
        }

        .analytics-kpi-card.analytics-accent-slate .analytics-kpi-icon {
            background: rgba(71, 85, 105, 0.10);
            color: #475569;
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.42);
        }

        .analytics-kpi-card.analytics-accent-cyan .analytics-kpi-icon {
            background: rgba(8, 145, 178, 0.10);
            color: #0891b2;
            box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.44);
        }

        .analytics-summary-layout {
            row-gap: 1rem;
        }

        .analytics-summary-layout .analytics-kpi-hero {
            min-height: 100%;
            border-radius: 24px;
            padding: 24px !important;
            border: 1px solid rgba(203, 213, 225, 0.92);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
        }

        .analytics-summary-layout .analytics-kpi-hero .analytics-kpi-label {
            color: #475569;
            margin-bottom: 8px;
        }

        .analytics-summary-layout .analytics-kpi-hero .analytics-kpi-value {
            color: #0f172a;
        }

        .analytics-summary-layout .analytics-kpi-hero .analytics-kpi-sub {
            color: #64748b;
        }

        .analytics-kpi-hero.analytics-hero-omset {
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eff6ff 100%);
            border-color: rgba(191, 219, 254, 0.95);
            box-shadow: 0 18px 38px rgba(37, 99, 235, 0.10);
        }

        .analytics-kpi-hero.analytics-hero-profit {
            background: linear-gradient(135deg, #ffffff 0%, #f7fcfa 58%, #ecfdf5 100%);
            border-color: rgba(167, 243, 208, 0.95);
            box-shadow: 0 18px 38px rgba(4, 120, 87, 0.10);
        }

        .analytics-kpi-hero.analytics-hero-omset::before,
        .analytics-kpi-hero.analytics-hero-profit::before {
            display: none;
        }

        .analytics-kpi-hero .analytics-kpi-icon {
            width: 60px;
            height: 60px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.72);
            color: #334155 !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 8px 18px rgba(15, 23, 42, 0.06);
            backdrop-filter: blur(6px);
        }

        .analytics-kpi-hero.analytics-hero-omset .analytics-kpi-icon {
            background: rgba(239, 246, 255, 0.92);
            color: #2563eb !important;
            box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.85), 0 8px 18px rgba(37, 99, 235, 0.08);
        }

        .analytics-kpi-hero.analytics-hero-profit .analytics-kpi-icon {
            background: rgba(236, 253, 245, 0.96);
            color: #059669 !important;
            box-shadow: inset 0 0 0 1px rgba(167, 243, 208, 0.85), 0 8px 18px rgba(5, 150, 105, 0.08);
        }

        .analytics-kpi-value-hero {
            font-size: clamp(1.55rem, 2.6vw, 2.45rem);
            line-height: 1.08;
            letter-spacing: -0.03em;
            word-break: normal;
            overflow-wrap: anywhere;
        }

        .analytics-kpi-sub-hero {
            font-size: 12px;
            margin-top: 10px;
            color: #64748b !important;
        }

        .analytics-kpi-icon-hero {
            font-size: 1.55rem;
        }

        .analytics-kpi-compact .analytics-kpi-value-compact {
            font-size: clamp(1.02rem, 1.55vw, 1.38rem);
            line-height: 1.15;
            letter-spacing: -0.02em;
            word-break: normal;
            overflow-wrap: anywhere;
        }

        .analytics-kpi-compact {
            border-radius: 20px;
        }

        .analytics-kpi-compact .analytics-kpi-label {
            margin-bottom: 8px;
        }

        .analytics-kpi-compact .analytics-kpi-sub {
            margin-top: 8px;
            font-size: 11px;
            line-height: 1.45;
        }

        .analytics-kpi-compact .analytics-kpi-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            font-size: 1.35rem;
        }

        .analytics-filter-card.analytics-filter-card-minimal {
            padding: 18px !important;
            border-radius: 20px;
        }

        .analytics-toolbar-bar {
            display: flex;
            align-items: end;
            gap: 12px;
            flex-wrap: wrap;
        }

        .analytics-toolbar-field {
            min-width: 140px;
            flex: 0 0 auto;
        }

        .analytics-toolbar-field.analytics-toolbar-field-wide {
            min-width: 170px;
        }

        .analytics-toolbar-field label {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 6px;
        }

        .analytics-toolbar-actions {
            display: flex;
            align-items: end;
            gap: 10px;
            margin-left: auto;
            flex-wrap: wrap;
        }

        .analytics-toolbar-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        .analytics-toolbar-helper {
            font-size: 12px;
            color: #64748b;
            font-weight: 600;
        }

        .analytics-master-modal .modal-content {
            border: 1px solid rgba(191, 219, 254, 0.9);
            border-radius: 22px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
        }

        .analytics-master-modal .modal-header,
        .analytics-master-modal .modal-footer {
            border-color: #e2e8f0;
        }

        .analytics-master-modal .modal-title {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
        }

        .analytics-master-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .analytics-section-shell .analytics-shell-head-minimal {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .analytics-section-shell .analytics-shell-head-minimal .analytics-group-title {
            margin-bottom: 0;
        }

        .analytics-group-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #475569;
        }

        .analytics-group-title i {
            width: 32px;
            height: 32px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #e2e8f0;
            color: #0f172a;
        }

        .analytics-section-shell {
            border-radius: 28px;
            border: 1px solid rgba(191, 219, 254, 0.65);
            background:
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 24%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
        }

        .analytics-section-shell .section-note {
            max-width: 780px;
        }

        .analytics-list-card {
            border-radius: 22px;
        }

        [data-theme="dark"] .analytics-kpi-card {
            background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
            border-color: rgba(51, 65, 85, 0.9);
            box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
        }

        [data-theme="dark"] .analytics-kpi-value {
            color: #f8fafc;
        }

        [data-theme="dark"] .analytics-kpi-sub,
        [data-theme="dark"] .analytics-kpi-label,
        [data-theme="dark"] .analytics-group-title {
            color: #cbd5e1;
        }

        [data-theme="dark"] .analytics-group-title i {
            background: rgba(30, 41, 59, 0.95);
            color: #e2e8f0;
        }

        [data-theme="dark"] .analytics-section-shell {
            border-color: rgba(37, 99, 235, 0.24);
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 24%),
                linear-gradient(180deg, #0f172a 0%, #111827 100%);
        }

        .analytics-table-wrap-wide {
            max-height: none;
        }

        .analytics-table-wrap-wide thead th {
            white-space: nowrap;
        }

        .analytics-size-meta {
            font-size: 12px;
            color: #64748b;
            font-weight: 600;
        }

        .analytics-table-wrap {
            max-height: 360px;
        }

        .analytics-table-wrap thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .analytics-empty {
            color: #94a3b8;
            text-align: center;
            padding: 20px 10px;
        }

        

        .analytics-dashboard-nav {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .analytics-dashboard-tab {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #334155;
            border-radius: 999px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .analytics-dashboard-tab:hover {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #1d4ed8;
        }

        .analytics-dashboard-tab.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
        }

        .analytics-dashboard-pane {
            display: none;
        }

        .analytics-dashboard-pane.active {
            display: block;
            animation: fadeIn 0.24s ease;
        }

        .analytics-store-overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }

        .analytics-store-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 14px;
        }

        .analytics-store-mini-card {
            border: 1px solid rgba(191, 219, 254, 0.88);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border-radius: 18px;
            padding: 15px 16px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
        }

        .analytics-store-mini-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 6px;
        }

        .analytics-store-mini-value {
            font-size: 22px;
            line-height: 1.05;
            font-weight: 800;
            color: #0f172a;
            word-break: break-word;
        }

        .analytics-store-mini-sub {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 600;
            color: #64748b;
            line-height: 1.35;
        }

        .analytics-store-card {
            position: relative;
            border: 1px solid rgba(191, 219, 254, 0.88);
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.055);
            overflow: hidden;
        }

        .analytics-store-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #38bdf8, #10b981);
        }

        .analytics-store-card-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            flex-wrap: wrap;
            padding: 16px 16px 8px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
        }

        .analytics-store-name {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.02em;
            line-height: 1.15;
        }

        .analytics-store-subtitle {
            margin-top: 3px;
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
            line-height: 1.3;
        }

        .analytics-store-rank {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .analytics-store-card-body {
            padding: 12px 16px 14px;
        }

        .analytics-store-list {
            display: grid;
            gap: 2px;
        }

        .analytics-store-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 7px 0;
            border-bottom: 1px dashed #dbe4f0;
        }

        .analytics-store-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .analytics-store-row-main {
            min-width: 0;
        }

        .analytics-store-row-label {
            font-size: 12px;
            font-weight: 700;
            color: #334155;
            line-height: 1.22;
        }

        .analytics-store-row-sub {
            margin-top: 2px;
            font-size: 10px;
            font-weight: 600;
            color: #94a3b8;
            line-height: 1.28;
        }

        .analytics-store-row-value {
            text-align: right;
            font-size: 15px;
            line-height: 1.12;
            font-weight: 700;
            color: #0f172a;
            word-break: break-word;
        }

        .analytics-store-row.is-omset .analytics-store-row-label,
        .analytics-store-row.is-omset .analytics-store-row-value {
            color: #1d4ed8;
        }

        .analytics-store-row.is-ads .analytics-store-row-label,
        .analytics-store-row.is-ads .analytics-store-row-value {
            color: #b45309;
        }

        .analytics-store-row.is-return .analytics-store-row-label,
        .analytics-store-row.is-return .analytics-store-row-value {
            color: #b91c1c;
        }

        .analytics-store-row.is-hpp .analytics-store-row-label,
        .analytics-store-row.is-hpp .analytics-store-row-value,
        .analytics-store-row.is-admin .analytics-store-row-label,
        .analytics-store-row.is-admin .analytics-store-row-value,
        .analytics-store-row.is-service .analytics-store-row-label,
        .analytics-store-row.is-service .analytics-store-row-value {
            color: #475569;
        }

                .analytics-store-row-profit-percent {
            padding-top: 10px;
            margin-top: 4px;
            border-top: 1px solid #e2e8f0;
            border-bottom-style: solid;
        }

        .analytics-store-row-profit-percent .analytics-store-row-label,
        .analytics-store-row-profit-percent .analytics-store-row-value {
            color: #0f172a;
            font-weight: 800;
        }

        .analytics-store-row-profit-percent.negative .analytics-store-row-label,
        .analytics-store-row-profit-percent.negative .analytics-store-row-value {
            color: #be123c;
        }

.analytics-store-row.is-profit {
            margin-top: 4px;
            padding: 10px 12px;
            border: 1px solid #bbf7d0;
            border-radius: 14px;
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
        }

        .analytics-store-row.is-profit.negative {
            border-color: #fecdd3;
            background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        }

        .analytics-store-row.is-profit .analytics-store-row-label {
            font-size: 11px;
            font-weight: 800;
            color: #047857;
            letter-spacing: 0.035em;
            text-transform: uppercase;
        }

        .analytics-store-row.is-profit.negative .analytics-store-row-label {
            color: #be123c;
        }

        .analytics-store-row.is-profit .analytics-store-row-sub {
            color: #065f46;
            font-weight: 700;
            margin-top: 1px;
            font-size: 10px;
            line-height: 1.24;
        }

        .analytics-store-row.is-profit.negative .analytics-store-row-sub {
            color: #9f1239;
        }

        .analytics-store-row.is-profit .analytics-store-row-value {
            font-size: 24px;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #047857;
            line-height: 1;
        }

        .analytics-store-row.is-profit.negative .analytics-store-row-value {
            color: #be123c;
        }

        .analytics-store-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 22px;
            padding: 28px 18px;
            text-align: center;
            background: #fff;
            color: #64748b;
            font-size: 13px;
            font-weight: 600;
        }

        .analytics-filter-card {
            border-radius: 22px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: linear-gradient(135deg, #ffffff, #f8fbff);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }

        .analytics-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
        }

        .analytics-filter-item {
            grid-column: span 3;
        }

        .analytics-filter-item.wide {
            grid-column: span 4;
        }

        .analytics-filter-item.full {
            grid-column: span 12;
        }

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

        .analytics-chart-card {
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(226, 232, 240, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
        }

        .analytics-chart-card.analytics-chart-feature {
            position: relative;
        }

        .analytics-chart-card.analytics-chart-feature::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #0ea5e9, #10b981);
        }

        .analytics-chart-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .analytics-chart-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .analytics-chart-wrap {
            position: relative;
            min-height: 320px;
        }

        .analytics-chart-canvas {
            width: 100% !important;
            height: 320px !important;
        }

        .analytics-donut-card {
            border-radius: 24px;
            border: 1px solid rgba(226, 232, 240, 0.96);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
        }



        .analytics-donut-card-feature {
            position: relative;
            border: 1px solid rgba(191, 219, 254, 0.96);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 20px 42px rgba(15, 23, 42, 0.07);
        }

        .analytics-donut-card-feature::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #0ea5e9, #10b981);
        }

        .analytics-donut-wrap {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
            align-items: center;
            min-height: 320px;
        }

        .analytics-donut-visual {
            position: relative;
            max-width: 280px;
            width: 100%;
            margin: 0 auto;
        }

        .analytics-donut-canvas {
            width: 100% !important;
            height: 280px !important;
        }

        .analytics-donut-center {
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(226, 232, 240, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(8px);
            padding: 12px;
        }

        .analytics-donut-center-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #64748b;
            margin-bottom: 6px;
        }

        .analytics-donut-center-value {
            font-size: 1.1rem;
            line-height: 1.15;
            font-weight: 800;
            color: #0f172a;
            word-break: break-word;
        }

        .analytics-donut-center-sub {
            margin-top: 4px;
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
        }

        .analytics-breakdown-list {
            display: grid;
            gap: 12px;
        }

        .analytics-breakdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(248, 250, 252, 0.96);
            border: 1px solid rgba(226, 232, 240, 0.96);
        }

        .analytics-breakdown-main {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .analytics-breakdown-dot {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            flex-shrink: 0;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95);
        }

        .analytics-breakdown-label {
            font-size: 12px;
            font-weight: 800;
            color: #0f172a;
        }

        .analytics-breakdown-sub {
            font-size: 11px;
            color: #64748b;
            margin-top: 2px;
        }

        .analytics-breakdown-value {
            text-align: right;
            flex-shrink: 0;
        }

        .analytics-breakdown-number {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .analytics-breakdown-percent {
            font-size: 11px;
            color: #64748b;
            font-weight: 700;
            margin-top: 2px;
        }


        .finance-category-chart-card {
            max-width: 920px;
            margin-left: auto;
            margin-right: auto;
        }

        .finance-category-chart-card .analytics-chart-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 10px;
        }

        .finance-category-chart-card .analytics-chart-head > div {
            width: 100%;
            max-width: 760px;
            margin: 0 auto;
        }

        .finance-category-chart-card .analytics-chart-kicker {
            justify-content: center;
        }

        .finance-category-chart-card .analytics-chart-head .badge {
            margin: 0 auto;
        }

        .finance-category-chart-card .analytics-donut-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 22px;
            min-height: auto;
        }

        .finance-category-chart-card .analytics-donut-visual {
            margin: 0 auto;
            max-width: 310px;
        }

        .finance-category-chart-card .analytics-breakdown-list {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px 14px;
            align-items: stretch;
        }

        .finance-category-chart-card .analytics-breakdown-item {
            min-height: auto;
            padding: 10px 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            text-align: left;
            border-radius: 14px;
        }

        .finance-category-chart-card .analytics-breakdown-main {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            min-width: 0;
            flex: 1;
            text-align: left;
        }

        .finance-category-chart-card .analytics-breakdown-value {
            text-align: right;
            min-width: fit-content;
        }

        .finance-category-chart-card .analytics-breakdown-label {
            line-height: 1.2;
            word-break: break-word;
            font-size: 11px;
            font-weight: 700;
        }

        .finance-category-chart-card .analytics-breakdown-number {
            font-size: 11px;
            font-weight: 800;
            line-height: 1.2;
        }

        .finance-category-chart-card .analytics-breakdown-sub,
        .finance-category-chart-card .analytics-breakdown-percent {
            display: none;
        }

        .finance-category-chart-card .analytics-empty {
            text-align: center;
            grid-column: 1 / -1;
        }

        @media (max-width: 991.98px) {
            .finance-category-chart-card .analytics-breakdown-list {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .finance-category-chart-card {
                max-width: 100%;
            }

            .finance-category-chart-card .analytics-donut-visual {
                max-width: 280px;
            }

            .finance-category-chart-card .analytics-breakdown-list {
                max-width: 100%;
                grid-template-columns: 1fr;
            }
        }

        @media (min-width: 1200px) {
            .analytics-donut-wrap {
                grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
            }
        }

        @media (max-width: 1399.98px) {
            .analytics-summary-layout .analytics-kpi-hero {
                padding: 22px !important;
            }

            .analytics-kpi-value-hero {
                font-size: clamp(1.42rem, 2.1vw, 2rem);
            }

            .analytics-kpi-compact .analytics-kpi-value-compact {
                font-size: clamp(0.98rem, 1.25vw, 1.22rem);
            }

            .analytics-donut-wrap {
                grid-template-columns: minmax(0, 1fr);
            }

            .analytics-donut-visual {
                max-width: 250px;
            }

            .analytics-breakdown-item {
                padding: 11px 12px;
            }

            .analytics-breakdown-number {
                font-size: 12px;
            }
        }

        @media (max-width: 991.98px) {
            #content {
                width: 100%;
                max-width: 100%;
                margin-left: 0;
                padding: 20px 16px 28px;
            }

            .page-head {
                align-items: stretch;
            }

            .page-head .btn {
                width: 100%;
            }

            .analytics-chart-head,
            .analytics-shell-head-minimal {
                flex-direction: column;
                align-items: flex-start;
            }

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

            .analytics-chart-canvas {
                height: 280px !important;
            }

            .analytics-donut-canvas {
                height: 250px !important;
            }

            .analytics-donut-center {
                width: 120px;
                height: 120px;
            }
        }

        .analytics-chart-head > div,
        .analytics-shell-head-minimal > div,
        .analytics-kpi-card .d-flex > div:first-child {
            min-width: 0;
        }

        .analytics-chart-head h5,
        .analytics-shell-head-minimal .analytics-group-title,
        .analytics-breakdown-label,
        .analytics-breakdown-sub,
        .analytics-kpi-sub,
        .analytics-kpi-label {
            overflow-wrap: anywhere;
        }

        .analytics-chart-head .section-note {
            max-width: 100%;
        }

        .analytics-period-chip {
            max-width: 100%;
            white-space: normal;
            text-align: left;
        }


            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
        }


        
        #cost-optimization-section .cost-shell{display:grid;gap:16px;}
        #cost-optimization-section .cost-toolbar-card{padding:14px 16px;border:1px solid #dbeafe;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 14px 34px rgba(15,23,42,.05);}
        #cost-optimization-section .cost-nav-tabs{display:flex;flex-wrap:wrap;gap:10px;}
        #cost-optimization-section .cost-nav-btn{border:1px solid #dbeafe;background:#fff;color:#1e3a8a;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:8px;}
        #cost-optimization-section .cost-nav-btn.active{background:linear-gradient(135deg,#1d4ed8,#3b82f6);border-color:#1d4ed8;color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.18);}
        #cost-optimization-section .cost-pane{display:none;}
        #cost-optimization-section .cost-pane.active{display:block;animation:fadeIn .25s ease;}
        #cost-optimization-section .cost-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
        #cost-optimization-section .cost-kpi-card{border:1px solid #dbeafe;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);padding:18px;box-shadow:0 14px 30px rgba(15,23,42,.05);}
        #cost-optimization-section .cost-kpi-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:8px;}
        #cost-optimization-section .cost-kpi-value{font-size:28px;font-weight:800;line-height:1.05;color:#0f172a;}
        #cost-optimization-section .cost-kpi-sub{font-size:12px;color:#64748b;margin-top:8px;}
        #cost-optimization-section .cost-card{border:1px solid #dbeafe;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 14px 34px rgba(15,23,42,.05);}
        #cost-optimization-section .cost-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:20px 20px 0;}
        #cost-optimization-section .cost-card-title{font-size:16px;font-weight:800;color:#0f172a;margin:0;}
        #cost-optimization-section .cost-card-subtitle{font-size:12px;color:#64748b;margin-top:5px;}
        #cost-optimization-section .cost-filter-grid,
        #cost-optimization-section .cost-input-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
        #cost-optimization-section .cost-filter-item{grid-column:span 3;}
        #cost-optimization-section .cost-filter-item.full{grid-column:span 12;}
        #cost-optimization-section .cost-input-item{grid-column:span 3;}
        #cost-optimization-section .cost-input-item.wide{grid-column:span 4;}
        #cost-optimization-section .cost-input-item.full{grid-column:span 12;}
        #cost-optimization-section .cost-input-grid .form-control,
        #cost-optimization-section .cost-input-grid .form-select,
        #cost-optimization-section .cost-filter-grid .form-control,
        #cost-optimization-section .cost-filter-grid .form-select{background:#fcfdff;border-color:#d7e4f4;}
        #cost-optimization-section .cost-input-grid .form-control[readonly]{background:#eff6ff;font-weight:800;color:#1e3a8a;}
        #cost-optimization-section .cost-meta-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
        #cost-optimization-section .cost-meta-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:800;}
        #cost-optimization-section .cost-table-wrap{padding:18px 20px 20px;}
        #cost-optimization-section .cost-table-wrap table thead th{background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
        #cost-optimization-section .cost-number{text-align:right;font-variant-numeric:tabular-nums;}
        #financePaneCostOptimization .cost-shell{display:grid;gap:16px;}
        #financePaneCostOptimization .cost-toolbar-card{padding:14px 16px;border:1px solid #dbeafe;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 14px 34px rgba(15,23,42,.05);}
        #financePaneCostOptimization .cost-nav-tabs{display:flex;flex-wrap:wrap;gap:10px;}
        #financePaneCostOptimization .cost-nav-btn{border:1px solid #dbeafe;background:#fff;color:#1e3a8a;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:8px;}
        #financePaneCostOptimization .cost-nav-btn.active{background:linear-gradient(135deg,#1d4ed8,#3b82f6);border-color:#1d4ed8;color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.18);}
        #financePaneCostOptimization .cost-pane{display:none;}
        #financePaneCostOptimization .cost-pane.active{display:block;animation:fadeIn .25s ease;}
        #financePaneCostOptimization .cost-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
        #financePaneCostOptimization .cost-kpi-card{border:1px solid #dbeafe;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);padding:18px;box-shadow:0 14px 30px rgba(15,23,42,.05);}
        #financePaneCostOptimization .cost-kpi-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:8px;}
        #financePaneCostOptimization .cost-kpi-value{font-size:28px;font-weight:800;line-height:1.05;color:#0f172a;}
        #financePaneCostOptimization .cost-kpi-sub{font-size:12px;color:#64748b;margin-top:8px;}
        #financePaneCostOptimization .cost-card{border:1px solid #dbeafe;border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 14px 34px rgba(15,23,42,.05);}
        #financePaneCostOptimization .cost-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:20px 20px 0;}
        #financePaneCostOptimization .cost-card-title{font-size:16px;font-weight:800;color:#0f172a;margin:0;}
        #financePaneCostOptimization .cost-card-subtitle{font-size:12px;color:#64748b;margin-top:5px;}
        #financePaneCostOptimization .cost-filter-grid,#financePaneCostOptimization .cost-input-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
        #financePaneCostOptimization .cost-filter-item{grid-column:span 3;}
        #financePaneCostOptimization .cost-filter-item.full{grid-column:span 12;}
        #financePaneCostOptimization .cost-input-item{grid-column:span 3;}
        #financePaneCostOptimization .cost-input-item.wide{grid-column:span 4;}
        #financePaneCostOptimization .cost-input-item.full{grid-column:span 12;}
        #financePaneCostOptimization .cost-input-grid .form-control,#financePaneCostOptimization .cost-input-grid .form-select,#financePaneCostOptimization .cost-filter-grid .form-control,#financePaneCostOptimization .cost-filter-grid .form-select{background:#fcfdff;border-color:#d7e4f4;}
        #financePaneCostOptimization .cost-input-grid .form-control[readonly]{background:#eff6ff;font-weight:800;color:#1e3a8a;}
        #financePaneCostOptimization .cost-meta-strip{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
        #financePaneCostOptimization .cost-meta-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:800;}
        #financePaneCostOptimization .cost-table-wrap{padding:18px 20px 20px;}
        #financePaneCostOptimization .cost-table-wrap table thead th{background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
        #financePaneCostOptimization .cost-number{text-align:right;font-variant-numeric:tabular-nums;}
        @media (max-width: 991.98px){#financePaneCostOptimization .cost-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}#financePaneCostOptimization .cost-filter-item,#financePaneCostOptimization .cost-input-item,#financePaneCostOptimization .cost-input-item.wide{grid-column:span 12;}}
        @media (max-width: 575.98px){#financePaneCostOptimization .cost-kpi-grid{grid-template-columns:1fr;}}

        @media (max-width: 991.98px){
            #cost-optimization-section .cost-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
            #cost-optimization-section .cost-filter-item,
            #cost-optimization-section .cost-input-item,
            #cost-optimization-section .cost-input-item.wide{grid-column:span 12;}
        }
        @media (max-width: 767.98px){
            #cost-optimization-section .cost-kpi-grid{grid-template-columns:1fr;}
        }


        .stok-awal-matrix-card {
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        }

        .stok-awal-matrix-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding-bottom: 18px;
            border-bottom: 1px solid #eef2f7;
        }

        .stok-awal-matrix-title {
            font-size: 19px;
            font-weight: 800;
            color: #0f172a;
            margin: 10px 0 6px;
            letter-spacing: -0.02em;
        }

        .stok-awal-matrix-copy {
            margin: 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.7;
            max-width: 760px;
        }

        .stok-awal-matrix-summary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }

        .stok-awal-matrix-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1.7fr) minmax(200px, 0.7fr);
            gap: 14px;
            margin-bottom: 18px;
        }

        .stok-awal-matrix-helper {
            min-height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #f8fafc;
            color: #64748b;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            padding: 0 14px;
        }

        .stok-awal-matrix-board {
            display: grid;
            gap: 14px;
        }

        .stok-awal-matrix-color-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #ffffff;
            overflow: hidden;
        }

        .stok-awal-matrix-color-head {
            padding: 13px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .stok-awal-matrix-size-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
            gap: 12px;
            padding: 16px;
        }

        .stok-awal-matrix-size-item {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 12px;
            background: #ffffff;
        }

        .stok-awal-matrix-size-item .form-control {
            min-height: 42px;
            border-radius: 12px !important;
            border-color: #dbe3ee;
            background: #f8fafc;
            font-weight: 700;
        }

        .stok-awal-matrix-size-item .form-control:focus {
            background: #ffffff;
        }

        .stok-awal-matrix-size-label {
            font-size: 11px;
            font-weight: 800;
            color: #475569;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stok-awal-matrix-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: #f8fafc;
            padding: 30px 22px;
            text-align: center;
            color: #64748b;
            font-size: 13px;
            line-height: 1.7;
        }

        .stok-awal-matrix-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid #eef2f7;
        }

        @media (max-width: 767.98px) {
            .analytics-summary-layout .analytics-kpi-hero {
                padding: 20px !important;
                border-radius: 20px;
            }

            .analytics-kpi-value-hero {
                font-size: clamp(1.3rem, 6vw, 1.8rem);
                line-height: 1.12;
            }

            .analytics-kpi-hero .analytics-kpi-icon {
                width: 52px;
                height: 52px;
                border-radius: 16px;
            }

            .analytics-kpi-icon-hero {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 991.98px) {
            .analytics-toolbar-bar {
                align-items: stretch;
            }

            .analytics-toolbar-field,
            .analytics-toolbar-field.analytics-toolbar-field-wide {
                min-width: 100%;
                width: 100%;
            }

            .analytics-toolbar-actions {
                margin-left: 0;
                width: 100%;
                justify-content: stretch;
            }

            .analytics-toolbar-actions .btn {
                flex: 1 1 100%;
            }

            .analytics-master-grid {
                grid-template-columns: 1fr;
            }

            .analytics-filter-item,
            .analytics-filter-item.wide {
                grid-column: span 12;
            }

            .analytics-master-layout {
                grid-template-columns: 1fr;
            }

            .analytics-master-fields {
                grid-template-columns: 1fr 1fr;
            }

            .analytics-master-actions {
                justify-content: flex-start;
            }

            .stok-awal-matrix-toolbar {
                grid-template-columns: 1fr;
            }

            .analytics-chart-wrap,
            .analytics-chart-canvas {
                min-height: 280px;
                height: 280px !important;
            }
        }

        @media (max-width: 767.98px) {
            .analytics-kpi-compact .analytics-kpi-value-compact {
                font-size: clamp(0.96rem, 4.2vw, 1.12rem);
            }

            .product-grid,
            .product-dropship-grid {
                grid-template-columns: 1fr;
            }

            .analytics-master-fields {
                grid-template-columns: 1fr;
            }

            .analytics-filter-card.analytics-filter-card-minimal,
            .analytics-master-card.analytics-master-card-minimal {
                padding: 14px !important;
            }

            .analytics-group-title {
                font-size: 12px;
            }
        }



        .history-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
        }

        .history-filter-item {
            grid-column: span 3;
        }

        .history-filter-item.wide {
            grid-column: span 4;
        }

        .history-filter-item.full {
            grid-column: span 12;
        }

        .history-filter-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .history-stat-chip {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .history-overview-card {
            border: 1px solid #dbeafe;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 24%),
                linear-gradient(135deg, #ffffff, #f8fbff);
            overflow: hidden;
        }

        .history-hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 18px;
            flex-wrap: wrap;
            padding-bottom: 18px;
            margin-bottom: 18px;
            border-bottom: 1px solid #e2e8f0;
        }

        .history-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
        }

        .history-hero-title {
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
            margin: 12px 0 6px;
            letter-spacing: -0.02em;
        }

        .history-hero-copy {
            max-width: 620px;
            color: #64748b;
            font-size: 13px;
            line-height: 1.7;
            margin: 0;
        }

        .history-hero-icon {
            width: 66px;
            height: 66px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #2563eb, #60a5fa);
            color: #fff;
            font-size: 28px;
            box-shadow: 0 16px 32px rgba(37, 99, 235, 0.18);
            flex-shrink: 0;
        }

        .history-stat-chip strong {
            font-size: 13px;
        }

        .history-stat-chip.primary {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        .history-stat-chip.success {
            background: #ecfdf5;
            border-color: #bbf7d0;
            color: #15803d;
        }

        .history-stat-chip.dark {
            background: #0f172a;
            border-color: #0f172a;
            color: #f8fafc;
        }

        .history-table-card {
            border: 1px solid rgba(219, 234, 254, 0.9);
            overflow: hidden;
            border-radius: 22px;
        }

        .history-table-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 20px 24px 0;
            flex-wrap: wrap;
        }

        .history-table-title {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

        .history-table-subtitle {
            color: #64748b;
            font-size: 12px;
            margin: 4px 0 0;
        }

        .history-record-count {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 12px;
            font-weight: 800;
            color: #334155;
        }

        .history-table-card .table-responsive {
            padding: 0;
            overflow-x: auto;
        }

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

        .history-table-card thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: #f8fafc !important;
            border: 0 !important;
            border-bottom: 1px solid #e2e8f0 !important;
            font-size: 11px;
            color: #64748b !important;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 12px 14px;
            white-space: nowrap;
        }

        .history-row td {
            background: #ffffff;
            border: 0;
            border-bottom: 1px solid #eef2f7;
            padding: 12px 14px;
            vertical-align: middle;
        }

        .history-row:nth-child(even) td {
            background: #fcfdff;
        }

        .history-row:hover td {
            background: #f8fbff;
        }

        .history-row td:first-child,
        .history-row td:last-child {
            border-radius: 0;
        }

        .history-id-badge {
            display: inline-block;
            min-width: auto;
            padding: 0;
            border-radius: 0;
            background: transparent;
            color: #1e293b;
            font-size: 12px;
            font-weight: 800;
        }

        .history-product-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
        }

        .history-product-meta {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
        }

        .history-variant-stack,
        .history-time-stack,
        .history-user-stack {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .history-variant-main,
        .history-time-main,
        .history-user-main {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
        }

        .history-variant-sub,
        .history-time-sub,
        .history-user-sub {
            font-size: 11px;
            color: #64748b;
        }

        .history-qty-badge {
            display: inline-block;
            min-width: auto;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .history-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 0;
            border-radius: 0;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            background: transparent;
            border: 0;
        }

        .history-type-in {
            background: #ecfdf5;
            color: #15803d;
            border: 1px solid #bbf7d0;
        }

        .history-type-out {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca;
        }

        .history-type-neutral {
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .history-user-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: #334155;
            padding: 0;
            font-size: 11px;
            font-weight: 800;
        }

        .history-user-badge i {
            color: #2563eb;
        }

        @media (max-width: 991.98px) {
            .history-filter-item,
            .history-filter-item.wide {
                grid-column: span 12;
            }

            .history-hero {
                align-items: stretch;
            }

            .history-table-card .table-responsive {
                padding: 0;
            }
        }

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


        .promo-hero-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(251, 191, 36, 0.32);
            border-radius: 24px;
            background:
                radial-gradient(circle at top right, rgba(251, 191, 36, 0.22), transparent 26%),
                radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.16), transparent 28%),
                linear-gradient(135deg, #fff7ed 0%, #ffffff 45%, #fff1f2 100%);
            box-shadow: 0 18px 40px rgba(244, 114, 182, 0.10);
        }

        .promo-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.85);
            border: 1px solid rgba(251, 191, 36, 0.45);
            color: #c2410c;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .promo-hero-title {
            font-size: clamp(1.6rem, 3vw, 2.45rem);
            font-weight: 900;
            line-height: 1.02;
            letter-spacing: -0.04em;
            margin: 14px 0 10px;
            color: #111827;
        }

        .promo-hero-copy {
            margin: 0;
            max-width: 760px;
            color: #6b7280;
            font-size: 14px;
            line-height: 1.75;
        }

        .promo-hero-icon {
            width: 76px;
            height: 76px;
            border-radius: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: #fff;
            font-size: 32px;
            box-shadow: 0 20px 34px rgba(249, 115, 22, 0.22);
            flex-shrink: 0;
        }

        .promo-kpi-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .promo-kpi-card {
            grid-column: span 3;
            border-radius: 22px;
            border: 1px solid rgba(251, 191, 36, 0.18);
            background: #ffffff;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
            padding: 18px;
            position: relative;
            overflow: hidden;
        }

        .promo-kpi-card::after {
            content: '';
            position: absolute;
            right: -18px;
            top: -18px;
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background: rgba(251, 191, 36, 0.12);
        }

        .promo-kpi-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .promo-kpi-card.warning .promo-kpi-icon { background: #fff7ed; color: #ea580c; }
        .promo-kpi-card.primary .promo-kpi-icon { background: #eff6ff; color: #2563eb; }
        .promo-kpi-card.success .promo-kpi-icon { background: #ecfdf5; color: #059669; }
        .promo-kpi-card.accent .promo-kpi-icon { background: #fdf2f8; color: #db2777; }

        .promo-kpi-label {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #9ca3af;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .promo-kpi-value {
            font-size: clamp(1.3rem, 2vw, 1.95rem);
            font-weight: 900;
            line-height: 1.08;
            color: #111827;
            position: relative;
            z-index: 1;
        }

        .promo-kpi-sub {
            margin-top: 7px;
            color: #6b7280;
            font-size: 12px;
            font-weight: 600;
            position: relative;
            z-index: 1;
        }

        .promo-dashboard-card {
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff, #fffaf5);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
        }

        .promo-card-topbar {
            height: 5px;
            background: linear-gradient(90deg, #f97316, #f59e0b, #ec4899);
        }

        .promo-product-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            color: #c2410c;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .promo-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 13px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid transparent;
        }

        .promo-status-badge.is-active {
            background: #ecfdf5;
            color: #047857;
            border-color: #bbf7d0;
        }

        .promo-status-badge.is-inactive {
            background: #f3f4f6;
            color: #4b5563;
            border-color: #e5e7eb;
        }

        .promo-price-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 14px;
        }

        .promo-price-box,
        .promo-highlight-box,
        .promo-comment-box {
            border-radius: 20px;
            border: 1px solid #f3f4f6;
            background: #ffffff;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
        }

        .promo-price-box {
            grid-column: span 4;
            padding: 16px;
            min-height: 118px;
            position: relative;
            overflow: hidden;
        }

        .promo-price-box.sale {
            background: linear-gradient(135deg, #fff7ed, #fff1f2);
            border-color: rgba(249, 115, 22, 0.18);
        }

        .promo-price-box.discount {
            background: linear-gradient(135deg, #eff6ff, #f5f3ff);
            border-color: rgba(96, 165, 250, 0.22);
        }

        .promo-price-icon {
            position: absolute;
            right: 14px;
            top: 14px;
            font-size: 18px;
            color: rgba(17,24,39,0.25);
        }

        .promo-price-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #9ca3af;
            margin-bottom: 8px;
        }

        .promo-price-value {
            font-size: 1.42rem;
            line-height: 1.08;
            font-weight: 900;
            color: #111827;
        }

        .promo-price-sub {
            margin-top: 6px;
            font-size: 12px;
            color: #6b7280;
            font-weight: 600;
        }

        .promo-highlight-box,
        .promo-comment-box {
            padding: 16px;
        }

        .promo-highlight-title,
        .promo-comment-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #6b7280;
            margin-bottom: 10px;
        }

        .promo-highlight-content {
            color: #111827;
            font-size: 14px;
            line-height: 1.7;
            font-weight: 500;
        }

        .promo-comment-stream {
            display: grid;
            gap: 10px;
            max-height: 260px;
            overflow: auto;
            padding-right: 4px;
        }

        .promo-comment-item {
            border: 1px solid #f3f4f6;
            border-radius: 16px;
            padding: 12px 13px;
            background: linear-gradient(180deg, #ffffff, #fffaf5);
        }

        .promo-comment-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }

        .promo-comment-user {
            font-size: 12px;
            font-weight: 800;
            color: #111827;
        }

        .promo-comment-time {
            font-size: 11px;
            color: #9ca3af;
            font-weight: 600;
        }

        .promo-comment-text {
            font-size: 13px;
            color: #4b5563;
            line-height: 1.65;
        }

        .promo-comment-form .input-group {
            border: 1px solid #fed7aa;
            border-radius: 16px;
            padding: 6px;
            background: #fff7ed;
        }

        .promo-comment-form .form-control,
        .promo-comment-form .btn {
            border-radius: 12px !important;
        }

        .promo-comment-form .form-control {
            border: none !important;
            background: transparent;
            box-shadow: none !important;
            min-height: 46px;
        }

        .promo-comment-form .btn {
            background: linear-gradient(135deg, #f97316, #ec4899);
            border: none;
            font-weight: 800;
            padding-inline: 16px;
        }

        .promo-dashboard-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
            gap: 18px;
            align-items: start;
        }

        .promo-list-shell,
        .promo-comment-shell {
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 24px;
            background: linear-gradient(180deg, #ffffff, #fffaf5);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
            overflow: hidden;
        }

        .promo-list-head,
        .promo-comment-shell > .p-4 {
            position: relative;
        }

        .promo-list-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }

        .promo-list-title {
            font-size: 16px;
            font-weight: 900;
            color: #111827;
            margin: 0;
        }

        .promo-list-subtitle {
            margin: 4px 0 0;
            color: #6b7280;
            font-size: 12px;
        }

        .promo-list-table {
            width: 100%;
        }

        .promo-list-row {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.55fr) minmax(120px, 0.55fr) minmax(100px, 0.4fr) minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            padding: 14px 18px;
            border-top: 1px solid #f3f4f6;
        }

        .promo-list-row.header {
            padding-top: 12px;
            padding-bottom: 12px;
            background: #fff7ed;
            border-top: none;
            color: #9a3412;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .promo-list-row:not(.header):nth-child(even) {
            background: rgba(255,247,237,0.35);
        }

        .promo-list-product-name {
            font-size: 14px;
            font-weight: 800;
            color: #111827;
            line-height: 1.4;
        }

        .promo-list-product-meta,
        .promo-list-note {
            font-size: 12px;
            color: #6b7280;
            line-height: 1.5;
            margin-top: 4px;
        }

        .promo-list-price {
            font-size: 13px;
            font-weight: 800;
            color: #111827;
        }

        .promo-list-price.sale {
            color: #db2777;
        }

        .promo-discount-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 10px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid #bfdbfe;
            white-space: nowrap;
        }

        .promo-comment-shell .promo-comment-stream {
            max-height: 420px;
        }

        .promo-comment-shell .promo-comment-title {
            margin-bottom: 12px;
        }

        .promo-empty-state {
            padding: 32px 18px;
            text-align: center;
            color: #6b7280;
            font-size: 14px;
        }

        @media (max-width: 1199.98px) {
            .promo-dashboard-layout {
                grid-template-columns: 1fr;
            }
            .promo-kpi-card { grid-column: span 6; }
            .promo-price-box { grid-column: span 6; }
        }

        @media (max-width: 991.98px) {
            .promo-list-row {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .promo-list-row.header {
                display: none;
            }
        }

        @media (max-width: 575.98px) {
            .promo-kpi-card { grid-column: span 6; }
            .promo-price-box { grid-column: span 6; }
        }

        @media (max-width: 767.98px) {
            .promo-kpi-card,
            .promo-price-box { grid-column: span 12; }
            .promo-hero-icon { width: 64px; height: 64px; font-size: 28px; }
        }

        .ads-shell{display:grid;gap:20px;}
        .ads-toolbar-card{border:1px solid rgba(201,212,228,.92);border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);box-shadow:0 18px 36px rgba(15,23,42,.06);padding:18px 20px;}
        .ads-nav-tabs{display:flex;gap:10px;flex-wrap:wrap;}
        .ads-nav-btn{border:1px solid #d6e3f4;background:#f8fbff;color:#35506f;border-radius:999px;padding:11px 16px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;transition:all .22s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}
        .ads-nav-btn i{font-size:14px;color:#4b6b8e;transition:inherit;}
        .ads-nav-btn:hover{border-color:#9ec0e8;background:#eef5ff;color:#173a63;transform:translateY(-1px);}
        .ads-nav-btn:hover i{color:#2563eb;}
        .ads-nav-btn.active{background:linear-gradient(135deg,#1f5fbf,#3b82f6);color:#fff;border-color:transparent;box-shadow:0 12px 26px rgba(37,99,235,.18);}
        .ads-nav-btn.active i{color:#fff;}
        .ads-pane{display:none;}.ads-pane.active{display:block;}
        .ads-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
        .ads-kpi-card{position:relative;border:1px solid #dbe5f0;border-radius:22px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 14px 28px rgba(15,23,42,.05);padding:18px 18px 16px;overflow:hidden;}
        .ads-kpi-card::after{content:"";position:absolute;inset:auto 18px 0 18px;height:3px;border-radius:999px;background:#dbe7f5;opacity:.85;}
        .ads-kpi-card:nth-child(1)::after{background:linear-gradient(90deg,#2563eb,#60a5fa);}
        .ads-kpi-card:nth-child(2)::after{background:linear-gradient(90deg,#059669,#34d399);}
        .ads-kpi-card:nth-child(3)::after{background:linear-gradient(90deg,#d97706,#fbbf24);}
        .ads-kpi-card:nth-child(4)::after{background:linear-gradient(90deg,#7c3aed,#a78bfa);}
        .ads-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6a7f98;font-weight:800;margin-bottom:8px;font-family:'Inter',sans-serif;}
        .ads-kpi-value{font-size:28px;font-weight:800;line-height:1.08;color:#122033;letter-spacing:-.03em;font-family:'Inter',sans-serif;}
        .ads-kpi-sub{margin-top:8px;font-size:12px;color:#6c8098;line-height:1.55;}
        .ads-grid-two{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr);gap:18px;}
        .ads-spreadsheet-card{border:1px solid rgba(214,226,239,.96);border-radius:22px;background:linear-gradient(180deg,#ffffff 0%,#f9fbfe 100%);box-shadow:0 14px 30px rgba(15,23,42,.05);overflow:hidden;}
        .ads-spreadsheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 0;flex-wrap:wrap;}
        .ads-spreadsheet-title{font-size:16px;font-weight:800;color:#13253a;margin:0;font-family:'Inter',sans-serif;letter-spacing:-.02em;}
        .ads-spreadsheet-subtitle{font-size:12px;color:#6f8298;margin-top:4px;line-height:1.55;}
        .ads-spreadsheet-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;}
        .ads-spreadsheet-table thead th{position:sticky;top:0;z-index:1;background:#eef3f8 !important;border-top:0 !important;border-bottom:1px solid #d7e1ec !important;color:#4d6279 !important;font-size:11px !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.08em !important;white-space:nowrap;padding:13px 14px !important;box-shadow:none !important;}
        .ads-spreadsheet-table thead th::before,.ads-spreadsheet-table thead th::after{display:none !important;content:none !important;}
        .ads-spreadsheet-table tbody td{border-bottom:1px solid #edf2f7;padding:13px 14px;font-size:13px;vertical-align:middle;background:#fff;color:#1d3147;}
        .ads-spreadsheet-table tbody tr:nth-child(even) td{background:#f9fbfd;}
        .ads-spreadsheet-table tbody tr:hover td{background:#f1f6fb;}
        .ads-number-cell{font-family:'Inter',sans-serif;text-align:right;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums;}
        .ads-store-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eef5ff;border:1px solid #c9daf1;color:#1f5fbf;font-size:12px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);}
        .ads-store-badge i{color:inherit;}
        .ads-master-input-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:end;}
        .ads-form-grid,.ads-filter-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;}
        .ads-form-item,.ads-filter-item{grid-column:span 3;}
        .ads-form-item.wide,.ads-filter-item.wide{grid-column:span 6;}
        .ads-form-item.full,.ads-filter-item.full{grid-column:span 12;}
        .ads-form-item label,.ads-filter-item label{font-size:11px;font-weight:800;color:#61758c;letter-spacing:.04em;text-transform:uppercase;}
        .ads-preview-box{border:1px solid #d8e4f0;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);padding:18px;min-height:100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);}
        .ads-preview-box:first-child{background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%);}
        .ads-preview-box:last-child{background:linear-gradient(180deg,#ffffff 0%,#f7fcfa 100%);}
        .ads-preview-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#6a7f98;margin-bottom:6px;}
        .ads-preview-value{font-size:24px;font-weight:800;color:#1f5fbf;line-height:1.1;letter-spacing:-.03em;}
        .ads-preview-box:last-child .ads-preview-value{color:#059669;}
        .ads-filter-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
        .ads-import-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
        .ads-import-file-panel{border:1px dashed #cbd5e1;border-radius:16px;background:#f8fafc;padding:12px;display:grid;gap:10px;}
        .ads-import-file-row{display:grid;grid-template-columns:minmax(260px,1.6fr) minmax(220px,1fr);gap:12px;align-items:center;border:1px solid #e2e8f0;border-radius:14px;background:#fff;padding:12px;}
        .ads-import-file-name{font-size:13px;font-weight:800;color:#0f172a;word-break:break-word;}
        .ads-import-file-meta{font-size:11px;color:#64748b;margin-top:3px;}
        .ads-import-file-row .form-select{min-height:40px;font-size:12px;}
        .ads-import-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px;}
        .ads-import-summary-item{border:1px solid #d7e4f2;border-radius:16px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);padding:13px 14px;box-shadow:0 10px 22px rgba(15,23,42,.04);}
        .ads-import-summary-item span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#71859b;margin-bottom:5px;}
        .ads-import-summary-item strong{display:block;font-size:13px;font-weight:900;color:#16283d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .ads-bulk-actionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px 12px;border-top:1px solid transparent;}
        .ads-history-checkbox,.ads-import-row-check,#adsHistorySelectAll,#adsImportSelectAll{cursor:pointer;}
        #ads-section .btn-primary{background:linear-gradient(135deg,#1f5fbf,#3b82f6);border-color:#1f5fbf;box-shadow:0 10px 24px rgba(37,99,235,.16);}
        #ads-section .btn-primary:hover{background:linear-gradient(135deg,#1d4f9e,#2563eb);border-color:#1d4f9e;}
        #ads-section .btn-outline-primary{border-color:#b8cee7;color:#1f5fbf;background:#f8fbff;}
        #ads-section .btn-outline-primary:hover{background:#eef5ff;color:#174a92;border-color:#95b7de;}
        #ads-section .btn-outline-secondary{border-color:#d2dce8;color:#486079;background:#fff;}
        #ads-section .btn-outline-secondary:hover{background:#f4f7fb;color:#24384f;border-color:#b7c7d8;}
        #ads-section .form-control,#ads-section .form-select{border-color:#d4dfeb;background:#fcfdff;color:#16283d;font-family:'Inter',sans-serif;box-shadow:none;}
        #ads-section .form-control:focus,#ads-section .form-select:focus{border-color:#8cb7e8;box-shadow:0 0 0 .2rem rgba(37,99,235,.10);background:#fff;}
        @media (max-width:991.98px){.ads-kpi-grid,.ads-grid-two,.ads-import-summary-grid{grid-template-columns:1fr;}.ads-master-input-grid,.ads-import-file-row{grid-template-columns:1fr;}.ads-form-item,.ads-form-item.wide,.ads-filter-item,.ads-filter-item.wide{grid-column:span 12;}}

        .inline-help-trigger {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            color: #1d4ed8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
        }

        .inline-help-trigger:hover {
            background: #dbeafe;
            color: #1e3a8a;
        }

        .history-page-tools {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 6px;
        }

        .history-filter-grid-compact {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }


        .realtime-product-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .realtime-product-photo,
        .realtime-product-photo-empty {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid #dbeafe;
            background: #f8fafc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .realtime-product-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .realtime-product-photo-empty {
            color: #64748b;
            font-size: 18px;
        }

        .history-action-stack {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .history-action-stack .btn {
            min-width: 34px;
            padding: 0.32rem 0.45rem;
        }

        .history-edit-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .history-edit-grid .full {
            grid-column: 1 / -1;
        }

        @media (max-width: 767.98px) {
            .history-edit-grid {
                grid-template-columns: 1fr;
            }
        }

        .sidebar-user-panel {
            margin: 16px 14px 0;
            padding: 14px;
            border: 1px solid #dbeafe;
            border-radius: 16px;
            background: linear-gradient(135deg, #eff6ff, #ffffff);
        }

        .sidebar-user-name {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.3;
        }

        .sidebar-user-meta {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
        }

        body.auth-locked,
        body.auth-checking {
            overflow: hidden;
        }

        body.auth-locked #sidebar,
        body.auth-locked #content,
        body.auth-locked .mobile-topbar,
        body.auth-locked .desktop-app-header,
        body.auth-locked .sidebar-backdrop,
        body.auth-checking #sidebar,
        body.auth-checking #content,
        body.auth-checking .mobile-topbar,
        body.auth-checking .desktop-app-header,
        body.auth-checking .sidebar-backdrop {
            display: none !important;
        }

        .auth-boot-guard {
            position: fixed;
            inset: 0;
            z-index: 2999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 28%),
                linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
            color: #0f172a;
        }

        body:not(.auth-checking) .auth-boot-guard {
            display: none !important;
        }

        .auth-boot-card {
            width: min(420px, 100%);
            border: 1px solid #dbeafe;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
            padding: 24px;
            text-align: center;
        }

        .auth-boot-icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            margin: 0 auto 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }

        .auth-boot-title {
            font-size: 14px;
            font-weight: 900;
            margin-bottom: 6px;
        }

        .auth-boot-subtitle {
            font-size: 12px;
            color: #64748b;
            margin: 0;
            line-height: 1.55;
        }

        .auth-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 26%),
                radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.16), transparent 28%),
                linear-gradient(135deg, #eff6ff 0%, #f8fbff 38%, #eef4ff 100%);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 28px;
            overflow-y: auto;
        }

        .auth-overlay::before,
        .auth-overlay::after {
            content: "";
            position: fixed;
            border-radius: 999px;
            filter: blur(8px);
            pointer-events: none;
            opacity: 0.7;
        }

        .auth-overlay::before {
            width: 260px;
            height: 260px;
            top: 48px;
            right: 6%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.30), rgba(96, 165, 250, 0));
        }

        .auth-overlay::after {
            width: 320px;
            height: 320px;
            left: 4%;
            bottom: 36px;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0));
        }

        .auth-shell {
            width: 100%;
            max-width: 1080px;
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, 430px);
            gap: 22px;
            align-items: stretch;
            position: relative;
            z-index: 1;
        }

        .auth-brand-card,
        .auth-form-card {
            border-radius: 30px;
            overflow: hidden;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            min-height: 100%;
        }

        .auth-brand-card {
            position: relative;
            border: 1px solid rgba(191, 219, 254, 0.55);
            background:
                radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 25%),
                linear-gradient(145deg, #0f172a 0%, #1e3a8a 52%, #2563eb 100%);
            box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
            color: #eff6ff;
            padding: 34px 34px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            isolation: isolate;
        }

        .auth-brand-card::before {
            content: "";
            position: absolute;
            inset: auto -58px -68px auto;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(191, 219, 254, 0.34), rgba(191, 219, 254, 0));
            z-index: -1;
        }

        .auth-brand-card::after {
            content: "";
            position: absolute;
            inset: 24px 24px auto auto;
            width: 110px;
            height: 110px;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
            transform: rotate(12deg);
            z-index: -1;
        }

        .auth-brand-top {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .auth-brand-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #dbeafe;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .auth-brand-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: clamp(2rem, 4vw, 3.1rem);
            line-height: 1.02;
            font-weight: 800;
            letter-spacing: -0.05em;
            margin: 0;
            max-width: 560px;
        }

        .auth-brand-title .accent {
            color: #bfdbfe;
        }

        .auth-brand-copy {
            max-width: 560px;
            font-size: 15px;
            line-height: 1.8;
            color: rgba(239, 246, 255, 0.84);
            margin: 0;
        }

        .auth-brand-quote {
            margin: 0;
            padding: 20px 22px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
            color: #f8fbff;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .auth-brand-quote-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #bfdbfe;
            margin-bottom: 10px;
        }

        .auth-brand-quote-text {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.7;
            letter-spacing: -0.02em;
            margin: 0;
        }

        .auth-brand-features {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-top: 26px;
        }

        .auth-brand-feature {
            padding: 16px 14px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
        }

        .auth-brand-feature i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 14px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.14);
            color: #dbeafe;
            font-size: 18px;
        }

        .auth-brand-feature-title {
            font-size: 13px;
            font-weight: 800;
            color: #f8fbff;
            margin-bottom: 4px;
        }

        .auth-brand-feature-copy {
            font-size: 12px;
            line-height: 1.55;
            color: rgba(219, 234, 254, 0.82);
        }

        .auth-form-card {
            border: 1px solid rgba(191, 219, 254, 0.78);
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
        }

        .auth-form-header {
            padding: 34px 30px 18px;
            text-align: center;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.95));
        }

        .auth-form-body {
            padding: 26px 30px 30px;
        }

        .auth-logo-badge {
            width: 68px;
            height: 68px;
            border-radius: 22px;
            margin: 0 auto 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1d4ed8, #2563eb 52%, #60a5fa 100%);
            color: #fff;
            font-size: 28px;
            box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24);
        }

        .auth-title {
            font-size: 30px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
            letter-spacing: -0.04em;
        }

        .auth-subtitle {
            color: #64748b;
            font-size: 13px;
            line-height: 1.75;
            margin: 10px auto 0;
            max-width: 320px;
        }

        .auth-state-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            color: #1d4ed8;
            margin-top: 18px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
        }

        .auth-mode-block .form-label {
            color: #334155;
            font-weight: 800;
            font-size: 12px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .auth-mode-block .form-control {
            min-height: 54px;
            border-radius: 16px !important;
            border: 1px solid #dbeafe;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
            padding-left: 16px;
            padding-right: 16px;
            font-size: 14px;
            font-weight: 600;
        }

        .auth-mode-block .form-control:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
            background: #fff;
        }

        .auth-login-button {
            min-height: 54px;
            border-radius: 16px;
            background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #3b82f6);
            border: none;
            box-shadow: 0 16px 28px rgba(37, 99, 235, 0.24);
            letter-spacing: 0.01em;
        }

        .auth-login-button:hover,
        .auth-login-button:focus {
            background: linear-gradient(135deg, #1e40af, #1d4ed8 55%, #2563eb);
        }

        .admin-card {
            border-top: 4px solid #2563eb;
        }

        .admin-role-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .admin-role-owner {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .admin-role-admin {
            background: #ecfdf5;
            color: #15803d;
        }

        .permission-check-grid,
        .permission-matrix-shell {
            display: block;
            min-width: 0;
        }

        .permission-matrix-toolbar {
            position: sticky;
            top: 0;
            z-index: 8;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px;
            margin-bottom: 12px;
            border: 1px solid #dbeafe;
            border-radius: 16px;
            background: rgba(248, 251, 255, 0.96);
            backdrop-filter: blur(10px);
        }

        .permission-template-panel {
            margin-bottom: 12px;
            padding: 14px;
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
        }

        .permission-template-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .permission-template-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 900;
            color: #0f172a;
        }

        .permission-template-title i {
            color: #2563eb;
        }

        .permission-template-subtitle {
            margin-top: 4px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.45;
        }

        .permission-mode-badge {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 900;
        }

        .permission-template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 8px;
        }

        .permission-template-btn {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #ffffff;
            text-align: left;
            padding: 10px 12px;
            transition: all .16s ease;
        }

        .permission-template-btn:hover {
            border-color: #93c5fd;
            background: #eff6ff;
            transform: translateY(-1px);
            box-shadow: 0 10px 18px rgba(37, 99, 235, 0.10);
        }

        .permission-template-btn strong {
            display: block;
            color: #0f172a;
            font-size: 12px;
            font-weight: 900;
            margin-bottom: 4px;
        }

        .permission-template-btn span {
            display: block;
            color: #64748b;
            font-size: 11px;
            line-height: 1.45;
        }

        .permission-matrix-scroll {
            display: grid;
            gap: 14px;
            max-height: 560px;
            overflow: auto;
            padding: 2px 4px 6px 0;
        }

        .permission-group-card {
            overflow: hidden;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .permission-group-card.sensitive {
            border-color: #fecaca;
            background: linear-gradient(180deg, #fff, #fff7f7);
        }

        .permission-group-title {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            background: #f8fafc;
            color: #0f172a;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-bottom: 1px solid #e2e8f0;
        }

        .permission-group-card.sensitive .permission-group-title {
            background: #fff1f2;
            color: #be123c;
            border-bottom-color: #fecdd3;
        }

        .permission-matrix-table {
            min-width: 520px;
        }

        .permission-matrix-head,
        .permission-matrix-row {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) 120px 130px;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
        }

        .permission-matrix-head {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #ffffff;
            color: #64748b;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-bottom: 1px solid #e2e8f0;
        }

        .permission-matrix-row {
            border-bottom: 1px solid #f1f5f9;
        }

        .permission-matrix-row:last-child {
            border-bottom: none;
        }

        .permission-row-name {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .permission-toggle {
            margin: 0;
        }

        .permission-toggle input {
            display: none;
        }

        .permission-toggle-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            min-height: 34px;
            padding: 7px 10px;
            border-radius: 999px;
            border: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            font-size: 11px;
            font-weight: 900;
            transition: all 0.16s ease;
            user-select: none;
            cursor: pointer;
            line-height: 1.2;
        }

        .permission-toggle-btn:hover {
            transform: translateY(-1px);
            border-color: #94a3b8;
            color: #334155;
        }

        .permission-toggle.view input:checked + .permission-toggle-btn,
        .permission-toggle.view .permission-toggle-btn[aria-pressed="true"] {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #1d4ed8;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
        }

        .permission-toggle.edit input:checked + .permission-toggle-btn,
        .permission-toggle.edit .permission-toggle-btn[aria-pressed="true"] {
            border-color: #86efac;
            background: #ecfdf5;
            color: #15803d;
            box-shadow: 0 8px 18px rgba(22, 163, 74, 0.10);
        }

        .permission-matrix-na {
            display: inline-flex;
            justify-content: center;
            width: 100%;
            color: #cbd5e1;
            font-weight: 800;
        }

        @media (max-width: 767.98px) {
            .permission-matrix-scroll {
                max-height: 430px;
            }
            .permission-matrix-table {
                min-width: 460px;
            }
            .permission-matrix-head,
            .permission-matrix-row {
                grid-template-columns: minmax(180px, 1fr) 105px 110px;
                padding: 9px 10px;
            }
        }


        .realtime-product-rule-box {
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 16px;
        }

        .realtime-product-rule-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .realtime-product-rule-list {
            max-height: 280px;
            overflow-y: auto;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #fff;
            padding: 10px;
            display: grid;
            gap: 8px;
        }

        .realtime-product-rule-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #fff;
        }

        .realtime-product-rule-item.hidden-by-filter {
            display: none !important;
        }

        .realtime-product-rule-meta {
            font-size: 11px;
            color: #64748b;
            margin-top: 3px;
            line-height: 1.45;
        }

        .realtime-product-rule-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            color: #64748b;
            background: #f8fafc;
            font-size: 12px;
        }

        .owner-only-mask {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 13px;
            line-height: 1.4;
            font-weight: 800;
            color: #64748b;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 999px;
            padding: 8px 12px;
            white-space: nowrap;
        }

        .hidden-auth {
            display: none !important;
        }

        .session-modal-user-card {
            border: 1px solid #dbeafe;
            background: linear-gradient(135deg, #eff6ff, #ffffff);
            border-radius: 18px;
            padding: 16px;
        }

        .session-modal-role {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 12px;
            font-weight: 800;
        }

        .session-modal-divider {
            position: relative;
            text-align: center;
            margin: 18px 0 16px;
        }

        .session-modal-divider::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e2e8f0;
        }

        .session-modal-divider span {
            position: relative;
            display: inline-block;
            padding: 0 12px;
            background: #fff;
            color: #94a3b8;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .session-modal-alert {
            display: none;
        }

        .session-modal-alert.show {
            display: block;
        }

        .session-modal-note {
            font-size: 12px;
            color: #64748b;
            line-height: 1.7;
            margin: 0;
        }

        .session-modal-action-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        body.role-dropship #dash-section,
        body.role-dropship #add-section,
        body.role-dropship #in-section,
        body.role-dropship #out-section,
        body.role-dropship #history-section,
        body.role-dropship #finance-section,
        body.role-dropship #reset-section,
        body.role-dropship #company-section,
        body.role-dropship #admin-section {
            display: none !important;
        }

        body.role-dropship #realtime-section .hero-mini-stat[data-owner-metric="asset"],
        body.role-dropship .realtime-asset-pill,
        body.role-dropship [data-owner-column="asset"] {
            display: none !important;
        }


        

        .finance-nav-tabs {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .finance-nav-btn {
            border: 1px solid #dbeafe;
            background: #ffffff;
            color: #1e3a8a;
            border-radius: 999px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.18s ease;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.05);
        }

        .finance-nav-btn:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        .finance-nav-btn.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
        }


        .finance-master-nav-btn {
            margin-left: auto;
        }

        @media (max-width: 767.98px) {
            .finance-master-nav-btn {
                margin-left: 0;
            }
        }

        .finance-pane {
            display: none;
        }

        .finance-pane.active {
            display: block;
            animation: fadeIn 0.24s ease;
        }

        .finance-pane-card {
            border-radius: 24px;
            overflow: hidden;
        }

        .finance-pane-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .finance-pane-title {
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

        .finance-pane-copy {
            margin: 5px 0 0;
            font-size: 13px;
            color: #64748b;
            line-height: 1.7;
        }

        .finance-transaction-switcher {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            padding: 8px;
            margin-bottom: 18px;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .finance-transaction-btn {
            border: 1px solid #dbeafe;
            background: #ffffff;
            color: #1e3a8a;
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.18s ease;
        }

        .finance-transaction-btn:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        .finance-transaction-btn.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
        }

        .finance-input-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
            gap: 18px;
        }

        .finance-preview-card {
            border: 1px solid #dbeafe;
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 18px;
        }

        .finance-preview-card .finance-summary-chip {
            width: 100%;
            justify-content: space-between;
            padding-inline: 14px;
        }

        .finance-preview-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: #f8fafc;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #64748b;
            font-size: 13px;
            padding: 20px;
        }

        .finance-preview-clickable {
            cursor: zoom-in;
        }

        .finance-popup-media {
            max-width: 100%;
            max-height: 72vh;
            border-radius: 18px;
            display: block;
            margin: 0 auto;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
        }

        .finance-popup-doc {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 14px;
            background: #eff6ff;
            color: #1d4ed8;
            font-weight: 800;
            text-decoration: none;
        }

        @media (max-width: 991.98px) {
            .finance-input-layout {
                grid-template-columns: 1fr;
            }
        }
.finance-kpi-card {
            border-radius: 18px;
        }

        .finance-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
        }


        .finance-dashboard-priority {
            border-radius: 28px;
            padding: 18px;
            background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 58%, #2563eb 100%);
            box-shadow: 0 22px 48px rgba(37, 99, 235, 0.22);
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        .finance-dashboard-priority::before {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            right: -92px;
            top: -132px;
            border-radius: 999px;
            background: rgba(255,255,255,0.13);
        }

        .finance-dashboard-priority-head,
        .finance-secondary-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
            position: relative;
            z-index: 1;
        }

        .finance-dashboard-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.78);
            margin-bottom: 5px;
        }

        .finance-dashboard-kicker-muted {
            color: #64748b;
        }

        .finance-dashboard-priority-title,
        .finance-secondary-title {
            font-size: 18px;
            font-weight: 900;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .finance-dashboard-priority-badge {
            display: inline-flex;
            align-items: center;
            padding: 7px 11px;
            border-radius: 999px;
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.24);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .finance-focus-grid {
            position: relative;
            z-index: 1;
        }

        .finance-focus-card {
            border: 1px solid rgba(255,255,255,0.23);
            border-radius: 24px;
            padding: 22px;
            background: rgba(255,255,255,0.96);
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
            overflow: hidden;
            position: relative;
        }

        .finance-focus-card::after {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 4px;
            border-radius: 999px;
            background: #2563eb;
        }

        .finance-focus-card-in::after { background: linear-gradient(90deg, #16a34a, #86efac); }
        .finance-focus-card-out::after { background: linear-gradient(90deg, #ef4444, #fecaca); }
        .finance-focus-card-balance::after { background: linear-gradient(90deg, #2563eb, #93c5fd); }

        .finance-focus-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            font-size: 22px;
            background: #eff6ff;
            color: #2563eb;
        }

        .finance-focus-card-in .finance-focus-icon { background: #ecfdf5; color: #059669; }
        .finance-focus-card-out .finance-focus-icon { background: #fef2f2; color: #dc2626; }
        .finance-focus-card-balance .finance-focus-icon { background: #eff6ff; color: #2563eb; }

        .finance-focus-card .analytics-kpi-label {
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #475569;
            margin-bottom: 9px;
        }

        .finance-focus-card .analytics-kpi-value {
            font-size: clamp(1.8rem, 2.8vw, 2.65rem);
            line-height: 1.02;
            letter-spacing: -0.045em;
            color: #0f172a;
        }

        .finance-focus-card .analytics-kpi-sub {
            margin-top: 10px;
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
        }

        .finance-secondary-summary {
            border: 1px solid rgba(226, 232, 240, 0.95);
            border-radius: 24px;
            padding: 16px;
            background: #f8fafc;
        }

        .finance-secondary-card {
            border-radius: 18px;
            border: 1px solid rgba(203, 213, 225, 0.82);
            background: rgba(255,255,255,0.82);
            box-shadow: none;
            padding: 16px;
            min-height: 118px;
        }

        .finance-secondary-card .analytics-kpi-label {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 8px;
        }

        .finance-secondary-card .analytics-kpi-value {
            font-size: clamp(1.1rem, 1.45vw, 1.45rem);
            line-height: 1.1;
            color: #334155;
            letter-spacing: -0.025em;
        }

        .finance-secondary-card .analytics-kpi-sub {
            margin-top: 8px;
            color: #7c8aa0;
            font-size: 11.5px;
            line-height: 1.45;
        }

        .finance-summary-chip {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }


        .summary-balance-shell {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .summary-balance-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .summary-balance-toolbar-left {
            min-width: 0;
            flex: 1 1 260px;
        }

        .summary-balance-toolbar-left .page-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            line-height: 1.2;
            letter-spacing: -0.02em;
            color: #10233f;
        }

        .summary-balance-toolbar-left .page-title i {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, rgba(37, 99, 235, 0.16), rgba(59, 130, 246, 0.08));
            color: #2563eb;
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.65), 0 10px 22px rgba(37, 99, 235, 0.10);
            flex-shrink: 0;
        }

        .summary-balance-toolbar-left .section-note {
            margin-top: 6px;
            max-width: 720px;
            color: #5d7492;
        }

        .summary-balance-toolbar-actions {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .summary-balance-period-field {
            min-width: 180px;
        }

        .summary-balance-panel {
            border-radius: 26px;
            border: 1px solid rgba(205, 220, 237, 0.92);
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 26%),
                linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
            box-shadow: 0 20px 42px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .summary-balance-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .summary-balance-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid rgba(147, 197, 253, 0.60);
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .summary-balance-title {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin: 0;
            color: #10233f;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        }

        .summary-balance-copy {
            margin: 6px 0 0;
            color: #60758f;
            font-size: 12px;
            line-height: 1.7;
            max-width: 760px;
            font-weight: 500;
        }

        .summary-balance-badge {
            border-radius: 999px;
            padding: 9px 14px;
            background: linear-gradient(135deg, #16325c, #22497f);
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.03em;
            box-shadow: 0 10px 22px rgba(16, 35, 63, 0.14);
        }

        .summary-balance-grid {
            row-gap: 14px;
        }

        .summary-balance-card {
            min-height: 100%;
            border-radius: 22px;
            border: 1px solid rgba(216, 230, 245, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
            overflow: hidden;
            position: relative;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        }

        .summary-balance-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
            border-color: rgba(191, 219, 254, 0.96);
        }

        .summary-balance-card::before {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(203, 213, 225, 0.90), rgba(203, 213, 225, 0.18));
        }

        .summary-balance-card.summary-accent-blue::before {
            background: linear-gradient(90deg, #2563eb, rgba(96, 165, 250, 0.38));
        }

        .summary-balance-card.summary-accent-green::before {
            background: linear-gradient(90deg, #059669, rgba(52, 211, 153, 0.38));
        }

        .summary-balance-card.summary-accent-red::before {
            background: linear-gradient(90deg, #dc2626, rgba(251, 113, 133, 0.38));
        }

        .summary-balance-card.summary-accent-violet::before {
            background: linear-gradient(90deg, #7c3aed, rgba(167, 139, 250, 0.42));
        }

        .summary-balance-card.summary-accent-amber::before {
            background: linear-gradient(90deg, #d97706, rgba(251, 191, 36, 0.42));
        }

        .summary-balance-card.summary-accent-slate::before {
            background: linear-gradient(90deg, #475569, rgba(148, 163, 184, 0.46));
        }

        .summary-balance-card-body {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 18px 18px 18px;
        }

        .summary-balance-label {
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            font-weight: 800;
            color: #5d7492;
            margin-bottom: 8px;
        }

        .summary-balance-value {
            font-size: clamp(1rem, 1.58vw, 1.42rem);
            line-height: 1.14;
            font-weight: 800;
            letter-spacing: -0.025em;
            color: #0f1f35;
            word-break: normal;
            overflow-wrap: anywhere;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        }

        .summary-balance-sub {
            margin-top: 8px;
            color: #60758f;
            font-size: 11px;
            line-height: 1.55;
            font-weight: 600;
        }

        .summary-balance-icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.32rem;
            background: linear-gradient(145deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.06));
            color: #2563eb;
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.60), 0 10px 20px rgba(37, 99, 235, 0.08);
            flex-shrink: 0;
        }

        .summary-accent-green .summary-balance-icon {
            background: linear-gradient(145deg, rgba(5, 150, 105, 0.14), rgba(16, 185, 129, 0.08));
            color: #059669;
            box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.46), 0 10px 20px rgba(5, 150, 105, 0.08);
        }

        .summary-accent-red .summary-balance-icon {
            background: linear-gradient(145deg, rgba(220, 38, 38, 0.14), rgba(251, 113, 133, 0.08));
            color: #dc2626;
            box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.42), 0 10px 20px rgba(220, 38, 38, 0.08);
        }

        .summary-accent-violet .summary-balance-icon {
            background: linear-gradient(145deg, rgba(124, 58, 237, 0.14), rgba(167, 139, 250, 0.08));
            color: #7c3aed;
            box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.44), 0 10px 20px rgba(124, 58, 237, 0.08);
        }

        .summary-accent-amber .summary-balance-icon {
            background: linear-gradient(145deg, rgba(217, 119, 6, 0.14), rgba(251, 191, 36, 0.08));
            color: #d97706;
            box-shadow: inset 0 0 0 1px rgba(253, 230, 138, 0.48), 0 10px 20px rgba(217, 119, 6, 0.08);
        }

        .summary-accent-slate .summary-balance-icon {
            background: linear-gradient(145deg, rgba(71, 85, 105, 0.14), rgba(148, 163, 184, 0.08));
            color: #475569;
            box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.5), 0 10px 20px rgba(71, 85, 105, 0.08);
        }

        .summary-balance-chart-card {
            border-radius: 24px;
            border: 1px solid rgba(216, 230, 245, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
            position: relative;
            overflow: hidden;
        }

        .summary-balance-chart-card::before {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2563eb, rgba(16, 185, 129, 0.28));
        }

        .summary-balance-chart-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .summary-balance-chart-title {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #10233f;
            margin: 0;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
        }

        .summary-balance-chart-note {
            font-size: 11px;
            color: #60758f;
            font-weight: 600;
        }

        .summary-balance-table-card {
            border-radius: 22px;
            border: 1px solid rgba(216, 230, 245, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
            position: relative;
            overflow: hidden;
        }

        .summary-balance-table-card::before {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #475569, rgba(148, 163, 184, 0.26));
        }

        .summary-balance-table-card .table-responsive {
            border-radius: 18px;
            border: 1px solid #e7eef7;
            background: #ffffff;
        }

        .summary-balance-table-card .finance-table thead th {
            background: #f4f8fd;
            color: #5d7492;
            font-size: 10.5px;
            letter-spacing: 0.08em;
            border-bottom: 1px solid #dbe6f3;
        }

        .summary-balance-table-card .table tbody td {
            font-size: 12px;
            color: #1f3147;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        .summary-balance-table-card .table tbody tr:nth-child(even) td {
            background: #f9fbfe;
        }

        .summary-balance-table-card .table tbody tr:hover td {
            background: #f1f7ff;
        }

        .summary-balance-table-card .table tbody tr:last-child td {
            border-bottom: 0;
        }

        .summary-balance-table-card .table tbody td:first-child {
            font-weight: 700;
            color: #10233f;
        }

        .summary-balance-metric-chip {
            background: #f6f9fd;
            border: 1px solid #dbe6f3;
            color: #334155;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        @media (max-width: 1199.98px) {
            .summary-balance-toolbar-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 767.98px) {
            .summary-balance-toolbar-left .page-title {
                font-size: 18px;
            }

            .summary-balance-card-body {
                padding: 16px;
            }

            .summary-balance-icon {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                font-size: 1.15rem;
            }

            .summary-balance-panel {
                border-radius: 22px;
            }
        }

        html[data-theme="dark"] .summary-balance-panel,
        body[data-theme="dark"] .summary-balance-panel {
            border-color: rgba(51, 65, 85, 0.82);
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 26%),
                linear-gradient(180deg, #0d1728 0%, #101a2d 100%);
        }

        html[data-theme="dark"] .summary-balance-title,
        html[data-theme="dark"] .summary-balance-value,
        html[data-theme="dark"] .summary-balance-chart-title,
        html[data-theme="dark"] .summary-balance-table-card .table tbody td:first-child,
        body[data-theme="dark"] .summary-balance-title,
        body[data-theme="dark"] .summary-balance-value,
        body[data-theme="dark"] .summary-balance-chart-title,
        body[data-theme="dark"] .summary-balance-table-card .table tbody td:first-child {
            color: #f8fafc;
        }

        html[data-theme="dark"] .summary-balance-copy,
        html[data-theme="dark"] .summary-balance-sub,
        html[data-theme="dark"] .summary-balance-chart-note,
        html[data-theme="dark"] .summary-balance-table-card .table tbody td,
        body[data-theme="dark"] .summary-balance-copy,
        body[data-theme="dark"] .summary-balance-sub,
        body[data-theme="dark"] .summary-balance-chart-note,
        body[data-theme="dark"] .summary-balance-table-card .table tbody td {
            color: #cbd5e1;
        }

        html[data-theme="dark"] .summary-balance-card,
        html[data-theme="dark"] .summary-balance-chart-card,
        html[data-theme="dark"] .summary-balance-table-card,
        body[data-theme="dark"] .summary-balance-card,
        body[data-theme="dark"] .summary-balance-chart-card,
        body[data-theme="dark"] .summary-balance-table-card {
            background: linear-gradient(180deg, #111b2d 0%, #0d1728 100%);
            border-color: rgba(51, 65, 85, 0.88);
            box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42);
        }

        html[data-theme="dark"] .summary-balance-badge,
        body[data-theme="dark"] .summary-balance-badge {
            background: #e2e8f0;
            color: #0f172a;
        }

        html[data-theme="dark"] .summary-balance-metric-chip,
        html[data-theme="dark"] .summary-balance-table-card .table-responsive,
        body[data-theme="dark"] .summary-balance-metric-chip,
        body[data-theme="dark"] .summary-balance-table-card .table-responsive {
            background: rgba(15, 23, 42, 0.78);
            border-color: rgba(51, 65, 85, 0.9);
            color: #e2e8f0;
        }

        html[data-theme="dark"] .summary-balance-table-card .finance-table thead th,
        body[data-theme="dark"] .summary-balance-table-card .finance-table thead th {
            background: #142033;
            color: #9db4d0;
            border-bottom-color: rgba(51, 65, 85, 0.88);
        }

        html[data-theme="dark"] .summary-balance-table-card .table tbody td,
        body[data-theme="dark"] .summary-balance-table-card .table tbody td {
            background: transparent;
            color: #d8e4f2;
        }

        html[data-theme="dark"] .summary-balance-table-card .table tbody tr:nth-child(even) td,
        body[data-theme="dark"] .summary-balance-table-card .table tbody tr:nth-child(even) td {
            background: rgba(15, 23, 42, 0.46);
        }

        html[data-theme="dark"] .summary-balance-table-card .table tbody tr:hover td,
        body[data-theme="dark"] .summary-balance-table-card .table tbody tr:hover td {
            background: rgba(30, 41, 59, 0.72);
        }

        .finance-owner-note {
            border: 1px dashed #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            border-radius: 16px;
            padding: 14px 16px;
            font-size: 13px;
            font-weight: 600;
        }

        .company-settings-preview {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px;
            border: 1px dashed #bfdbfe;
            background: linear-gradient(135deg, #eff6ff, #ffffff);
            border-radius: 18px;
        }

        .company-settings-logo {
            width: 78px;
            height: 78px;
            border-radius: 22px;
            overflow: hidden;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #dbeafe;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .company-settings-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        .company-settings-logo.has-image img {
            display: block;
        }

        .company-settings-logo.has-image .company-settings-logo-fallback {
            display: none;
        }

        .company-settings-logo-fallback {
            font-size: 28px;
        }

        .company-settings-name {
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.3;
        }

        .company-settings-meta {
            font-size: 12px;
            color: #64748b;
            margin-top: 6px;
        }


        
        .finance-bukti-thumb {
            width: 58px;
            height: 58px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid #dbeafe;
            background: #fff;
        }

        .finance-bukti-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            font-weight: 700;
        }

        .finance-bukti-empty {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
        }


        .page-shell {
            display: grid;
            gap: 22px;
        }

        .toolbar-card {
            border-radius: 20px;
            padding: 18px 20px;
            background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        }

        .section-hero-card {
            position: relative;
            overflow: hidden;
            border-radius: 26px;
            padding: 24px;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 28%),
                linear-gradient(145deg, #ffffff, #f8fbff);
            border: 1px solid rgba(191, 219, 254, 0.85);
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.07);
        }

        .section-hero-card::after {
            content: "";
            position: absolute;
            inset: auto -40px -50px auto;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 68%);
            pointer-events: none;
        }

        .section-hero-title {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.03em;
            margin: 10px 0 8px;
            color: #0f172a;
        }

        .section-hero-copy {
            margin: 0;
            max-width: 760px;
            color: #64748b;
            font-size: 13px;
            line-height: 1.75;
        }

        .hero-badge-soft {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
        }

        .hero-mini-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .hero-mini-stat {
            border-radius: 18px;
            background: rgba(255,255,255,0.86);
            border: 1px solid rgba(226,232,240,0.95);
            padding: 14px 16px;
            min-height: 96px;
        }

        .hero-mini-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 8px;
        }

        .hero-mini-value {
            font-size: 26px;
            font-weight: 800;
            line-height: 1.1;
            color: #0f172a;
        }

        .hero-mini-sub {
            margin-top: 6px;
            font-size: 12px;
            color: #64748b;
            font-weight: 600;
        }

        .realtime-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .realtime-filter-wrap {
            display: grid;
            grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 0.9fr) minmax(170px, 0.9fr);
            gap: 12px;
            width: min(100%, 760px);
        }

        .realtime-table-shell {
            border-radius: 22px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: #fff;
            overflow: hidden;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
        }

        .realtime-table-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
        }

        .realtime-table-title {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

        .realtime-table-subtitle {
            margin: 4px 0 0;
            font-size: 12px;
            color: #64748b;
        }

        .realtime-count-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid #bfdbfe;
        }

        .table-stok {
            margin: 0;
        }

        .table-stok thead th {
            background: #0f172a;
            color: white;
            border: none;
            padding: 15px 14px;
            font-size: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .table-stok thead th:first-child {
            border-right: 1px solid rgba(255,255,255,0.08);
        }

        .table-stok tbody tr:nth-child(odd) td {
            background: #fcfdff;
        }

        .table-stok tbody tr:hover td {
            background: #f8fbff;
        }

        .table-stok tbody td {
            border-top: 1px solid #eef2f7;
            border-bottom: none;
            border-left: none;
            border-right: none;
            padding: 13px 12px;
            font-size: 13px;
            color: #0f172a;
        }

        .sticky-col {
            min-width: 290px;
            background-color: #fff !important;
        }

        .table-stok tbody tr:nth-child(odd) .sticky-col {
            background: #fcfdff !important;
        }

        .table-stok tbody tr:hover .sticky-col {
            background: #f8fbff !important;
        }

        .realtime-product-cell {
            min-width: 280px;
        }

        .realtime-product-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.4;
        }

        .realtime-product-meta {
            margin-top: 4px;
            font-size: 11px;
            color: #64748b;
        }

        .realtime-size-cell {
            min-width: 44px;
            padding: 11px 8px !important;
            font-variant-numeric: tabular-nums;
            transition: background-color 0.18s ease, color 0.18s ease;
        }

        .realtime-size-value {
            display: inline-block;
            min-width: 18px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            color: #14532d;
            letter-spacing: -0.01em;
        }

        .realtime-size-cell.zero {
            background: #f8fafc !important;
        }

        .realtime-size-cell.zero .realtime-size-value {
            color: #cbd5e1;
            font-weight: 600;
            opacity: 0.55;
        }

        .realtime-size-cell.ready {
            background: #f0fdf4 !important;
        }

        .realtime-size-cell.ready .realtime-size-value {
            color: #166534;
            font-weight: 800;
        }

        .realtime-total-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 58px;
            padding: 9px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            font-weight: 800;
            font-size: 12px;
        }

        .realtime-asset-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            padding: 9px 12px;
            border-radius: 999px;
            background: #ecfdf5;
            color: #15803d;
            border: 1px solid #bbf7d0;
            font-weight: 800;
            font-size: 12px;
        }


        .realtime-category-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 18px;
        }

        .realtime-category-card {
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
            min-width: 0;
        }

        .realtime-category-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 18px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
        }

        .realtime-category-title {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
        }

        .realtime-category-subtitle {
            margin: 4px 0 0;
            font-size: 12px;
            color: #64748b;
        }

        .realtime-category-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .realtime-category-table-wrap {
            overflow-x: auto;
        }

        .realtime-category-table {
            width: 100%;
            min-width: max-content;
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }

        .realtime-category-table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: linear-gradient(180deg, #166534, #15803d);
            color: #fff;
            border: none;
            padding: 12px 10px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            text-align: center;
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
        }

        .realtime-category-table thead th:first-child {
            text-align: left;
            min-width: 220px;
            padding-left: 16px;
        }

        .realtime-category-table thead th:nth-child(2) {
            text-align: left;
            min-width: 150px;
        }

        .realtime-category-table tbody td {
            padding: 12px 10px;
            border-top: 1px solid #eef2f7;
            font-size: 13px;
            text-align: center;
            vertical-align: middle;
            background: #fff;
        }

        .realtime-category-table tbody tr:nth-child(odd) td {
            background: #fcfdff;
        }

        .realtime-category-table tbody tr:hover td {
            background: #f8fbff;
        }

        .realtime-category-table tbody td:first-child {
            text-align: left;
            padding-left: 16px;
            position: sticky;
            left: 0;
            z-index: 2;
            box-shadow: 2px 0 8px rgba(0,0,0,0.03);
        }

        .realtime-category-table tbody td:nth-child(2) {
            text-align: left;
            position: sticky;
            left: 220px;
            z-index: 2;
            box-shadow: 2px 0 8px rgba(0,0,0,0.02);
        }

        .realtime-category-table tbody tr:nth-child(odd) td:first-child,
        .realtime-category-table tbody tr:nth-child(odd) td:nth-child(2) {
            background: #fcfdff;
        }

        .realtime-category-table tbody tr:hover td:first-child,
        .realtime-category-table tbody tr:hover td:nth-child(2) {
            background: #f8fbff;
        }

        .realtime-product-name-cell {
            min-width: 220px;
        }

        .realtime-color-cell {
            min-width: 150px;
        }

        .realtime-color-name {
            font-size: 12px;
            font-weight: 700;
            color: #334155;
            white-space: nowrap;
        }

        .realtime-category-empty {
            padding: 30px 18px;
            text-align: center;
            color: #64748b;
            font-size: 13px;
        }

        .realtime-category-summary {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            padding: 14px 18px 18px;
            border-top: 1px solid #eef2f7;
            background: #fbfdff;
        }

        .realtime-summary-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
        }

        .realtime-category-grid-empty {
            padding: 38px 18px;
            text-align: center;
            color: #64748b;
            font-size: 13px;
        }

        @media (max-width: 767.98px) {
            .realtime-filter-wrap {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .realtime-category-grid {
                grid-template-columns: 1fr;
                padding: 14px;
            }
        }

        .marketplace-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }

        .view-toggle-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        .view-toggle-btn {
            border: none;
            background: transparent;
            color: #64748b;
            font-size: 13px;
            font-weight: 800;
            padding: 10px 14px;
            border-radius: 10px;
            transition: all 0.2s ease;
        }

        .view-toggle-btn.active {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #fff;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
        }

        .products-shell[data-view="grid"] .product-table-wrap {
            display: none;
        }

        .products-shell[data-view="list"] .product-grid-wrap,
        .products-shell[data-view="list"] .product-dropship-wrap {
            display: none;
        }

        .products-shell[data-view="grid"] .product-dropship-wrap {
            display: none;
        }

        .products-shell[data-view="dropship"] .product-table-wrap,
        .products-shell[data-view="dropship"] .product-grid-wrap {
            display: none;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .product-dropship-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .product-dropship-card {
            position: relative;
            border: 1px solid #dbeafe;
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }

        .product-dropship-card:hover {
            transform: translateY(-4px);
            border-color: #93c5fd;
            box-shadow: 0 24px 44px rgba(37, 99, 235, 0.12);
        }

        .product-dropship-thumb-wrap {
            position: relative;
            aspect-ratio: 1 / 1;
            background: linear-gradient(180deg, #eff6ff, #f8fafc);
            overflow: hidden;
        }

        .product-dropship-thumb,
        .product-dropship-thumb-empty {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-dropship-thumb {
            object-fit: cover;
        }

        .product-dropship-thumb-empty {
            color: #94a3b8;
            font-size: 42px;
        }

        .product-dropship-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.82);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
        }

        .product-dropship-body {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .product-dropship-title {
            font-size: 15px;
            font-weight: 800;
            line-height: 1.45;
            color: #0f172a;
            min-height: 44px;
        }

        .product-dropship-meta {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
            min-height: 20px;
        }

        .product-dropship-description {
            margin-top: 10px;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #ffffff;
            color: #334155;
            font-size: 12px;
            line-height: 1.55;
            min-height: 46px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-dropship-description.is-empty {
            color: #94a3b8;
            border-style: dashed;
            background: #f8fafc;
        }

        .product-dropship-price-wrap {
            margin-top: 0;
            display: flex;
            align-items: baseline;
            gap: 8px;
            flex-wrap: wrap;
        }

        .product-dropship-price-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #64748b;
        }

        .product-dropship-price-value {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -.04em;
            line-height: 1;
            color: #0f172a;
        }

        .product-dropship-price-value::before {
            content: "Rp";
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #2563eb;
            margin-right: 8px;
            vertical-align: middle;
            position: relative;
            top: -1px;
        }

        .product-dropship-actions {
            margin-top: 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .product-dropship-actions .btn {
            flex: 1 1 160px;
        }

        .product-dropship-actions.single-action .btn {
            flex-basis: 100%;
        }

        .product-dropship-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid #e2e8f0;
        }

        .product-dropship-summary-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            border: 1px solid #bfdbfe;
        }

        .product-dropship-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 22px;
            padding: 40px 18px;
            text-align: center;
            color: #64748b;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
        }

        .dropship-market-detail-shell {
            display: grid;
            grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
            gap: 20px;
            align-items: start;
        }

        .dropship-market-detail-media-card {
            border: 1px solid #dbeafe;
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 14px;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
            position: sticky;
            top: 0;
        }

        .dropship-market-detail-media-frame {
            aspect-ratio: 1 / 1;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid #dbeafe;
            background: linear-gradient(180deg, #eff6ff, #f8fafc);
        }

        .dropship-market-detail-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .dropship-market-detail-image-empty {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #94a3b8;
            font-size: 14px;
            text-align: center;
            padding: 18px;
        }

        .dropship-market-detail-image-empty i {
            font-size: 44px;
            color: #60a5fa;
        }

        .dropship-market-detail-content {
            display: grid;
            gap: 16px;
        }

        .dropship-market-detail-head-card {
            border: 1px solid #dbeafe;
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 18px;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
        }

        .dropship-market-detail-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
            border: 1px solid #bfdbfe;
        }

        .dropship-market-detail-title {
            margin: 14px 0 12px;
            font-size: 24px;
            font-weight: 800;
            line-height: 1.35;
            color: #0f172a;
        }

        .dropship-market-detail-price-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .dropship-market-detail-price-label {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748b;
        }

        .dropship-market-detail-price-value {
            font-size: 28px;
            font-weight: 900;
            line-height: 1;
            color: #2563eb;
        }

        .dropship-market-detail-action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .dropship-market-drive-btn {
            min-width: 180px;
        }

        .dropship-market-option-section {
            display: grid;
            gap: 10px;
        }

        .dropship-market-option-section.is-size {
            margin-top: 16px;
        }

        .dropship-market-option-label {
            font-size: 12px;
            font-weight: 800;
            color: #475569;
        }

        .dropship-market-option-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .dropship-market-option-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 56px;
            padding: 10px 14px;
            border-radius: 14px;
            border: 1px solid #dbeafe;
            background: #ffffff;
            color: #1e293b;
            font-size: 13px;
            font-weight: 800;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.06);
        }

        .dropship-market-option-chip.is-color {
            background: #f8fbff;
            color: #1d4ed8;
        }

        .dropship-market-option-empty {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
        }

        .dropship-detail-shell {
            display: grid;
            gap: 16px;
        }

        .dropship-detail-description-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 16px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
        }

        .dropship-detail-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #2563eb;
        }

        .dropship-detail-description-text {
            font-size: 13px;
            line-height: 1.72;
            color: #334155;
            white-space: normal;
        }

        .dropship-detail-variant-card {
            box-shadow: none;
        }

        .dropship-detail-size-chip {
            min-width: 74px;
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            opacity: 1;
            filter: none;
        }

        .dropship-variant-stock-shell {
            display: grid;
            gap: 18px;
        }

        .dropship-variant-stock-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            overflow: hidden;
            background: #fff;
        }

        .dropship-variant-stock-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        .dropship-variant-stock-title {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 800;
            color: #0f172a;
        }

        .dropship-variant-stock-title-dot {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, #2563eb, #60a5fa);
            box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12);
        }

        .dropship-variant-stock-count {
            font-size: 11px;
            font-weight: 800;
            color: #475569;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            padding: 7px 10px;
        }

        .dropship-variant-stock-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 16px;
        }

        .dropship-variant-stock-chip {
            min-width: 92px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #334155;
            text-align: center;
            transition: all .2s ease;
        }

        .dropship-variant-stock-chip.active {
            border-color: #86efac;
            background: linear-gradient(180deg, #f0fdf4, #dcfce7);
            color: #166534;
            box-shadow: 0 10px 18px rgba(22, 101, 52, 0.10);
        }

        .dropship-variant-stock-chip.inactive {
            border-color: #e2e8f0;
            background: #f8fafc;
            color: #94a3b8;
            opacity: .72;
            filter: grayscale(.18);
        }

        .dropship-variant-stock-chip-size {
            display: block;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.2;
        }

        .dropship-variant-stock-chip-qty {
            display: block;
            margin-top: 4px;
            font-size: 11px;
            font-weight: 700;
        }

        @media (max-width: 991.98px) {
            .product-dropship-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .dropship-market-detail-shell {
                grid-template-columns: 1fr;
            }

            .dropship-market-detail-media-card {
                position: static;
            }

            .dropship-market-detail-title {
                font-size: 20px;
            }
        }

        @media (max-width: 575.98px) {
            .product-dropship-grid {
                grid-template-columns: 1fr;
            }

            .dropship-market-detail-price-value {
                font-size: 24px;
            }

            .dropship-market-option-chip {
                min-width: 48px;
                padding: 9px 12px;
            }
        }

        .dropship-variant-modal-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            padding: 42px 18px;
            text-align: center;
            color: #64748b;
            background: #f8fafc;
        }

        .product-market-card {
            position: relative;
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        }

        .product-market-card:hover {
            transform: translateY(-4px);
            border-color: #bfdbfe;
            box-shadow: 0 24px 40px rgba(15, 23, 42, 0.10);
        }

        .product-market-thumb-wrap {
            position: relative;
            aspect-ratio: 1 / 1;
            background: linear-gradient(180deg, #f8fafc, #eff6ff);
            overflow: hidden;
        }

        .product-market-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .product-market-thumb-empty {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 38px;
        }

        .product-market-select {
            position: absolute;
            top: 14px;
            left: 14px;
            width: 24px;
            height: 24px;
            border-radius: 8px;
            border: 1px solid rgba(226,232,240,0.95);
            background: rgba(255,255,255,0.96);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
        }

        .product-market-id {
            position: absolute;
            top: 14px;
            right: 14px;
            padding: 7px 10px;
            border-radius: 999px;
            background: rgba(15,23,42,0.82);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }

        .product-market-body {
            padding: 16px;
        }

        .product-market-title {
            font-size: 14px;
            font-weight: 800;
            line-height: 1.45;
            color: #0f172a;
            min-height: 40px;
        }

        .product-market-meta {
            margin-top: 6px;
            font-size: 12px;
            color: #64748b;
            min-height: 18px;
        }

        .product-market-price {
            margin-top: 12px;
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
        }

        .product-market-variant {
            margin-top: 14px;
            display: grid;
            gap: 10px;
        }

        .product-market-variant-section {
            display: grid;
            gap: 8px;
        }

        .product-market-variant-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .product-market-color-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .product-market-color-card {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 14px;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border: 1px solid #dbe3ee;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
            max-width: 100%;
        }

        .product-market-color-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(135deg, #2563eb, #93c5fd);
            flex-shrink: 0;
        }

        .product-market-color-name {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 160px;
        }

        .product-market-size-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .product-market-size-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            padding: 8px 10px;
            border-radius: 12px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 11px;
            font-weight: 800;
            color: #334155;
        }

        .product-market-more-btn {
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            padding: 8px 12px;
            border-radius: 12px;
            line-height: 1;
        }

        .product-market-more-btn:hover {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .product-list-variant-wrap {
            display: grid;
            gap: 10px;
            min-width: 260px;
        }

        .product-list-variant-group {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
            padding: 12px;
        }

        .product-list-variant-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }

        .product-list-variant-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 800;
            color: #0f172a;
        }

        .product-list-variant-title .product-market-color-dot {
            width: 9px;
            height: 9px;
        }

        .product-list-variant-count {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
        }

        .product-list-size-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .product-list-size-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            padding: 6px 9px;
            border-radius: 10px;
            background: #ffffff;
            border: 1px solid #dbe3ee;
            font-size: 11px;
            font-weight: 800;
            color: #334155;
        }

        .product-list-more-line {
            display: flex;
            justify-content: flex-start;
        }
        .product-db-cell {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .product-db-name {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .product-db-sub {
            display: none;
        }

        .product-db-photo {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid #e2e8f0;
            background: #fff;
            display: block;
            flex-shrink: 0;
        }

        .product-db-photo-empty {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            color: #94a3b8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 12px;
        }

        .product-db-variant-text {
            font-size: 12px;
            line-height: 1.5;
            color: #334155;
            white-space: normal;
            word-break: break-word;
        }

        .product-db-variant-empty {
            color: #94a3b8;
            font-size: 12px;
        }

        .product-db-actions {
            display: flex;
            justify-content: center;
            gap: 4px;
            flex-wrap: nowrap;
        }

        .product-db-actions .btn {
            min-width: 28px;
            width: 28px;
            height: 28px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }

        .product-db-actions .btn i {
            font-size: 12px;
        }

        .product-db-number {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            white-space: nowrap;
            font-size: 11px;
        }


        .variant-modal-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #f8fafc;
            padding: 16px;
            margin-bottom: 14px;
        }

        .variant-modal-card:last-child {
            margin-bottom: 0;
        }

        .variant-modal-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .variant-modal-card-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .variant-modal-size-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .variant-modal-size-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 44px;
            padding: 8px 10px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #dbe3ee;
            font-size: 12px;
            font-weight: 800;
            color: #334155;
        }

        .product-market-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 14px;
        }

        .product-market-actions .btn {
            min-height: 42px;
            padding-left: 8px;
            padding-right: 8px;
            font-size: 12px;
        }

        .product-surface-card {
            border-radius: 18px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .product-table-wrap {
            border: 1px solid #dbe3ee;
            border-radius: 12px;
            overflow: hidden;
            background: #ffffff;
        }

        .product-table-wrap .table-responsive {
            overflow-x: auto;
            overflow-y: auto;
            max-height: calc(100vh - 250px);
        }

        .table-products-modern {
            margin-bottom: 0;
        }

        .table-products-modern thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: #f8fafc;
            color: #475569;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-weight: 800;
            border: 1px solid #dbe3ee;
            border-top: 0;
            padding: 6px 7px;
            white-space: nowrap;
            line-height: 1.05;
        }

        .table-products-modern tbody td {
            border: 1px solid #eef2f7;
            padding: 4px 7px;
            background: #fff;
            font-size: 11px;
            line-height: 1.12;
            white-space: nowrap;
            vertical-align: middle;
        }

        .table-products-database tbody tr:nth-child(even) td {
            background: #fbfcfe;
        }

        .table-products-database tbody tr:hover td {
            background: #f3f7fd;
        }

        .product-db-price-input-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            justify-content: flex-end;
            white-space: nowrap;
        }

        .product-db-rp-badge {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 30px;
            border-radius: 8px;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            font-size: 10px;
            font-weight: 800;
        }

        .product-db-price-input {
            min-width: 92px;
            height: 26px;
            padding: 3px 7px;
            text-align: right;
            font-weight: 700;
            font-size: 11px;
            border-radius: 8px !important;
            border: 1px solid #dbeafe;
            background: #fff;
        }

        .product-db-price-input.is-dirty {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
        }

        .product-db-price-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
        }

        
        .product-db-hpp-stack {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            white-space: nowrap;
        }

        .product-db-hpp-tools {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            flex-wrap: nowrap;
        }

        .product-db-hpp-summary {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
        }

        .product-db-hpp-btn {
            white-space: nowrap;
            height: 26px;
            padding: 0 7px;
            font-size: 10px;
            border-radius: 7px;
        }

        .product-db-hpp-btn i {
            font-size: 11px;
        }

        .database-hpp-modal .modal-content {
            border: 0;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
        }

        .database-hpp-modal-head {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
            color: #fff;
            padding: 18px 22px;
        }

        .database-hpp-modal-head .modal-title {
            font-size: 18px;
            font-weight: 800;
        }

        .database-hpp-modal-sub {
            font-size: 12px;
            color: rgba(255,255,255,0.76);
            margin-top: 6px;
        }

        .database-hpp-modal-body {
            background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
        }
.product-db-row-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-top: 0;
            padding: 0;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #fff7ed;
            color: #c2410c;
            border: 1px solid #fed7aa;
            font-size: 10px;
            font-weight: 800;
            flex-shrink: 0;
        }

        .product-db-row-status i {
            font-size: 10px;
        }

        .table-products-database {
            table-layout: fixed;
            width: max-content;
            min-width: 1320px;
        }

        .product-spreadsheet-table .product-name-col,
        .product-spreadsheet-table tbody td.product-name-col {
            position: sticky;
            left: 36px;
            z-index: 4;
            background: #fff;
            box-shadow: 1px 0 0 #e2e8f0;
        }

        .product-spreadsheet-table thead .product-name-col {
            z-index: 7;
            background: #f8fafc;
        }

        .product-db-compact-money { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
        .product-db-compact-muted { color: #64748b; font-size: 10px; }
        .product-db-stock-pill { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 42px; padding: 3px 7px; border-radius: 7px; background: #f8fafc; border: 1px solid #e2e8f0; font-weight: 800; font-size: 11px; }
        .product-db-multi-wrap { position: relative; display: inline-flex; justify-content: center; }
        .product-db-multi-btn { height: 26px; padding: 0 8px; border-radius: 8px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
        .product-multi-hpp-popover { position: fixed; z-index: 6000; width: min(320px, calc(100vw - 24px)); max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18); padding: 8px; display: none; }
        .product-multi-hpp-popover.show { display: block; }
        .product-multi-hpp-title { font-size: 11px; font-weight: 800; color: #0f172a; margin: 2px 4px 6px; }
        .product-multi-hpp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid #eef2f7; border-radius: 9px; margin-bottom: 6px; font-size: 11px; }
        .product-multi-hpp-row:last-child { margin-bottom: 0; }
        .product-multi-hpp-supplier { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #334155; }
        .product-multi-hpp-price { font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
        .product-multi-hpp-default { display: inline-flex; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 9px; font-weight: 800; }
        .product-multi-hpp-empty { padding: 10px; text-align: center; color: #64748b; font-size: 11px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }

        .table-products-database th:nth-child(1),
        .table-products-database td:nth-child(1) { width: 34px; }
        .table-products-database th:nth-child(2),
        .table-products-database td:nth-child(2) { width: 60px; }
        .table-products-database th:nth-child(3),
        .table-products-database td:nth-child(3) { width: 52px; }
        .table-products-database th:nth-child(5),
        .table-products-database td:nth-child(5),
        .table-products-database th:nth-child(6),
        .table-products-database td:nth-child(6),
        .table-products-database th:nth-child(7),
        .table-products-database td:nth-child(7) { width: 180px; }
        .table-products-database th:last-child,
        .table-products-database td:last-child { width: 110px; }
        .table-products-database td:nth-child(4) { min-width: 0; }

        .bulk-save-confirm-surface {
            background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .bulk-save-confirm-icon {
            width: 68px;
            height: 68px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #fff;
            font-size: 28px;
            box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
            margin-bottom: 18px;
        }

        .bulk-save-confirm-kicker {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: #2563eb;
            margin-bottom: 8px;
        }

        .bulk-save-confirm-title {
            font-size: 24px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
            letter-spacing: -0.03em;
        }

        .bulk-save-confirm-copy {
            color: #64748b;
            line-height: 1.7;
            font-size: 13px;
        }

        .bulk-save-confirm-summary {
            padding: 14px 16px;
            border-radius: 16px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e3a8a;
            font-size: 13px;
            font-weight: 700;
        }


        .search-input-modern {
            min-height: 48px;
            border-radius: 14px !important;
            padding-left: 46px;
            background: #fff;
        }

        .search-wrap-modern {
            position: relative;
            flex: 1 1 320px;
            max-width: 520px;
        }

        .search-wrap-modern i {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 15px;
        }

        .mobile-topbar {
            display: none;
            position: sticky;
            top: 0;
            z-index: 1200;
            background: rgba(243,246,251,0.95);
            backdrop-filter: blur(10px);
            padding: 12px 14px;
            border-bottom: 1px solid rgba(226,232,240,0.95);
        }

        .mobile-topbar .btn {
            min-height: 42px;
            border-radius: 12px;
        }

        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: rgba(15,23,42,0.42);
            backdrop-filter: blur(2px);
        }

        body.sidebar-open {
            overflow: hidden;
        }

        body.sidebar-open .sidebar-backdrop {
            display: block;
        }

@media (max-width: 991.98px) {
            .mobile-topbar {
                display: block;
            }

            #sidebar {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                width: min(86vw, 340px);
                height: 100vh;
                transform: translateX(-104%);
                transition: transform 0.24s ease;
                box-shadow: 0 30px 70px rgba(15,23,42,0.18);
            }

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

            #content {
                margin-left: 0;
                padding: 16px;
            }

            .sticky-col {
                position: relative;
                left: auto;
                min-width: 240px;
                box-shadow: none;
            }

            .auth-shell {
                grid-template-columns: 1fr;
            }

            .auth-brand-card,
            .auth-form-card {
                min-height: auto;
            }

            .hero-mini-stats {
                grid-template-columns: 1fr;
            }

            .realtime-filter-wrap {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .product-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            .product-market-actions {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .section-hero-card {
                padding: 18px;
                border-radius: 22px;
            }

            .section-hero-title {
                font-size: 20px;
            }

            .product-grid {
                grid-template-columns: 1fr;
            }

    
        .realtime-category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 18px;
            padding: 18px;
        }

        .realtime-category-card {
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
            min-width: 0;
        }

        .realtime-category-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 18px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
        }

        .realtime-category-title {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
        }

        .realtime-category-subtitle {
            margin: 4px 0 0;
            font-size: 12px;
            color: #64748b;
        }

        .realtime-category-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .realtime-category-table-wrap {
            overflow-x: auto;
        }

        .realtime-category-table {
            width: 100%;
            min-width: max-content;
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }

        .realtime-category-table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: #0f172a;
            color: #fff;
            border: none;
            padding: 12px 10px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            text-align: center;
        }

        .realtime-category-table thead th:first-child {
            text-align: left;
            min-width: 270px;
            padding-left: 16px;
        }

        .realtime-category-table tbody td {
            padding: 12px 10px;
            border-top: 1px solid #eef2f7;
            font-size: 13px;
            text-align: center;
            vertical-align: middle;
            background: #fff;
        }

        .realtime-category-table tbody tr:nth-child(odd) td {
            background: #fcfdff;
        }

        .realtime-category-table tbody tr:hover td {
            background: #f8fbff;
        }

        .realtime-category-table tbody td:first-child {
            text-align: left;
            padding-left: 16px;
            position: sticky;
            left: 0;
            z-index: 1;
            box-shadow: 2px 0 8px rgba(0,0,0,0.03);
        }

        .realtime-category-table tbody tr:nth-child(odd) td:first-child {
            background: #fcfdff;
        }

        .realtime-category-table tbody tr:hover td:first-child {
            background: #f8fbff;
        }

        .realtime-category-empty {
            padding: 30px 18px;
            text-align: center;
            color: #64748b;
            font-size: 13px;
        }

        .realtime-category-summary {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            padding: 14px 18px 18px;
            border-top: 1px solid #eef2f7;
            background: #fbfdff;
        }

        .realtime-summary-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
        }

        .realtime-category-grid-empty {
            padding: 38px 18px;
            text-align: center;
            color: #64748b;
            font-size: 13px;
        }

        @media (max-width: 767.98px) {
            .realtime-filter-wrap {
                grid-template-columns: 1fr;
                width: 100%;
            }

            .realtime-category-grid {
                grid-template-columns: 1fr;
                padding: 14px;
            }
        }

        .marketplace-toolbar {
                align-items: stretch;
            }

            .view-toggle-group {
                width: 100%;
                justify-content: space-between;
            }

            .view-toggle-btn {
                flex: 1 1 0;
            }

            .realtime-table-head {
                padding: 16px;
            }

            .realtime-count-chip {
                width: 100%;
                justify-content: center;
            }

            .table-stok thead th,
            .table-stok tbody td {
                font-size: 12px;
                padding: 12px 10px;
            }
        }
    

        html {
            color-scheme: light;
        }

        html[data-theme="dark"] {
            color-scheme: dark;
        }

        :root {
            --font-body: 'Inter', sans-serif;
            --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
            --shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.07);
            --shadow-soft-lg: 0 22px 54px rgba(15, 23, 42, 0.10);
            --app-max-width: 1600px;
        }

        body,
        .form-control,
        .form-select,
        .btn,
        .table,
        .dropdown-menu,
        .modal-content {
            font-family: var(--font-body);
        }

        .page-title,
        .brand-title,
        .nav-category,
        .section-hero-title,
        .history-hero-title,
        .auth-title,
        .auth-brand-title,
        .analytics-kpi-value,
        .stok-awal-matrix-title,
        .history-table-title,
        .company-settings-name,
        .finance-kpi-value,
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 24%),
                linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
        }

        #content {
            max-width: calc(var(--app-max-width) - var(--sidebar-width));
            margin-left: var(--sidebar-width);
            padding: 28px;
        }

        .page-head {
            margin-bottom: 18px;
        }

        .page-title {
            font-size: 1.35rem;
            letter-spacing: -0.03em;
        }

        .section-note,
        .brand-subtitle,
        .sidebar-user-meta,
        .auth-subtitle,
        .history-hero-copy,
        .stok-awal-matrix-copy {
            line-height: 1.7;
        }

        #sidebar {
            background: rgba(255,255,255,0.88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.6), 12px 0 36px rgba(15, 23, 42, 0.05);
        }

        .brand-wrap,
        .sidebar-user-panel {
            background: transparent;
        }

        .sidebar-user-panel {
            border-radius: 18px;
            margin: 16px 14px;
            background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.9));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        }

        .nav-link {
            min-height: 46px;
            border: 1px solid transparent;
        }

        .nav-link.active {
            background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #60a5fa);
        }

        .mobile-topbar {
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            background: rgba(255,255,255,0.88);
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        #mobileTopbarBrand {
            font-family: var(--font-heading);
            color: var(--text-main);
        }

        .card,
        .product-market-card,
        .section-hero-card,
        .auth-form-card,
        .history-table-card,
        .analytics-filter-card,
        .stok-awal-matrix-card,
        .batch-row,
        .batch-card {
            border-radius: 22px;
            box-shadow: var(--shadow-soft);
        }

        .section-hero-card,
        .product-surface-card,
        .history-overview-card,
        .analytics-filter-card,
        .stok-awal-matrix-card {
            border-color: rgba(226, 232, 240, 0.88);
        }

        .section-hero-card {
            background:
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 18%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
        }

        .table-responsive,
        .analytics-table-wrap,
        .history-table-card .table-responsive {
            scrollbar-width: thin;
        }

        .form-control,
        .form-select,
        .input-group-text {
            border-color: #d8e1ec;
            background: rgba(255,255,255,0.96);
            box-shadow: none;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: rgba(37, 99, 235, 0.4);
            box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.10);
        }

        .btn {
            min-height: 42px;
            box-shadow: none;
        }

        .btn-theme-toggle,
        .theme-toggle-btn {
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(255,255,255,0.92);
            color: var(--text-main);
            font-weight: 700;
        }

        .btn-theme-toggle:hover,
        .theme-toggle-btn:hover {
            background: #eff6ff;
            border-color: rgba(59,130,246,0.28);
            color: #1d4ed8;
        }

        .table-products-modern thead th,
        .finance-table thead th,
        .history-table-card thead th,
        .analytics-table-wrap thead th {
            font-size: 11px;
            letter-spacing: 0.07em;
        }

        .product-market-card,
        .history-row td,
        .stok-awal-matrix-color-card,
        .batch-row,
        .variant-modal-card {
            border-color: rgba(226, 232, 240, 0.9);
        }

        .search-wrap-modern,
        .realtime-filter-wrap .form-control,
        .realtime-filter-wrap .form-select {
            border-radius: 16px;
        }

        @media (min-width: 992px) {
            #content {
                padding: 30px 32px 36px;
            }
        }

        @media (max-width: 991.98px) {
            body {
                background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
            }

            #content {
                max-width: 100%;
                padding: 14px 14px 28px;
            }

            .mobile-topbar .btn {
                min-height: 40px;
                min-width: 40px;
            }

            .sidebar-user-panel {
                margin-top: 10px;
            }
        }



        .mobile-section-tabs {
            display: none;
        }

        .mobile-section-tabs-inner {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 10px 12px 12px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            background: rgba(247, 251, 248, 0.96);
            border-bottom: 1px solid rgba(215,226,219,0.95);
        }

        .mobile-section-tabs-inner::-webkit-scrollbar {
            display: none;
        }

        .mobile-section-tab {
            border: 1px solid #d5dfd8;
            background: #ffffff;
            color: #29423b;
            border-radius: 999px;
            padding: 9px 12px;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 0 0 auto;
        }

        .mobile-section-tab.active {
            background: linear-gradient(135deg, #1f6f57, #166534);
            border-color: #166534;
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(22, 101, 52, 0.18);
        }

        html[data-theme="dark"] body,
        body[data-theme="dark"] {
            --bg-light: #08111f;
            --card-bg: #0f172a;
            --text-main: #e5edf7;
            --text-soft: #94a3b8;
            --border-color: #223149;
            background:
                radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 26%),
                linear-gradient(180deg, #020817 0%, #08111f 100%);
            color: var(--text-main);
        }

        html[data-theme="dark"] #sidebar,
        body[data-theme="dark"] #sidebar {
            background: rgba(8, 17, 31, 0.90);
            border-right-color: rgba(34, 49, 73, 0.95);
            box-shadow: 0 0 0 1px rgba(34, 49, 73, 0.75), 12px 0 40px rgba(2, 8, 23, 0.35);
        }

        html[data-theme="dark"] .mobile-topbar,
        body[data-theme="dark"] .mobile-topbar {
            background: rgba(8, 17, 31, 0.88);
            border-bottom-color: rgba(34, 49, 73, 0.95);
            box-shadow: 0 10px 24px rgba(2, 8, 23, 0.35);
        }

        html[data-theme="dark"] .card,
        html[data-theme="dark"] .auth-form-card,
        html[data-theme="dark"] .product-market-card,
        html[data-theme="dark"] .section-hero-card,
        html[data-theme="dark"] .history-table-card,
        html[data-theme="dark"] .analytics-filter-card,
        html[data-theme="dark"] .stok-awal-matrix-card,
        html[data-theme="dark"] .batch-row,
        html[data-theme="dark"] .batch-card,
        html[data-theme="dark"] .sidebar-user-panel,
        body[data-theme="dark"] .card,
        body[data-theme="dark"] .auth-form-card,
        body[data-theme="dark"] .product-market-card,
        body[data-theme="dark"] .section-hero-card,
        body[data-theme="dark"] .history-table-card,
        body[data-theme="dark"] .analytics-filter-card,
        body[data-theme="dark"] .stok-awal-matrix-card,
        body[data-theme="dark"] .batch-row,
        body[data-theme="dark"] .batch-card,
        body[data-theme="dark"] .sidebar-user-panel {
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(9, 17, 30, 0.98));
            border-color: rgba(34, 49, 73, 0.92);
            box-shadow: 0 18px 42px rgba(2, 8, 23, 0.35);
        }

        html[data-theme="dark"] .auth-overlay,
        body[data-theme="dark"] .auth-overlay {
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 35%),
                radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.10), transparent 35%),
                rgba(2, 8, 23, 0.96);
        }

        html[data-theme="dark"] .auth-brand-card,
        body[data-theme="dark"] .auth-brand-card {
            background: linear-gradient(135deg, #0b1220, #16356f);
            box-shadow: 0 24px 70px rgba(2, 8, 23, 0.45);
        }

        html[data-theme="dark"] .nav-link,
        html[data-theme="dark"] .brand-title,
        html[data-theme="dark"] .page-title,
        html[data-theme="dark"] #mobileTopbarBrand,
        html[data-theme="dark"] .sidebar-user-name,
        html[data-theme="dark"] .history-table-title,
        html[data-theme="dark"] .analytics-kpi-card::after,
        body[data-theme="dark"] .analytics-kpi-card::after,
        html[data-theme="dark"] .analytics-chart-card.analytics-chart-feature::after,
        body[data-theme="dark"] .analytics-chart-card.analytics-chart-feature::after,
        html[data-theme="dark"] .analytics-donut-card-feature::after,
        body[data-theme="dark"] .analytics-donut-card-feature::after {
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)) !important;
        }

        html[data-theme="dark"] .analytics-kpi-value,
        html[data-theme="dark"] .history-product-title,
        html[data-theme="dark"] .history-variant-main,
        html[data-theme="dark"] .history-time-main,
        html[data-theme="dark"] .history-user-main,
        html[data-theme="dark"] .product-market-title,
        body[data-theme="dark"] .nav-link,
        body[data-theme="dark"] .brand-title,
        body[data-theme="dark"] .page-title,
        body[data-theme="dark"] #mobileTopbarBrand,
        body[data-theme="dark"] .sidebar-user-name,
        body[data-theme="dark"] .history-table-title,
        body[data-theme="dark"] .analytics-kpi-value,
        body[data-theme="dark"] .history-product-title,
        body[data-theme="dark"] .history-variant-main,
        body[data-theme="dark"] .history-time-main,
        body[data-theme="dark"] .history-user-main,
        body[data-theme="dark"] .product-market-title {
            color: #e5edf7;
        }

        html[data-theme="dark"] .section-note,
        html[data-theme="dark"] .brand-subtitle,
        html[data-theme="dark"] .sidebar-user-meta,
        html[data-theme="dark"] .text-muted,
        html[data-theme="dark"] .history-product-meta,
        html[data-theme="dark"] .history-variant-sub,
        html[data-theme="dark"] .history-time-sub,
        html[data-theme="dark"] .history-user-sub,
        html[data-theme="dark"] .auth-subtitle,
        html[data-theme="dark"] .section-hero-copy,
        html[data-theme="dark"] .stok-awal-matrix-copy,
        body[data-theme="dark"] .section-note,
        body[data-theme="dark"] .brand-subtitle,
        body[data-theme="dark"] .sidebar-user-meta,
        body[data-theme="dark"] .text-muted,
        body[data-theme="dark"] .history-product-meta,
        body[data-theme="dark"] .history-variant-sub,
        body[data-theme="dark"] .history-time-sub,
        body[data-theme="dark"] .history-user-sub,
        body[data-theme="dark"] .auth-subtitle,
        body[data-theme="dark"] .section-hero-copy,
        body[data-theme="dark"] .stok-awal-matrix-copy {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .nav-link:hover,
        body[data-theme="dark"] .nav-link:hover {
            background: rgba(37, 99, 235, 0.18);
            color: #bfdbfe;
        }

        html[data-theme="dark"] .nav-link.active,
        body[data-theme="dark"] .nav-link.active {
            color: #ffffff !important;
        }

        html[data-theme="dark"] .form-control,
        html[data-theme="dark"] .form-select,
        html[data-theme="dark"] .input-group-text,
        body[data-theme="dark"] .form-control,
        body[data-theme="dark"] .form-select,
        body[data-theme="dark"] .input-group-text {
            background: rgba(10, 20, 35, 0.95);
            border-color: rgba(51, 65, 85, 0.95);
            color: #e5edf7;
        }

        html[data-theme="dark"] .form-control::placeholder,
        body[data-theme="dark"] .form-control::placeholder {
            color: #64748b;
        }

        html[data-theme="dark"] .table,
        html[data-theme="dark"] .table tbody td,
        body[data-theme="dark"] .table,
        body[data-theme="dark"] .table tbody td {
            color: #dbe5f0;
        }

        html[data-theme="dark"] .table-stok thead th,
        body[data-theme="dark"] .table-stok thead th {
            background: #0b1220;
            border-color: #223149;
        }

        html[data-theme="dark"] .sticky-col,
        html[data-theme="dark"] .history-row td,
        body[data-theme="dark"] .sticky-col,
        body[data-theme="dark"] .history-row td {
            background: #0f172a !important;
            border-color: rgba(34, 49, 73, 0.95);
        }

        html[data-theme="dark"] .history-id-badge,
        html[data-theme="dark"] .history-qty-badge,
        html[data-theme="dark"] .finance-summary-chip,
        html[data-theme="dark"] .history-record-count,
        html[data-theme="dark"] .stok-awal-matrix-summary,
        html[data-theme="dark"] .stok-awal-matrix-helper,
        html[data-theme="dark"] .owner-only-mask,
        html[data-theme="dark"] .btn-theme-toggle,
        html[data-theme="dark"] .theme-toggle-btn,
        body[data-theme="dark"] .history-id-badge,
        body[data-theme="dark"] .history-qty-badge,
        body[data-theme="dark"] .finance-summary-chip,
        body[data-theme="dark"] .history-record-count,
        body[data-theme="dark"] .stok-awal-matrix-summary,
        body[data-theme="dark"] .stok-awal-matrix-helper,
        body[data-theme="dark"] .owner-only-mask,
        body[data-theme="dark"] .btn-theme-toggle,
        body[data-theme="dark"] .theme-toggle-btn {
            background: rgba(15, 23, 42, 0.9);
            color: #dbe5f0;
            border-color: rgba(51, 65, 85, 0.95);
        }

        html[data-theme="dark"] .btn-theme-toggle:hover,
        html[data-theme="dark"] .theme-toggle-btn:hover,
        body[data-theme="dark"] .btn-theme-toggle:hover,
        body[data-theme="dark"] .theme-toggle-btn:hover {
            background: rgba(29, 78, 216, 0.18);
            color: #bfdbfe;
            border-color: rgba(96, 165, 250, 0.28);
        }

        html[data-theme="dark"] .modal-content,
        body[data-theme="dark"] .modal-content {
            background: #0f172a;
            color: #e5edf7;
            border-color: rgba(34, 49, 73, 0.95);
        }


        /* ===== 2026 Responsive Finance Redesign Override ===== */
        :root {
            --sidebar-width: 292px;
            --primary-color: #1f6f57;
            --primary-dark: #164e3f;
            --success-color: #166534;
            --danger-color: #7f1d1d;
            --bg-light: #eef4ef;
            --card-bg: rgba(255,255,255,0.94);
            --text-main: #10231d;
            --text-soft: #5a6b66;
            --border-color: #d7e2db;
            --surface-soft: #f7fbf8;
            --surface-strong: #e7f1ea;
            --accent-red-soft: #fbe7e7;
            --shadow-soft: 0 18px 45px rgba(16, 35, 29, 0.08);
        }

        html, body {
            overflow-x: hidden;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(22, 101, 52, 0.08), transparent 24%),
                radial-gradient(circle at top right, rgba(127, 29, 29, 0.06), transparent 22%),
                linear-gradient(180deg, #f7fbf8 0%, #edf4ef 100%);
            color: var(--text-main);
        }

        .content-section,
        .card,
        .table-responsive,
        .modal-content,
        .row,
        [class*="col-"] {
            min-width: 0;
        }

        #sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(180deg, #0f2b22 0%, #12352a 60%, #102b23 100%);
            border-right: 1px solid rgba(255,255,255,0.06);
            box-shadow: 16px 0 42px rgba(7, 20, 16, 0.22);
        }

        #content {
            margin-left: var(--sidebar-width);
            width: calc(100% - var(--sidebar-width));
            max-width: none;
            padding: 28px 30px 34px;
        }

        .brand-wrap {
            padding: 24px 20px 18px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
        }

        .brand-title,
        .brand-subtitle,
        .sidebar-user-name,
        .sidebar-user-meta,
        .nav-category {
            color: #ecfdf5;
        }

        .brand-title .blue {
            color: #86efac;
        }

        .brand-subtitle,
        .sidebar-user-meta,
        .nav-category {
            color: rgba(236, 253, 245, 0.68);
        }

        .brand-logo {
            background: linear-gradient(135deg, rgba(134,239,172,0.18), rgba(52,211,153,0.10));
            border-color: rgba(134,239,172,0.22);
            color: #bbf7d0;
            box-shadow: 0 12px 24px rgba(0,0,0,0.18);
        }

        .sidebar-user-panel {
            border-color: rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .nav-link {
            color: rgba(240, 253, 244, 0.78);
            margin: 5px 12px;
            border-radius: 14px;
            min-height: 48px;
            background: transparent;
        }

        .nav-link:hover {
            background: rgba(255,255,255,0.07);
            color: #ffffff;
        }

        .nav-link.active {
            background: linear-gradient(135deg, #1f6f57, #166534 65%, #14532d);
            color: #fff !important;
            box-shadow: 0 16px 28px rgba(5, 22, 14, 0.28);
        }

        .page-head {
            margin-bottom: 20px;
        }

        .page-title {
            font-size: clamp(20px, 1.6vw, 28px);
            letter-spacing: -0.03em;
        }

        .card,
        .auth-form-card,
        .history-table-card,
        .analytics-filter-card,
        .stok-awal-matrix-card,
        .batch-row,
        .batch-card,
        .product-market-card,
        .section-hero-card,
        .product-surface-card {
            background: var(--card-bg);
            border: 1px solid rgba(215, 226, 219, 0.92);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(10px);
        }

        .card,
        .batch-row,
        .product-market-card,
        .stok-awal-matrix-card,
        .history-row td,
        .variant-modal-card {
            border-radius: 20px;
        }

        .asset-card {
            background: linear-gradient(135deg, #164e3f 0%, #166534 55%, #14532d 100%);
            box-shadow: 0 20px 36px rgba(22, 101, 52, 0.24);
        }

        .section-note,
        .analytics-kpi-sub,
        .history-table-subtitle,
        .history-product-meta,
        .history-variant-sub,
        .history-time-sub,
        .history-user-sub,
        .stok-awal-matrix-copy,
        .product-search-hint,
        .auth-subtitle {
            color: var(--text-soft);
        }

        .table,
        .table * {
            word-break: break-word;
        }

        .table-responsive {
            overflow-x: auto;
            overflow-y: visible;
            border-radius: 18px;
        }

        .table-stok thead th,
        .table-products-modern thead th,
        .finance-table thead th,
        .history-table-card thead th,
        .analytics-table-wrap thead th {
            background: linear-gradient(180deg, #173d31 0%, #113126 100%) !important;
            color: #f0fdf4 !important;
            border-color: rgba(255,255,255,0.08) !important;
        }

        .table-stok tbody td,
        .table tbody td {
            background: rgba(255,255,255,0.88);
        }

        .sticky-col {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%) !important;
            min-width: 280px;
            max-width: 420px;
        }

        .btn-primary,
        .btn-success {
            background: linear-gradient(135deg, #1f6f57, #166534);
            border-color: #166534;
        }

        .btn-primary:hover,
        .btn-success:hover {
            background: linear-gradient(135deg, #185745, #14532d);
            border-color: #14532d;
        }

        .btn-danger,
        .btn-outline-danger:hover {
            background: linear-gradient(135deg, #8b1e1e, #7f1d1d);
            border-color: #7f1d1d;
        }

        .btn-outline-primary {
            border-color: rgba(31,111,87,0.28);
            color: #1f6f57;
        }

        .btn-outline-primary:hover {
            background: #1f6f57;
            border-color: #1f6f57;
        }

        .btn-outline-secondary,
        .btn-light.border {
            border-color: #d5dfd8;
            color: #29423b;
        }

        .form-control,
        .form-select,
        .input-group-text,
        .search-input-modern {
            border: 1px solid #d5dfd8;
            background: rgba(255,255,255,0.96);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
        }

        .form-control:focus,
        .form-select:focus,
        .search-input-modern:focus {
            border-color: rgba(22, 101, 52, 0.52);
            box-shadow: 0 0 0 0.22rem rgba(22, 101, 52, 0.12);
        }

        .mobile-topbar {
            background: rgba(247, 251, 248, 0.92);
            border-bottom: 1px solid rgba(215,226,219,0.95);
            box-shadow: 0 8px 24px rgba(16, 35, 29, 0.08);
        }

        .mobile-topbar .btn,
        .btn-theme-toggle,
        .theme-toggle-btn {
            border-radius: 14px;
        }

        .history-type-in {
            background: #e9f8ef;
            color: #166534;
            border-color: #ccefd9;
        }

        .history-type-out {
            background: #fdecec;
            color: #7f1d1d;
            border-color: #f6caca;
        }

        .history-type-neutral,
        .history-hero-badge,
        .analytics-period-chip,
        .batch-summary {
            background: #eaf4ee;
            color: #1f6f57;
            border-color: #cfe3d7;
        }

        .history-stat-chip.primary {
            background: #eaf4ee;
            border-color: #cfe3d7;
            color: #14532d;
        }

        .history-stat-chip.success {
            background: #edf9f0;
            border-color: #ccefd9;
            color: #166534;
        }

        .history-stat-chip.dark {
            background: #173d31;
            border-color: #173d31;
            color: #f0fdf4;
        }

        .section-hero-card,
        .history-overview-card,
        .analytics-filter-card {
            background:
                radial-gradient(circle at top right, rgba(22, 101, 52, 0.08), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,247,0.98));
        }

        .search-wrap-modern {
            max-width: min(100%, 560px);
        }

        .product-market-actions,
        .history-action-stack,
        .history-filter-actions,
        .stok-awal-matrix-actions,
        .batch-actions {
            gap: 10px;
        }

        .modal-content {
            border: 1px solid rgba(215,226,219,0.95);
            border-radius: 24px;
            overflow: hidden;
        }

        .modal-header,
        .modal-footer {
            border-color: rgba(215,226,219,0.85);
        }

        @media (min-width: 1200px) {
            #content {
                padding: 30px 34px 38px;
            }

            .container-fluid,
            .container-xxl,
            .container-xl,
            .container-lg {
                max-width: 100%;
            }
        }

        @media (max-width: 1199.98px) {
            :root {
                --sidebar-width: 270px;
            }

            #content {
                padding: 22px 22px 30px;
            }
        }

        @media (max-width: 991.98px) {
            body {
                background: linear-gradient(180deg, #f7fbf8 0%, #eff5f0 100%);
            }

            .mobile-topbar,
            .mobile-section-tabs {
                display: block;
            }

            .sidebar-backdrop {
                z-index: 1990;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.22s ease;
            }

            #sidebar {
                width: min(78vw, 280px);
                max-width: 280px;
                border-right: none;
                z-index: 2000;
                transform: translateX(-108%);
                pointer-events: none;
            }

            body.sidebar-open #sidebar {
                transform: translateX(0);
                pointer-events: auto;
            }

            body.sidebar-open .sidebar-backdrop {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }

            #content {
                width: 100%;
                margin-left: 0;
                max-width: 100%;
                padding: 14px 14px 28px;
                padding-top: 16px;
            }

            .page-head {
                align-items: stretch;
            }

            .page-head > * {
                width: 100%;
            }

            .sticky-col {
                min-width: 220px;
                max-width: 320px;
            }

            .table-stok thead th,
            .table-products-modern thead th,
            .finance-table thead th,
            .history-table-card thead th,
            .analytics-table-wrap thead th,
            .table tbody td,
            .table-stok tbody td {
                font-size: 12px;
                white-space: nowrap;
            }

            .history-table-card .table-responsive,
            .analytics-table-wrap,
            .table-responsive {
                -webkit-overflow-scrolling: touch;
            }

            .modal-dialog {
                margin: 0.75rem;
            }
        }

        @media (max-width: 767.98px) {
            .page-title {
                font-size: 18px;
            }

            #sidebar {
                width: min(82vw, 260px);
                max-width: 260px;
            }

            .brand-wrap {
                padding: 18px 14px 14px;
            }

            .sidebar-user-panel {
                margin: 12px 10px 0;
                padding: 12px;
            }

            .nav-category {
                padding: 14px 14px 6px;
            }

            .nav-link {
                margin: 4px 10px;
                padding: 11px 12px;
                min-height: 44px;
                font-size: 13px;
            }

            .card,
            .batch-row,
            .product-market-card,
            .stok-awal-matrix-card,
            .history-row td {
                border-radius: 16px;
            }

            .mobile-topbar {
                padding: 10px 12px;
            }

            .mobile-topbar .btn {
                min-height: 40px;
                min-width: 40px;
                padding-left: 10px;
                padding-right: 10px;
            }

            .mobile-section-tabs-inner {
                padding: 8px 10px 10px;
                gap: 6px;
            }

            .mobile-section-tab {
                min-height: 36px;
                padding: 8px 11px;
                font-size: 11px;
            }

            .table-responsive {
                border-radius: 14px;
            }

            .table-products-modern tbody td,
            .table-stok tbody td,
            .table tbody td {
                padding: 10px 8px;
                font-size: 12px;
            }

            .history-action-stack .btn,
            .product-market-actions .btn,
            .history-filter-actions .btn,
            .stok-awal-matrix-actions .btn,
            .batch-actions .btn {
                flex: 1 1 calc(50% - 10px);
            }

            .realtime-product-wrap,
            .brand-header {
                gap: 10px;
            }

            .realtime-product-photo,
            .realtime-product-photo-empty,
            .img-preview {
                width: 42px;
                height: 42px;
            }
        }

        @media (max-width: 575.98px) {
            #content {
                padding: 12px 10px 24px;
            }

            #sidebar {
                width: 248px;
                max-width: 248px;
            }

            .card,
            .batch-row,
            .stok-awal-matrix-card,
            .product-market-card,
            .history-table-card {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            .history-table-card .table-responsive {
                padding-left: 0;
                padding-right: 0;
            }

            .history-action-stack .btn,
            .product-market-actions .btn,
            .history-filter-actions .btn,
            .stok-awal-matrix-actions .btn,
            .batch-actions .btn {
                flex: 1 1 100%;
            }

            .sticky-col {
                min-width: 180px;
            }
        }



        .mobile-section-tabs {
            display: none;
        }

        .mobile-section-tabs-inner {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 10px 12px 12px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            background: rgba(247, 251, 248, 0.96);
            border-bottom: 1px solid rgba(215,226,219,0.95);
        }

        .mobile-section-tabs-inner::-webkit-scrollbar {
            display: none;
        }

        .mobile-section-tab {
            border: 1px solid #d5dfd8;
            background: #ffffff;
            color: #29423b;
            border-radius: 999px;
            padding: 9px 12px;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 0 0 auto;
        }

        .mobile-section-tab.active {
            background: linear-gradient(135deg, #1f6f57, #166534);
            border-color: #166534;
            color: #ffffff;
            box-shadow: 0 10px 20px rgba(22, 101, 52, 0.18);
        }

        html[data-theme="dark"] body,
        body[data-theme="dark"] {
            --bg-light: #07120f;
            --card-bg: rgba(11, 25, 21, 0.96);
            --text-main: #e8f3ed;
            --text-soft: #9db4a8;
            --border-color: #1d3a31;
            --surface-soft: #0f1f1a;
            background:
                radial-gradient(circle at top left, rgba(22, 101, 52, 0.18), transparent 24%),
                radial-gradient(circle at top right, rgba(127, 29, 29, 0.16), transparent 20%),
                linear-gradient(180deg, #040b09 0%, #07120f 100%);
        }

        html[data-theme="dark"] #sidebar,
        body[data-theme="dark"] #sidebar {
            background: linear-gradient(180deg, rgba(6,16,13,0.98) 0%, rgba(11,28,23,0.98) 55%, rgba(23,33,29,0.98) 100%);
            border-right-color: rgba(48, 84, 71, 0.74);
            box-shadow: 16px 0 42px rgba(0, 0, 0, 0.36);
        }

        html[data-theme="dark"] .mobile-topbar,
        body[data-theme="dark"] .mobile-topbar {
            background: rgba(6,16,13,0.9);
            border-bottom-color: rgba(48,84,71,0.72);
            box-shadow: 0 10px 24px rgba(0,0,0,0.32);
        }

        html[data-theme="dark"] .card,
        html[data-theme="dark"] .auth-form-card,
        html[data-theme="dark"] .product-market-card,
        html[data-theme="dark"] .section-hero-card,
        html[data-theme="dark"] .history-table-card,
        html[data-theme="dark"] .analytics-filter-card,
        html[data-theme="dark"] .stok-awal-matrix-card,
        html[data-theme="dark"] .batch-row,
        html[data-theme="dark"] .batch-card,
        html[data-theme="dark"] .sidebar-user-panel,
        body[data-theme="dark"] .card,
        body[data-theme="dark"] .auth-form-card,
        body[data-theme="dark"] .product-market-card,
        body[data-theme="dark"] .section-hero-card,
        body[data-theme="dark"] .history-table-card,
        body[data-theme="dark"] .analytics-filter-card,
        body[data-theme="dark"] .stok-awal-matrix-card,
        body[data-theme="dark"] .batch-row,
        body[data-theme="dark"] .batch-card,
        body[data-theme="dark"] .sidebar-user-panel {
            background: linear-gradient(180deg, rgba(11,25,21,0.98), rgba(8,18,15,0.98));
            border-color: rgba(29,58,49,0.95);
            box-shadow: 0 18px 42px rgba(0,0,0,0.34);
        }

        html[data-theme="dark"] .form-control,
        html[data-theme="dark"] .form-select,
        html[data-theme="dark"] .input-group-text,
        html[data-theme="dark"] .search-input-modern,
        body[data-theme="dark"] .form-control,
        body[data-theme="dark"] .form-select,
        body[data-theme="dark"] .input-group-text,
        body[data-theme="dark"] .search-input-modern {
            background: rgba(12, 27, 22, 0.96);
            color: #e8f3ed;
            border-color: rgba(48,84,71,0.85);
        }

        html[data-theme="dark"] .table-stok thead th,
        html[data-theme="dark"] .table-products-modern thead th,
        html[data-theme="dark"] .finance-table thead th,
        html[data-theme="dark"] .history-table-card thead th,
        html[data-theme="dark"] .analytics-table-wrap thead th,
        body[data-theme="dark"] .table-stok thead th,
        body[data-theme="dark"] .table-products-modern thead th,
        body[data-theme="dark"] .finance-table thead th,
        body[data-theme="dark"] .history-table-card thead th,
        body[data-theme="dark"] .analytics-table-wrap thead th {
            background: linear-gradient(180deg, #12372c 0%, #0a221b 100%) !important;
            color: #e8f3ed !important;
        }

        html[data-theme="dark"] .table tbody td,
        html[data-theme="dark"] .table-stok tbody td,
        body[data-theme="dark"] .table tbody td,
        body[data-theme="dark"] .table-stok tbody td {
            background: rgba(11,25,21,0.92);
            color: #e8f3ed;
            border-color: rgba(29,58,49,0.8);
        }

        html[data-theme="dark"] .sticky-col,
        body[data-theme="dark"] .sticky-col {
            background: linear-gradient(180deg, rgba(13,29,24,0.98), rgba(9,20,17,0.98)) !important;
        }

        html[data-theme="dark"] .nav-link,
        body[data-theme="dark"] .nav-link {
            color: rgba(232, 243, 237, 0.78);
        }

        html[data-theme="dark"] .nav-link:hover,
        body[data-theme="dark"] .nav-link:hover {
            background: rgba(255,255,255,0.06);
            color: #ffffff;
        }

        html[data-theme="dark"] .history-type-out,
        body[data-theme="dark"] .history-type-out {
            background: rgba(127,29,29,0.18);
            color: #fecaca;
            border-color: rgba(220,38,38,0.28);
        }

        html[data-theme="dark"] .history-type-in,
        body[data-theme="dark"] .history-type-in {
            background: rgba(22,101,52,0.18);
            color: #bbf7d0;
            border-color: rgba(34,197,94,0.26);
        }
        /* ===== End Responsive Finance Redesign Override ===== */

    
        /* History compact refinements */
        .history-overview-card {
            padding: 18px 18px 14px !important;
        }

        .history-hero {
            margin-bottom: 14px;
            padding-bottom: 14px;
            gap: 14px;
        }

        .history-hero-badge {
            padding: 6px 10px;
            font-size: 11px;
        }

        .history-hero-title {
            margin: 8px 0 4px;
            font-size: 16px;
        }

        .history-hero-copy {
            font-size: 12px;
            line-height: 1.55;
        }

        .history-hero-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            font-size: 22px;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
        }

        .history-filter-grid {
            gap: 10px;
            align-items: end;
        }

        .history-filter-item {
            grid-column: span 2;
        }

        .history-filter-item.wide {
            grid-column: span 4;
        }

        .history-overview-card label.small.fw-bold {
            font-size: 11px;
            margin-bottom: 4px;
            color: #64748b;
            letter-spacing: 0.02em;
        }

        .history-overview-card .form-control,
        .history-overview-card .form-select {
            min-height: 38px;
            padding-top: 0.42rem;
            padding-bottom: 0.42rem;
            font-size: 13px;
            border-radius: 10px !important;
        }

        .history-filter-actions {
            gap: 8px;
            justify-content: flex-start;
        }

        .history-filter-actions .btn {
            min-height: 38px;
            padding: 0.4rem 0.85rem;
            font-size: 12px;
            border-radius: 10px;
        }

        .history-stat-chip {
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 11px;
            gap: 6px;
        }

        .history-stat-chip strong {
            font-size: 12px;
        }

        .history-table-card {
            overflow: hidden;
        }

        .history-table-head {
            padding: 14px 16px 10px;
            gap: 10px;
        }

        .history-table-title {
            font-size: 15px;
        }

        .history-table-subtitle {
            font-size: 11px;
            margin-top: 2px;
        }

        .history-record-count {
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 11px;
        }

        .history-table-scroll {
            max-height: min(62vh, 560px);
            overflow: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable both-edges;
        }

        .history-table-card thead th {
            top: 0;
            z-index: 5;
            box-shadow: inset 0 -1px 0 #e2e8f0, 0 1px 0 rgba(15, 23, 42, 0.04);
        }

        .history-row td {
            padding: 10px 12px;
        }

        @media (max-width: 991.98px) {
            .history-overview-card {
                padding: 14px !important;
            }

            .history-filter-item,
            .history-filter-item.wide {
                grid-column: span 12;
            }

            .history-table-head {
                padding: 12px 14px 10px;
            }

            .history-table-scroll {
                max-height: min(58vh, 460px);
            }
        }

        @media (max-width: 767.98px) {
            .history-hero {
                margin-bottom: 12px;
                padding-bottom: 12px;
            }

            .history-stat-chip {
                width: 100%;
                justify-content: flex-start;
            }
        }


        .inbon-shell {
            display: grid;
            gap: 20px;
        }

        .inbon-window-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .inbon-window-btn {
            border: 1px solid #dbeafe;
            background: #fff;
            color: #1e3a8a;
            padding: 10px 16px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }

        .inbon-window-btn.active {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
        }

        .inbon-window-pane { display: none; }

        .inbon-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            align-items: stretch;
        }

        .inbon-summary-grid.inbon-summary-grid-mini {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
            align-items: stretch;
        }

        .inbon-summary-card {
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(135deg, #ffffff, #f8fbff);
            padding: 18px 18px 16px;
            min-height: 128px;
        }

        .inbon-summary-card.inbon-summary-card-mini {
            min-height: 106px;
            padding: 14px 16px;
            border-color: #e2e8f0;
            background: #ffffff;
        }

        .inbon-summary-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 8px;
        }

        .inbon-summary-value {
            font-size: clamp(1.3rem, 2.3vw, 2rem);
            line-height: 1.08;
            font-weight: 800;
            color: #0f172a;
        }

        .inbon-summary-card-mini .inbon-summary-value {
            font-size: clamp(1.05rem, 1.8vw, 1.35rem);
        }

        .inbon-summary-sub {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
            font-weight: 600;
        }

        .inbon-summary-stack {
            display: grid;
            gap: 12px;
        }


        .inbon-history-filter-card {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            padding: 14px;
            margin-bottom: 16px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
        }

        .inbon-history-filter-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(190px, 260px));
            gap: 12px;
            align-items: end;
            flex: 1;
            min-width: min(100%, 420px);
        }

        .inbon-history-filter-field label {
            display: block;
            margin-bottom: 6px;
            font-size: 10px;
            font-weight: 900;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .inbon-history-filter-field .form-select {
            min-height: 40px;
            border-radius: 12px !important;
            font-size: 12px;
            font-weight: 700;
            border-color: #dbe3ef;
        }

        .inbon-history-filter-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        @media (max-width: 767.98px) {
            .inbon-history-filter-card {
                align-items: stretch;
            }
            .inbon-history-filter-fields {
                grid-template-columns: 1fr;
            }
            .inbon-history-filter-actions,
            .inbon-history-filter-actions .btn {
                width: 100%;
            }
        }

        @media (max-width: 1199.98px) {
            .inbon-summary-grid,
            .inbon-summary-grid.inbon-summary-grid-mini {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {
            .inbon-summary-grid,
            .inbon-summary-grid.inbon-summary-grid-mini {
                grid-template-columns: 1fr;
            }
        }

        .inbon-window-pane.active { display: block; }

        .inbon-card {
            border-radius: 24px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
        }

        .inbon-transaction-table th,
        .inbon-transaction-table td {
            vertical-align: middle;
            white-space: nowrap;
        }

        .inbon-transaction-table td.wrap {
            white-space: normal;
        }

        .inbon-row-remove {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            padding: 0;
        }

        .inbon-empty-box {
            border: 1px dashed #cbd5e1;
            background: #f8fafc;
            color: #64748b;
            border-radius: 18px;
            padding: 18px;
            text-align: center;
            font-size: 13px;
        }

        .inbon-detail-list {
            display: grid;
            gap: 10px;
        }

        .inbon-detail-item {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 12px 14px;
            background: #fff;
        }

        .inbon-detail-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .inbon-detail-meta {
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
        }

        .inbon-status-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .inbon-status-chip.hutang { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
        .inbon-status-chip.piutang { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
        .inbon-status-chip.lunas { background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; }

        .inbon-supplier-summary td,
        .inbon-supplier-summary th {
            vertical-align: middle;
            white-space: nowrap;
        }

        .inbon-pane-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .inbon-history-table th,
        .inbon-history-table td {
            vertical-align: middle;
        }

        .inbon-collapsible-trigger {
            min-width: 108px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 700;
        }

        .inbon-history-detail-row td {
            background: #f8fbff !important;
            padding: 0 !important;
            border-bottom: 1px solid #e2e8f0;
        }

        .inbon-history-detail-box {
            padding: 16px 18px 18px;
        }

        .inbon-history-detail-note {
            border: 1px solid #dbeafe;
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
            overflow: hidden;
        }

        .inbon-note-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 16px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            flex-wrap: wrap;
        }

        .inbon-note-title {
            font-size: 14px;
            font-weight: 800;
            color: #0f172a;
            margin: 0;
        }

        .inbon-note-subtitle {
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
        }

        .inbon-note-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            white-space: nowrap;
        }

        .inbon-note-body {
            padding: 16px;
            display: grid;
            gap: 14px;
        }

        .inbon-note-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 12px;
        }

        .inbon-note-panel {
            grid-column: span 7;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #fff;
            padding: 14px;
        }

        .inbon-note-sidebar {
            grid-column: span 5;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #fff;
            padding: 14px;
        }

        .inbon-note-section-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #64748b;
            margin-bottom: 10px;
        }

        .inbon-note-items {
            display: grid;
            gap: 8px;
        }

        .inbon-note-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid #eef2f7;
            background: #f8fafc;
        }

        .inbon-note-item-title {
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
        }

        .inbon-note-item-meta {
            margin-top: 3px;
            font-size: 11px;
            color: #64748b;
            line-height: 1.5;
        }

        .inbon-note-item-amount {
            font-size: 12px;
            font-weight: 800;
            color: #0f172a;
            white-space: nowrap;
            align-self: center;
        }

        .inbon-note-meta-list {
            display: grid;
            gap: 8px;
        }

        .inbon-note-meta-row {
            display: grid;
            grid-template-columns: 108px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            font-size: 12px;
        }

        .inbon-note-meta-label {
            color: #64748b;
            font-weight: 700;
        }

        .inbon-note-meta-value {
            color: #0f172a;
            font-weight: 700;
            word-break: break-word;
        }

        .inbon-note-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .inbon-attachment-trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 800;
        }

        .inbon-attachment-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 11px;
            font-weight: 800;
        }

        .inbon-attachment-badge.empty {
            background: #fff;
            border-style: dashed;
            color: #94a3b8;
        }

        .inbon-history-summary-text {
            font-size: 12px;
            line-height: 1.55;
            color: #475569;
        }

        .inbon-attachment-modal-box {
            border: 1px solid #dbeafe;
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
            padding: 18px;
        }

        .inbon-attachment-modal-actions {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .inbon-attachment-modal-name {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            word-break: break-word;
        }

        .inbon-attachment-modal-action-buttons {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .inbon-attachment-modal-media {
            width: 100%;
            min-height: 220px;
            border: 1px solid #dbeafe;
            border-radius: 18px;
            overflow: auto;
            background: linear-gradient(180deg, #f8fbff, #eef4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .inbon-attachment-modal-media img {
            width: auto;
            max-width: min(100%, 520px);
            max-height: 52vh;
            border: 0;
            display: block;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
            cursor: zoom-in;
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }

        .inbon-attachment-modal-media img.zoomed {
            max-width: min(100%, 980px);
            max-height: none;
            cursor: zoom-out;
            transform: scale(1.02);
            box-shadow: 0 26px 54px rgba(15, 23, 42, 0.22);
        }

        .inbon-attachment-modal-media iframe {
            width: 100%;
            min-height: 60vh;
            border: 0;
            display: block;
            background: #fff;
            border-radius: 14px;
        }

        @media (max-width: 991.98px) {
            .inbon-note-panel,
            .inbon-note-sidebar {
                grid-column: span 12;
            }

            .inbon-note-meta-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }

            .inbon-history-detail-box {
                padding: 12px;
            }

            .inbon-attachment-modal-media,
            .inbon-attachment-modal-media img,
            .inbon-attachment-modal-media iframe {
                min-height: 52vh;
            }
        }



        .dropship-feedback-modal .modal-content {
            border: 0;
            border-radius: 26px;
            overflow: hidden;
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
        }

        .dropship-feedback-header {
            padding: 24px 28px 8px;
            border-bottom: 0;
        }

        .dropship-feedback-body {
            padding: 8px 28px 12px;
        }

        .dropship-feedback-footer {
            padding: 10px 28px 28px;
            border-top: 0;
            gap: 10px;
        }

        .dropship-feedback-hero {
            display: flex;
            align-items: flex-start;
            gap: 18px;
        }

        .dropship-feedback-icon {
            width: 60px;
            height: 60px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
        }

        .dropship-feedback-icon.info {
            color: #1d4ed8;
            background: linear-gradient(135deg, #dbeafe, #eff6ff);
        }

        .dropship-feedback-icon.success {
            color: #15803d;
            background: linear-gradient(135deg, #dcfce7, #ecfdf5);
        }

        .dropship-feedback-icon.warning {
            color: #b45309;
            background: linear-gradient(135deg, #fef3c7, #fff7ed);
        }

        .dropship-feedback-icon.danger {
            color: #b91c1c;
            background: linear-gradient(135deg, #fee2e2, #fff1f2);
        }

        .dropship-feedback-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: #0f172a;
            margin: 0 0 6px;
        }

        .dropship-feedback-message {
            font-size: 14px;
            color: #334155;
            line-height: 1.7;
            margin: 0;
        }

        .dropship-feedback-detail {
            margin-top: 14px;
            padding: 14px 16px;
            border-radius: 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 13px;
            line-height: 1.7;
        }


        .dropship-dashboard-shell {
            background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
            border-radius: 28px;
            padding: 24px;
            border: 1px solid rgba(191, 219, 254, 0.55);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
        }

        .dropship-dashboard-panel {
            position: relative;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            border: 1px solid rgba(203, 213, 225, 0.85);
            border-radius: 22px;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .dropship-dashboard-panel::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2563eb 0%, #0ea5e9 35%, #10b981 68%, #f59e0b 100%);
            opacity: 0.95;
        }

        .dropship-filter-bar {
            display: grid;
            grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
            gap: 14px;
            align-items: end;
        }

        .dropship-filter-group label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 6px;
        }

        .dropship-filter-group .form-control,
        .dropship-filter-group .form-select {
            border-radius: 14px !important;
            border-color: #d7e3f4;
            background: #ffffff;
            box-shadow: none;
        }

        .dropship-filter-group .form-control:focus,
        .dropship-filter-group .form-select:focus {
            border-color: rgba(37, 99, 235, 0.5);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }

        .dropship-filter-actions {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }

        .dropship-filter-actions .btn {
            min-width: 112px;
            border-radius: 14px;
            font-weight: 800;
        }



        .dropship-global-filter-bar {
            grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.9fr) auto;
            padding: 14px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
            min-width: min(680px, 100%);
        }

        .inbon-global-filter-bar {
            grid-template-columns: minmax(190px, 1.15fr) minmax(160px, .9fr) minmax(150px, .8fr) minmax(145px, .75fr) auto;
            min-width: min(1120px, 100%);
            align-items: end;
        }

        .inbon-global-filter-bar .form-select {
            min-height: 40px;
            font-size: 12px;
            font-weight: 700;
        }

        .inbon-global-filter-bar .dropship-filter-actions .btn {
            min-height: 40px;
            padding-left: 12px;
            padding-right: 12px;
            white-space: nowrap;
        }

        .dropship-filter-note {
            display: inline-flex;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            padding: 12px 14px;
            border-radius: 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.55;
        }

        .dropship-filter-note i {
            color: #2563eb;
            margin-top: 2px;
        }

        .dropship-kpi-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .dropship-kpi-card {
            position: relative;
            overflow: hidden;
            padding: 20px 18px 18px;
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
            border: 1px solid rgba(203, 213, 225, 0.86);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
            min-height: 142px;
        }

        .dropship-kpi-card::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 0;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2563eb 0%, #60a5fa 30%, #10b981 68%, #f59e0b 100%);
            opacity: 0.95;
        }

        .dropship-kpi-icon {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            border: 1px solid #bfdbfe;
            color: #2563eb;
            font-size: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }

        .dropship-kpi-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 10px;
        }

        .dropship-kpi-value {
            font-size: clamp(1.42rem, 2vw, 2rem);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0f172a;
            max-width: calc(100% - 58px);
        }

        .dropship-kpi-value.is-positive {
            color: #059669;
        }

        .dropship-kpi-value.is-negative {
            color: #e11d48;
        }

        .dropship-kpi-meta {
            margin-top: 10px;
            font-size: 12px;
            color: #64748b;
            line-height: 1.5;
        }

        .dropship-overview-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
            gap: 16px;
        }

        .dropship-chart-panel {
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }

        .dropship-chart-wrap {
            position: relative;
            max-width: 220px;
            margin: 4px auto 0;
        }

        .dropship-chart-wrap canvas {
            width: 220px !important;
            height: 220px !important;
        }

        .dropship-chart-center {
            position: absolute;
            inset: 50% auto auto 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
            width: 122px;
            height: 122px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(226, 232, 240, 0.9);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(6px);
        }

        .dropship-chart-center-value {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0f172a;
            line-height: 1;
        }

        .dropship-chart-center-label {
            margin-top: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .dropship-chart-legend {
            display: grid;
            gap: 10px;
            margin-top: 18px;
        }

        .dropship-legend-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 12px;
            color: #475569;
            padding: 11px 13px;
            border-radius: 14px;
            background: rgba(248, 250, 252, 0.9);
            border: 1px solid rgba(226, 232, 240, 0.9);
        }

        .dropship-legend-left {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .dropship-legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            display: inline-block;
        }

        .dropship-legend-dot.paid { background: #10b981; }
        .dropship-legend-dot.outstanding { background: #f43f5e; }

        .dropship-legend-value {
            font-weight: 800;
            color: #0f172a;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .dropship-accounting-table {
            font-size: 12px;
            font-family: 'Inter', 'Roboto', sans-serif;
            border-collapse: separate;
            border-spacing: 0;
        }

        .dropship-accounting-table thead th {
            background: #f8fbff !important;
            color: #516072 !important;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            border-top: 0 !important;
            border-bottom: 1px solid #dbe5f1 !important;
            white-space: nowrap;
            padding-top: 13px;
            padding-bottom: 13px;
        }

        .dropship-accounting-table tbody td {
            font-size: 12px;
            color: #0f172a;
            padding-top: 13px;
            padding-bottom: 13px;
            border-color: #edf2f7;
            vertical-align: middle;
            background: #ffffff;
        }

        .dropship-accounting-table tbody tr:nth-child(even) td {
            background: #fbfdff;
        }

        .dropship-accounting-table tbody tr:hover td {
            background: #f5f9ff;
        }

        .dropship-number {
            text-align: right;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            font-weight: 700;
        }

        .dropship-name-stack {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .dropship-name-main {
            font-weight: 700;
            color: #0f172a;
        }

        .dropship-name-sub {
            font-size: 11px;
            color: #94a3b8;
        }

        .dropship-soft-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .dropship-soft-badge.success {
            background: #ecfdf5;
            border-color: #a7f3d0;
            color: #047857;
        }

        .dropship-soft-badge.warning {
            background: #fff1f2;
            border-color: #fecdd3;
            color: #be123c;
        }

        .dropship-soft-badge.neutral {
            background: #f8fafc;
            border-color: #e2e8f0;
            color: #475569;
        }

        @media (max-width: 1199.98px) {
            .dropship-kpi-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .dropship-overview-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 991.98px) {
            .dropship-filter-bar {
                grid-template-columns: 1fr 1fr;
            }

            .dropship-filter-actions {
                grid-column: span 2;
                justify-content: stretch;
            }

            .dropship-filter-actions .btn {
                flex: 1 1 0;
            }
        }

        @media (max-width: 991.98px) {
            .inbon-global-filter-bar {
                grid-template-columns: 1fr 1fr;
            }
            .inbon-global-filter-bar .dropship-filter-actions {
                grid-column: span 2;
            }
        }

        @media (max-width: 767.98px) {
            .inbon-global-filter-bar {
                grid-template-columns: 1fr;
            }
            .inbon-global-filter-bar .dropship-filter-actions {
                grid-column: span 1;
            }
        }

        @media (max-width: 767.98px) {
            .dropship-dashboard-shell {
                padding: 16px;
                border-radius: 22px;
            }

            .dropship-filter-bar,
            .dropship-kpi-grid {
                grid-template-columns: 1fr;
            }

            .dropship-filter-actions {
                grid-column: span 1;
                flex-direction: column;
            }
        }

    

        .notif-topbar-anchor {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 1412;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .notif-topbar-btn {
            position: relative;
            width: 58px;
            height: 58px;
            border: 1px solid rgba(191, 219, 254, 0.88);
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            overflow: visible;
            isolation: isolate;
            transition: all 0.22s ease;
        }

        .notif-topbar-btn::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 8px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2563eb, #60a5fa);
            opacity: 0.92;
        }

        .notif-topbar-btn:hover {
            background: linear-gradient(180deg, #ffffff, #eff6ff);
            color: #1d4ed8;
            transform: translateY(-2px);
        }

        .notif-topbar-btn .notif-badge {
            position: absolute;
            top: -7px;
            right: -7px;
            min-width: 24px;
            height: 24px;
            padding: 0 7px;
            border-radius: 999px;
            background: linear-gradient(135deg, #dc2626, #ef4444);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 22px rgba(220, 38, 38, 0.34);
            border: 2px solid #ffffff;
            line-height: 1;
            z-index: 5;
        }

        .notif-topbar-btn.has-unread .notif-badge {
            display: inline-flex;
        }

        .notif-panel {
            position: fixed;
            right: 24px;
            bottom: 96px;
            width: min(430px, calc(100vw - 28px));
            max-height: min(560px, calc(100vh - 132px));
            border: 1px solid rgba(191, 219, 254, 0.9);
            border-radius: 24px;
            background: rgba(255,255,255,0.98);
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
            backdrop-filter: blur(14px);
            z-index: 1411;
            overflow: hidden;
            display: none;
            flex-direction: column;
        }

        .notif-panel.is-anchored {
            right: auto;
            bottom: auto;
        }

        .notif-panel[data-placement="top"] {
            transform-origin: bottom right;
        }

        .notif-panel[data-placement="bottom"] {
            transform-origin: top right;
        }

        .notif-panel::after {
            content: '';
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2563eb, #60a5fa, #34d399);
            opacity: 0.88;
        }

        .notif-panel.show {
            display: flex;
            animation: fadeIn 0.18s ease;
        }

        .notif-panel-head {
            padding: 18px 18px 14px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            position: relative;
        }

        .notif-panel-title {
            margin: 0;
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
        }

        .notif-panel-subtitle {
            margin: 4px 0 0;
            font-size: 12px;
            color: #64748b;
        }

        .notif-panel-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: calc(100vh - 190px);
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 14px 14px 18px;
            background: linear-gradient(180deg, #f8fbff, #ffffff);
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }

        .notif-panel-body::-webkit-scrollbar {
            width: 8px;
        }

        .notif-panel-body::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        .notif-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            padding: 26px 18px;
            text-align: center;
            color: #64748b;
            background: #fff;
            font-size: 13px;
            line-height: 1.7;
        }

        .notif-list {
            display: grid;
            gap: 12px;
        }

        .notif-card {
            position: relative;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff, #fbfdff);
            padding: 14px 14px 20px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            overflow: hidden;
        }

        .notif-card::after {
            content: '';
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 10px;
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, #cbd5e1, #e2e8f0);
            opacity: 0.95;
        }

        .notif-card.success { border-color: #bbf7d0; }
        .notif-card.success::after { background: linear-gradient(90deg, #16a34a, #4ade80); }
        .notif-card.danger { border-color: #fecaca; }
        .notif-card.danger::after { background: linear-gradient(90deg, #dc2626, #fb7185); }
        .notif-card.primary { border-color: #bfdbfe; }
        .notif-card.primary::after { background: linear-gradient(90deg, #2563eb, #60a5fa); }

        .notif-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .notif-card-main {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
        }

        .notif-card-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .notif-card.success .notif-card-icon { background: #ecfdf5; color: #15803d; }
        .notif-card.danger .notif-card-icon { background: #fef2f2; color: #b91c1c; }
        .notif-card.primary .notif-card-icon { background: #eff6ff; color: #1d4ed8; }

        .notif-card-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
        }

        .notif-card-time {
            margin-top: 4px;
            font-size: 11px;
            color: #64748b;
        }

        .notif-card-message {
            font-size: 12px;
            color: #334155;
            line-height: 1.65;
            margin: 0 0 10px;
        }

        .notif-card-meta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 11px;
            font-weight: 700;
            color: #475569;
            max-width: 100%;
            position: relative;
            z-index: 1;
        }

        .notif-close-btn {
            border: none;
            background: transparent;
            color: #94a3b8;
            padding: 4px;
            line-height: 1;
            font-size: 16px;
        }

        .notif-close-btn:hover { color: #0f172a; }



        .inbon-toolbar-btn {
            border-width: 1px;
            font-weight: 700;
            box-shadow: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
        }

        .inbon-toolbar-btn:hover {
            transform: translateY(-1px);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-refresh {
            border-color: #cbd5e1;
            color: #334155;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-refresh:hover,
        .inbon-toolbar-btn.inbon-toolbar-btn-refresh:focus {
            border-color: #94a3b8;
            color: #0f172a;
            background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
            box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-download {
            border-color: #cbd5e1;
            color: #0f172a;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 54%, #e0e7ff 100%);
            box-shadow: 0 12px 22px rgba(79, 70, 229, 0.10);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-download:hover,
        .inbon-toolbar-btn.inbon-toolbar-btn-download:focus {
            border-color: #a5b4fc;
            color: #312e81;
            background: linear-gradient(135deg, #f5f7ff 0%, #e9edff 58%, #dbe4ff 100%);
            box-shadow: 0 16px 28px rgba(79, 70, 229, 0.16);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-reset {
            border-color: rgba(239, 68, 68, 0.22);
            color: #991b1b;
            background: linear-gradient(135deg, #fff7f7 0%, #fee2e2 100%);
            box-shadow: 0 12px 22px rgba(239, 68, 68, 0.10);
        }

        .inbon-toolbar-btn.inbon-toolbar-btn-reset:hover,
        .inbon-toolbar-btn.inbon-toolbar-btn-reset:focus {
            border-color: rgba(239, 68, 68, 0.35);
            color: #7f1d1d;
            background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 100%);
            box-shadow: 0 16px 28px rgba(239, 68, 68, 0.15);
        }

        .inbon-feedback-modal .modal-dialog {
            max-width: 520px;
        }

        .inbon-feedback-modal .modal-content {
            border: 1px solid rgba(226, 232, 240, 0.95);
            border-radius: 26px;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
        }

        .inbon-feedback-header {
            border-bottom: none;
            padding: 0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        .inbon-feedback-hero {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 22px 24px 18px;
        }

        .inbon-feedback-icon {
            width: 56px;
            height: 56px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
        }

        .inbon-feedback-icon.info {
            color: #1d4ed8;
            background: linear-gradient(135deg, #dbeafe, #eff6ff);
        }

        .inbon-feedback-icon.success {
            color: #047857;
            background: linear-gradient(135deg, #d1fae5, #ecfdf5);
        }

        .inbon-feedback-icon.warning {
            color: #b45309;
            background: linear-gradient(135deg, #fef3c7, #fffbeb);
        }

        .inbon-feedback-icon.danger {
            color: #b91c1c;
            background: linear-gradient(135deg, #fee2e2, #fff1f2);
        }

        .inbon-feedback-title {
            font-size: 18px;
            font-weight: 800;
            color: #0f172a;
            margin: 2px 0 6px;
            letter-spacing: -0.02em;
        }

        .inbon-feedback-message {
            margin: 0;
            font-size: 13px;
            line-height: 1.75;
            color: #475569;
        }

        .inbon-feedback-body {
            padding: 0 24px 18px;
        }

        .inbon-feedback-detail,
        .inbon-feedback-input-wrap {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            padding: 14px 16px;
        }

        .inbon-feedback-detail {
            font-size: 12px;
            line-height: 1.7;
            color: #475569;
        }

        .inbon-feedback-input-wrap {
            margin-top: 14px;
        }

        .inbon-feedback-input-label {
            display: block;
            margin-bottom: 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
        }

        .inbon-feedback-input {
            border-radius: 14px !important;
            min-height: 46px;
            font-weight: 700;
        }

        .inbon-feedback-input-hint {
            margin-top: 8px;
            font-size: 11px;
            color: #94a3b8;
        }

        .inbon-feedback-input-error {
            margin-top: 10px;
            display: none;
            font-size: 12px;
            color: #b91c1c;
            font-weight: 700;
        }

        .inbon-feedback-footer {
            border-top: none;
            padding: 0 24px 24px;
            gap: 10px;
        }

        .inbon-feedback-footer .btn {
            min-width: 118px;
            box-shadow: none !important;
        }

        .notif-toast-stack {
            position: fixed;
            right: 24px;
            bottom: 96px;
            width: min(400px, calc(100vw - 28px));
            display: grid;
            gap: 12px;
            z-index: 1413;
            pointer-events: none;
        }

        .notif-toast {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: 16px 16px 14px 16px;
            color: #fff;
            box-shadow: 0 26px 50px rgba(15, 23, 42, 0.24);
            transform: translateY(10px) scale(0.98);
            opacity: 0;
            transition: all 0.22s ease;
            pointer-events: auto;
            backdrop-filter: blur(12px);
        }

        .notif-toast.show {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .notif-toast.primary {
            background: linear-gradient(135deg, rgba(29, 78, 216, 0.96), rgba(59, 130, 246, 0.92));
        }

        .notif-toast.success {
            background: linear-gradient(135deg, rgba(4, 120, 87, 0.96), rgba(22, 163, 74, 0.92));
        }

        .notif-toast.danger {
            background: linear-gradient(135deg, rgba(185, 28, 28, 0.97), rgba(239, 68, 68, 0.92));
        }

        .notif-toast-glow {
            position: absolute;
            inset: auto -25% -45% auto;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            background: rgba(255,255,255,0.14);
            filter: blur(10px);
            pointer-events: none;
        }

        .notif-toast-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .notif-toast-main {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
        }

        .notif-toast-icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.16);
            border: 1px solid rgba(255,255,255,0.18);
            font-size: 19px;
            flex-shrink: 0;
        }

        .notif-toast-title {
            font-size: 14px;
            font-weight: 800;
            line-height: 1.35;
            color: #fff;
        }

        .notif-toast-time {
            margin-top: 4px;
            font-size: 11px;
            color: rgba(255,255,255,0.82);
        }

        .notif-toast-message {
            margin-top: 12px;
            font-size: 12px;
            line-height: 1.7;
            color: rgba(255,255,255,0.96);
            padding-right: 18px;
        }

        .notif-toast-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        .notif-toast-action {
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            padding: 7px 12px;
            border: 1px solid rgba(255,255,255,0.2) !important;
            box-shadow: none !important;
        }

        .notif-toast-action.alt {
            background: rgba(255,255,255,0.08);
            color: #fff;
        }

        .notif-toast-action.alt:hover {
            background: rgba(255,255,255,0.16);
            color: #fff;
        }

        .notif-toast-close {
            border: none;
            background: rgba(255,255,255,0.08);
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notif-toast-close:hover {
            background: rgba(255,255,255,0.16);
        }

        .notif-toast-progress {
            height: 4px;
            margin-top: 12px;
            border-radius: 999px;
            background: rgba(255,255,255,0.18);
            overflow: hidden;
            position: relative;
        }

        .notif-toast-progress::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.95);
            transform-origin: left center;
            animation: notifToastProgress 7s linear forwards;
        }

        @keyframes notifToastProgress {
            from { transform: scaleX(1); }
            to { transform: scaleX(0); }
        }

        @media (max-width: 991.98px) {
            .notif-topbar-anchor {
                position: fixed;
                right: 14px;
                bottom: 14px;
                z-index: 1412;
            }

            .notif-toast-stack {
                right: 12px;
                bottom: 84px;
                width: min(420px, calc(100vw - 20px));
            }

            .notif-panel {
                right: 12px;
                bottom: 72px;
                width: min(420px, calc(100vw - 20px));
                max-height: min(540px, calc(100vh - 96px));
            }

            .notif-topbar-btn {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
            }

            .notif-topbar-btn::after {
                left: 10px;
                right: 10px;
                bottom: 7px;
            }

            .notif-topbar-btn .notif-badge {
                top: -6px;
                right: -6px;
                min-width: 22px;
                height: 22px;
                padding: 0 6px;
            }
        }

        html[data-theme="dark"] .notif-topbar-btn .notif-badge,
        body[data-theme="dark"] .notif-topbar-btn .notif-badge {
            border-color: #0f172a;
            box-shadow: 0 10px 22px rgba(239, 68, 68, 0.34);
        }

        html[data-theme="dark"] .notif-topbar-btn,
        body[data-theme="dark"] .notif-topbar-btn,
        html[data-theme="dark"] .notif-panel,
        body[data-theme="dark"] .notif-panel,
        html[data-theme="dark"] .notif-card,
        body[data-theme="dark"] .notif-card,
        html[data-theme="dark"] .notif-empty,
        body[data-theme="dark"] .notif-empty {
            background: #0f172a;
            color: #e2e8f0;
            border-color: rgba(51, 65, 85, 0.9);
        }

        html[data-theme="dark"] .notif-topbar-btn,
        body[data-theme="dark"] .notif-topbar-btn {
            background: linear-gradient(180deg, #0f172a, #111827);
        }

        html[data-theme="dark"] .notif-panel-body,
        body[data-theme="dark"] .notif-panel-body {
            background: linear-gradient(180deg, #0b1220, #0f172a);
        }

        html[data-theme="dark"] .notif-card-title,
        body[data-theme="dark"] .notif-card-title,
        html[data-theme="dark"] .notif-panel-title,
        body[data-theme="dark"] .notif-panel-title {
            color: #f8fafc;
        }

        html[data-theme="dark"] .notif-card-message,
        body[data-theme="dark"] .notif-card-message,
        html[data-theme="dark"] .notif-panel-subtitle,
        body[data-theme="dark"] .notif-panel-subtitle,
        html[data-theme="dark"] .notif-card-time,
        body[data-theme="dark"] .notif-card-time,
        html[data-theme="dark"] .notif-empty,
        body[data-theme="dark"] .notif-empty,
        html[data-theme="dark"] .notif-close-btn,
        body[data-theme="dark"] .notif-close-btn {
            color: #cbd5e1;
        }

        html[data-theme="dark"] .notif-card-meta,
        body[data-theme="dark"] .notif-card-meta {
            background: #111827;
            border-color: #334155;
            color: #cbd5e1;
        }


        /* ===== Sidebar Minimize ===== */
        body.sidebar-minimized {
            --sidebar-width: 96px;
        }

        .sidebar-minimize-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-color: rgba(255,255,255,0.14);
            color: #ecfdf5;
            background: rgba(255,255,255,0.04);
        }

        .sidebar-minimize-btn:hover {
            background: rgba(255,255,255,0.1);
            color: #ffffff;
            border-color: rgba(255,255,255,0.2);
        }

        .sidebar-minimize-btn i {
            font-size: 14px;
            line-height: 1;
        }

        body.sidebar-minimized #sidebar {
            overflow-x: hidden;
        }

        body.sidebar-minimized .brand-wrap {
            padding-left: 14px;
            padding-right: 14px;
        }

        body.sidebar-minimized .brand-header {
            justify-content: center;
        }

        body.sidebar-minimized .brand-text,
        body.sidebar-minimized .sidebar-user-name,
        body.sidebar-minimized .sidebar-user-meta,
        body.sidebar-minimized .sidebar-minimize-text,
        body.sidebar-minimized .nav-link span,
        body.sidebar-minimized .nav-category {
            display: none !important;
        }

        body.sidebar-minimized .brand-logo {
            margin: 0 auto;
        }

        body.sidebar-minimized .sidebar-user-panel {
            margin-left: 10px;
            margin-right: 10px;
            padding: 12px 10px;
        }

        body.sidebar-minimized .sidebar-user-panel .d-grid {
            justify-items: center;
        }

        body.sidebar-minimized #sidebarThemeToggle,
        body.sidebar-minimized #sidebarMinimizeToggle,
        body.sidebar-minimized #btnLogout {
            width: 44px;
            min-width: 44px;
            height: 44px;
            padding: 0;
        }

        body.sidebar-minimized #sidebarThemeToggle,
        body.sidebar-minimized #btnLogout {
            font-size: 0;
        }

        body.sidebar-minimized #sidebarThemeToggle i,
        body.sidebar-minimized #btnLogout i,
        body.sidebar-minimized #sidebarMinimizeToggle i {
            font-size: 16px;
            margin: 0 !important;
        }

        body.sidebar-minimized #mainNav {
            padding-top: 8px;
        }

        body.sidebar-minimized .nav-link {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
            margin-left: 10px;
            margin-right: 10px;
            gap: 0;
        }

        body.sidebar-minimized .nav-link i {
            font-size: 18px;
            margin: 0 !important;
        }

        body.sidebar-minimized .nav-link[title] {
            position: relative;
        }

        body.sidebar-minimized #content {
            margin-left: var(--sidebar-width);
            width: calc(100% - var(--sidebar-width));
        }

        body.sidebar-minimized #sidebarMinimizeToggle {
            background: rgba(134, 239, 172, 0.14);
            border-color: rgba(134, 239, 172, 0.2);
            color: #dcfce7;
        }

        @media (max-width: 991.98px) {
            body.sidebar-minimized {
                --sidebar-width: 270px;
            }

            body.sidebar-minimized .brand-text,
            body.sidebar-minimized .sidebar-user-name,
            body.sidebar-minimized .sidebar-user-meta,
            body.sidebar-minimized .sidebar-minimize-text,
            body.sidebar-minimized .nav-link span,
            body.sidebar-minimized .nav-category {
                display: initial !important;
            }

            body.sidebar-minimized .nav-category {
                display: block !important;
            }

            body.sidebar-minimized #sidebarThemeToggle,
            body.sidebar-minimized #sidebarMinimizeToggle,
            body.sidebar-minimized #btnLogout {
                width: 100%;
                min-width: 0;
                height: auto;
                padding: .25rem .5rem;
                font-size: .875rem;
            }

            body.sidebar-minimized #sidebarThemeToggle,
            body.sidebar-minimized #btnLogout {
                font-size: .875rem;
            }

            body.sidebar-minimized .nav-link {
                justify-content: flex-start;
                padding-left: 12px;
                padding-right: 12px;
                gap: 12px;
            }

            body.sidebar-minimized .nav-link i {
                font-size: 16px;
            }
        }



        /* ===== 2026 UI refresh override: visual only, no ID / logic changes ===== */
        :root {
            --primary-color: #3b82f6;
            --primary-dark: #2563eb;
            --bg-light: #f4f8ff;
            --card-bg: #ffffff;
            --text-main: #0f172a;
            --text-soft: #5f6f86;
            --border-color: #dbe7f5;
            --sidebar-surface: linear-gradient(180deg, #ffffff 0%, #f7fbff 46%, #eef6ff 100%);
            --sidebar-accent-soft: rgba(59, 130, 246, 0.10);
            --sidebar-accent-border: rgba(59, 130, 246, 0.18);
            --table-head-bg: linear-gradient(180deg, #f7fbff 0%, #edf4ff 100%);
            --table-head-text: #355174;
            --table-row-alt: #f9fbfe;
            --table-row-hover: #eef5ff;
            --pill-info-bg: #eff6ff;
            --pill-info-text: #1d4ed8;
            --pill-success-bg: #ecfdf3;
            --pill-success-text: #15803d;
            --pill-danger-bg: #fff1f2;
            --pill-danger-text: #be123c;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(59, 130, 246, 0.07), transparent 24%),
                radial-gradient(circle at top right, rgba(125, 211, 252, 0.09), transparent 18%),
                linear-gradient(180deg, #f8fbff 0%, #f4f8ff 100%);
            color: var(--text-main);
        }

        #sidebar {
            background: var(--sidebar-surface) !important;
            border-right: 1px solid rgba(191, 219, 254, 0.72) !important;
            box-shadow: 12px 0 36px rgba(15, 23, 42, 0.06), inset -1px 0 0 rgba(255,255,255,0.78) !important;
            position: fixed;
        }

        #sidebar::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 210px;
            background:
                radial-gradient(circle at 18% 16%, rgba(147, 197, 253, 0.28), transparent 34%),
                radial-gradient(circle at 82% 14%, rgba(191, 219, 254, 0.38), transparent 28%);
            pointer-events: none;
        }

        .brand-wrap,
        .sidebar-user-panel,
        #mainNav {
            position: relative;
            z-index: 1;
        }

        .brand-wrap {
            padding: 24px 20px 18px !important;
            border-bottom: 1px solid rgba(191, 219, 254, 0.75) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,250,255,0.85));
        }

        .brand-logo {
            width: 54px;
            height: 54px;
            border-radius: 17px;
            background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%);
            border: 1px solid rgba(96, 165, 250, 0.26);
            color: #2563eb;
            box-shadow: 0 14px 28px rgba(59, 130, 246, 0.12);
        }

        .brand-title,
        #sidebarCompanyName {
            color: #10233f !important;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        .brand-subtitle,
        #sidebarCompanySubtitle {
            color: #54708e !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .sidebar-user-panel {
            margin: 16px 14px !important;
            padding: 15px !important;
            border-radius: 20px !important;
            border: 1px solid var(--sidebar-accent-border) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239, 246, 255, 0.96)) !important;
            box-shadow: 0 16px 26px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255,255,255,0.95) !important;
        }

        .sidebar-user-name {
            color: #0f2744 !important;
            font-size: 13px !important;
            font-weight: 800 !important;
        }

        .sidebar-user-meta {
            color: #5f738f !important;
            font-size: 11px !important;
            font-weight: 600;
        }

        .btn-theme-toggle,
        .theme-toggle-btn,
        #sidebarMinimizeToggle,
        #btnLogout {
            min-height: 42px;
            border-radius: 14px !important;
            font-weight: 700 !important;
            letter-spacing: -0.01em;
        }

        .btn-theme-toggle,
        .theme-toggle-btn {
            background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
            border: 1px solid rgba(147, 197, 253, 0.7) !important;
            color: #1e3a5f !important;
            box-shadow: 0 10px 18px rgba(59, 130, 246, 0.08);
        }

        .btn-theme-toggle:hover,
        .theme-toggle-btn:hover {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
            color: #1d4ed8 !important;
            border-color: rgba(59, 130, 246, 0.32) !important;
        }

        .sidebar-minimize-btn,
        #sidebarMinimizeToggle {
            background: linear-gradient(180deg, #edf6ff 0%, #dceeff 100%) !important;
            border: 1px solid rgba(96, 165, 250, 0.75) !important;
            color: #0f4c81 !important;
            box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12) !important;
        }

        .sidebar-minimize-btn:hover,
        #sidebarMinimizeToggle:hover {
            background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
            color: #103d6b !important;
            border-color: rgba(37, 99, 235, 0.5) !important;
        }

        .sidebar-minimize-btn i,
        #sidebarMinimizeToggle i {
            color: inherit !important;
            opacity: 1 !important;
        }

        #btnLogout {
            background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%) !important;
            border: 1px solid rgba(252, 165, 165, 0.7) !important;
            color: #b91c1c !important;
            box-shadow: 0 10px 18px rgba(239, 68, 68, 0.08);
        }

        #btnLogout:hover {
            background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
            color: #991b1b !important;
        }

        .nav-category {
            color: #66809f !important;
            font-size: 10.5px !important;
            letter-spacing: 0.14em !important;
            padding: 18px 20px 8px !important;
        }

        .nav-link {
            color: #33506f !important;
            margin: 5px 12px !important;
            padding: 12px 14px !important;
            border-radius: 15px !important;
            border: 1px solid transparent !important;
            background: transparent;
            transition: all 0.2s ease !important;
        }

        .nav-link i {
            width: 20px;
            text-align: center;
            color: #3571bf !important;
            opacity: 1 !important;
            font-size: 16px !important;
        }

        .nav-link span {
            color: inherit !important;
            font-weight: 700 !important;
        }

        .nav-link:hover {
            background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(235,244,255,0.98)) !important;
            border-color: rgba(147, 197, 253, 0.48) !important;
            color: #173d68 !important;
            transform: translateX(2px);
            box-shadow: 0 12px 22px rgba(59, 130, 246, 0.08);
        }

        .nav-link:hover i {
            color: #2563eb !important;
        }

        .nav-link.active {
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important;
            border-color: rgba(37, 99, 235, 0.18) !important;
            color: #ffffff !important;
            box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22) !important;
        }

        .nav-link.active i,
        .nav-link.active span {
            color: #ffffff !important;
        }

        .card,
        .analytics-kpi-card,
        .analytics-chart-card,
        .analytics-donut-card,
        .history-table-card,
        .summary-balance-table-card,
        .realtime-category-card,
        .product-market-card,
        .product-table-wrap,
        .history-card,
        .analytics-section-shell,
        .analytics-filter-card {
            border-radius: 18px !important;
            border: 1px solid rgba(219, 231, 245, 0.92) !important;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06) !important;
            background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
        }

        .analytics-kpi-card,
        .asset-card {
            overflow: hidden;
        }

        .analytics-kpi-label {
            color: #5d7492 !important;
            font-size: 10.5px !important;
            letter-spacing: 0.14em !important;
        }

        .analytics-kpi-value,
        .analytics-kpi-value-hero,
        .analytics-kpi-value-compact {
            color: #0f1f35 !important;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-weight: 800 !important;
        }

        .analytics-kpi-sub,
        .analytics-kpi-sub-hero {
            color: #60758f !important;
            font-weight: 600 !important;
        }

        .analytics-kpi-icon,
        .asset-icon {
            border-radius: 16px !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), 0 10px 20px rgba(59,130,246,0.10) !important;
        }

        .table,
        .table-products-modern,
        .finance-table,
        .ads-spreadsheet-table,
        .realtime-category-table,
        .table-stok {
            --bs-table-bg: transparent;
            --bs-table-striped-bg: transparent;
            --bs-table-hover-bg: transparent;
            margin-bottom: 0;
        }

        .table thead th,
        .table-products-modern thead th,
        .finance-table thead th,
        .history-table-card thead th,
        .analytics-table-wrap thead th,
        .ads-spreadsheet-table thead th,
        .summary-balance-table-card .finance-table thead th {
            background: var(--table-head-bg) !important;
            color: var(--table-head-text) !important;
            border-bottom: 1px solid #d8e6f5 !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            letter-spacing: 0.08em !important;
            padding-top: 14px !important;
            padding-bottom: 14px !important;
        }

        .table tbody td,
        .table-products-modern tbody td,
        .finance-table tbody td,
        .ads-spreadsheet-table tbody td,
        .summary-balance-table-card .table tbody td,
        .history-table-card tbody td {
            border-bottom: 1px solid #edf2f8 !important;
            color: #1f3147 !important;
            font-size: 13px !important;
            padding-top: 14px !important;
            padding-bottom: 14px !important;
            vertical-align: middle !important;
            background: #ffffff;
        }

        .table tbody tr:nth-child(even) td,
        .table-products-database tbody tr:nth-child(even) td,
        .ads-spreadsheet-table tbody tr:nth-child(even) td,
        .summary-balance-table-card .table tbody tr:nth-child(even) td {
            background: var(--table-row-alt) !important;
        }

        .table tbody tr:hover td,
        .table-products-database tbody tr:hover td,
        .ads-spreadsheet-table tbody tr:hover td,
        .summary-balance-table-card .table tbody tr:hover td,
        .history-table-card tbody tr:hover td {
            background: var(--table-row-hover) !important;
        }

        .table-responsive,
        .history-table-card .table-responsive,
        .summary-balance-table-card .table-responsive,
        .analytics-table-wrap,
        .analytics-table-wrap-wide,
        .realtime-category-table-wrap,
        .product-table-wrap {
            border-radius: 16px !important;
        }

        .table-stok,
        .realtime-category-table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .table-stok thead th,
        .realtime-category-table thead th {
            background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
            color: #f8fafc !important;
            border: none !important;
            border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
            padding-top: 13px !important;
            padding-bottom: 13px !important;
            letter-spacing: 0.05em !important;
        }

        .table-stok tbody td,
        .realtime-category-table tbody td {
            border-top: 1px solid #e7eef7 !important;
            padding-top: 13px !important;
            padding-bottom: 13px !important;
            background: #ffffff !important;
        }

        .realtime-category-table thead th:first-child {
            background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
            color: #f8fafc !important;
        }

        .realtime-category-table thead th:nth-child(2) {
            background: linear-gradient(180deg, #1f2937 0%, #172033 100%) !important;
            color: #f8fafc !important;
        }

        .realtime-category-table thead th:nth-child(n+3) {
            background: linear-gradient(180deg, #475569 0%, #334155 100%) !important;
            color: #f8fafc !important;
        }

        .table-stok tbody tr:nth-child(odd) td,
        .realtime-category-table tbody tr:nth-child(odd) td {
            background: #f9fbfe !important;
        }

        .table-stok tbody tr:hover td,
        .realtime-category-table tbody tr:hover td {
            background: #eef5ff !important;
        }

        .sticky-col,
        .realtime-category-table tbody td:first-child,
        .realtime-category-table tbody td:nth-child(2) {
            background: inherit !important;
            box-shadow: 2px 0 10px rgba(15, 23, 42, 0.04) !important;
        }

        .badge,
        .rounded-pill,
        .realtime-summary-pill,
        .multi-price-badge,
        .realtime-category-chip {
            border-radius: 999px !important;
            font-weight: 800 !important;
            letter-spacing: 0.02em;
        }

        .multi-price-badge,
        .realtime-category-chip,
        .badge.bg-primary,
        .text-bg-primary {
            background: var(--pill-info-bg) !important;
            color: var(--pill-info-text) !important;
            border: 1px solid rgba(147, 197, 253, 0.55) !important;
        }

        .badge.bg-success,
        .text-bg-success,
        .history-type-in {
            background: var(--pill-success-bg) !important;
            color: var(--pill-success-text) !important;
            border-color: rgba(134, 239, 172, 0.65) !important;
        }

        .badge.bg-danger,
        .text-bg-danger,
        .history-type-out {
            background: var(--pill-danger-bg) !important;
            color: var(--pill-danger-text) !important;
            border-color: rgba(253, 164, 175, 0.62) !important;
        }

        body.sidebar-minimized #sidebarMinimizeToggle {
            background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
            border-color: rgba(59, 130, 246, 0.56) !important;
            color: #12406e !important;
        }

        @media (max-width: 991.98px) {
            #sidebar {
                background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
            }
        }

        html[data-theme="dark"] #sidebar,
        body[data-theme="dark"] #sidebar {
            background: linear-gradient(180deg, #0f172a 0%, #111c33 50%, #13213d 100%) !important;
            border-right-color: rgba(51, 65, 85, 0.95) !important;
        }

        html[data-theme="dark"] .brand-wrap,
        body[data-theme="dark"] .brand-wrap {
            background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.72)) !important;
            border-bottom-color: rgba(51, 65, 85, 0.9) !important;
        }

        html[data-theme="dark"] .brand-title,
        html[data-theme="dark"] #sidebarCompanyName,
        body[data-theme="dark"] .brand-title,
        body[data-theme="dark"] #sidebarCompanyName,
        html[data-theme="dark"] .sidebar-user-name,
        body[data-theme="dark"] .sidebar-user-name {
            color: #eff6ff !important;
        }

        html[data-theme="dark"] .brand-subtitle,
        html[data-theme="dark"] #sidebarCompanySubtitle,
        body[data-theme="dark"] .brand-subtitle,
        body[data-theme="dark"] #sidebarCompanySubtitle,
        html[data-theme="dark"] .sidebar-user-meta,
        body[data-theme="dark"] .sidebar-user-meta,
        html[data-theme="dark"] .nav-category,
        body[data-theme="dark"] .nav-category {
            color: #9fb4d3 !important;
        }

        html[data-theme="dark"] .sidebar-user-panel,
        body[data-theme="dark"] .sidebar-user-panel {
            background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(23,37,62,0.98)) !important;
            border-color: rgba(59, 130, 246, 0.28) !important;
        }

        html[data-theme="dark"] .nav-link,
        body[data-theme="dark"] .nav-link {
            color: #dbeafe !important;
        }

        html[data-theme="dark"] .nav-link i,
        body[data-theme="dark"] .nav-link i {
            color: #93c5fd !important;
        }



        /* Analytics visual alignment refresh - CSS only */
        :root {
            --analytics-blue-50: #eff6ff;
            --analytics-blue-100: #dbeafe;
            --analytics-blue-200: #bfdbfe;
            --analytics-blue-300: #93c5fd;
            --analytics-blue-500: #3b82f6;
            --analytics-blue-600: #2563eb;
            --analytics-blue-700: #1d4ed8;
            --analytics-slate-50: #f8fbff;
            --analytics-slate-100: #eef4fb;
            --analytics-slate-200: #d7e4f3;
            --analytics-slate-600: #5f7693;
            --analytics-slate-700: #36506f;
            --analytics-ink: #10243e;
        }

        .analytics-kpi-card,
        .analytics-chart-card,
        .analytics-donut-card,
        .analytics-section-shell,
        .analytics-filter-card,
        .analytics-list-card {
            border: 1px solid rgba(196, 216, 239, 0.92) !important;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,251,255,0.98) 100%) !important;
            box-shadow: 0 16px 34px rgba(37, 99, 235, 0.07), 0 2px 0 rgba(255,255,255,0.85) inset !important;
        }

        .analytics-kpi-card::before,
        .analytics-chart-card.analytics-chart-feature::before,
        .analytics-donut-card-feature::before {
            display: none !important;
        }

        .analytics-kpi-card {
            border-radius: 22px !important;
        }

        .analytics-kpi-card .d-flex,
        .analytics-kpi-hero .d-flex {
            align-items: flex-start !important;
            gap: 16px !important;
        }

        .analytics-kpi-label {
            color: #55708e !important;
            font-size: 10.5px !important;
            letter-spacing: 0.16em !important;
        }

        .analytics-kpi-value,
        .analytics-kpi-value-hero,
        .analytics-kpi-value-compact {
            color: var(--analytics-ink) !important;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            text-shadow: 0 1px 0 rgba(255,255,255,0.7);
        }

        .analytics-kpi-sub,
        .analytics-kpi-sub-hero,
        .analytics-toolbar-helper,
        .analytics-size-meta,
        .analytics-breakdown-sub,
        .analytics-period-chip {
            color: #607792 !important;
        }

        .analytics-kpi-icon,
        .analytics-group-title i,
        .analytics-chart-kicker i {
            color: #1d4ed8 !important;
        }

        .analytics-kpi-icon {
            background: linear-gradient(180deg, #f8fbff 0%, #e8f1ff 100%) !important;
            border: 1px solid rgba(147, 197, 253, 0.48) !important;
            box-shadow: 0 10px 24px rgba(59, 130, 246, 0.10), inset 0 1px 0 rgba(255,255,255,0.92) !important;
        }

        .analytics-kpi-card.analytics-accent-blue .analytics-kpi-icon,
        .analytics-kpi-hero.analytics-hero-omset .analytics-kpi-icon,
        .analytics-kpi-card.analytics-accent-cyan .analytics-kpi-icon {
            background: linear-gradient(180deg, #eef6ff 0%, #dbeafe 100%) !important;
            color: #1d4ed8 !important;
        }

        .analytics-kpi-card.analytics-accent-green .analytics-kpi-icon,
        .analytics-kpi-card.analytics-accent-emerald .analytics-kpi-icon,
        .analytics-kpi-hero.analytics-hero-profit .analytics-kpi-icon {
            background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
            color: #047857 !important;
            border-color: rgba(16, 185, 129, 0.22) !important;
        }

        .analytics-kpi-card.analytics-accent-red .analytics-kpi-icon,
        .analytics-kpi-card.analytics-accent-rose .analytics-kpi-icon {
            background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
            color: #be123c !important;
            border-color: rgba(244, 114, 182, 0.18) !important;
        }

        .analytics-kpi-card.analytics-accent-amber .analytics-kpi-icon {
            background: linear-gradient(180deg, #fff9eb 0%, #fef3c7 100%) !important;
            color: #b45309 !important;
            border-color: rgba(245, 158, 11, 0.22) !important;
        }

        .analytics-kpi-card.analytics-accent-violet .analytics-kpi-icon {
            background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
            color: #6d28d9 !important;
            border-color: rgba(139, 92, 246, 0.22) !important;
        }

        .analytics-kpi-card.analytics-accent-slate .analytics-kpi-icon {
            background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
            color: #334155 !important;
            border-color: rgba(100, 116, 139, 0.22) !important;
        }

        .analytics-summary-layout .analytics-kpi-hero {
            border-radius: 24px !important;
            position: relative;
            overflow: hidden;
        }

        .analytics-kpi-hero.analytics-hero-omset {
            background:
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 32%),
                linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
            border-color: rgba(147, 197, 253, 0.72) !important;
        }

        .analytics-kpi-hero.analytics-hero-profit {
            background:
                radial-gradient(circle at top right, rgba(52, 211, 153, 0.16), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #f2fbf7 100%) !important;
            border-color: rgba(110, 231, 183, 0.72) !important;
        }

        .analytics-filter-card,
        .analytics-filter-card.analytics-filter-card-minimal,
        .analytics-master-modal .modal-content {
            background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
            border-color: rgba(191, 219, 254, 0.82) !important;
        }

        .analytics-toolbar-field label,
        .analytics-group-title,
        .analytics-chart-kicker,
        .analytics-donut-center-label {
            color: #41617f !important;
        }

        .analytics-group-title i {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
            border: 1px solid rgba(147, 197, 253, 0.42);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        }

        .analytics-section-shell {
            background:
                radial-gradient(circle at top right, rgba(147, 197, 253, 0.16), transparent 26%),
                linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
            border-color: rgba(191, 219, 254, 0.82) !important;
        }

        .analytics-chart-card,
        .analytics-donut-card {
            border-radius: 24px !important;
        }

        .analytics-chart-kicker {
            background: linear-gradient(180deg, #f4f9ff 0%, #e8f1ff 100%) !important;
            border: 1px solid rgba(147, 197, 253, 0.52) !important;
            color: #1d4ed8 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
        }

        .analytics-chart-head h5,
        .analytics-shell-head-minimal h5,
        .analytics-donut-center-value,
        .analytics-breakdown-number,
        .analytics-breakdown-value,
        .analytics-group-title,
        .analytics-table-wrap thead th,
        .analytics-table-wrap-wide thead th {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
        }

        .analytics-chart-head h5,
        .analytics-shell-head-minimal h5,
        .analytics-breakdown-label,
        .analytics-donut-center-value {
            color: var(--analytics-ink) !important;
        }

        .analytics-donut-center-value {
            letter-spacing: -0.03em !important;
        }

        .analytics-breakdown-item {
            border: 1px solid rgba(221, 232, 245, 0.96) !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
        }

        .analytics-breakdown-dot {
            box-shadow: 0 0 0 4px rgba(255,255,255,0.92), 0 0 0 5px rgba(147, 197, 253, 0.18);
        }

        .analytics-table-wrap,
        .analytics-table-wrap-wide {
            border: 1px solid rgba(219, 231, 245, 0.92) !important;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
        }

        .analytics-table-wrap thead th,
        .analytics-table-wrap-wide thead th {
            background: #f6f9fd !important;
            color: #33516e !important;
            border-top: none !important;
            border-bottom: 1px solid #d7e4f3 !important;
            letter-spacing: 0.09em !important;
            padding-top: 14px !important;
            padding-bottom: 14px !important;
            box-shadow: none !important;
        }

        .analytics-table-wrap tbody td,
        .analytics-table-wrap-wide tbody td {
            background: #ffffff !important;
            border-bottom: 1px solid #edf3f9 !important;
            color: #17324c !important;
            padding-top: 13px !important;
            padding-bottom: 13px !important;
        }

        .analytics-table-wrap tbody tr:nth-child(even) td,
        .analytics-table-wrap-wide tbody tr:nth-child(even) td {
            background: #f9fbfe !important;
        }

        .analytics-table-wrap tbody tr:hover td,
        .analytics-table-wrap-wide tbody tr:hover td {
            background: #eef5ff !important;
        }

        .analytics-filter-card .form-control,
        .analytics-filter-card .form-select,
        .analytics-master-modal .form-control,
        .analytics-master-modal .form-select {
            border-color: #d8e6f5 !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
            color: var(--analytics-ink) !important;
            box-shadow: none !important;
        }

        .analytics-filter-card .form-control:focus,
        .analytics-filter-card .form-select:focus,
        .analytics-master-modal .form-control:focus,
        .analytics-master-modal .form-select:focus {
            border-color: #60a5fa !important;
            box-shadow: 0 0 0 0.18rem rgba(59,130,246,0.12) !important;
        }

        .analytics-filter-card .btn,
        .analytics-master-modal .btn {
            font-weight: 700 !important;
        }

        .analytics-kpi-card.analytics-accent-blue,
        .analytics-kpi-card.analytics-accent-green,
        .analytics-kpi-card.analytics-accent-red,
        .analytics-kpi-card.analytics-accent-amber,
        .analytics-kpi-card.analytics-accent-slate,
        .analytics-kpi-card.analytics-accent-violet,
        .analytics-kpi-card.analytics-accent-emerald,
        .analytics-kpi-card.analytics-accent-rose,
        .analytics-kpi-card.analytics-accent-cyan,
        .analytics-kpi-hero.analytics-hero-omset,
        .analytics-kpi-hero.analytics-hero-profit,
        .analytics-chart-card.analytics-chart-feature,
        .analytics-donut-card-feature {
            position: relative;
            overflow: hidden;
        }

        .analytics-kpi-card.analytics-accent-blue {
            background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
            border-color: rgba(191, 219, 254, 0.96) !important;
            box-shadow: 0 16px 32px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-card.analytics-accent-green,
        .analytics-kpi-card.analytics-accent-emerald,
        .analytics-kpi-hero.analytics-hero-profit {
            background: linear-gradient(180deg, #ffffff 0%, #f4fcf8 100%) !important;
            border-color: rgba(167, 243, 208, 0.98) !important;
            box-shadow: 0 16px 32px rgba(5, 150, 105, 0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-card.analytics-accent-red,
        .analytics-kpi-card.analytics-accent-rose {
            background: linear-gradient(180deg, #ffffff 0%, #fff6f7 100%) !important;
            border-color: rgba(253, 164, 175, 0.96) !important;
            box-shadow: 0 16px 32px rgba(225, 29, 72, 0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-card.analytics-accent-amber {
            background: linear-gradient(180deg, #ffffff 0%, #fffaf1 100%) !important;
            border-color: rgba(252, 211, 77, 0.96) !important;
            box-shadow: 0 16px 32px rgba(217, 119, 6, 0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-card.analytics-accent-slate {
            background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
            border-color: rgba(203, 213, 225, 0.96) !important;
            box-shadow: 0 16px 32px rgba(71, 85, 105, 0.07), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-card.analytics-accent-violet {
            background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%) !important;
            border-color: rgba(221, 214, 254, 0.98) !important;
            box-shadow: 0 16px 32px rgba(124, 58, 237, 0.08), inset 0 1px 0 rgba(255,255,255,0.88) !important;
        }

        .analytics-kpi-hero.analytics-hero-omset {
            background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
            border-color: rgba(191, 219, 254, 0.98) !important;
            box-shadow: 0 18px 36px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }

        .analytics-chart-card.analytics-chart-feature,
        .analytics-donut-card-feature {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
            border-color: rgba(196, 216, 239, 0.96) !important;
            box-shadow: 0 16px 34px rgba(37, 99, 235, 0.07), inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }

        .analytics-kpi-card::after,
        .analytics-chart-card.analytics-chart-feature::after,
        .analytics-donut-card-feature::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
        }

        .analytics-table-wrap,
        .analytics-table-wrap-wide {
            border-radius: 20px !important;
            overflow: hidden !important;
        }

        .analytics-table-wrap table,
        .analytics-table-wrap-wide table {
            margin-bottom: 0 !important;
        }

        .analytics-table-wrap tbody td:first-child,
        .analytics-table-wrap-wide tbody td:first-child {
            font-weight: 700 !important;
            color: #17324c !important;
        }

        .analytics-table-wrap tbody td .badge,
        .analytics-table-wrap-wide tbody td .badge {
            border-radius: 999px !important;
            font-weight: 700 !important;
            padding: 0.45rem 0.68rem !important;
        }

        .analytics-chart-head h5,
        .analytics-shell-head-minimal h5,
        .analytics-group-title,
        .analytics-donut-center-value,
        .analytics-breakdown-number,
        .analytics-breakdown-value {
            letter-spacing: -0.02em !important;
        }

        .analytics-period-chip {
            background: linear-gradient(180deg, #ffffff 0%, #eef4fb 100%) !important;
            border: 1px solid rgba(191, 219, 254, 0.76) !important;
            color: #476581 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
        }

        html[data-theme="dark"] .analytics-kpi-card,
        body[data-theme="dark"] .analytics-kpi-card,
        html[data-theme="dark"] .analytics-chart-card,
        body[data-theme="dark"] .analytics-chart-card,
        html[data-theme="dark"] .analytics-donut-card,
        body[data-theme="dark"] .analytics-donut-card,
        html[data-theme="dark"] .analytics-filter-card,
        body[data-theme="dark"] .analytics-filter-card,
        html[data-theme="dark"] .analytics-section-shell,
        body[data-theme="dark"] .analytics-section-shell {
            background: linear-gradient(180deg, #0f172a 0%, #13233d 100%) !important;
            border-color: rgba(51, 79, 121, 0.92) !important;
            box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42) !important;
        }

        html[data-theme="dark"] .analytics-kpi-value,
        body[data-theme="dark"] .analytics-kpi-value,
        html[data-theme="dark"] .analytics-kpi-value-hero,
        body[data-theme="dark"] .analytics-kpi-value-hero,
        html[data-theme="dark"] .analytics-kpi-value-compact,
        body[data-theme="dark"] .analytics-kpi-value-compact,
        html[data-theme="dark"] .analytics-chart-head h5,
        body[data-theme="dark"] .analytics-chart-head h5,
        html[data-theme="dark"] .analytics-breakdown-label,
        body[data-theme="dark"] .analytics-breakdown-label,
        html[data-theme="dark"] .analytics-donut-center-value,
        body[data-theme="dark"] .analytics-donut-center-value {
            color: #eff6ff !important;
        }

        html[data-theme="dark"] .analytics-kpi-sub,
        body[data-theme="dark"] .analytics-kpi-sub,
        html[data-theme="dark"] .analytics-kpi-sub-hero,
        body[data-theme="dark"] .analytics-kpi-sub-hero,
        html[data-theme="dark"] .analytics-toolbar-helper,
        body[data-theme="dark"] .analytics-toolbar-helper,
        html[data-theme="dark"] .analytics-breakdown-sub,
        body[data-theme="dark"] .analytics-breakdown-sub,
        html[data-theme="dark"] .analytics-period-chip,
        body[data-theme="dark"] .analytics-period-chip,
        html[data-theme="dark"] .analytics-toolbar-field label,
        body[data-theme="dark"] .analytics-toolbar-field label,
        html[data-theme="dark"] .analytics-group-title,
        body[data-theme="dark"] .analytics-group-title {
            color: #b8c9de !important;
        }

        html[data-theme="dark"] .analytics-table-wrap,
        body[data-theme="dark"] .analytics-table-wrap,
        html[data-theme="dark"] .analytics-table-wrap-wide,
        body[data-theme="dark"] .analytics-table-wrap-wide {
            background: linear-gradient(180deg, #0f172a 0%, #16263f 100%) !important;
            border-color: rgba(51, 79, 121, 0.92) !important;
        }

        html[data-theme="dark"] .analytics-table-wrap thead th,
        body[data-theme="dark"] .analytics-table-wrap thead th,
        html[data-theme="dark"] .analytics-table-wrap-wide thead th,
        body[data-theme="dark"] .analytics-table-wrap-wide thead th {
            background: linear-gradient(180deg, #17304e 0%, #142742 100%) !important;
            color: #dbeafe !important;
            border-bottom-color: rgba(71, 102, 145, 0.95) !important;
        }

        html[data-theme="dark"] .analytics-table-wrap tbody td,
        body[data-theme="dark"] .analytics-table-wrap tbody td,
        html[data-theme="dark"] .analytics-table-wrap-wide tbody td,
        body[data-theme="dark"] .analytics-table-wrap-wide tbody td {
            background: #13233d !important;
            color: #d8e5f4 !important;
            border-bottom-color: rgba(51, 79, 121, 0.48) !important;
        }

        html[data-theme="dark"] .analytics-table-wrap tbody tr:nth-child(even) td,
        body[data-theme="dark"] .analytics-table-wrap tbody tr:nth-child(even) td,
        html[data-theme="dark"] .analytics-table-wrap-wide tbody tr:nth-child(even) td,
        body[data-theme="dark"] .analytics-table-wrap-wide tbody tr:nth-child(even) td {
            background: #142741 !important;
        }

        html[data-theme="dark"] .analytics-table-wrap tbody tr:hover td,
        body[data-theme="dark"] .analytics-table-wrap tbody tr:hover td,
        html[data-theme="dark"] .analytics-table-wrap-wide tbody tr:hover td,
        body[data-theme="dark"] .analytics-table-wrap-wide tbody tr:hover td {
            background: #18314f !important;
        }



        /* ===== Analytics visual alignment with sidebar + ads ===== */
        .analytics-kpi-card,
        .analytics-chart-card,
        .analytics-donut-card,
        .analytics-donut-card-feature,
        .analytics-filter-card,
        .analytics-section-shell,
        .analytics-list-card,
        .analytics-master-modal .modal-content {
            border-color: rgba(214, 226, 239, 0.96);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        }

        .analytics-kpi-card,
        .analytics-chart-card.analytics-chart-feature,
        .analytics-donut-card-feature {
            position: relative;
            overflow: hidden;
        }

        .analytics-kpi-card::before,
        .analytics-chart-card.analytics-chart-feature::before,
        .analytics-donut-card-feature::before {
            display: none !important;
            content: none !important;
        }

        .analytics-kpi-card::after,
        .analytics-chart-card.analytics-chart-feature::after,
        .analytics-donut-card-feature::after {
            content: "";
            position: absolute;
            inset: auto 18px 0 18px;
            height: 3px;
            border-radius: 999px;
            background: #dbe7f5;
            opacity: .9;
        }

        .analytics-kpi-card.analytics-accent-blue::after { background: linear-gradient(90deg,#2563eb,#60a5fa); }
        .analytics-kpi-card.analytics-accent-green::after,
        .analytics-kpi-card.analytics-accent-emerald::after { background: linear-gradient(90deg,#059669,#34d399); }
        .analytics-kpi-card.analytics-accent-red::after,
        .analytics-kpi-card.analytics-accent-rose::after { background: linear-gradient(90deg,#dc2626,#fb7185); }
        .analytics-kpi-card.analytics-accent-amber::after { background: linear-gradient(90deg,#d97706,#fbbf24); }
        .analytics-kpi-card.analytics-accent-slate::after { background: linear-gradient(90deg,#475569,#94a3b8); }
        .analytics-kpi-card.analytics-accent-violet::after { background: linear-gradient(90deg,#7c3aed,#a78bfa); }
        .analytics-kpi-card.analytics-accent-cyan::after { background: linear-gradient(90deg,#0891b2,#67e8f9); }
        .analytics-chart-card.analytics-chart-feature::after,
        .analytics-donut-card-feature::after { background: linear-gradient(90deg,#2563eb,#0ea5e9,#10b981); }

        .analytics-kpi-card {
            border-radius: 22px;
        }

        .analytics-summary-layout .analytics-kpi-hero,
        .analytics-kpi-hero.analytics-hero-omset,
        .analytics-kpi-hero.analytics-hero-profit {
            border-radius: 22px;
            background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border-color: rgba(214, 226, 239, 0.96);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        }

        .analytics-kpi-hero.analytics-hero-omset::after { background: linear-gradient(90deg,#2563eb,#60a5fa); }
        .analytics-kpi-hero.analytics-hero-profit::after { background: linear-gradient(90deg,#059669,#34d399); }

        .analytics-kpi-label,
        .analytics-toolbar-field label,
        .analytics-chart-kicker,
        .analytics-group-title {
            font-family: 'Inter', sans-serif;
        }

        .analytics-kpi-label {
            font-size: 11px;
            letter-spacing: .1em;
            color: #6a7f98;
        }

        .analytics-kpi-value,
        .analytics-kpi-value-hero,
        .analytics-kpi-compact .analytics-kpi-value-compact,
        .analytics-donut-center-value,
        .analytics-breakdown-number {
            font-family: 'Inter', sans-serif;
            color: #122033;
            font-weight: 800;
        }

        .analytics-kpi-sub,
        .analytics-kpi-sub-hero,
        .analytics-toolbar-helper,
        .analytics-size-meta,
        .analytics-breakdown-sub,
        .analytics-donut-center-sub,
        .analytics-donut-center-label,
        .analytics-chart-head .section-note,
        .analytics-section-shell .section-note {
            color: #6c8098 !important;
        }

        .analytics-kpi-icon,
        .analytics-kpi-hero .analytics-kpi-icon,
        .analytics-group-title i {
            border-radius: 16px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
        }

        .analytics-group-title {
            color: #35506f;
            letter-spacing: .08em;
        }

        .analytics-group-title i {
            background: #eef5ff;
            color: #1f5fbf;
            border: 1px solid #c9daf1;
        }

        .analytics-chart-kicker {
            background: #eef5ff;
            border: 1px solid #c9daf1;
            color: #1f5fbf;
        }

        .analytics-filter-card,
        .analytics-filter-card.analytics-filter-card-minimal {
            border-radius: 22px;
        }

        .analytics-filter-card .form-control,
        .analytics-filter-card .form-select,
        .analytics-master-modal .form-control,
        .analytics-master-modal .form-select {
            border-color: #d7e1ec;
            color: #17324d;
            background: #ffffff;
            font-family: 'Inter', sans-serif;
            box-shadow: none;
        }

        .analytics-filter-card .form-control:focus,
        .analytics-filter-card .form-select:focus,
        .analytics-master-modal .form-control:focus,
        .analytics-master-modal .form-select:focus {
            border-color: #9ec0e8;
            box-shadow: 0 0 0 4px rgba(37,99,235,.08);
        }

        .analytics-table-wrap,
        .analytics-table-wrap-wide {
            border-radius: 18px;
            overflow: auto;
            background: #fff;
            border: 1px solid #e4edf6;
        }

        .analytics-table-wrap table,
        .analytics-table-wrap-wide table {
            margin-bottom: 0;
        }

        .analytics-table-wrap thead th,
        .analytics-table-wrap-wide thead th {
            background: #eef3f8 !important;
            color: #4d6279 !important;
            font-size: 11px !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            letter-spacing: .08em !important;
            border-top: 0 !important;
            border-bottom: 1px solid #d7e1ec !important;
            box-shadow: none !important;
        }

        .analytics-table-wrap thead th::before,
        .analytics-table-wrap thead th::after,
        .analytics-table-wrap-wide thead th::before,
        .analytics-table-wrap-wide thead th::after {
            display: none !important;
            content: none !important;
        }

        .analytics-table-wrap tbody td,
        .analytics-table-wrap-wide tbody td {
            background: #fff;
            color: #1d3147;
            border-bottom: 1px solid #edf2f7 !important;
            font-size: 13px;
            vertical-align: middle;
        }

        .analytics-table-wrap tbody tr:nth-child(even) td,
        .analytics-table-wrap-wide tbody tr:nth-child(even) td {
            background: #f9fbfd;
        }

        .analytics-table-wrap tbody tr:hover td,
        .analytics-table-wrap-wide tbody tr:hover td {
            background: #f1f6fb;
        }

        .analytics-donut-center {
            background: rgba(255,255,255,.96);
            border-color: #dfe8f2;
            box-shadow: 0 14px 30px rgba(15,23,42,.08);
        }

        [data-theme="dark"] .analytics-kpi-card,
        [data-theme="dark"] .analytics-chart-card,
        [data-theme="dark"] .analytics-donut-card,
        [data-theme="dark"] .analytics-donut-card-feature,
        [data-theme="dark"] .analytics-filter-card,
        [data-theme="dark"] .analytics-section-shell,
        [data-theme="dark"] .analytics-list-card,
        [data-theme="dark"] .analytics-master-modal .modal-content,
        [data-theme="dark"] .analytics-summary-layout .analytics-kpi-hero,
        [data-theme="dark"] .analytics-kpi-hero.analytics-hero-omset,
        [data-theme="dark"] .analytics-kpi-hero.analytics-hero-profit {
            background: linear-gradient(180deg,#111827 0%,#0f172a 100%);
            border-color: rgba(51,65,85,.9);
            box-shadow: 0 18px 40px rgba(2,6,23,.42);
        }

        [data-theme="dark"] .analytics-kpi-value,
        [data-theme="dark"] .analytics-kpi-value-hero,
        [data-theme="dark"] .analytics-kpi-compact .analytics-kpi-value-compact,
        [data-theme="dark"] .analytics-donut-center-value,
        [data-theme="dark"] .analytics-breakdown-number { color: #f8fafc; }

        [data-theme="dark"] .analytics-table-wrap,
        [data-theme="dark"] .analytics-table-wrap-wide {
            background: #0f172a;
            border-color: rgba(51,65,85,.85);
        }

        [data-theme="dark"] .analytics-table-wrap thead th,
        [data-theme="dark"] .analytics-table-wrap-wide thead th {
            background: #162132 !important;
            color: #d5e2f1 !important;
            border-bottom-color: rgba(71,85,105,.9) !important;
        }

        [data-theme="dark"] .analytics-table-wrap tbody td,
        [data-theme="dark"] .analytics-table-wrap-wide tbody td {
            background: #0f172a;
            color: #d7e3f1;
            border-bottom-color: rgba(51,65,85,.75) !important;
        }

        [data-theme="dark"] .analytics-table-wrap tbody tr:nth-child(even) td,
        [data-theme="dark"] .analytics-table-wrap-wide tbody tr:nth-child(even) td { background: #111c2d; }

        [data-theme="dark"] .analytics-table-wrap tbody tr:hover td,
        [data-theme="dark"] .analytics-table-wrap-wide tbody tr:hover td { background: #152235; }

        [data-theme="dark"] .analytics-group-title,
        [data-theme="dark"] .analytics-chart-kicker,
        [data-theme="dark"] .analytics-kpi-label,
        [data-theme="dark"] .analytics-toolbar-field label { color: #c6d4e3 !important; }



        /* === Inbon Supplier Visual Refresh: selaras sidebar + ads, tanpa ubah fitur / ID === */
        .inbon-shell {
            gap: 22px;
        }

        .inbon-window-tabs {
            gap: 12px;
            padding: 6px;
            border: 1px solid rgba(191, 219, 254, 0.75);
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
        }

        .inbon-window-btn {
            position: relative;
            border: 1px solid rgba(203, 213, 225, 0.95);
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            color: #334155;
            padding: 11px 16px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.01em;
            transition: all 0.22s ease;
            box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.9);
        }

        .inbon-window-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(147, 197, 253, 0.95);
            color: #1d4ed8;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 12px 22px rgba(37, 99, 235, 0.10);
        }

        .inbon-window-btn.active {
            background: linear-gradient(135deg, #1d4ed8, #2563eb 58%, #3b82f6 100%);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
        }

        .inbon-summary-card,
        .inbon-card,
        .inbon-note-panel,
        .inbon-note-sidebar,
        .inbon-history-detail-box,
        .inbon-detail-item,
        .inbon-empty-box {
            position: relative;
            overflow: hidden;
        }

        .inbon-summary-card::after,
        .inbon-card::after,
        .inbon-note-panel::after,
        .inbon-note-sidebar::after,
        .inbon-history-detail-box::after,
        .inbon-detail-item::after,
        .inbon-empty-box::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(37, 99, 235, 0.90), rgba(14, 165, 233, 0.55), rgba(16, 185, 129, 0.22));
            opacity: 0.95;
        }

        .inbon-summary-grid.inbon-summary-grid-global {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            align-items: stretch;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
            align-items: stretch;
        }

        .inbon-summary-card.inbon-summary-card-focus {
            position: relative;
            min-height: 152px;
            padding: 18px 18px 18px;
            border-radius: 22px;
            overflow: hidden;
            border-color: rgba(191, 219, 254, 0.96);
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 32%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
        }

        .inbon-summary-card-focus::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #38bdf8, #22c55e);
            opacity: 0.95;
        }

        .inbon-summary-card-focus .inbon-summary-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 12px;
        }

        .inbon-summary-card-focus .inbon-summary-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.25rem;
            color: #1d4ed8;
            background: rgba(239, 246, 255, 0.96);
            box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.95);
        }

        .inbon-summary-card-focus .inbon-summary-label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 11px;
        }

        .inbon-summary-card-focus .inbon-summary-value {
            font-size: clamp(1.22rem, 1.9vw, 1.72rem);
            line-height: 1.08;
        }

        .inbon-summary-card-focus .inbon-summary-sub {
            margin-top: 10px;
            font-size: 11.5px;
            line-height: 1.55;
        }

        .inbon-summary-card-focus .inbon-summary-meta {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            align-items: stretch;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(1),
        .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(2) {
            grid-column: span 6;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(3),
        .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(4),
        .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(5) {
            grid-column: span 4;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-focus {
            min-height: 0;
            padding: 14px 16px 12px;
            border: 1px solid rgba(203, 213, 225, 0.92);
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 8px;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-focus::before {
            display: none;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card::after {
            display: none;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-head {
            margin-bottom: 0;
            align-items: flex-start;
            justify-content: space-between;
            flex-direction: row;
            gap: 10px;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-head > div:first-child {
            flex: 1;
            min-width: 0;
            text-align: left;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(180deg, #eff6ff 0%, #e8f1ff 100%);
            color: #1e40af;
            box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.95);
            font-size: 1rem;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-accent-blue .inbon-summary-icon {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            color: #1d4ed8;
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.95);
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-accent-emerald .inbon-summary-icon {
            background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
            color: #047857;
            box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.95);
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-accent-amber .inbon-summary-icon {
            background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
            color: #b45309;
            box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.9);
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-accent-slate .inbon-summary-icon {
            background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
            color: #334155;
            box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.95);
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-accent-violet .inbon-summary-icon {
            background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
            color: #6d28d9;
            box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.95);
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-label {
            margin-bottom: 4px;
            color: #334155;
            letter-spacing: 0.02em;
            justify-content: flex-start;
            text-align: left;
            min-height: 0;
            align-items: center;
            line-height: 1.25;
            font-size: 10.5px;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-value {
            font-size: clamp(1.08rem, 1.35vw, 1.4rem);
            color: #0f172a;
            text-align: left;
            line-height: 1.1;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-sub {
            margin-top: 0;
            color: #64748b;
            min-height: 0;
            text-align: left;
            display: block;
            line-height: 1.35;
            font-size: 11px;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-meta {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
            justify-content: flex-start;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-badge {
            background: #f8fbff;
            border-color: #dbeafe;
            color: #1d4ed8;
            font-size: 10px;
            padding: 5px 9px;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-badge.success {
            background: #ecfdf5;
            border-color: #bbf7d0;
            color: #15803d;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-badge.warning {
            background: #fffbeb;
            border-color: #fde68a;
            color: #b45309;
        }

        .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-badge.danger {
            background: #fef2f2;
            border-color: #fecaca;
            color: #b91c1c;
        }

        @media (max-width: 1599.98px) {
            .inbon-summary-grid.inbon-summary-grid-supplier {
                grid-template-columns: repeat(12, minmax(0, 1fr));
            }
        }

        @media (max-width: 1199.98px) {
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(1),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(2),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(3),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(4),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(5) {
                grid-column: span 6;
            }
        }

        @media (max-width: 767.98px) {
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(1),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(2),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(3),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(4),
            .inbon-summary-grid.inbon-summary-grid-supplier > .inbon-summary-card:nth-child(5) {
                grid-column: span 12;
            }
        }

        @media (max-width: 767.98px) {
            .inbon-summary-grid.inbon-summary-grid-supplier {
                grid-template-columns: 1fr;
            }

            .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-card.inbon-summary-card-focus {
                min-height: auto;
                aspect-ratio: auto;
                padding: 18px 18px 14px;
            }

            .inbon-summary-grid.inbon-summary-grid-supplier .inbon-summary-meta {
                margin-top: 12px;
                padding-top: 10px;
            }
        }

        .inbon-summary-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .inbon-summary-badge.success {
            background: #ecfdf5;
            color: #047857;
            border-color: #a7f3d0;
        }

        .inbon-summary-badge.warning {
            background: #fffbeb;
            color: #b45309;
            border-color: #fde68a;
        }

        .inbon-summary-badge.danger {
            background: #fef2f2;
            color: #b91c1c;
            border-color: #fecaca;
        }

        .inbon-summary-info-btn {
            width: 20px;
            height: 20px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(255, 255, 255, 0.9);
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            padding: 0;
            cursor: help;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }

        .inbon-summary-info-btn:hover {
            color: #1d4ed8;
            border-color: rgba(59, 130, 246, 0.45);
            background: #eff6ff;
        }

        .inbon-summary-card {
            border: 1px solid rgba(191, 219, 254, 0.78);
            border-radius: 24px;
            background:
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.10), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 20px 20px 18px;
            min-height: 154px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-card {
            min-height: 168px;
            padding: 22px 22px 18px;
        }

        .inbon-summary-card.inbon-summary-card-mini {
            min-height: 108px;
            padding: 14px 14px 16px;
            border-radius: 18px;
            border-color: rgba(226, 232, 240, 0.95);
            background:
                radial-gradient(circle at top right, rgba(148, 163, 184, 0.06), transparent 28%),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
        }

        .inbon-summary-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .10em;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 10px;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-label {
            font-size: 11px;
            margin-bottom: 12px;
        }

        .inbon-summary-value {
            font-size: clamp(1.34rem, 2.35vw, 2rem);
            line-height: 1.04;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0f172a;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-value {
            font-size: clamp(1.8rem, 3vw, 2.7rem);
            line-height: 1;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-card:nth-child(1) .inbon-summary-value,
        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-card:nth-child(2) .inbon-summary-value {
            color: #1d4ed8;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-card:nth-child(3) .inbon-summary-value {
            color: #0f766e;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-card:nth-child(4) .inbon-summary-value {
            color: #b45309;
        }

        .inbon-summary-card-mini .inbon-summary-value {
            font-size: clamp(0.95rem, 1.2vw, 1.22rem);
            line-height: 1.12;
        }

        .inbon-summary-sub {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
            font-weight: 600;
        }

        .inbon-summary-grid.inbon-summary-grid-global .inbon-summary-sub {
            font-size: 12px;
            max-width: 92%;
        }

        .inbon-summary-card-mini .inbon-summary-sub {
            font-size: 11px;
            line-height: 1.45;
        }

        .inbon-card {
            border-radius: 26px;
            border: 1px solid rgba(191, 219, 254, 0.82);
            background:
                radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 24%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
        }

        .inbon-pane-head {
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }

        .inbon-pane-head .section-note {
            max-width: 760px;
            line-height: 1.65;
        }

        .inbon-card .table thead th,
        .inbon-transaction-table th,
        .inbon-history-table th,
        .inbon-supplier-summary th {
            background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
            color: #475569;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(203, 213, 225, 0.95) !important;
            border-top: 0 !important;
            white-space: nowrap;
            box-shadow: inset 0 -2px 0 rgba(148, 163, 184, 0.22);
        }

        .inbon-card .table tbody td,
        .inbon-transaction-table td,
        .inbon-history-table td,
        .inbon-supplier-summary td {
            font-size: 13px;
            color: #0f172a;
            border-color: rgba(226, 232, 240, 0.95) !important;
            padding-top: 12px;
            padding-bottom: 12px;
            background: transparent;
        }

        .inbon-supplier-summary {
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 0;
        }

        .inbon-supplier-summary thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            font-size: 10px;
            letter-spacing: 0.08em;
            padding: 10px 12px;
            background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #f8fafc 100%);
            color: #516072;
        }

        .inbon-supplier-summary thead th:first-child {
            border-top-left-radius: 14px;
        }

        .inbon-supplier-summary thead th:last-child {
            border-top-right-radius: 14px;
        }

        .inbon-supplier-summary tbody td {
            font-size: 12px;
            line-height: 1.35;
            padding: 9px 12px;
            vertical-align: middle;
        }

        .inbon-supplier-summary tbody td:first-child {
            min-width: 180px;
        }

        .inbon-supplier-cell {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .inbon-supplier-name {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .inbon-supplier-caption,
        .inbon-summary-inline-sub {
            font-size: 10px;
            font-weight: 600;
            color: #94a3b8;
            line-height: 1.3;
        }

        .inbon-summary-inline-amount,
        .inbon-summary-inline-balance {
            display: inline-flex;
            align-items: center;
            padding: 3px 0;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.25;
            white-space: nowrap;
        }

        .inbon-summary-inline-amount.is-nota {
            color: #2563eb;
        }

        .inbon-summary-inline-amount.is-return {
            color: #d97706;
        }

        .inbon-summary-inline-amount.is-transfer {
            color: #059669;
        }

        .inbon-summary-inline-amount.is-saldo-awal-hutang,
        .inbon-summary-inline-balance.is-hutang {
            color: #dc2626;
        }

        .inbon-summary-inline-amount.is-saldo-awal-piutang,
        .inbon-summary-inline-balance.is-piutang {
            color: #2563eb;
        }

        .inbon-summary-inline-balance.is-lunas {
            color: #059669;
        }

        .inbon-summary-chip-stack {
            display: inline-flex;
            flex-direction: column;
            gap: 2px;
        }

        .inbon-summary-chip-compact {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 74px;
            padding: 5px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border: 1px solid transparent;
        }

        .inbon-summary-chip-compact.is-hutang {
            color: #991b1b;
            background: rgba(254, 226, 226, 0.92);
            border-color: rgba(252, 165, 165, 0.7);
        }

        .inbon-summary-chip-compact.is-piutang {
            color: #1d4ed8;
            background: rgba(219, 234, 254, 0.92);
            border-color: rgba(147, 197, 253, 0.72);
        }

        .inbon-summary-chip-compact.is-lunas {
            color: #047857;
            background: rgba(209, 250, 229, 0.92);
            border-color: rgba(110, 231, 183, 0.72);
        }

        .inbon-summary-qty,
        .inbon-summary-count {
            display: inline-flex;
            flex-direction: column;
            gap: 2px;
            font-size: 11px;
            line-height: 1.25;
        }

        .inbon-summary-qty strong,
        .inbon-summary-count strong {
            font-size: 11px;
            color: #0f172a;
        }

        .inbon-summary-qty span,
        .inbon-summary-count span {
            color: #64748b;
            font-weight: 600;
        }

        .inbon-card .table tbody tr:hover td,
        .inbon-history-table tbody tr:hover td,
        .inbon-supplier-summary tbody tr:hover td {
            background: rgba(248, 251, 255, 0.92);
        }

        .inbon-card .table tbody tr:nth-child(even) td,
        .inbon-history-table tbody tr:nth-child(even) td,
        .inbon-supplier-summary tbody tr:nth-child(even) td {
            background: rgba(248, 250, 252, 0.78);
        }

        .inbon-row-remove {
            width: 38px;
            height: 38px;
            border-radius: 14px;
            padding: 0;
            box-shadow: none;
        }

        .inbon-empty-box {
            border: 1px dashed rgba(148, 163, 184, 0.75);
            background: linear-gradient(180deg, #f8fafc 0%, #f8fbff 100%);
            color: #64748b;
            border-radius: 20px;
            padding: 18px;
            text-align: center;
            font-size: 13px;
        }

        .inbon-detail-item {
            border: 1px solid rgba(226, 232, 240, 0.96);
            border-radius: 18px;
            padding: 13px 15px 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 12px 22px rgba(15, 23, 42, 0.04);
        }

        .inbon-detail-title,
        .inbon-note-title,
        .inbon-note-item-title,
        .inbon-note-meta-value {
            color: #0f172a;
        }

        .inbon-detail-meta,
        .inbon-note-subtitle,
        .inbon-note-item-meta,
        .inbon-note-meta-label,
        .inbon-history-summary-text {
            color: #64748b;
        }

        .inbon-status-chip {
            gap: 7px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.38);
        }

        .inbon-status-chip.hutang {
            background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
            color: #c2410c;
            border: 1px solid #fdba74;
        }

        .inbon-status-chip.piutang {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            color: #1d4ed8;
            border: 1px solid #93c5fd;
        }

        .inbon-status-chip.lunas {
            background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
            color: #047857;
            border: 1px solid #86efac;
        }

        .inbon-history-detail-row td {
            background: #f8fbff !important;
            padding: 0 !important;
            border-bottom: 1px solid rgba(226, 232, 240, 0.98);
        }

        .inbon-history-detail-box {
            padding: 18px 20px 20px;
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .inbon-collapsible-trigger {
            min-width: 112px;
            border-radius: 14px;
            gap: 8px;
            font-weight: 800;
            border-width: 1px;
        }

        .inbon-note-head {
            align-items: center;
            gap: 14px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.95);
        }

        .inbon-note-pill {
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            padding: 8px 12px;
            box-shadow: inset 0 -1px 0 rgba(255,255,255,0.35);
        }

        .inbon-note-panel,
        .inbon-note-sidebar {
            border: 1px solid rgba(226, 232, 240, 0.96);
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 14px 26px rgba(15, 23, 42, 0.05);
        }

        .inbon-note-section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #475569;
            background: #f8fafc;
            border: 1px solid rgba(226, 232, 240, 0.96);
            border-radius: 999px;
            padding: 7px 12px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .inbon-note-item {
            border-bottom: 1px dashed rgba(203, 213, 225, 0.95);
            padding: 12px 0;
        }

        .inbon-note-item:first-child {
            padding-top: 4px;
        }

        .inbon-note-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .inbon-note-item-amount {
            color: #1d4ed8;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .inbon-note-meta-row {
            display: grid;
            grid-template-columns: 118px minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            padding: 10px 0;
            border-bottom: 1px dashed rgba(203, 213, 225, 0.92);
        }

        .inbon-note-meta-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .inbon-note-meta-label {
            text-align: left;
            align-self: start;
        }

        .inbon-note-meta-value {
            text-align: right;
            justify-self: end;
            width: 100%;
            font-variant-numeric: tabular-nums;
            line-height: 1.55;
        }

        .inbon-note-meta-row.is-note {
            grid-template-columns: 118px minmax(0, 1fr);
            align-items: start;
        }

        .inbon-note-meta-row.is-note .inbon-note-meta-value {
            text-align: left;
            justify-self: stretch;
        }

        .inbon-note-item {
            align-items: start;
        }

        .inbon-note-item > div:first-child {
            min-width: 0;
            text-align: left;
        }

        .inbon-note-item-title {
            text-align: left;
        }

        .inbon-note-item-meta {
            text-align: left;
        }

        .inbon-note-item-amount {
            min-width: 132px;
            text-align: right;
            justify-self: end;
            font-variant-numeric: tabular-nums;
        }

        .inbon-attachment-trigger {
            border-radius: 14px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            color: #1d4ed8;
            font-weight: 800;
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
        }

        .inbon-attachment-badge {
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 800;
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            color: #1d4ed8;
            border: 1px solid #93c5fd;
        }

        .inbon-attachment-badge.empty {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            color: #64748b;
            border-color: #cbd5e1;
        }

        .inbon-attachment-modal-box {
            border-radius: 24px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
        }

        .inbon-attachment-modal-actions .btn {
            border-radius: 14px;
        }

        html[data-theme="dark"] .inbon-window-tabs,
        body[data-theme="dark"] .inbon-window-tabs {
            background: linear-gradient(180deg, rgba(11,25,21,0.98), rgba(15,31,26,0.98));
            border-color: rgba(37, 99, 235, 0.18);
        }

        html[data-theme="dark"] .inbon-window-btn,
        body[data-theme="dark"] .inbon-window-btn {
            background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(17,24,39,0.96));
            color: #cbd5e1;
            border-color: rgba(51, 65, 85, 0.95);
            box-shadow: inset 0 -1px 0 rgba(30, 41, 59, 0.8);
        }

        html[data-theme="dark"] .inbon-window-btn:hover,
        body[data-theme="dark"] .inbon-window-btn:hover {
            color: #93c5fd;
            border-color: rgba(59, 130, 246, 0.65);
            background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(12,18,32,0.98));
        }

        html[data-theme="dark"] .inbon-window-btn.active,
        body[data-theme="dark"] .inbon-window-btn.active {
            background: linear-gradient(135deg, #1d4ed8, #2563eb 58%, #38bdf8 100%);
            color: #ffffff;
        }

        html[data-theme="dark"] .inbon-summary-card,
        html[data-theme="dark"] .inbon-card,
        html[data-theme="dark"] .inbon-note-panel,
        html[data-theme="dark"] .inbon-note-sidebar,
        html[data-theme="dark"] .inbon-history-detail-box,
        html[data-theme="dark"] .inbon-detail-item,
        html[data-theme="dark"] .inbon-empty-box,
        body[data-theme="dark"] .inbon-summary-card,
        body[data-theme="dark"] .inbon-card,
        body[data-theme="dark"] .inbon-note-panel,
        body[data-theme="dark"] .inbon-note-sidebar,
        body[data-theme="dark"] .inbon-history-detail-box,
        body[data-theme="dark"] .inbon-detail-item,
        body[data-theme="dark"] .inbon-empty-box {
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 26%),
                linear-gradient(180deg, #0f172a 0%, #111827 100%);
            border-color: rgba(51, 65, 85, 0.9);
            box-shadow: 0 18px 40px rgba(2, 6, 23, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-card::after,
        html[data-theme="dark"] .inbon-card::after,
        html[data-theme="dark"] .inbon-note-panel::after,
        html[data-theme="dark"] .inbon-note-sidebar::after,
        html[data-theme="dark"] .inbon-history-detail-box::after,
        html[data-theme="dark"] .inbon-detail-item::after,
        html[data-theme="dark"] .inbon-empty-box::after,
        body[data-theme="dark"] .inbon-summary-card::after,
        body[data-theme="dark"] .inbon-card::after,
        body[data-theme="dark"] .inbon-note-panel::after,
        body[data-theme="dark"] .inbon-note-sidebar::after,
        body[data-theme="dark"] .inbon-history-detail-box::after,
        body[data-theme="dark"] .inbon-detail-item::after,
        body[data-theme="dark"] .inbon-empty-box::after {
            background: linear-gradient(90deg, rgba(59,130,246,0.95), rgba(34,197,94,0.45), rgba(14,165,233,0.35));
        }

        html[data-theme="dark"] .inbon-summary-label,
        html[data-theme="dark"] .inbon-summary-sub,
        html[data-theme="dark"] .inbon-detail-meta,
        html[data-theme="dark"] .inbon-note-subtitle,
        html[data-theme="dark"] .inbon-note-item-meta,
        html[data-theme="dark"] .inbon-note-meta-label,
        html[data-theme="dark"] .inbon-history-summary-text,
        body[data-theme="dark"] .inbon-summary-label,
        body[data-theme="dark"] .inbon-summary-sub,
        body[data-theme="dark"] .inbon-detail-meta,
        body[data-theme="dark"] .inbon-note-subtitle,
        body[data-theme="dark"] .inbon-note-item-meta,
        body[data-theme="dark"] .inbon-note-meta-label,
        body[data-theme="dark"] .inbon-history-summary-text {
            color: #94a3b8;
        }

        html[data-theme="dark"] .inbon-summary-value,
        html[data-theme="dark"] .inbon-detail-title,
        html[data-theme="dark"] .inbon-note-title,
        html[data-theme="dark"] .inbon-note-item-title,
        html[data-theme="dark"] .inbon-note-meta-value,
        body[data-theme="dark"] .inbon-summary-value,
        body[data-theme="dark"] .inbon-detail-title,
        body[data-theme="dark"] .inbon-note-title,
        body[data-theme="dark"] .inbon-note-item-title,
        body[data-theme="dark"] .inbon-note-meta-value {
            color: #f8fafc;
        }

        html[data-theme="dark"] .inbon-summary-card.inbon-summary-card-focus,
        body[data-theme="dark"] .inbon-summary-card.inbon-summary-card-focus {
            border-color: rgba(59, 130, 246, 0.28);
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%),
                linear-gradient(180deg, #111827 0%, #0f172a 100%);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-card-focus .inbon-summary-icon,
        body[data-theme="dark"] .inbon-summary-card-focus .inbon-summary-icon {
            background: rgba(30, 41, 59, 0.96);
            color: #93c5fd;
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.32);
        }

        html[data-theme="dark"] .inbon-summary-badge,
        body[data-theme="dark"] .inbon-summary-badge {
            background: rgba(30, 41, 59, 0.95);
            color: #bfdbfe;
            border-color: rgba(59, 130, 246, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-badge.success,
        body[data-theme="dark"] .inbon-summary-badge.success {
            background: rgba(6, 78, 59, 0.42);
            color: #a7f3d0;
            border-color: rgba(16, 185, 129, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-badge.warning,
        body[data-theme="dark"] .inbon-summary-badge.warning {
            background: rgba(120, 53, 15, 0.42);
            color: #fde68a;
            border-color: rgba(245, 158, 11, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-badge.danger,
        body[data-theme="dark"] .inbon-summary-badge.danger {
            background: rgba(127, 29, 29, 0.42);
            color: #fecaca;
            border-color: rgba(239, 68, 68, 0.34);
        }

        html[data-theme="dark"] .inbon-summary-info-btn,
        body[data-theme="dark"] .inbon-summary-info-btn {
            background: rgba(15, 23, 42, 0.92);
            color: #cbd5e1;
            border-color: rgba(71, 85, 105, 0.95);
        }

        html[data-theme="dark"] .inbon-card .table thead th,
        html[data-theme="dark"] .inbon-transaction-table th,
        html[data-theme="dark"] .inbon-history-table th,
        html[data-theme="dark"] .inbon-supplier-summary th,
        body[data-theme="dark"] .inbon-card .table thead th,
        body[data-theme="dark"] .inbon-transaction-table th,
        body[data-theme="dark"] .inbon-history-table th,
        body[data-theme="dark"] .inbon-supplier-summary th {
            background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(17,24,39,0.98));
            color: #cbd5e1;
            border-bottom-color: rgba(51, 65, 85, 0.98) !important;
            box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.25);
        }

        html[data-theme="dark"] .inbon-card .table tbody td,
        html[data-theme="dark"] .inbon-transaction-table td,
        html[data-theme="dark"] .inbon-history-table td,
        html[data-theme="dark"] .inbon-supplier-summary td,
        body[data-theme="dark"] .inbon-card .table tbody td,
        body[data-theme="dark"] .inbon-transaction-table td,
        body[data-theme="dark"] .inbon-history-table td,
        body[data-theme="dark"] .inbon-supplier-summary td {
            color: #e2e8f0;
            border-color: rgba(51, 65, 85, 0.9) !important;
        }

        html[data-theme="dark"] .inbon-card .table tbody tr:hover td,
        html[data-theme="dark"] .inbon-history-table tbody tr:hover td,
        html[data-theme="dark"] .inbon-supplier-summary tbody tr:hover td,
        body[data-theme="dark"] .inbon-card .table tbody tr:hover td,
        body[data-theme="dark"] .inbon-history-table tbody tr:hover td,
        body[data-theme="dark"] .inbon-supplier-summary tbody tr:hover td {
            background: rgba(15, 23, 42, 0.88);
        }

        html[data-theme="dark"] .inbon-card .table tbody tr:nth-child(even) td,
        html[data-theme="dark"] .inbon-history-table tbody tr:nth-child(even) td,
        html[data-theme="dark"] .inbon-supplier-summary tbody tr:nth-child(even) td,
        body[data-theme="dark"] .inbon-card .table tbody tr:nth-child(even) td,
        body[data-theme="dark"] .inbon-history-table tbody tr:nth-child(even) td,
        body[data-theme="dark"] .inbon-supplier-summary tbody tr:nth-child(even) td {
            background: rgba(15, 23, 42, 0.72);
        }

        html[data-theme="dark"] .inbon-supplier-name,
        body[data-theme="dark"] .inbon-supplier-name,
        html[data-theme="dark"] .inbon-summary-qty strong,
        body[data-theme="dark"] .inbon-summary-qty strong,
        html[data-theme="dark"] .inbon-summary-count strong,
        body[data-theme="dark"] .inbon-summary-count strong {
            color: #f8fafc;
        }

        html[data-theme="dark"] .inbon-supplier-caption,
        body[data-theme="dark"] .inbon-supplier-caption,
        html[data-theme="dark"] .inbon-summary-inline-sub,
        body[data-theme="dark"] .inbon-summary-inline-sub,
        html[data-theme="dark"] .inbon-summary-qty span,
        body[data-theme="dark"] .inbon-summary-qty span,
        html[data-theme="dark"] .inbon-summary-count span,
        body[data-theme="dark"] .inbon-summary-count span {
            color: #94a3b8;
        }

        html[data-theme="dark"] .inbon-summary-chip-compact.is-hutang,
        body[data-theme="dark"] .inbon-summary-chip-compact.is-hutang {
            color: #fecaca;
            background: rgba(127, 29, 29, 0.35);
            border-color: rgba(248, 113, 113, 0.28);
        }

        html[data-theme="dark"] .inbon-summary-chip-compact.is-piutang,
        body[data-theme="dark"] .inbon-summary-chip-compact.is-piutang {
            color: #bfdbfe;
            background: rgba(30, 64, 175, 0.34);
            border-color: rgba(96, 165, 250, 0.28);
        }

        html[data-theme="dark"] .inbon-summary-chip-compact.is-lunas,
        body[data-theme="dark"] .inbon-summary-chip-compact.is-lunas {
            color: #bbf7d0;
            background: rgba(6, 95, 70, 0.36);
            border-color: rgba(52, 211, 153, 0.28);
        }

    

        /* === Finance / Keuangan Kas Kecil visual refresh === */
        .finance-pane-card {
            border-radius: 26px;
            border: 1px solid rgba(191, 219, 254, 0.78);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
        }

        .finance-pane-head {
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.92);
            margin-bottom: 22px;
        }

        .finance-pane-title {
            font-size: 19px;
            letter-spacing: -0.02em;
            color: #10233f;
        }

        .finance-pane-copy {
            color: #64748b;
            max-width: 760px;
        }

        .finance-nav-tabs {
            gap: 12px;
        }

        .finance-nav-btn {
            border: 1px solid #d9e4f4;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            color: #29405f;
            padding: 11px 18px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .finance-nav-btn:hover {
            background: #f1f6ff;
            border-color: #bfd6fb;
            color: #1d4ed8;
            transform: translateY(-1px);
        }

        .finance-nav-btn.active {
            background: linear-gradient(135deg, #1f5fd6 0%, #3b82f6 100%);
            color: #ffffff;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
        }

        .finance-kpi-card {
            border-radius: 22px;
            border: 1px solid rgba(203, 213, 225, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
            position: relative;
            overflow: hidden;
        }

        .finance-kpi-card::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(148,163,184,0.55), rgba(148,163,184,0.12));
        }

        #financePaneDashboard .col-md-6:nth-child(1) .finance-kpi-card::after {
            background: linear-gradient(90deg, #475569, rgba(148,163,184,0.18));
        }

        #financePaneDashboard .col-md-6:nth-child(2) .finance-kpi-card::after {
            background: linear-gradient(90deg, #059669, rgba(110,231,183,0.18));
        }

        #financePaneDashboard .col-md-6:nth-child(3) .finance-kpi-card::after {
            background: linear-gradient(90deg, #dc2626, rgba(251,113,133,0.18));
        }

        #financePaneDashboard .col-md-6:nth-child(4) .finance-kpi-card::after {
            background: linear-gradient(90deg, #2563eb, rgba(96,165,250,0.18));
        }

        .finance-kpi-card .analytics-kpi-label {
            color: #64748b;
            margin-bottom: 12px;
        }

        .finance-kpi-card .analytics-kpi-value,
        .finance-kpi-value {
            font-size: clamp(1.45rem, 2vw, 2.05rem);
            line-height: 1.08;
            letter-spacing: -0.03em;
            color: #10233f;
        }

        .finance-kpi-card .analytics-kpi-sub {
            margin-top: 10px;
            color: #6b7b92;
        }

        .finance-summary-chip {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid #dbe5f1;
            color: #334155;
            border-radius: 14px;
            padding: 10px 14px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        }

        .finance-summary-chip i {
            color: #2563eb;
        }

        .finance-preview-card,
        #financePaneDashboard .card.p-4.h-100,
        #financePaneHistory .history-card,
        #financePaneHistory .card.p-4.history-card.finance-table {
            border-radius: 22px;
            border: 1px solid rgba(203, 213, 225, 0.9);
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
        }

        .finance-owner-note {
            border: 1px solid rgba(251, 191, 36, 0.45);
            background: linear-gradient(180deg, #fffaf0 0%, #fffbeb 100%);
            color: #92400e;
            border-radius: 16px;
            padding: 12px 14px;
        }

        #financeAccessBadge {
            border: 1px solid rgba(191, 219, 254, 0.95);
            background: #eff6ff !important;
            color: #1d4ed8 !important;
            font-weight: 800;
            padding: 9px 12px;
            border-radius: 999px;
        }

        .finance-table {
            border-radius: 20px;
        }

        .finance-table thead th,
        #financePaneDashboard .finance-table thead th,
        #financePaneHistory .finance-table thead th {
            background: #f8fafc;
            color: #475569;
            border-top: none !important;
            border-bottom: 1px solid #dbe5f1 !important;
            font-size: 11.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .finance-table tbody td {
            border-color: #e7edf5;
            color: #24364d;
            font-size: 13px;
            padding-top: 13px;
            padding-bottom: 13px;
            vertical-align: middle;
        }

        .finance-table tbody tr:hover {
            background: #f8fbff;
        }
        .finance-real-summary-row .finance-kpi-card {
            min-height: 148px;
        }

        .finance-real-expense-card {
            border-color: rgba(248, 113, 113, 0.34);
            background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
        }

        .finance-real-gap-card {
            border-color: rgba(251, 191, 36, 0.38);
            background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
        }

        .finance-real-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #dc2626;
            background: #fee2e2;
            border: 1px solid #fecaca;
            font-size: 22px;
            flex: 0 0 auto;
        }


        .finance-bukti-link {
            color: #1d4ed8;
            font-weight: 700;
        }

        .finance-bukti-thumb {
            border-radius: 12px;
            border: 1px solid #dbe5f1;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
        }

        .finance-bukti-empty {
            border-radius: 12px;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            color: #94a3b8;
        }

        html[data-theme="dark"] .finance-pane-card,
        body[data-theme="dark"] .finance-pane-card,
        html[data-theme="dark"] .finance-preview-card,
        body[data-theme="dark"] .finance-preview-card,
        html[data-theme="dark"] #financePaneDashboard .card.p-4.h-100,
        body[data-theme="dark"] #financePaneDashboard .card.p-4.h-100,
        html[data-theme="dark"] #financePaneHistory .history-card,
        body[data-theme="dark"] #financePaneHistory .history-card,
        html[data-theme="dark"] #financePaneHistory .card.p-4.history-card.finance-table,
        body[data-theme="dark"] #financePaneHistory .card.p-4.history-card.finance-table {
            background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
            border-color: rgba(51, 65, 85, 0.92);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.38);
        }

        html[data-theme="dark"] .finance-pane-title,
        body[data-theme="dark"] .finance-pane-title,
        html[data-theme="dark"] .finance-kpi-card .analytics-kpi-value,
        body[data-theme="dark"] .finance-kpi-card .analytics-kpi-value,
        html[data-theme="dark"] .finance-kpi-value,
        body[data-theme="dark"] .finance-kpi-value {
            color: #f8fafc;
        }

        html[data-theme="dark"] .finance-pane-copy,
        body[data-theme="dark"] .finance-pane-copy,
        html[data-theme="dark"] .finance-kpi-card .analytics-kpi-sub,
        body[data-theme="dark"] .finance-kpi-card .analytics-kpi-sub,
        html[data-theme="dark"] .finance-kpi-card .analytics-kpi-label,
        body[data-theme="dark"] .finance-kpi-card .analytics-kpi-label {
            color: #cbd5e1;
        }

        html[data-theme="dark"] .finance-nav-btn,
        body[data-theme="dark"] .finance-nav-btn,
        html[data-theme="dark"] .finance-summary-chip,
        body[data-theme="dark"] .finance-summary-chip {
            background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
            border-color: rgba(51, 65, 85, 0.95);
            color: #dbe7f5;
        }

        html[data-theme="dark"] .finance-nav-btn:hover,
        body[data-theme="dark"] .finance-nav-btn:hover {
            background: #13233b;
            color: #93c5fd;
        }

        html[data-theme="dark"] .finance-nav-btn.active,
        body[data-theme="dark"] .finance-nav-btn.active {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: #fff;
        }

        html[data-theme="dark"] .finance-table thead th,
        body[data-theme="dark"] .finance-table thead th {
            background: #162133;
            color: #dbe7f5;
            border-bottom-color: rgba(71, 85, 105, 0.95) !important;
        }

        html[data-theme="dark"] .finance-table tbody td,
        body[data-theme="dark"] .finance-table tbody td {
            border-color: rgba(51, 65, 85, 0.92);
            color: #e2e8f0;
        }

        html[data-theme="dark"] .finance-table tbody tr:hover,
        body[data-theme="dark"] .finance-table tbody tr:hover {
            background: rgba(30, 41, 59, 0.75);
        }

    

        /* === STOCK IN / STOCK OUT / HISTORI TRANSAKSI REFINEMENT === */
        #in-section .page-head,
        #out-section .page-head,
        #history-section .page-head {
            margin-bottom: 24px;
        }

        #in-section .page-title,
        #out-section .page-title,
        #history-section .page-title {
            letter-spacing: -0.03em;
        }

        #in-section > .row > .col-xl-10 > .card,
        #out-section > .row > .col-xl-10 > .card,
        #history-section .history-filter-card,
        #history-section .history-table-card {
            position: relative;
            border: 1px solid rgba(191, 219, 254, 0.58) !important;
            border-radius: 24px !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06) !important;
            overflow: hidden;
        }

        #in-section > .row > .col-xl-10 > .card::after,
        #out-section > .row > .col-xl-10 > .card::after,
        #history-section .history-filter-card::after,
        #history-section .history-table-card::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(37, 99, 235, 0.92), rgba(14, 165, 233, 0.62));
            pointer-events: none;
        }

        #out-section > .row > .col-xl-10 > .card {
            border-top: 1px solid rgba(248, 113, 113, 0.22) !important;
        }

        #out-section > .row > .col-xl-10 > .card::after {
            background: linear-gradient(90deg, rgba(220, 38, 38, 0.92), rgba(248, 113, 113, 0.62));
        }

        #history-section .history-filter-card::after,
        #history-section .history-table-card::after {
            background: linear-gradient(90deg, rgba(71, 85, 105, 0.9), rgba(37, 99, 235, 0.58));
        }

        #in-section .batch-summary,
        #out-section .batch-summary {
            min-height: 100%;
            border: 1px solid rgba(191, 219, 254, 0.78);
            border-radius: 18px;
            background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
            color: #1e3a8a;
            font-size: 13px;
            line-height: 1.65;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.88);
        }

        #out-section .batch-summary {
            border-color: rgba(254, 202, 202, 0.9);
            background: linear-gradient(180deg, #fff7f7 0%, #fef2f2 100%);
            color: #991b1b;
        }

        #in-section .stok-awal-matrix-card,
        #in-section #in_supplier_panel,
        #in-section #in_batch_container,
        #out-section #out_batch_container,
        #history-section .history-filter-card,
        #history-section .history-table-card {
            border-radius: 22px !important;
        }

        #in-section .stok-awal-matrix-card,
        #in-section #in_supplier_panel,
        #in-section #in_batch_container,
        #out-section #out_batch_container {
            border: 1px solid rgba(226, 232, 240, 0.92) !important;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.045) !important;
        }

        #in-section .stok-awal-matrix-head,
        #history-section .history-table-head {
            padding-bottom: 14px;
            margin-bottom: 18px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        }

        #history-section .history-table-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        #history-section .history-table-title,
        #in-section .stok-awal-matrix-title {
            color: #0f172a;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        #in-section .hero-badge-soft,
        #history-section .history-record-count {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
        }

        #history-section .history-stat-chip {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid #e2e8f0;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.04);
        }

        #history-section .history-stat-chip.primary {
            border-color: #bfdbfe;
            color: #1d4ed8;
            background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
        }

        #history-section .history-stat-chip.success {
            border-color: #bbf7d0;
            color: #047857;
            background: linear-gradient(180deg, #ecfdf5 0%, #f7fef9 100%);
        }

        #history-section .history-stat-chip.dark {
            border-color: #cbd5e1;
            color: #334155;
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        }

        #in-section .batch-row,
        #out-section .batch-row {
            border: 1px solid rgba(226, 232, 240, 0.95);
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
            padding: 18px;
        }

        #in-section .batch-row-head,
        #out-section .batch-row-head {
            padding-bottom: 12px;
            margin-bottom: 14px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.92);
        }

        #in-section .batch-row-title,
        #out-section .batch-row-title,
        #history-section .history-table-subtitle,
        #history-section .history-filter-item label {
            color: #64748b;
            letter-spacing: 0.06em;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 11px;
        }

        #in-section .batch-actions .btn,
        #out-section .batch-actions .btn,
        #history-section .history-filter-actions .btn {
            border-radius: 14px;
            font-weight: 800;
            box-shadow: none;
        }

        #in-section .btn-success,
        #out-section .btn-danger {
            border: none;
            font-size: 14px;
            letter-spacing: 0.02em;
        }

        #in-section .btn-success {
            background: linear-gradient(135deg, #16a34a, #22c55e);
            box-shadow: 0 16px 28px rgba(22, 163, 74, 0.16);
        }

        #out-section .btn-danger {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            box-shadow: 0 16px 28px rgba(220, 38, 38, 0.16);
        }

        #in-section .form-control,
        #in-section .form-select,
        #out-section .form-control,
        #out-section .form-select,
        #history-section .form-control,
        #history-section .form-select {
            border: 1px solid #dbe5f0;
            background: #ffffff;
            color: #0f172a;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.96);
        }

        #in-section .form-control:focus,
        #in-section .form-select:focus,
        #out-section .form-control:focus,
        #out-section .form-select:focus,
        #history-section .form-control:focus,
        #history-section .form-select:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }

        #history-section .history-filter-grid {
            gap: 16px;
        }

        #history-section .history-filter-item .form-control,
        #history-section .history-filter-item .form-select {
            min-height: 46px;
        }

        #history-section .table-responsive,
        #history-section .history-table-scroll {
            border-radius: 18px;
        }

        #history-section table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc !important;
            color: #475569 !important;
            border-bottom: 1px solid #dbe5f0 !important;
            border-top: none !important;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.06em;
            padding-top: 13px;
            padding-bottom: 13px;
        }

        #history-section table tbody td {
            border-color: #edf2f7;
            padding-top: 14px;
            padding-bottom: 14px;
            color: #1f2937;
            font-size: 13px;
        }

        #history-section table tbody tr:nth-child(even) {
            background: rgba(248, 250, 252, 0.72);
        }

        #history-section table tbody tr:hover {
            background: rgba(239, 246, 255, 0.82);
        }

        #history-section .btn-outline-primary,
        #history-section .btn-outline-danger,
        #history-section .btn-outline-secondary,
        #in-section .btn-outline-primary,
        #in-section .btn-outline-secondary,
        #in-section .btn-outline-success,
        #out-section .btn-outline-secondary,
        #out-section .btn-outline-danger {
            background: #ffffff;
        }

        #history-section .btn-outline-primary {
            border-color: #bfdbfe;
            color: #2563eb;
        }

        #history-section .btn-outline-danger,
        #out-section .btn-outline-danger {
            border-color: #fecaca;
            color: #dc2626;
        }

        #history-section .btn-outline-secondary,
        #in-section .btn-outline-secondary,
        #out-section .btn-outline-secondary {
            border-color: #cbd5e1;
            color: #475569;
        }

        #in-section .btn-outline-success {
            border-color: #bbf7d0;
            color: #15803d;
        }

        #history-section .btn:hover,
        #in-section .btn:hover,
        #out-section .btn:hover {
            transform: translateY(-1px);
        }

        @media (max-width: 991.98px) {
            #in-section > .row > .col-xl-10 > .card,
            #out-section > .row > .col-xl-10 > .card,
            #history-section .history-filter-card,
            #history-section .history-table-card {
                border-radius: 20px !important;
            }

            #in-section > .row > .col-xl-10 > .card,
            #out-section > .row > .col-xl-10 > .card {
                padding: 1.25rem !important;
            }
        }

    

        /* === Realtime Stock Design Refresh === */
        #realtime-section .section-hero-card,
        #realtime-section .realtime-table-shell,
        #realtime-section .realtime-category-card,
        #realtime-section .hero-mini-stat {
            border-color: rgba(203, 213, 225, 0.88);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }

        #realtime-section .section-hero-card,
        #realtime-section .realtime-table-shell,
        #realtime-section .realtime-category-card {
            position: relative;
            overflow: hidden;
        }

        #realtime-section .section-hero-card::after,
        #realtime-section .realtime-table-shell::after,
        #realtime-section .realtime-category-card::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 0;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(37,99,235,0.72), rgba(14,165,233,0.38), rgba(16,185,129,0.24));
            pointer-events: none;
        }

        #realtime-section .hero-mini-stat {
            border-radius: 20px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        #realtime-section .hero-mini-icon {
            background: linear-gradient(135deg, #eff6ff, #f8fbff);
            color: #2563eb;
            box-shadow: inset 0 0 0 1px rgba(191,219,254,0.9);
        }

        #realtime-section .hero-mini-stat:nth-child(2) .hero-mini-icon {
            background: linear-gradient(135deg, #ecfdf5, #f7fcfa);
            color: #059669;
            box-shadow: inset 0 0 0 1px rgba(167,243,208,0.9);
        }

        #realtime-section .hero-mini-stat:nth-child(3) .hero-mini-icon {
            background: linear-gradient(135deg, #fff7ed, #fffbeb);
            color: #d97706;
            box-shadow: inset 0 0 0 1px rgba(253,230,138,0.92);
        }

        #realtime-section .hero-mini-value,
        #realtime-section .realtime-table-title,
        #realtime-section .realtime-category-title,
        #realtime-section .realtime-product-title,
        #realtime-section .realtime-total-pill,
        #realtime-section .realtime-asset-pill,
        #realtime-section .realtime-summary-pill {
            font-family: 'Inter', sans-serif;
        }

        #realtime-section .realtime-toolbar {
            align-items: flex-end;
            gap: 16px;
        }

        #realtime-section .realtime-filter-wrap {
            width: min(100%, 840px);
            gap: 14px;
        }

        #realtime-section .realtime-filter-wrap .form-control,
        #realtime-section .realtime-filter-wrap .form-select {
            border-radius: 14px !important;
            border: 1px solid #dbe4ef;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            color: #0f172a;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
            font-weight: 600;
        }

        #realtime-section .realtime-filter-wrap .form-control:focus,
        #realtime-section .realtime-filter-wrap .form-select:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.12);
        }

        #realtime-section .realtime-table-head,
        #realtime-section .realtime-category-head {
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border-bottom: 1px solid #e5edf6;
        }

        #realtime-section .realtime-count-chip,
        #realtime-section .realtime-category-chip,
        #realtime-section .realtime-summary-pill,
        #realtime-section .realtime-total-pill {
            background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
            font-weight: 800;
        }

        #realtime-section .realtime-asset-pill {
            background: linear-gradient(180deg, #ecfdf5 0%, #f7fcfa 100%);
            color: #15803d;
            border: 1px solid #bbf7d0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
        }

        #realtime-section .realtime-category-grid {
            gap: 20px;
            padding: 20px;
        }

        #realtime-section .realtime-category-table-wrap {
            scrollbar-width: thin;
            scrollbar-color: #94a3b8 #eef4fb;
        }

        #realtime-section .realtime-category-table-wrap::-webkit-scrollbar {
            height: 10px;
        }

        #realtime-section .realtime-category-table-wrap::-webkit-scrollbar-track {
            background: #eef4fb;
            border-radius: 999px;
        }

        #realtime-section .realtime-category-table-wrap::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #94a3b8, #64748b);
            border-radius: 999px;
        }

        #realtime-section .realtime-category-table {
            border-collapse: separate;
            border-spacing: 0;
        }

        #realtime-section .realtime-category-table thead th {
            position: sticky;
            top: 0;
            background: #f8fbff;
            color: #334155;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border-top: none !important;
            border-bottom: 1px solid #dce6f2;
            box-shadow: inset 0 -2px 0 rgba(148,163,184,0.20);
        }

        #realtime-section .realtime-category-table tbody td {
            border-top: none;
            border-bottom: 1px solid #edf2f7;
            font-size: 13px;
            color: #0f172a;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td {
            background: #fcfdff;
        }

        #realtime-section .realtime-category-table tbody tr:hover td {
            background: #f6faff;
        }

        #realtime-section .realtime-category-table tbody td:first-child,
        #realtime-section .realtime-category-table tbody td:nth-child(2) {
            background: inherit;
        }

        #realtime-section .realtime-color-name,
        #realtime-section .realtime-product-meta,
        #realtime-section .realtime-category-subtitle,
        #realtime-section .realtime-table-subtitle {
            color: #64748b;
        }

        #realtime-section .realtime-size-cell {
            border-radius: 12px;
            min-width: 48px;
            padding: 10px 8px !important;
        }

        #realtime-section .realtime-size-value {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: -0.01em;
        }

        #realtime-section .realtime-size-cell.zero {
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        }

        #realtime-section .realtime-size-cell.zero .realtime-size-value {
            color: #94a3b8;
            opacity: 0.78;
        }

        #realtime-section .realtime-size-cell.ready {
            background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%) !important;
        }

        #realtime-section .realtime-size-cell.ready .realtime-size-value {
            color: #166534;
        }

        #realtime-section .realtime-category-empty,
        #realtime-section .realtime-category-grid-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            color: #64748b;
        }

        @media (max-width: 991.98px) {
            #realtime-section .realtime-filter-wrap {
                grid-template-columns: 1fr;
                width: 100%;
            }

            #realtime-section .realtime-category-grid {
                padding: 14px;
            }
        }

    
        .best-dropship-shell {
            display: grid;
            gap: 18px;
        }

        .best-dropship-hero {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            padding: 28px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background:
                radial-gradient(circle at top right, rgba(250, 204, 21, 0.28), transparent 24%),
                radial-gradient(circle at left center, rgba(59, 130, 246, 0.18), transparent 22%),
                linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #2563eb 100%);
            color: #f8fafc;
            box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
        }

        .best-dropship-hero::after {
            content: "";
            position: absolute;
            inset: auto -48px -48px auto;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            filter: blur(4px);
        }

        .best-dropship-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255,255,255,0.14);
            border: 1px solid rgba(255,255,255,0.18);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .best-dropship-title {
            font-size: clamp(1.5rem, 2.4vw, 2.3rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 8px;
            letter-spacing: -0.03em;
        }

        .best-dropship-copy {
            max-width: 760px;
            color: rgba(241, 245, 249, 0.88);
            font-size: 13px;
            line-height: 1.7;
            margin-bottom: 0;
        }

        .best-dropship-hero-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-top: 18px;
            position: relative;
            z-index: 1;
        }

        .best-dropship-hero-stat {
            padding: 16px 18px;
            border-radius: 20px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.14);
            backdrop-filter: blur(8px);
        }

        .best-dropship-hero-stat-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
            color: rgba(226, 232, 240, 0.82);
        }

        .best-dropship-hero-stat-value {
            font-size: 1.25rem;
            font-weight: 800;
            margin-top: 6px;
            line-height: 1.2;
        }

        .best-dropship-podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            align-items: stretch;
        }

        .best-dropship-podium.count-2 {
            grid-template-columns: repeat(2, minmax(280px, 360px));
            justify-content: center;
        }

        .best-dropship-podium.count-1 {
            grid-template-columns: minmax(280px, 420px);
            justify-content: center;
        }

        .best-dropship-card {
            position: relative;
            overflow: hidden;
            border-radius: 26px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
            padding: 22px;
            min-height: 100%;
        }

        .best-dropship-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 5px;
            background: linear-gradient(90deg, #cbd5e1, rgba(203, 213, 225, 0.2));
        }

        .best-dropship-card.rank-1::before { background: linear-gradient(90deg, #f59e0b, #fde68a); }
        .best-dropship-card.rank-2::before { background: linear-gradient(90deg, #94a3b8, #e2e8f0); }
        .best-dropship-card.rank-3::before { background: linear-gradient(90deg, #b45309, #f6ad55); }

        .best-dropship-rank-badge {
            width: 58px;
            height: 58px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 12px 24px rgba(15, 23, 42, 0.08);
            margin-bottom: 18px;
        }

        .best-dropship-card.rank-1 .best-dropship-rank-badge { background: linear-gradient(135deg, #f59e0b, #fcd34d); color: #78350f; }
        .best-dropship-card.rank-2 .best-dropship-rank-badge { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); color: #334155; }
        .best-dropship-card.rank-3 .best-dropship-rank-badge { background: linear-gradient(135deg, #d97706, #fdba74); color: #7c2d12; }

        .best-dropship-rank-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #64748b;
            margin-bottom: 6px;
        }

        .best-dropship-name {
            font-size: 1.2rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.2;
            margin-bottom: 8px;
        }

        .best-dropship-amount {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.03em;
            line-height: 1.08;
        }

        .best-dropship-subtext {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
        }

        .best-dropship-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 18px;
        }

        .best-dropship-meta-box {
            border-radius: 16px;
            padding: 12px 14px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        .best-dropship-meta-label {
            font-size: 11px;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .best-dropship-meta-value {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
            margin-top: 4px;
        }

        .best-dropship-stage-card {
            border-radius: 24px;
            border: 1px solid rgba(191, 219, 254, 0.85);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
        }

        .best-dropship-stage-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 18px;
        }

        .best-dropship-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

        .best-dropship-table tbody td {
            vertical-align: middle;
        }

        .best-dropship-table-rank {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            background: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }

        .best-dropship-empty {
            border-radius: 22px;
            padding: 40px 20px;
            text-align: center;
            color: #64748b;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 1px dashed #cbd5e1;
        }

        .best-dropship-highlight-list {
            display: grid;
            gap: 12px;
        }

        .best-dropship-highlight-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 18px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        .best-dropship-highlight-label {
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .best-dropship-highlight-value {
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
            text-align: right;
        }

        @media (max-width: 991.98px) {
            .best-dropship-podium,
            .best-dropship-stage-grid,
            .best-dropship-hero-stats {
                grid-template-columns: 1fr;
            }
        }



        .best-dropship-shell {
            display: grid;
            gap: 22px;
        }

        .best-dropship-hero {
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            padding: 30px;
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 48%, #2563eb 100%);
            color: #fff;
            box-shadow: 0 20px 50px rgba(37, 99, 235, 0.22);
        }

        .best-dropship-copy {
            max-width: 860px;
            color: rgba(255, 255, 255, 0.85);
        }

        .best-dropship-hero-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-top: 20px;
        }

        .best-dropship-hero-stat {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 18px;
            padding: 16px 18px;
            backdrop-filter: blur(10px);
            min-height: 96px;
        }

        .best-dropship-hero-stat-value {
            font-size: clamp(1rem, 1.8vw, 1.45rem);
            line-height: 1.2;
            word-break: break-word;
        }

        .best-dropship-podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            align-items: stretch;
        }

        .best-dropship-podium.count-2 {
            grid-template-columns: repeat(2, minmax(280px, 360px));
            justify-content: center;
        }

        .best-dropship-podium.count-1 {
            grid-template-columns: minmax(280px, 420px);
            justify-content: center;
        }

        .best-dropship-card {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid rgba(226, 232, 240, 0.92);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
            padding: 22px;
        }

        .best-dropship-card.rank-1 {
            transform: translateY(-6px);
            box-shadow: 0 22px 42px rgba(245, 158, 11, 0.18);
        }

        .best-dropship-card.rank-1 { background: linear-gradient(180deg, #fffdf6 0%, #fff7e6 100%); }
        .best-dropship-card.rank-2 { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
        .best-dropship-card.rank-3 { background: linear-gradient(180deg, #fffaf5 0%, #fff1e8 100%); }

        .best-dropship-rank-label {
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 10px;
        }

        .best-dropship-name {
            font-size: 1.2rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 8px;
        }

        .best-dropship-amount {
            display: none;
        }

        .best-dropship-subtext {
            color: #475569;
            font-size: 13px;
            line-height: 1.65;
            margin-bottom: 14px;
        }

        .best-dropship-meta-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .best-dropship-meta-box {
            border: 1px solid #e2e8f0;
            background: #fff;
            border-radius: 16px;
            padding: 12px 14px;
        }

        .best-dropship-meta-label,
        .best-dropship-highlight-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
            color: #64748b;
        }

        .best-dropship-meta-value,
        .best-dropship-highlight-value {
            margin-top: 6px;
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.45;
            word-break: break-word;
        }

        .best-dropship-stage-card {
            border-radius: 26px;
            border: 1px solid rgba(191, 219, 254, 0.85);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
        }

        .best-dropship-stage-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
            gap: 18px;
            align-items: start;
        }

        .best-dropship-table thead th {
            background: #eff6ff;
            color: #1e3a8a;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-bottom: 1px solid #dbeafe;
            white-space: nowrap;
        }

        .best-dropship-table tbody td {
            padding-top: 16px;
            padding-bottom: 16px;
            border-color: #edf2f7;
        }

        .best-dropship-table-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            height: 48px;
            padding: 0 12px;
            border-radius: 16px;
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            color: #1d4ed8;
            font-weight: 800;
        }

        .best-dropship-highlight-list {
            display: grid;
            gap: 14px;
        }

        .best-dropship-highlight-item {
            border: 1px solid #e2e8f0;
            background: #fff;
            border-radius: 18px;
            padding: 16px 18px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
        }

        .best-dropship-popup-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.58);
            backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 3000;
        }

        .best-dropship-popup-backdrop.show {
            display: flex;
            animation: bestDropshipPopupFade 0.28s ease;
        }

        .best-dropship-popup-card {
            position: relative;
            width: min(620px, 100%);
            border-radius: 30px;
            padding: 38px 30px 30px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid rgba(191, 219, 254, 0.88);
            box-shadow: 0 30px 70px rgba(15, 23, 42, 0.24);
            text-align: center;
            overflow: hidden;
            animation: bestDropshipPopupPop 0.42s cubic-bezier(.2,.9,.2,1);
        }

        .best-dropship-popup-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 5px;
            background: linear-gradient(90deg, #2563eb, #a855f7, #f59e0b, #10b981);
        }

        .best-dropship-popup-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .best-dropship-popup-crown {
            width: 86px;
            height: 86px;
            margin: 18px auto 14px;
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f59e0b, #fde68a);
            color: #7c2d12;
            font-size: 2rem;
            box-shadow: 0 16px 34px rgba(245, 158, 11, 0.24);
        }

        .best-dropship-popup-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 12px;
        }

        .best-dropship-popup-message {
            font-size: 1rem;
            line-height: 1.8;
            color: #334155;
            margin-bottom: 18px;
        }

        .best-dropship-popup-product-wrap {
            border: 1px solid #e2e8f0;
            background: #fff;
            border-radius: 22px;
            padding: 18px 20px;
            margin-bottom: 20px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 24px rgba(15, 23, 42, 0.05);
        }

        .best-dropship-popup-product-label {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 6px;
        }

        .best-dropship-popup-product {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.6;
        }

        .best-dropship-popup-close {
            position: absolute;
            right: 16px;
            top: 16px;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .best-dropship-popup-confetti {
            pointer-events: none;
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .best-dropship-confetti-piece {
            position: absolute;
            top: -12%;
            width: 10px;
            height: 22px;
            border-radius: 999px;
            opacity: 0.96;
            animation: bestDropshipConfetti 3s linear infinite;
        }

        .best-dropship-confetti-piece.c1 { left: 8%; background: #2563eb; animation-delay: 0s; }
        .best-dropship-confetti-piece.c2 { left: 16%; background: #f59e0b; animation-delay: .25s; }
        .best-dropship-confetti-piece.c3 { left: 24%; background: #a855f7; animation-delay: .6s; }
        .best-dropship-confetti-piece.c4 { left: 32%; background: #10b981; animation-delay: .15s; }
        .best-dropship-confetti-piece.c5 { left: 40%; background: #ef4444; animation-delay: .8s; }
        .best-dropship-confetti-piece.c6 { left: 49%; background: #2563eb; animation-delay: .4s; }
        .best-dropship-confetti-piece.c7 { left: 57%; background: #f59e0b; animation-delay: 1s; }
        .best-dropship-confetti-piece.c8 { left: 66%; background: #8b5cf6; animation-delay: .55s; }
        .best-dropship-confetti-piece.c9 { left: 74%; background: #14b8a6; animation-delay: .95s; }
        .best-dropship-confetti-piece.c10 { left: 82%; background: #e11d48; animation-delay: .35s; }
        .best-dropship-confetti-piece.c11 { left: 90%; background: #22c55e; animation-delay: .72s; }
        .best-dropship-confetti-piece.c12 { left: 96%; background: #f97316; animation-delay: 1.18s; }

        @keyframes bestDropshipConfetti {
            0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            100% { transform: translate3d(-18px, 110vh, 0) rotate(720deg); opacity: 0.95; }
        }

        @keyframes bestDropshipPopupFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes bestDropshipPopupPop {
            from { transform: translateY(18px) scale(0.94); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }

        @media (max-width: 991.98px) {
            .best-dropship-hero-stats,
            .best-dropship-podium,
            .best-dropship-stage-grid {
                grid-template-columns: 1fr;
            }
        }

    
        .best-dropship-info-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
            gap: 20px;
            margin-top: 22px;
        }

        .best-dropship-info-card {
            border-radius: 24px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        }

        .best-dropship-price-table thead th {
            background: #f8fafc;
            color: #64748b;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            white-space: nowrap;
            border-bottom: 1px solid #e2e8f0;
        }

        .best-dropship-price-table tbody td {
            border-color: #eef2f7;
            vertical-align: middle;
        }

        .best-dropship-price-index {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
        }

        .best-dropship-price-name {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
        }

        .best-dropship-price-meta {
            margin-top: 4px;
            font-size: 11px;
            color: #64748b;
        }

        .best-dropship-price-value {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .best-dropship-note-form {
            margin-bottom: 18px;
            padding: 16px;
            border-radius: 18px;
            background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
            border: 1px solid #dbeafe;
        }

        .best-dropship-note-list {
            display: grid;
            gap: 14px;
        }

        .best-dropship-note-card {
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #ffffff;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }

        .best-dropship-note-media {
            display: block;
            width: 100%;
            max-height: 220px;
            object-fit: cover;
            background: #f8fafc;
        }

        .best-dropship-note-body {
            padding: 16px 18px 18px;
        }

        .best-dropship-note-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .best-dropship-note-title {
            font-size: 15px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
        }

        .best-dropship-note-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            border: 1px solid #bfdbfe;
            white-space: nowrap;
        }

        .best-dropship-note-content {
            font-size: 13px;
            color: #475569;
            line-height: 1.7;
            white-space: pre-line;
            margin: 0;
        }

        .best-dropship-note-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid #eef2f7;
        }

        .best-dropship-note-meta {
            font-size: 11px;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        @media (max-width: 1199.98px) {
            .best-dropship-info-grid {
                grid-template-columns: 1fr;
            }
        }


        .best-dropship-info-grid {
            grid-template-columns: 1fr;
        }

        .best-dropship-product-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(251, 191, 36, 0.24);
            background:
                radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 22%),
                radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 28%),
                linear-gradient(135deg, #ffffff 0%, #fffdf7 46%, #f8fbff 100%);
        }

        .best-dropship-product-card::before {
            content: "";
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #f59e0b, #fb7185, #2563eb);
        }

        .best-dropship-product-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }

        .best-dropship-product-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.88);
            border: 1px solid rgba(251, 191, 36, 0.42);
            color: #c2410c;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .best-dropship-product-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .best-dropship-product-item {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(226, 232, 240, 0.96);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
            min-height: 108px;
        }

        .best-dropship-product-item.rank-1,
        .best-dropship-product-item.rank-2,
        .best-dropship-product-item.rank-3 {
            border-color: rgba(251, 191, 36, 0.38);
            background: linear-gradient(135deg, #ffffff 0%, #fff9ed 100%);
        }

        .best-dropship-product-rank {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #0f172a, #334155);
            color: #ffffff;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
            flex-shrink: 0;
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
        }

        .best-dropship-product-item.rank-1 .best-dropship-product-rank {
            background: linear-gradient(135deg, #f59e0b, #fcd34d);
            color: #78350f;
        }

        .best-dropship-product-item.rank-2 .best-dropship-product-rank {
            background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
            color: #334155;
        }

        .best-dropship-product-item.rank-3 .best-dropship-product-rank {
            background: linear-gradient(135deg, #fb923c, #fed7aa);
            color: #7c2d12;
        }

        .best-dropship-product-media,
        .best-dropship-product-media-empty {
            width: 68px;
            height: 68px;
            border-radius: 20px;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: #f8fafc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
        }

        .best-dropship-product-media {
            object-fit: cover;
        }

        .best-dropship-product-media-empty {
            color: #94a3b8;
            font-size: 1.45rem;
        }

        .best-dropship-product-copy {
            min-width: 0;
            flex: 1;
        }

        .best-dropship-product-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            border-radius: 999px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1d4ed8;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .best-dropship-product-name {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.35;
            word-break: break-word;
        }

        @media (max-width: 991.98px) {
            .best-dropship-product-list {
                grid-template-columns: 1fr;
            }
        }



        /* === Realtime Stock Spreadsheet Compact Override === */
        #realtime-section .realtime-toolbar {
            gap: 12px;
            align-items: flex-end;
        }

        #realtime-section .realtime-filter-wrap {
            width: min(100%, 760px);
            grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
            gap: 10px;
        }

        #realtime-section .realtime-filter-wrap .form-control,
        #realtime-section .realtime-filter-wrap .form-select {
            min-height: 40px;
            font-size: 12px;
            font-weight: 600;
        }

        #realtime-section .realtime-table-shell,
        #realtime-section .realtime-category-card {
            border-radius: 16px;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
        }

        #realtime-section .realtime-table-shell::after,
        #realtime-section .realtime-category-card::after,
        #realtime-section .section-hero-card::after {
            display: none;
        }

        #realtime-section .realtime-table-head,
        #realtime-section .realtime-category-head {
            padding: 12px 14px;
        }

        #realtime-section .realtime-table-title,
        #realtime-section .realtime-category-title {
            font-size: 14px;
        }

        #realtime-section .realtime-table-subtitle,
        #realtime-section .realtime-category-subtitle,
        #realtime-section .realtime-product-meta,
        #realtime-section .realtime-color-name {
            font-size: 11px;
        }

        #realtime-section .realtime-count-chip,
        #realtime-section .realtime-category-chip,
        #realtime-section .realtime-summary-pill,
        #realtime-section .realtime-total-pill,
        #realtime-section .realtime-asset-pill {
            border-radius: 10px;
            padding: 6px 9px;
            font-size: 11px;
            min-width: 0;
            box-shadow: none;
        }

        #realtime-section .realtime-category-grid {
            grid-template-columns: 1fr;
            gap: 14px;
            padding: 14px;
        }

        #realtime-section .realtime-category-card {
            border: 1px solid #dbe4ef;
            background: #ffffff;
            overflow: hidden;
        }

        #realtime-section .realtime-category-table-wrap {
            overflow: auto;
            max-width: 100%;
            max-height: 62vh;
            scrollbar-width: thin;
            scrollbar-color: #94a3b8 #eef4fb;
        }

        #realtime-section .realtime-category-table {
            width: max-content;
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
        }

        #realtime-section .realtime-category-table thead th {
            position: sticky;
            top: 0;
            z-index: 4;
            background: #f8fafc;
            color: #334155;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border-bottom: 1px solid #dbe4ef;
            border-right: 1px solid #e5edf6;
            box-shadow: none;
            padding: 9px 8px;
            text-align: center;
            white-space: nowrap;
        }

        #realtime-section .realtime-category-table thead th:first-child {
            left: 0;
            z-index: 7;
            min-width: 220px;
            text-align: left;
            padding-left: 12px;
        }

        #realtime-section .realtime-category-table thead th:nth-child(2) {
            left: 220px;
            z-index: 7;
            min-width: 110px;
            text-align: left;
        }

        #realtime-section .realtime-category-table tbody td {
            border-bottom: 1px solid #edf2f7;
            border-right: 1px solid #f1f5f9;
            font-size: 11.5px;
            color: #0f172a;
            padding: 7px 8px;
            height: 36px;
            background: #fff;
            text-align: center;
            vertical-align: middle;
        }

        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td,
        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td:first-child,
        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td:nth-child(2) {
            background: #fcfcfd;
        }

        #realtime-section .realtime-category-table tbody tr:hover td,
        #realtime-section .realtime-category-table tbody tr:hover td:first-child,
        #realtime-section .realtime-category-table tbody tr:hover td:nth-child(2) {
            background: #f8fbff;
        }

        #realtime-section .realtime-category-table tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 3;
            text-align: left;
            min-width: 220px;
            padding-left: 12px;
            box-shadow: 1px 0 0 #e5edf6;
        }

        #realtime-section .realtime-category-table tbody td:nth-child(2) {
            position: sticky;
            left: 220px;
            z-index: 3;
            text-align: left;
            min-width: 110px;
            box-shadow: 1px 0 0 #e5edf6;
        }

        #realtime-section .realtime-product-wrap {
            gap: 8px;
            align-items: center;
        }

        #realtime-section .realtime-product-photo,
        #realtime-section .realtime-product-photo-empty {
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }

        #realtime-section .realtime-product-title {
            font-size: 11.5px;
            font-weight: 700;
            line-height: 1.25;
        }

        #realtime-section .realtime-product-meta {
            margin-top: 2px;
            line-height: 1.2;
        }

        #realtime-section .realtime-size-cell {
            min-width: 38px;
            padding: 4px 6px !important;
            border-radius: 0;
        }

        #realtime-section .realtime-size-value {
            font-size: 11px;
            font-weight: 700;
        }

        #realtime-section .realtime-size-cell.zero {
            background: #f8fafc !important;
        }

        #realtime-section .realtime-size-cell.ready {
            background: #f0fdf4 !important;
        }

        #realtime-section .realtime-category-summary {
            padding: 10px 14px 12px;
            gap: 8px;
            border-top: 1px solid #edf2f7;
            background: #ffffff;
        }

        #realtime-section .realtime-category-empty,
        #realtime-section .realtime-category-grid-empty {
            border-radius: 12px;
            font-size: 12px;
            padding: 18px 12px;
        }

    

        /* Realtime stok sticky-layer cleanup */
        #realtime-section .realtime-category-table-wrap {
            position: relative;
            isolation: isolate;
            overscroll-behavior: contain;
            border-top: 1px solid #dbe4ef;
            background: #ffffff;
        }

        #realtime-section .realtime-category-table {
            position: relative;
        }

        #realtime-section .realtime-category-table thead th,
        #realtime-section .realtime-category-table tbody td {
            background-clip: padding-box;
        }

        #realtime-section .realtime-category-table thead th:first-child,
        #realtime-section .realtime-category-table tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 9;
            min-width: 220px;
            max-width: 220px;
            background: #ffffff !important;
            box-shadow: inset -1px 0 0 #dbe4ef;
        }

        #realtime-section .realtime-category-table thead th:nth-child(2),
        #realtime-section .realtime-category-table tbody td:nth-child(2) {
            position: sticky;
            left: 220px;
            z-index: 10;
            min-width: 110px;
            max-width: 110px;
            background: #ffffff !important;
            box-shadow: inset -1px 0 0 #dbe4ef;
        }

        #realtime-section .realtime-category-table thead th:first-child,
        #realtime-section .realtime-category-table thead th:nth-child(2) {
            z-index: 14;
            background: #f8fafc !important;
        }

        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td:first-child,
        #realtime-section .realtime-category-table tbody tr:nth-child(odd) td:nth-child(2) {
            background: #fcfcfd !important;
        }

        #realtime-section .realtime-category-table tbody tr:hover td:first-child,
        #realtime-section .realtime-category-table tbody tr:hover td:nth-child(2) {
            background: #f8fbff !important;
        }

        #realtime-section .realtime-product-name-cell,
        #realtime-section .realtime-color-cell {
            overflow: hidden;
        }

        #realtime-section .realtime-color-name,
        #realtime-section .realtime-product-title,
        #realtime-section .realtime-product-meta {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #realtime-section .realtime-size-cell {
            position: relative;
            z-index: 1;
        }

        /* Fix realtime stock header contrast: Nama Produk & Warna must stay visible */
        #realtime-section .realtime-category-table thead th:first-child {
            background: linear-gradient(180deg, #dbe7f5 0%, #c9d9ee 100%) !important;
            color: #0f172a !important;
            border-right: 1px solid #b8c9e0 !important;
            box-shadow: inset -1px 0 0 #b8c9e0 !important;
        }

        #realtime-section .realtime-category-table thead th:nth-child(2) {
            background: linear-gradient(180deg, #eef4fb 0%, #dde8f6 100%) !important;
            color: #334155 !important;
            border-right: 1px solid #c6d4e7 !important;
            box-shadow: inset -1px 0 0 #c6d4e7 !important;
        }

        #realtime-section .realtime-category-table thead th:first-child,
        #realtime-section .realtime-category-table thead th:nth-child(2),
        #realtime-section .realtime-category-table tbody td:first-child,
        #realtime-section .realtime-category-table tbody td:nth-child(2) {
            background-clip: padding-box !important;
        }



        /* ===== Sidebar AI modern dark-violet refresh: visual only ===== */
        :root {
            --sidebar-ai-bg: linear-gradient(180deg, #0c1020 0%, #12172b 38%, #171a35 100%);
            --sidebar-ai-surface: rgba(255,255,255,0.05);
            --sidebar-ai-surface-strong: rgba(255,255,255,0.09);
            --sidebar-ai-border: rgba(168, 85, 247, 0.18);
            --sidebar-ai-border-soft: rgba(255,255,255,0.08);
            --sidebar-ai-text: #eef2ff;
            --sidebar-ai-text-soft: #aeb8d8;
            --sidebar-ai-text-dim: #7f8ab0;
            --sidebar-ai-glow: rgba(168, 85, 247, 0.24);
            --sidebar-ai-glow-soft: rgba(99, 102, 241, 0.16);
            --sidebar-ai-active: linear-gradient(135deg, rgba(139, 92, 246, 0.96) 0%, rgba(99, 102, 241, 0.94) 52%, rgba(45, 212, 191, 0.82) 100%);
            --sidebar-ai-active-shadow: 0 18px 30px rgba(79, 70, 229, 0.28);
        }

        #sidebar {
            background: var(--sidebar-ai-bg) !important;
            border-right: 1px solid rgba(129, 140, 248, 0.16) !important;
            box-shadow: 16px 0 42px rgba(2, 6, 23, 0.34), inset -1px 0 0 rgba(255,255,255,0.03) !important;
            overflow-x: hidden;
        }

        #sidebar::before,
        #sidebar::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        #sidebar::before {
            background:
                radial-gradient(circle at 18% 8%, rgba(168, 85, 247, 0.22), transparent 22%),
                radial-gradient(circle at 86% 16%, rgba(59, 130, 246, 0.18), transparent 20%),
                radial-gradient(circle at 50% 120%, rgba(45, 212, 191, 0.14), transparent 24%);
            opacity: 1;
        }

        #sidebar::after {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 16%),
                repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 14px);
            mix-blend-mode: screen;
            opacity: .52;
        }

        .brand-wrap {
            padding: 24px 20px 18px !important;
            border-bottom: 1px solid rgba(255,255,255,0.07) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
            backdrop-filter: blur(12px);
        }

        .brand-logo {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.2), rgba(45, 212, 191, 0.14)) !important;
            border: 1px solid rgba(196, 181, 253, 0.22) !important;
            color: #ede9fe !important;
            box-shadow: 0 16px 28px rgba(76, 29, 149, 0.30), inset 0 1px 0 rgba(255,255,255,0.12) !important;
        }

        .brand-title,
        #sidebarCompanyName {
            color: #f5f7ff !important;
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
            font-size: 1.02rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            text-shadow: 0 1px 10px rgba(99, 102, 241, 0.16);
        }

        .brand-subtitle,
        #sidebarCompanySubtitle {
            color: var(--sidebar-ai-text-soft) !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .sidebar-user-panel {
            margin: 16px 14px !important;
            padding: 15px !important;
            border-radius: 20px !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045)) !important;
            box-shadow: 0 18px 30px rgba(2, 6, 23, 0.20), inset 0 1px 0 rgba(255,255,255,0.10) !important;
            backdrop-filter: blur(16px);
        }

        .sidebar-user-name {
            color: #f8faff !important;
            font-size: 13px !important;
            font-weight: 800 !important;
        }

        .sidebar-user-meta {
            color: var(--sidebar-ai-text-soft) !important;
            font-size: 11px !important;
            font-weight: 600;
            line-height: 1.55;
        }

        .btn-theme-toggle,
        .theme-toggle-btn,
        #sidebarMinimizeToggle,
        #btnLogout {
            min-height: 42px;
            border-radius: 14px !important;
            font-weight: 700 !important;
            letter-spacing: -0.01em;
            backdrop-filter: blur(14px);
        }

        .btn-theme-toggle,
        .theme-toggle-btn {
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
            border: 1px solid rgba(196, 181, 253, 0.18) !important;
            color: #ede9fe !important;
            box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
        }

        .btn-theme-toggle:hover,
        .theme-toggle-btn:hover {
            background: linear-gradient(180deg, rgba(139, 92, 246, 0.20), rgba(99, 102, 241, 0.14)) !important;
            color: #ffffff !important;
            border-color: rgba(196, 181, 253, 0.30) !important;
        }

        .sidebar-minimize-btn,
        #sidebarMinimizeToggle {
            background: linear-gradient(180deg, rgba(79, 70, 229, 0.26), rgba(67, 56, 202, 0.18)) !important;
            border: 1px solid rgba(165, 180, 252, 0.18) !important;
            color: #e9e7ff !important;
            box-shadow: 0 12px 20px rgba(49, 46, 129, 0.24) !important;
        }

        .sidebar-minimize-btn:hover,
        #sidebarMinimizeToggle:hover {
            background: linear-gradient(180deg, rgba(99, 102, 241, 0.34), rgba(79, 70, 229, 0.26)) !important;
            color: #ffffff !important;
            border-color: rgba(196, 181, 253, 0.26) !important;
        }

        #btnLogout {
            background: linear-gradient(180deg, rgba(244, 63, 94, 0.18), rgba(190, 24, 93, 0.10)) !important;
            border: 1px solid rgba(251, 113, 133, 0.18) !important;
            color: #ffd6dd !important;
            box-shadow: 0 10px 18px rgba(136, 19, 55, 0.18) !important;
        }

        #btnLogout:hover {
            background: linear-gradient(180deg, rgba(244, 63, 94, 0.26), rgba(190, 24, 93, 0.16)) !important;
            color: #fff1f4 !important;
            border-color: rgba(251, 113, 133, 0.28) !important;
        }

        #mainNav {
            padding: 6px 10px 18px;
        }

        .nav-category {
            position: relative;
            color: var(--sidebar-ai-text-dim) !important;
            font-size: 10px !important;
            font-weight: 800 !important;
            letter-spacing: 0.18em;
            padding: 18px 14px 8px !important;
            text-transform: uppercase;
        }

        .nav-category::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(167, 139, 250, 0.28), rgba(255,255,255,0.04), transparent);
        }

        .nav-link {
            position: relative;
            color: var(--sidebar-ai-text-soft) !important;
            min-height: 50px;
            padding: 12px 14px;
            margin: 5px 6px;
            border-radius: 16px;
            gap: 12px;
            border: 1px solid transparent;
            background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
            overflow: hidden;
        }

        .nav-link::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(168, 85, 247, 0.08), rgba(99, 102, 241, 0.04), transparent 72%);
            opacity: 0;
            transition: opacity .22s ease;
            pointer-events: none;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%) scaleY(0.4);
            width: 4px;
            height: 26px;
            border-radius: 999px;
            background: linear-gradient(180deg, #c084fc, #6366f1, #2dd4bf);
            opacity: 0;
            transition: .22s ease;
            box-shadow: 0 0 14px rgba(139, 92, 246, 0.32);
        }

        .nav-link span {
            position: relative;
            z-index: 1;
            font-weight: 700 !important;
            letter-spacing: -0.01em;
        }

        .nav-link i {
            position: relative;
            z-index: 1;
            width: 34px;
            height: 34px;
            min-width: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 16px;
            color: #eef2ff !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
            border: 1px solid rgba(255,255,255,0.07);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(2, 6, 23, 0.16);
        }

        .nav-link:hover {
            color: #ffffff !important;
            border-color: rgba(196, 181, 253, 0.18) !important;
            background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(139, 92, 246, 0.08)) !important;
            box-shadow: 0 16px 26px rgba(2, 6, 23, 0.16), inset 0 1px 0 rgba(255,255,255,0.06) !important;
            transform: translateX(2px);
        }

        .nav-link:hover::before,
        .nav-link:hover::after {
            opacity: 1;
        }

        .nav-link:hover::after {
            transform: translateY(-50%) scaleY(1);
        }

        .nav-link:hover i {
            background: linear-gradient(180deg, rgba(139, 92, 246, 0.30), rgba(99, 102, 241, 0.18)) !important;
            border-color: rgba(196, 181, 253, 0.20) !important;
            color: #ffffff !important;
            box-shadow: 0 12px 22px rgba(76, 29, 149, 0.22);
        }

        .nav-link.active {
            background: var(--sidebar-ai-active) !important;
            color: white !important;
            border-color: rgba(255,255,255,0.14) !important;
            box-shadow: var(--sidebar-ai-active-shadow), inset 0 1px 0 rgba(255,255,255,0.16) !important;
            transform: translateX(3px);
        }

        .nav-link.active::before,
        .nav-link.active::after {
            opacity: 1;
        }

        .nav-link.active::after {
            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.45));
            box-shadow: 0 0 18px rgba(255,255,255,0.24);
            transform: translateY(-50%) scaleY(1);
        }

        .nav-link.active i {
            background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.14)) !important;
            border-color: rgba(255,255,255,0.20) !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 14px 24px rgba(49, 46, 129, 0.24) !important;
        }

        #sidebar::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(167, 139, 250, 0.46), rgba(99, 102, 241, 0.46)) !important;
            border-radius: 999px;
        }

        #sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.03) !important;
        }

        body.sidebar-minimized .sidebar-user-panel {
            background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)) !important;
        }

        body.sidebar-minimized .nav-link {
            margin-left: 8px;
            margin-right: 8px;
        }

        body.sidebar-minimized .nav-link i {
            width: 36px;
            height: 36px;
            min-width: 36px;
        }

        @media (max-width: 991.98px) {
            #sidebar {
                box-shadow: 18px 0 38px rgba(2, 6, 23, 0.32) !important;
            }

            .nav-link:hover,
            .nav-link.active {
                transform: none;
            }
        }


        /* === Inbon History Compact Spreadsheet Refresh === */
        .inbon-history-table {
            table-layout: fixed;
            width: 100%;
        }

        .inbon-history-table th,
        .inbon-history-table td {
            white-space: nowrap;
        }

        .inbon-history-table tbody td {
            font-size: 11px !important;
            padding: 8px 10px !important;
            line-height: 1.2;
        }

        .inbon-history-table thead th {
            font-size: 10px !important;
            padding: 9px 10px !important;
            position: sticky;
            top: 0;
            z-index: 6;
            background: #f8fafc !important;
            box-shadow: inset 0 -1px 0 #e2e8f0;
        }

        .inbon-window-pane[data-inbon-pane-content="histori"] .table-responsive {
            max-height: min(62vh, 720px);
            overflow: auto;
            border-radius: 16px;
        }

        .inbon-history-table tbody tr {
            transition: background-color .18s ease, box-shadow .18s ease;
        }

        .inbon-history-table tbody tr:hover td {
            background: rgba(241, 245, 249, 0.92);
        }

        .inbon-history-table tbody td:nth-child(1), .inbon-history-table thead th:nth-child(1) { width: 50px; text-align: center; }
        .inbon-history-table tbody td:nth-child(2), .inbon-history-table thead th:nth-child(2) { width: 132px; }
        .inbon-history-table tbody td:nth-child(3), .inbon-history-table thead th:nth-child(3) { width: 128px; }
        .inbon-history-table tbody td:nth-child(4), .inbon-history-table thead th:nth-child(4) { width: 108px; }
        .inbon-history-table tbody td:nth-child(5), .inbon-history-table thead th:nth-child(5) { width: 150px; }
        .inbon-history-table tbody td:nth-child(6), .inbon-history-table thead th:nth-child(6) { width: 82px; text-align: center; }
        .inbon-history-table tbody td:nth-child(7), .inbon-history-table thead th:nth-child(7) { width: auto; }
        .inbon-history-table tbody td:nth-child(8), .inbon-history-table thead th:nth-child(8) { width: 132px; }
        .inbon-history-table tbody td:nth-child(9), .inbon-history-table thead th:nth-child(9) { width: 92px; text-align: center; }
        .inbon-history-table tbody td:nth-child(10), .inbon-history-table thead th:nth-child(10) { width: 92px; text-align: center; }

        .inbon-history-table .history-product-title,
        .inbon-history-table .history-id-badge,
        .inbon-history-table .inbon-history-inline-text,
        .inbon-history-table .inbon-history-nominal,
        .inbon-history-table .inbon-history-qty,
        .inbon-history-table .inbon-history-date {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .inbon-history-table .history-product-title {
            font-size: 11px;
            font-weight: 700;
            line-height: 1.15;
            margin: 0;
        }

        .inbon-history-table .history-id-badge {
            font-size: 10px;
            font-weight: 800;
            color: #334155;
            letter-spacing: 0.02em;
        }

        .inbon-history-table .inbon-history-date,
        .inbon-history-table .inbon-history-inline-text,
        .inbon-history-table .inbon-history-qty {
            color: #475569;
            font-weight: 600;
        }

        .inbon-history-table .inbon-history-nominal {
            font-size: 11px;
            font-weight: 800;
        }

        .inbon-history-table .history-type-badge {
            min-height: 28px;
            padding: 0 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.05em;
            justify-content: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 14px rgba(15, 23, 42, 0.05);
        }

        .inbon-history-table .history-type-neutral {
            background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
            color: #1d4ed8;
            border-color: #93c5fd;
        }

        .inbon-history-table .history-type-in {
            background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
            color: #047857;
            border-color: #86efac;
        }

        .inbon-history-table .history-type-out {
            background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
            color: #c2410c;
            border-color: #fdba74;
        }

        .inbon-history-table .inbon-collapsible-trigger {
            min-width: 74px;
            min-height: 30px;
            padding: 0 10px;
            font-size: 10px;
            border-radius: 10px;
            gap: 6px;
        }

        .inbon-history-table .history-action-stack {
            gap: 6px;
            justify-content: center;
            flex-wrap: nowrap;
            min-width: 108px;
        }

        .inbon-history-table .history-action-stack .btn {
            min-width: 30px;
            width: 30px;
            height: 30px;
            padding: 0;
            border-radius: 10px;
        }

        .dropship-history-wrap {
            max-height: min(62vh, 720px);
            overflow: auto;
            border-radius: 16px;
        }

        .dropship-history-table {
            table-layout: fixed;
            width: 100%;
        }

        .dropship-history-table th,
        .dropship-history-table td {
            white-space: nowrap;
        }

        .dropship-history-table tbody td {
            font-size: 11px !important;
            padding: 8px 10px !important;
            line-height: 1.2;
            vertical-align: middle;
        }

        .dropship-history-table thead th {
            font-size: 10px !important;
            padding: 9px 10px !important;
            position: sticky;
            top: 0;
            z-index: 6;
            background: #f8fafc !important;
            box-shadow: inset 0 -1px 0 #e2e8f0;
        }

        .dropship-history-table tbody tr {
            transition: background-color .18s ease, box-shadow .18s ease;
        }

        .dropship-history-table tbody tr:hover td {
            background: rgba(241, 245, 249, 0.92);
        }

        .dropship-history-table tbody tr:nth-child(even) td {
            background: rgba(248, 250, 252, 0.86);
        }

        .dropship-history-table tbody td:nth-child(1), .dropship-history-table thead th:nth-child(1) { width: 44px; text-align: center; }
        .dropship-history-table tbody td:nth-child(2), .dropship-history-table thead th:nth-child(2) { width: 114px; }
        .dropship-history-table tbody td:nth-child(3), .dropship-history-table thead th:nth-child(3) { width: 122px; }
        .dropship-history-table tbody td:nth-child(4), .dropship-history-table thead th:nth-child(4) { width: 148px; }
        .dropship-history-table tbody td:nth-child(5), .dropship-history-table thead th:nth-child(5) { width: 122px; }
        .dropship-history-table tbody td:nth-child(6), .dropship-history-table thead th:nth-child(6) { width: 122px; }
        .dropship-history-table tbody td:nth-child(7), .dropship-history-table thead th:nth-child(7) { width: auto; }
        .dropship-history-table tbody td:nth-child(8), .dropship-history-table thead th:nth-child(8) { width: 118px; }
        .dropship-history-table tbody td:nth-child(9), .dropship-history-table thead th:nth-child(9) { width: 86px; text-align: center; }
        .dropship-history-table tbody td:nth-child(10), .dropship-history-table thead th:nth-child(10) { width: 118px; }
        .dropship-history-table tbody td:nth-child(11), .dropship-history-table thead th:nth-child(11) { width: 98px; text-align: center; }

        .dropship-history-table .history-id-badge,
        .dropship-history-table .inbon-history-date,
        .dropship-history-table .inbon-history-inline-text,
        .dropship-history-table .inbon-history-nominal,
        .dropship-history-table .history-product-title {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dropship-history-table .history-product-title {
            font-size: 11px;
            font-weight: 700;
            line-height: 1.15;
            margin: 0;
        }

        .dropship-history-table .history-id-badge {
            font-size: 10px;
            font-weight: 800;
            color: #334155;
            letter-spacing: 0.02em;
        }

        .dropship-history-table .inbon-history-date,
        .dropship-history-table .inbon-history-inline-text {
            color: #475569;
            font-weight: 600;
        }

        .dropship-history-table .inbon-history-nominal {
            font-size: 11px;
            font-weight: 800;
        }

        .dropship-history-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .dropship-history-toolbar .finance-summary-chip {
            min-height: 34px;
        }

        .dropship-history-bulk-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .dropship-history-check {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .dropship-history-table .history-action-stack {
            gap: 6px;
            justify-content: center;
        }

        .dropship-history-table .history-action-stack .btn {
            min-width: 30px;
            width: 30px;
            height: 30px;
            padding: 0;
            border-radius: 10px;
        }

        html[data-theme="dark"] .dropship-history-table thead th,
        body[data-theme="dark"] .dropship-history-table thead th {
            background: #111827 !important;
            box-shadow: inset 0 -1px 0 rgba(51, 65, 85, 0.92);
            color: #e2e8f0;
        }

        html[data-theme="dark"] .dropship-history-table tbody td,
        body[data-theme="dark"] .dropship-history-table tbody td {
            border-color: rgba(51, 65, 85, 0.72);
        }

        html[data-theme="dark"] .dropship-history-table tbody tr:nth-child(even) td,
        body[data-theme="dark"] .dropship-history-table tbody tr:nth-child(even) td {
            background: rgba(17, 24, 39, 0.88);
        }

        html[data-theme="dark"] .dropship-history-table tbody tr:hover td,
        body[data-theme="dark"] .dropship-history-table tbody tr:hover td {
            background: rgba(30, 41, 59, 0.96);
        }

        html[data-theme="dark"] .dropship-history-table .history-id-badge,
        html[data-theme="dark"] .dropship-history-table .inbon-history-date,
        html[data-theme="dark"] .dropship-history-table .inbon-history-inline-text,
        body[data-theme="dark"] .dropship-history-table .history-id-badge,
        body[data-theme="dark"] .dropship-history-table .inbon-history-date,
        body[data-theme="dark"] .dropship-history-table .inbon-history-inline-text {
            color: #cbd5e1;
        }

        html[data-theme="dark"] .inbon-history-table .history-id-badge,
        body[data-theme="dark"] .inbon-history-table .history-id-badge,
        html[data-theme="dark"] .inbon-history-table .inbon-history-date,
        body[data-theme="dark"] .inbon-history-table .inbon-history-date,
        html[data-theme="dark"] .inbon-history-table .inbon-history-inline-text,
        body[data-theme="dark"] .inbon-history-table .inbon-history-inline-text,
        html[data-theme="dark"] .inbon-history-table .inbon-history-qty,
        body[data-theme="dark"] .inbon-history-table .inbon-history-qty {
            color: #cbd5e1;
        }


/* === INBON DASHBOARD FIX === */
.inbon-summary-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
.inbon-box{
    border-radius:14px;
    padding:14px 16px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:90px;
}
.inbon-box-title{
    font-size:11px;
    font-weight:700;
    color:#64748b;
    margin-bottom:6px;
}
.inbon-box-value{
    font-size:18px;
    font-weight:800;
    color:#0f172a;
}
.inbon-accent-blue{border-left:4px solid #2563eb;}
.inbon-accent-green{border-left:4px solid #16a34a;}
.inbon-accent-red{border-left:4px solid #dc2626;}
.inbon-accent-amber{border-left:4px solid #d97706;}
.inbon-accent-slate{border-left:4px solid #475569;}


        #out-section .out-shopee-upload-card {
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
            border-radius: 20px;
        }
        #out-section .out-shopee-preview-shell {
            border: 1px solid #dbeafe;
            border-radius: 22px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
            overflow: hidden;
        }
        #out-section .out-shopee-preview-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            padding: 16px 18px;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
        }
        #out-section .out-shopee-preview-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 900;
            color: #0f172a;
        }
        #out-section .out-shopee-preview-title i {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #dbeafe;
            color: #1d4ed8;
        }
        #out-section .out-shopee-preview-subtitle {
            margin-top: 5px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
        }
        #out-section .out-shopee-preview-badges {
            display: grid;
            grid-template-columns: repeat(3, minmax(120px, 1fr));
            gap: 8px;
            min-width: min(440px, 100%);
        }
        #out-section .out-shopee-preview-badge {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            padding: 10px 12px;
            min-height: 62px;
        }
        #out-section .out-shopee-preview-badge span {
            display: block;
            font-size: 10px;
            font-weight: 900;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .06em;
        }
        #out-section .out-shopee-preview-badge strong {
            display: block;
            margin-top: 5px;
            font-size: 18px;
            font-weight: 900;
            color: #0f172a;
        }
        #out-section .out-shopee-preview-badge.ok { border-color: #bbf7d0; background: #f0fdf4; }
        #out-section .out-shopee-preview-badge.warn { border-color: #fde68a; background: #fffbeb; }
        #out-section .out-shopee-preview-badge.bad { border-color: #fecaca; background: #fef2f2; }
        #out-section .out-shopee-preview-scroll {
            max-height: min(72vh, 720px);
            overflow: auto;
            scrollbar-gutter: stable both-edges;
        }
        #out-section .out-shopee-preview-table {
            min-width: 2100px;
            border-collapse: separate;
            border-spacing: 0;
            margin: 0;
        }
        #out-section .out-shopee-preview-table thead th {
            position: sticky;
            top: 0;
            z-index: 4;
            background: #f8fafc;
            color: #334155;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.055em;
            white-space: nowrap;
            border-bottom: 1px solid #dbeafe;
            padding: 10px 12px;
            vertical-align: middle;
        }
        #out-section .out-shopee-preview-table tbody td {
            font-size: 12px;
            vertical-align: top;
            border-color: #eef2f7;
            padding: 10px 12px;
            background: #ffffff;
        }
        #out-section .out-shopee-preview-table tbody tr:nth-child(even) td { background: #fbfdff; }
        #out-section .out-shopee-preview-table tbody tr:hover td { background: #eff6ff; }
        #out-section .out-shopee-sticky-col {
            position: sticky;
            left: 0;
            z-index: 3;
            box-shadow: 8px 0 18px rgba(15, 23, 42, 0.04);
        }
        #out-section .out-shopee-preview-table thead .out-shopee-sticky-col { z-index: 6; background: #eff6ff; }
        #out-section .out-shopee-order-cell { min-width: 190px; max-width: 220px; }
        #out-section .out-shopee-product-cell { min-width: 320px; max-width: 420px; }
        #out-section .out-shopee-master-cell { min-width: 340px; max-width: 430px; }
        #out-section .out-shopee-cell-main { font-weight: 800; color: #0f172a; line-height: 1.35; }
        #out-section .out-shopee-cell-sub { margin-top: 4px; color: #64748b; font-size: 11px; line-height: 1.35; }
        #out-section .out-shopee-money { font-weight: 800; color: #0f172a; white-space: nowrap; }
        #out-section .out-shopee-muted-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border-radius: 999px;
            padding: 4px 8px;
            background: #f1f5f9;
            color: #475569;
            font-size: 10px;
            font-weight: 800;
            white-space: nowrap;
        }
        #out-section .out-shopee-status-pill {
            display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 10px;
            font-size: 11px; font-weight: 900; border: 1px solid transparent; white-space: nowrap;
        }
        #out-section .out-shopee-upload-note { font-size: 12px; color: #64748b; line-height: 1.6; }
        #out-section .out-shopee-status-pill {
            display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px;
            font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
        }
        #out-section .out-shopee-status-pill.match { background: rgba(5,150,105,0.1); color: #047857; border-color: rgba(16,185,129,0.22); }
        #out-section .out-shopee-status-pill.pending { background: rgba(217,119,6,0.12); color: #b45309; border-color: rgba(245,158,11,0.22); }
        #out-section .out-shopee-status-pill.failed { background: rgba(220,38,38,0.1); color: #b91c1c; border-color: rgba(248,113,113,0.2); }

    
        /* HISTORY SPREADSHEET OVERRIDE */
        #history-section .history-overview-card {
            border-radius: 20px !important;
        }

        #history-section .history-table-card {
            border-radius: 20px !important;
        }

        #history-section .history-table-head {
            padding: 14px 16px 12px;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        #history-section .history-table-subtitle {
            font-size: 11px;
            color: #64748b;
            margin-top: 3px;
        }

        #history-section .history-table-scroll {
            max-height: min(68vh, 620px);
            overflow-x: auto;
            overflow-y: auto;
            border-top: 1px solid rgba(226, 232, 240, 0.9);
            scrollbar-gutter: stable both-edges;
        }

        #history-section .history-table-scroll::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        #history-section .history-table-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 999px;
        }

        #history-section .history-table-scroll::-webkit-scrollbar-track {
            background: #f8fafc;
        }

        #history-section .history-sheet-table {
            table-layout: auto;
            min-width: 1720px;
            width: max-content;
            border-collapse: separate;
            border-spacing: 0;
        }

        #history-section .history-sheet-table thead th {
            position: sticky;
            top: 0;
            z-index: 6;
            vertical-align: middle;
            white-space: nowrap !important;
            line-height: 1.1;
            padding: 11px 12px !important;
            font-size: 10px !important;
            letter-spacing: 0.04em !important;
            background: #f8fafc;
            border-bottom: 1px solid #dbe3ee;
        }

        #history-section .history-sheet-table tbody td {
            padding: 8px 12px !important;
            font-size: 11.5px !important;
            line-height: 1.2;
            white-space: nowrap;
            vertical-align: middle !important;
            border-bottom: 1px solid #eef2f7;
        }

        #history-section .history-sheet-table tbody td.text-wrap {
            white-space: normal;
        }

        #history-section .history-sheet-table tbody tr:hover td {
            background: #f8fbff !important;
        }

        #history-section .history-sheet-table .history-id-badge,
        #history-section .history-sheet-table .history-qty-badge,
        #history-section .history-sheet-table .history-type-badge,
        #history-section .history-sheet-table .history-user-badge,
        #history-section .history-sheet-table .history-cell-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 8px;
            border-radius: 999px;
            font-size: 11px;
            line-height: 1.1;
            vertical-align: middle;
        }

        #history-section .history-sheet-table .history-id-badge {
            background: #eef2ff;
            color: #3730a3;
            font-weight: 800;
        }

        #history-section .history-sheet-table .history-qty-badge {
            background: #ecfdf3;
            color: #15803d;
            font-weight: 800;
        }

        #history-section .history-sheet-table .history-user-badge,
        #history-section .history-sheet-table .history-cell-chip {
            background: #f8fafc;
            color: #334155;
            border: 1px solid #e2e8f0;
            font-weight: 700;
        }

        #history-section .history-sheet-table .history-product-line,
        #history-section .history-sheet-table .history-variant-line,
        #history-section .history-sheet-table .history-time-line {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }

        #history-section .history-sheet-table .history-product-line {
            font-weight: 700;
            color: #0f172a;
            min-width: 220px;
        }

        #history-section .history-sheet-table .history-variant-line {
            min-width: 110px;
        }

        #history-section .history-sheet-table .history-time-line {
            min-width: 132px;
            color: #334155;
        }

        #history-section .history-sheet-table .history-action-stack {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }

        #history-section .history-sheet-table .history-action-stack .btn {
            width: 30px;
            height: 30px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        html[data-theme="dark"] #history-section .history-sheet-table tbody td,
        body[data-theme="dark"] #history-section .history-sheet-table tbody td {
            background: #0f172a !important;
        }

        html[data-theme="dark"] #history-section .history-sheet-table tbody tr:hover td,
        body[data-theme="dark"] #history-section .history-sheet-table tbody tr:hover td {
            background: #132033 !important;
        }

        html[data-theme="dark"] #history-section .history-sheet-table .history-user-badge,
        html[data-theme="dark"] #history-section .history-sheet-table .history-cell-chip,
        body[data-theme="dark"] #history-section .history-sheet-table .history-user-badge,
        body[data-theme="dark"] #history-section .history-sheet-table .history-cell-chip {
            background: #111827;
            border-color: #334155;
            color: #e2e8f0;
        }

        /* HISTORY FIX: kolom baku sticky tanpa shadow */
        #history-section .history-sheet-table {
            --history-sticky-check-left: 0px;
            --history-sticky-date-left: 44px;
            --history-sticky-type-left: 154px;
            --history-sticky-product-left: 286px;
            --history-sticky-variant-left: 526px;
        }

        #history-section .history-sheet-table th.history-sticky-col,
        #history-section .history-sheet-table td.history-sticky-col {
            position: sticky;
            background: #ffffff;
            box-shadow: none !important;
            background-clip: padding-box;
        }

        #history-section .history-sheet-table thead th.history-sticky-col {
            background: #f8fafc !important;
            z-index: 18;
        }

        #history-section .history-sheet-table tbody td.history-sticky-col {
            z-index: 14;
        }

        #history-section .history-sheet-table .history-sticky-check {
            left: var(--history-sticky-check-left);
            min-width: 44px;
            width: 44px;
            max-width: 44px;
            text-align: center;
        }

        #history-section .history-sheet-table .history-sticky-date {
            left: var(--history-sticky-date-left);
            min-width: 110px;
            width: 110px;
            max-width: 110px;
        }

        #history-section .history-sheet-table .history-sticky-product {
            left: var(--history-sticky-product-left);
            min-width: 240px;
            width: 240px;
            max-width: 240px;
        }

        #history-section .history-sheet-table .history-sticky-type {
            left: var(--history-sticky-type-left);
            min-width: 132px;
            width: 132px;
            max-width: 132px;
        }

        #history-section .history-sheet-table .history-sticky-variant {
            left: var(--history-sticky-variant-left);
            min-width: 150px;
            width: 150px;
            max-width: 150px;
            border-right: 1px solid #dbe3ee !important;
        }

        #history-section .history-sheet-table .history-date-line {
            display: inline-flex;
            align-items: center;
            font-size: 12px;
            font-weight: 800;
            color: #0f172a;
            white-space: nowrap;
        }

        #history-section .history-sheet-table tbody tr:hover td.history-sticky-col {
            background: #f8fbff !important;
        }

        html[data-theme="dark"] #history-section .history-sheet-table th.history-sticky-col,
        body[data-theme="dark"] #history-section .history-sheet-table th.history-sticky-col {
            background: #111827 !important;
        }

        html[data-theme="dark"] #history-section .history-sheet-table td.history-sticky-col,
        body[data-theme="dark"] #history-section .history-sheet-table td.history-sticky-col {
            background: #0f172a !important;
        }

        html[data-theme="dark"] #history-section .history-sheet-table tbody tr:hover td.history-sticky-col,
        body[data-theme="dark"] #history-section .history-sheet-table tbody tr:hover td.history-sticky-col {
            background: #132033 !important;
        }


        /* Product database horizontal scroll stability patch */
        .product-table-wrap {
            overflow: visible !important;
            background: #ffffff;
            border: 1px solid #dbe3ee;
            border-radius: 12px;
        }

        .product-table-wrap .product-db-table-wrap {
            overflow-x: auto !important;
            overflow-y: visible !important;
            max-width: 100% !important;
            position: relative !important;
            scrollbar-gutter: stable;
            -webkit-overflow-scrolling: touch;
            border-radius: 12px !important;
            background: #ffffff;
        }

        .product-db-table-wrap::-webkit-scrollbar { height: 10px; }
        .product-db-table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
        .product-db-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid #f1f5f9; }
        .product-db-table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .product-db-table {
            table-layout: fixed !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
            width: 1760px !important;
            min-width: 1760px !important;
            max-width: none !important;
            margin-bottom: 0 !important;
        }

        .product-db-table th,
        .product-db-table td { box-sizing: border-box !important; }

        .product-db-table thead th {
            position: sticky;
            top: 0;
            background: #f8fafc !important;
            background-clip: padding-box;
            font-size: 10px !important;
            line-height: 1.1 !important;
            padding: 7px 8px !important;
            border-bottom: 1px solid #dbe3ee !important;
            white-space: nowrap !important;
            height: 34px;
        }

        .product-db-table tbody td {
            background: #ffffff !important;
            background-clip: padding-box;
            font-size: 11px !important;
            line-height: 1.15 !important;
            padding: 5px 8px !important;
            height: 42px;
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle !important;
        }

        .product-db-table tbody tr:nth-child(even) td:not(.product-db-sticky-check):not(.product-db-sticky-img):not(.product-db-sticky-name) { background: #fbfcfe !important; }
        .product-db-table tbody tr:hover td:not(.product-db-sticky-check):not(.product-db-sticky-img):not(.product-db-sticky-name) { background: #f3f7fd !important; }

        .product-db-table .product-db-sticky-check,
        .product-db-table .product-db-sticky-img,
        .product-db-table .product-db-sticky-name {
            position: sticky !important;
            background: #ffffff !important;
            background-clip: padding-box !important;
            overflow: hidden !important;
        }

        .product-db-table thead .product-db-sticky-check,
        .product-db-table thead .product-db-sticky-img,
        .product-db-table thead .product-db-sticky-name { background: #f8fafc !important; }

        .product-db-table .product-db-sticky-check {
            left: 0 !important;
            width: 44px !important;
            min-width: 44px !important;
            max-width: 44px !important;
            z-index: 8 !important;
            text-align: center !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        .product-db-table .product-db-sticky-img {
            left: 44px !important;
            width: 64px !important;
            min-width: 64px !important;
            max-width: 64px !important;
            z-index: 7 !important;
            text-align: center !important;
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        .product-db-table .product-db-sticky-name {
            left: 108px !important;
            width: 240px !important;
            min-width: 240px !important;
            max-width: 240px !important;
            z-index: 6 !important;
            box-shadow: 8px 0 14px -13px rgba(15, 23, 42, 0.7);
        }

        .product-db-table thead .product-db-sticky-check { z-index: 18 !important; }
        .product-db-table thead .product-db-sticky-img { z-index: 17 !important; }
        .product-db-table thead .product-db-sticky-name { z-index: 16 !important; }

        .product-db-table tbody tr:nth-child(even) .product-db-sticky-check,
        .product-db-table tbody tr:nth-child(even) .product-db-sticky-img,
        .product-db-table tbody tr:nth-child(even) .product-db-sticky-name,
        .product-db-table tbody tr:hover .product-db-sticky-check,
        .product-db-table tbody tr:hover .product-db-sticky-img,
        .product-db-table tbody tr:hover .product-db-sticky-name { background: #ffffff !important; }

        .product-db-table .product-checkbox { transform: none !important; margin: 0 !important; }

        .product-db-table .product-db-photo,
        .product-db-table .product-db-photo-empty {
            width: 36px !important;
            height: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
            border-radius: 8px !important;
        }

        .product-db-table .product-db-cell {
            min-width: 0 !important;
            width: 100% !important;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .product-db-table .product-db-name {
            min-width: 0 !important;
            max-width: 188px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .product-db-table .product-db-row-status { flex: 0 0 auto; }
        .product-db-table th:nth-child(4), .product-db-table td:nth-child(4) { width: 150px !important; }
        .product-db-table th:nth-child(5), .product-db-table td:nth-child(5) { width: 140px !important; }
        .product-db-table th:nth-child(6), .product-db-table td:nth-child(6) { width: 86px !important; }
        .product-db-table th:nth-child(7), .product-db-table td:nth-child(7),
        .product-db-table th:nth-child(8), .product-db-table td:nth-child(8),
        .product-db-table th:nth-child(9), .product-db-table td:nth-child(9) { width: 150px !important; }
        .product-db-table th:nth-child(10), .product-db-table td:nth-child(10) { width: 132px !important; }
        .product-db-table th:nth-child(11), .product-db-table td:nth-child(11) { width: 126px !important; }

        .product-multi-hpp-popover {
            position: fixed !important;
            z-index: 9000 !important;
            max-height: 260px !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
        }


        /* INBON edit UX layering: feedback modal/toast always above edit modal */
        .inbon-feedback-modal {
            z-index: 4055 !important;
        }

        .inbon-feedback-backdrop-top {
            z-index: 4050 !important;
        }

        .notif-toast-stack,
        #notificationToastStack,
        .toast-container,
        .alert-floating,
        .custom-alert {
            z-index: 4100 !important;
        }

        /* TBH OS Stok Out Feedback Popup Upgrade */
        .out-feedback-modal { z-index: 21000; }
        .out-feedback-dialog { max-width: 455px; }
        .out-feedback-content { position: relative; overflow: hidden; border: 1px solid rgba(191, 219, 254, 0.96); border-radius: 26px; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 56%, #eff6ff 100%); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22); animation: outFeedbackPop 0.28s cubic-bezier(.2,.85,.28,1.18); }
        .out-feedback-content[data-variant="success"] { border-color: rgba(187,247,208,0.98); background: linear-gradient(145deg, #ffffff 0%, #f7fef9 58%, #ecfdf5 100%); }
        .out-feedback-content[data-variant="danger"] { border-color: rgba(254,202,202,0.98); background: linear-gradient(145deg, #ffffff 0%, #fff7f7 58%, #fef2f2 100%); }
        .out-feedback-content[data-variant="warning"] { border-color: rgba(253,230,138,0.98); background: linear-gradient(145deg, #ffffff 0%, #fffdf5 58%, #fffbeb 100%); }
        .out-feedback-topline { height: 5px; background: linear-gradient(90deg, var(--primary-color), #60a5fa, #22c55e); }
        .out-feedback-content[data-variant="success"] .out-feedback-topline { background: linear-gradient(90deg, #16a34a, #22c55e, #86efac); }
        .out-feedback-content[data-variant="danger"] .out-feedback-topline { background: linear-gradient(90deg, #dc2626, #ef4444, #fb7185); }
        .out-feedback-content[data-variant="warning"] .out-feedback-topline { background: linear-gradient(90deg, #d97706, #f59e0b, #facc15); }
        .out-feedback-x { position: absolute; top: 14px; right: 14px; z-index: 5; width: 34px; height: 34px; border: 1px solid #e2e8f0; border-radius: 13px; background: rgba(255,255,255,0.86); color: #64748b; display: inline-flex; align-items: center; justify-content: center; transition: all .18s ease; }
        .out-feedback-x:hover { color: #0f172a; background: #fff; transform: rotate(90deg); }
        .out-feedback-body { position: relative; text-align: center; padding: 34px 28px 14px; }
        .out-feedback-icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 34px; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; box-shadow: 0 18px 36px rgba(37,99,235,.16); animation: outIconPulse 1.75s ease-in-out infinite; }
        .out-feedback-icon.success { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; box-shadow: 0 18px 36px rgba(22,163,74,.14); }
        .out-feedback-icon.danger { color: #dc2626; background: #fef2f2; border-color: #fecaca; box-shadow: 0 18px 36px rgba(220,38,38,.13); }
        .out-feedback-icon.warning { color: #d97706; background: #fffbeb; border-color: #fde68a; box-shadow: 0 18px 36px rgba(217,119,6,.13); }
        .out-feedback-icon.info { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
        .out-feedback-kicker { font-size: 10px; font-weight: 900; letter-spacing: .16em; color: #64748b; text-transform: uppercase; margin-bottom: 7px; }
        .out-feedback-title { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.03em; color: #0f172a; }
        .out-feedback-message { margin: 10px auto 0; max-width: 350px; color: #475569; font-size: 13px; line-height: 1.65; font-weight: 600; }
        .out-feedback-detail { margin: 14px auto 0; padding: 12px 14px; border-radius: 16px; background: #f8fafc; color: #475569; font-size: 12px; line-height: 1.55; text-align: left; border: 1px solid #e2e8f0; }
        .out-feedback-list { margin-top: 15px; display: grid; gap: 8px; text-align: left; }
        .out-feedback-list-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 14px; background: rgba(255,255,255,.78); color: #334155; font-size: 12px; font-weight: 700; line-height: 1.45; }
        .out-feedback-list-item i { color: #2563eb; margin-top: 1px; }
        .out-feedback-footer { border: 0; justify-content: center; padding: 8px 24px 26px; gap: 10px; }
        .out-feedback-primary, .out-feedback-secondary { min-width: 132px; min-height: 42px; border-radius: 14px !important; font-size: 13px; font-weight: 900; box-shadow: none !important; }
        .out-feedback-primary { box-shadow: 0 14px 28px rgba(37,99,235,.17) !important; }
        .out-feedback-orbit { pointer-events: none; position: absolute; inset: 0; overflow: hidden; opacity: .62; }
        .out-feedback-orbit span { position: absolute; width: 150px; height: 150px; border-radius: 999px; border: 1px solid rgba(96,165,250,.18); animation: outOrbitFloat 5s ease-in-out infinite; }
        .out-feedback-orbit span:nth-child(1) { top: -78px; left: -54px; }
        .out-feedback-orbit span:nth-child(2) { right: -70px; top: 38px; animation-delay: .55s; }
        .out-feedback-orbit span:nth-child(3) { bottom: -90px; left: 28%; animation-delay: 1.1s; }
        @keyframes outFeedbackPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes outIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
        @keyframes outOrbitFloat { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10px,-8px,0) scale(1.06); } }
        @media (max-width: 575.98px) { .out-feedback-dialog { max-width: calc(100vw - 26px); margin-left: auto; margin-right: auto; } .out-feedback-body { padding: 30px 20px 12px; } .out-feedback-footer { padding-left: 18px; padding-right: 18px; } .out-feedback-primary, .out-feedback-secondary { width: 100%; } }
    

        /* Histori transaksi: filter ringkas berbasis no pesanan/resi + tombol type */
        #history-section .history-overview-card {
            padding: 16px !important;
            margin-bottom: 14px !important;
        }

        #history-section .history-hero {
            display: none !important;
        }

        #history-section .history-filter-slim {
            display: block;
        }

        #history-section .history-filter-slim .history-filter-item {
            min-width: 0;
        }

        #history-section .history-type-nav-item {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            padding: 10px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        }

        #history-section .history-filter-apply-btn,
        #history-section .history-filter-reset-btn {
            width: 38px;
            min-width: 38px;
            height: 36px;
            padding: 0;
            font-size: 12px;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #history-section .history-type-filter-nav {
            display: flex;
            align-items: center;
            gap: 7px;
            overflow-x: auto;
            overflow-y: visible;
            padding-bottom: 6px;
            min-height: 44px;
            position: relative;
            z-index: 30;
        }

        #history-section .history-type-filter-nav.history-date-open {
            overflow: visible !important;
            z-index: 6200;
        }

        #history-section .history-nav-search-control {
            position: relative;
            flex: 0 0 190px;
            max-width: 190px;
            min-width: 170px;
        }

        #history-section .history-nav-search-control i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            z-index: 2;
            pointer-events: none;
            font-size: 12px;
        }

        #history-section .history-nav-search-control .form-control {
            min-height: 36px;
            height: 36px;
            padding-left: 34px;
            padding-right: 10px;
            border-radius: 999px !important;
            font-size: 11px;
            font-weight: 700;
            background: #f8fafc;
        }

        #history-section .history-nav-supplier-control {
            position: relative;
            flex: 0 0 180px;
            max-width: 180px;
            min-width: 160px;
        }

        #history-section .history-nav-supplier-control i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            z-index: 2;
            pointer-events: none;
            font-size: 12px;
        }

        #history-section .history-nav-supplier-control .form-select {
            min-height: 36px;
            height: 36px;
            padding-left: 34px;
            padding-right: 28px;
            border-radius: 999px !important;
            font-size: 11px;
            font-weight: 700;
            background-color: #f8fafc;
            border-color: #e2e8f0;
        }

        #history-section .history-nav-supplier-control.history-filter-hidden {
            display: none;
        }

        #history-section .history-type-filter-btn {
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            color: #475569;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            transition: all 0.18s ease;
        }

        #history-section .history-type-filter-btn:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        #history-section .history-type-filter-btn.active {
            background: linear-gradient(135deg, var(--primary-color), #3b82f6);
            border-color: var(--primary-color);
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
        }


        /* Histori transaksi: filter tanggal range satu tempat */
        #history-section .history-nav-date-control { position: relative; flex: 0 0 182px; max-width: 182px; min-width: 170px; z-index: 6201; }
        #history-section .history-date-toggle { width: 100%; height: 36px; border: 1px solid #dbeafe; border-radius: 999px; background: linear-gradient(135deg, #ffffff, #eff6ff); color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; font-size: 11px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .18s ease; }
        #history-section .history-date-toggle:hover, #history-section .history-date-toggle.active { border-color: #93c5fd; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12); }
        #history-section .history-date-popover { display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 6300; width: min(360px, calc(100vw - 28px)); padding: 14px; border: 1px solid #dbeafe; border-radius: 18px; background: #ffffff; box-shadow: 0 22px 52px rgba(15, 23, 42, 0.18); }
        #history-section .history-date-popover.show { display: block; animation: fadeIn .18s ease; }
        #history-section .history-date-popover-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
        #history-section .history-date-popover-title { font-size: 13px; font-weight: 900; color: #0f172a; }
        #history-section .history-date-popover-subtitle { margin-top: 3px; font-size: 11px; font-weight: 700; color: #64748b; line-height: 1.45; }
        #history-section .history-date-close { width: 30px; height: 30px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; color: #64748b; display: inline-flex; align-items: center; justify-content: center; }
        #history-section .history-date-range-grid { display: none; }
        #history-section .history-range-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
        #history-section .history-range-pill { min-height: 40px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; padding: 7px 10px; display: grid; gap: 2px; }
        #history-section .history-range-pill.active { border-color: #93c5fd; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
        #history-section .history-range-label { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
        #history-section .history-range-value { font-size: 12px; font-weight: 900; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #history-section .history-range-arrow { color: #94a3b8; font-size: 12px; }
        #history-section .history-calendar-card { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; padding: 10px; margin-bottom: 12px; }
        #history-section .history-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        #history-section .history-calendar-title { font-size: 13px; font-weight: 900; color: #0f172a; text-align: center; flex: 1; }
        #history-section .history-calendar-nav { width: 30px; height: 30px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #475569; display: inline-flex; align-items: center; justify-content: center; }
        #history-section .history-calendar-nav:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
        #history-section .history-calendar-weekdays, #history-section .history-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        #history-section .history-calendar-weekdays span { text-align: center; font-size: 9px; font-weight: 900; color: #94a3b8; padding: 4px 0; }
        #history-section .history-calendar-day { height: 34px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #334155; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; transition: all .14s ease; }
        #history-section .history-calendar-day:not(.empty):hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
        #history-section .history-calendar-day.empty { cursor: default; opacity: 0; }
        #history-section .history-calendar-day.in-range { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
        #history-section .history-calendar-day.selected-start, #history-section .history-calendar-day.selected-end { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; border-color: #2563eb; box-shadow: 0 8px 18px rgba(37,99,235,.18); }
        #history-section .history-calendar-hint { font-size: 10px; font-weight: 800; color: #64748b; margin: -3px 0 10px; }
        #history-section .history-date-shortcuts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
        #history-section .history-date-shortcuts button { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 900; }
        #history-section .history-date-shortcuts button:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
        #history-section .history-date-actions { display: flex; justify-content: flex-end; gap: 8px; }
        @media (max-width: 575.98px) { #history-section .history-date-range-grid { grid-template-columns: 1fr; } #history-section .history-date-popover { left: 0; right: auto; } }

        
        /* Histori transaksi: override filter tanggal satu popup modern */
        #history-section .history-nav-date-control { position: relative; flex: 0 0 206px !important; max-width: 206px !important; min-width: 178px !important; z-index: 6201; }
        #history-section .history-date-toggle { width: 100%; height: 38px !important; border: 1px solid #bfdbfe !important; border-radius: 999px; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 55%, #dbeafe 100%) !important; color: #1e3a8a; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; font-size: 11px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .18s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
        #history-section .history-date-toggle:hover, #history-section .history-date-toggle.active { border-color: #60a5fa !important; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255,255,255,.9) !important; transform: translateY(-1px); }
        #history-section .history-date-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        #history-section .history-date-popover { width: min(390px, calc(100vw - 28px)) !important; padding: 0 !important; border: 1px solid rgba(191, 219, 254, .95) !important; border-radius: 22px !important; background: #ffffff !important; box-shadow: 0 26px 70px rgba(15, 23, 42, 0.20) !important; overflow: hidden; }
        #history-section .history-date-popover-head { padding: 16px 16px 13px !important; margin-bottom: 0 !important; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 78%); border-bottom: 1px solid #e0ecff; }
        #history-section .history-date-popover-title { font-size: 14px !important; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
        #history-section .history-date-popover-subtitle { margin-top: 4px; font-size: 11px; font-weight: 700; color: #64748b; line-height: 1.45; }
        #history-section .history-date-close { width: 32px !important; height: 32px !important; border: 1px solid #dbeafe !important; border-radius: 12px !important; background: #ffffff !important; transition: all .16s ease; }
        #history-section .history-date-close:hover { background: #eff6ff !important; color: #1d4ed8; border-color: #bfdbfe !important; }
        #history-section .history-range-summary { display: block !important; margin: 14px 14px 12px !important; }
        #history-section .history-range-single { border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); padding: 12px; display: grid; gap: 10px; box-shadow: 0 10px 26px rgba(37,99,235,.06); }
        #history-section .history-range-single.active-picking { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 12px 26px rgba(37,99,235,.08); }
        #history-section .history-range-status { display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 6px 10px; border-radius: 999px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
        #history-section .history-range-status-dot { width: 7px; height: 7px; border-radius: 999px; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .10); }
        #history-section .history-range-main { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; }
        #history-section .history-range-point { min-width: 0; flex: 1; }
        #history-section .history-range-label { display: block; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 3px; }
        #history-section .history-range-value { display: block; font-size: 13px; font-weight: 900; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #history-section .history-range-divider { width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; box-shadow: 0 8px 18px rgba(37,99,235,.18); }
        #history-section .history-calendar-card { border-radius: 18px !important; padding: 12px !important; margin: 0 14px 12px !important; }
        #history-section .history-calendar-day { height: 35px !important; border-radius: 12px !important; }
        #history-section .history-calendar-hint { margin: 0 14px 12px !important; padding: 9px 10px; border-radius: 13px; background: #f8fafc; border: 1px solid #e2e8f0; }
        #history-section .history-date-shortcuts { margin: 0 14px 12px !important; }
        #history-section .history-date-actions { padding: 12px 14px 14px; border-top: 1px solid #eef2f7; background: #fbfdff; }
        #history-section .history-date-actions .btn { min-height: 34px; border-radius: 11px; }
        @media (max-width: 575.98px) { #history-section .history-date-popover { left: 0 !important; right: auto !important; width: min(360px, calc(100vw - 24px)) !important; } #history-section .history-range-main { gap: 6px; } #history-section .history-range-value { font-size: 12px; } }

        #history-section .history-overview-card,
        #history-section .history-type-nav-item {
            overflow: visible !important;
        }

        #history-section .history-overview-card.history-date-card-open {
            z-index: 6200;
        }

        #history-section .history-overview-card > .d-flex.gap-2.flex-wrap.mt-3 {
            margin-top: 10px !important;
        }

        @media (max-width: 991.98px) {
            #history-section .history-nav-search-control {
                flex-basis: 180px;
                max-width: 180px;
            }
        }


        /* Histori transaksi: header lebih ramping + toolbar masuk ke kotak daftar */
        #history-section.history-section-compact {
            padding-top: 0;
        }

        #history-section .history-page-head-compact {
            margin-bottom: 8px !important;
            min-height: 0;
            align-items: center;
        }

        #history-section .history-title-compact-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 28px;
        }

        #history-section .history-page-title-compact {
            font-size: 15px !important;
            line-height: 1.2;
            margin: 0 !important;
            letter-spacing: -0.01em;
        }

        #history-section .history-title-help {
            width: 23px;
            height: 23px;
            font-size: 10px;
            flex: 0 0 auto;
        }

        #history-section .history-overview-card {
            padding: 12px !important;
            margin-bottom: 10px !important;
        }

        #history-section .history-table-card {
            overflow: hidden;
        }

        #history-section .history-table-head-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 12px 14px !important;
            border-bottom: 1px solid #e2e8f0;
            flex-wrap: wrap;
        }

        #history-section .history-table-title-block {
            min-width: 180px;
        }

        #history-section .history-table-title {
            margin-bottom: 2px !important;
            font-size: 14px !important;
            line-height: 1.25;
        }

        #history-section .history-table-subtitle {
            font-size: 11px !important;
            line-height: 1.2;
        }

        #history-section .history-table-toolbar-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-wrap: wrap;
            margin-left: auto;
        }

        #history-section .history-table-toolbar-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        #history-section .history-table-action-btn {
            min-height: 30px;
            padding: 5px 9px;
            font-size: 11px;
            border-radius: 10px !important;
            line-height: 1.15;
        }

        #history-section .history-record-count {
            min-height: 30px;
            padding: 6px 9px;
            font-size: 11px;
            border-radius: 10px;
            white-space: nowrap;
        }

        @media (max-width: 991.98px) {
            #history-section .history-table-head-actions {
                align-items: flex-start;
            }
            #history-section .history-table-toolbar-wrap {
                justify-content: flex-start;
                margin-left: 0;
                width: 100%;
            }
        }


        /* Stok In Supplier Trip layout redesign */
        .stok-in-supplier-redesign {
            background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
            border: 1px solid rgba(226, 232, 240, 0.95) !important;
        }
        .supplier-top-control-card {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 14px;
            padding: 14px;
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
        }
        .supplier-top-main {
            display: grid;
            grid-template-columns: minmax(220px, 280px) minmax(320px, 1fr);
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        .supplier-control-field { min-width: 0; }
        .supplier-inline-add {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            align-items: center;
        }
        .supplier-top-actions {
            display: flex;
            align-items: end;
            justify-content: flex-end;
            min-width: 160px;
        }
        .supplier-top-actions .btn,
        .supplier-inline-add .btn {
            min-height: 40px;
            white-space: nowrap;
        }
        .per-nota-panel,
        .trip-header-card {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #ffffff;
            padding: 16px;
        }
        .trip-header-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border-color: #bfdbfe;
        }
        .trip-header-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }
        .trip-form-grid {
            display: grid;
            grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .85fr) minmax(170px, .95fr) minmax(180px, 1.1fr);
            gap: 12px;
            align-items: start;
        }
        .trip-form-field { min-width: 0; }
        .trip-code-display {
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .02em;
            padding: 8px 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .trip-preview-card {
            border: 1px solid #e2e8f0 !important;
            border-radius: 16px !important;
        }
        @media (max-width: 1199px) {
            .trip-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 991px) {
            .supplier-top-control-card { flex-direction: column; }
            .supplier-top-main { grid-template-columns: 1fr; }
            .supplier-top-actions {
                justify-content: stretch;
                min-width: 0;
            }
            .supplier-top-actions .btn { width: 100%; }
        }
        @media (max-width: 575px) {
            .trip-form-grid,
            .supplier-inline-add { grid-template-columns: 1fr; }
            .supplier-inline-add .btn { width: 100%; }
        }



        .finance-ongkir-toggle-btn.active {
            background: #2563eb;
            color: #ffffff;
            border-color: #2563eb;
        }

        .finance-ongkir-detail-row td {
            background: #f8fafc !important;
            border-top: 0 !important;
            padding: 0 12px 16px !important;
        }

        .finance-ongkir-inline-panel {
            margin: 0 0 4px;
            padding: 16px;
            border: 1px solid #dbeafe;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.22);
        }

        .finance-ongkir-inline-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .finance-ongkir-parent-row + .finance-ongkir-detail-row:not(.d-none) {
            animation: fadeIn 0.22s ease;
        }


/* NOTA RINCIAN ONGKIR */
.nota-rincian { font-size:12px; padding:10px 6px; }
.nota-group { margin-bottom:10px; }
.nota-title { font-weight:700; margin-bottom:4px; color:#0f172a; }
.nota-row { display:flex; justify-content:space-between; padding:2px 0; color:#475569; }
.nota-row span:last-child { font-weight:600; text-align:right; }
.nota-divider { border-top:1px dashed #cbd5e1; margin:8px 0; }
.nota-total { display:flex; justify-content:space-between; font-weight:800; color:#16a34a; }



/* RINCIAN ONGKIR KAS KECIL - GAYA NOTA DATAR */
.finance-ongkir-detail-row td {
    background: #ffffff !important;
    border-top: 0 !important;
    padding: 0 12px 14px !important;
}

.finance-ongkir-inline-panel {
    margin: 0 0 4px !important;
    padding: 12px 16px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border-left: 3px solid #2563eb !important;
}

.finance-ongkir-inline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #cbd5e1 !important;
}

.finance-ongkir-note-wrap {
    width: 100%;
    max-width: 760px;
    font-size: 12px;
    color: #334155;
}

.finance-ongkir-note-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    color: #64748b;
}

.finance-ongkir-note-meta strong {
    color: #0f172a;
    font-weight: 800;
}

.finance-ongkir-note-list {
    margin-top: 8px;
}

.finance-ongkir-note-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 100px 150px;
    gap: 12px;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.finance-ongkir-note-row:last-child {
    border-bottom: 0;
}

.finance-ongkir-note-supplier {
    min-width: 0;
}

.finance-ongkir-note-supplier .supplier-name {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

.finance-ongkir-note-supplier .supplier-ref {
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.35;
}

.finance-ongkir-note-percent {
    text-align: right;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
}

.finance-ongkir-note-amount {
    text-align: right;
    font-weight: 800;
    color: #dc2626;
    white-space: nowrap;
}

.finance-ongkir-note-total {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 100px 150px;
    gap: 12px;
    align-items: baseline;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #cbd5e1;
    font-weight: 800;
}

.finance-ongkir-note-total .total-label {
    color: #0f172a;
    letter-spacing: .02em;
}

.finance-ongkir-note-total .total-count {
    text-align: right;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.finance-ongkir-note-total .total-amount {
    text-align: right;
    color: #16a34a;
    font-size: 13px;
}

@media (max-width: 767px) {
    .finance-ongkir-note-row,
    .finance-ongkir-note-total {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .finance-ongkir-note-percent,
    .finance-ongkir-note-amount,
    .finance-ongkir-note-total .total-count,
    .finance-ongkir-note-total .total-amount {
        text-align: left;
    }
}


/* Histori Ledger - ikon rincian ongkir di aksi */
.finance-ongkir-action-btn {
    width: 31px;
    height: 31px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    opacity: .55;
    cursor: not-allowed;
}
.finance-ongkir-action-btn.has-detail {
    opacity: 1;
    cursor: pointer;
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
}
.finance-ongkir-action-btn.has-detail:hover,
.finance-ongkir-action-btn.has-detail.active {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
}
.finance-ongkir-action-btn.is-muted:disabled {
    pointer-events: none;
}
.finance-ongkir-inline-panel {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 10px 12px 12px 54px;
}
.finance-ongkir-inline-head {
    border: 0 !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 4px 0 !important;
}
.finance-ongkir-note-wrap,
.finance-ongkir-note-list {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.finance-ongkir-note-meta,
.finance-ongkir-note-row,
.finance-ongkir-note-total {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 90px 150px;
    align-items: center;
    gap: 12px;
    border: 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    padding: 7px 0 !important;
    background: transparent !important;
}
.finance-ongkir-note-meta {
    grid-template-columns: minmax(220px, 1fr) 240px;
    color: #64748b;
}
.finance-ongkir-note-meta strong,
.finance-ongkir-note-total .total-amount {
    text-align: right;
}
.finance-ongkir-note-supplier .supplier-name {
    font-weight: 700;
    color: #0f172a;
}
.finance-ongkir-note-supplier .supplier-ref {
    font-size: 11px;
    color: #94a3b8;
}
.finance-ongkir-note-percent {
    text-align: right;
    color: #2563eb;
    font-weight: 700;
}
.finance-ongkir-note-amount {
    text-align: right;
    font-weight: 800;
    color: #0f172a;
}
.finance-ongkir-note-total {
    border-bottom: 0 !important;
    margin-top: 4px;
    padding-top: 10px !important;
}
.finance-ongkir-note-total .total-label {
    font-weight: 800;
    color: #0f172a;
}
.finance-ongkir-note-total .total-count {
    text-align: right;
    color: #64748b;
    font-size: 12px;
}
.finance-ongkir-note-total .total-amount {
    font-weight: 900;
    color: #16a34a;
}

/* FIX Histori Ledger Kas Kecil: tabel tetap rapi dengan horizontal scroll */
#financePaneHistory .finance-table { overflow: hidden; }
#financePaneHistory .finance-table .table-responsive { width:100%; max-width:100%; overflow-x:auto !important; overflow-y:visible; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
#financePaneHistory .finance-table .table-responsive::-webkit-scrollbar { height:8px; }
#financePaneHistory .finance-table .table-responsive::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; }
#financePaneHistory .finance-table table { min-width:1180px; width:max-content; table-layout:auto; }
#financePaneHistory .finance-table th, #financePaneHistory .finance-table td { white-space:nowrap; vertical-align:middle; font-size:12px; }
#financePaneHistory .finance-table th:nth-child(6), #financePaneHistory .finance-table td:nth-child(6) { min-width:260px; max-width:360px; white-space:normal; line-height:1.45; }
#financePaneHistory .finance-table th:nth-child(10), #financePaneHistory .finance-table td:nth-child(10) { min-width:132px; }
#financePaneHistory .finance-action-wrap { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
#financePaneHistory .finance-action-wrap .btn, #financePaneHistory .finance-action-wrap .finance-ongkir-action-btn { flex:0 0 auto; }
#financePaneHistory .finance-action-wrap .btn-sm { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
#financePaneHistory .finance-ongkir-detail-row td { white-space:normal !important; }
#financePaneHistory .finance-ongkir-inline-panel { min-width:720px; }
@media (max-width:768px){ #financePaneHistory .finance-table table { min-width:1060px; } #financePaneHistory .finance-table th, #financePaneHistory .finance-table td { font-size:11px; } #financePaneHistory .finance-action-wrap { gap:4px; } }


/* FIX FULL WIDTH RINCIAN ONGKIR */
.rincian-row-full {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
}

.rincian-inner {
    max-width: 100%;
    width: 100%;
}


/* === OVERRIDE FINAL: Rincian Ongkir Kas Kecil full width premium === */
#financePaneHistory .finance-ongkir-detail-row td {
    padding: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: normal !important;
}

#financePaneHistory .finance-ongkir-inline-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 22px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: inset 0 1px 0 #e2e8f0, inset 0 -1px 0 #e2e8f0, inset 4px 0 0 #2563eb !important;
}

#financePaneHistory .finance-ongkir-inline-body {
    width: 100%;
}

#financePaneHistory .finance-ongkir-inline-head {
    width: 100%;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#financePaneHistory .finance-ongkir-inline-head .fw-bold {
    color: #0f172a;
    font-size: 13px;
    letter-spacing: -0.01em;
}

#financePaneHistory .finance-ongkir-note-wrap {
    width: 100% !important;
    max-width: none !important;
    font-size: 12px;
    color: #334155;
}

#financePaneHistory .finance-ongkir-note-meta {
    display: grid !important;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #e2e8f0;
}

#financePaneHistory .finance-ongkir-note-meta span {
    color: #64748b;
    font-weight: 700;
}

#financePaneHistory .finance-ongkir-note-meta strong {
    color: #0f172a;
    font-weight: 800;
    text-align: right;
}

#financePaneHistory .finance-ongkir-note-list {
    margin-top: 12px !important;
}

#financePaneHistory .finance-ongkir-note-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 120px 160px;
    align-items: center;
    gap: 18px;
    padding: 11px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

#financePaneHistory .finance-ongkir-note-row:hover {
    background: rgba(37, 99, 235, 0.025);
}

#financePaneHistory .finance-ongkir-note-supplier .supplier-name {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

#financePaneHistory .finance-ongkir-note-supplier .supplier-ref {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
}

#financePaneHistory .finance-ongkir-note-percent {
    text-align: right;
    font-weight: 800;
    color: #2563eb;
}

#financePaneHistory .finance-ongkir-note-amount {
    text-align: right;
    font-weight: 800;
    color: #0f172a;
}

#financePaneHistory .finance-ongkir-note-total {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) 120px 160px;
    align-items: center;
    gap: 18px;
    padding: 13px 0 4px !important;
    border-top: 2px solid #cbd5e1 !important;
    margin-top: 4px;
}

#financePaneHistory .finance-ongkir-note-total .total-label {
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 0.02em;
}

#financePaneHistory .finance-ongkir-note-total .total-count {
    text-align: right;
    font-weight: 800;
    color: #64748b;
}

#financePaneHistory .finance-ongkir-note-total .total-amount {
    text-align: right;
    font-weight: 900;
    color: #16a34a;
}

#financePaneHistory tr.finance-ongkir-row-active > td {
    background: #eff6ff !important;
}

@media (max-width: 768px) {
    #financePaneHistory .finance-ongkir-inline-panel {
        padding: 14px !important;
    }

    #financePaneHistory .finance-ongkir-note-row,
    #financePaneHistory .finance-ongkir-note-total {
        grid-template-columns: minmax(190px, 1fr) 90px 130px;
        gap: 10px;
    }

    #financePaneHistory .finance-ongkir-note-meta {
        grid-template-columns: 150px minmax(180px, 1fr);
    }
}


/* === FIX Stok In Trip: tombol hapus baris icon-only === */
.trip-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.trip-item-action-cell {
    display: flex !important;
    align-items: end !important;
    justify-content: center !important;
    gap: 6px !important;
}

.trip-items-container .batch-row > .row {
    grid-template-columns: minmax(250px,2.2fr) minmax(130px,1fr) minmax(110px,.85fr) minmax(90px,.65fr) minmax(145px,1fr) 88px !important;
}

.trip-items-container .batch-row > .row > [class*=col-]:last-child {
    border-right: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.trip-supplier-block .btn-remove-trip-supplier {
    flex: 0 0 auto;
}


/* === FIX FINAL: Histori Ledger Kas Kecil tabel full sampai kanan === */
#financePaneHistory,
#financePaneHistory .card,
#financePaneHistory .card-body,
#financePaneHistory .table-responsive,
#financePaneHistory .finance-history-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#financePaneHistory .table-responsive,
#financePaneHistory .finance-history-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}

#financePaneHistory table,
#financePaneHistory .table {
    width: 100% !important;
    min-width: 1180px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

#financePaneHistory table thead th:last-child,
#financePaneHistory table tbody td:last-child,
#financePaneHistory .table thead th:last-child,
#financePaneHistory .table tbody td:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#financePaneHistory table thead th,
#financePaneHistory table tbody td,
#financePaneHistory .table thead th,
#financePaneHistory .table tbody td {
    white-space: nowrap !important;
}

#financePaneHistory .finance-action-group,
#financePaneHistory .keuangan-action-group,
#financePaneHistory .ledger-action-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

#financePaneHistory .finance-ongkir-detail-row td {
    border-right: 1px solid #e2e8f0 !important;
    border-left: 1px solid #e2e8f0 !important;
}

#financePaneHistory .finance-ongkir-inline-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Pastikan parent section tidak memotong garis kanan tabel */
#finance-section,
#keuangan-section,
.content-section.active {
    overflow-x: visible !important;
}


/* === FIX: Rincian Ongkir di Histori Pengeluaran Real === */
#financePaneRealExpense .finance-action-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

#financePaneRealExpense .finance-ongkir-action-btn,
#financePaneHistory .finance-ongkir-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}

#financePaneRealExpense .finance-ongkir-action-btn.has-detail,
#financePaneHistory .finance-ongkir-action-btn.has-detail {
    color: #2563eb !important;
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

#financePaneRealExpense .finance-ongkir-action-btn.has-detail.active,
#financePaneHistory .finance-ongkir-action-btn.has-detail.active {
    color: #ffffff !important;
    border-color: #2563eb !important;
    background: #2563eb !important;
}

#financePaneRealExpense .finance-ongkir-action-btn.is-muted,
#financePaneHistory .finance-ongkir-action-btn.is-muted {
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
    opacity: .65;
}

#financePaneRealExpense .finance-ongkir-detail-row td {
    padding: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: normal !important;
}

#financePaneRealExpense .finance-ongkir-inline-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 22px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: inset 0 1px 0 #e2e8f0, inset 0 -1px 0 #e2e8f0, inset 4px 0 0 #2563eb !important;
}

#financePaneRealExpense tr.finance-ongkir-row-active > td {
    background: #eff6ff !important;
}

#financePaneRealExpense .table-responsive {
    overflow-x: auto !important;
}


/* === STEP 1: Period System / Closing === */
.period-system-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 14px;
}

.period-system-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px;
    min-width: 0;
}

.period-system-active {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.08);
}

.period-system-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 8px;
}

.period-system-value {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.period-system-sub {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
}

.period-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #dbeafe;
    background: #ffffff;
    color: #1d4ed8;
}

.period-status-pill.closed {
    border-color: #fecaca;
    background: #fff1f2;
    color: #be123c;
}

.period-create-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.period-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.period-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow-x: auto;
}

.period-table thead th {
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 900;
    white-space: nowrap;
}

.period-table tbody td {
    font-size: 12px;
    vertical-align: middle;
}

.period-row-active td {
    background: #eff6ff !important;
}

.period-action-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.period-action-wrap .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .period-system-grid {
        grid-template-columns: 1fr;
    }

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


/* === STEP 2: Filter Periode Global Halus === */
.global-period-filter-bar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid rgba(191, 219, 254, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.global-period-filter-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.global-period-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    flex: 0 0 auto;
}

.global-period-title {
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
}

.global-period-sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
}

.global-period-filter-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#globalPeriodFilterSelect {
    min-width: 190px;
    min-height: 34px;
    border-radius: 12px !important;
    font-size: 12px;
    font-weight: 800;
}

.global-period-filter-bar.is-all {
    border-color: #e2e8f0;
    background: rgba(248, 250, 252, 0.94);
}

.global-period-filter-bar.is-closed {
    border-color: #fecaca;
    background: rgba(255, 241, 242, 0.94);
}

@media (max-width: 768px) {
    .global-period-filter-bar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .global-period-filter-right,
    #globalPeriodFilterSelect {
        width: 100%;
    }
}


/* === STEP 3: Laporan Bulanan === */
.monthly-report-shell {
    overflow: visible;
}

.monthly-report-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.monthly-report-grid.secondary .monthly-kpi-card {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.monthly-kpi-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    min-width: 0;
}

.monthly-kpi-card.primary { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff, #ffffff); }
.monthly-kpi-card.danger { border-color: #fecaca; background: linear-gradient(180deg, #fff1f2, #ffffff); }
.monthly-kpi-card.success { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #ffffff); }
.monthly-kpi-card.warning { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #ffffff); }

.monthly-kpi-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.monthly-kpi-value {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monthly-kpi-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}

.monthly-report-panel {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.monthly-panel-head {
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.monthly-panel-title {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.monthly-panel-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
}

.monthly-report-panel table thead th {
    font-size: 11px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #ffffff;
}

.monthly-report-panel table tbody td {
    font-size: 12px;
}

@media (max-width: 1200px) {
    .monthly-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .monthly-report-grid {
        grid-template-columns: 1fr;
    }
}


/* === STEP 6: Viewer Snapshot Closing === */
.snapshot-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.snapshot-kpi-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.snapshot-kpi-card.primary { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff, #ffffff); }
.snapshot-kpi-card.success { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #ffffff); }
.snapshot-kpi-card.danger { border-color: #fecaca; background: linear-gradient(180deg, #fff1f2, #ffffff); }

.snapshot-kpi-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.snapshot-kpi-value {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snapshot-kpi-sub {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
}

.snapshot-growth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 14px;
    margin-bottom: 18px;
}

.snapshot-growth-card,
.snapshot-health-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.snapshot-growth-chart-wrap {
    position: relative;
    min-height: 260px;
}

.snapshot-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
}

.snapshot-health-badge.good { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.snapshot-health-badge.warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.snapshot-health-badge.danger { background: #fff1f2; border-color: #fecaca; color: #be123c; }

.snapshot-health-title {
    font-size: 20px;
    font-weight: 900;
    margin: 12px 0 8px;
    color: #0f172a;
}

.snapshot-health-copy {
    font-size: 12px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 0;
}

.snapshot-health-detail {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.snapshot-health-mini {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: #f8fafc;
    font-size: 12px;
}

@media (max-width: 992px) {
    .snapshot-growth-grid { grid-template-columns: 1fr; }
}

.snapshot-card-list {
    display: grid;
    gap: 12px;
}

.snapshot-period-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}

.snapshot-period-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.snapshot-period-title {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.snapshot-period-meta {
    margin-top: 3px;
    font-size: 11px;
    color: #64748b;
}

.snapshot-closed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff1f2;
    border: 1px solid #fecaca;
    color: #be123c;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.snapshot-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.snapshot-detail-item {
    padding: 12px 16px;
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.snapshot-detail-item:nth-child(4n) {
    border-right: 0;
}

.snapshot-detail-label {
    font-size: 10px;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.snapshot-detail-value {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

@media (max-width: 1100px) {
    .snapshot-kpi-grid,
    .snapshot-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .snapshot-detail-item:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 640px) {
    .snapshot-kpi-grid,
    .snapshot-detail-grid {
        grid-template-columns: 1fr;
    }

    .snapshot-period-head {
        flex-direction: column;
    }

    .snapshot-detail-item {
        border-right: 0;
    }
}



/* === Kas Utama foundation === */
.kas-utama-shell { display: grid; gap: 18px; }
.kas-utama-tabs { display: inline-flex; gap: 8px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); flex-wrap: wrap; }
.kas-utama-tab { border: 0; background: transparent; color: #64748b; padding: 10px 15px; border-radius: 12px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; transition: .18s ease; }
.kas-utama-tab:hover { background: #f8fafc; color: #0f172a; }
.kas-utama-tab.active { background: linear-gradient(135deg, var(--primary-color), #3b82f6); color: #fff; box-shadow: 0 10px 20px rgba(37,99,235,.16); }
.kas-utama-pane { display: none; }
.kas-utama-pane.active { display: block; animation: fadeIn .24s ease; }
.kas-utama-hero { border: 1px solid #dbeafe; border-radius: 22px; padding: 18px; background: linear-gradient(135deg, #eff6ff 0%, #fff 72%); box-shadow: 0 14px 32px rgba(15, 23, 42, .05); }
.kas-utama-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kas-utama-kpi { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; padding: 16px; box-shadow: 0 12px 28px rgba(15, 23, 42, .05); }
.kas-utama-kpi .label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.kas-utama-kpi .value { margin-top: 8px; font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: #0f172a; }
.kas-utama-kpi .sub { margin-top: 4px; font-size: 12px; color: #64748b; }
.kas-utama-kpi.piutang-dropship { cursor: pointer; border-color: #bfdbfe; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); }
.kas-utama-kpi.piutang-dropship .value { color: #1d4ed8; }
.kas-utama-asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kas-utama-kpi.asset-positive { border-color: #bfdbfe; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); }
.kas-utama-kpi.asset-positive .value { color: #1d4ed8; }
.kas-utama-kpi.piutang-card { border-color: #bfdbfe; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); }
.kas-utama-kpi.piutang-card .value { color: #1d4ed8; }
.kas-utama-kpi.debt-card { border-color: #fed7aa; background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%); }
.kas-utama-kpi.debt-card .value { color: #b45309; }
.kas-utama-kpi.net-asset-card { border-color: #86efac; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); box-shadow: 0 18px 38px rgba(22, 163, 74, .12); }
.kas-utama-kpi.net-asset-card .value { color: #15803d; font-size: 26px; }

.kas-utama-kpi.piutang-dropship.piutang-low { border-color: #bbf7d0; background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%); }
.kas-utama-kpi.piutang-dropship.piutang-mid { border-color: #fde68a; background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); }
.kas-utama-kpi.piutang-dropship.piutang-high { border-color: #fecaca; background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%); }
.kas-utama-kpi .sub-small { margin-top: 4px; font-size: 11px; color: #94a3b8; font-weight: 700; }
.kas-utama-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kas-utama-form-grid .full { grid-column: 1 / -1; }
.kas-utama-supplier-payment { grid-column: 1 / -1; display: none; border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); padding: 16px; }
.kas-utama-supplier-payment-title { font-size: 13px; font-weight: 900; color: #1e3a8a; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kas-utama-supplier-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kas-utama-supplier-payment-info { grid-column: 1 / -1; font-size: 12px; color: #64748b; font-weight: 700; background: #ffffff; border: 1px dashed #bfdbfe; border-radius: 12px; padding: 10px 12px; }
.kas-shopee-import-box { grid-column: 1 / -1; border: 1px solid #bfdbfe; border-radius: 16px; background: #ffffff; padding: 14px; display: grid; gap: 12px; }
#kasUtamaPaneShopeeImport .kas-shopee-import-box { grid-column: auto; border-color: #bbf7d0; background: linear-gradient(180deg, #ffffff, #f8fff9); }
#kasUtamaPaneShopeeImport .kas-shopee-preview-wrap { max-height: 420px; }
.kas-shopee-import-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kas-shopee-import-title { font-size: 13px; font-weight: 900; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.kas-shopee-import-note { margin-top: 4px; font-size: 11px; color: #64748b; line-height: 1.45; }
.kas-shopee-file-list { display: grid; gap: 8px; }
.kas-shopee-file-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 10px; align-items: center; border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 12px; background: #f8fafc; }
.kas-shopee-file-name { font-size: 12px; font-weight: 900; color: #0f172a; }
.kas-shopee-file-meta { margin-top: 3px; font-size: 11px; color: #64748b; line-height: 1.35; }
.kas-shopee-preview-wrap { max-height: 300px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.kas-shopee-preview-wrap table { margin-bottom: 0; min-width: 980px; }
.kas-shopee-preview-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.kas-shopee-preview-wrap tbody td { font-size: 11px; vertical-align: middle; white-space: nowrap; }
.kas-shopee-summary { font-size: 12px; font-weight: 800; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 9px 11px; }
.kas-shopee-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kas-utama-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; flex-wrap: wrap; }
.kas-utama-scroll-hint { display: inline-flex; align-items: center; gap: 7px; color: #64748b; font-size: 11px; font-weight: 700; }
.kas-utama-scroll-actions { display: inline-flex; align-items: center; gap: 6px; }
.kas-utama-scroll-actions .btn { min-height: 28px; padding: 4px 9px; border-radius: 9px; font-size: 11px; line-height: 1.2; }
/* Histori Kas Utama: memakai pola scroll spreadsheet seperti Histori Inbon */

/* === Kas Utama History: spreadsheet scroll seperti Histori INBON === */
#kasUtamaPaneHistory,
#kasUtamaPaneHistory .card,
#kasUtamaPaneHistory .card-body {
    min-width: 0 !important;
    max-width: 100% !important;
}

#kasUtamaPaneHistory .card-body {
    overflow: hidden !important;
}

.kas-utama-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #94a3b8 #f1f5f9 !important;
}

#kasUtamaHistoryScroll {
    max-height: min(62vh, 720px) !important;
    overflow: auto !important;
    padding-bottom: 10px !important;
}

#kasUtamaHistoryScroll::-webkit-scrollbar,
.kas-utama-table-wrap::-webkit-scrollbar {
    width: 10px !important;
    height: 12px !important;
}

#kasUtamaHistoryScroll::-webkit-scrollbar-track,
.kas-utama-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 0 14px 14px !important;
}

#kasUtamaHistoryScroll::-webkit-scrollbar-thumb,
.kas-utama-table-wrap::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 999px !important;
    border: 2px solid #f1f5f9 !important;
}

#kasUtamaHistoryScroll::-webkit-scrollbar-thumb:hover,
.kas-utama-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

#kasUtamaHistoryScroll .kas-utama-table {
    width: max-content !important;
    min-width: 1540px !important;
    max-width: none !important;
}

.kas-utama-table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}

.kas-utama-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 7px 9px !important;
    line-height: 1.15 !important;
    border-color: #e2e8f0 !important;
    vertical-align: middle !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

.kas-utama-table tbody td {
    font-size: 11px !important;
    vertical-align: middle !important;
    padding: 5px 9px !important;
    line-height: 1.18 !important;
    border-color: #e5e7eb !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: #ffffff !important;
}

.kas-utama-table tbody tr { height: 30px !important; }
.kas-utama-table tbody tr:hover td { background: #f8fafc !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(1), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(1) { width: 118px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(2), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(2) { width: 86px !important; text-align: center !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(3), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(3) { width: 168px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(4), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(4) { width: 260px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(5), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(5) { width: 166px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(6), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(6) { width: 138px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(7), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(7) { width: 218px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(8), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(8) { width: 270px !important; }
#kasUtamaHistoryScroll .kas-utama-table th:nth-child(9), #kasUtamaHistoryScroll .kas-utama-table td:nth-child(9) { width: 116px !important; text-align: center !important; }
.kas-utama-table .badge { font-size: 10px !important; padding: 3px 6px !important; line-height: 1 !important; }
.kas-utama-table .btn-sm { --bs-btn-padding-y: 0.14rem; --bs-btn-padding-x: 0.32rem; --bs-btn-font-size: 0.68rem; border-radius: 7px !important; }
.kas-utama-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kas-utama-chart-box { height: 290px; }
@media (max-width: 991.98px) { .kas-utama-kpi-grid, .kas-utama-form-grid, .kas-utama-filter-grid { grid-template-columns: 1fr; } .kas-utama-chart-box { height: 240px; } }



        .inbon-action-disabled,
        .inbon-action-disabled:disabled {
            opacity: 0.45 !important;
            cursor: not-allowed !important;
            pointer-events: auto;
        }

        /* ===== Piutang Marketplace Summary Upload ===== */
        .marketplace-receivable-shell { border: 1px solid rgba(191, 219, 254, 0.95); border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06); padding: 22px; }
        .marketplace-receivable-upload { border: 1px dashed #93c5fd; background: #f8fbff; border-radius: 20px; padding: 18px; }
        .marketplace-receivable-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
        .marketplace-receivable-card { border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; padding: 16px; min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045); }
        .marketplace-receivable-card.primary { border-color: #bfdbfe; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; box-shadow: 0 18px 34px rgba(37, 99, 235, 0.18); }
        .marketplace-receivable-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #64748b; }
        .marketplace-receivable-card.primary .marketplace-receivable-label, .marketplace-receivable-card.primary .marketplace-receivable-sub { color: rgba(255,255,255,.78); }
        .marketplace-receivable-value { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; margin-top: 10px; color: #0f172a; }
        .marketplace-receivable-card.primary .marketplace-receivable-value { color: #ffffff; font-size: 25px; }
        .marketplace-receivable-sub { margin-top: 8px; font-size: 12px; color: #64748b; line-height: 1.45; }
        .marketplace-receivable-table-wrap { max-height: 360px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 16px; }
        .marketplace-receivable-table-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
        .marketplace-receivable-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; margin-top:14px; }
        .marketplace-receivable-list-wrap { max-height: 440px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 16px; background:#fff; }
        .marketplace-receivable-list-wrap thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; white-space:nowrap; }
        @media (max-width: 1199.98px) { .marketplace-receivable-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 575.98px) { .marketplace-receivable-summary-grid { grid-template-columns: 1fr; } }
    
.kas-utama-report-shell .kas-utama-tabs{display:flex;gap:8px;flex-wrap:wrap}.kas-report-final-card{border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#fff);border-radius:22px;padding:22px;display:flex;justify-content:space-between;gap:18px;align-items:center;box-shadow:0 18px 38px rgba(37,99,235,.08)}.kas-report-final-value{font-size:32px;font-weight:900;color:#15803d;letter-spacing:-.04em}.kas-report-formula{font-size:12px;font-weight:900;color:#1d4ed8;background:#fff;border:1px solid #dbeafe;border-radius:999px;padding:9px 12px}.kas-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kas-report-group{border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05);overflow:hidden}.kas-report-group-head{padding:14px 16px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;background:#f8fafc}.kas-report-group-title{font-size:13px;font-weight:900;letter-spacing:.08em}.kas-report-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer}.kas-report-row:hover{background:#f8fafc}.kas-report-row:last-child{border-bottom:none}.kas-report-row-name{font-size:13px;font-weight:750}.kas-report-row-nominal{font-size:13px;font-weight:900;text-align:right}.kas-report-total{padding:13px 16px;display:flex;justify-content:space-between;font-weight:900;background:#f8fafc}.kas-report-group.kas .kas-report-group-title,.kas-report-group.kas .kas-report-row-nominal{color:#1d4ed8}.kas-report-group.piutang .kas-report-group-title,.kas-report-group.piutang .kas-report-row-nominal{color:#15803d}.kas-report-group.hutang .kas-report-group-title,.kas-report-group.hutang .kas-report-row-nominal{color:#dc2626}.kas-report-group.aset .kas-report-group-title,.kas-report-group.aset .kas-report-row-nominal{color:#7c3aed}.kas-closing-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kas-closing-item{border:1px solid #e2e8f0;border-radius:16px;padding:12px;background:#f8fafc}.kas-closing-label{font-size:11px;color:#64748b;font-weight:800;text-transform:uppercase}.kas-closing-value{font-size:18px;font-weight:900;color:#0f172a}@media(max-width:991px){.kas-report-grid,.kas-closing-summary{grid-template-columns:1fr}.kas-report-final-card{align-items:flex-start;flex-direction:column}}


        #nav-balance-summary,
        .mobile-section-tab[data-target="balance-section"],
        #balance-section,
        #summaryBalanceMasterModal {
            display: none !important;
        }


        /* Redesign Laporan Penjualan: dashboard + nota style */
        .sales-report-shell{display:grid;gap:18px}.sales-report-page-head{align-items:flex-start}.sales-report-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:7px;color:#2563eb;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sales-report-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.sales-report-nav{display:inline-flex;gap:8px;padding:7px;border-radius:18px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 12px 28px rgba(15,23,42,.05);width:max-content;max-width:100%;overflow-x:auto}.sales-report-nav-btn{border:0;background:transparent;color:#64748b;padding:10px 14px;border-radius:13px;font-size:12px;font-weight:900;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.18s ease}.sales-report-nav-btn:hover{background:#f8fafc;color:#0f172a}.sales-report-nav-btn.active{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;box-shadow:0 10px 20px rgba(37,99,235,.16)}.sales-report-tab-pane{display:none}.sales-report-tab-pane.active{display:block;animation:fadeIn .24s ease}.sales-report-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:18px;align-items:stretch;padding:22px;border-radius:26px;border:1px solid rgba(191,219,254,.9);background:radial-gradient(circle at top right,rgba(37,99,235,.16),transparent 28%),linear-gradient(135deg,#fff 0%,#f8fbff 100%);box-shadow:0 18px 42px rgba(15,23,42,.06)}.sales-report-hero-label{display:inline-flex;width:fit-content;padding:7px 10px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.sales-report-hero-title{margin-top:12px;font-size:clamp(22px,3vw,34px);line-height:1.06;font-weight:900;letter-spacing:-.04em;color:#0f172a}.sales-report-hero-sub{margin-top:10px;max-width:680px;color:#64748b;font-size:13px;font-weight:650;line-height:1.6}.sales-report-hero-metric{display:flex;flex-direction:column;justify-content:center;padding:20px;border-radius:22px;background:linear-gradient(135deg,#0f766e 0%,#16a34a 100%);color:#fff;box-shadow:0 18px 32px rgba(22,163,74,.18)}.sales-report-hero-metric-label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.82}.sales-report-hero-metric-value{margin-top:8px;font-size:clamp(26px,3vw,38px);line-height:1;font-weight:950;letter-spacing:-.05em;word-break:break-word}.sales-report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sales-report-kpi-card{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:16px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05)}.sales-report-kpi-icon{width:38px;height:38px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;background:#f1f5f9;color:#475569}.sales-report-kpi-card.primary .sales-report-kpi-icon{background:#eff6ff;color:#2563eb}.sales-report-kpi-card.success .sales-report-kpi-icon{background:#f0fdf4;color:#16a34a}.sales-report-kpi-card.warning .sales-report-kpi-icon{background:#fffbeb;color:#b45309}.sales-report-kpi-card.danger .sales-report-kpi-icon{background:#fff1f2;color:#dc2626}.sales-report-kpi-card.neutral .sales-report-kpi-icon{background:#f8fafc;color:#475569}.sales-report-kpi-card.purple .sales-report-kpi-icon{background:#f5f3ff;color:#7c3aed}.sales-report-kpi-card.slate .sales-report-kpi-icon{background:#f1f5f9;color:#334155}.sales-report-kpi-content{min-width:0}.sales-report-summary-note{border-radius:26px;border:1px solid #dbeafe;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 18px 42px rgba(15,23,42,.06);overflow:hidden}.sales-report-summary-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#f8fbff,#fff)}.sales-report-summary-title{font-size:15px;font-weight:950;color:#0f172a;letter-spacing:-.02em}.sales-report-summary-sub{font-size:12px;font-weight:650;color:#64748b;margin-top:4px}.sales-report-summary-body{padding:18px 20px;display:grid;gap:10px}.sales-report-wide-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff}.sales-report-wide-label{display:flex;flex-direction:column;gap:2px;min-width:0}.sales-report-wide-label strong{font-size:12px;color:#334155;font-weight:900}.sales-report-wide-label span{font-size:11px;color:#94a3b8;font-weight:700}.sales-report-wide-value{font-size:15px;font-weight:950;color:#0f172a;text-align:right;word-break:break-word}.sales-report-wide-row.profit{background:linear-gradient(135deg,#f0fdf4,#fff);border-color:#bbf7d0}.sales-report-wide-row.profit .sales-report-wide-value{font-size:20px;color:#15803d}.sales-report-wide-row.negative{background:linear-gradient(135deg,#fff1f2,#fff);border-color:#fecdd3}.sales-report-wide-row.negative .sales-report-wide-value{color:#be123c}.sales-report-layer-card{border-radius:26px}.sales-report-note-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px}.analytics-store-card.sales-report-note-card{border-radius:24px;border-color:rgba(203,213,225,.95);background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}.sales-report-note-total-row{margin-top:7px;padding:13px 14px;border-radius:16px}.sales-report-card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.sales-report-health-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid #bbf7d0;background:#f0fdf4;color:#047857;font-size:11px;font-weight:900}.sales-report-health-badge.negative{border-color:#fecdd3;background:#fff1f2;color:#be123c}.sales-report-detail-panel{display:none;margin-top:12px;padding:13px;border-radius:16px;border:1px dashed #cbd5e1;background:#f8fafc}.sales-report-detail-panel.show{display:block;animation:fadeIn .2s ease}.sales-report-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sales-report-detail-item{padding:10px;border-radius:14px;background:#fff;border:1px solid #e2e8f0}.sales-report-detail-label{font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}.sales-report-detail-value{margin-top:4px;font-size:15px;font-weight:900;color:#0f172a;word-break:break-word}.sales-report-detail-table-wrap{border:1px solid #e2e8f0;border-radius:18px;overflow:auto;background:#fff}.sales-report-detail-table{min-width:1280px}.sales-report-detail-table thead th{position:sticky;top:0;background:#f8fafc;color:#475569;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #e2e8f0}.sales-report-detail-table tbody td{font-size:12px;border-color:#eef2f7}@media(max-width:1399.98px){.sales-report-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1199.98px){.sales-report-note-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}@media(max-width:991.98px){.sales-report-hero{grid-template-columns:1fr}.sales-report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-report-note-grid{grid-template-columns:1fr !important}}@media(max-width:575.98px){.sales-report-kpi-grid,.sales-report-detail-grid{grid-template-columns:1fr}.sales-report-wide-row{align-items:flex-start;flex-direction:column}.sales-report-wide-value{text-align:left}}


/* === FINAL PATCH: Kas Kecil History Tables - spreadsheet layout anti bertumpuk === */
#financePaneHistory,
#financePaneRealExpense {
    min-width: 0 !important;
}

#financePaneHistory .finance-pane-card,
#financePaneRealExpense .finance-pane-card,
#financePaneHistory .history-card,
#financePaneRealExpense .history-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#financePaneHistory .finance-ledger-table-card,
#financePaneRealExpense .finance-ledger-table-card {
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 20px !important;
    border: 1px solid #dbe5f1 !important;
    background: #ffffff !important;
}

#financePaneHistory .finance-ledger-scroll,
#financePaneRealExpense .finance-ledger-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 68vh !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#financePaneHistory .finance-ledger-table,
#financePaneRealExpense .finance-ledger-table {
    width: 100% !important;
    min-width: 1320px !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

#financePaneHistory .finance-ledger-table thead th,
#financePaneRealExpense .finance-ledger-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #dbe5f1 !important;
    border-right: 1px solid #e7edf5 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

#financePaneHistory .finance-ledger-table tbody td,
#financePaneRealExpense .finance-ledger-table tbody td {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-right: 1px solid #eef2f7 !important;
    background: #ffffff !important;
    color: #24364d !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

#financePaneHistory .finance-ledger-table tbody tr:nth-child(even):not(.finance-ongkir-detail-row) td,
#financePaneRealExpense .finance-ledger-table tbody tr:nth-child(even):not(.finance-ongkir-detail-row) td {
    background: #fbfdff !important;
}

#financePaneHistory .finance-ledger-table tbody tr:hover:not(.finance-ongkir-detail-row) td,
#financePaneRealExpense .finance-ledger-table tbody tr:hover:not(.finance-ongkir-detail-row) td {
    background: #f8fbff !important;
}

/* Width map: Histori Ledger */
#financePaneHistory .finance-ledger-table th:nth-child(1),
#financePaneHistory .finance-ledger-table td:nth-child(1) { width: 72px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(2),
#financePaneHistory .finance-ledger-table td:nth-child(2) { width: 150px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(3),
#financePaneHistory .finance-ledger-table td:nth-child(3) { width: 112px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(4),
#financePaneHistory .finance-ledger-table td:nth-child(4) { width: 165px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(5),
#financePaneHistory .finance-ledger-table td:nth-child(5) { width: 190px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(6),
#financePaneHistory .finance-ledger-table td:nth-child(6) { width: 330px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(7),
#financePaneHistory .finance-ledger-table td:nth-child(7) { width: 145px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(8),
#financePaneHistory .finance-ledger-table td:nth-child(8) { width: 90px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(9),
#financePaneHistory .finance-ledger-table td:nth-child(9) { width: 150px !important; }
#financePaneHistory .finance-ledger-table th:nth-child(10),
#financePaneHistory .finance-ledger-table td:nth-child(10) { width: 125px !important; }

/* Width map: Histori Pengeluaran Real */
#financePaneRealExpense .finance-ledger-table th:nth-child(1),
#financePaneRealExpense .finance-ledger-table td:nth-child(1) { width: 88px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(2),
#financePaneRealExpense .finance-ledger-table td:nth-child(2) { width: 150px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(3),
#financePaneRealExpense .finance-ledger-table td:nth-child(3) { width: 120px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(4),
#financePaneRealExpense .finance-ledger-table td:nth-child(4) { width: 170px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(5),
#financePaneRealExpense .finance-ledger-table td:nth-child(5) { width: 190px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(6),
#financePaneRealExpense .finance-ledger-table td:nth-child(6) { width: 330px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(7),
#financePaneRealExpense .finance-ledger-table td:nth-child(7) { width: 145px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(8),
#financePaneRealExpense .finance-ledger-table td:nth-child(8) { width: 90px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(9),
#financePaneRealExpense .finance-ledger-table td:nth-child(9) { width: 150px !important; }
#financePaneRealExpense .finance-ledger-table th:nth-child(10),
#financePaneRealExpense .finance-ledger-table td:nth-child(10) { width: 130px !important; }

#financePaneHistory .finance-ledger-table td:nth-child(6),
#financePaneRealExpense .finance-ledger-table td:nth-child(6) {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

#financePaneHistory .finance-ledger-table td:nth-child(5),
#financePaneRealExpense .finance-ledger-table td:nth-child(5) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#financePaneHistory .finance-action-wrap,
#financePaneRealExpense .finance-action-wrap,
#financePaneHistory .finance-action-group,
#financePaneRealExpense .finance-action-group,
#financePaneHistory .ledger-action-group,
#financePaneRealExpense .ledger-action-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: max-content !important;
}

#financePaneHistory .finance-action-wrap .btn-sm,
#financePaneRealExpense .finance-action-wrap .btn-sm {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}

#financePaneHistory .finance-ongkir-detail-row td,
#financePaneRealExpense .finance-ongkir-detail-row td {
    padding: 0 !important;
    white-space: normal !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

#financePaneHistory .finance-ongkir-inline-panel,
#financePaneRealExpense .finance-ongkir-inline-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#financePaneHistory .badge,
#financePaneRealExpense .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 991.98px) {
    #financePaneHistory .finance-ledger-scroll,
    #financePaneRealExpense .finance-ledger-scroll { max-height: 72vh !important; }
    #financePaneHistory .finance-ledger-table,
    #financePaneRealExpense .finance-ledger-table { min-width: 1240px !important; }
}

        /* ===== Modul Gaji Karyawan ===== */
        .payroll-shell { display: grid; gap: 18px; }
        .payroll-tabs { display: inline-flex; gap: 8px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--border-color); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
        .payroll-tab-btn { border: 0; background: transparent; color: #64748b; padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
        .payroll-tab-btn.active { background: linear-gradient(135deg, var(--primary-color), #3b82f6); color: #fff; box-shadow: 0 10px 20px rgba(37,99,235,.16); }
        .payroll-pane { display: none; }
        .payroll-pane.active { display: block; animation: fadeIn .24s ease; }
        .payroll-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .payroll-kpi-card { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; padding: 18px; box-shadow: 0 12px 28px rgba(15,23,42,.05); }
        .payroll-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #64748b; }
        .payroll-kpi-value { margin-top: 6px; font-size: 22px; font-weight: 900; color: #0f172a; }
        .payroll-kpi-sub { margin-top: 4px; font-size: 12px; color: #64748b; }
        .payroll-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
        .payroll-table { min-width: 980px; margin-bottom: 0; }
        .payroll-table thead th { background: #f8fafc; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; white-space: nowrap; }
        .payroll-table tbody td { font-size: 12px; white-space: nowrap; }
        .payroll-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; }
        .payroll-badge.active { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
        .payroll-badge.done { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
        @media (max-width: 991.98px) { .payroll-kpi-grid { grid-template-columns: 1fr; } }

    

        /* Master Data Center */
        #master-data-section .master-data-shell{display:grid;gap:18px;}
        .master-data-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:20px;border:1px solid #dbeafe;border-radius:22px;background:linear-gradient(135deg,#eff6ff 0%,#fff 72%);box-shadow:0 18px 40px rgba(15,23,42,.06)}
        .master-data-kicker{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#2563eb;margin-bottom:6px}.master-data-title{font-size:22px;font-weight:900;color:#0f172a;margin:0}.master-data-subtitle{font-size:12px;color:#64748b;line-height:1.6;margin-top:6px;max-width:780px}.master-data-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.master-data-card{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:16px;box-shadow:0 12px 28px rgba(15,23,42,.05)}.master-data-card-label{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.master-data-card-value{font-size:24px;font-weight:900;color:#0f172a;margin-top:6px}.master-data-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:6px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;width:max-content;max-width:100%}.master-data-tab-btn{border:0;background:transparent;color:#64748b;padding:10px 14px;border-radius:12px;font-size:12px;font-weight:900;display:inline-flex;align-items:center;gap:8px}.master-data-tab-btn.active{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;box-shadow:0 10px 20px rgba(37,99,235,.16)}.master-data-panel{display:none}.master-data-panel.active{display:block;animation:fadeIn .22s ease}.master-data-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.master-data-filter-group{display:flex;gap:8px;flex-wrap:wrap}.master-data-table-wrap{border:1px solid #e2e8f0;border-radius:18px;background:#fff;overflow:auto;box-shadow:0 12px 28px rgba(15,23,42,.05)}.master-data-table{min-width:860px;margin:0}.master-data-table thead th{background:#f8fafc;color:#475569;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e2e8f0;padding:10px 12px}.master-data-table tbody td{font-size:12px;vertical-align:middle;padding:10px 12px;border-bottom:1px solid #eef2f7}.master-data-name{font-weight:800;color:#0f172a}.master-data-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.master-data-status.active{background:#dcfce7;color:#166534}.master-data-status.inactive{background:#f1f5f9;color:#475569}.master-data-actions{display:flex;justify-content:center;gap:6px}.master-data-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.46);z-index:6500;display:none;align-items:center;justify-content:center;padding:18px}.master-data-modal-overlay.show{display:flex}.master-data-modal-card{width:min(640px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;border:1px solid #e2e8f0;box-shadow:0 30px 80px rgba(15,23,42,.28)}.master-data-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#eff6ff,#fff)}.master-data-modal-title{font-size:17px;font-weight:900;margin:0;color:#0f172a}.master-data-modal-sub{font-size:12px;color:#64748b;margin-top:4px}.master-data-modal-body{padding:18px 20px}.master-data-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #e2e8f0;background:#f8fafc}.master-data-toast{position:fixed;right:18px;bottom:18px;z-index:6600;display:none;max-width:360px;border-radius:16px;padding:13px 15px;background:#0f172a;color:#fff;box-shadow:0 18px 44px rgba(15,23,42,.28);font-size:12px;font-weight:700}.master-data-toast.show{display:block}.master-data-toast.success{background:#166534}.master-data-toast.error{background:#991b1b}
        .master-data-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.master-profit-fee-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:11px;font-weight:900}.master-profit-fee-badge.warning{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.master-profit-help{font-size:12px;color:#64748b;line-height:1.6}.master-profit-store-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;font-weight:800;color:#0f172a}@media(max-width:1199.98px){.master-data-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:991.98px){.master-data-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.master-data-tabs{width:100%}.master-data-tab-btn{flex:1;justify-content:center}}@media(max-width:575.98px){.master-data-summary{grid-template-columns:1fr}}


        /* Dashboard Analitik War Room Upgrade */
        .analytics-war-room {
            border: 1px solid rgba(37, 99, 235, 0.12);
            border-radius: 24px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
            padding: 20px;
            margin-bottom: 20px;
        }
        .analytics-war-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .analytics-war-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #1d4ed8;
            margin-bottom: 6px;
        }
        .analytics-war-title {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #0f172a;
            margin: 0;
        }
        .analytics-war-subtitle {
            margin-top: 6px;
            font-size: 12px;
            color: #64748b;
            line-height: 1.6;
            max-width: 760px;
        }
        .analytics-war-score {
            min-width: 210px;
            padding: 14px 16px;
            border-radius: 18px;
            background: #0f172a;
            color: #fff;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
        }
        .analytics-war-score-label {
            font-size: 11px;
            font-weight: 800;
            color: #cbd5e1;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .analytics-war-score-value {
            margin-top: 4px;
            font-size: 32px;
            font-weight: 900;
            line-height: 1;
        }
        .analytics-war-score-sub {
            margin-top: 6px;
            font-size: 12px;
            color: #e2e8f0;
        }
        .analytics-war-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }
        .analytics-war-mini {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #fff;
            padding: 14px;
            min-height: 112px;
        }
        .analytics-war-mini-label {
            font-size: 11px;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .05em;
        }
        .analytics-war-mini-value {
            margin-top: 6px;
            font-size: 18px;
            font-weight: 900;
            color: #0f172a;
            word-break: break-word;
        }
        .analytics-war-mini-sub {
            margin-top: 5px;
            font-size: 11px;
            color: #64748b;
            line-height: 1.45;
        }
        .analytics-war-decision-grid {
            display: grid;
            grid-template-columns: 1.1fr 1.1fr .9fr;
            gap: 12px;
        }
        .analytics-war-panel {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #fff;
            padding: 16px;
            min-width: 0;
        }
        .analytics-war-panel-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
            font-size: 13px;
            font-weight: 900;
            color: #0f172a;
        }
        .analytics-insight-list {
            display: grid;
            gap: 10px;
        }
        .analytics-insight-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 11px;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #eef2f7;
        }
        .analytics-insight-icon {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #2563eb;
            flex-shrink: 0;
        }
        .analytics-insight-item.warning .analytics-insight-icon { background:#fffbeb; color:#d97706; }
        .analytics-insight-item.danger .analytics-insight-icon { background:#fef2f2; color:#dc2626; }
        .analytics-insight-item.success .analytics-insight-icon { background:#ecfdf5; color:#16a34a; }
        .analytics-insight-title {
            font-size: 12px;
            font-weight: 900;
            color: #0f172a;
            line-height: 1.35;
        }
        .analytics-insight-sub {
            margin-top: 3px;
            font-size: 11px;
            color: #64748b;
            line-height: 1.45;
        }
        .analytics-flow-steps {
            display: grid;
            gap: 9px;
        }
        .analytics-flow-step {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #eef2f7;
        }
        .analytics-flow-step span:first-child {
            font-size: 12px;
            color: #475569;
            font-weight: 800;
        }
        .analytics-flow-step span:last-child {
            font-size: 12px;
            color: #0f172a;
            font-weight: 900;
            text-align: right;
        }
        @media (max-width: 1200px) {
            .analytics-war-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .analytics-war-decision-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            .analytics-war-grid { grid-template-columns: 1fr; }
            .analytics-war-room { padding: 14px; }
        }


        /* Dashboard Analitik Level 2 - simple filter + decision product */
        .analytics-filter-level2{border:1px solid #dbeafe!important;background:linear-gradient(135deg,#ffffff,#f8fbff)!important;border-radius:20px!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important;}
        .analytics-level2-filter-bar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;}
        .analytics-level2-filter-main{min-width:230px;flex:1;max-width:360px;}
        .analytics-level2-label{font-size:11px;font-weight:900;color:#475569;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:block;}
        .analytics-level2-select,.analytics-level2-month{min-height:40px!important;border-radius:12px!important;font-size:12px!important;font-weight:800;}
        .analytics-level2-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
        .analytics-toolbar-meta-simple{padding:0 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
        .analytics-master-modal{display:none!important;}
        #analyticsOverviewPane>.analytics-section-shell,
        #analyticsOverviewPane>.row.g-3.mb-4:has(#analyticsCompositionChart),
        #analyticsOverviewPane>.row.g-3.mb-4:has(#analyticsQtyChart),
        #analyticsOverviewPane>.analytics-list-layout{display:none!important;}
        .analytics-product-decision-card{border:1px solid #dbeafe;border-radius:22px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.07);overflow:hidden;margin-bottom:20px;}
        .analytics-product-decision-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#eff6ff,#fff 72%);}
        .analytics-product-kicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#2563eb;margin-bottom:5px;}
        .analytics-product-title{font-size:18px;font-weight:900;color:#0f172a;margin:0;letter-spacing:-.02em;}
        .analytics-product-subtitle{font-size:12px;color:#64748b;line-height:1.55;margin-top:5px;max-width:720px;}
        .analytics-product-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
        .analytics-product-tools .form-control,.analytics-product-tools .form-select{min-height:38px!important;border-radius:12px!important;font-size:12px;min-width:180px;}
        .analytics-decision-table-wrap{overflow:auto;}
        .analytics-decision-table{min-width:1050px;margin:0;}
        .analytics-decision-table thead th{background:#f8fafc;color:#475569;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e2e8f0;padding:11px 12px;white-space:nowrap;}
        .analytics-decision-table tbody td{font-size:12px;vertical-align:middle;padding:11px 12px;border-bottom:1px solid #eef2f7;}
        .analytics-product-name{font-weight:900;color:#0f172a;line-height:1.3;}
        .analytics-product-meta{font-size:11px;color:#64748b;margin-top:3px;}
        .analytics-status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;white-space:nowrap;}
        .analytics-status-badge.laris{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;}
        .analytics-status-badge.rugi{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;}
        .analytics-status-badge.tidak-laku{background:#fef3c7;color:#92400e;border:1px solid #fde68a;}
        .analytics-status-badge.stok-habis{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
        .analytics-status-badge.normal{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
        .analytics-action-chip{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:6px 9px;font-size:11px;font-weight:800;background:#f8fafc;border:1px solid #e2e8f0;color:#334155;white-space:nowrap;}
        .analytics-product-empty{padding:24px;text-align:center;color:#64748b;font-size:12px;font-weight:700;}
        @media(max-width:768px){.analytics-level2-filter-main{max-width:none;min-width:100%;}.analytics-level2-actions{width:100%;}.analytics-level2-actions .btn{flex:1;}.analytics-product-tools{width:100%;}.analytics-product-tools .form-control,.analytics-product-tools .form-select{flex:1;min-width:140px;}}

        .kas-utama-store-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-size:10.5px;font-weight:800;white-space:nowrap;}
        .kas-utama-income-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
        .kas-utama-income-item{border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:12px 14px;text-align:left;width:100%;transition:.16s ease;}
        .kas-utama-income-item:hover{border-color:#93c5fd;box-shadow:0 10px 24px rgba(37,99,235,.10);transform:translateY(-1px);}
        .kas-utama-income-title{font-size:12px;font-weight:900;color:#0f172a;margin-bottom:3px;}
        .kas-utama-income-meta{font-size:11px;color:#64748b;line-height:1.45;}
        .kas-utama-income-total{font-size:14px;font-weight:900;color:#16a34a;margin-top:8px;}
        .kas-utama-income-panel{border:1px solid #bfdbfe;background:linear-gradient(180deg,#f8fbff,#fff);border-radius:18px;padding:14px 16px;}



        /* Hard fix Return Marketplace: dropdown produk memakai portal body agar tidak tenggelam oleh batas tabel/form. */
        .return-marketplace-product-suggestions-portal {
            position: fixed !important;
            z-index: 9000 !important;
            max-height: 320px;
            overflow-y: auto;
            background: #ffffff;
            border: 1px solid #bfdbfe;
            border-radius: 14px;
            box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
        }
        .return-marketplace-product-suggestions-portal.show {
            display: block !important;
        }
        .return-marketplace-sheet-wrap,
        .return-marketplace-sheet-scroll,
        .return-marketplace-sheet-table,
        .return-marketplace-sheet-table tbody,
        .return-marketplace-sheet-table tr,
        .return-marketplace-sheet-table td {
            overflow: visible;
        }
        .return-marketplace-sheet-scroll {
            overflow-x: auto;
            overflow-y: visible;
        }


        /* Return Marketplace Inline Editor */
        .history-return-inline-filter {
            display: none;
            align-items: center;
            gap: 7px;
            padding: 6px 8px;
            border: 1px solid #bfdbfe;
            background: #f8fbff;
            border-radius: 14px;
        }
        .history-type-filter-nav:has(.history-type-filter-btn[data-history-type-filter="return_marketplace"].active) .history-return-inline-filter {
            display: inline-flex;
        }
        .history-return-inline-filter i { color: #2563eb; font-size: 13px; }
        .history-return-inline-filter .form-control {
            width: 140px;
            min-height: 34px;
            height: 34px;
            font-size: 11px;
            border-radius: 10px !important;
            background: #fff;
        }
        .return-inline-table-active thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #f8fafc !important;
            color: #334155 !important;
            font-size: 10.5px !important;
            letter-spacing: .04em;
            border-bottom: 1px solid #dbe3ef !important;
        }
        .return-inline-table-active tbody td {
            font-size: 11.5px !important;
            padding: 6px 8px !important;
            border-right: 1px solid #edf2f7;
            white-space: nowrap;
        }
        .return-inline-row.is-dirty td {
            background: #fff7ed !important;
        }
        .return-inline-money-input {
            min-height: 32px !important;
            height: 32px !important;
            text-align: right;
            font-size: 12px !important;
            font-weight: 800;
            border-radius: 9px !important;
            border-color: #dbe3ef;
            background: #ffffff;
        }
        .return-inline-money-input:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37,99,235,.10);
        }
        .return-inline-total {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 112px;
            padding: 6px 9px;
            border-radius: 10px;
            background: #eff6ff;
            color: #1d4ed8;
            font-weight: 900;
        }
        .return-inline-product {
            max-width: 285px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
            color: #0f172a;
        }
        .return-inline-status {
            display: inline-flex;
            padding: 5px 9px;
            border-radius: 999px;
            background: #f1f5f9;
            color: #475569;
            font-size: 11px;
            font-weight: 800;
        }
        .return-inline-unsaved {
            display: inline-flex;
            align-items: center;
            min-height: 31px;
            padding: 6px 10px;
            border-radius: 999px;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            color: #9a3412;
            font-size: 11px;
            font-weight: 900;
        }
        @media (max-width: 1100px) {
            .history-return-inline-filter { width: 100%; overflow-x: auto; }
            .history-return-inline-filter .form-control { min-width: 130px; }
        }

    

        /* Executive Sales Report Theme - selaras untuk Laporan Penjualan All & Per Toko */
        #laporan-penjualan-section {
            --sales-ink: #0f172a;
            --sales-ink-soft: #334155;
            --sales-muted: #64748b;
            --sales-line: rgba(148, 163, 184, 0.24);
            --sales-paper: #ffffff;
            --sales-paper-soft: #f8fafc;
            --sales-navy: #0f172a;
            --sales-navy-2: #1e293b;
            --sales-blue: #1d4ed8;
            --sales-green: #047857;
            --sales-red: #be123c;
            --sales-amber: #b45309;
        }

        #laporan-penjualan-section .sales-report-shell {
            gap: 20px;
        }

        #laporan-penjualan-section .sales-report-page-head {
            padding: 18px 20px;
            border: 1px solid var(--sales-line);
            border-radius: 22px;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
        }

        #laporan-penjualan-section .sales-report-kicker {
            color: var(--sales-blue);
            background: #eff6ff;
            border: 1px solid #dbeafe;
            border-radius: 999px;
            padding: 6px 10px;
            width: fit-content;
        }

        #laporan-penjualan-section .page-title {
            letter-spacing: -0.035em;
            color: var(--sales-ink);
        }

        #laporan-penjualan-section .section-note {
            color: var(--sales-muted);
            font-weight: 600;
            line-height: 1.55;
        }

        #laporan-penjualan-section .sales-report-head-actions .btn,
        #laporan-penjualan-section .sales-report-card-actions .btn {
            border-radius: 999px;
            font-size: 12px;
            letter-spacing: .01em;
        }

        #laporan-penjualan-section .analytics-period-chip {
            border-radius: 999px;
            border-color: var(--sales-line) !important;
            background: #fff !important;
            color: var(--sales-ink-soft) !important;
            font-weight: 800;
        }

        #laporan-penjualan-section .sales-report-nav {
            width: 100%;
            justify-content: flex-start;
            padding: 6px;
            border-radius: 16px;
            background: #ffffff;
            border: 1px solid var(--sales-line);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
        }

        #laporan-penjualan-section .sales-report-nav-btn {
            border-radius: 12px;
            color: var(--sales-muted);
            padding: 10px 16px;
        }

        #laporan-penjualan-section .sales-report-nav-btn.active {
            background: linear-gradient(135deg, var(--sales-navy), var(--sales-navy-2));
            color: #ffffff;
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
        }

        #laporan-penjualan-section .sales-report-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 24px;
            background:
                radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.28), transparent 34%),
                linear-gradient(135deg, #0f172a 0%, #1e293b 58%, #334155 100%);
            box-shadow: 0 22px 46px rgba(15, 23, 42, 0.16);
        }

        #laporan-penjualan-section .sales-report-hero::after {
            content: "";
            position: absolute;
            inset: auto 22px 0 22px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
        }

        #laporan-penjualan-section .sales-report-hero-main,
        #laporan-penjualan-section .sales-report-hero-metric {
            position: relative;
            z-index: 1;
        }

        #laporan-penjualan-section .sales-report-hero-label {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.22);
            color: #dbeafe;
            backdrop-filter: blur(10px);
        }

        #laporan-penjualan-section .sales-report-hero-title {
            color: #ffffff;
            letter-spacing: -0.055em;
        }

        #laporan-penjualan-section .sales-report-hero-sub {
            color: #cbd5e1;
            font-weight: 600;
        }

        #laporan-penjualan-section .sales-report-hero-metric {
            border: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.10);
            box-shadow: none;
            backdrop-filter: blur(12px);
        }

        #laporan-penjualan-section .sales-report-hero-metric-label {
            color: #bfdbfe;
            opacity: 1;
        }

        #laporan-penjualan-section .sales-report-hero-metric-value {
            color: #ffffff;
        }

        #laporan-penjualan-section .sales-report-kpi-grid {
            gap: 12px;
        }

        #laporan-penjualan-section .sales-report-kpi-card {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--sales-line);
            border-radius: 18px;
            background: var(--sales-paper);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.045);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        #laporan-penjualan-section .sales-report-kpi-card:hover {
            transform: translateY(-2px);
            border-color: rgba(30, 64, 175, 0.22);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.075);
        }

        #laporan-penjualan-section .sales-report-kpi-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #cbd5e1;
        }

        #laporan-penjualan-section .sales-report-kpi-card.primary::before { background: #1d4ed8; }
        #laporan-penjualan-section .sales-report-kpi-card.success::before { background: #047857; }
        #laporan-penjualan-section .sales-report-kpi-card.warning::before { background: #b45309; }
        #laporan-penjualan-section .sales-report-kpi-card.danger::before { background: #be123c; }
        #laporan-penjualan-section .sales-report-kpi-card.purple::before { background: #4f46e5; }
        #laporan-penjualan-section .sales-report-kpi-card.slate::before,
        #laporan-penjualan-section .sales-report-kpi-card.neutral::before { background: #475569; }

        #laporan-penjualan-section .sales-report-kpi-icon {
            border-radius: 13px;
            background: #f8fafc;
            color: var(--sales-ink-soft);
            border: 1px solid #e2e8f0;
        }

        #laporan-penjualan-section .sales-report-kpi-card.primary .sales-report-kpi-icon { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
        #laporan-penjualan-section .sales-report-kpi-card.success .sales-report-kpi-icon { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
        #laporan-penjualan-section .sales-report-kpi-card.warning .sales-report-kpi-icon { background: #fffbeb; color: #b45309; border-color: #fde68a; }
        #laporan-penjualan-section .sales-report-kpi-card.danger .sales-report-kpi-icon { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
        #laporan-penjualan-section .sales-report-kpi-card.purple .sales-report-kpi-icon { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }

        #laporan-penjualan-section .analytics-store-mini-label,
        #laporan-penjualan-section .sales-report-detail-label {
            color: #64748b;
            font-weight: 900;
            letter-spacing: .075em;
        }

        #laporan-penjualan-section .analytics-store-mini-value {
            color: var(--sales-ink);
            font-weight: 900;
            letter-spacing: -0.035em;
        }

        #laporan-penjualan-section .analytics-store-mini-sub {
            color: var(--sales-muted);
        }

        #laporan-penjualan-section .sales-report-layer-card {
            border: 1px solid var(--sales-line);
            border-radius: 24px;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.055);
        }

        #laporan-penjualan-section .analytics-shell-head-minimal {
            padding-bottom: 14px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--sales-line);
        }

        #laporan-penjualan-section .analytics-group-title {
            color: var(--sales-ink);
            font-size: 17px;
            letter-spacing: -0.025em;
        }

        #laporan-penjualan-section .analytics-store-card.sales-report-note-card {
            border: 1px solid var(--sales-line);
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
        }

        #laporan-penjualan-section .analytics-store-card.sales-report-note-card::before {
            height: 3px;
            background: linear-gradient(90deg, #0f172a, #1d4ed8, #0f766e);
        }

        #laporan-penjualan-section .analytics-store-card-head {
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border-bottom: 1px solid var(--sales-line);
            padding: 17px 18px 12px;
        }

        #laporan-penjualan-section .analytics-store-name {
            color: var(--sales-ink);
            font-size: 17px;
            font-weight: 900;
        }

        #laporan-penjualan-section .analytics-store-subtitle {
            color: var(--sales-muted);
            font-weight: 700;
        }

        #laporan-penjualan-section .analytics-store-rank {
            background: #f8fafc;
            border-color: #e2e8f0;
            color: var(--sales-ink-soft);
        }

        #laporan-penjualan-section .analytics-store-card-body {
            padding: 14px 18px 16px;
        }

        #laporan-penjualan-section .analytics-store-list {
            gap: 0;
        }

        #laporan-penjualan-section .analytics-store-row {
            padding: 9px 0;
            border-bottom: 1px solid rgba(203, 213, 225, 0.62);
        }

        #laporan-penjualan-section .analytics-store-row-label {
            color: var(--sales-ink-soft);
            font-weight: 800;
        }

        #laporan-penjualan-section .analytics-store-row-sub {
            color: #94a3b8;
            font-weight: 650;
        }

        #laporan-penjualan-section .analytics-store-row-value {
            color: var(--sales-ink);
            font-weight: 850;
            letter-spacing: -0.02em;
        }

        #laporan-penjualan-section .analytics-store-row.is-omset .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-omset .analytics-store-row-value {
            color: var(--sales-blue);
        }

        #laporan-penjualan-section .analytics-store-row.is-ads .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-ads .analytics-store-row-value {
            color: var(--sales-amber);
        }

        #laporan-penjualan-section .analytics-store-row.is-return .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-return .analytics-store-row-value {
            color: var(--sales-red);
        }

        #laporan-penjualan-section .analytics-store-row.is-hpp .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-hpp .analytics-store-row-value,
        #laporan-penjualan-section .analytics-store-row.is-admin .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-admin .analytics-store-row-value,
        #laporan-penjualan-section .analytics-store-row.is-service .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-service .analytics-store-row-value {
            color: #475569;
        }

        #laporan-penjualan-section .analytics-store-row-profit-percent {
            margin-top: 8px;
            padding: 11px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #f8fafc;
        }

        #laporan-penjualan-section .analytics-store-row-profit-percent .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row-profit-percent .analytics-store-row-value {
            color: var(--sales-ink);
            font-weight: 900;
        }

        #laporan-penjualan-section .analytics-store-row-profit-percent.negative .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row-profit-percent.negative .analytics-store-row-value {
            color: var(--sales-red);
        }

        #laporan-penjualan-section .analytics-store-row.is-profit {
            margin-top: 10px;
            padding: 14px;
            border-color: #bbf7d0;
            border-radius: 16px;
            background: linear-gradient(135deg, #ecfdf5, #ffffff);
        }

        #laporan-penjualan-section .analytics-store-row.is-profit.negative {
            border-color: #fecdd3;
            background: linear-gradient(135deg, #fff1f2, #ffffff);
        }

        #laporan-penjualan-section .analytics-store-row.is-profit .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-profit .analytics-store-row-value {
            color: var(--sales-green);
        }

        #laporan-penjualan-section .analytics-store-row.is-profit.negative .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row.is-profit.negative .analytics-store-row-value {
            color: var(--sales-red);
        }

        #laporan-penjualan-section .sales-report-health-badge {
            border-color: #bbf7d0;
            background: #ecfdf5;
            color: var(--sales-green);
        }

        #laporan-penjualan-section .sales-report-health-badge.negative {
            border-color: #fecdd3;
            background: #fff1f2;
            color: var(--sales-red);
        }

        #laporan-penjualan-section .sales-report-detail-panel {
            border: 1px solid var(--sales-line);
            background: #f8fafc;
        }

        #laporan-penjualan-section .sales-report-detail-item {
            border-color: var(--sales-line);
            box-shadow: none;
        }

        @media(max-width: 575.98px) {
            #laporan-penjualan-section .sales-report-page-head {
                padding: 16px;
            }
            #laporan-penjualan-section .sales-report-nav {
                width: 100%;
            }
            #laporan-penjualan-section .sales-report-nav-btn {
                flex: 1 1 auto;
                justify-content: center;
            }
        }


        /* Patch kontras Laporan Penjualan All + status profit toko */
        #laporan-penjualan-section .sales-report-hero {
            background:
                radial-gradient(circle at 94% 8%, rgba(96, 165, 250, 0.38), transparent 30%),
                linear-gradient(135deg, #08111f 0%, #0f172a 48%, #1e3a8a 100%);
        }

        #laporan-penjualan-section .sales-report-hero-label {
            background: #ffffff;
            border-color: rgba(255, 255, 255, 0.92);
            color: #0f172a;
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
        }

        #laporan-penjualan-section .sales-report-hero-title {
            color: #ffffff;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
        }

        #laporan-penjualan-section .sales-report-hero-sub {
            color: #e2e8f0;
        }

        #laporan-penjualan-section .sales-report-hero-metric {
            background: #ffffff;
            color: #0f172a;
            border: 1px solid rgba(255, 255, 255, 0.88);
            border-left: 6px solid #047857;
            box-shadow: 0 22px 44px rgba(15, 23, 42, 0.22);
            backdrop-filter: none;
        }

        #laporan-penjualan-section .sales-report-hero-metric-label {
            color: #475569;
            opacity: 1;
        }

        #laporan-penjualan-section .sales-report-hero-metric-value {
            color: #047857;
            text-shadow: none;
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative {
            border-left-color: #be123c;
            background: linear-gradient(135deg, #fff1f2 0%, #ffffff 70%);
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
            color: #be123c;
        }

        #laporan-penjualan-section .analytics-store-row-profit-percent.warning .analytics-store-row-label,
        #laporan-penjualan-section .analytics-store-row-profit-percent.warning .analytics-store-row-value {
            color: #b45309;
        }

        #laporan-penjualan-section .sales-report-health-badge.strong,
        #laporan-penjualan-section .sales-report-health-badge.positive {
            border-color: #bbf7d0;
            background: #ecfdf5;
            color: #047857;
        }

        #laporan-penjualan-section .sales-report-health-badge.warning {
            border-color: #fde68a;
            background: #fffbeb;
            color: #b45309;
        }

        #laporan-penjualan-section .sales-report-health-badge.negative {
            border-color: #fecdd3;
            background: #fff1f2;
            color: #be123c;
        }


        /* Final fix: header Laporan Penjualan All harus terbaca jelas di background terang */
        #laporan-penjualan-section .sales-report-hero.card,
        #laporan-penjualan-section .sales-report-hero {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 56%, #eef2ff 100%) !important;
            background-color: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-top: 4px solid #0f172a !important;
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
            color: #0f172a !important;
        }

        #laporan-penjualan-section .sales-report-hero::after {
            background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent) !important;
        }

        #laporan-penjualan-section .sales-report-hero-label {
            background: #0f172a !important;
            border-color: #0f172a !important;
            color: #ffffff !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-title {
            color: #0f172a !important;
            text-shadow: none !important;
            letter-spacing: -0.045em !important;
        }

        #laporan-penjualan-section .sales-report-hero-sub {
            color: #475569 !important;
            text-shadow: none !important;
            font-weight: 750 !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric {
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #dbeafe !important;
            border-left: 7px solid #047857 !important;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric-label {
            color: #475569 !important;
            opacity: 1 !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric-value {
            color: #047857 !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative {
            border-left-color: #be123c !important;
            background: linear-gradient(135deg, #fff1f2 0%, #ffffff 74%) !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
            color: #be123c !important;
        }



        /* Laporan Penjualan Per Produk - Executive Table View */
        #laporan-penjualan-section .sales-report-product-hero {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) minmax(260px, 380px);
            gap: 16px;
            padding: 22px;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
        }

        #laporan-penjualan-section .sales-report-product-profit-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 18px;
            border-radius: 20px;
            background: #0f172a;
            border: 1px solid #1e293b;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
            color: #ffffff;
        }

        #laporan-penjualan-section .sales-report-product-profit-card.negative {
            background: #7f1d1d;
            border-color: #991b1b;
        }

        #laporan-penjualan-section .sales-report-product-profit-label {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.72);
        }

        #laporan-penjualan-section .sales-report-product-profit-value {
            margin-top: 8px;
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1;
            font-weight: 950;
            letter-spacing: -.045em;
            color: #ffffff;
            word-break: break-word;
        }

        #laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value {
            color: #fecaca;
        }

        #laporan-penjualan-section .sales-report-product-profit-card .analytics-store-mini-sub {
            color: rgba(255, 255, 255, 0.68) !important;
        }

        #laporan-penjualan-section .sales-report-product-summary-strip {
            display: grid;
            grid-template-columns: repeat(7, minmax(126px, 1fr));
            gap: 0;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
        }

        #laporan-penjualan-section .sales-report-product-summary-item {
            min-width: 0;
            padding: 14px 16px;
            border-right: 1px solid #e2e8f0;
        }

        #laporan-penjualan-section .sales-report-product-summary-item:last-child {
            border-right: none;
        }

        #laporan-penjualan-section .sales-report-product-summary-label {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: .055em;
            text-transform: uppercase;
            color: #64748b;
            white-space: nowrap;
        }

        #laporan-penjualan-section .sales-report-product-summary-value {
            margin-top: 7px;
            font-size: 15px;
            font-weight: 900;
            letter-spacing: -.02em;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #laporan-penjualan-section .sales-report-product-summary-note {
            margin-top: 3px;
            font-size: 10.5px;
            color: #94a3b8;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value { color: #047857; }
        #laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value { color: #be123c; }
        #laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value { color: #1d4ed8; }
        #laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value { color: #b45309; }

        #laporan-penjualan-section .sales-report-product-estimate-note {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 14px;
            align-items: flex-start;
            padding: 18px 20px;
            margin-bottom: 18px;
            border: 1px solid #fde68a;
            border-radius: 20px;
            background: linear-gradient(135deg, #fffbeb 0%, #ffffff 72%);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.045);
        }

        #laporan-penjualan-section .sales-report-product-estimate-icon {
            width: 42px;
            height: 42px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fef3c7;
            color: #92400e;
            font-size: 20px;
            flex-shrink: 0;
        }

        #laporan-penjualan-section .sales-report-product-estimate-title {
            font-size: 14px;
            font-weight: 950;
            color: #78350f;
            letter-spacing: -0.015em;
            margin-bottom: 5px;
        }

        #laporan-penjualan-section .sales-report-product-estimate-text {
            font-size: 12.5px;
            line-height: 1.65;
            color: #92400e;
            font-weight: 650;
            margin: 0;
        }

        #laporan-penjualan-section .sales-report-product-estimate-points {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        #laporan-penjualan-section .sales-report-product-estimate-points span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 9px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid #fde68a;
            color: #78350f;
            font-size: 10.8px;
            font-weight: 850;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            #laporan-penjualan-section .sales-report-product-estimate-note {
                grid-template-columns: 1fr;
            }
        }

        #laporan-penjualan-section .sales-report-all-summary-strip {
            grid-template-columns: repeat(8, minmax(120px, 1fr));
        }

        #laporan-penjualan-section .sales-report-all-cost-strip {
            grid-template-columns: repeat(4, minmax(180px, 1fr));
        }

        #laporan-penjualan-section .sales-report-combined-store-section {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid #e2e8f0;
        }

        #laporan-penjualan-section .sales-report-combined-store-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        #laporan-penjualan-section .sales-report-combined-store-title {
            font-size: 15px;
            font-weight: 950;
            color: #0f172a;
            letter-spacing: -0.02em;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        #laporan-penjualan-section .sales-report-combined-store-sub {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 650;
            color: #64748b;
        }

        #laporan-penjualan-section .sales-report-product-panel {
            border: 1px solid #e2e8f0 !important;
            border-radius: 22px !important;
            background: #ffffff !important;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055) !important;
            overflow: hidden;
        }

        #laporan-penjualan-section .sales-report-product-panel-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid #e2e8f0;
        }

        #laporan-penjualan-section .sales-report-product-toolbar {
            display: grid;
            grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(130px, .6fr) auto;
            align-items: end;
            gap: 10px;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
            margin-bottom: 14px;
        }

        #laporan-penjualan-section .sales-report-product-toolbar .form-label {
            color: #475569;
            font-size: 11px;
            font-weight: 900 !important;
            letter-spacing: .035em;
            text-transform: uppercase;
        }

        #laporan-penjualan-section .sales-report-product-toolbar .form-control,
        #laporan-penjualan-section .sales-report-product-toolbar .form-select {
            min-height: 38px;
            border-radius: 11px !important;
            font-size: 12px;
            border-color: #dbe3ef;
            box-shadow: none;
        }

        #laporan-penjualan-section .sales-report-product-toolbar .form-control:focus,
        #laporan-penjualan-section .sales-report-product-toolbar .form-select:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
        }

        #laporan-penjualan-section .sales-report-product-count-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 38px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            color: #475569;
            font-size: 11.5px;
            font-weight: 900;
            white-space: nowrap;
        }

        #laporan-penjualan-section .sales-report-product-table-wrap {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            overflow: auto;
            background: #ffffff;
            box-shadow: none;
            max-height: 68vh;
        }

        #laporan-penjualan-section .sales-report-product-table {
            min-width: 1120px;
            margin: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        #laporan-penjualan-section .sales-report-product-table thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #f8fafc;
            color: #475569;
            font-size: 10.5px;
            font-weight: 950;
            letter-spacing: .055em;
            text-transform: uppercase;
            border-bottom: 1px solid #dbe3ef;
            border-right: 1px solid #edf2f7;
            white-space: nowrap;
            padding: 10px 12px;
        }

        #laporan-penjualan-section .sales-report-product-table thead tr:first-child th {
            background: #0f172a;
            color: #ffffff;
            border-color: #1e293b;
            text-align: center;
            letter-spacing: .07em;
        }

        #laporan-penjualan-section .sales-report-product-table thead tr:nth-child(2) th {
            top: 36px;
        }


        #laporan-penjualan-section .sales-report-product-table tbody td,
        #laporan-penjualan-section .sales-report-product-table tfoot td {
            font-size: 12px;
            border-right: 1px solid #f1f5f9;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
            padding: 10px 12px;
            background: #ffffff;
        }

        #laporan-penjualan-section .sales-report-product-table tbody tr:hover td {
            background: #f8fbff;
        }

        #laporan-penjualan-section .sales-report-product-table tfoot td {
            position: sticky;
            bottom: 0;
            z-index: 2;
            background: #f8fafc;
            border-top: 1px solid #cbd5e1;
            font-weight: 950;
        }

        #laporan-penjualan-section .sales-report-product-sticky-col {
            position: sticky !important;
            left: 0;
            z-index: 4 !important;
            min-width: 310px;
            max-width: 390px;
            box-shadow: 8px 0 18px rgba(15, 23, 42, 0.04);
        }

        #laporan-penjualan-section .sales-report-product-table thead .sales-report-product-sticky-col {
            z-index: 5 !important;
        }

        #laporan-penjualan-section .sales-report-product-table tbody .sales-report-product-sticky-col,
        #laporan-penjualan-section .sales-report-product-table tfoot .sales-report-product-sticky-col {
            background: #ffffff;
        }

        #laporan-penjualan-section .sales-report-product-table tbody tr:hover .sales-report-product-sticky-col {
            background: #f8fbff;
        }

        #laporan-penjualan-section .sales-report-product-name {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            font-weight: 900;
            color: #0f172a;
            line-height: 1.35;
        }

        #laporan-penjualan-section .sales-report-product-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 24px;
            padding: 0 8px;
            border-radius: 999px;
            background: #eff6ff;
            color: #1d4ed8;
            font-size: 11px;
            font-weight: 950;
            border: 1px solid #bfdbfe;
            flex-shrink: 0;
        }

        #laporan-penjualan-section .sales-report-product-meta {
            margin-top: 5px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        #laporan-penjualan-section .sales-report-product-money {
            font-weight: 900;
            white-space: nowrap;
        }

        #laporan-penjualan-section .sales-report-product-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 96px;
            padding: 6px 9px;
            border-radius: 999px;
            font-size: 10.5px;
            font-weight: 950;
            white-space: nowrap;
            border: 1px solid #bbf7d0;
            background: #ecfdf5;
            color: #047857;
        }

        #laporan-penjualan-section .sales-report-product-status.warning {
            border-color: #fde68a;
            background: #fffbeb;
            color: #b45309;
        }

        #laporan-penjualan-section .sales-report-product-status.negative {
            border-color: #fecdd3;
            background: #fff1f2;
            color: #be123c;
        }

        #laporan-penjualan-section .sales-report-product-status.strong {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: #1d4ed8;
        }

        #laporan-penjualan-section .sales-report-product-margin {
            margin-top: 5px;
            font-size: 11px;
            font-weight: 900;
            color: #64748b;
            text-align: center;
        }

        #laporan-penjualan-section .sales-report-product-detail-row td {
            background: #f8fafc !important;
            padding: 0 !important;
        }

        #laporan-penjualan-section .sales-report-product-detail-panel {
            display: none;
            padding: 14px 16px;
            border-left: 4px solid #2563eb;
        }

        #laporan-penjualan-section .sales-report-product-detail-row.show .sales-report-product-detail-panel {
            display: block;
        }

        #laporan-penjualan-section .sales-report-product-detail-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(130px, 1fr));
            gap: 10px;
        }

        #laporan-penjualan-section .sales-report-product-detail-item {
            border: 1px solid #e2e8f0;
            border-radius: 13px;
            background: #ffffff;
            padding: 10px 12px;
        }

        #laporan-penjualan-section .sales-report-product-detail-label {
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: #64748b;
        }

        #laporan-penjualan-section .sales-report-product-detail-value {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 900;
            color: #0f172a;
        }

        #laporan-penjualan-section .sales-report-product-row-toggle {
            border: none;
            background: transparent;
            color: #2563eb;
            font-size: 11px;
            font-weight: 900;
            padding: 0;
            margin-top: 7px;
        }

        #laporan-penjualan-section .sales-report-product-store-breakdown {
            margin-top: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            background: #ffffff;
            overflow: hidden;
        }

        #laporan-penjualan-section .sales-report-product-store-breakdown-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 14px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
            font-size: 12px;
            color: #0f172a;
        }

        #laporan-penjualan-section .sales-report-product-store-breakdown-head span {
            display: block;
            margin-top: 3px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
        }

        #laporan-penjualan-section .sales-report-product-store-table thead th {
            background: #ffffff !important;
            color: #475569 !important;
            border-bottom: 1px solid #e2e8f0 !important;
            font-size: 10px !important;
            font-weight: 900 !important;
        }

        #laporan-penjualan-section .sales-report-product-store-table td {
            font-size: 11.5px !important;
            border-bottom: 1px solid #eef2f7 !important;
        }

        #laporan-penjualan-section .sales-report-product-store-breakdown-empty {
            margin-top: 14px;
            padding: 12px 14px;
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            background: #ffffff;
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
        }

        /* Clean mode tabel produk: header satu baris, kolom lebih sedikit, tetap mudah diaudit */
        #laporan-penjualan-section .sales-report-product-table thead tr:first-child th {
            background: #f8fafc;
            color: #334155;
            border-color: #e2e8f0;
            text-align: right;
            letter-spacing: .045em;
        }

        #laporan-penjualan-section .sales-report-product-table thead th.sales-report-product-sticky-col {
            text-align: left !important;
            background: #f8fafc !important;
            color: #334155 !important;
        }

        #laporan-penjualan-section .sales-report-product-table tbody td,
        #laporan-penjualan-section .sales-report-product-table tfoot td {
            padding: 11px 12px;
        }

        #laporan-penjualan-section .sales-report-product-cell-main {
            display: block;
            font-size: 12.5px;
            font-weight: 900;
            color: #0f172a;
            white-space: nowrap;
        }

        #laporan-penjualan-section .sales-report-product-cell-sub {
            display: block;
            margin-top: 3px;
            font-size: 10.5px;
            font-weight: 750;
            color: #94a3b8;
            white-space: nowrap;
        }

        #laporan-penjualan-section .sales-report-product-detail-grid {
            grid-template-columns: repeat(6, minmax(120px, 1fr));
        }

        @media (max-width: 1400px) {
            #laporan-penjualan-section .sales-report-product-summary-strip {
                grid-template-columns: repeat(4, minmax(140px, 1fr));
            }
            #laporan-penjualan-section .sales-report-product-summary-item:nth-child(4n) {
                border-right: none;
            }
        }

        @media (max-width: 991.98px) {
            #laporan-penjualan-section .sales-report-product-hero {
                grid-template-columns: 1fr;
            }
            #laporan-penjualan-section .sales-report-product-toolbar {
                grid-template-columns: 1fr 1fr;
            }
            #laporan-penjualan-section .sales-report-product-count-pill {
                justify-content: flex-start;
            }
        }

        @media (max-width: 767.98px) {
            #laporan-penjualan-section .sales-report-product-summary-strip,
            #laporan-penjualan-section .sales-report-product-toolbar,
            #laporan-penjualan-section .sales-report-product-detail-grid {
                grid-template-columns: 1fr;
            }
            #laporan-penjualan-section .sales-report-product-summary-item {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }
            #laporan-penjualan-section .sales-report-product-summary-item:last-child {
                border-bottom: none;
            }
        }



/* ===== TBH MERGED MODULE STYLES (moved from body/trailing style blocks) ===== */

            .packing-simple-tabs{display:inline-flex;gap:8px;padding:6px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.05);flex-wrap:wrap;margin-bottom:18px}
            .packing-simple-tab{border:0;background:transparent;color:#64748b;padding:10px 16px;border-radius:12px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:8px;transition:.18s ease;white-space:nowrap}
            .packing-simple-tab:hover{background:#f8fafc;color:#0f172a}
            .packing-simple-tab.active{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;box-shadow:0 10px 20px rgba(22,163,74,.16)}
            .packing-simple-pane{display:none}.packing-simple-pane.active{display:block;animation:fadeIn .24s ease}
            .packing-stok-in-shell{border:1px solid rgba(226,232,240,.95);border-radius:22px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.06);padding:18px}
            .packing-stok-in-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:16px 18px;border-radius:18px;border:1px solid #bbf7d0;background:linear-gradient(135deg,#f0fdf4 0%,#fff 72%)}
            .packing-stok-in-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#15803d;margin-bottom:5px}
            .packing-stok-in-title{font-size:18px;font-weight:800;color:#0f172a;margin:0}
            .packing-stok-in-sub{font-size:12px;color:#64748b;line-height:1.55;margin-top:5px;font-weight:600}
            .packing-form-card{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px;box-shadow:0 12px 28px rgba(15,23,42,.05)}
            .packing-form-card label{font-size:12px;font-weight:700;color:#475569;margin-bottom:6px}
            .packing-form-card .form-control,.packing-form-card .form-select{min-height:40px;border-radius:12px!important;border-color:#dbe3ef;font-size:12px}
            .packing-item-table-wrap{overflow-x:auto;padding-bottom:10px}.packing-item-table{min-width:880px;margin:0}.packing-item-table thead th{font-size:11px;font-weight:800;color:#475569;background:#f8fafc;border-color:#e2e8f0;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.packing-item-table tbody td{font-size:12px;vertical-align:middle}
            .packing-total-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;font-size:12px;font-weight:800}
            .packing-muted-box{border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b;padding:14px;font-size:12px;text-align:center}
            .packing-edit-modal .modal-content{border:1px solid rgba(226,232,240,.95);border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(15,23,42,.22)}
            .packing-edit-modal .modal-header{border:0;padding:20px 22px;background:linear-gradient(135deg,#f0fdfa 0%,#ffffff 70%);position:relative}
            .packing-edit-modal .modal-header:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#0f766e,#14b8a6)}
            .packing-edit-kicker{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0f766e;margin-bottom:4px}
            .packing-edit-title{font-size:18px;font-weight:900;color:#0f172a;margin:0}
            .packing-edit-sub{font-size:12px;color:#64748b;font-weight:600;margin-top:5px}
            .packing-edit-modal .modal-body{padding:20px 22px;background:#fff}
            .packing-edit-modal label{font-size:12px;font-weight:800;color:#475569;margin-bottom:6px}
            .packing-edit-modal .form-control{min-height:42px;border-radius:13px!important;border-color:#dbe3ef;font-size:12px}
            .packing-edit-modal .form-control:focus{border-color:#14b8a6;box-shadow:0 0 0 4px rgba(20,184,166,.10)}
            .packing-edit-modal .modal-footer{border-top:1px solid #e2e8f0;background:#f8fafc;padding:14px 22px}
            .packing-edit-save{background:linear-gradient(135deg,#0f766e,#14b8a6)!important;border-color:#0f766e!important;box-shadow:0 12px 24px rgba(20,184,166,.18)}

            .packing-template-analytics{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin-bottom:14px}
            .packing-template-stat{border:1px solid #e2e8f0;border-radius:16px;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);padding:13px 14px;box-shadow:0 10px 24px rgba(15,23,42,.045)}
            .packing-template-stat .label{font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#64748b;margin-bottom:5px}
            .packing-template-stat .value{font-size:20px;font-weight:900;color:#0f172a;line-height:1}
            .packing-template-stat.warning{border-color:#fed7aa;background:linear-gradient(135deg,#fff7ed 0%,#fff 72%)}
            .packing-template-stat.warning .value{color:#c2410c}
            .packing-template-toolbar{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:12px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
            .packing-template-toolbar .form-control,.packing-template-toolbar .form-select{min-height:36px;font-size:12px;border-radius:10px!important}
            .packing-product-audit-table{min-width:980px;margin:0}.packing-product-audit-table thead th{font-size:10.5px;font-weight:900;color:#475569;background:#f8fafc;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.packing-product-audit-table tbody td{font-size:12px;vertical-align:middle}.packing-product-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900}.packing-product-status.ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.packing-product-status.missing{background:#ffedd5;color:#9a3412;border:1px solid #fed7aa}.packing-product-status.empty{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
            @media(max-width:1200px){.packing-template-analytics{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media(max-width:700px){.packing-template-analytics{grid-template-columns:1fr}}
        


.trip-code-display{min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800;letter-spacing:.02em;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trip-supplier-block .card-body{padding:14px!important}.trip-supplier-block .row.g-3.align-items-end.mb-3{margin-bottom:10px!important}.trip-supplier-block .trip-items-container{margin-top:6px}
.tbh-trip-modal-backdrop{position:fixed;inset:0;z-index:2100;background:rgba(15,23,42,.34);display:flex;align-items:center;justify-content:center;padding:18px}.tbh-trip-modal-box{width:min(440px,100%);border-radius:20px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 70px rgba(15,23,42,.22);overflow:hidden}.tbh-trip-modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-bottom:1px solid #eef2f7}.tbh-trip-modal-icon{width:38px;height:38px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;font-size:18px}.tbh-trip-modal-icon.success{background:#ecfdf5;color:#16a34a;border-color:#bbf7d0}.tbh-trip-modal-icon.warning{background:#fffbeb;color:#d97706;border-color:#fde68a}.tbh-trip-modal-title{font-size:15px;font-weight:800;color:#0f172a;margin:0}.tbh-trip-modal-subtitle{font-size:12px;color:#64748b;margin-top:4px;line-height:1.55}.tbh-trip-modal-body{padding:14px 18px 4px}.tbh-trip-modal-summary{border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;padding:10px 12px;margin-top:10px;font-size:12px}.tbh-trip-modal-summary-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed #e2e8f0}.tbh-trip-modal-summary-row:last-child{border-bottom:0}.tbh-trip-modal-actions{padding:14px 18px 18px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.trip-supplier-master-tools{border:1px dashed #bfdbfe;background:#f8fbff;border-radius:14px;padding:10px}.trip-items-container{border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow-x:auto;padding:0}.trip-items-container .batch-row{min-width:920px;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding:0!important;border-bottom:1px solid #eef2f7!important}.trip-items-container .batch-row:last-child{border-bottom:0!important}.trip-items-container .batch-row-head{display:none!important}.trip-items-container .batch-row>.row{display:grid;grid-template-columns:minmax(250px,2.2fr) minmax(130px,1fr) minmax(110px,.85fr) minmax(90px,.65fr) minmax(145px,1fr) 52px;gap:0!important;align-items:stretch;margin:0!important}.trip-items-container .batch-row>.row>[class*=col-]{width:auto;max-width:none;padding:8px!important;border-right:1px solid #eef2f7}.trip-items-container .batch-row>.row>[class*=col-]:last-child{border-right:0}.trip-items-container .batch-row label{display:block;margin-bottom:4px;font-size:10px!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.04em}.trip-items-container .form-control,.trip-items-container .form-select{min-height:34px!important;font-size:11px!important;padding:5px 8px!important;border-radius:9px!important}.trip-items-container .product-search-hint{display:none}.trip-items-container .btn{min-height:34px;padding:5px 8px;border-radius:9px}

/* NOTA RINCIAN ONGKIR */
.nota-rincian { font-size:12px; padding:10px 6px; }
.nota-group { margin-bottom:10px; }
.nota-title { font-weight:700; margin-bottom:4px; color:#0f172a; }
.nota-row { display:flex; justify-content:space-between; padding:2px 0; color:#475569; }
.nota-row span:last-child { font-weight:600; text-align:right; }
.nota-divider { border-top:1px dashed #cbd5e1; margin:8px 0; }
.nota-total { display:flex; justify-content:space-between; font-weight:800; color:#16a34a; }


/* FIX FULL WIDTH RINCIAN ONGKIR */
.rincian-row-full {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
}

.rincian-inner {
    max-width: 100%;
    width: 100%;
}


        /* ===== Modul Gaji Karyawan ===== */
        .payroll-shell { display: grid; gap: 18px; }
        .payroll-tabs { display: inline-flex; gap: 8px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--border-color); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
        .payroll-tab-btn { border: 0; background: transparent; color: #64748b; padding: 10px 14px; border-radius: 12px; font-size: 12px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
        .payroll-tab-btn.active { background: linear-gradient(135deg, var(--primary-color), #3b82f6); color: #fff; box-shadow: 0 10px 20px rgba(37,99,235,.16); }
        .payroll-pane { display: none; }
        .payroll-pane.active { display: block; animation: fadeIn .24s ease; }
        .payroll-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .payroll-kpi-card { border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; padding: 18px; box-shadow: 0 12px 28px rgba(15,23,42,.05); }
        .payroll-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #64748b; }
        .payroll-kpi-value { margin-top: 6px; font-size: 22px; font-weight: 900; color: #0f172a; }
        .payroll-kpi-sub { margin-top: 4px; font-size: 12px; color: #64748b; }
        .payroll-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
        .payroll-table { min-width: 980px; margin-bottom: 0; }
        .payroll-table thead th { background: #f8fafc; color: #475569; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; white-space: nowrap; }
        .payroll-table tbody td { font-size: 12px; white-space: nowrap; }
        .payroll-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; }
        .payroll-badge.active { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
        .payroll-badge.done { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
        @media (max-width: 991.98px) { .payroll-kpi-grid { grid-template-columns: 1fr; } }

    
        .payroll-kpi-grid-company { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
        .payroll-dashboard-wrap { display: grid; gap: 16px; }
        .payroll-dashboard-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 16px; align-items: stretch; padding: 20px; border-radius: 22px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 58%, #0f172a 100%); color: #ffffff; box-shadow: 0 18px 42px rgba(37, 99, 235, 0.20); overflow: hidden; position: relative; }
        .payroll-dashboard-hero::after { content: ""; position: absolute; right: -72px; top: -96px; width: 220px; height: 220px; border-radius: 999px; background: rgba(255,255,255,.12); }
        .payroll-dashboard-kicker { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; opacity: .88; margin-bottom: 8px; }
        .payroll-dashboard-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.03em; max-width: 760px; }
        .payroll-dashboard-subtitle { margin-top: 8px; font-size: 12px; line-height: 1.65; opacity: .86; max-width: 820px; }
        .payroll-dashboard-hero-value { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.20); border-radius: 18px; padding: 16px; background: rgba(255,255,255,.12); backdrop-filter: blur(4px); display: flex; flex-direction: column; justify-content: center; min-height: 122px; }
        .payroll-dashboard-hero-value span { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 900; opacity: .88; }
        .payroll-dashboard-hero-value strong { margin-top: 7px; font-size: 26px; line-height: 1.15; font-weight: 900; }
        .payroll-dashboard-hero-value small { margin-top: 6px; font-size: 11px; line-height: 1.45; opacity: .78; }
        .payroll-dashboard-total-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
        .payroll-dashboard-total-grid .payroll-kpi-card { display: flex; align-items: flex-start; gap: 13px; min-height: 130px; padding: 16px; border-color: rgba(226,232,240,.95); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 12px 28px rgba(15,23,42,.055); }
        .payroll-dashboard-total-grid .payroll-kpi-card-primary { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); }
        .payroll-kpi-icon { width: 38px; height: 38px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; font-size: 17px; }
        .payroll-dashboard-total-grid .payroll-kpi-value { font-size: 20px; letter-spacing: -.02em; }
        .payroll-dashboard-table-card { border-radius: 20px; box-shadow: 0 14px 32px rgba(15,23,42,.055); }
        @media (max-width: 991.98px) { .payroll-dashboard-hero { grid-template-columns: 1fr; } }
        .payroll-slip-panel { background: #f8fafc; }
        .payroll-slip-preview-shell { overflow-x: auto; padding: 14px; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 18px; }
        .payroll-slip-paper { width: 794px; min-height: 1123px; margin: 0 auto; background: #ffffff; color: #0f172a; border: 1px solid #d1d5db; border-radius: 0; padding: 44px 48px; box-shadow: 0 18px 40px rgba(15,23,42,.10); font-family: Inter, Arial, sans-serif; }
        .payroll-slip-empty { min-height: 520px; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 13px; text-align: center; }
        .payroll-slip-doc { width: 100%; }
        .payroll-slip-top { display: table; width: 100%; border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 18px; }
        .payroll-slip-company, .payroll-slip-heading { display: table-cell; vertical-align: top; }
        .payroll-slip-heading { text-align: right; }
        .payroll-slip-company-name { font-size: 18px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
        .payroll-slip-company-sub { margin-top: 4px; font-size: 11px; color: #64748b; line-height: 1.45; }
        .payroll-slip-title { font-size: 20px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
        .payroll-slip-ref { margin-top: 6px; font-size: 11px; color: #64748b; }
        .payroll-slip-info-grid { display: table; width: 100%; margin: 14px 0 18px; border: 1px solid #e2e8f0; }
        .payroll-slip-info-col { display: table-cell; width: 50%; vertical-align: top; padding: 12px 14px; }
        .payroll-slip-info-col + .payroll-slip-info-col { border-left: 1px solid #e2e8f0; }
        .payroll-slip-line { display: table; width: 100%; padding: 5px 0; font-size: 12px; }
        .payroll-slip-line span, .payroll-slip-line strong { display: table-cell; vertical-align: top; }
        .payroll-slip-line span { width: 42%; color: #64748b; }
        .payroll-slip-line strong { width: 58%; color: #0f172a; text-align: right; font-weight: 800; }
        .payroll-slip-section-title { margin: 18px 0 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #0f172a; }
        .payroll-slip-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
        .payroll-slip-table th { background: #f8fafc; color: #334155; border: 1px solid #dbe3ef; padding: 8px 10px; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
        .payroll-slip-table td { border: 1px solid #dbe3ef; padding: 8px 10px; }
        .payroll-slip-table .amount { text-align: right; font-weight: 800; white-space: nowrap; }
        .payroll-slip-summary { margin-top: 16px; border: 2px solid #0f172a; }
        .payroll-slip-summary-row { display: table; width: 100%; }
        .payroll-slip-summary-label, .payroll-slip-summary-value { display: table-cell; padding: 12px 14px; vertical-align: middle; }
        .payroll-slip-summary-label { width: 58%; font-size: 13px; font-weight: 900; text-transform: uppercase; background: #f8fafc; }
        .payroll-slip-summary-value { width: 42%; text-align: right; font-size: 18px; font-weight: 900; color: #1d4ed8; }
        .payroll-slip-note { min-height: 54px; border: 1px solid #dbe3ef; padding: 10px 12px; font-size: 12px; color: #334155; line-height: 1.55; }
        .payroll-slip-signatures { display: table; width: 100%; margin-top: 34px; table-layout: fixed; }
        .payroll-slip-signature { display: table-cell; text-align: center; font-size: 12px; color: #475569; }
        .payroll-slip-signature-line { margin: 54px auto 0; width: 76%; border-top: 1px solid #0f172a; padding-top: 7px; color: #0f172a; font-weight: 800; }
        .payroll-slip-footer { margin-top: 24px; padding-top: 10px; border-top: 1px dashed #cbd5e1; text-align: center; font-size: 10px; color: #94a3b8; }

        .payroll-slip-list { display: grid; gap: 12px; }
        .payroll-slip-list-item { border: 1px solid #e2e8f0; border-radius: 16px; background: #ffffff; overflow: hidden; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04); }
        .payroll-slip-list-head { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, .8fr) minmax(130px, .8fr) minmax(140px, .8fr) auto; gap: 12px; align-items: center; padding: 14px 16px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
        .payroll-slip-list-name { font-size: 13px; font-weight: 900; color: #0f172a; }
        .payroll-slip-list-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
        .payroll-slip-list-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 2px; }
        .payroll-slip-list-value { font-size: 12px; font-weight: 800; color: #0f172a; }
        .payroll-slip-list-value.amount { color: #1d4ed8; }
        .payroll-slip-detail { display: none; border-top: 1px solid #e2e8f0; background: #f8fafc; padding: 18px; }
        .payroll-slip-detail.active { display: block; animation: fadeIn .22s ease; }
        .payroll-slip-detail-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
        .payroll-slip-detail .payroll-slip-preview-shell { padding: 14px; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 16px; overflow-x: auto; }
        .payroll-slip-detail .payroll-slip-paper { margin-left: auto; margin-right: auto; }
        .payroll-slip-proof-box { max-width: 794px; margin: 14px auto 0; border: 1px solid #dbeafe; border-radius: 16px; background: #ffffff; padding: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); }
        .payroll-slip-proof-status { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; font-weight: 700; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; }
        .payroll-slip-proof-status.success { background: #ecfdf5; color: #047857; border: 1px solid #bbf7d0; }
        .payroll-slip-proof-status.warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
        .payroll-slip-proof-preview { border: 1px dashed #cbd5e1; border-radius: 14px; background: #f8fafc; padding: 10px; margin-bottom: 12px; text-align: center; }
        .payroll-slip-proof-preview img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; background: #fff; }
        .payroll-slip-proof-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
        @media (max-width: 768px) { .payroll-slip-proof-actions { grid-template-columns: 1fr; } .payroll-slip-proof-actions .btn { width: 100%; } }
        @media (max-width: 991.98px) { .payroll-slip-list-head { grid-template-columns: 1fr; align-items: flex-start; } .payroll-slip-list-head .btn { width: 100%; justify-content: center; } }
        @media print { @page { size: A4; margin: 10mm; } body { background: #fff !important; } body * { visibility: hidden !important; } .payroll-slip-paper, .payroll-slip-paper * { visibility: visible !important; } .payroll-slip-paper { position: absolute !important; left: 0 !important; top: 0 !important; width: 190mm !important; min-height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } .payroll-slip-toolbar, #sidebar, .payroll-tabs, .page-head { display: none !important; } }


/* Dropship PDF Export */

.dropship-pdf-center-shell { border: 1px solid #e2e8f0; border-radius: 22px; background: #ffffff; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06); padding: 22px; }
.dropship-pdf-center-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; padding: 16px 18px; border:1px solid #dbeafe; border-radius:18px; background:linear-gradient(135deg,#eff6ff 0%,#ffffff 72%); margin-bottom:16px; }
.dropship-pdf-center-kicker { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:900; letter-spacing:.08em; color:#1d4ed8; text-transform:uppercase; margin-bottom:6px; }
.dropship-pdf-center-title { font-size:20px; font-weight:900; color:#0f172a; margin:0; }
.dropship-pdf-filter-card, .dropship-pdf-list-card { border:1px solid #e2e8f0; border-radius:18px; background:#ffffff; padding:18px; box-shadow:0 10px 24px rgba(15,23,42,.04); }
.dropship-pdf-list-table { min-width: 1280px; border-collapse: separate; border-spacing: 0; }
.dropship-pdf-list-table thead th { background:#f8fafc; color:#475569; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.dropship-pdf-list-table tbody td { font-size:12px; border-bottom:1px solid #eef2f7; vertical-align:middle; }
.dropship-pdf-action-group { display:inline-flex; gap:6px; justify-content:center; flex-wrap:nowrap; }
.dropship-pdf-status { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; border:1px solid #e2e8f0; background:#f8fafc; color:#475569; }
.dropship-pdf-status.lunas { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.dropship-pdf-status.belum-lunas { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.dropship-pdf-preview-modal { background:#f8fafc; }
.dropship-pdf-preview-wrap { background:#e2e8f0; border-radius:18px; padding:18px; overflow:auto; }
.dropship-pdf-preview-wrap .dropship-pdf-paper { margin:0 auto; box-shadow:0 18px 48px rgba(15,23,42,.18); transform-origin:top center; }
.dropship-pdf-export-area { position: fixed; left: -99999px; top: 0; width: 794px; background: #ffffff; z-index: -1; pointer-events: none; }
.dropship-pdf-paper { width: 794px; min-height: 1122px; padding: 64px 58px 72px; background: #ffffff; color: #0f172a; font-family: Inter, Arial, sans-serif; box-sizing: border-box; overflow: visible; }
.dropship-pdf-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid #0f172a; padding-bottom: 16px; margin-bottom: 18px; }
.dropship-pdf-brand { font-size: 18px; font-weight: 900; letter-spacing: .04em; color: #1d4ed8; text-transform: uppercase; }
.dropship-pdf-subbrand { margin-top: 4px; font-size: 11px; line-height: 1.45; color: #64748b; }
.dropship-pdf-title { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #0f172a; text-align: right; }
.dropship-pdf-subtitle { margin-top: 6px; font-size: 11px; color: #64748b; text-align: right; font-weight: 700; }
.dropship-pdf-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 18px; }
.dropship-pdf-meta-item { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; background: #f8fafc; }
.dropship-pdf-meta-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 3px; }
.dropship-pdf-meta-value { font-size: 11px; font-weight: 800; color: #0f172a; line-height: 1.35; }
.dropship-pdf-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.dropship-pdf-kpi-card { border: 1px solid #dbeafe; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); padding: 10px 12px; min-height: 70px; }
.dropship-pdf-kpi-label { font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: 5px; }
.dropship-pdf-kpi-value { font-size: 15px; font-weight: 900; color: #0f172a; white-space: nowrap; }
.dropship-pdf-kpi-note { margin-top: 3px; font-size: 9px; color: #94a3b8; font-weight: 700; }
.dropship-pdf-section-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #0f172a; }
.dropship-pdf-section-title::before { content: ''; width: 6px; height: 18px; border-radius: 99px; background: #2563eb; display: inline-block; }
.dropship-pdf-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9px; color: #0f172a; margin-bottom: 10px; }
.dropship-pdf-table th { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; padding: 6px 7px; font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.dropship-pdf-table td { border: 1px solid #e2e8f0; padding: 6px 7px; vertical-align: top; line-height: 1.35; word-break: break-word; }
.dropship-pdf-table tbody tr:nth-child(even) td { background: #f8fafc; }
.dropship-pdf-table .amount, .dropship-pdf-table .number { text-align: right; white-space: nowrap; font-weight: 800; }
.dropship-pdf-table .center { text-align: center; }
.dropship-pdf-empty { border: 1px dashed #cbd5e1; border-radius: 12px; padding: 16px; text-align: center; color: #64748b; background: #f8fafc; font-size: 11px; font-weight: 700; }
.dropship-pdf-footer { margin-top: 20px; padding-top: 10px; border-top: 1px dashed #cbd5e1; display: flex; justify-content: space-between; gap: 12px; color: #94a3b8; font-size: 9px; font-weight: 700; }

/* Dropship PDF Portrait Fix: kertas portrait, compact, dan tidak mepet pinggir */
.dropship-pdf-preview-wrap { background:#e2e8f0; border-radius:18px; padding:22px; overflow:auto; }
.dropship-pdf-preview-wrap .dropship-pdf-paper { width:794px; min-height:1122px; margin:0 auto; box-shadow:0 18px 48px rgba(15,23,42,.18); transform-origin:top center; }
.dropship-pdf-export-area { width:794px !important; }
.dropship-pdf-paper { width:794px !important; min-height:1122px !important; padding:64px 58px 72px !important; box-sizing:border-box; overflow:visible !important; }
.dropship-pdf-header { gap:16px; padding-bottom:14px; margin-bottom:16px; border-bottom:1.5px solid #0f172a; page-break-inside: avoid; }
.dropship-pdf-brand { font-size:15px; }
.dropship-pdf-subbrand { font-size:9px; line-height:1.35; }
.dropship-pdf-title { font-size:18px; letter-spacing:.06em; }
.dropship-pdf-subtitle { font-size:9px; }
.dropship-pdf-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0 14px; }
.dropship-pdf-meta-item { border-radius:9px; padding:7px 9px; }
.dropship-pdf-meta-label { font-size:7.5px; margin-bottom:2px; }
.dropship-pdf-meta-value { font-size:9.5px; line-height:1.25; }
.dropship-pdf-kpi-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-bottom:14px; }
.dropship-pdf-kpi-card { border-radius:9px; padding:8px 7px; min-height:56px; }
.dropship-pdf-kpi-label { font-size:7.5px; margin-bottom:4px; letter-spacing:.04em; }
.dropship-pdf-kpi-value { font-size:11px; white-space:normal; line-height:1.15; }
.dropship-pdf-kpi-note { font-size:7px; line-height:1.15; }
.dropship-pdf-section-title { margin:16px 0 7px; font-size:9.5px; gap:6px; page-break-after: avoid; }
.dropship-pdf-section-title::before { width:4px; height:14px; }
.dropship-pdf-table { table-layout:fixed; font-size:7.2px; margin-bottom:12px; page-break-inside:auto; }
.dropship-pdf-table th { padding:4px 4px; font-size:6.5px; letter-spacing:.025em; }
.dropship-pdf-table td { padding:4.5px 4px; line-height:1.3; word-break:break-word; overflow-wrap:anywhere; }
.dropship-pdf-table .amount, .dropship-pdf-table .number { white-space:normal; }
.dropship-pdf-empty { padding:10px; font-size:9px; border-radius:9px; }
.dropship-pdf-footer { margin-top:14px; padding-top:8px; font-size:7.5px; }

.dropship-pdf-paper * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.dropship-pdf-table tr, .dropship-pdf-kpi-card, .dropship-pdf-meta-item { break-inside: avoid; page-break-inside: avoid; }
.dropship-pdf-page-note { margin-top: 8px; font-size: 8px; color: #94a3b8; }




/* === FINAL PATCH: Sidebar global period filter clean / no white legacy background === */
.sidebar-period-filter.global-period-filter-bar {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sidebar-period-filter.global-period-filter-bar::before,
.sidebar-period-filter.global-period-filter-bar::after,
.sidebar-period-filter .global-period-filter-left,
.sidebar-period-filter .global-period-filter-right,
.sidebar-period-filter .global-period-icon,
.sidebar-period-filter .global-period-title,
.sidebar-period-filter .global-period-sub {
    display: none !important;
}

.sidebar-period-filter #globalPeriodFilterSelect {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    padding: 0 34px 0 13px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: #dbeafe !important;
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(30, 64, 175, 0.14)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%2393c5fd' d='M4.47 6.03a.75.75 0 0 1 1.06 0L8 8.5l2.47-2.47a.75.75 0 1 1 1.06 1.06L8.53 10.09a.75.75 0 0 1-1.06 0L4.47 7.09a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 0 0, right 12px center !important;
    background-size: 100% 100%, 14px 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 16px rgba(15, 23, 42, 0.12) !important;
}

.sidebar-period-filter #globalPeriodFilterSelect:hover {
    border-color: rgba(147, 197, 253, 0.35) !important;
    background-image:
        linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(30, 64, 175, 0.18)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23dbeafe' d='M4.47 6.03a.75.75 0 0 1 1.06 0L8 8.5l2.47-2.47a.75.75 0 1 1 1.06 1.06L8.53 10.09a.75.75 0 0 1-1.06 0L4.47 7.09a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
}

.sidebar-period-filter #globalPeriodFilterSelect:focus {
    outline: none !important;
    border-color: rgba(147, 197, 253, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16), inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 16px rgba(15, 23, 42, 0.16) !important;
}

.sidebar-period-filter #globalPeriodFilterSelect option {
    color: #0f172a !important;
    background: #eaf2ff !important;
    font-weight: 800 !important;
}

.sidebar-period-reset {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    color: #dbeafe !important;
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(30, 64, 175, 0.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 16px rgba(15, 23, 42, 0.12) !important;
}

.sidebar-period-reset:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.32), rgba(30, 64, 175, 0.24)) !important;
    border-color: rgba(147, 197, 253, 0.42) !important;
}

body.sidebar-minimized .sidebar-period-filter.global-period-filter-bar {
    grid-template-columns: 44px !important;
    justify-content: center !important;
    justify-items: center !important;
}

body.sidebar-minimized .sidebar-period-filter #globalPeriodFilterSelect {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background-position: 0 0, center !important;
    background-size: 100% 100%, 14px 14px !important;
    cursor: pointer;
}

body.sidebar-minimized .sidebar-period-reset {
    display: none !important;
}

html[data-theme="dark"] .sidebar-period-filter #globalPeriodFilterSelect,
body[data-theme="dark"] .sidebar-period-filter #globalPeriodFilterSelect {
    color: #ede9fe !important;
    border-color: rgba(196, 181, 253, 0.20) !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, rgba(79, 70, 229, 0.24), rgba(67, 56, 202, 0.18)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23ddd6fe' d='M4.47 6.03a.75.75 0 0 1 1.06 0L8 8.5l2.47-2.47a.75.75 0 1 1 1.06 1.06L8.53 10.09a.75.75 0 0 1-1.06 0L4.47 7.09a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 18px rgba(15, 23, 42, 0.20) !important;
}

html[data-theme="dark"] .sidebar-period-reset,
body[data-theme="dark"] .sidebar-period-reset {
    color: #ede9fe !important;
    border-color: rgba(196, 181, 253, 0.20) !important;
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.24), rgba(67, 56, 202, 0.18)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 18px rgba(15, 23, 42, 0.20) !important;
}

@media (max-width: 991.98px) {
    body.sidebar-minimized .sidebar-period-filter.global-period-filter-bar {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }
    body.sidebar-minimized .sidebar-period-filter #globalPeriodFilterSelect {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 12px !important;
        color: #dbeafe !important;
        padding: 0 34px 0 13px !important;
        background-position: 0 0, right 12px center !important;
    }
    body.sidebar-minimized .sidebar-period-reset {
        display: inline-flex !important;
    }
}

        /* Tukar Barang sementara OFF dari Stok Out */
        [data-out-pane="exchange"],
        [data-out-pane-content="exchange"],
        #formTukarBarangCustomer {
            display: none !important;
        }

        /* Final fix: header Laporan Penjualan All harus terbaca jelas di background terang */
        #laporan-penjualan-section .sales-report-hero.card,
        #laporan-penjualan-section .sales-report-hero {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 56%, #eef2ff 100%) !important;
            background-color: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-top: 4px solid #0f172a !important;
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
            color: #0f172a !important;
        }

        #laporan-penjualan-section .sales-report-hero::after {
            background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent) !important;
        }

        #laporan-penjualan-section .sales-report-hero-label {
            background: #0f172a !important;
            border-color: #0f172a !important;
            color: #ffffff !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-title {
            color: #0f172a !important;
            text-shadow: none !important;
            letter-spacing: -0.045em !important;
        }

        #laporan-penjualan-section .sales-report-hero-sub {
            color: #475569 !important;
            text-shadow: none !important;
            font-weight: 750 !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric {
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #dbeafe !important;
            border-left: 7px solid #047857 !important;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric-label {
            color: #475569 !important;
            opacity: 1 !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric-value {
            color: #047857 !important;
            text-shadow: none !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative {
            border-left-color: #be123c !important;
            background: linear-gradient(135deg, #fff1f2 0%, #ffffff 74%) !important;
        }

        #laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
            color: #be123c !important;
        }




/* =====================================================================
   TBH OS DESIGN SYSTEM UNIFICATION - VISUAL ONLY
   Tujuan: menyamakan font, warna, card, tabel, form, tombol, tab, modal,
   dan shell antar navigasi tanpa mengubah ID, endpoint, logic, atau API.
   ===================================================================== */
:root {
    --tbh-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tbh-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --tbh-bg: #f3f6fb;
    --tbh-surface: #ffffff;
    --tbh-surface-soft: #f8fafc;
    --tbh-surface-blue: #f8fbff;
    --tbh-text: #0f172a;
    --tbh-muted: #64748b;
    --tbh-muted-2: #94a3b8;
    --tbh-border: #e2e8f0;
    --tbh-border-soft: #eef2f7;
    --tbh-primary: #2563eb;
    --tbh-primary-dark: #1d4ed8;
    --tbh-success: #16a34a;
    --tbh-warning: #d97706;
    --tbh-danger: #dc2626;
    --tbh-radius-xs: 8px;
    --tbh-radius-sm: 10px;
    --tbh-radius-md: 12px;
    --tbh-radius-lg: 16px;
    --tbh-radius-card: 18px;
    --tbh-radius-shell: 22px;
    --tbh-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.045);
    --tbh-shadow-card: 0 14px 34px rgba(15, 23, 42, 0.06);
    --tbh-shadow-pop: 0 22px 60px rgba(15, 23, 42, 0.16);
    --primary-color: var(--tbh-primary);
    --primary-dark: var(--tbh-primary-dark);
    --success-color: var(--tbh-success);
    --danger-color: var(--tbh-danger);
    --bg-light: var(--tbh-bg);
    --card-bg: var(--tbh-surface);
    --text-main: var(--tbh-text);
    --text-soft: var(--tbh-muted);
    --border-color: var(--tbh-border);
}

html, body {
    font-family: var(--tbh-font-body) !important;
    background: var(--tbh-bg) !important;
    color: var(--tbh-text) !important;
    letter-spacing: -0.01em;
}

#content {
    background: var(--tbh-bg) !important;
    color: var(--tbh-text) !important;
}

.content-section {
    color: var(--tbh-text);
}

.content-section.active {
    animation: fadeIn 0.22s ease;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.brand-title,
.card-title,
.modal-title,
[class*="-title"] {
    font-family: var(--tbh-font-heading) !important;
    letter-spacing: -0.025em;
}

.page-head,
[class*="page-head"],
.report-head,
.sales-report-head {
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.page-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    color: var(--tbh-text) !important;
    margin: 0 !important;
}

.section-note,
.text-muted,
[class*="subtitle"],
[class*="subtext"],
[class*="hint"] {
    color: var(--tbh-muted) !important;
}

/* Sidebar dibuat tetap modern, tapi lebih tenang dan konsisten */
#sidebar {
    background: var(--tbh-surface) !important;
    border-right: 1px solid var(--tbh-border) !important;
    box-shadow: none !important;
}

.nav-category {
    color: var(--tbh-muted-2) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.09em !important;
}

.nav-link {
    min-height: 42px !important;
    border-radius: var(--tbh-radius-md) !important;
    color: var(--tbh-muted) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.nav-link:hover {
    background: #eff6ff !important;
    color: var(--tbh-primary) !important;
    transform: translateX(1px);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--tbh-primary), #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18) !important;
}

/* Satu standar untuk card, shell, panel, box, wrapper penting */
.card,
.modal-content,
.dropdown-menu,
.toast,
.offcanvas,
.out-pane-shell,
.stok-in-modern-shell,
.return-marketplace-form-shell,
.return-marketplace-cost-panel,
.sales-report-shell,
.sales-report-section,
.report-panel,
.report-table-wrap,
.page-shell,
.master-data-shell,
.kas-utama-shell,
.inbon-shell,
.dropship-shell,
.finance-shell,
.payroll-shell,
.ads-spreadsheet-card,
.ads-upload-card,
.promo-dashboard-card,
.company-profile-card,
.admin-card,
.reset-card,
.history-card,
.asset-card,
.summary-card,
.kpi-card,
.analytics-kpi-card,
.product-db-card,
.mapping-card,
.marketplace-card,
.packing-card,
[class*="-table-wrap"],
[class*="-table-card"] {
    border: 1px solid var(--tbh-border) !important;
    border-radius: var(--tbh-radius-card) !important;
    background: var(--tbh-surface) !important;
    box-shadow: var(--tbh-shadow-card) !important;
    color: var(--tbh-text) !important;
}

/* Shell halaman besar dibuat lebih bersih dari card kecil */
.out-pane-shell,
.stok-in-modern-shell,
.return-marketplace-form-shell,
.sales-report-shell,
.page-shell,
.master-data-shell,
.kas-utama-shell,
.inbon-shell,
.dropship-shell,
.finance-shell,
.payroll-shell,
.company-profile-shell,
.admin-shell,
.reset-shell {
    border-radius: var(--tbh-radius-shell) !important;
    box-shadow: var(--tbh-shadow-card) !important;
    overflow: visible !important;
}

.card-header,
.modal-header,
[class*="-head"],
[class*="-header"] {
    border-color: var(--tbh-border-soft) !important;
}

.card-body {
    color: var(--tbh-text);
}

/* KPI tetap informatif tapi tidak terlalu ramai */
.asset-card,
.analytics-kpi-card,
.kpi-card,
[class*="kpi-card"],
[class*="summary-card"],
[class*="metric-card"] {
    border-radius: var(--tbh-radius-card) !important;
    box-shadow: var(--tbh-shadow-soft) !important;
}

.asset-card:not(.keep-gradient),
.analytics-kpi-card,
.kpi-card,
[class*="kpi-card"]:not(.keep-gradient) {
    background: var(--tbh-surface) !important;
    color: var(--tbh-text) !important;
}

[class*="kpi-label"],
[class*="summary-label"],
[class*="metric-label"],
[class*="stat-label"] {
    color: var(--tbh-muted) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.075em !important;
}

[class*="kpi-value"],
[class*="summary-value"],
[class*="metric-value"],
[class*="stat-value"] {
    color: var(--tbh-text) !important;
    font-family: var(--tbh-font-heading) !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
}

/* Form, input, select, textarea */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
    min-height: 40px !important;
    border-radius: var(--tbh-radius-md) !important;
    border-color: #dbe3ef !important;
    color: var(--tbh-text) !important;
    font-size: 12.5px !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.09) !important;
}

label,
.form-label,
.small.fw-bold,
[class*="field-label"] {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Button standar */
.btn {
    border-radius: var(--tbh-radius-md) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
}

.btn-sm {
    border-radius: var(--tbh-radius-sm) !important;
    font-size: 11.5px !important;
}

.btn-primary,
.btn-info {
    background: linear-gradient(135deg, var(--tbh-primary), #3b82f6) !important;
    border-color: var(--tbh-primary) !important;
    color: #ffffff !important;
}

.btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    border-color: #16a34a !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #dc2626 !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-light {
    background: var(--tbh-surface) !important;
    border-color: var(--tbh-border) !important;
    color: #334155 !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: var(--tbh-primary) !important;
}

/* Tab/switcher antar modul dibuat satu bahasa */
.out-pane-switcher,
.stok-in-pane-switcher,
.payroll-tabs,
.sales-report-tabs,
.report-tabs,
.ads-tabs,
.promo-tabs,
.master-data-tabs,
[class*="-tabs"],
[class*="-switcher"] {
    display: inline-flex;
    align-items: center;
    gap: 6px !important;
    padding: 6px !important;
    border: 1px solid var(--tbh-border) !important;
    border-radius: var(--tbh-radius-lg) !important;
    background: var(--tbh-surface) !important;
    box-shadow: var(--tbh-shadow-soft) !important;
    flex-wrap: wrap;
}

.out-pane-btn,
.stok-in-pane-btn,
.payroll-tab-btn,
.sales-report-tab,
.report-tab,
.ads-tab-btn,
.promo-tab-btn,
.master-data-tab,
[class*="-tab-btn"],
[class*="-pane-btn"] {
    border: 0 !important;
    background: transparent !important;
    color: var(--tbh-muted) !important;
    padding: 9px 13px !important;
    border-radius: var(--tbh-radius-md) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .18s ease !important;
}

.out-pane-btn:hover,
.stok-in-pane-btn:hover,
.payroll-tab-btn:hover,
.sales-report-tab:hover,
.report-tab:hover,
.ads-tab-btn:hover,
.promo-tab-btn:hover,
.master-data-tab:hover,
[class*="-tab-btn"]:hover,
[class*="-pane-btn"]:hover {
    background: #f8fafc !important;
    color: var(--tbh-text) !important;
}

.out-pane-btn.active,
.stok-in-pane-btn.active,
.payroll-tab-btn.active,
.sales-report-tab.active,
.report-tab.active,
.ads-tab-btn.active,
.promo-tab-btn.active,
.master-data-tab.active,
[class*="-tab-btn"].active,
[class*="-pane-btn"].active {
    background: linear-gradient(135deg, var(--tbh-primary), #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, .16) !important;
}

/* Tabel standar: seperti laporan profesional, tidak terlalu kotak tebal */
.table,
.table-stok,
.out-manual-table,
.return-marketplace-sheet-table,
.history-sheet-table,
.product-db-table,
.realtime-category-table,
.analytics-table,
.finance-table,
.finance-ledger-table,
.inbon-history-table,
.dropship-history-table,
.payroll-table,
.ads-table,
.sales-report-table,
.report-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--tbh-text) !important;
}

.table thead th,
.table-stok thead th,
.out-manual-table thead th,
.return-marketplace-sheet-table thead th,
.history-sheet-table thead th,
.product-db-table thead th,
.realtime-category-table thead th,
.analytics-table thead th,
.finance-table thead th,
.finance-ledger-table thead th,
.inbon-history-table thead th,
.dropship-history-table thead th,
.payroll-table thead th,
.ads-table thead th,
.sales-report-table thead th,
.report-table thead th {
    background: var(--tbh-surface-soft) !important;
    color: #475569 !important;
    border-color: var(--tbh-border) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.045em !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
}

.table tbody td,
.table-stok tbody td,
.out-manual-table tbody td,
.return-marketplace-sheet-table tbody td,
.history-sheet-table tbody td,
.product-db-table tbody td,
.realtime-category-table tbody td,
.analytics-table tbody td,
.finance-table tbody td,
.finance-ledger-table tbody td,
.inbon-history-table tbody td,
.dropship-history-table tbody td,
.payroll-table tbody td,
.ads-table tbody td,
.sales-report-table tbody td,
.report-table tbody td {
    border-color: var(--tbh-border-soft) !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    vertical-align: middle !important;
    background: var(--tbh-surface) !important;
}

.table tbody tr:hover td,
.table-stok tbody tr:hover td,
.history-sheet-table tbody tr:hover td,
.product-db-table tbody tr:hover td,
.analytics-table tbody tr:hover td,
.finance-table tbody tr:hover td,
.inbon-history-table tbody tr:hover td,
.dropship-history-table tbody tr:hover td,
.ads-table tbody tr:hover td,
.sales-report-table tbody tr:hover td,
.report-table tbody tr:hover td {
    background: #f8fbff !important;
}

.table-responsive,
.out-manual-table-scroll,
.return-marketplace-sheet-scroll,
[class*="table-scroll"] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.table-responsive::-webkit-scrollbar,
.out-manual-table-scroll::-webkit-scrollbar,
.return-marketplace-sheet-scroll::-webkit-scrollbar,
[class*="table-scroll"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb,
.out-manual-table-scroll::-webkit-scrollbar-thumb,
.return-marketplace-sheet-scroll::-webkit-scrollbar-thumb,
[class*="table-scroll"]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.sticky-col {
    background: var(--tbh-surface) !important;
    color: var(--tbh-text) !important;
    box-shadow: 2px 0 8px rgba(15,23,42,.045) !important;
}

/* Badge/status */
.badge,
[class*="badge"],
[class*="pill"],
[class*="tag"] {
    border-radius: 999px !important;
    font-weight: 850 !important;
}

/* Dropzone/import area */
.dropzone,
[class*="upload-zone"],
[class*="drop-zone"] {
    border: 1.5px dashed #bfdbfe !important;
    border-radius: var(--tbh-radius-card) !important;
    background: var(--tbh-surface-blue) !important;
    color: var(--tbh-text) !important;
}

.dropzone:hover,
.dropzone.dragover,
[class*="upload-zone"]:hover,
[class*="drop-zone"]:hover {
    background: #eff6ff !important;
    border-color: var(--tbh-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08) !important;
}

/* Modal dan popup */
.modal-content,
.tbh-trip-modal-box,
.return-edit-modal,
.bulk-edit-modal,
[class*="modal-box"] {
    border-radius: 22px !important;
    border: 1px solid var(--tbh-border) !important;
    box-shadow: var(--tbh-shadow-pop) !important;
    overflow: hidden !important;
}

.modal-header,
.tbh-trip-modal-head,
[class*="modal-head"] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-bottom: 1px solid var(--tbh-border-soft) !important;
}

/* Alert tetap berbeda warna, tapi radius dan font disamakan */
.alert {
    border-radius: var(--tbh-radius-lg) !important;
    border-width: 1px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* Laporan penjualan: dijaga simple, konsisten dengan nota/summary */
#laporan-penjualan-section .card,
#laporan-penjualan-section .sales-report-shell,
#laporan-penjualan-section .report-panel,
#laporan-penjualan-section [class*="summary"],
#laporan-penjualan-section [class*="kpi"] {
    background: var(--tbh-surface) !important;
    border-color: var(--tbh-border) !important;
    box-shadow: var(--tbh-shadow-soft) !important;
}

#laporan-penjualan-section table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
}

/* Hindari tampilan terlalu kotak-kotak pada rincian laporan */
#laporan-penjualan-section .report-detail,
#laporan-penjualan-section .sales-detail,
#laporan-penjualan-section [class*="detail-row"],
#laporan-penjualan-section [class*="rincian"] {
    border-color: var(--tbh-border-soft) !important;
}

/* Area return marketplace dan stok in/out disamakan */
.return-marketplace-hero,
.out-pane-head,
.return-cost-title,
.sales-report-head,
.inbon-head,
.dropship-head,
.finance-head,
.kas-utama-head {
    background: transparent !important;
    color: var(--tbh-text) !important;
}

.return-cost-grid,
.return-marketplace-mini-kpis,
.payroll-kpi-grid,
[class*="summary-grid"],
[class*="kpi-grid"] {
    gap: 12px !important;
}

.return-cost-field,
.return-marketplace-mini-kpis > div,
[class*="mini-kpi"],
[class*="cost-field"] {
    border: 1px solid var(--tbh-border) !important;
    border-radius: var(--tbh-radius-lg) !important;
    background: var(--tbh-surface) !important;
    box-shadow: var(--tbh-shadow-soft) !important;
}

.return-cost-field.total {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.return-cost-formula,
.return-action-info,
.out-manual-summary,
.exchange-summary-card,
.stok-in-legacy-note,
.out-shopee-context-info {
    border-radius: var(--tbh-radius-lg) !important;
    box-shadow: none !important;
}

/* Image/product preview */
.img-preview,
.product-image,
[class*="image-preview"],
[class*="img-preview"] {
    border-radius: var(--tbh-radius-md) !important;
    border: 1px solid var(--tbh-border) !important;
    background: var(--tbh-surface-soft) !important;
}

/* Responsif: padding tidak terlalu berat di layar kecil */
@media (max-width: 991.98px) {
    #content {
        padding: 18px !important;
    }
    .page-title {
        font-size: 18px !important;
    }
    .card,
    .out-pane-shell,
    .stok-in-modern-shell,
    .return-marketplace-form-shell,
    .sales-report-shell,
    .page-shell {
        border-radius: 18px !important;
    }
}

@media (max-width: 576px) {
    #content {
        padding: 14px !important;
    }
    .page-head {
        margin-bottom: 16px !important;
    }
    .btn {
        min-height: 38px;
    }
}



        /* Dashboard Analitik Executive Layout - compact, clean, konsisten warna web */
        #dash-section.analytics-executive-dashboard {
            max-width: 1480px;
            margin: 0 auto;
        }

        #dash-section .analytics-executive-page-head {
            align-items: flex-start;
            margin-bottom: 14px;
            padding: 2px 2px 0;
        }

        .analytics-executive-title-block {
            min-width: 0;
        }

        .analytics-executive-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 7px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--primary-color);
        }

        #dash-section .page-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 22px;
            letter-spacing: -.03em;
        }

        #dash-section .page-title i {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #eff6ff;
            color: var(--primary-color);
            border: 1px solid #dbeafe;
            font-size: 17px;
        }

        .analytics-executive-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .analytics-executive-actions .btn,
        .analytics-level2-actions .btn {
            min-height: 38px;
            padding: 8px 13px;
            border-radius: 999px;
            font-size: 12px;
            box-shadow: none !important;
        }

        #dash-section .analytics-filter-level2 {
            margin-bottom: 14px !important;
            border-color: #e2e8f0 !important;
            background: #ffffff !important;
            border-radius: 18px !important;
            box-shadow: none !important;
            overflow: visible;
        }

        #dash-section .analytics-level2-filter-bar {
            align-items: end;
            gap: 10px;
            padding: 13px 14px 10px;
        }

        #dash-section .analytics-level2-filter-main {
            flex: 0 1 260px;
            min-width: 220px;
            max-width: 280px;
        }

        #dash-section #analyticsFilterMonthWrap {
            flex: 0 1 180px;
            min-width: 160px;
        }

        #dash-section .analytics-level2-select,
        #dash-section .analytics-level2-month {
            min-height: 38px !important;
            font-size: 12px !important;
            border-color: #dbe3ef;
            box-shadow: none !important;
        }

        #dash-section .analytics-level2-select:focus,
        #dash-section .analytics-level2-month:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08) !important;
        }

        #dash-section .analytics-level2-actions {
            margin-left: auto;
            gap: 8px;
        }

        #dash-section .analytics-toolbar-meta-simple {
            padding: 9px 14px 12px;
            margin-top: 0;
            border-top: 1px solid #eef2f7;
        }

        #dash-section .analytics-toolbar-helper {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #64748b;
            line-height: 1.45;
        }

        #dash-section .analytics-period-chip {
            min-height: 30px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 11px;
            border-radius: 999px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 11px;
            font-weight: 900;
            white-space: nowrap;
        }

        #dash-section .analytics-war-room {
            display: grid;
            grid-template-columns: minmax(0, 1.48fr) minmax(300px, .82fr);
            grid-template-areas:
                "head decision"
                "mini decision";
            gap: 14px;
            margin-bottom: 14px;
            padding: 16px;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #ffffff;
            box-shadow: none;
        }

        #dash-section .analytics-war-head {
            grid-area: head;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
            gap: 14px;
            margin: 0;
            padding-bottom: 12px;
            border-bottom: 1px solid #eef2f7;
        }

        #dash-section .analytics-war-kicker {
            margin-bottom: 6px;
        }

        #dash-section .analytics-war-title {
            font-size: 18px;
            letter-spacing: -.025em;
        }

        #dash-section .analytics-war-subtitle {
            max-width: 680px;
            margin-top: 5px;
        }

        #dash-section .analytics-war-score {
            min-width: 172px;
            padding: 12px 14px;
            border-radius: 16px;
            background: #0f172a;
            box-shadow: none;
        }

        #dash-section .analytics-war-score-value {
            font-size: 28px;
        }

        #dash-section .analytics-war-grid {
            grid-area: mini;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
            margin: 0;
        }

        #dash-section .analytics-war-mini {
            min-height: auto;
            padding: 12px;
            border-radius: 16px;
            background: #f8fafc;
            border-color: #e2e8f0;
        }

        #dash-section .analytics-war-mini-value {
            font-size: 16px;
            line-height: 1.25;
        }

        #dash-section .analytics-war-decision-grid {
            grid-area: decision;
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            align-content: stretch;
        }

        #dash-section .analytics-war-panel {
            padding: 12px;
            border-radius: 16px;
            box-shadow: none;
        }

        #dash-section .analytics-war-panel-title {
            margin-bottom: 9px;
            font-size: 12px;
        }

        #dash-section .analytics-insight-list {
            gap: 8px;
            max-height: 184px;
            overflow: auto;
            padding-right: 2px;
        }

        #dash-section .analytics-insight-item {
            padding: 9px;
            border-radius: 13px;
        }

        #dash-section .analytics-insight-icon {
            width: 28px;
            height: 28px;
            font-size: 13px;
        }

        #dash-section .analytics-flow-steps {
            gap: 7px;
        }

        #dash-section .analytics-flow-step {
            padding: 9px 10px;
            border-radius: 12px;
        }

        #dash-section #analyticsOverviewPane {
            display: block;
        }

        #dash-section .analytics-product-decision-card {
            border-color: #e2e8f0;
            border-radius: 20px;
            box-shadow: none;
            margin-bottom: 14px;
        }

        #dash-section .analytics-product-decision-head {
            padding: 14px 16px;
            background: #ffffff;
        }

        #dash-section .analytics-product-title {
            font-size: 17px;
        }

        #dash-section .analytics-product-subtitle {
            max-width: 760px;
        }

        #dash-section .analytics-product-tools .form-control,
        #dash-section .analytics-product-tools .form-select {
            min-height: 38px !important;
            border-color: #dbe3ef;
            box-shadow: none !important;
        }

        #dash-section .analytics-decision-table-wrap {
            border-top: 1px solid #eef2f7;
        }

        #dash-section .analytics-decision-table thead th {
            background: #f8fafc;
            padding: 10px 12px;
        }

        #dash-section .analytics-decision-table tbody td {
            padding: 10px 12px;
        }

        #dash-section .analytics-decision-table tbody tr:hover td {
            background: #f8fbff;
        }

        #dash-section .analytics-status-badge,
        #dash-section .analytics-action-chip {
            box-shadow: none;
        }

        #dash-section .analytics-list-card,
        #dash-section .analytics-section-shell,
        #dash-section .analytics-chart-card,
        #dash-section .analytics-donut-card {
            box-shadow: none;
        }

        @media (max-width: 1320px) {
            #dash-section .analytics-war-room {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "head"
                    "mini"
                    "decision";
            }

            #dash-section .analytics-war-decision-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            #dash-section .analytics-war-head {
                grid-template-columns: 1fr;
            }

            #dash-section .analytics-war-score {
                width: 100%;
            }

            #dash-section .analytics-war-grid,
            #dash-section .analytics-war-decision-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            #dash-section .analytics-executive-page-head,
            #dash-section .analytics-level2-filter-bar,
            #dash-section .analytics-toolbar-meta-simple,
            #dash-section .analytics-product-decision-head {
                align-items: stretch;
            }

            #dash-section .analytics-executive-actions,
            #dash-section .analytics-executive-actions .btn,
            #dash-section .analytics-level2-actions,
            #dash-section .analytics-level2-actions .btn {
                width: 100%;
            }

            #dash-section .analytics-war-grid,
            #dash-section .analytics-war-decision-grid {
                grid-template-columns: 1fr;
            }
        }

    

        /* Nota PDF header settings per module */
        .nota-header-settings-panel {
            border: 1px solid #dbeafe;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 16px;
            margin: -4px 0 16px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
        }
        .nota-header-settings-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px dashed #dbeafe;
        }
        .nota-header-settings-kicker {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: .08em;
            color: #1d4ed8;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        .nota-header-settings-title {
            font-size: 15px;
            font-weight: 900;
            color: #0f172a;
        }
        .nota-header-settings-panel textarea.form-control {
            min-height: 72px;
            resize: vertical;
        }
        .dropship-pdf-brand-side,
        .dropship-pdf-title-side {
            min-width: 0;
        }
        .dropship-pdf-brand-row {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0;
        }
        .dropship-pdf-logo {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            object-fit: cover;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            flex-shrink: 0;
        }


/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}



/* TBH Dashboard Analitik Color Accent v1
   Dashboard tetap clean/flat, tapi angka dan simbol diberi aksen warna agar tidak terlalu polos. */
#dash-section .analytics-owner-card {
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#dash-section .analytics-owner-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .055);
}
#dash-section .analytics-owner-icon {
    font-weight: 900;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
#dash-section .analytics-owner-card-featured {
    background: #ffffff !important;
    border-color: #ddd6fe !important;
}
#dash-section .analytics-owner-card-featured .analytics-owner-icon {
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
    color: #7c3aed !important;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value,
#dash-section #analyticsOwnerTotalAsetBersih {
    color: #6d28d9 !important;
}
#dash-section .analytics-owner-card-featured .analytics-owner-tag {
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
    background: #f5f3ff !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(2) {
    border-color: #bfdbfe !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(2) .analytics-owner-icon {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(2) .analytics-owner-value,
#dash-section #analyticsOwnerOmset {
    color: #1d4ed8 !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(3) {
    border-color: #a7f3d0 !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(3) .analytics-owner-icon {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(3) .analytics-owner-value,
#dash-section #analyticsOwnerNetProfit {
    color: #047857 !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(4) {
    border-color: #bbf7d0 !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(4) .analytics-owner-icon {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #16a34a !important;
}
#dash-section .analytics-owner-hero-grid .analytics-owner-card:nth-child(4) .analytics-owner-value,
#dash-section #analyticsOwnerNetLaba {
    color: #15803d !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(1) {
    border-color: #bae6fd !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(1) .analytics-owner-icon {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(1) .analytics-owner-value,
#dash-section #analyticsOwnerKasUtama {
    color: #0369a1 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(2) {
    border-color: #fde68a !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(2) .analytics-owner-icon {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #d97706 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(2) .analytics-owner-value,
#dash-section #analyticsOwnerKasKecil {
    color: #b45309 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(3) {
    border-color: #a5f3fc !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(3) .analytics-owner-icon {
    background: #ecfeff !important;
    border-color: #a5f3fc !important;
    color: #0891b2 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(3) .analytics-owner-value,
#dash-section #analyticsOwnerPiutangDropship {
    color: #0e7490 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(4) {
    border-color: #c7d2fe !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(4) .analytics-owner-icon {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4f46e5 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(4) .analytics-owner-value,
#dash-section #analyticsOwnerPiutangSupplier {
    color: #4338ca !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(5) {
    border-color: #fecdd3 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(5) .analytics-owner-icon {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #e11d48 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(5) .analytics-owner-value,
#dash-section #analyticsOwnerHutangSupplier {
    color: #be123c !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(6) {
    border-color: #cbd5e1 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(6) .analytics-owner-icon {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
#dash-section .analytics-owner-metric-grid .analytics-owner-card:nth-child(6) .analytics-owner-value,
#dash-section #analyticsOwnerNilaiStok {
    color: #334155 !important;
}
#dash-section .analytics-owner-label {
    color: #475569 !important;
}
#dash-section .analytics-owner-sub {
    color: #64748b !important;
}
#dash-section .analytics-owner-eyebrow i,
#dash-section .analytics-owner-period-chip i {
    color: #38bdf8 !important;
}
#dash-section .analytics-owner-period-chip {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1e3a8a !important;
}


/* Dropship portal role: sidebar pindah ke kanan atas dekat profil, role lain tetap layout biasa */
.dropship-portal-top-nav {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.dropship-portal-link {
    border: 0;
    border-radius: 12px;
    min-height: 38px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.82);
    background: transparent;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    transition: all .18s ease;
}
.dropship-portal-link:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
}
.dropship-portal-link.active {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15,23,42,0.18);
}
.dropship-portal-link i { font-size: 14px; }
body.role-dropship .dropship-portal-top-nav { display: none !important; }
@media (min-width: 992px) {
    body.role-dropship #sidebar { display: none !important; }
    body.role-dropship #content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 32px;
        padding-right: 32px;
    }
    body.role-dropship.sidebar-minimized #content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}
@media (max-width: 1199.98px) {
    .dropship-portal-link span { display: none; }
    .dropship-portal-link { width: 38px; justify-content: center; padding-left: 0; padding-right: 0; }
}
@media (max-width: 991.98px) {
    .dropship-portal-top-nav { display: none !important; }
}
html[data-theme="dark"] .dropship-portal-link.active,
body[data-theme="dark"] .dropship-portal-link.active {
    background: #e2e8f0;
    color: #0f172a;
}


        /* === TBH Dropship Marketplace Grid v5 ===
           Khusus akun dropship: katalog dibuat terasa seperti marketplace.
           Tidak mengubah fitur, hanya tampilan role dropship. */
        body.role-dropship .products-shell[data-view="dropship"] {
            background: transparent;
        }

        body.role-dropship .product-dropship-wrap {
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        body.role-dropship .product-dropship-grid {
            grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
            gap: 12px;
            align-items: stretch;
        }

        body.role-dropship .product-dropship-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #ffffff;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.045);
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
        }

        body.role-dropship .product-dropship-card:hover {
            transform: translateY(-2px);
            border-color: #bfdbfe;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
        }

        body.role-dropship .product-dropship-thumb-wrap {
            aspect-ratio: 1 / 1;
            background: #f8fafc;
        }

        body.role-dropship .product-dropship-thumb {
            object-fit: cover;
            transition: transform .22s ease;
        }

        body.role-dropship .product-dropship-card:hover .product-dropship-thumb {
            transform: scale(1.025);
        }

        body.role-dropship .product-dropship-thumb-empty {
            background: #f8fafc;
            color: #94a3b8;
            font-size: 34px;
        }

        body.role-dropship .product-dropship-badge {
            display: none;
        }

        body.role-dropship .product-dropship-body {
            padding: 10px 10px 11px;
            gap: 8px;
        }

        body.role-dropship .product-dropship-title {
            min-height: 38px;
            font-size: 12.5px;
            font-weight: 650;
            line-height: 1.45;
            color: #0f172a;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        body.role-dropship .product-dropship-price-wrap {
            display: block;
            margin: 0;
        }

        body.role-dropship .product-dropship-price-label {
            display: none;
        }

        body.role-dropship .product-dropship-price-value {
            font-size: 17px;
            font-weight: 850;
            letter-spacing: -0.02em;
            color: #2563eb;
            line-height: 1.15;
        }

        body.role-dropship .product-dropship-price-value::before {
            content: "Rp";
            margin-right: 3px;
            color: #2563eb;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: none;
            top: 0;
        }

        body.role-dropship .product-dropship-actions {
            margin-top: 2px;
            display: block;
        }

        body.role-dropship .product-dropship-actions .btn {
            width: 100%;
            min-height: 34px;
            border-radius: 9px;
            font-size: 11.5px;
            font-weight: 800;
            padding: 7px 9px;
            box-shadow: none;
        }

        body.role-dropship .product-dropship-actions .btn-primary {
            background: #2563eb;
            border-color: #2563eb;
        }

        body.role-dropship .product-dropship-actions .btn-primary:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

        body.role-dropship .product-dropship-description,
        body.role-dropship .product-dropship-summary,
        body.role-dropship .product-dropship-meta {
            display: none !important;
        }

        body.role-dropship #list-section .page-head {
            margin-bottom: 14px;
        }

        body.role-dropship #list-section .page-title {
            font-size: 18px;
        }

        body.role-dropship #list-section .section-note {
            font-size: 12px;
        }

        @media (min-width: 1500px) {
            body.role-dropship .product-dropship-grid {
                grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
            }
        }

        @media (max-width: 991.98px) {
            body.role-dropship .product-dropship-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 10px;
            }
        }

        @media (max-width: 575.98px) {
            body.role-dropship .product-dropship-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 9px;
            }

            body.role-dropship .product-dropship-body {
                padding: 9px;
            }

            body.role-dropship .product-dropship-title {
                font-size: 12px;
            }

            body.role-dropship .product-dropship-price-value {
                font-size: 15.5px;
            }
        }


    
/* === TBH Dropship Mobile Responsive v10 ===
   Khusus akun dropship: rapi di HP tanpa mengubah fitur role lain. */
body.role-dropship {
    --dropship-mobile-header-height: 64px;
    --dropship-sticky-filter-top: 74px;
}

body.role-dropship #list-section .marketplace-toolbar {
    position: sticky;
    top: 76px;
    z-index: 1190;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(219, 234, 254, 0.95);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.role-dropship #list-section .marketplace-toolbar .view-toggle-group {
    display: none !important;
}

body.role-dropship #list-section .search-wrap-modern {
    width: 100%;
    min-width: 0;
}

body.role-dropship #list-section .search-input-modern {
    min-height: 42px;
    font-size: 13px;
    border-radius: 14px !important;
}

@media (max-width: 991.98px) {
    body.role-dropship {
        background: #f5f7fb !important;
        overflow-x: hidden;
    }

    body.role-dropship .mobile-topbar,
    body.role-dropship .mobile-section-tabs,
    body.role-dropship .dropship-portal-top-nav {
        display: none !important;
    }

    body.role-dropship #sidebar,
    body.role-dropship .sidebar-backdrop {
        display: none !important;
    }

    body.role-dropship.sidebar-open {
        overflow: auto !important;
    }

    body.role-dropship .desktop-app-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2050 !important;
        min-height: var(--dropship-mobile-header-height) !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        background: linear-gradient(90deg, #020617 0%, #0f172a 58%, #172554 100%) !important;
        border-bottom: 1px solid rgba(96, 165, 250, 0.28) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        overflow: visible !important;
    }

    body.role-dropship .desktop-app-header-center,
    body.role-dropship .desktop-header-search,
    body.role-dropship .desktop-header-context,
    body.role-dropship .desktop-header-divider,
    body.role-dropship #desktopNotifAnchor,
    body.role-dropship .desktop-header-period-mount,
    body.role-dropship .desktop-header-action-row,
    body.role-dropship .desktop-header-btn:not(#desktopUserPill) {
        display: none !important;
    }

    body.role-dropship .desktop-app-header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    body.role-dropship .desktop-app-header-right {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        margin-left: auto !important;
        gap: 8px !important;
    }

    body.role-dropship .desktop-brand-block.skala-main-brand {
        gap: 8px !important;
        min-width: 0 !important;
    }

    body.role-dropship .desktop-brand-logo.skala-app-logo {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        flex: 0 0 38px !important;
    }

    body.role-dropship .desktop-brand-copy.skala-app-copy {
        min-width: 0 !important;
        max-width: 40vw !important;
    }

    body.role-dropship .desktop-brand-name#desktopHeaderAppName {
        font-size: 13px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.role-dropship .desktop-brand-meta#desktopHeaderAppTagline {
        font-size: 10px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.role-dropship #desktopAccountWrap {
        position: static !important;
        display: flex !important;
        min-width: 0 !important;
        max-width: 48vw !important;
    }

    body.role-dropship #desktopUserPill {
        min-height: 42px !important;
        max-width: 48vw !important;
        padding: 6px 7px 6px 10px !important;
        border-radius: 999px !important;
        gap: 7px !important;
        background: rgba(15, 23, 42, 0.80) !important;
        border: 1px solid rgba(96, 165, 250, 0.45) !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14) !important;
    }

    body.role-dropship #desktopUserPill .desktop-user-pill-text {
        min-width: 0 !important;
        max-width: 26vw !important;
    }

    body.role-dropship #desktopUserPillCompanyName {
        display: none !important;
    }

    body.role-dropship #desktopUserPillName {
        font-size: 12px !important;
        line-height: 1.1 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    body.role-dropship .desktop-account-company-logo {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        flex: 0 0 30px !important;
    }

    body.role-dropship .desktop-user-pill-caret {
        font-size: 10px !important;
        color: #bfdbfe !important;
    }

    body.role-dropship .desktop-account-menu {
        position: fixed !important;
        top: calc(var(--dropship-mobile-header-height) + 8px) !important;
        right: 8px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 86px) !important;
        overflow-y: auto !important;
        border-radius: 24px !important;
        padding: 12px !important;
        z-index: 2300 !important;
        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.28) !important;
    }

    body.role-dropship .desktop-account-menu::before {
        right: 26px !important;
    }

    body.role-dropship .desktop-account-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    body.role-dropship .desktop-account-avatar {
        width: 42px !important;
        height: 42px !important;
    }

    body.role-dropship .desktop-account-name {
        font-size: 14px !important;
    }

    body.role-dropship .desktop-account-role {
        font-size: 11px !important;
    }

    body.role-dropship .desktop-account-menu-label {
        font-size: 10.5px !important;
        padding: 8px 8px 6px !important;
    }

    body.role-dropship .desktop-account-menu-btn {
        min-height: 46px !important;
        padding: 10px 11px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        gap: 11px !important;
    }

    body.role-dropship .desktop-account-menu-btn i {
        width: 34px !important;
        height: 34px !important;
        border-radius: 13px !important;
        font-size: 15px !important;
        flex: 0 0 34px !important;
    }

    body.role-dropship #content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px 8px 24px !important;
        overflow-x: hidden !important;
    }

    body.role-dropship .page-shell {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.role-dropship #list-section .product-surface-card {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    body.role-dropship #list-section .page-head {
        padding: 4px 4px 8px !important;
        margin-bottom: 6px !important;
    }

    body.role-dropship #list-section .page-title {
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.role-dropship #list-section .page-head .d-flex.gap-2 {
        display: none !important;
    }

    body.role-dropship #list-section .marketplace-toolbar {
        top: calc(var(--dropship-mobile-header-height) + 6px) !important;
        margin: 0 0 10px !important;
        padding: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
    }

    body.role-dropship #list-section .search-wrap-modern {
        min-height: 40px !important;
    }

    body.role-dropship #list-section .search-wrap-modern i {
        left: 13px !important;
        font-size: 13px !important;
    }

    body.role-dropship #list-section .search-input-modern {
        min-height: 40px !important;
        padding-left: 36px !important;
        font-size: 12px !important;
        border-radius: 13px !important;
    }

    body.role-dropship .products-shell[data-view="dropship"] {
        width: 100% !important;
    }

    body.role-dropship .product-dropship-wrap {
        width: 100% !important;
        padding: 0 !important;
    }

    body.role-dropship .product-dropship-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
    }

    body.role-dropship .product-dropship-card {
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    }

    body.role-dropship .product-dropship-thumb-wrap {
        border-radius: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    body.role-dropship .product-dropship-body {
        padding: 8px !important;
        gap: 7px !important;
    }

    body.role-dropship .product-dropship-title {
        min-height: 34px !important;
        font-size: 11.5px !important;
        line-height: 1.42 !important;
        font-weight: 750 !important;
    }

    body.role-dropship .product-dropship-price-value {
        font-size: 15px !important;
        line-height: 1.12 !important;
    }

    body.role-dropship .product-dropship-price-value::before {
        font-size: 10px !important;
    }

    body.role-dropship .product-dropship-actions .btn {
        min-height: 34px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
        padding: 7px 6px !important;
    }

    body.role-dropship .product-dropship-actions .btn i {
        font-size: 12px !important;
        margin-right: 4px !important;
    }

    body.role-dropship .product-dropship-empty {
        grid-column: 1 / -1 !important;
        border-radius: 16px !important;
        padding: 24px 14px !important;
        font-size: 12px !important;
    }

    body.role-dropship .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    body.role-dropship .modal-content {
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    body.role-dropship .dropship-market-detail-shell {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.role-dropship .dropship-market-detail-media-card {
        position: static !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    body.role-dropship .dropship-market-detail-media-frame {
        max-height: 48vh !important;
        border-radius: 16px !important;
    }

    body.role-dropship .dropship-market-detail-head-card,
    body.role-dropship .dropship-detail-description-card {
        border-radius: 18px !important;
        padding: 14px !important;
    }

    body.role-dropship .dropship-market-detail-title {
        font-size: 18px !important;
        margin: 10px 0 9px !important;
    }

    body.role-dropship .dropship-market-detail-price-value {
        font-size: 23px !important;
    }

    body.role-dropship .dropship-market-option-chip {
        min-width: 46px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    body.role-dropship .desktop-brand-copy.skala-app-copy {
        max-width: 34vw !important;
    }

    body.role-dropship #desktopAccountWrap,
    body.role-dropship #desktopUserPill {
        max-width: 52vw !important;
    }

    body.role-dropship #desktopUserPill .desktop-user-pill-text {
        max-width: 23vw !important;
    }

    body.role-dropship .product-dropship-grid {
        gap: 8px !important;
    }

    body.role-dropship .product-dropship-title {
        font-size: 11px !important;
    }

    body.role-dropship .product-dropship-price-value {
        font-size: 14px !important;
    }

    body.role-dropship .product-dropship-actions .btn {
        font-size: 10.5px !important;
    }
}

html[data-theme="dark"] body.role-dropship #list-section .marketplace-toolbar,
body[data-theme="dark"].role-dropship #list-section .marketplace-toolbar {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(96, 165, 250, 0.24) !important;
}

html[data-theme="dark"] body.role-dropship #list-section .product-surface-card,
body[data-theme="dark"].role-dropship #list-section .product-surface-card {
    background: transparent !important;
}

html[data-theme="dark"] body.role-dropship .product-dropship-card,
body[data-theme="dark"].role-dropship .product-dropship-card {
    background: #0f172a !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

html[data-theme="dark"] body.role-dropship .product-dropship-title,
body[data-theme="dark"].role-dropship .product-dropship-title {
    color: #f8fafc !important;
}


/* TBH Dropship Return icon mobile color */
body.role-dropship #desktopDropshipNavReturn i {
    background: #fff7ed !important;
    color: #f97316 !important;
    border: 1px solid #fed7aa !important;
}
body.role-dropship #desktopDropshipNavReturn.active i {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.28) !important;
}


/* =========================================================
   TBH Mobile Navigation & Layout Fix v11
   Fokus: semua role di HP, Stok Real, Dropshipper, sub navigasi.
   ========================================================= */
@media (max-width: 991.98px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        background: #f5f7fb !important;
    }

    /* Header mobile tunggal untuk role umum */
    body:not(.role-dropship) .desktop-app-header {
        display: none !important;
    }

    body:not(.role-dropship) .mobile-topbar {
        display: block !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2200 !important;
        padding: 8px 10px !important;
        background: linear-gradient(90deg, #020617 0%, #0f172a 58%, #172554 100%) !important;
        border-bottom: 1px solid rgba(96, 165, 250, 0.28) !important;
        box-shadow: 0 10px 24px rgba(2, 8, 23, 0.22) !important;
        color: #f8fafc !important;
    }

    body:not(.role-dropship) .mobile-topbar .btn {
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.72) !important;
        border-color: rgba(148, 163, 184, 0.32) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    body:not(.role-dropship) .mobile-topbar #mobileTopbarBrand {
        font-size: 13px !important;
        color: #ffffff !important;
        line-height: 1.15 !important;
    }

    body:not(.role-dropship) .mobile-topbar #mobileCurrentSectionLabel {
        font-size: 10.5px !important;
        color: #bfdbfe !important;
        line-height: 1.2 !important;
    }

    /* Sidebar mobile sebagai drawer yang rapi */
    body:not(.role-dropship) #sidebar {
        width: min(82vw, 310px) !important;
        max-width: 310px !important;
        height: 100dvh !important;
        z-index: 2300 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 0 !important;
        box-shadow: 22px 0 55px rgba(15, 23, 42, 0.22) !important;
    }

    body:not(.role-dropship) .sidebar-backdrop {
        z-index: 2250 !important;
        background: rgba(15, 23, 42, 0.48) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
    }

    body:not(.role-dropship) .brand-wrap {
        padding: 16px 14px 12px !important;
    }

    body:not(.role-dropship) .brand-logo {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }

    body:not(.role-dropship) .brand-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    body:not(.role-dropship) .brand-subtitle {
        font-size: 10px !important;
        margin-top: 3px !important;
    }

    body:not(.role-dropship) .nav-category {
        padding: 13px 14px 5px !important;
        font-size: 10px !important;
        letter-spacing: .08em !important;
    }

    body:not(.role-dropship) .nav-link {
        min-height: 42px !important;
        padding: 9px 12px !important;
        margin: 3px 8px !important;
        border-radius: 13px !important;
        gap: 10px !important;
        font-size: 12.5px !important;
        line-height: 1.25 !important;
    }

    body:not(.role-dropship) .nav-link i {
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
        font-size: 15px !important;
    }

    body:not(.role-dropship) .nav-link span {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* Sub navigasi mobile dibuat horizontal-scroll, bukan turun berantakan */
    body:not(.role-dropship) .mobile-section-tabs {
        display: block !important;
        position: sticky !important;
        top: 56px !important;
        z-index: 1180 !important;
        margin: 0 -10px 10px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    body:not(.role-dropship) .mobile-section-tabs-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 7px !important;
        padding: 8px 10px 9px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body:not(.role-dropship) .mobile-section-tabs-inner::-webkit-scrollbar {
        display: none !important;
    }

    body:not(.role-dropship) .mobile-section-tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        min-height: 34px !important;
        max-width: 210px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
    }

    /* Konten umum di HP */
    body:not(.role-dropship) #content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    .content-section,
    .content-section > .row,
    .content-section .card,
    .content-section [class*="col-"],
    .page-shell {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .page-head {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .page-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    .section-note {
        font-size: 11.5px !important;
        line-height: 1.55 !important;
    }

    .page-head > .d-flex,
    .page-head > div:last-child {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch;
    }

    .page-head .btn,
    .card .btn,
    .modal .btn {
        min-height: 36px !important;
        font-size: 11.5px !important;
        padding: 7px 10px !important;
        white-space: nowrap !important;
    }

    .card {
        border-radius: 16px !important;
    }

    .card.p-4,
    .card-body,
    .p-4 {
        padding: 14px !important;
    }

    .row {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }

    .form-control,
    .form-select,
    .input-group-text {
        min-height: 38px !important;
        font-size: 12px !important;
        border-radius: 11px !important;
    }

    label,
    .form-label {
        font-size: 11px !important;
        margin-bottom: 5px !important;
    }

    /* Semua toolbar/subnav dibuat scroll samping */
    .marketplace-toolbar,
    .analytics-toolbar-bar,
    .out-pane-switcher,
    .stok-in-pane-switcher,
    .view-toggle-group,
    .history-filter-actions,
    .return-marketplace-flow-note,
    .return-marketplace-actionbar,
    .out-manual-actions,
    .out-manual-actions-left,
    .out-manual-actions-right {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .marketplace-toolbar::-webkit-scrollbar,
    .analytics-toolbar-bar::-webkit-scrollbar,
    .out-pane-switcher::-webkit-scrollbar,
    .stok-in-pane-switcher::-webkit-scrollbar,
    .view-toggle-group::-webkit-scrollbar,
    .history-filter-actions::-webkit-scrollbar {
        display: none !important;
    }

    .out-pane-btn,
    .stok-in-pane-btn,
    .view-toggle-btn,
    .analytics-toolbar-actions .btn,
    .history-filter-actions .btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-height: 34px !important;
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .marketplace-toolbar {
        align-items: stretch !important;
        gap: 8px !important;
    }

    .search-wrap-modern {
        min-width: min(280px, 100%) !important;
        width: 100% !important;
    }

    .view-toggle-group {
        width: 100% !important;
        padding-bottom: 2px !important;
    }

    /* Tabel jangan memotong layar, cukup scroll horizontal */
    .table-responsive,
    .product-db-table-wrap,
    .out-manual-table-scroll,
    .return-marketplace-sheet-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
    }

    table,
    .table {
        font-size: 12px !important;
    }

    .table thead th,
    .table tbody td,
    .table-stok thead th,
    .table-stok tbody td {
        padding: 8px 9px !important;
        font-size: 11.5px !important;
    }

    .sticky-col {
        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;
        min-width: 170px !important;
        max-width: 190px !important;
        white-space: normal !important;
        box-shadow: 4px 0 12px rgba(15, 23, 42, 0.08) !important;
    }

    /* Prioritas: Stok Real */
    #realtime-section .page-head {
        position: relative !important;
        z-index: 2 !important;
    }

    #realtime-section .table-responsive {
        border-radius: 16px !important;
        background: #ffffff !important;
    }

    #realtime-section .table-stok,
    #realtime-section table {
        min-width: 860px !important;
    }

    #realtime-section .asset-card,
    #realtime-section .card {
        overflow: hidden !important;
    }

    #realtime-section .realtime-product-wrap,
    #realtime-section .realtime-product-card,
    #realtime-section .realtime-summary-grid,
    #realtime-section .realtime-kpi-grid {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #realtime-section .realtime-product-wrap {
        gap: 10px !important;
    }

    /* Prioritas: Dropship/Nota */
    #dropship-section .card,
    #dropship-section .dropship-card,
    #dropship-section .dropship-history-card {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #dropship-section .table-responsive,
    #dropship-section .dropship-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #dropship-section table {
        min-width: 820px !important;
    }

    #dropship-section .page-head > div,
    #dropship-section .d-flex {
        max-width: 100% !important;
    }

    #dropship-section .btn {
        flex: 0 0 auto !important;
    }

    /* Return tracking juga tidak boleh kepotong */
    #return-tracking-section .return-tracking-shell,
    #return-tracking-section .return-marketplace-form-shell,
    #return-tracking-section .return-marketplace-sheet-wrap {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #return-tracking-section .return-marketplace-sheet-table,
    #return-tracking-section table {
        min-width: 980px !important;
    }

    /* Modal mobile */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    .modal-content {
        border-radius: 18px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .modal-body {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* Dropship tetap punya portal marketplace sendiri di HP, tapi dibuat tidak memotong layar */
@media (max-width: 991.98px) {
    body.role-dropship .desktop-app-header {
        min-height: 58px !important;
        padding: 7px 8px !important;
    }

    body.role-dropship #content {
        padding: 8px 7px 24px !important;
    }

    body.role-dropship .desktop-brand-copy.skala-app-copy {
        max-width: 35vw !important;
    }

    body.role-dropship .desktop-brand-name#desktopHeaderAppName {
        font-size: 12px !important;
    }

    body.role-dropship .desktop-brand-meta#desktopHeaderAppTagline {
        display: none !important;
    }

    body.role-dropship #desktopAccountWrap,
    body.role-dropship #desktopUserPill {
        max-width: 54vw !important;
    }

    body.role-dropship #desktopUserPill .desktop-user-pill-text {
        max-width: 30vw !important;
    }

    body.role-dropship .desktop-account-menu {
        width: min(350px, calc(100vw - 14px)) !important;
        right: 7px !important;
        top: 64px !important;
    }

    body.role-dropship #list-section .marketplace-toolbar {
        top: 64px !important;
        z-index: 1500 !important;
    }

    body.role-dropship #realtime-section .table-stok,
    body.role-dropship #realtime-section table,
    body.role-dropship #dropship-section table,
    body.role-dropship #return-tracking-section table {
        min-width: 820px !important;
    }

    body.role-dropship #realtime-section .table-responsive,
    body.role-dropship #dropship-section .table-responsive,
    body.role-dropship #return-tracking-section .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 420px) {
    .page-title {
        font-size: 15px !important;
    }

    body:not(.role-dropship) .mobile-section-tab {
        max-width: 170px !important;
        font-size: 10.5px !important;
    }

    body.role-dropship .product-dropship-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.role-dropship .product-dropship-body {
        padding: 7px !important;
    }

    body.role-dropship .product-dropship-title {
        font-size: 11px !important;
    }

    body.role-dropship .product-dropship-price-value {
        font-size: 14px !important;
    }
}

html[data-theme="dark"] body:not(.role-dropship) .mobile-section-tabs,
body[data-theme="dark"]:not(.role-dropship) .mobile-section-tabs {
    background: rgba(15, 23, 42, 0.96) !important;
    border-color: rgba(96, 165, 250, 0.24) !important;
}

html[data-theme="dark"] body:not(.role-dropship) .mobile-section-tab,
body[data-theme="dark"]:not(.role-dropship) .mobile-section-tab {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body:not(.role-dropship) .mobile-section-tab.active,
body[data-theme="dark"]:not(.role-dropship) .mobile-section-tab.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
}


/* =========================================================
   TBH Mobile Stok Real + Inbon No-Cut Fix v12
   Fokus: kolom/tabel tidak kepotong di HP, terutama Safari/iPhone.
   ========================================================= */
@media (max-width: 991.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #content,
    .content-section,
    .page-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* STOK REAL: card boleh rapi, tabelnya wajib scroll di dalam, bukan kepotong */
    #realtime-section {
        overflow-x: hidden !important;
    }

    #realtime-section .page-shell,
    #realtime-section .card,
    #realtime-section .realtime-dashboard-shell,
    #realtime-section .realtime-category-grid,
    #realtime-section #realtimeCategoryGroups {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #realtime-section .realtime-category-grid {
        padding: 10px 0 !important;
        gap: 14px !important;
    }

    #realtime-section .realtime-category-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    #realtime-section .realtime-category-head {
        padding: 13px 12px !important;
        gap: 9px !important;
        flex-wrap: wrap !important;
    }

    #realtime-section .realtime-category-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    #realtime-section .realtime-category-subtitle {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    #realtime-section .realtime-category-chip {
        min-height: 30px !important;
        padding: 6px 9px !important;
        font-size: 10.5px !important;
        max-width: 100% !important;
    }

    #realtime-section .realtime-category-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: thin !important;
        touch-action: pan-x pan-y !important;
        padding-bottom: 4px !important;
        border-radius: 0 0 18px 18px !important;
    }

    #realtime-section .realtime-category-table {
        width: max-content !important;
        min-width: 760px !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    #realtime-section .realtime-category-table thead th,
    #realtime-section .realtime-category-table tbody td {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 9px 8px !important;
    }

    #realtime-section .realtime-category-table thead th:first-child,
    #realtime-section .realtime-category-table tbody td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 7 !important;
        min-width: 190px !important;
        max-width: 190px !important;
        width: 190px !important;
        background: #ffffff !important;
        box-shadow: 5px 0 12px rgba(15, 23, 42, 0.08) !important;
        white-space: normal !important;
    }

    #realtime-section .realtime-category-table thead th:first-child {
        z-index: 10 !important;
        background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
        color: #0f172a !important;
    }

    #realtime-section .realtime-category-table thead th:nth-child(2),
    #realtime-section .realtime-category-table tbody td:nth-child(2) {
        min-width: 130px !important;
        max-width: 145px !important;
        width: 135px !important;
        white-space: normal !important;
    }

    #realtime-section .realtime-product-cell {
        min-width: 0 !important;
        gap: 8px !important;
    }

    #realtime-section .realtime-product-image {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 10px !important;
    }

    #realtime-section .realtime-product-name {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #realtime-section .realtime-product-meta {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    #realtime-section .realtime-summary-strip,
    #realtime-section .realtime-category-summary,
    #realtime-section .realtime-summary-row {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
    }

    #realtime-section .realtime-summary-pill,
    #realtime-section .realtime-count-chip,
    #realtime-section .realtime-asset-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    /* INBON SUPPLIER: semua panel dan tabel tidak boleh memotong layar */
    #inbon-section {
        overflow-x: hidden !important;
    }

    #inbon-section .page-shell,
    #inbon-section .inbon-shell,
    #inbon-section .inbon-window-pane,
    #inbon-section .inbon-card,
    #inbon-section .card,
    #inbon-section .card-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #inbon-section .toolbar-card,
    #inbon-section .inbon-window-tabs {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #inbon-section .toolbar-card::-webkit-scrollbar,
    #inbon-section .inbon-window-tabs::-webkit-scrollbar {
        display: none !important;
    }

    #inbon-section .inbon-window-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-height: 36px !important;
        padding: 8px 11px !important;
        font-size: 11px !important;
    }

    #inbon-section .inbon-summary-grid,
    #inbon-section .inbon-summary-grid.inbon-summary-grid-mini,
    #inbon-section .inbon-summary-grid.inbon-summary-grid-supplier {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #inbon-section .inbon-summary-card {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 13px !important;
        border-radius: 16px !important;
    }

    #inbon-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #inbon-section [class*="col-"] {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #inbon-section .table-responsive,
    #inbon-section .inbon-table-wrap,
    #inbon-section .inbon-history-table-wrap,
    #inbon-section .inbon-window-pane[data-inbon-pane-content="histori"] .table-responsive {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        border-radius: 14px !important;
        padding-bottom: 4px !important;
    }

    #inbon-section table,
    #inbon-section .table,
    #inbon-section .inbon-transaction-table,
    #inbon-section .inbon-history-table {
        width: max-content !important;
        min-width: 860px !important;
        max-width: none !important;
        table-layout: auto !important;
        margin-bottom: 0 !important;
    }

    #inbon-section .inbon-history-table {
        min-width: 1080px !important;
    }

    #inbon-section .inbon-transaction-table th,
    #inbon-section .inbon-transaction-table td,
    #inbon-section .inbon-history-table th,
    #inbon-section .inbon-history-table td,
    #inbon-section .table th,
    #inbon-section .table td {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 8px 9px !important;
    }

    #inbon-section .inbon-transaction-table td.wrap,
    #inbon-section .inbon-history-table td.wrap,
    #inbon-section td.wrap {
        white-space: normal !important;
        min-width: 180px !important;
    }

    #inbon-section .batch-card,
    #inbon-section .batch-row,
    #inbon-section .inbon-history-filter-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    #inbon-section .inbon-history-filter-fields {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    #inbon-section .inbon-history-filter-actions {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }

    #inbon-section .inbon-history-filter-actions .btn {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

@media (max-width: 420px) {
    #realtime-section .realtime-category-table {
        min-width: 700px !important;
    }

    #realtime-section .realtime-category-table thead th:first-child,
    #realtime-section .realtime-category-table tbody td:first-child {
        min-width: 170px !important;
        max-width: 170px !important;
        width: 170px !important;
    }

    #realtime-section .realtime-category-table thead th:nth-child(2),
    #realtime-section .realtime-category-table tbody td:nth-child(2) {
        min-width: 115px !important;
        max-width: 125px !important;
        width: 120px !important;
    }

    #inbon-section table,
    #inbon-section .table,
    #inbon-section .inbon-transaction-table {
        min-width: 780px !important;
    }

    #inbon-section .inbon-history-table {
        min-width: 980px !important;
    }
}

html[data-theme="dark"] #realtime-section .realtime-category-table tbody td:first-child,
body[data-theme="dark"] #realtime-section .realtime-category-table tbody td:first-child {
    background: #0f172a !important;
}

html[data-theme="dark"] #realtime-section .realtime-category-table thead th:first-child,
body[data-theme="dark"] #realtime-section .realtime-category-table thead th:first-child {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    color: #f8fafc !important;
}


/* =========================================================
   TBH PC Only Mobile Notice v13
   Sementara: akses HP ditahan dengan pesan profesional.
   Header utama: cukup logo, tanpa tulisan SKALA Pusat Laba.
   ========================================================= */

/* Header utama cukup logo saja */
.desktop-app-header .skala-app-copy,
.desktop-app-header #desktopHeaderAppName,
.desktop-app-header #desktopHeaderAppTagline {
    display: none !important;
}

.desktop-app-header .desktop-brand-block.skala-main-brand {
    gap: 0 !important;
}

.desktop-app-header .desktop-brand-logo.skala-app-logo {
    margin-right: 0 !important;
}

/* Layar informasi khusus HP */
.skala-mobile-access-notice {
    display: none;
}

@media (max-width: 991.98px) {
    html,
    body {
        min-height: 100dvh !important;
        overflow: hidden !important;
        background: #020617 !important;
    }

    .skala-mobile-access-notice {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        background:
            radial-gradient(circle at top left, rgba(37, 99, 235, 0.32), transparent 34%),
            radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.22), transparent 38%),
            linear-gradient(145deg, #020617 0%, #0f172a 48%, #111827 100%);
        color: #f8fafc;
    }

    .skala-mobile-access-notice::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
        background-size: 34px 34px;
        mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
        pointer-events: none;
    }

    .skala-mobile-access-card {
        position: relative;
        width: min(100%, 430px);
        padding: 30px 24px 24px;
        border-radius: 30px;
        border: 1px solid rgba(147, 197, 253, 0.28);
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.94));
        box-shadow:
            0 28px 80px rgba(0, 0, 0, 0.46),
            inset 0 1px 0 rgba(255,255,255,0.08);
        text-align: center;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        overflow: hidden;
    }

    .skala-mobile-access-card::after {
        content: '';
        position: absolute;
        left: 18px;
        right: 18px;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.95), transparent);
    }

    .skala-mobile-access-logo {
        width: 92px;
        height: 92px;
        margin: 0 auto 18px;
        border-radius: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #020617;
        border: 1px solid rgba(96, 165, 250, 0.42);
        box-shadow:
            0 0 0 8px rgba(37, 99, 235, 0.10),
            0 16px 36px rgba(37, 99, 235, 0.25);
        overflow: hidden;
    }

    .skala-mobile-access-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        padding: 8px;
    }

    .skala-mobile-access-logo i {
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 38px;
        color: #60a5fa;
    }

    .skala-mobile-access-kicker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 7px 12px;
        margin-bottom: 14px;
        border-radius: 999px;
        border: 1px solid rgba(96, 165, 250, 0.32);
        background: rgba(37, 99, 235, 0.16);
        color: #bfdbfe;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .skala-mobile-access-card h1 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(22px, 6vw, 30px);
        line-height: 1.18;
        font-weight: 900;
        letter-spacing: -0.04em;
    }

    .skala-mobile-access-card p {
        margin: 14px 0 0;
        color: #cbd5e1;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 500;
    }

    .skala-mobile-access-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
        padding: 13px 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(148, 163, 184, 0.18);
        color: #dbeafe;
        font-size: 12.5px;
        font-weight: 800;
        line-height: 1.45;
    }

    .skala-mobile-access-info i {
        font-size: 18px;
        color: #60a5fa;
        flex: 0 0 auto;
    }

    /* Semua UI aplikasi ditahan di balik notice supaya tidak terlihat berantakan di HP */
    body > *:not(.skala-mobile-access-notice) {
        pointer-events: none !important;
        user-select: none !important;
    }
}

@media (min-width: 992px) {
    .skala-mobile-access-notice {
        display: none !important;
    }
}


/* =========================================================
   TBH Login Simple Only v14
   Hanya merapikan area login: 1 card, logo SKALA, sambutan sederhana.
   ========================================================= */
.auth-overlay {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.20), transparent 28%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.16), transparent 30%),
        linear-gradient(135deg, #eef6ff 0%, #f8fbff 44%, #eef4ff 100%) !important;
}

.auth-shell.auth-shell-simple {
    width: 100% !important;
    max-width: 460px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    grid-template-columns: none !important;
}

.auth-shell-simple .auth-brand-card {
    display: none !important;
}

.auth-form-card.auth-form-card-simple {
    width: 100% !important;
    max-width: 460px !important;
    min-height: auto !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 1px solid rgba(191, 219, 254, 0.95) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.15) !important;
}

.auth-form-header.auth-form-header-simple {
    padding: 36px 30px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background:
        radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.auth-logo-badge.auth-logo-badge-image {
    width: 92px !important;
    height: 92px !important;
    border-radius: 28px !important;
    margin: 0 auto 20px !important;
    background: #020617 !important;
    border: 1px solid rgba(96, 165, 250, 0.38) !important;
    box-shadow:
        0 0 0 8px rgba(37, 99, 235, 0.08),
        0 18px 42px rgba(37, 99, 235, 0.22) !important;
    color: #60a5fa !important;
    overflow: hidden !important;
    padding: 8px !important;
}

.auth-logo-badge.auth-logo-badge-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

.auth-logo-badge.auth-logo-badge-image i {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    width: 100%;
    height: 100%;
}

.auth-form-header-simple .auth-title {
    font-size: 28px !important;
    line-height: 1.16 !important;
    letter-spacing: -0.045em !important;
    color: #0f172a !important;
}

.auth-form-header-simple .auth-subtitle {
    max-width: 320px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.auth-form-header-simple .auth-state-chip {
    margin-top: 16px !important;
    min-height: 32px !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
}

.auth-form-body.auth-form-body-simple {
    padding: 26px 30px 32px !important;
}

.auth-form-card-simple .auth-mode-block .form-label {
    font-size: 11.5px !important;
}

.auth-form-card-simple .auth-mode-block .form-control {
    min-height: 50px !important;
    border-radius: 15px !important;
}

.auth-form-card-simple .auth-login-button {
    min-height: 52px !important;
    border-radius: 15px !important;
}

@media (max-width: 575.98px) {
    .auth-overlay {
        padding: 18px !important;
    }

    .auth-form-card.auth-form-card-simple {
        border-radius: 24px !important;
    }

    .auth-form-header.auth-form-header-simple {
        padding: 30px 22px 18px !important;
    }

    .auth-form-body.auth-form-body-simple {
        padding: 22px !important;
    }

    .auth-logo-badge.auth-logo-badge-image {
        width: 82px !important;
        height: 82px !important;
        border-radius: 24px !important;
    }

    .auth-form-header-simple .auth-title {
        font-size: 24px !important;
    }
}




/* =========================================================
   TBH FINAL UI GUARD PATCH
   Tujuan: sidebar tetap profesional/kontras dan bar navigasi
   mobile tidak muncul sebagai navigasi tambahan di atas konten.
   Visual-only: tidak mengubah ID, endpoint, API, atau logic JS.
   ========================================================= */

/* Hilangkan shortcut navigation bar tambahan di atas konten. Sidebar utama tetap menjadi navigasi. */
#mobileSectionTabs,
.mobile-section-tabs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Sidebar final: solid, tidak polos, dan aman untuk light/dark mode. */
#sidebar {
    background: linear-gradient(180deg, #0b1220 0%, #111827 48%, #0f172a 100%) !important;
    color: #e5edf7 !important;
    border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: 18px 0 42px rgba(15, 23, 42, 0.24), inset -1px 0 0 rgba(255,255,255,0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: hidden !important;
}

#sidebar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(59, 130, 246, 0.24), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(124, 58, 237, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 26%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
}

#sidebar::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 14px) !important;
    opacity: 0.45 !important;
    z-index: 0 !important;
}

#sidebar .brand-wrap,
#sidebar .sidebar-user-panel,
#sidebar #mainNav {
    position: relative !important;
    z-index: 1 !important;
}

#sidebar .brand-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

#sidebar .brand-logo {
    background: linear-gradient(135deg, rgba(59,130,246,0.24), rgba(124,58,237,0.18)) !important;
    border: 1px solid rgba(191, 219, 254, 0.22) !important;
    color: #dbeafe !important;
    box-shadow: 0 14px 26px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

#sidebar .brand-title,
#sidebar #sidebarCompanyName,
#sidebar .brand-title .blue {
    color: #f8fafc !important;
    text-shadow: none !important;
}

#sidebar .brand-subtitle,
#sidebar #sidebarCompanySubtitle {
    color: #a7b4c8 !important;
}

#sidebar .sidebar-user-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

#sidebar .sidebar-user-name {
    color: #f8fafc !important;
}

#sidebar .sidebar-user-meta {
    color: #b6c2d4 !important;
}

#sidebar .global-period-filter-bar,
#sidebar .sidebar-period-filter {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: none !important;
}

#sidebar .form-select,
#sidebar .form-control {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: rgba(191,219,254,0.65) !important;
    box-shadow: none !important;
}

#sidebar .form-select:focus,
#sidebar .form-control:focus {
    border-color: rgba(96,165,250,0.9) !important;
    box-shadow: 0 0 0 0.22rem rgba(96,165,250,0.18) !important;
}

#sidebar .sidebar-period-reset,
#sidebar .btn-theme-toggle,
#sidebar .theme-toggle-btn,
#sidebar #sidebarThemeToggle,
#sidebar #sidebarMinimizeToggle {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.055)) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #eef2ff !important;
    box-shadow: 0 10px 18px rgba(2, 6, 23, 0.18) !important;
}

#sidebar .sidebar-period-reset:hover,
#sidebar .btn-theme-toggle:hover,
#sidebar .theme-toggle-btn:hover,
#sidebar #sidebarThemeToggle:hover,
#sidebar #sidebarMinimizeToggle:hover {
    background: linear-gradient(180deg, rgba(59,130,246,0.28), rgba(37,99,235,0.18)) !important;
    border-color: rgba(147,197,253,0.28) !important;
    color: #ffffff !important;
}

#sidebar #btnLogout {
    background: linear-gradient(180deg, rgba(239,68,68,0.18), rgba(185,28,28,0.10)) !important;
    border: 1px solid rgba(252,165,165,0.22) !important;
    color: #fecaca !important;
    box-shadow: 0 10px 18px rgba(127, 29, 29, 0.18) !important;
}

#sidebar #btnLogout:hover {
    background: linear-gradient(180deg, rgba(239,68,68,0.28), rgba(185,28,28,0.18)) !important;
    color: #ffffff !important;
}

#sidebar #mainNav {
    padding: 8px 10px 18px !important;
}

#sidebar .nav-category {
    color: #94a3b8 !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
}

#sidebar .nav-link {
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transform: none !important;
    margin: 4px 10px !important;
    padding: 11px 13px !important;
    min-height: 46px !important;
    gap: 11px !important;
}

#sidebar .nav-link i {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dbeafe !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}

#sidebar .nav-link span {
    color: inherit !important;
    font-weight: 700 !important;
}

#sidebar .nav-link:hover {
    background: rgba(255,255,255,0.075) !important;
    border-color: rgba(147,197,253,0.18) !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

#sidebar .nav-link:hover i {
    color: #ffffff !important;
    background: rgba(59,130,246,0.28) !important;
    border-color: rgba(147,197,253,0.24) !important;
}

#sidebar .nav-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 68%, #1e40af 100%) !important;
    border-color: rgba(191,219,254,0.20) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 26px rgba(29, 78, 216, 0.26), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

#sidebar .nav-link.active i {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.20) !important;
    color: #ffffff !important;
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.50) !important;
    border-radius: 999px !important;
}

#sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04) !important;
}

@media (min-width: 992px) {
    .mobile-topbar {
        display: none !important;
    }

    :root {
        --desktop-app-header-height: 74px;
    }

    body {
        padding-top: var(--desktop-app-header-height);
    }

    body.auth-locked {
        padding-top: 0;
    }

    .desktop-app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--desktop-app-header-height);
        z-index: 1400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 0 22px;
        background: linear-gradient(90deg, #062e23 0%, #0b1c17 28%, #101828 100%);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 10px 28px rgba(2, 8, 23, 0.26);
    }

    .desktop-app-header-left,
    .desktop-app-header-right {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .desktop-app-header-left {
        flex: 0 1 520px;
    }

    .desktop-app-header-center {
        flex: 1 1 420px;
        min-width: 260px;
        max-width: 560px;
    }

    .desktop-brand-block {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        color: #f8fafc;
    }

    .desktop-brand-logo {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.15);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .desktop-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

    .desktop-brand-logo.has-image img {
        display: block;
    }

    .desktop-brand-logo.has-image .desktop-brand-logo-fallback {
        display: none;
    }

    .desktop-brand-logo-fallback {
        font-size: 18px;
        color: #ffffff;
    }

    .desktop-brand-copy {
        min-width: 0;
    }

    .desktop-brand-name {
        font-family: var(--font-heading);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
    }

    .desktop-brand-meta {
        margin-top: 3px;
        font-size: 11px;
        font-weight: 600;
        color: rgba(241, 245, 249, 0.70);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-header-divider {
        width: 1px;
        align-self: stretch;
        background: rgba(255,255,255,0.14);
    }

    .desktop-header-context {
        min-width: 0;
        color: #f8fafc;
    }

    .desktop-header-context-label {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(226, 232, 240, 0.62);
        margin-bottom: 3px;
        font-weight: 800;
    }

    .desktop-header-context strong {
        display: block;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .desktop-header-search {
        width: 100%;
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.08);
        color: #f8fafc;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .desktop-header-search i {
        color: rgba(255,255,255,0.72);
    }

    .desktop-header-search input {
        border: none;
        outline: none;
        background: transparent;
        flex: 1 1 auto;
        min-width: 0;
        color: #ffffff;
        font-size: 14px;
    }

    .desktop-header-search input::placeholder {
        color: rgba(226, 232, 240, 0.66);
    }

    .desktop-header-search-kbd {
        font-size: 11px;
        font-weight: 700;
        color: rgba(226, 232, 240, 0.72);
        padding: 4px 8px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.05);
    }

    .desktop-header-btn,
    .desktop-user-pill {
        min-height: 42px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.08);
        color: #f8fafc;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 700;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover {
        background: rgba(255,255,255,0.14);
        color: #ffffff;
        border-color: rgba(255,255,255,0.18);
    }

    .desktop-header-btn.icon-only {
        width: 42px;
        padding: 0;
    }

    .desktop-user-pill {
        max-width: 230px;
        justify-content: flex-start;
    }

    .desktop-user-pill i {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.14);
        flex-shrink: 0;
    }

    .desktop-user-pill-text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.1;
    }

    .desktop-user-pill-text small {
        font-size: 10px;
        font-weight: 600;
        color: rgba(226, 232, 240, 0.66);
    }

    .desktop-user-pill-text span {
        display: block;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.auth-locked .desktop-app-header {
        display: none !important;
    }

    #sidebar {
        top: var(--desktop-app-header-height);
        height: calc(100vh - var(--desktop-app-header-height));
        border-top: none;
    }

    #content {
        margin-top: 0;
        min-height: calc(100vh - var(--desktop-app-header-height));
    }

    #desktopNotifAnchor {
        position: static;
        inset: auto;
        display: flex !important;
    }

    #desktopNotifAnchor .notif-topbar-btn {
        min-height: 42px;
        width: 42px;
        padding: 0;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        color: #ffffff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(255,255,255,0.14);
        border-color: rgba(255,255,255,0.18);
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444;
        color: #ffffff;
    }

    #sidebar .brand-wrap {
        display: none;
    }

    .sidebar-user-panel {
        margin-top: 18px;
    }
}

@media (max-width: 991.98px) {
    .desktop-app-header {
        display: none !important;
    }
}

html[data-theme="dark"] .desktop-app-header,
body[data-theme="dark"] .desktop-app-header {
    background: linear-gradient(90deg, #04110e 0%, #091916 30%, #0f172a 100%);
    border-bottom-color: rgba(45, 68, 59, 0.85);
}

html[data-theme="dark"] .desktop-header-search,
body[data-theme="dark"] .desktop-header-search {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




@media (min-width: 992px) {
    :root {
        --desktop-app-header-height: 72px;
        --tbh-neutral-bg: #f5f7fb;
        --tbh-neutral-panel: #ffffff;
        --tbh-neutral-line: #e3e8ef;
        --tbh-neutral-text: #0f172a;
        --tbh-neutral-muted: #64748b;
        --tbh-neutral-accent: #2563eb;
    }

    body {
        background: linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%) !important;
    }

    .desktop-app-header {
        height: var(--desktop-app-header-height) !important;
        background: rgba(255,255,255,0.96) !important;
        color: var(--tbh-neutral-text) !important;
        border-bottom: 1px solid var(--tbh-neutral-line) !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-brand-name {
        color: var(--tbh-neutral-text) !important;
    }

    .desktop-brand-logo {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback {
        color: var(--tbh-neutral-accent) !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: var(--tbh-neutral-muted) !important;
    }

    .desktop-header-divider {
        background: #e2e8f0 !important;
    }

    .desktop-app-header-center {
        max-width: 720px !important;
        display: grid !important;
        grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
        gap: 10px;
        align-items: center;
    }

    .desktop-header-search {
        min-height: 42px !important;
        background: #f8fafc !important;
        border: 1px solid #dbe3ef !important;
        color: var(--tbh-neutral-text) !important;
        box-shadow: none !important;
    }

    .desktop-header-search i {
        color: #64748b !important;
    }

    .desktop-header-search input {
        color: var(--tbh-neutral-text) !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
    }

    .desktop-header-period-mount {
        min-width: 0;
    }

    .desktop-header-period-mount .global-period-filter-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 8px;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount .form-select {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        border-color: #dbe3ef !important;
        background-color: #f8fafc !important;
        color: #0f172a !important;
        font-weight: 700;
        font-size: 12px;
    }

    .desktop-header-period-mount .sidebar-period-reset {
        width: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        border: 1px solid #dbe3ef !important;
        background: #ffffff !important;
        color: #334155 !important;
        padding: 0 !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        min-height: 40px !important;
        height: 40px !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        border: 1px solid #dbe3ef !important;
        color: #334155 !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    .desktop-user-pill i {
        background: #eaf2ff !important;
        color: #2563eb !important;
    }

    .desktop-user-pill-text small {
        color: #64748b !important;
    }

    #sidebar {
        background: #ffffff !important;
        border-right: 1px solid #e3e8ef !important;
        box-shadow: 6px 0 18px rgba(15, 23, 42, 0.035) !important;
    }

    #sidebar .sidebar-user-panel {
        background: #f8fafc !important;
        border: 1px solid #e3e8ef !important;
        box-shadow: none !important;
        border-radius: 16px !important;
    }

    #sidebar .nav-category {
        color: #94a3b8 !important;
        letter-spacing: .08em !important;
        font-size: 10.5px !important;
        border-bottom: 1px solid #eef2f7;
        margin: 12px 18px 8px !important;
        padding: 0 0 8px !important;
    }

    #sidebar .nav-link {
        min-height: 42px !important;
        margin: 2px 12px !important;
        padding: 10px 12px !important;
        color: #475569 !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    #sidebar .nav-link i {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        color: #64748b !important;
        box-shadow: none !important;
    }

    #sidebar .nav-link:hover {
        background: #f8fafc !important;
        color: #0f172a !important;
        border-color: #eef2f7 !important;
    }

    #sidebar .nav-link.active {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        box-shadow: none !important;
    }

    #sidebar .nav-link.active i {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
    }

    #sidebar .bi.text-success,
    #sidebar .bi.text-danger {
        color: #64748b !important;
    }

    .sidebar-user-panel .global-period-filter-bar {
        display: none !important;
    }

    #content .page-head button[onclick*="loadDashboardAnalitik"],
    #content .page-head button[onclick*="loadLaporanPenjualan"],
    #content .page-head button[onclick*="loadStokRealtime"],
    #content .page-head button[onclick*="loadHistoriTransaksi"],
    #content .page-head button[aria-label*="Refresh"],
    #content .page-head .btn.tbh-page-refresh-hidden {
        display: none !important;
    }

    #content .page-head {
        min-height: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1280px) {
    .desktop-app-header-center {
        grid-template-columns: minmax(220px, 1fr) minmax(170px, 200px);
    }
    .desktop-header-search-kbd,
    .desktop-header-context {
        display: none !important;
    }
    .desktop-brand-name {
        max-width: 180px;
    }
}

html[data-theme="dark"] .desktop-app-header,
body[data-theme="dark"] .desktop-app-header {
    background: rgba(15, 23, 42, 0.96) !important;
    border-bottom-color: rgba(51, 65, 85, 0.9) !important;
}

html[data-theme="dark"] .desktop-brand-name,
html[data-theme="dark"] .desktop-header-context,
body[data-theme="dark"] .desktop-brand-name,
body[data-theme="dark"] .desktop-header-context {
    color: #e5edf7 !important;
}

html[data-theme="dark"] .desktop-header-search,
html[data-theme="dark"] .desktop-header-btn,
html[data-theme="dark"] .desktop-user-pill,
html[data-theme="dark"] #desktopNotifAnchor .notif-topbar-btn,
body[data-theme="dark"] .desktop-header-search,
body[data-theme="dark"] .desktop-header-btn,
body[data-theme="dark"] .desktop-user-pill,
body[data-theme="dark"] #desktopNotifAnchor .notif-topbar-btn {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(71, 85, 105, 0.9) !important;
    color: #e5edf7 !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




@media (min-width: 992px) {
    .desktop-app-header-right {
        position: relative;
    }

    #desktopThemeToggle {
        display: none !important;
    }

    #sidebar #sidebarThemeToggle,
    #sidebar #btnLogout {
        display: none !important;
    }

    .desktop-account-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .desktop-user-pill {
        cursor: pointer;
        padding-right: 12px !important;
    }

    .desktop-user-pill-caret {
        font-size: 12px;
        color: #64748b;
        transition: transform .16s ease;
    }

    .desktop-account-wrap.open .desktop-user-pill-caret {
        transform: rotate(180deg);
    }

    .desktop-account-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 276px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
        padding: 10px;
        display: none;
        z-index: 1600;
    }

    .desktop-account-menu.show {
        display: block;
        animation: fadeIn .16s ease;
    }

    .desktop-account-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        right: 26px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #e2e8f0;
        border-top: 1px solid #e2e8f0;
        transform: rotate(45deg);
    }

    .desktop-account-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 10px 12px;
        border-bottom: 1px solid #eef2f7;
        margin-bottom: 8px;
    }

    .desktop-account-avatar {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 18px;
    }

    .desktop-account-info {
        min-width: 0;
        flex: 1 1 auto;
    }

    .desktop-account-name {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-account-role {
        margin-top: 3px;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-account-menu-btn {
        width: 100%;
        border: 0;
        background: transparent;
        color: #334155;
        border-radius: 12px;
        min-height: 42px;
        padding: 9px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
    }

    .desktop-account-menu-btn i {
        width: 28px;
        height: 28px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        color: #64748b;
        flex: 0 0 auto;
    }

    .desktop-account-menu-btn:hover {
        background: #f8fafc;
        color: #0f172a;
    }

    .desktop-account-menu-btn:hover i {
        background: #eff6ff;
        color: #2563eb;
    }

    .desktop-account-menu-btn.danger {
        color: #b91c1c;
    }

    .desktop-account-menu-btn.danger i {
        background: #fff1f2;
        color: #e11d48;
    }

    .desktop-account-menu-separator {
        height: 1px;
        background: #eef2f7;
        margin: 8px 4px;
    }
}

html[data-theme="dark"] .desktop-account-menu,
body[data-theme="dark"] .desktop-account-menu {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 20px 48px rgba(0,0,0,.42);
}

html[data-theme="dark"] .desktop-account-menu::before,
body[data-theme="dark"] .desktop-account-menu::before {
    background: #0f172a;
    border-color: #334155;
}

html[data-theme="dark"] .desktop-account-card,
html[data-theme="dark"] .desktop-account-menu-separator,
body[data-theme="dark"] .desktop-account-card,
body[data-theme="dark"] .desktop-account-menu-separator {
    border-color: #1e293b;
    background-color: #1e293b;
}

html[data-theme="dark"] .desktop-account-name,
body[data-theme="dark"] .desktop-account-name {
    color: #e5edf7;
}

html[data-theme="dark"] .desktop-account-role,
body[data-theme="dark"] .desktop-account-role {
    color: #94a3b8;
}

html[data-theme="dark"] .desktop-account-menu-btn,
body[data-theme="dark"] .desktop-account-menu-btn {
    color: #cbd5e1;
}

html[data-theme="dark"] .desktop-account-menu-btn:hover,
body[data-theme="dark"] .desktop-account-menu-btn:hover {
    background: #1e293b;
    color: #ffffff;
}

html[data-theme="dark"] .desktop-account-menu-btn i,
body[data-theme="dark"] .desktop-account-menu-btn i {
    background: #1e293b;
    color: #94a3b8;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* Final polish: minimize sidebar dipindah ke utility bar, period filter tetap penuh di header */
@media (min-width: 992px) {
    #sidebar .sidebar-user-panel #sidebarMinimizeToggle,
    #sidebar .sidebar-user-panel #sidebarThemeToggle,
    #sidebar .sidebar-user-panel #btnLogout {
        display: none !important;
    }

    .sidebar-utility-bar {
        position: relative !important;
        z-index: 2 !important;
        padding: 8px 14px 10px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
        background: transparent !important;
    }

    .sidebar-utility-bar .sidebar-minimize-btn {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #475569 !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .sidebar-utility-bar .sidebar-minimize-btn:hover {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
    }

    .sidebar-utility-bar .sidebar-minimize-btn i {
        font-size: 16px !important;
        color: inherit !important;
    }

    body.sidebar-minimized .sidebar-utility-bar {
        padding: 8px 8px 10px !important;
    }

    body.sidebar-minimized .sidebar-utility-bar .sidebar-minimize-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        margin: 0 auto !important;
    }

    body.sidebar-minimized .sidebar-utility-bar .sidebar-minimize-text {
        display: none !important;
    }

    .desktop-header-period-mount {
        display: flex !important;
        align-items: center !important;
        min-width: 210px !important;
        flex: 0 0 230px !important;
    }

    .desktop-header-period-mount .global-period-filter-bar,
    .desktop-header-period-mount .desktop-period-filter,
    body.sidebar-minimized .desktop-header-period-mount .global-period-filter-bar,
    body.sidebar-minimized .desktop-header-period-mount .desktop-period-filter {
        width: 100% !important;
        min-width: 210px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 34px 0 13px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #334155 !important;
        background-color: #ffffff !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 13px !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect:focus,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect:focus {
        border-color: #93c5fd !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid #dbe3ef !important;
        background: #ffffff !important;
        color: #475569 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset:hover {
        background: #f8fafc !important;
        color: #0f172a !important;
    }
}

@media (min-width: 992px) and (max-width: 1220px) {
    .desktop-header-period-mount {
        flex-basis: 190px !important;
        min-width: 180px !important;
    }
    .desktop-header-period-mount .global-period-filter-bar,
    .desktop-header-period-mount .desktop-period-filter {
        min-width: 180px !important;
    }
}

html[data-theme="dark"] .sidebar-utility-bar,
body[data-theme="dark"] .sidebar-utility-bar {
    border-bottom-color: rgba(51, 65, 85, 0.82) !important;
}

html[data-theme="dark"] .sidebar-utility-bar .sidebar-minimize-btn,
body[data-theme="dark"] .sidebar-utility-bar .sidebar-minimize-btn,
html[data-theme="dark"] .desktop-header-period-mount #globalPeriodFilterSelect,
body[data-theme="dark"] .desktop-header-period-mount #globalPeriodFilterSelect,
html[data-theme="dark"] .desktop-header-period-mount .sidebar-period-reset,
body[data-theme="dark"] .desktop-header-period-mount .sidebar-period-reset {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}


/* TBH refinement: sidebar user panel removed, compact edge minimize button */
@media (min-width: 992px) {
    #sidebar .sidebar-user-panel {
        display: none !important;
    }

    #sidebar .brand-wrap {
        display: none !important;
    }

    #sidebar {
        overflow: visible !important;
    }

    #sidebar #mainNav {
        height: calc(100vh - var(--desktop-app-header-height) - 54px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 8px;
        padding-bottom: 18px;
    }

    .sidebar-utility-bar {
        position: sticky !important;
        top: 10px !important;
        z-index: 20 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 8px 10px 2px !important;
        margin: 0 !important;
        background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.92) 100%) !important;
        border-bottom: 1px solid #eef2f7 !important;
    }

    .sidebar-collapse-edge-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border: 1px solid #dbe3ef !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        color: #475569 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
        transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
    }

    .sidebar-collapse-edge-btn:hover {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        transform: translateX(-1px) !important;
    }

    .sidebar-collapse-edge-btn i {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    body.sidebar-minimized .sidebar-utility-bar {
        justify-content: center !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.sidebar-minimized .sidebar-collapse-edge-btn:hover {
        transform: translateX(1px) !important;
    }

    body.sidebar-minimized #sidebar #mainNav {
        height: calc(100vh - var(--desktop-app-header-height) - 54px);
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        display: inline-flex !important;
        width: auto !important;
        min-width: 210px !important;
        max-width: 260px !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        width: 100% !important;
        min-width: 150px !important;
        max-width: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

html[data-theme="dark"] .sidebar-utility-bar,
body[data-theme="dark"] .sidebar-utility-bar {
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.92)) !important;
    border-bottom-color: rgba(51,65,85,0.85) !important;
}

html[data-theme="dark"] .sidebar-collapse-edge-btn,
body[data-theme="dark"] .sidebar-collapse-edge-btn {
    background: rgba(30,41,59,0.96) !important;
    border-color: rgba(71,85,105,0.9) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.24) !important;
}

html[data-theme="dark"] .sidebar-collapse-edge-btn:hover,
body[data-theme="dark"] .sidebar-collapse-edge-btn:hover {
    background: rgba(37,99,235,0.16) !important;
    border-color: rgba(96,165,250,0.48) !important;
    color: #bfdbfe !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* FINAL: sidebar lebih simple, tanpa user panel dan tanpa minimize */
@media (min-width: 992px) {
    body.sidebar-minimized {
        --sidebar-width: 260px !important;
    }

    body.sidebar-minimized #sidebar,
    #sidebar {
        width: var(--sidebar-width) !important;
        top: var(--desktop-app-header-height) !important;
        height: calc(100vh - var(--desktop-app-header-height)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #ffffff !important;
        border-right: 1px solid #e5eaf1 !important;
        box-shadow: 4px 0 18px rgba(15, 23, 42, 0.025) !important;
    }

    body.sidebar-minimized #content,
    #content {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        max-width: calc(100vw - var(--sidebar-width)) !important;
    }

    #sidebar .brand-wrap,
    #sidebar .sidebar-user-panel,
    #sidebar .sidebar-utility-bar,
    #sidebarMinimizeToggle,
    #sidebarThemeToggle,
    #btnLogout {
        display: none !important;
    }

    body.sidebar-minimized #sidebar #mainNav,
    #sidebar #mainNav {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        padding: 16px 10px 24px !important;
    }

    body.sidebar-minimized #sidebar .nav-category,
    #sidebar .nav-category {
        display: block !important;
        margin: 18px 12px 8px !important;
        padding: 0 0 8px !important;
        color: #94a3b8 !important;
        border-bottom: 1px solid #eef2f7 !important;
        font-size: 10px !important;
        letter-spacing: .09em !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
    }

    body.sidebar-minimized #sidebar .nav-link,
    #sidebar .nav-link {
        justify-content: flex-start !important;
        min-height: 42px !important;
        margin: 2px 6px !important;
        padding: 9px 11px !important;
        gap: 10px !important;
        border-radius: 11px !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        color: #475569 !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body.sidebar-minimized #sidebar .nav-link span,
    #sidebar .nav-link span {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    body.sidebar-minimized #sidebar .nav-link i,
    #sidebar .nav-link i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        color: #64748b !important;
        font-size: 14px !important;
        box-shadow: none !important;
    }

    #sidebar .nav-link:hover {
        background: #f8fafc !important;
        color: #0f172a !important;
        border-color: #eef2f7 !important;
    }

    body.sidebar-minimized #sidebar .nav-link.active,
    #sidebar .nav-link.active {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #bfdbfe !important;
        box-shadow: none !important;
    }

    body.sidebar-minimized #sidebar .nav-link.active i,
    #sidebar .nav-link.active i {
        background: #dbeafe !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    #sidebar .bi.text-success,
    #sidebar .bi.text-danger {
        color: #64748b !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        display: inline-flex !important;
        width: auto !important;
        min-width: 210px !important;
        max-width: 260px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

html[data-theme="dark"] #sidebar,
body[data-theme="dark"] #sidebar {
    background: #0f172a !important;
    border-right-color: #1e293b !important;
    box-shadow: 4px 0 18px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] #sidebar .nav-category,
body[data-theme="dark"] #sidebar .nav-category {
    color: #64748b !important;
    border-bottom-color: #1e293b !important;
}

html[data-theme="dark"] #sidebar .nav-link,
body[data-theme="dark"] #sidebar .nav-link {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #sidebar .nav-link i,
body[data-theme="dark"] #sidebar .nav-link i {
    background: #111827 !important;
    border-color: #1e293b !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] #sidebar .nav-link:hover,
body[data-theme="dark"] #sidebar .nav-link:hover {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #1e293b !important;
}

html[data-theme="dark"] #sidebar .nav-link.active,
body[data-theme="dark"] #sidebar .nav-link.active {
    background: rgba(37, 99, 235, 0.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
}

html[data-theme="dark"] #sidebar .nav-link.active i,
body[data-theme="dark"] #sidebar .nav-link.active i {
    background: rgba(37, 99, 235, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.34) !important;
    color: #bfdbfe !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* FINAL: sidebar default ringkas, bisa dibuka sementara, lalu otomatis ringkas setelah pilih navigasi */
@media (min-width: 992px) {
    body:not(.sidebar-minimized) {
        --sidebar-width: 260px !important;
    }

    body.sidebar-minimized {
        --sidebar-width: 78px !important;
    }

    #sidebar,
    body.sidebar-minimized #sidebar {
        width: var(--sidebar-width) !important;
        transition: width .18s ease !important;
        overflow-x: visible !important;
        background: #ffffff !important;
        background-image: none !important;
        border-right: 1px solid #e5eaf1 !important;
        box-shadow: none !important;
    }

    #content,
    body.sidebar-minimized #content {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        max-width: calc(100vw - var(--sidebar-width)) !important;
        transition: margin-left .18s ease, width .18s ease, max-width .18s ease !important;
    }

    #sidebar .brand-wrap,
    #sidebar .sidebar-user-panel,
    #sidebar .sidebar-utility-bar,
    #sidebarThemeToggle,
    #btnLogout {
        display: none !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle {
        display: inline-flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        min-height: 48px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e5eaf1 !important;
        background: #ffffff !important;
        color: #1e293b !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition: background-color .18s ease, color .18s ease !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle,
    #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
    #sidebarMinimizeToggle.sidebar-auto-toggle i {
        color: #1e293b !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle:hover {
        background: #f8fafc !important;
        color: #1d4ed8 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle:hover .sidebar-auto-toggle-text,
    #sidebarMinimizeToggle.sidebar-auto-toggle:hover i {
        color: #1d4ed8 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle i {
        width: 24px !important;
        height: 24px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        background: #e2e8f0 !important;
    }

    body.sidebar-minimized #sidebarMinimizeToggle.sidebar-auto-toggle {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: #1e293b !important;
    }

    body.sidebar-minimized #sidebarMinimizeToggle.sidebar-auto-toggle i {
        background: transparent !important;
    }

    body.sidebar-minimized #sidebarMinimizeToggle .sidebar-auto-toggle-text {
        display: none !important;
    }

    #sidebar #mainNav {
        padding: 10px 10px 24px !important;
        transition: padding .18s ease !important;
        background: #ffffff !important;
    }

    body.sidebar-minimized #sidebar #mainNav {
        padding: 4px 8px 24px !important;
    }

    #sidebar .nav-category {
        transition: opacity .12s ease, height .12s ease, margin .12s ease, padding .12s ease !important;
    }

    body.sidebar-minimized #sidebar .nav-category {
        display: block !important;
        height: 1px !important;
        min-height: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin: 10px 12px 4px !important;
        padding: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        color: transparent !important;
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }

    body.sidebar-minimized #sidebar .nav-link {
        justify-content: center !important;
        min-height: 46px !important;
        margin: 4px 7px !important;
        padding: 7px !important;
        gap: 0 !important;
        border-radius: 14px !important;
        position: relative !important;
    }

    body.sidebar-minimized #sidebar .nav-link span {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    body.sidebar-minimized #sidebar .nav-link i {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        margin: 0 !important;
        border-radius: 11px !important;
    }

    body.sidebar-minimized #sidebar .nav-link:hover::after {
        content: attr(title) !important;
        position: fixed !important;
        left: calc(var(--sidebar-width) + 10px) !important;
        top: auto !important;
        transform: translateY(-2px) !important;
        max-width: 240px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 12px 30px rgba(15,23,42,0.22) !important;
        z-index: 2200 !important;
        pointer-events: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        display: inline-flex !important;
        width: auto !important;
        min-width: 210px !important;
        max-width: 260px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

html[data-theme="dark"] #sidebar,
body[data-theme="dark"] #sidebar,
html[data-theme="dark"] body.sidebar-minimized #sidebar,
body[data-theme="dark"] body.sidebar-minimized #sidebar {
    background: #0f172a !important;
    border-right-color: #1e293b !important;
    box-shadow: 4px 0 18px rgba(0,0,0,0.18) !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i {
    color: #e2e8f0 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i {
    background: #1e293b !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover {
    background: #172033 !important;
    border-color: #475569 !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover .sidebar-auto-toggle-text,
html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover .sidebar-auto-toggle-text,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover i {
    color: #bfdbfe !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* Final fix: tombol minimize menjadi bar penuh yang menutup lebar sidebar, bukan floating button */
@media (min-width: 992px) {
    #sidebarMinimizeToggle.sidebar-auto-toggle {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 60 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #dbe3ef !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        color: #1e293b !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: 0.01em !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
    #sidebarMinimizeToggle.sidebar-auto-toggle i {
        color: #1e293b !important;
        opacity: 1 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle i {
        width: 26px !important;
        height: 26px !important;
        border-radius: 9px !important;
        background: #e2e8f0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle:hover {
        background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%) !important;
        border-bottom-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle:hover .sidebar-auto-toggle-text,
    #sidebarMinimizeToggle.sidebar-auto-toggle:hover i {
        color: #1d4ed8 !important;
    }

    #sidebarMinimizeToggle.sidebar-auto-toggle:hover i {
        background: #dbeafe !important;
    }

    body.sidebar-minimized #sidebarMinimizeToggle.sidebar-auto-toggle {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #dbe3ef !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    }

    body.sidebar-minimized #sidebarMinimizeToggle.sidebar-auto-toggle i {
        margin: 0 auto !important;
        background: #e2e8f0 !important;
    }

    body.sidebar-minimized #sidebar #mainNav {
        padding-top: 8px !important;
    }
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle {
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%) !important;
    border-bottom-color: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.20) !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle .sidebar-auto-toggle-text,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle i {
    background: #1e293b !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover {
    background: linear-gradient(180deg, #172033 0%, #111827 100%) !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover i,
body[data-theme="dark"] #sidebarMinimizeToggle.sidebar-auto-toggle:hover i {
    background: #263247 !important;
}

@media (min-width: 992px) {
    #sidebar,
    #sidebar::before,
    #sidebar::after,
    body.sidebar-minimized #sidebar {
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    #sidebar .nav,
    #sidebar .nav-category,
    #sidebar .nav-link,
    #sidebar .nav-link.active,
    #sidebar .nav-link:hover {
        box-shadow: none !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Laporan Penjualan Command Layout
   Fokus: layout visual, konsisten dengan Dashboard Analitik.
   Tidak mengubah ID, endpoint, API, session, atau logic JS.
   ========================================================= */
#laporan-penjualan-section {
    --sales-command-bg: #f3f6fb;
    --sales-command-panel: #ffffff;
    --sales-command-line: #e2e8f0;
    --sales-command-soft-line: #eef2f7;
    --sales-command-text: #0f172a;
    --sales-command-muted: #64748b;
    --sales-command-blue: #2563eb;
    --sales-command-green: #047857;
    --sales-command-red: #be123c;
    --sales-command-amber: #b45309;
}

#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 14px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    border: 1px solid #dbeafe !important;
    background: #eff6ff !important;
    color: var(--sales-command-blue) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .page-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    color: var(--sales-command-text) !important;
    letter-spacing: -.035em !important;
}

#laporan-penjualan-section .section-note {
    max-width: 840px !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: var(--sales-command-muted) !important;
    font-weight: 650 !important;
}

#laporan-penjualan-section .sales-report-head-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#laporan-penjualan-section .analytics-period-chip,
#laporan-penjualan-section .sales-report-product-count-pill {
    min-height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid var(--sales-command-line) !important;
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-head-actions .btn {
    min-height: 36px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-nav {
    position: sticky !important;
    top: 78px !important;
    z-index: 20 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
    overflow-x: auto !important;
}

#laporan-penjualan-section .sales-report-nav-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-nav-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

#laporan-penjualan-section .sales-report-nav-btn.active {
    background: var(--sales-command-blue) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-tab-pane.active {
    display: grid !important;
    gap: 14px !important;
    animation: fadeIn .22s ease !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--sales-command-line) !important;
    border-left: 5px solid var(--sales-command-blue) !important;
    border-top: 1px solid var(--sales-command-line) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    color: var(--sales-command-text) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#laporan-penjualan-section .sales-report-hero::after,
#laporan-penjualan-section .sales-report-product-hero::after {
    display: none !important;
}

#laporan-penjualan-section .sales-report-hero-label {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-hero-title {
    margin-top: 10px !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    line-height: 1.12 !important;
    color: var(--sales-command-text) !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-hero-sub {
    margin-top: 8px !important;
    max-width: 820px !important;
    color: var(--sales-command-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 16px !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 6px solid var(--sales-command-green) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    color: var(--sales-command-text) !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #fecdd3 !important;
    border-left-color: var(--sales-command-red) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%) !important;
}

#laporan-penjualan-section .sales-report-product-profit-label,
#laporan-penjualan-section .sales-report-hero-metric-label {
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    margin-top: 7px !important;
    color: var(--sales-command-green) !important;
    font-size: clamp(22px, 2.5vw, 32px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    word-break: break-word !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: var(--sales-command-red) !important;
}

#laporan-penjualan-section .sales-report-product-profit-card .analytics-store-mini-sub,
#laporan-penjualan-section .sales-report-hero-metric .analytics-store-mini-sub {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-right: 1px solid var(--sales-command-soft-line) !important;
    border-bottom: 1px solid var(--sales-command-soft-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    font-size: 10px !important;
    letter-spacing: .055em !important;
    color: #64748b !important;
    font-weight: 900 !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 6px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 4px !important;
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value { color: var(--sales-command-blue) !important; }
#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value { color: var(--sales-command-green) !important; }
#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value { color: var(--sales-command-amber) !important; }
#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value { color: var(--sales-command-red) !important; }

#laporan-penjualan-section .sales-report-combined-store-section,
#laporan-penjualan-section .sales-report-product-panel {
    margin-top: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    border-top: 1px solid var(--sales-command-line) !important;
}

#laporan-penjualan-section .sales-report-combined-store-head,
#laporan-penjualan-section .sales-report-product-panel-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--sales-command-line) !important;
}

#laporan-penjualan-section .sales-report-combined-store-title,
#laporan-penjualan-section .analytics-group-title {
    color: var(--sales-command-text) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

#laporan-penjualan-section .sales-report-combined-store-sub {
    margin-top: 4px !important;
    color: var(--sales-command-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
}

#laporan-penjualan-section .sales-report-note-grid,
#laporan-penjualan-section .analytics-store-card-grid.sales-report-note-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    gap: 12px !important;
}

#laporan-penjualan-section .analytics-store-card.sales-report-note-card {
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#laporan-penjualan-section .analytics-store-card.sales-report-note-card::before {
    height: 2px !important;
    background: var(--sales-command-blue) !important;
}

#laporan-penjualan-section .analytics-store-card-head {
    padding: 13px 14px 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--sales-command-line) !important;
}

#laporan-penjualan-section .analytics-store-name {
    font-size: 14px !important;
    font-weight: 950 !important;
    color: #0f172a !important;
}

#laporan-penjualan-section .analytics-store-subtitle {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .analytics-store-rank,
#laporan-penjualan-section .sales-report-health-badge,
#laporan-penjualan-section .sales-report-product-status {
    box-shadow: none !important;
}

#laporan-penjualan-section .analytics-store-card-body {
    padding: 10px 14px 13px !important;
}

#laporan-penjualan-section .analytics-store-row {
    min-height: 38px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--sales-command-soft-line) !important;
}

#laporan-penjualan-section .analytics-store-row-label {
    font-size: 12px !important;
    font-weight: 850 !important;
}

#laporan-penjualan-section .analytics-store-row-sub {
    font-size: 10.5px !important;
    font-weight: 650 !important;
}

#laporan-penjualan-section .analytics-store-row-value {
    font-size: 12px !important;
    font-weight: 900 !important;
}

#laporan-penjualan-section .analytics-store-row.is-profit {
    margin-top: 8px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid #bbf7d0 !important;
    background: #f0fdf4 !important;
}

#laporan-penjualan-section .analytics-store-row.is-profit.negative {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
}

#laporan-penjualan-section .analytics-store-row-profit-percent {
    margin-top: 8px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
    border: 1px solid var(--sales-command-line) !important;
    background: #f8fafc !important;
}

#laporan-penjualan-section .sales-report-product-toolbar {
    display: grid !important;
    grid-template-columns: minmax(230px, 1.6fr) minmax(140px, .8fr) minmax(160px, .9fr) minmax(120px, .6fr) auto !important;
    align-items: end !important;
    gap: 9px !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

#laporan-penjualan-section .sales-report-product-toolbar .form-label {
    font-size: 10.5px !important;
    color: #64748b !important;
    font-weight: 900 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-toolbar .form-control,
#laporan-penjualan-section .sales-report-product-toolbar .form-select {
    min-height: 37px !important;
    border-radius: 11px !important;
    border-color: #dbe3ef !important;
    background: #ffffff !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-panel .btn-outline-danger {
    min-height: 36px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-table-wrap {
    max-height: 66vh !important;
    border: 1px solid var(--sales-command-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-table {
    min-width: 1080px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#laporan-penjualan-section .sales-report-product-table thead th,
#laporan-penjualan-section .sales-report-product-table thead tr:first-child th,
#laporan-penjualan-section .sales-report-product-table thead th.sales-report-product-sticky-col {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--sales-command-line) !important;
    border-right: none !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
}

#laporan-penjualan-section .sales-report-product-table tbody td,
#laporan-penjualan-section .sales-report-product-table tfoot td {
    border-right: none !important;
    border-bottom: 1px solid var(--sales-command-soft-line) !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    background: #ffffff !important;
}

#laporan-penjualan-section .sales-report-product-table tbody tr:hover td,
#laporan-penjualan-section .sales-report-product-table tbody tr:hover .sales-report-product-sticky-col {
    background: #f8fbff !important;
}

#laporan-penjualan-section .sales-report-product-sticky-col {
    min-width: 300px !important;
    max-width: 380px !important;
    background: #ffffff !important;
    box-shadow: 8px 0 18px rgba(15, 23, 42, 0.035) !important;
}

#laporan-penjualan-section .sales-report-product-name {
    font-size: 12.5px !important;
    font-weight: 950 !important;
    color: #0f172a !important;
}

#laporan-penjualan-section .sales-report-product-rank {
    min-width: 32px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-size: 10.5px !important;
}

#laporan-penjualan-section .sales-report-product-meta,
#laporan-penjualan-section .sales-report-product-cell-sub {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-cell-main {
    font-size: 12px !important;
    font-weight: 950 !important;
}

#laporan-penjualan-section .sales-report-product-row-toggle {
    margin-top: 6px !important;
    color: #2563eb !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
}

#laporan-penjualan-section .sales-report-product-detail-row td {
    background: #f8fafc !important;
}

#laporan-penjualan-section .sales-report-product-detail-panel {
    padding: 12px 14px !important;
    border-left: 3px solid var(--sales-command-blue) !important;
}

#laporan-penjualan-section .sales-report-product-detail-item {
    padding: 9px 10px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-table tfoot td {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    font-weight: 950 !important;
}

@media (max-width: 1200px) {
    #laporan-penjualan-section .sales-report-product-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #laporan-penjualan-section .sales-report-product-count-pill {
        justify-content: flex-start !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-page-head,
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-head-actions {
        justify-content: flex-start !important;
    }
    #laporan-penjualan-section .sales-report-note-grid,
    #laporan-penjualan-section .analytics-store-card-grid.sales-report-note-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #laporan-penjualan-section .sales-report-page-head,
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-combined-store-section,
    #laporan-penjualan-section .sales-report-product-panel {
        padding: 13px !important;
        border-radius: 18px !important;
    }
    #laporan-penjualan-section .sales-report-product-toolbar {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-head-actions,
    #laporan-penjualan-section .sales-report-head-actions .btn,
    #laporan-penjualan-section .analytics-period-chip {
        width: 100% !important;
    }
    #laporan-penjualan-section .sales-report-nav {
        top: 64px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Judul Laporan Penjualan di luar kotak
   Tujuan: menyamakan header Laporan Penjualan dengan Dashboard Analitik.
   Hanya layout/CSS, tidak mengubah endpoint/API/logic.
   ========================================================= */
#laporan-penjualan-section .sales-report-shell {
    max-width: 1480px !important;
    margin: 0 auto !important;
    gap: 14px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 14px !important;
    padding: 2px 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-page-head > div:first-child {
    min-width: 0 !important;
}

#laporan-penjualan-section .sales-report-kicker {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
    margin-bottom: 7px !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
}

#laporan-penjualan-section .page-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: -.03em !important;
    color: #0f172a !important;
}

#laporan-penjualan-section .page-title i {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #eff6ff !important;
    color: var(--primary-color) !important;
    border: 1px solid #dbeafe !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

#laporan-penjualan-section .sales-report-page-head .section-note {
    max-width: 820px !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    font-weight: 650 !important;
}

#laporan-penjualan-section .sales-report-head-actions {
    padding-top: 2px !important;
    align-items: center !important;
}

#laporan-penjualan-section .sales-report-head-actions .btn,
#laporan-penjualan-section .sales-report-head-actions .analytics-period-chip {
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-nav {
    top: 76px !important;
    margin-bottom: 2px !important;
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-page-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #laporan-penjualan-section .sales-report-head-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    #laporan-penjualan-section .sales-report-page-head {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    #laporan-penjualan-section .sales-report-nav {
        top: 64px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Laporan Penjualan tanpa panel bertumpuk
   Fokus: judul navigasi berada di luar kotak seperti Dashboard Analitik.
   Hanya CSS/layout, tidak mengubah ID, endpoint, API, session, atau JS logic.
   ========================================================= */
#laporan-penjualan-section {
    max-width: 1480px !important;
    margin: 0 auto !important;
}

#laporan-penjualan-section .sales-report-shell {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin: 0 0 12px !important;
    padding: 2px 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-kicker {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-nav {
    position: sticky !important;
    top: 76px !important;
    z-index: 20 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: auto !important;
}

#laporan-penjualan-section .sales-report-nav-btn {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 15px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-nav-btn:hover {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

#laporan-penjualan-section .sales-report-nav-btn.active {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .analytics-dashboard-pane,
#laporan-penjualan-section .sales-report-tab-pane.active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-tab-pane.active {
    display: grid !important;
    gap: 14px !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    margin: 0 !important;
    padding: 4px 0 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) !important;
    gap: 14px !important;
    align-items: stretch !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #0f172a !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-hero::after,
#laporan-penjualan-section .sales-report-product-hero::after {
    display: none !important;
}

#laporan-penjualan-section .sales-report-hero-label {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-hero-title {
    margin-top: 10px !important;
    font-size: clamp(22px, 2.4vw, 32px) !important;
    line-height: 1.1 !important;
    color: #0f172a !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-hero-sub {
    margin-top: 7px !important;
    max-width: 920px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 96px !important;
    padding: 14px 15px !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 5px solid #047857 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #fecdd3 !important;
    border-left-color: #be123c !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%) !important;
}

#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip,
#laporan-penjualan-section .sales-report-combined-store-section,
#laporan-penjualan-section .sales-report-product-panel {
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-panel.card {
    margin-top: 0 !important;
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    #laporan-penjualan-section .sales-report-nav {
        top: 64px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Global Navigation Layout Alignment
   Tujuan: semua halaman/navigasi memakai pola seperti Dashboard Analitik:
   judul berada di luar kotak, panel tidak bertumpuk, spacing lebih padat.
   Aman: hanya CSS/layout, tidak mengubah ID, endpoint, API, session, atau JS logic.
   ========================================================= */
:root {
    --tbh-layout-primary: #2563eb;
    --tbh-layout-primary-soft: #eff6ff;
    --tbh-layout-primary-border: #bfdbfe;
    --tbh-layout-ink: #0f172a;
    --tbh-layout-muted: #64748b;
    --tbh-layout-line: #e2e8f0;
    --tbh-layout-panel: #ffffff;
}

#content .content-section {
    max-width: 1480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#content .content-section > .page-shell,
#content .content-section > .sales-report-shell,
#content .content-section > .payroll-shell,
#content .content-section > .kas-utama-shell,
#content .content-section > .master-data-shell,
#content .content-section > .best-dropship-shell,
#content .content-section > .inbon-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#content .content-section .page-head,
#content .content-section .sales-report-page-head,
#content .content-section .history-page-head-compact {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#content .content-section .page-title,
#content .content-section .section-hero-title,
#content .content-section .master-data-title,
#content .content-section .best-dropship-title {
    margin: 0 !important;
    color: var(--tbh-layout-ink) !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', 'Inter', sans-serif) !important;
    font-size: clamp(22px, 2.1vw, 32px) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
    text-shadow: none !important;
}

#content .content-section .page-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#content .content-section .page-title i,
#content .content-section .section-hero-title i {
    color: var(--tbh-layout-primary) !important;
}

#content .content-section .section-note,
#content .content-section .section-hero-copy,
#content .content-section .master-data-subtitle,
#content .content-section .best-dropship-hero .section-note {
    max-width: 900px !important;
    color: var(--tbh-layout-muted) !important;
    font-size: 12px !important;
    line-height: 1.58 !important;
    font-weight: 650 !important;
}

/* Hero pembuka yang sebelumnya terlihat seperti kotak besar dibuat flat */
#realtime-section .section-hero-card,
#reset-section .section-hero-card,
#master-data-section .master-data-hero,
#best-dropship-section .best-dropship-hero {
    margin: 0 0 16px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tbh-layout-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

#realtime-section .section-hero-card::after,
#reset-section .section-hero-card::after,
#master-data-section .master-data-hero::after,
#best-dropship-section .best-dropship-hero::after {
    display: none !important;
}

#content .content-section .hero-badge-soft,
#content .content-section .sales-report-kicker,
#content .content-section .master-data-kicker,
#content .content-section .best-dropship-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: fit-content !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tbh-layout-primary) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

#content .content-section .hero-mini-stats,
#content .content-section .master-data-hero-stats,
#content .content-section .best-dropship-hero-stats {
    margin-top: 14px !important;
    gap: 10px !important;
}

#content .content-section .hero-mini-stat,
#content .content-section .master-data-hero-stat,
#content .content-section .best-dropship-hero-stat {
    border: 1px solid var(--tbh-layout-line) !important;
    border-radius: 16px !important;
    background: var(--tbh-layout-panel) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: none !important;
}

/* Halaman master produk: judul tidak lagi terasa dibungkus card besar */
#list-section .product-surface-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#list-section .product-surface-card > .page-head {
    margin: 0 0 14px !important;
}

#list-section .marketplace-toolbar {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border: 1px solid var(--tbh-layout-line) !important;
    border-radius: 18px !important;
    background: var(--tbh-layout-panel) !important;
    box-shadow: none !important;
}

#list-section .products-shell {
    border: 1px solid var(--tbh-layout-line) !important;
    border-radius: 18px !important;
    background: var(--tbh-layout-panel) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Semua panel isi dibuat lebih tenang: tidak banyak shadow dan efek bertumpuk */
#content .content-section .card:not(.asset-card):not(.sales-report-product-profit-card),
#content .content-section .toolbar-card,
#content .content-section .analytics-filter-card,
#content .content-section .history-overview-card,
#content .content-section .history-table-card,
#content .content-section .product-market-card,
#content .content-section .product-surface-card,
#content .content-section .stok-in-modern-shell,
#content .content-section .out-pane-shell,
#content .content-section .return-marketplace-form-shell,
#content .content-section .ads-shell,
#content .content-section .ads-toolbar-card,
#content .content-section .cost-toolbar-card,
#content .content-section .cost-card,
#content .content-section .sales-report-product-summary-strip,
#content .content-section .sales-report-combined-store-section,
#content .content-section .sales-report-product-panel {
    box-shadow: none !important;
}

#content .content-section .card:not(.asset-card),
#content .content-section .toolbar-card,
#content .content-section .analytics-filter-card,
#content .content-section .history-table-card,
#content .content-section .product-market-card,
#content .content-section .stok-in-modern-shell,
#content .content-section .out-pane-shell,
#content .content-section .return-marketplace-form-shell {
    border-color: var(--tbh-layout-line) !important;
}

/* Tab/switcher di semua modul dibuat seperti navigasi ringan, bukan panel baru */
#content .content-section .stok-in-pane-switcher,
#content .content-section .out-pane-switcher,
#content .content-section .ads-toolbar-card,
#content .content-section .sales-report-nav,
#content .content-section .cost-toolbar-card {
    box-shadow: none !important;
}

#content .content-section .stok-in-pane-btn.active,
#content .content-section .out-pane-btn.active,
#content .content-section .sales-report-nav-btn.active,
#content .content-section .ads-nav-btn.active,
#content .content-section .cost-nav-btn.active {
    box-shadow: none !important;
}

/* Jarak antar blok dibuat lebih rapat dan konsisten */
#content .content-section .row.g-4,
#content .content-section .row.g-3 {
    --bs-gutter-y: 1rem !important;
}

#content .content-section .mb-4 {
    margin-bottom: 1rem !important;
}

/* Dark mode tetap aman bila user mengaktifkan theme gelap */
html[data-theme="dark"] #content .content-section .page-title,
html[data-theme="dark"] #content .content-section .section-hero-title,
html[data-theme="dark"] #content .content-section .master-data-title,
html[data-theme="dark"] #content .content-section .best-dropship-title,
body[data-theme="dark"] #content .content-section .page-title,
body[data-theme="dark"] #content .content-section .section-hero-title,
body[data-theme="dark"] #content .content-section .master-data-title,
body[data-theme="dark"] #content .content-section .best-dropship-title {
    color: #e8f3ed !important;
}

html[data-theme="dark"] #content .content-section .hero-mini-stat,
html[data-theme="dark"] #list-section .marketplace-toolbar,
html[data-theme="dark"] #list-section .products-shell,
body[data-theme="dark"] #content .content-section .hero-mini-stat,
body[data-theme="dark"] #list-section .marketplace-toolbar,
body[data-theme="dark"] #list-section .products-shell {
    background: rgba(11,25,21,0.96) !important;
    border-color: rgba(48,84,71,0.85) !important;
}

@media (max-width: 991.98px) {
    #content .content-section .page-head,
    #content .content-section .sales-report-page-head,
    #content .content-section .history-page-head-compact {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #content .content-section .page-head > *,
    #content .content-section .sales-report-page-head > * {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    #content .content-section .page-title,
    #content .content-section .section-hero-title,
    #content .content-section .master-data-title,
    #content .content-section .best-dropship-title {
        font-size: 20px !important;
    }

    #list-section .marketplace-toolbar {
        padding: 10px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Unified Page Title System
   Semua judul halaman memakai ukuran, ikon, dan posisi yang sama.
   Ikon diambil otomatis dari navigasi sidebar, warna tetap mengikuti tema web.
   ========================================================= */
:root {
    --tbh-title-top-gap: 22px;
    --tbh-title-bottom-gap: 14px;
    --tbh-title-size: 24px;
    --tbh-title-icon-size: 38px;
}

@media (min-width: 992px) {
    #content,
    body.sidebar-minimized #content {
        padding-top: var(--tbh-title-top-gap) !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

#content .content-section {
    padding-top: 0 !important;
}

#content .content-section > .tbh-universal-page-head {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 0 0 var(--tbh-title-bottom-gap) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tbh-universal-title-left {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.tbh-universal-title-icon {
    width: var(--tbh-title-icon-size) !important;
    height: var(--tbh-title-icon-size) !important;
    min-width: var(--tbh-title-icon-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #2563eb !important;
    box-shadow: none !important;
}

.tbh-universal-title-icon i {
    color: #2563eb !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.tbh-universal-page-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-family: var(--font-heading, 'Plus Jakarta Sans', 'Inter', sans-serif) !important;
    font-size: var(--tbh-title-size) !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tbh-universal-title-meta {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
}

/* Setelah judul standar muncul, judul lama di header tiap modul disembunyikan agar tidak dobel. */
#content .content-section.tbh-title-standardized .tbh-legacy-title-hidden {
    display: none !important;
}

#content .content-section.tbh-title-standardized > .page-head,
#content .content-section.tbh-title-standardized > .sales-report-shell > .sales-report-page-head,
#content .content-section.tbh-title-standardized > .page-shell > .section-hero-card,
#content .content-section.tbh-title-standardized > .master-data-shell > .master-data-hero,
#content .content-section.tbh-title-standardized > .best-dropship-shell > .best-dropship-hero {
    margin-top: 0 !important;
}

/* Header lama yang tinggal berisi action/tabs dibuat ringan, bukan kotak judul kedua. */
#content .content-section.tbh-title-standardized > .page-head,
#content .content-section.tbh-title-standardized > .sales-report-shell > .sales-report-page-head {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content .content-section.tbh-title-standardized > .page-head:empty,
#content .content-section.tbh-title-standardized > .sales-report-shell > .sales-report-page-head:empty {
    display: none !important;
}

/* Hero yang sebelumnya membawa judul tetap boleh menyimpan KPI/statistik, tapi tidak mengambil posisi judul halaman. */
#realtime-section.tbh-title-standardized .section-hero-card,
#reset-section.tbh-title-standardized .section-hero-card,
#master-data-section.tbh-title-standardized .master-data-hero,
#best-dropship-section.tbh-title-standardized .best-dropship-hero {
    padding-top: 0 !important;
}

#content .content-section.tbh-title-standardized .hero-mini-stats,
#content .content-section.tbh-title-standardized .master-data-hero-stats,
#content .content-section.tbh-title-standardized .best-dropship-hero-stats {
    margin-top: 0 !important;
}

/* Title lama yang masih memakai emoji/icon custom tidak boleh memengaruhi ukuran global. */
#content .content-section.tbh-title-standardized .page-title,
#content .content-section.tbh-title-standardized .section-hero-title,
#content .content-section.tbh-title-standardized .master-data-title,
#content .content-section.tbh-title-standardized .best-dropship-title {
    font-size: var(--tbh-title-size) !important;
}



/* TBH FIX: legacy title cleanup for nested shells so titles do not appear double */
#content .content-section.tbh-title-standardized .tbh-legacy-title-block-hidden,
#content .content-section.tbh-title-standardized .tbh-legacy-head-empty {
    display: none !important;
}

#content .content-section.tbh-title-standardized > .page-shell > .page-head,
#content .content-section.tbh-title-standardized > .kas-utama-shell > .page-head,
#content .content-section.tbh-title-standardized > .payroll-shell > .page-head,
#content .content-section.tbh-title-standardized > .page-shell > .card > .page-head,
#content .content-section.tbh-title-standardized > .page-shell > .card .page-head:first-child {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content .content-section.tbh-title-standardized .tbh-legacy-head-actions-only {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content .content-section.tbh-title-standardized .tbh-legacy-head-actions-only {
    align-items: flex-start !important;
    justify-content: flex-end !important;
}

#content .content-section.tbh-title-standardized .tbh-legacy-head-actions-only > .d-flex,
#content .content-section.tbh-title-standardized .tbh-legacy-head-actions-only > [class*="actions"],
#content .content-section.tbh-title-standardized .tbh-legacy-head-actions-only > [class*="filter"] {
    margin-left: auto !important;
}

#content .content-section.tbh-title-standardized > .page-shell,
#content .content-section.tbh-title-standardized > .kas-utama-shell,
#content .content-section.tbh-title-standardized > .payroll-shell,
#content .content-section.tbh-title-standardized > .sales-report-shell {
    margin-top: 0 !important;
}

html[data-theme="dark"] .tbh-universal-page-title,
body[data-theme="dark"] .tbh-universal-page-title {
    color: #e8f3ed !important;
}

html[data-theme="dark"] .tbh-universal-title-icon,
body[data-theme="dark"] .tbh-universal-title-icon {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: rgba(96, 165, 250, 0.32) !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .tbh-universal-title-icon i,
body[data-theme="dark"] .tbh-universal-title-icon i {
    color: #bfdbfe !important;
}

@media (max-width: 991.98px) {
    :root {
        --tbh-title-top-gap: 16px;
        --tbh-title-bottom-gap: 12px;
        --tbh-title-size: 20px;
        --tbh-title-icon-size: 34px;
    }
    #content {
        padding-top: var(--tbh-title-top-gap) !important;
    }
    #content .content-section > .tbh-universal-page-head {
        min-height: 38px !important;
        align-items: flex-start !important;
    }
    .tbh-universal-page-title {
        white-space: normal !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* Menu sistem disatukan ke dropdown profil kanan atas; item lama tetap disembunyikan dari sidebar. */
#sidebar #nav-periode,
#sidebar #nav-company-profile,
#sidebar #nav-admin-team,
#sidebar #nav-category-security {
    display: none !important;
}

.desktop-account-menu-label {
    margin: 4px 4px 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #94a3b8;
}

.desktop-account-system-group {
    display: block;
}

.desktop-account-menu-btn.desktop-account-system-item.active {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.desktop-account-menu-btn.desktop-account-system-item.active i {
    color: #1d4ed8;
    background: #dbeafe;
}

html[data-theme="dark"] .desktop-account-menu-label,
body[data-theme="dark"] .desktop-account-menu-label {
    color: #94a3b8;
}

html[data-theme="dark"] .desktop-account-menu-btn.desktop-account-system-item.active,
body[data-theme="dark"] .desktop-account-menu-btn.desktop-account-system-item.active {
    background: rgba(37,99,235,.18);
    color: #bfdbfe;
    border-color: rgba(96,165,250,.26);
}

html[data-theme="dark"] .desktop-account-menu-btn.desktop-account-system-item.active i,
body[data-theme="dark"] .desktop-account-menu-btn.desktop-account-system-item.active i {
    background: rgba(37,99,235,.22);
    color: #bfdbfe;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* FINAL: semua master diarahkan ke Master Data supaya tidak ada dua pintu masuk */
#nav-promo-master,
.mobile-section-tab[data-target="promo-master-section"],
#adsNavTabs [data-pane="master"],
button[data-payroll-tab="master"],
#btnDropshipPaneMaster,
button[onclick*="openSupplierMasterModal"] {
    display: none !important;
}

#promo-master-section,
#adsPaneMaster,
#payrollPaneMaster,
#dropship-pane-master {
    display: none !important;
}

#master-data-section .master-data-tabs {
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#master-data-section .master-data-panel[data-master-data-panel="promo"] .card {
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

#master-data-section .master-data-panel[data-master-data-panel="promo"] .page-head {
    display: none !important;
}

#master-data-section .master-data-toolbar.master-data-toolbar-hidden {
    display: none !important;
}

#dropship-pane-nota,
#payrollPaneDashboard,
#adsPaneDashboard {
    scroll-margin-top: 90px;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH - Sticky / Beku Sub Navigasi Modul
   Sub navigasi tetap mengikuti scroll saat menyentuh header agar alur kerja panjang tetap rapi.
   Tidak mengubah endpoint/API, hanya layout CSS.
   ========================================================= */
:root {
    --tbh-sticky-subnav-top: calc(var(--desktop-app-header-height, 74px) + 10px);
    --tbh-sticky-subnav-z: 1190;
}

.tbh-sticky-subnav,
.tbh-sticky-subnav-head,
.tbh-sticky-history-card {
    position: sticky !important;
    top: var(--tbh-sticky-subnav-top) !important;
    z-index: var(--tbh-sticky-subnav-z) !important;
}

/* Bar navigasi umum: tab tetap ringan, tidak menjadi panel tebal baru. */
#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head {
    background: rgba(243, 246, 251, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
    padding: 8px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
}

/* Kalau subnav berada di page-head lama, title lama sudah disembunyikan oleh sistem title global. */
#content .content-section .tbh-sticky-subnav-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-height: 0 !important;
}

#content .content-section .tbh-sticky-subnav-head > .tbh-legacy-title-block-hidden {
    display: none !important;
}

/* Isi tab jangan turun berlebihan saat bar sticky. */
#content .content-section .tbh-sticky-subnav > *,
#content .content-section .tbh-sticky-subnav-head > * {
    flex-shrink: 0;
}

#laporan-penjualan-section .sales-report-nav.tbh-sticky-subnav,
#finance-section .toolbar-card.tbh-sticky-subnav,
#kas-utama-section .kas-utama-tabs.tbh-sticky-subnav,
#gaji-karyawan-section .payroll-tabs.tbh-sticky-subnav,
#ads-section .ads-toolbar-card.tbh-sticky-subnav,
#inbon-section .toolbar-card.tbh-sticky-subnav,
#dropship-section .tbh-dropship-pane-nav,
#packing-section .packing-simple-tabs.tbh-sticky-subnav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}


/* Inner switcher Stok In/Stok Out tidak perlu sticky kedua; parent page-head yang beku. */
#in-section .stok-in-pane-switcher.tbh-sticky-subnav,
#out-section .out-pane-switcher.tbh-sticky-subnav {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

#in-section .tbh-sticky-subnav-head .stok-in-pane-switcher,
#out-section .tbh-sticky-subnav-head .out-pane-switcher {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

#finance-section .toolbar-card.tbh-sticky-subnav .finance-nav-tabs,
#ads-section .ads-toolbar-card.tbh-sticky-subnav .ads-nav-tabs,
#inbon-section .toolbar-card.tbh-sticky-subnav .inbon-window-tabs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#dropship-section .tbh-dropship-pane-nav .btn,
#kas-utama-section .kas-utama-tab,
#gaji-karyawan-section .payroll-tab-btn,
#packing-section .packing-simple-tab,
#laporan-penjualan-section .sales-report-nav-btn,
#finance-section .finance-nav-btn,
#ads-section .ads-nav-btn,
#inbon-section .inbon-window-btn,
#in-section .stok-in-pane-btn,
#out-section .out-pane-btn {
    white-space: nowrap !important;
}

/* Histori transaksi: filter/type navigation ikut beku, tapi dibuat slim agar tidak menutup tabel. */
#history-section .history-overview-card.tbh-sticky-history-card {
    top: var(--tbh-sticky-subnav-top) !important;
    z-index: calc(var(--tbh-sticky-subnav-z) - 2) !important;
    margin-bottom: 16px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

#history-section .history-overview-card.tbh-sticky-history-card .history-hero {
    display: none !important;
}

#history-section .history-filter-grid.tbh-sticky-history-filter {
    margin-top: 0 !important;
}

#history-section .history-type-filter-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
}

/* Scrollbar halus untuk tab panjang. */
.tbh-sticky-subnav::-webkit-scrollbar,
.tbh-sticky-subnav-head::-webkit-scrollbar,
#history-section .history-type-filter-nav::-webkit-scrollbar,
#finance-section .finance-nav-tabs::-webkit-scrollbar,
#ads-section .ads-nav-tabs::-webkit-scrollbar,
#inbon-section .inbon-window-tabs::-webkit-scrollbar,
#in-section .stok-in-pane-switcher::-webkit-scrollbar,
#out-section .out-pane-switcher::-webkit-scrollbar {
    height: 6px !important;
}

.tbh-sticky-subnav::-webkit-scrollbar-thumb,
.tbh-sticky-subnav-head::-webkit-scrollbar-thumb,
#history-section .history-type-filter-nav::-webkit-scrollbar-thumb,
#finance-section .finance-nav-tabs::-webkit-scrollbar-thumb,
#ads-section .ads-nav-tabs::-webkit-scrollbar-thumb,
#inbon-section .inbon-window-tabs::-webkit-scrollbar-thumb,
#in-section .stok-in-pane-switcher::-webkit-scrollbar-thumb,
#out-section .out-pane-switcher::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}

/* Dark mode tetap konsisten. */
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav,
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head,
html[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head,
body[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card {
    background: rgba(15, 23, 42, 0.92) !important;
    border-color: rgba(51, 65, 85, 0.9) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

@media (max-width: 991.98px) {
    :root {
        --tbh-sticky-subnav-top: 68px;
    }

    #content .content-section .tbh-sticky-subnav,
    #content .content-section .tbh-sticky-subnav-head,
    #history-section .history-overview-card.tbh-sticky-history-card {
        border-radius: 14px !important;
        padding: 7px !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    #history-section .history-filter-grid.tbh-sticky-history-filter {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V2 - Sub navigasi benar-benar sticky/beku.
   Penyebab patch sebelumnya belum terasa: #content memakai overflow-x:hidden,
   sehingga position: sticky bisa gagal karena parent dianggap scroll container.
   Patch ini membuka overflow parent secara aman, lalu membekukan tab di bawah header.
   ========================================================= */
@media (min-width: 992px) {
    html,
    body {
        overflow-x: clip !important;
    }

    #content,
    #content > .content-section,
    #content > .content-section.active,
    #content .content-section > .page-shell,
    #content .content-section > .sales-report-shell,
    #content .content-section > .payroll-shell,
    #content .content-section > .kas-utama-shell,
    #content .content-section > .master-data-shell,
    #content .content-section > .best-dropship-shell,
    #content .content-section > .inbon-shell,
    #content .content-section .ads-shell,
    #content .content-section .finance-shell,
    #content .content-section .dropship-shell,
    #content .content-section .out-pane-shell,
    #content .content-section .stok-in-modern-shell,
    #content .content-section .return-marketplace-form-shell {
        overflow: visible !important;
    }

    #content .content-section .tbh-sticky-subnav,
    #content .content-section .tbh-sticky-subnav-head,
    #history-section .history-overview-card.tbh-sticky-history-card {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--desktop-app-header-height, 74px) !important;
        z-index: 1392 !important;
        transform: translateZ(0) !important;
        will-change: top !important;
    }

    #content .content-section .tbh-sticky-subnav::before,
    #content .content-section .tbh-sticky-subnav-head::before,
    #history-section .history-overview-card.tbh-sticky-history-card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 1px;
        background: transparent;
        pointer-events: none;
    }
}

@supports not (overflow: clip) {
    @media (min-width: 992px) {
        html,
        body {
            overflow-x: hidden !important;
        }
    }
}

@media (max-width: 991.98px) {
    #content,
    #content > .content-section,
    #content > .content-section.active,
    #content .content-section > .page-shell,
    #content .content-section > .sales-report-shell,
    #content .content-section > .payroll-shell,
    #content .content-section > .kas-utama-shell,
    #content .content-section > .inbon-shell,
    #content .content-section .ads-shell {
        overflow: visible !important;
    }

    #content .content-section .tbh-sticky-subnav,
    #content .content-section .tbh-sticky-subnav-head,
    #history-section .history-overview-card.tbh-sticky-history-card {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 58px !important;
        z-index: 1392 !important;
    }
}

/* Sticky bar dibuat nempel ke header, bukan turun dengan jarak besar. */
#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head,
#history-section .history-overview-card.tbh-sticky-history-card {
    margin-top: 0 !important;
    scroll-margin-top: calc(var(--desktop-app-header-height, 74px) + 14px) !important;
}

/* Kalau wrapper tab sebelumnya punya style card tebal, jadikan seperti strip navigasi profesional. */
#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head {
    background: rgba(248, 250, 252, 0.96) !important;
    border: 1px solid rgba(226, 232, 240, 0.96) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
}

/* Khusus tab yang panjang: outer sticky tetap beku, isi tetap bisa digeser horizontal. */
#laporan-penjualan-section .sales-report-nav.tbh-sticky-subnav,
#kas-utama-section .kas-utama-tabs.tbh-sticky-subnav,
#gaji-karyawan-section .payroll-tabs.tbh-sticky-subnav,
#dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav,
#packing-section .packing-simple-tabs.tbh-sticky-subnav {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

#finance-section .toolbar-card.tbh-sticky-subnav,
#ads-section .ads-toolbar-card.tbh-sticky-subnav,
#inbon-section .toolbar-card.tbh-sticky-subnav {
    overflow: visible !important;
}

#finance-section .toolbar-card.tbh-sticky-subnav .finance-nav-tabs,
#ads-section .ads-toolbar-card.tbh-sticky-subnav .ads-nav-tabs,
#inbon-section .toolbar-card.tbh-sticky-subnav .inbon-window-tabs,
#in-section .tbh-sticky-subnav-head .stok-in-pane-switcher,
#out-section .tbh-sticky-subnav-head .out-pane-switcher {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V4 - Sticky Subnav Position Follow
   Fokus: yang dijaga hanya posisi sub navigasi tetap menempel di header.
   Konten panel tidak dikunci tinggi, tidak dipotong, dan tetap mengikuti layout normal.
   ========================================================= */
#content > .content-section.tbh-subnav-position-following {
    overflow-anchor: none !important;
}

#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head,
#history-section .history-overview-card.tbh-sticky-history-card {
    overflow-anchor: none !important;
    scroll-margin-top: calc(var(--desktop-app-header-height, 74px) + 12px) !important;
}

/* Ruang bawah hanya cadangan tipis saat konten sangat pendek, bukan pengunci konten. */
#content > .content-section.tbh-subnav-position-following::after {
    content: "";
    display: block;
    height: var(--tbh-subnav-follow-bottom-space, 0px);
    pointer-events: none;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V5 - Soft Natural Sticky Shadow
   Fokus: shadow sub navigasi lebih lembut, tidak terlalu lebar,
   dan tidak memberi efek blur/menutup teks konten di bawah.
   ========================================================= */
#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head {
    background: #f8fafc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045), 0 1px 2px rgba(15, 23, 42, 0.035) !important;
    margin-bottom: 12px !important;
}

#history-section .history-overview-card.tbh-sticky-history-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045), 0 1px 2px rgba(15, 23, 42, 0.035) !important;
    margin-bottom: 12px !important;
}

#content .content-section .tbh-sticky-subnav::before,
#content .content-section .tbh-sticky-subnav-head::before,
#history-section .history-overview-card.tbh-sticky-history-card::before {
    display: none !important;
}

/* Inner tab tetap polos agar tidak ada shadow bertumpuk di dalam sticky bar. */
#finance-section .toolbar-card.tbh-sticky-subnav .finance-nav-tabs,
#ads-section .ads-toolbar-card.tbh-sticky-subnav .ads-nav-tabs,
#inbon-section .toolbar-card.tbh-sticky-subnav .inbon-window-tabs,
#in-section .tbh-sticky-subnav-head .stok-in-pane-switcher,
#out-section .tbh-sticky-subnav-head .out-pane-switcher {
    box-shadow: none !important;
    background: transparent !important;
}

/* Tombol tab aktif boleh punya aksen, tapi shadow-nya dibuat kecil agar tidak terlihat ngeblur. */
#laporan-penjualan-section .sales-report-nav-btn.active,
#finance-section .finance-nav-btn.active,
#ads-section .ads-nav-btn.active,
#inbon-section .inbon-window-btn.active,
#gaji-karyawan-section .payroll-tab-btn.active,
#kas-utama-section .kas-utama-tab.active,
#packing-section .packing-simple-tab.active,
#in-section .stok-in-pane-btn.active,
#out-section .out-pane-btn.active {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.14) !important;
}

html[data-theme="dark"] #content .content-section .tbh-sticky-subnav,
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head,
html[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head,
body[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card {
    background: #0f172a !important;
    border-color: rgba(51, 65, 85, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

@media (max-width: 991.98px) {
    #content .content-section .tbh-sticky-subnav,
    #content .content-section .tbh-sticky-subnav-head,
    #history-section .history-overview-card.tbh-sticky-history-card {
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
        margin-bottom: 10px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V6 - Sticky Subnav Header Block
   Saat sub navigasi sudah mentok ke header, munculkan blok putih lurus
   dari batas sub navigasi sampai header. Shadow dibuat tipis supaya teks
   konten di bawah tetap terbaca natural, tidak terlihat blur.
   ========================================================= */
:root {
    --tbh-sticky-subnav-shadow: 0 4px 10px rgba(15, 23, 42, 0.075);
    --tbh-sticky-subnav-line: rgba(226, 232, 240, 0.96);
    --tbh-sticky-subnav-bg: #ffffff;
}

#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head,
#history-section .history-overview-card.tbh-sticky-history-card {
    isolation: isolate !important;
    transition: box-shadow 0.16s ease, border-radius 0.16s ease, background-color 0.16s ease, border-color 0.16s ease !important;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck {
    background: var(--tbh-sticky-subnav-bg) !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck::before,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck::before,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    pointer-events: none !important;
    left: -36px !important;
    right: -36px !important;
    top: calc(-1 * var(--desktop-app-header-height, 74px)) !important;
    height: calc(var(--desktop-app-header-height, 74px) + 100%) !important;
    background: var(--tbh-sticky-subnav-bg) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--tbh-sticky-subnav-line) !important;
    box-shadow: var(--tbh-sticky-subnav-shadow) !important;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck::after,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck::after,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    left: -36px !important;
    right: -36px !important;
    bottom: -1px !important;
    height: 1px !important;
    background: var(--tbh-sticky-subnav-line) !important;
    border-radius: 0 !important;
}

/* Isi tab tetap natural; yang dibuat lurus hanya blok putih sticky-nya. */
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck > *,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck > *,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck > * {
    position: relative !important;
    z-index: 1 !important;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .sales-report-nav-btn.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .finance-nav-btn.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .ads-nav-btn.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .inbon-window-btn.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .payroll-tab-btn.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .kas-utama-tab.active,
#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck .packing-simple-tab.active,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck .stok-in-pane-btn.active,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck .out-pane-btn.active {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.13) !important;
}

html[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck,
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck,
html[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck,
body[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck {
    --tbh-sticky-subnav-bg: #0f172a;
    --tbh-sticky-subnav-line: rgba(51, 65, 85, 0.92);
    --tbh-sticky-subnav-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}

@media (max-width: 991.98px) {
    #content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck::before,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck::before,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck::before {
        left: -16px !important;
        right: -16px !important;
        top: -58px !important;
        height: calc(58px + 100%) !important;
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.055) !important;
    }

    #content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck::after,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck::after,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck::after {
        left: -16px !important;
        right: -16px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V8 - Stok In/Out Sticky Visible Fix
   Masalah V6: blok putih sticky terlihat, tetapi tombol sub navigasi Stok In/Out
   ikut bergeser ke atas karena masih berada di dalam .page-head.
   Solusi: page-head dibuat normal, tombol subnav dipisahkan menjadi bar sticky sendiri.
   ========================================================= */
#in-section > .page-head.tbh-sticky-subnav-head,
#out-section > .page-head.tbh-sticky-subnav-head,
#in-section > .page-head.tbh-no-sticky-page-head,
#out-section > .page-head.tbh-no-sticky-page-head {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    isolation: auto !important;
}

#in-section > .page-head.tbh-sticky-subnav-head::before,
#in-section > .page-head.tbh-sticky-subnav-head::after,
#out-section > .page-head.tbh-sticky-subnav-head::before,
#out-section > .page-head.tbh-sticky-subnav-head::after,
#in-section > .page-head.tbh-no-sticky-page-head::before,
#in-section > .page-head.tbh-no-sticky-page-head::after,
#out-section > .page-head.tbh-no-sticky-page-head::before,
#out-section > .page-head.tbh-no-sticky-page-head::after {
    content: none !important;
    display: none !important;
}

/* Setelah dipisah oleh script, subnav Stok In/Out menjadi direct child section dan bisa sticky normal. */
#in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
#out-section > .out-pane-switcher.tbh-sticky-subnav {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--desktop-app-header-height, 74px) !important;
    z-index: 1505 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.94) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.045), 0 1px 2px rgba(15, 23, 42, 0.035) !important;
    padding: 7px !important;
    margin: 0 0 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
}

#in-section > .stok-in-pane-switcher.tbh-sticky-subnav > *,
#out-section > .out-pane-switcher.tbh-sticky-subnav > * {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
}

/* Kondisi ketika sudah menyentuh header: blok putih lurus + shadow kecil. */
#in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck,
#out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck {
    background: #ffffff !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
#out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    pointer-events: none !important;
    left: -36px !important;
    right: -36px !important;
    top: calc(-1 * var(--desktop-app-header-height, 74px)) !important;
    height: calc(var(--desktop-app-header-height, 74px) + 100%) !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.96) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.065) !important;
}

#in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after,
#out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    left: -36px !important;
    right: -36px !important;
    bottom: -1px !important;
    height: 1px !important;
    background: rgba(226, 232, 240, 0.96) !important;
}

#in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck .stok-in-pane-btn.active,
#out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck .out-pane-btn.active {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.13) !important;
}

html[data-theme="dark"] #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck,
html[data-theme="dark"] #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck,
body[data-theme="dark"] #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck,
body[data-theme="dark"] #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck {
    background: #0f172a !important;
}

html[data-theme="dark"] #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
html[data-theme="dark"] #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
body[data-theme="dark"] #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
body[data-theme="dark"] #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before {
    background: #0f172a !important;
    border-bottom-color: rgba(51, 65, 85, 0.92) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20) !important;
}

@media (max-width: 991.98px) {
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
    #out-section > .out-pane-switcher.tbh-sticky-subnav {
        top: 58px !important;
        margin-bottom: 12px !important;
    }

    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before {
        left: -16px !important;
        right: -16px !important;
        top: -58px !important;
        height: calc(58px + 100%) !important;
        box-shadow: 0 3px 8px rgba(15, 23, 42, 0.055) !important;
    }

    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after {
        left: -16px !important;
        right: -16px !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FIX V10 - Nota Header Setting selalu di atas sub navigasi sticky
   Masalah: panel Setting Header berada di dalam konten sehingga tertutup
   oleh sub navigasi sticky Inbon/Dropship. Panel dibuat floating modal
   agar aman di semua modul tanpa mengubah endpoint/API.
   ========================================================= */
body.nota-header-settings-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 29980;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}

body.nota-header-settings-open #content .content-section .tbh-sticky-subnav,
body.nota-header-settings-open #content .content-section .tbh-sticky-subnav-head,
body.nota-header-settings-open #history-section .history-overview-card.tbh-sticky-history-card,
body.nota-header-settings-open #inbon-section .toolbar-card.tbh-sticky-subnav,
body.nota-header-settings-open #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav {
    z-index: 900 !important;
}

.nota-header-settings-panel:not(.d-none) {
    position: fixed !important;
    z-index: 30010 !important;
    top: 92px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(980px, calc(100vw - 48px)) !important;
    max-height: calc(100vh - 122px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.98) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.32) !important;
}

.nota-header-settings-panel:not(.d-none) .nota-header-settings-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    margin: -18px -18px 16px;
    padding: 18px 18px 14px;
    border-radius: 22px 22px 0 0;
    border-bottom: 1px solid #e2e8f0;
}

.nota-header-settings-panel:not(.d-none)::after {
    content: "";
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    .nota-header-settings-panel:not(.d-none) {
        top: 72px !important;
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 92px) !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }
    .nota-header-settings-panel:not(.d-none) .nota-header-settings-head {
        top: -14px;
        margin: -14px -14px 14px;
        padding: 14px;
        border-radius: 18px 18px 0 0;
    }
}

html[data-theme="dark"] body.nota-header-settings-open::before,
body[data-theme="dark"].nota-header-settings-open::before {
    background: rgba(2, 6, 23, 0.62);
}

html[data-theme="dark"] .nota-header-settings-panel:not(.d-none),
body[data-theme="dark"] .nota-header-settings-panel:not(.d-none) {
    background: #0f172a !important;
    border-color: rgba(51, 65, 85, 0.96) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .nota-header-settings-panel:not(.d-none) .nota-header-settings-head,
body[data-theme="dark"] .nota-header-settings-panel:not(.d-none) .nota-header-settings-head {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
    border-bottom-color: rgba(51, 65, 85, 0.96) !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FIX V11 - Semua popup Bootstrap berada di atas sub navigasi sticky
   Masalah: sub navigasi sticky memakai z-index tinggi sehingga menutup
   popup Review Nota PDF Dropship/INBON. Modal dan backdrop dinaikkan
   layer-nya, sementara sticky nav diturunkan saat modal aktif.
   ========================================================= */
body.modal-open .modal-backdrop {
    z-index: 30000 !important;
}
body.modal-open .modal {
    z-index: 30020 !important;
}
body.modal-open #dropshipPdfPreviewModal,
body.modal-open #inbonPdfPreviewModal {
    z-index: 30040 !important;
}
body.modal-open .modal-dialog {
    position: relative;
    z-index: 1;
}
body.modal-open #content .content-section .tbh-sticky-subnav,
body.modal-open #content .content-section .tbh-sticky-subnav-head,
body.modal-open #history-section .history-overview-card.tbh-sticky-history-card,
body.modal-open #inbon-section .toolbar-card.tbh-sticky-subnav,
body.modal-open #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav,
body.modal-open #in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
body.modal-open #out-section > .out-pane-switcher.tbh-sticky-subnav {
    z-index: 900 !important;
}
body.modal-open .dropship-pdf-preview-wrap {
    max-height: calc(100vh - 190px);
}
@media (max-width: 768px) {
    body.modal-open .dropship-pdf-preview-wrap {
        max-height: calc(100vh - 170px);
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




    #laporan-laba-rugi-section .laba-rugi-clean-head {
        padding: 0 !important;
        margin-bottom: 14px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #laporan-laba-rugi-section .laba-rugi-clean-head .laba-rugi-kicker,
    #laporan-laba-rugi-section .laba-rugi-clean-head h3,
    #laporan-laba-rugi-section .laba-rugi-clean-head h4 {
        display: none !important;
    }
    #laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 22px !important;
        overflow: visible !important;
        background: #ffffff !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .055) !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 64px !important;
        position: relative !important;
        z-index: 5 !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        overflow: visible !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar .laba-rugi-subnav-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 38px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        color: #475569 !important;
        padding: 9px 12px !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar .laba-rugi-subnav-btn.active {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 8px 18px rgba(37,99,235,.16) !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar .laba-rugi-subnav-btn small {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 19px !important;
        height: 19px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar .laba-rugi-subnav-btn.active small {
        background: rgba(255,255,255,.18) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.22) !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        padding-left: 12px !important;
        border-left: 1px solid #e2e8f0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-label {
        display: inline-flex !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        flex-wrap: wrap !important;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        display: block !important;
        min-width: 210px !important;
        max-width: 280px !important;
        min-height: 36px !important;
    }
    #laporan-laba-rugi-section .laba-rugi-filter-card,
    #laporan-laba-rugi-section .laba-rugi-pro-filter {
        display: none !important;
    }
    #laporan-laba-rugi-section .laba-rugi-detail-pane {
        padding: 16px !important;
    }
    #laporan-laba-rugi-section .laba-rugi-detail-pane:not(.active),
    #laporan-laba-rugi-section .laba-rugi-detail-pane[hidden] {
        display: none !important;
    }
    #laporan-laba-rugi-section .laba-rugi-detail-pane.active {
        display: block !important;
    }
    @media (max-width: 991.98px) {
        #laporan-laba-rugi-section .laba-rugi-inline-filter {
            width: 100% !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
            padding-top: 10px !important;
            border-left: 0 !important;
            border-top: 1px solid #e2e8f0 !important;
        }
    }
    @media (max-width: 767.98px) {
        #laporan-laba-rugi-section #pnlPeriodPreset {
            min-width: 100% !important;
            max-width: 100% !important;
        }
        #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
            width: 100% !important;
        }
        #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
            flex: 1 1 110px !important;
        }
    }


/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* TBH Pro: top bar dark tanpa shadow/blur yang melebar ke area konten */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 52%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.72) !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
    }

    .desktop-app-header::before,
    .desktop-app-header::after {
        content: none !important;
        display: none !important;
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .desktop-header-search,
    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar,
    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.58) !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16) !important;
    }

    #sidebar {
        box-shadow: none !important;
        filter: none !important;
    }

    #content,
    .content-section,
    #content .card,
    #content .page-head {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.72) !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-topbar::before,
    .mobile-topbar::after {
        content: none !important;
        display: none !important;
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-topbar .btn,
    .mobile-topbar .notif-topbar-btn {
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sidebar-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}



/* Dashboard Analitik Executive Board: menambah isi visual tanpa mengubah endpoint */
#dash-section .analytics-owner-intelligence-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
    gap: 18px;
    margin: 0 0 20px;
}
#dash-section .analytics-intelligence-left,
#dash-section .analytics-intelligence-right,
#dash-section .analytics-composition-card,
#dash-section .analytics-priority-card {
    min-width: 0;
}
#dash-section .analytics-intelligence-left,
#dash-section .analytics-composition-card,
#dash-section .analytics-priority-card {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}
#dash-section .analytics-intelligence-left {
    padding: 18px;
}
#dash-section .analytics-intelligence-right {
    display: grid;
    gap: 16px;
}
#dash-section .analytics-intelligence-head,
#dash-section .analytics-composition-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
#dash-section .analytics-intelligence-kicker,
#dash-section .analytics-composition-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
#dash-section .analytics-intelligence-head h4,
#dash-section .analytics-composition-head h5 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -.02em;
}
#dash-section .analytics-intelligence-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
    max-width: 640px;
}
#dash-section .analytics-health-pill {
    min-width: 156px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    border-radius: 18px;
    padding: 12px 14px;
    text-align: right;
}
#dash-section .analytics-health-pill span {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
#dash-section .analytics-health-pill strong {
    display: block;
    color: #1d4ed8;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    margin-top: 5px;
}
#dash-section .analytics-health-pill small {
    display: block;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    margin-top: 5px;
}
#dash-section .analytics-smart-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#dash-section .analytics-smart-card,
#dash-section .analytics-priority-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 18px;
    padding: 14px;
    min-width: 0;
}
#dash-section .analytics-smart-card > span,
#dash-section .analytics-priority-item > i {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 18px;
}
#dash-section .analytics-smart-card strong,
#dash-section .analytics-priority-item strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
}
#dash-section .analytics-smart-card small,
#dash-section .analytics-priority-item small {
    display: block;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
    margin-top: 5px;
}
#dash-section .analytics-smart-card.success > span,
#dash-section .analytics-priority-item.success > i { background:#ecfdf5; border-color:#a7f3d0; color:#059669; }
#dash-section .analytics-smart-card.warning > span,
#dash-section .analytics-priority-item.warning > i { background:#fffbeb; border-color:#fde68a; color:#d97706; }
#dash-section .analytics-smart-card.danger > span,
#dash-section .analytics-priority-item.danger > i { background:#fff1f2; border-color:#fecdd3; color:#e11d48; }
#dash-section .analytics-smart-card.violet > span,
#dash-section .analytics-priority-item.violet > i { background:#f5f3ff; border-color:#ddd6fe; color:#7c3aed; }
#dash-section .analytics-composition-card,
#dash-section .analytics-priority-card {
    padding: 16px;
}
#dash-section .analytics-composition-head {
    margin-bottom: 12px;
}
#dash-section .analytics-composition-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 11px;
    font-weight: 900;
}
#dash-section .analytics-composition-list,
#dash-section .analytics-priority-list {
    display: grid;
    gap: 10px;
}
#dash-section .analytics-composition-row {
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    padding: 10px 11px;
    background: #ffffff;
}
#dash-section .analytics-composition-row-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    color: #334155;
}
#dash-section .analytics-composition-row-head strong {
    color: #0f172a;
    white-space: nowrap;
}
#dash-section .analytics-composition-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
#dash-section .analytics-composition-bar i {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}
#dash-section .analytics-composition-row.cash .analytics-composition-bar i { background:#0284c7; }
#dash-section .analytics-composition-row.stock .analytics-composition-bar i { background:#475569; }
#dash-section .analytics-composition-row.receivable .analytics-composition-bar i { background:#0891b2; }
#dash-section .analytics-composition-row.liability .analytics-composition-bar i { background:#e11d48; }
#dash-section .analytics-priority-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #0f172a;
    font-weight: 900;
}
#dash-section .analytics-priority-title i {
    color: #f59e0b;
}
@media (max-width: 1199.98px) {
    #dash-section .analytics-owner-intelligence-panel {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-smart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-smart-grid {
        grid-template-columns: 1fr;
    }
    #dash-section .analytics-health-pill {
        width: 100%;
        text-align: left;
    }
}



/* Payroll history spreadsheet upgrade */
.payroll-history-card { overflow: hidden; border-radius: 22px; width: 100%; max-width: 100%; min-width: 0; }
#payrollPaneHistori { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
#payrollPaneHistori .payroll-history-card, #payrollPaneHistori .payroll-history-sheet-wrap { min-width: 0; }
.payroll-history-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 18px 18px 12px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.payroll-history-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #2563eb; }
.payroll-history-subtitle { color: #64748b; font-size: 12px; line-height: 1.55; max-width: 760px; }
.payroll-history-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.payroll-history-tools .form-select { width: auto; min-width: 160px; min-height: 34px; border-radius: 10px !important; font-size: 12px; }
.payroll-history-statusbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: 11px; font-weight: 800; }
.payroll-history-statusbar span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; border: 1px solid #e2e8f0; background: #ffffff; }
.payroll-history-statusbar .scroll-active { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.payroll-history-scroll-buttons { gap: 6px; background: transparent !important; border: 0 !important; padding: 0 !important; }
.payroll-history-scroll-buttons .btn { min-height: 26px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.payroll-history-top-scroll { display: block; height: 18px; overflow-x: auto; overflow-y: hidden; margin: 10px 18px 0; max-width: calc(100% - 36px); border: 1px solid #bfdbfe; border-radius: 999px; background: #eff6ff; scrollbar-width: thin; scrollbar-color: #60a5fa #eff6ff; }
.payroll-history-top-scroll > div { height: 1px; min-width: 1px; }
.payroll-history-top-scroll::-webkit-scrollbar { height: 10px; }
.payroll-history-top-scroll::-webkit-scrollbar-track { background: #eff6ff; border-radius: 999px; }
.payroll-history-top-scroll::-webkit-scrollbar-thumb { background: #60a5fa; border-radius: 999px; border: 2px solid #eff6ff; }
.payroll-history-sheet-wrap { display: block; border: 1px solid #e2e8f0; border-radius: 16px; max-height: 68vh; width: auto !important; max-width: calc(100% - 36px) !important; margin: 10px 18px 18px; overflow-x: scroll !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-gutter: stable both-edges; padding-bottom: 10px; background: #ffffff; }
.payroll-history-sheet-wrap::-webkit-scrollbar { height: 12px; width: 9px; }
.payroll-history-sheet-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 999px; }
.payroll-history-sheet-wrap::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; border: 2px solid #f1f5f9; }
.payroll-history-sheet { min-width: 1960px !important; width: max-content !important; max-width: none !important; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.payroll-history-sheet thead th { position: sticky; top: 0; z-index: 8; background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color: #334155; white-space: nowrap; }
.payroll-history-sheet tbody td { border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; background: #ffffff; padding: 9px 10px; vertical-align: middle; white-space: nowrap; }
.payroll-history-sheet tbody tr:hover td { background: #f8fbff; }
.payroll-history-sheet tbody tr.payroll-history-dirty td { background: #fffbeb; }
.payroll-history-sheet tbody tr.payroll-history-locked td { background: #f8fafc; color: #94a3b8; }
.payroll-history-sticky { position: sticky; left: 0; z-index: 9; background: inherit; box-shadow: 1px 0 0 #e2e8f0; }
.payroll-history-check-cell { width: 46px; }
.payroll-history-date-cell { min-width: 150px; }
.payroll-history-name { max-width: 240px; min-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payroll-history-note-cell { min-width: 240px; max-width: 300px; }
.payroll-history-note-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.payroll-history-action-cell { min-width: 126px; white-space: nowrap; }
.payroll-history-money { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 96px; font-weight: 800; color: #0f172a; }
.payroll-history-money.is-muted { color: #cbd5e1; font-weight: 700; }
.payroll-history-date-text { font-weight: 700; color: #334155; }
.payroll-history-input, .payroll-history-total { min-height: 38px !important; border-radius: 10px !important; font-size: 12px !important; padding: 7px 10px !important; background: #ffffff; }
.payroll-history-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08); }
.payroll-history-total { background: #f8fafc !important; color: #0f172a; }
.payroll-history-note { resize: vertical; min-height: 74px !important; }
.payroll-history-type { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 900; text-transform: capitalize; border: 1px solid #e2e8f0; background: #fff; color: #475569; white-space: nowrap; }
.payroll-history-type.primary { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.payroll-history-type.info { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.payroll-history-type.warning { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.payroll-history-period { font-weight: 800; color: #475569; }
.payroll-history-ref { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: 11px; color: #475569; }
.payroll-history-edit-modal .modal-content { border: 0; border-radius: 22px; box-shadow: 0 28px 70px rgba(15, 23, 42, .22); overflow: hidden; }
.payroll-history-edit-modal .modal-header { background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%); color: #ffffff; border: 0; padding: 18px 20px; }
.payroll-history-edit-modal .modal-title { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.payroll-history-edit-modal .btn-close { filter: invert(1) grayscale(100%); opacity: .9; }
.payroll-history-edit-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.payroll-history-edit-summary div { border: 1px solid #e2e8f0; border-radius: 14px; padding: 10px 12px; background: #f8fafc; min-width: 0; }
.payroll-history-edit-summary div > span:not(.payroll-history-type) { display: block; font-size: 10px; font-weight: 900; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.payroll-history-edit-summary strong, .payroll-history-edit-summary code { display: block; font-size: 12px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payroll-history-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payroll-history-edit-grid .full { grid-column: 1 / -1; }
.payroll-history-edit-grid label { font-size: 11px; font-weight: 900; color: #475569; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.payroll-history-edit-total-box { border: 1px solid #bfdbfe; border-radius: 16px; background: #eff6ff; padding: 12px; margin-top: 12px; }
.payroll-history-edit-total-box small { display: block; color: #1e40af; font-weight: 800; margin-top: 6px; }
@media (max-width: 768px) { .payroll-history-toolbar { align-items: stretch; } .payroll-history-tools { justify-content: flex-start; } .payroll-history-tools .form-select, .payroll-history-tools .btn { width: 100%; } .payroll-history-edit-summary, .payroll-history-edit-grid { grid-template-columns: 1fr; } }




/* === Laporan Penjualan Snapshot - polished UX v2 === */
#laporan-penjualan-section .sales-report-nav {
    align-items: center;
    flex-wrap: nowrap;
}
#laporan-penjualan-section .sales-report-nav-btn[data-sales-report-tab="snapshot"] i {
    color: inherit;
}
#laporan-penjualan-section .sales-report-snapshot-panel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, .9);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}
#laporan-penjualan-section .sales-report-snapshot-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}
#laporan-penjualan-section .sales-report-snapshot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -.035em;
}
#laporan-penjualan-section .sales-report-snapshot-title i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #dbeafe;
    color: #2563eb !important;
    flex-shrink: 0;
    font-size: 17px;
}
#laporan-penjualan-section .sales-report-snapshot-sub {
    margin-top: 8px;
    max-width: 820px;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.6;
}
#laporan-penjualan-section .sales-report-snapshot-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: min(100%, 420px);
}
#laporan-penjualan-section .sales-report-snapshot-actions .form-control {
    min-width: 160px;
    width: 170px;
    height: 42px;
    min-height: 42px;
    border-radius: 14px !important;
    border-color: #cbd5e1;
    color: #0f172a;
    font-weight: 800;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}
#laporan-penjualan-section .sales-report-snapshot-actions .btn {
    min-height: 42px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
    padding-inline: 14px;
    white-space: nowrap;
}
#laporan-penjualan-section .sales-report-snapshot-body {
    padding: 20px 22px 22px;
}
#laporan-penjualan-section .sales-report-snapshot-notice {
    display: none;
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}
#laporan-penjualan-section .sales-report-snapshot-notice.show { display: block; }
#laporan-penjualan-section .sales-report-snapshot-notice.info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
#laporan-penjualan-section .sales-report-snapshot-notice.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
#laporan-penjualan-section .sales-report-snapshot-notice.danger { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
#laporan-penjualan-section .sales-report-snapshot-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
#laporan-penjualan-section .sales-report-snapshot-kpi {
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
    overflow: hidden;
}
#laporan-penjualan-section .sales-report-snapshot-kpi label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}
#laporan-penjualan-section .sales-report-snapshot-kpi label i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
    font-size: 13px;
}
#laporan-penjualan-section .sales-report-snapshot-kpi strong {
    display: block;
    color: #0f172a;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.045em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#laporan-penjualan-section .sales-report-snapshot-kpi small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
}
#laporan-penjualan-section .sales-report-snapshot-kpi.positive {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 72%);
}
#laporan-penjualan-section .sales-report-snapshot-kpi.positive strong { color: #047857; }
#laporan-penjualan-section .sales-report-snapshot-kpi.positive label i { background: #dcfce7; color: #16a34a; }
#laporan-penjualan-section .sales-report-snapshot-kpi.negative {
    border-color: #fecdd3;
    background: linear-gradient(180deg, #fff1f2 0%, #ffffff 72%);
}
#laporan-penjualan-section .sales-report-snapshot-kpi.negative strong { color: #be123c; }
#laporan-penjualan-section .sales-report-snapshot-kpi.negative label i { background: #ffe4e6; color: #dc2626; }
#laporan-penjualan-section .sales-report-snapshot-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#laporan-penjualan-section .sales-report-snapshot-table {
    min-width: 1320px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
#laporan-penjualan-section .sales-report-snapshot-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 14px;
    background: #f8fafc;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}
#laporan-penjualan-section .sales-report-snapshot-table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 12px;
    vertical-align: middle;
}
#laporan-penjualan-section .sales-report-snapshot-table tbody tr:last-child td { border-bottom: 0; }
#laporan-penjualan-section .sales-report-snapshot-table tbody tr:hover td { background: #f8fbff; }
#laporan-penjualan-section .sales-report-snapshot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    padding: 24px;
    color: #64748b;
    font-size: 13px;
    font-weight: 750;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
#laporan-penjualan-section .sales-report-snapshot-table-wrap::-webkit-scrollbar {
    height: 10px;
}
#laporan-penjualan-section .sales-report-snapshot-table-wrap::-webkit-scrollbar-thumb {
    background: #bfdbfe;
    border-radius: 999px;
}
#laporan-penjualan-section .sales-report-snapshot-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}
@media (max-width: 1199.98px) {
    #laporan-penjualan-section .sales-report-snapshot-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #laporan-penjualan-section .sales-report-snapshot-head { flex-direction: column; }
    #laporan-penjualan-section .sales-report-snapshot-actions { justify-content: flex-start; width: 100%; }
}
@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-snapshot-head,
    #laporan-penjualan-section .sales-report-snapshot-body { padding: 16px; }
    #laporan-penjualan-section .sales-report-snapshot-kpi-grid { grid-template-columns: 1fr; }
    #laporan-penjualan-section .sales-report-snapshot-actions { display: grid; grid-template-columns: 1fr; }
    #laporan-penjualan-section .sales-report-snapshot-actions .form-control { width: 100%; }
}



/* === TBH Dropship Profile Dropdown + Sticky Filter 20260615-sales-store-table-v1 === */
.desktop-account-dropship-group {
    display: none;
}
body.role-dropship .desktop-account-dropship-group {
    display: block;
}
body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
}
body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active i {
    color: #ffffff !important;
}
body.role-dropship .dropship-portal-top-nav {
    display: none !important;
}
body.role-dropship #sidebar {
    display: none !important;
}
body.role-dropship #content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
}
body.role-dropship #list-section .marketplace-toolbar {
    position: sticky;
    top: calc(var(--desktop-app-header-height, 74px) + 0px);
    z-index: 1250;
    padding: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
body.role-dropship #list-section .product-surface-card {
    overflow: visible !important;
}
@media (max-width: 991.98px) {
    body.role-dropship #content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    body.role-dropship .mobile-topbar button[aria-label="Buka menu"] {
        display: none !important;
    }
    body.role-dropship #list-section .marketplace-toolbar {
        top: 64px;
        margin-left: -8px;
        margin-right: -8px;
        padding: 10px;
    }
}
html[data-theme="dark"] body.role-dropship #list-section .marketplace-toolbar,
body[data-theme="dark"].role-dropship #list-section .marketplace-toolbar {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(51, 65, 85, 0.96);
}



/* === TBH Dropship Dropdown Icon Color Fix 20260615-sales-store-table-v1 ===
   Perbaikan warna ikon menu dropship di dropdown profil agar tidak tampak polos. */
body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item {
    position: relative;
    border: 1px solid transparent;
}

body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38), 0 8px 18px rgba(15,23,42,0.07) !important;
}

body.role-dropship #desktopDropshipNavProducts i {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1d4ed8 !important;
}

body.role-dropship #desktopDropshipNavNota i {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    color: #15803d !important;
}

body.role-dropship #desktopDropshipNavStock i {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
    color: #6d28d9 !important;
}

body.role-dropship #desktopDropshipNavReturn i {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
    color: #c2410c !important;
}

body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item:not(.active):hover {
    background: #f8fbff !important;
    border-color: #dbeafe !important;
}

body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    border-color: rgba(37,99,235,0.55) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.20) !important;
}

body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active i {
    background: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 10px 22px rgba(15,23,42,0.14) !important;
}

body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active span {
    color: #ffffff !important;
}

html[data-theme="dark"] body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item:not(.active):hover,
body[data-theme="dark"].role-dropship .desktop-account-menu-btn.desktop-account-dropship-item:not(.active):hover {
    background: rgba(37,99,235,0.12) !important;
    border-color: rgba(96,165,250,0.24) !important;
}

html[data-theme="dark"] body.role-dropship #desktopDropshipNavProducts i,
body[data-theme="dark"].role-dropship #desktopDropshipNavProducts i {
    background: rgba(37,99,235,0.24) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] body.role-dropship #desktopDropshipNavNota i,
body[data-theme="dark"].role-dropship #desktopDropshipNavNota i {
    background: rgba(34,197,94,0.18) !important;
    color: #86efac !important;
}

html[data-theme="dark"] body.role-dropship #desktopDropshipNavStock i,
body[data-theme="dark"].role-dropship #desktopDropshipNavStock i {
    background: rgba(139,92,246,0.20) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] body.role-dropship #desktopDropshipNavReturn i,
body[data-theme="dark"].role-dropship #desktopDropshipNavReturn i {
    background: rgba(249,115,22,0.20) !important;
    color: #fdba74 !important;
}

html[data-theme="dark"] body.role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active i,
body[data-theme="dark"].role-dropship .desktop-account-menu-btn.desktop-account-dropship-item.active i {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.26) !important;
}




/* === Laporan Penjualan: tabel perbandingan toko + expandable row === */
#laporan-penjualan-section #analyticsStoreCardGrid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-width: 0;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    overflow: hidden;
}

#laporan-penjualan-section .sales-store-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: #f8fafc;
}

#laporan-penjualan-section .sales-store-table-toolbar-main,
#laporan-penjualan-section .sales-store-table-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#laporan-penjualan-section .sales-store-table-search {
    position: relative;
    width: min(320px, 72vw);
}

#laporan-penjualan-section .sales-store-table-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 2;
    pointer-events: none;
}

#laporan-penjualan-section .sales-store-table-search .form-control {
    min-height: 38px !important;
    padding-left: 34px;
    border-radius: 10px !important;
    background: #fff;
}

#laporan-penjualan-section #salesStoreTableStatusFilter {
    min-width: 170px;
    min-height: 38px !important;
    border-radius: 10px !important;
    background-color: #fff;
}

#laporan-penjualan-section .sales-store-visible-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}

#laporan-penjualan-section .sales-store-table-toolbar .btn {
    min-height: 34px;
    border-radius: 9px !important;
    font-size: 11px;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-store-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 16px 16px;
    background: #fff;
    scrollbar-width: thin;
}

#laporan-penjualan-section .sales-store-table {
    width: 100%;
    min-width: 1480px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #0f172a;
}

#laporan-penjualan-section .sales-store-table th,
#laporan-penjualan-section .sales-store-table td {
    padding: 12px 13px;
    border-right: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
    white-space: nowrap;
}

#laporan-penjualan-section .sales-store-table th:last-child,
#laporan-penjualan-section .sales-store-table td:last-child {
    border-right: 0;
}

#laporan-penjualan-section .sales-store-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f1f5f9;
    color: #475569;
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .045em;
    text-transform: uppercase;
}

#laporan-penjualan-section .sales-store-table tbody td {
    background: #fff;
    font-size: 12px;
}

#laporan-penjualan-section .sales-store-table-row:hover > td {
    background: #f8fbff;
}

#laporan-penjualan-section .sales-store-table .sales-store-sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 260px;
    max-width: 310px;
    background: #fff;
    box-shadow: 5px 0 12px rgba(15, 23, 42, .035);
}

#laporan-penjualan-section .sales-store-table thead .sales-store-sticky-col {
    z-index: 6;
    background: #f1f5f9;
}

#laporan-penjualan-section .sales-store-table tfoot .sales-store-sticky-col {
    z-index: 5;
    background: #eaf2ff;
}

#laporan-penjualan-section .sales-store-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

#laporan-penjualan-section .sales-store-toggle {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    transition: .16s ease;
}

#laporan-penjualan-section .sales-store-toggle:hover,
#laporan-penjualan-section .sales-store-toggle.expanded {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

#laporan-penjualan-section .sales-store-rank-number {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
}

#laporan-penjualan-section .sales-store-name-wrap {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#laporan-penjualan-section .sales-store-name-wrap strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 12.5px;
    font-weight: 950;
    text-overflow: ellipsis;
}

#laporan-penjualan-section .sales-store-name-wrap small,
#laporan-penjualan-section .sales-store-table tfoot td small {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

#laporan-penjualan-section .sales-store-money-cell {
    color: #334155;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

#laporan-penjualan-section .sales-store-refund-cell {
    color: #be123c;
}

#laporan-penjualan-section .sales-store-profit-cell {
    font-weight: 950;
}

#laporan-penjualan-section .sales-store-profit-cell.positive { color: #047857; }
#laporan-penjualan-section .sales-store-profit-cell.negative { color: #be123c; }

#laporan-penjualan-section .sales-store-margin-badge,
#laporan-penjualan-section .sales-store-health-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}

#laporan-penjualan-section .sales-store-margin-badge.strong,
#laporan-penjualan-section .sales-store-health-badge.strong {
    border-color: #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
}

#laporan-penjualan-section .sales-store-margin-badge.positive,
#laporan-penjualan-section .sales-store-health-badge.positive {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

#laporan-penjualan-section .sales-store-margin-badge.warning,
#laporan-penjualan-section .sales-store-health-badge.warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #a16207;
}

#laporan-penjualan-section .sales-store-margin-badge.negative,
#laporan-penjualan-section .sales-store-health-badge.negative {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

#laporan-penjualan-section .sales-store-detail-row > td {
    padding: 0 !important;
    background: #f8fafc !important;
    white-space: normal;
}

#laporan-penjualan-section .sales-store-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 12px;
    padding: 14px 16px 16px 62px;
    border-left: 3px solid #3b82f6;
    background: linear-gradient(180deg, #f8fafc, #fff);
}

#laporan-penjualan-section .sales-store-detail-group {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

#laporan-penjualan-section .sales-store-detail-group h6 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#laporan-penjualan-section .sales-store-detail-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed #eef2f7;
}

#laporan-penjualan-section .sales-store-detail-line:last-child {
    border-bottom: 0;
}

#laporan-penjualan-section .sales-store-detail-line > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#laporan-penjualan-section .sales-store-detail-line span {
    color: #475569;
    font-size: 10.5px;
    font-weight: 800;
}

#laporan-penjualan-section .sales-store-detail-line small {
    color: #94a3b8;
    font-size: 9.5px;
    line-height: 1.35;
}

#laporan-penjualan-section .sales-store-detail-line strong {
    color: #0f172a;
    font-size: 10.5px;
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
}

#laporan-penjualan-section .sales-store-detail-profit {
    border-color: #bbf7d0;
    background: #fbfffc;
}

#laporan-penjualan-section .sales-store-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 2px solid #bfdbfe;
    border-bottom: 0;
    background: #eaf2ff;
    color: #0f172a;
    font-size: 11.5px;
    font-weight: 950;
}

#laporan-penjualan-section .sales-store-table-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-store-table-toolbar {
        align-items: stretch;
    }
    #laporan-penjualan-section .sales-store-table-toolbar-main,
    #laporan-penjualan-section .sales-store-table-toolbar-actions {
        width: 100%;
    }
    #laporan-penjualan-section .sales-store-table-search {
        flex: 1 1 230px;
        width: auto;
    }
    #laporan-penjualan-section .sales-store-detail-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
        padding-left: 16px;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-store-table-toolbar-main > * {
        width: 100% !important;
    }
    #laporan-penjualan-section .sales-store-table-toolbar-actions .btn {
        flex: 1 1 auto;
    }
    #laporan-penjualan-section .sales-store-detail-grid {
        grid-template-columns: minmax(270px, 1fr);
    }
}



/* =========================================================
   TBH FINAL PATCH V10 - Symmetric Sticky Sub Navigation Block
   Fokus: blok pembungkus sub navigasi dibuat satu garis dengan blok/kartu konten di bawahnya.
   Saat sticky, sisi kiri/kanan tidak melebar sendiri; shadow hanya turun tipis ke bawah.
   ========================================================= */
@media (min-width: 992px) {
    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content {
        box-sizing: border-box !important;
        width: var(--tbh-subnav-match-width, 100%) !important;
        max-width: var(--tbh-subnav-match-width, 100%) !important;
        margin-left: var(--tbh-subnav-match-left, 0px) !important;
        margin-right: 0 !important;
    }

    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck {
        border-radius: 0 !important;
        background: #ffffff !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::before {
        left: 0 !important;
        right: 0 !important;
        top: calc(-1 * var(--desktop-app-header-height, 74px)) !important;
        height: calc(var(--desktop-app-header-height, 74px) + 100%) !important;
        background: #ffffff !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.96) !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
    }

    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::after,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck::after,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck::after,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::after,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::after {
        left: 0 !important;
        right: 0 !important;
        bottom: -1px !important;
        height: 1px !important;
        background: rgba(226, 232, 240, 0.96) !important;
    }

    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content > *,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content > *,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content > *,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content > *,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content > * {
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (max-width: 991.98px) {
    #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content,
    #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content,
    #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-match-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

html[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck,
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck,
html[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck,
body[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck {
    background: #0f172a !important;
}

html[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
html[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
html[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
body[data-theme="dark"] #content .content-section .tbh-sticky-subnav-head.tbh-subnav-match-content.tbh-subnav-is-stuck::before,
body[data-theme="dark"] #history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-match-content.tbh-subnav-is-stuck::before {
    background: #0f172a !important;
    border-bottom-color: rgba(51, 65, 85, 0.92) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20) !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V11 - Uniform Sub Navigation Width
   Fokus: Kas Kecil dan Dropship dibuat stabil; lebar sub navigasi dan konten tab tidak berubah-ubah antar sub menu.
   ========================================================= */
@media (min-width: 992px) {
    #finance-section > .page-shell,
    #dropship-section > .page-shell {
        width: 100% !important;
        max-width: 100% !important;
    }

    #finance-section .toolbar-card.tbh-sticky-subnav,
    #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav {
        --tbh-subnav-match-left: 0px !important;
        --tbh-subnav-match-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    #finance-section .toolbar-card.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
    #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav.tbh-subnav-is-stuck::before {
        left: 0 !important;
        right: 0 !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.055) !important;
    }

    #finance-section .toolbar-card.tbh-sticky-subnav.tbh-subnav-is-stuck::after,
    #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav.tbh-subnav-is-stuck::after {
        left: 0 !important;
        right: 0 !important;
    }
}

#finance-section .finance-pane,
#dropship-section .dropship-pane {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#finance-section .finance-pane.active,
#dropship-section .dropship-pane:not([style*="display: none"]) {
    width: 100% !important;
}

#finance-section .finance-pane > .card,
#finance-section .finance-pane > .finance-pane-card,
#finance-section .finance-pane > .monthly-report-shell,
#finance-section .finance-pane > .snapshot-shell,
#dropship-section .dropship-pane > .card,
#dropship-section .dropship-pane > .dropship-dashboard-shell,
#dropship-section .dropship-pane > .dropship-pdf-center-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#finance-section .finance-nav-tabs,
#dropship-section .tbh-dropship-pane-nav {
    min-width: 0 !important;
}

#finance-section .finance-nav-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}

#dropship-section .tbh-dropship-pane-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}

#dropship-section .tbh-dropship-pane-nav #btnDropshipPaneNota.btn-outline-primary:first-of-type,
#dropship-section .tbh-dropship-pane-nav #btnDropshipPaneNota {
    margin-left: 0 !important;
}

@media (max-width: 991.98px) {
    #finance-section .toolbar-card.tbh-sticky-subnav,
    #dropship-section .tbh-dropship-pane-nav.tbh-sticky-subnav,
    #finance-section .finance-pane,
    #dropship-section .dropship-pane {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V12 - Stok In & Stok Out Layout Uniform
   Fokus: blok sub navigasi, blok form, dan panel konten Stok In/Stok Out
   dibuat satu ukuran dan satu garis agar tampilan lebih profesional.
   ========================================================= */
#in-section,
#out-section {
    --tbh-stock-layout-max: 1480px;
}

@media (min-width: 992px) {
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
    #out-section > .out-pane-switcher.tbh-sticky-subnav,
    #in-section > .row,
    #out-section > #formStokOut {
        width: min(100%, var(--tbh-stock-layout-max)) !important;
        max-width: var(--tbh-stock-layout-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #in-section > .row {
        --bs-gutter-x: 0 !important;
        justify-content: center !important;
    }

    #in-section > .row > .col-xl-10 {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #out-section > #formStokOut > .row.g-3.mb-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 16px !important;
        border: 1px solid rgba(226, 232, 240, 0.96) !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    #in-section .stok-in-modern-shell,
    #out-section .out-pane-shell,
    #out-section .out-manual-table-card,
    #out-section > #formStokOut > .row.g-3.mb-4 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #in-section .stok-in-modern-shell,
    #out-section .out-pane-shell {
        border-radius: 22px !important;
        border: 1px solid rgba(226, 232, 240, 0.96) !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    #in-section .stok-in-pane-header,
    #out-section .out-pane-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 14px !important;
        padding-bottom: 14px !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    }

    #in-section .stok-in-pane-title,
    #out-section .out-pane-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.025em !important;
        color: #0f172a !important;
        margin: 0 !important;
        font-weight: 900 !important;
    }

    #in-section .stok-in-pane-subtitle,
    #out-section .out-pane-subtitle {
        margin-top: 5px !important;
        color: #64748b !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
        max-width: 860px !important;
    }

    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
    #out-section > .out-pane-switcher.tbh-sticky-subnav {
        padding: 7px !important;
        min-height: 58px !important;
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid rgba(226, 232, 240, 0.96) !important;
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck {
        border-radius: 0 !important;
        border-color: transparent !important;
    }

    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::before,
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after,
    #out-section > .out-pane-switcher.tbh-sticky-subnav.tbh-subnav-is-stuck::after {
        left: 0 !important;
        right: 0 !important;
    }

    #in-section .stok-in-pane-btn,
    #out-section .out-pane-btn {
        min-height: 42px !important;
        padding: 10px 15px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: -0.01em !important;
    }
}

@media (max-width: 991.98px) {
    #in-section > .stok-in-pane-switcher.tbh-sticky-subnav,
    #out-section > .out-pane-switcher.tbh-sticky-subnav,
    #in-section > .row,
    #out-section > #formStokOut {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #in-section > .row {
        --bs-gutter-x: 0 !important;
    }
}

html[data-theme="dark"] #in-section .stok-in-modern-shell,
html[data-theme="dark"] #out-section .out-pane-shell,
html[data-theme="dark"] #out-section > #formStokOut > .row.g-3.mb-4,
body[data-theme="dark"] #in-section .stok-in-modern-shell,
body[data-theme="dark"] #out-section .out-pane-shell,
body[data-theme="dark"] #out-section > #formStokOut > .row.g-3.mb-4 {
    background: #0f172a !important;
    border-color: rgba(51, 65, 85, 0.92) !important;
}

/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}




/* =========================================================
   TBH FINAL PATCH V13 - Sticky Subnav No Flicker Guard
   Menahan tinggi halaman sementara sebelum sub-tab berubah agar browser
   tidak snap/berkedip saat konten sub pendek. Konten tetap normal.
   ========================================================= */
html.tbh-no-smooth-scroll-during-subnav-switch {
    scroll-behavior: auto !important;
}

#content > .content-section.tbh-subnav-stability-guard {
    overflow-anchor: none !important;
    contain: layout style;
}

#content > .content-section.tbh-subnav-stability-guard::after {
    content: "";
    display: block;
    height: max(var(--tbh-subnav-stability-space, 0px), var(--tbh-subnav-follow-bottom-space, 0px));
    min-height: 0;
    pointer-events: none;
    opacity: 0;
}

#content .content-section .tbh-sticky-subnav,
#content .content-section .tbh-sticky-subnav-head,
#history-section .history-overview-card.tbh-sticky-history-card {
    transform: translateZ(0);
    will-change: auto;
    backface-visibility: hidden;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck {
    transition: none !important;
}

#content .content-section .tbh-sticky-subnav.tbh-subnav-is-stuck *,
#content .content-section .tbh-sticky-subnav-head.tbh-subnav-is-stuck *,
#history-section .history-overview-card.tbh-sticky-history-card.tbh-subnav-is-stuck * {
    transition-duration: 0.12s !important;
}


        /* Laporan Laba Rugi Simple */
        #laporan-laba-rugi-section .laba-rugi-shell {
            display: grid;
            gap: 18px;
        }
        #laporan-laba-rugi-section .laba-rugi-page-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 4px;
        }
        #laporan-laba-rugi-section .laba-rugi-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #2563eb;
            margin-bottom: 8px;
        }
        #laporan-laba-rugi-section .laba-rugi-filter-card,
        #laporan-laba-rugi-section .laba-rugi-snapshot-card,
        #laporan-laba-rugi-section .laba-rugi-summary-card,
        #laporan-laba-rugi-section .laba-rugi-table-card {
            border: 1px solid rgba(226, 232, 240, .95);
            border-radius: 20px;
            background: #ffffff;
            box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
        }
        #laporan-laba-rugi-section .laba-rugi-filter-card,
        #laporan-laba-rugi-section .laba-rugi-snapshot-card {
            padding: 16px;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-title {
            font-size: 14px;
            font-weight: 900;
            color: #0f172a;
            margin: 0;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-sub {
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
            line-height: 1.55;
            max-width: 780px;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-actions {
            display: flex;
            align-items: end;
            gap: 10px;
            flex-wrap: wrap;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-actions label {
            font-size: 11px;
            font-weight: 800;
            color: #475569;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: .035em;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-notice {
            display: none;
            margin: 10px 0 0;
            padding: 10px 12px;
            border-radius: 14px;
            font-size: 12px;
            font-weight: 700;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-notice.show { display: block; }
        #laporan-laba-rugi-section .laba-rugi-snapshot-notice.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
        #laporan-laba-rugi-section .laba-rugi-snapshot-notice.danger { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
        #laporan-laba-rugi-section .laba-rugi-snapshot-notice.info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
        #laporan-laba-rugi-section .laba-rugi-snapshot-mini-table {
            margin-top: 14px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: hidden;
        }
        #laporan-laba-rugi-section .laba-rugi-snapshot-mini-table .table { margin: 0; }
        #laporan-laba-rugi-section .laba-rugi-snapshot-mini-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        #laporan-laba-rugi-section .laba-rugi-filter-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(150px, 1fr));
            gap: 12px;
            align-items: end;
        }
        #laporan-laba-rugi-section .laba-rugi-filter-grid label {
            font-size: 11px;
            font-weight: 800;
            color: #475569;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: .035em;
        }
        #laporan-laba-rugi-section .laba-rugi-filter-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        #laporan-laba-rugi-section .laba-rugi-hero {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: 22px;
            background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 18px;
            flex-wrap: wrap;
        }
        #laporan-laba-rugi-section .laba-rugi-hero-title {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            opacity: .82;
            margin-bottom: 8px;
        }
        #laporan-laba-rugi-section .laba-rugi-hero-value {
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        #laporan-laba-rugi-section .laba-rugi-hero-sub {
            margin-top: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, .82);
            max-width: 680px;
        }
        #laporan-laba-rugi-section .laba-rugi-status-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 128px;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .13);
            border: 1px solid rgba(255, 255, 255, .2);
            font-size: 13px;
            font-weight: 900;
        }
        #laporan-laba-rugi-section .laba-rugi-status-badge.profit { color: #bbf7d0; }
        #laporan-laba-rugi-section .laba-rugi-status-badge.loss { color: #fecdd3; }
        #laporan-laba-rugi-section .laba-rugi-status-badge.neutral { color: #dbeafe; }
        #laporan-laba-rugi-section .laba-rugi-kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
        }
        #laporan-laba-rugi-section .laba-rugi-kpi {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #ffffff;
            padding: 16px;
            min-height: 126px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #laporan-laba-rugi-section .laba-rugi-kpi-label {
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #64748b;
        }
        #laporan-laba-rugi-section .laba-rugi-kpi-value {
            font-size: 18px;
            font-weight: 900;
            color: #0f172a;
            margin-top: 10px;
            word-break: break-word;
        }
        #laporan-laba-rugi-section .laba-rugi-kpi-sub {
            font-size: 11px;
            color: #64748b;
            margin-top: 6px;
            line-height: 1.5;
        }
        #laporan-laba-rugi-section .laba-rugi-kpi.success { border-color: #bbf7d0; background: #f0fdf4; }
        #laporan-laba-rugi-section .laba-rugi-kpi.danger { border-color: #fecdd3; background: #fff1f2; }
        #laporan-laba-rugi-section .laba-rugi-kpi.primary { border-color: #bfdbfe; background: #eff6ff; }
        #laporan-laba-rugi-section .laba-rugi-kpi.neutral { border-color: #e2e8f0; background: #f8fafc; }
        #laporan-laba-rugi-section .laba-rugi-kpi.success .laba-rugi-kpi-value { color: #047857; }
        #laporan-laba-rugi-section .laba-rugi-kpi.danger .laba-rugi-kpi-value { color: #be123c; }
        #laporan-laba-rugi-section .laba-rugi-kpi.primary .laba-rugi-kpi-value { color: #1d4ed8; }
        #laporan-laba-rugi-section .laba-rugi-detail-shell {
            border: 1px solid rgba(226, 232, 240, .95);
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
            overflow: hidden;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 18px 12px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border-bottom: 1px solid #e2e8f0;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-title {
            margin: 0;
            font-size: 15px;
            font-weight: 900;
            color: #0f172a;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-sub {
            margin-top: 5px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
        }
        #laporan-laba-rugi-section .laba-rugi-subnav {
            display: flex;
            gap: 8px;
            align-items: center;
            overflow-x: auto;
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            scrollbar-width: thin;
        }
        #laporan-laba-rugi-section .laba-rugi-subnav-btn {
            border: 1px solid #e2e8f0;
            background: #ffffff;
            color: #475569;
            border-radius: 999px;
            padding: 9px 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-size: 12px;
            font-weight: 850;
            white-space: nowrap;
            transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        #laporan-laba-rugi-section .laba-rugi-subnav-btn:hover {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }
        #laporan-laba-rugi-section .laba-rugi-subnav-btn.active {
            background: linear-gradient(135deg, #0f172a, #2563eb);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
            transform: translateY(-1px);
        }
        #laporan-laba-rugi-section .laba-rugi-subnav-btn small {
            min-width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 0 7px;
            background: #f1f5f9;
            color: #475569;
            font-size: 10px;
            font-weight: 900;
        }
        #laporan-laba-rugi-section .laba-rugi-subnav-btn.active small {
            background: rgba(255, 255, 255, .16);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, .22);
        }
        #laporan-laba-rugi-section .laba-rugi-detail-pane {
            display: none;
            padding: 16px;
            animation: fadeIn .22s ease;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-pane.active {
            display: grid;
            gap: 14px;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-pane[hidden] {
            display: none !important;
        }
        #laporan-laba-rugi-section .laba-rugi-detail-pane .laba-rugi-snapshot-card,
        #laporan-laba-rugi-section .laba-rugi-detail-pane .laba-rugi-table-card {
            box-shadow: none;
        }
        #laporan-laba-rugi-section .laba-rugi-table-card {
            overflow: hidden;
        }
        #laporan-laba-rugi-section .laba-rugi-table-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 18px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }
        #laporan-laba-rugi-section .laba-rugi-table-title {
            font-size: 14px;
            font-weight: 900;
            color: #0f172a;
            margin: 0;
        }
        #laporan-laba-rugi-section .laba-rugi-table-sub {
            margin-top: 4px;
            color: #64748b;
            font-size: 12px;
        }
        #laporan-laba-rugi-section .laba-rugi-table-card .table {
            margin: 0;
        }
        #laporan-laba-rugi-section .laba-rugi-table-card thead th {
            background: #ffffff;
            color: #475569;
            border-bottom: 1px solid #e2e8f0;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        #laporan-laba-rugi-section .laba-rugi-table-card tbody td {
            border-bottom: 1px solid #eef2f7;
        }
        #laporan-laba-rugi-section .laba-rugi-excluded-table {
            min-width: 1780px;
        }
        #laporan-laba-rugi-section .laba-rugi-excluded-table th,
        #laporan-laba-rugi-section .laba-rugi-excluded-table td {
            white-space: nowrap;
            vertical-align: top;
        }
        #laporan-laba-rugi-section .laba-rugi-excluded-table .laba-rugi-ai-reason {
            min-width: 320px;
            max-width: 420px;
            white-space: normal;
            line-height: 1.45;
        }
        #laporan-laba-rugi-section .laba-rugi-empty {
            text-align: center;
            color: #64748b;
            padding: 22px !important;
            font-size: 13px;
        }
        #laporan-laba-rugi-section .laba-rugi-audit-note {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 12px 14px;
            border-radius: 16px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            color: #1e3a8a;
            font-size: 12px;
            line-height: 1.6;
        }
        @media (max-width: 1200px) {
            #laporan-laba-rugi-section .laba-rugi-filter-grid,
            #laporan-laba-rugi-section .laba-rugi-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 768px) {
            #laporan-laba-rugi-section .laba-rugi-filter-grid,
            #laporan-laba-rugi-section .laba-rugi-kpi-grid { grid-template-columns: 1fr; }
            #laporan-laba-rugi-section .laba-rugi-hero { padding: 18px; }
            #laporan-laba-rugi-section .laba-rugi-detail-head { padding: 14px; }
            #laporan-laba-rugi-section .laba-rugi-subnav { padding: 10px 12px; }
            #laporan-laba-rugi-section .laba-rugi-subnav-btn { padding: 8px 10px; font-size: 11px; }
            #laporan-laba-rugi-section .laba-rugi-detail-pane { padding: 12px; }
        }



/* TBH Pro: navigasi profesional Laporan Laba Rugi */
#laporan-laba-rugi-section .laba-rugi-pro-shell { gap: 16px; }
#laporan-laba-rugi-section .laba-rugi-pro-head {
    padding: 18px 20px;
    border: 1px solid rgba(191, 219, 254, .9);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 30%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .055);
}
#laporan-laba-rugi-section .laba-rugi-pro-filter { position: sticky; top: 12px; z-index: 8; }
#laporan-laba-rugi-section .laba-rugi-pro-nav-shell { border-radius: 24px; }
#laporan-laba-rugi-section .laba-rugi-pro-subnav {
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}
#laporan-laba-rugi-section .laba-rugi-pro-subnav .laba-rugi-subnav-btn {
    border-radius: 14px;
    padding: 10px 14px;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(260px, .85fr);
    gap: 14px;
    align-items: stretch;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-main { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-pro-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#laporan-laba-rugi-section .laba-rugi-decision-card,
#laporan-laba-rugi-section .laba-rugi-efficiency-card {
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-decision-card { padding: 18px; }
#laporan-laba-rugi-section .laba-rugi-decision-kicker {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#laporan-laba-rugi-section .laba-rugi-decision-card h5 { margin: 12px 0 8px; font-size: 18px; font-weight: 950; color: #0f172a; }
#laporan-laba-rugi-section .laba-rugi-decision-card p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.65; }
#laporan-laba-rugi-section .laba-rugi-flow-list { display: grid; gap: 10px; margin-top: 16px; }
#laporan-laba-rugi-section .laba-rugi-flow-list div {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 2px 10px;
    padding: 11px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-flow-list span {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #0f172a;
    color: #fff;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-flow-list strong { font-size: 12px; color: #0f172a; }
#laporan-laba-rugi-section .laba-rugi-flow-list small { font-size: 11px; color: #64748b; }
#laporan-laba-rugi-section .laba-rugi-snapshot-pro-card { background: radial-gradient(circle at top right, rgba(14,165,233,.12), transparent 35%), #ffffff; }
#laporan-laba-rugi-section .laba-rugi-snapshot-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
#laporan-laba-rugi-section .laba-rugi-snapshot-steps div {
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #f8fbff;
    display: grid;
    gap: 5px;
}
#laporan-laba-rugi-section .laba-rugi-snapshot-steps i { color: #2563eb; font-size: 18px; }
#laporan-laba-rugi-section .laba-rugi-snapshot-steps strong { color: #0f172a; font-size: 12px; font-weight: 900; }
#laporan-laba-rugi-section .laba-rugi-snapshot-steps span { color: #64748b; font-size: 11px; line-height: 1.5; }
#laporan-laba-rugi-section .laba-rugi-history-card .laba-rugi-snapshot-mini-table { margin-top: 0; border-radius: 0 0 18px 18px; border-left: 0; border-right: 0; border-bottom: 0; }
#laporan-laba-rugi-section .laba-rugi-efficiency-insight {
    margin: 14px 16px 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.55;
}
#laporan-laba-rugi-section .laba-rugi-efficiency-insight.good { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
#laporan-laba-rugi-section .laba-rugi-efficiency-insight.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
#laporan-laba-rugi-section .laba-rugi-efficiency-insight.danger { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
#laporan-laba-rugi-section .laba-rugi-efficiency-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 0;
}
#laporan-laba-rugi-section .laba-rugi-efficiency-mini {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px;
}
#laporan-laba-rugi-section .laba-rugi-efficiency-mini label { display:block; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
#laporan-laba-rugi-section .laba-rugi-efficiency-mini strong { display:block; margin-top:7px; font-size:18px; font-weight:950; color:#0f172a; word-break:break-word; }
#laporan-laba-rugi-section .laba-rugi-efficiency-mini small { display:block; margin-top:5px; font-size:11px; color:#64748b; line-height:1.45; }
#laporan-laba-rugi-section .laba-rugi-audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#laporan-laba-rugi-section .laba-rugi-audit-wide { grid-column: 1 / -1; }
@media (max-width: 1199.98px) {
    #laporan-laba-rugi-section .laba-rugi-dashboard-grid,
    #laporan-laba-rugi-section .laba-rugi-audit-grid { grid-template-columns: 1fr; }
    #laporan-laba-rugi-section .laba-rugi-pro-kpi-grid,
    #laporan-laba-rugi-section .laba-rugi-efficiency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-pro-filter { position: static; }
    #laporan-laba-rugi-section .laba-rugi-pro-kpi-grid,
    #laporan-laba-rugi-section .laba-rugi-efficiency-grid,
    #laporan-laba-rugi-section .laba-rugi-snapshot-steps { grid-template-columns: 1fr; }
}

/* TBH Pro v2: Dashboard Laba Rugi menjadi pusat, sub analisis dibuat kecil */
#laporan-laba-rugi-section .laba-rugi-dashboard-stage {
    border: 1px solid rgba(191, 219, 254, .95);
    border-radius: 28px;
    padding: 18px;
    background: radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
}
#laporan-laba-rugi-section .laba-rugi-dashboard-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #bfdbfe;
}
#laporan-laba-rugi-section .laba-rugi-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-title-row h4 {
    margin: 12px 0 5px;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.03em;
    color: #0f172a;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-title-row p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
    max-width: 760px;
}
#laporan-laba-rugi-section .laba-rugi-stage-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-primary {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-dashboard-primary .laba-rugi-dashboard-grid {
    margin: 0;
}
#laporan-laba-rugi-section .laba-rugi-support-shell {
    margin-top: 16px;
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}
#laporan-laba-rugi-section .laba-rugi-support-head {
    padding: 13px 16px 10px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-support-head .laba-rugi-detail-title {
    font-size: 13px;
}
#laporan-laba-rugi-section .laba-rugi-support-head .laba-rugi-detail-sub {
    font-size: 11px;
}
#laporan-laba-rugi-section .laba-rugi-support-subnav {
    gap: 7px;
    padding: 9px 12px;
    background: #f8fafc;
}
#laporan-laba-rugi-section .laba-rugi-support-subnav .laba-rugi-subnav-btn {
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    min-height: 34px;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-support-subnav .laba-rugi-subnav-btn.active {
    background: #0f172a;
    color: #ffffff;
    transform: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}
#laporan-laba-rugi-section .laba-rugi-support-subnav .laba-rugi-subnav-btn small {
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    font-size: 9px;
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-dashboard-stage { padding: 14px; border-radius: 22px; }
    #laporan-laba-rugi-section .laba-rugi-dashboard-title-row h4 { font-size: 18px; }
    #laporan-laba-rugi-section .laba-rugi-stage-actions { width: 100%; }
    #laporan-laba-rugi-section .laba-rugi-stage-actions .btn { flex: 1 1 160px; }
}


/* TBH Pro v3: Owner Dashboard Laba Rugi - satu alur baca, tanpa sub navigasi bertingkat */
#laporan-laba-rugi-section .laba-rugi-formula-strip {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #334155;
}
#laporan-laba-rugi-section .laba-rugi-formula-strip span {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#laporan-laba-rugi-section .laba-rugi-formula-strip strong {
    font-size: 12px;
    line-height: 1.55;
    color: #0f172a;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack {
    border-radius: 26px;
    background: #ffffff;
    overflow: visible;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-detail-head {
    border-radius: 26px 26px 0 0;
}
#laporan-laba-rugi-section .laba-rugi-stack-grid {
    display: grid;
    gap: 16px;
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-detail-pane,
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-detail-pane.active,
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-detail-pane[hidden] {
    display: block !important;
    padding: 0 !important;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
#laporan-laba-rugi-section .laba-rugi-stack-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-stack-heading h5 {
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -.02em;
}
#laporan-laba-rugi-section .laba-rugi-stack-heading p {
    margin: 0;
    max-width: 820px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#laporan-laba-rugi-section .laba-rugi-stack-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#laporan-laba-rugi-section .laba-rugi-stack-count,
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-mini-count {
    margin-left: 6px;
    height: 22px;
    min-width: 24px;
    font-size: 10px;
    vertical-align: middle;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-snapshot-card,
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-table-card,
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-efficiency-card {
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-audit-note {
    margin-bottom: 14px;
}
#laporan-laba-rugi-section .laba-rugi-owner-stack .laba-rugi-history-card .laba-rugi-snapshot-mini-table {
    border-radius: 0 0 18px 18px;
}
#laporan-laba-rugi-section .laba-rugi-stage-actions,
#laporan-laba-rugi-section .laba-rugi-subnav {
    display: none !important;
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-stack-grid { padding: 12px; }
    #laporan-laba-rugi-section .laba-rugi-stack-section { padding: 12px; border-radius: 18px; }
    #laporan-laba-rugi-section .laba-rugi-formula-strip { align-items: flex-start; }
}


/* TBH Pro v4: Laporan Laba Rugi ringkas dengan sub navigasi + filter inline */
#laporan-laba-rugi-section .laba-rugi-clean-head {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
#laporan-laba-rugi-section .laba-rugi-clean-head .section-note { margin-top: 6px; }
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell {
    border-radius: 24px;
    overflow: hidden;
}
#laporan-laba-rugi-section .laba-rugi-inline-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #ffffff;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 220px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane.active {
    display: grid;
    gap: 16px;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="dashboard"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="detail"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="snapshot"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="histori"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="efisiensi"].active,
#laporan-laba-rugi-section .laba-rugi-detail-pane[data-pnl-detail-pane="audit"].active {
    display: block;
}
#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px;
}
#laporan-laba-rugi-section .laba-rugi-audit-single { box-shadow: none; }
#laporan-laba-rugi-section .laba-rugi-mini-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
}
#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell .laba-rugi-stack-count {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
}
@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
}
@media (max-width: 767.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-toolbar {
        padding: 12px;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset {
        min-width: 180px;
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
        width: 100%;
    }
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        flex: 1 1 120px;
    }
}



/* Dashboard Analitik Owner KPI Grid v2 - simple, clean, tanpa list warna pinggir */
#dash-section #analyticsWarRoom,
#dash-section #analyticsOverviewPane {
    display: none !important;
}
#dash-section .analytics-owner-kpi-panel {
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}
#dash-section .analytics-owner-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}
#dash-section .analytics-owner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 6px;
}
#dash-section .analytics-owner-panel-head h4 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.03em;
}
#dash-section .analytics-owner-panel-head p {
    margin: 6px 0 0;
    max-width: 780px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}
#dash-section .analytics-owner-period-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
#dash-section .analytics-owner-hero-grid,
#dash-section .analytics-owner-metric-grid {
    display: grid;
    gap: 12px;
}
#dash-section .analytics-owner-hero-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 12px;
}
#dash-section .analytics-owner-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#dash-section .analytics-owner-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
}
#dash-section .analytics-owner-card-featured {
    background: #f8fafc;
    border-color: #cbd5e1;
}
#dash-section .analytics-owner-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
#dash-section .analytics-owner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-size: 17px;
}
#dash-section .analytics-owner-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
}
#dash-section .analytics-owner-value {
    margin-top: 8px;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.15;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    word-break: break-word;
}
#dash-section .analytics-owner-card-featured .analytics-owner-value {
    font-size: clamp(24px, 3vw, 36px);
}
#dash-section .analytics-owner-sub {
    margin-top: 9px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
}
@media (max-width: 1399.98px) {
    #dash-section .analytics-owner-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    #dash-section .analytics-owner-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    #dash-section .analytics-owner-hero-grid,
    #dash-section .analytics-owner-metric-grid { grid-template-columns: 1fr; }
    #dash-section .analytics-owner-kpi-panel { padding: 14px; border-radius: 18px; }
}


/* TBH Dashboard Analitik v3: mengikuti filter global, tanpa blok filter lokal */
#dash-section .analytics-filter-card,
#dash-section .analytics-filter-card-minimal,
#dash-section .analytics-filter-level2,
#dash-section .analytics-level2-filter-bar,
#dash-section .analytics-toolbar-meta {
    display: none !important;
}
#dash-section.analytics-executive-dashboard {
    gap: 0;
}
#dash-section .analytics-executive-page-head {
    margin-bottom: 14px;
}
#dash-section .analytics-owner-kpi-panel {
    margin-top: 0 !important;
}
#dash-section .analytics-owner-period-chip::before {
    content: 'Filter global: ';
    font-weight: 800;
    color: #64748b;
}



/* TBH Sales Report KPI Dashboard Style v1
   Laporan Penjualan dibuat seperti Dashboard Analitik: kartu KPI berdiri sendiri,
   grid rapi, background bersih, angka tetap berwarna. */
#laporan-penjualan-section .sales-report-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-penjualan-section .sales-report-page-head {
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-product-hero,
#laporan-penjualan-section .sales-report-hero.card,
#laporan-penjualan-section .sales-report-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#laporan-penjualan-section .sales-report-product-hero > div:first-child,
#laporan-penjualan-section .sales-report-hero-main {
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    padding: 18px !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card,
#laporan-penjualan-section .sales-report-hero-metric {
    min-height: 142px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative,
#laporan-penjualan-section .sales-report-hero-metric.negative {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
    background-image: none !important;
}

#laporan-penjualan-section .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric-value {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-profit-card.negative .sales-report-product-profit-value,
#laporan-penjualan-section .sales-report-hero-metric.negative .sales-report-hero-metric-value {
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-product-summary-strip,
#laporan-penjualan-section .sales-report-all-summary-strip,
#laporan-penjualan-section .sales-report-all-cost-strip {
    display: grid !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-main,
#laporan-penjualan-section .sales-report-all-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-kpi-grid-cost,
#laporan-penjualan-section .sales-report-all-cost-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#laporan-penjualan-section .sales-report-product-summary-item {
    position: relative !important;
    min-height: 138px !important;
    padding: 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#laporan-penjualan-section .sales-report-product-summary-item:last-child {
    border-right: 1px solid #e2e8f0 !important;
}

#laporan-penjualan-section .sales-report-product-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

#laporan-penjualan-section .sales-report-product-summary-label i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}

#laporan-penjualan-section .sales-report-product-summary-value {
    margin-top: 12px !important;
    font-size: clamp(18px, 1.85vw, 25px) !important;
    line-height: 1.12 !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    word-break: break-word !important;
}

#laporan-penjualan-section .sales-report-product-summary-note {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandStoreCount,
#laporan-penjualan-section #analyticsStoreGrandOmset,
#laporan-penjualan-section #analyticsStoreGrandQty {
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandProfitPercent {
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandAds,
#laporan-penjualan-section #analyticsStoreGrandPacking {
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-value,
#laporan-penjualan-section #analyticsStoreGrandReturn,
#laporan-penjualan-section #analyticsStoreGrandMarketingSample,
#laporan-penjualan-section #analyticsStoreGrandSalary {
    color: #be123c !important;
}

#laporan-penjualan-section #analyticsStoreGrandHpp,
#laporan-penjualan-section #analyticsStoreGrandAdminFee {
    color: #7c3aed !important;
}

#laporan-penjualan-section #analyticsStoreGrandServiceFee {
    color: #4f46e5 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.primary .sales-report-product-summary-label i {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.success .sales-report-product-summary-label i {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #047857 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.warning .sales-report-product-summary-label i {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
}

#laporan-penjualan-section .sales-report-product-summary-item.danger .sales-report-product-summary-label i {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

#laporan-penjualan-section .sales-report-combined-store-section {
    margin-top: 2px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
}

@media (max-width: 1399.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-penjualan-section .sales-report-product-hero,
    #laporan-penjualan-section .sales-report-hero.card,
    #laporan-penjualan-section .sales-report-hero {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-penjualan-section .sales-report-kpi-grid-main,
    #laporan-penjualan-section .sales-report-all-summary-strip,
    #laporan-penjualan-section .sales-report-kpi-grid-cost,
    #laporan-penjualan-section .sales-report-all-cost-strip {
        grid-template-columns: 1fr !important;
    }
    #laporan-penjualan-section .sales-report-product-summary-item {
        min-height: 122px !important;
    }
}



/* TBH FINAL: Laporan Laba Rugi selaras dengan Dashboard Analitik & Laporan Penjualan KPI */
#laporan-laba-rugi-section .laba-rugi-shell,
#laporan-laba-rugi-section .laba-rugi-pro-shell {
    display: grid !important;
    gap: 16px !important;
}

#laporan-laba-rugi-section .laba-rugi-clean-head,
#laporan-laba-rugi-section .laba-rugi-page-head.laba-rugi-clean-head {
    padding: 0 !important;
    margin: 0 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#laporan-laba-rugi-section .laba-rugi-clean-head .page-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -.025em !important;
}

#laporan-laba-rugi-section .laba-rugi-clean-head .section-note {
    margin-top: 6px !important;
    max-width: 780px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

#laporan-laba-rugi-section .laba-rugi-owner-tabs-shell,
#laporan-laba-rugi-section .laba-rugi-detail-shell.laba-rugi-owner-tabs-shell {
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
    overflow: hidden !important;
}

#laporan-laba-rugi-section .laba-rugi-inline-toolbar,
#laporan-laba-rugi-section .laba-rugi-subnav.laba-rugi-inline-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f7 !important;
}

#laporan-laba-rugi-section .laba-rugi-subnav-btn {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transform: none !important;
}

#laporan-laba-rugi-section .laba-rugi-subnav-btn:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

#laporan-laba-rugi-section .laba-rugi-subnav-btn.active {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
}

#laporan-laba-rugi-section .laba-rugi-subnav-btn small,
#laporan-laba-rugi-section .laba-rugi-subnav-btn.active small {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

#laporan-laba-rugi-section .laba-rugi-subnav-btn.active small {
    background: rgba(255,255,255,.16) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.26) !important;
}

#laporan-laba-rugi-section .laba-rugi-inline-filter {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding-left: 12px !important;
    border-left: 1px solid #eef2f7 !important;
}

#laporan-laba-rugi-section .laba-rugi-inline-filter-label {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

#laporan-laba-rugi-section .laba-rugi-inline-filter-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#laporan-laba-rugi-section #pnlPeriodPreset {
    min-width: 205px !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

#laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
    min-height: 36px !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

#laporan-laba-rugi-section .laba-rugi-detail-pane {
    padding: 16px !important;
    background: #ffffff !important;
}

#laporan-laba-rugi-section .laba-rugi-dashboard-stage {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-laba-rugi-section .laba-rugi-dashboard-title-row {
    display: none !important;
}

#laporan-laba-rugi-section .laba-rugi-dashboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
}

#laporan-laba-rugi-section .laba-rugi-decision-card {
    display: none !important;
}

#laporan-laba-rugi-section .laba-rugi-summary-card,
#laporan-laba-rugi-section .laba-rugi-dashboard-main {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#laporan-laba-rugi-section .laba-rugi-hero {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #ecfdf5 100%) !important;
    color: #0f172a !important;
    padding: 20px !important;
    min-height: 148px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045) !important;
}

#laporan-laba-rugi-section .laba-rugi-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #047857, #34d399) !important;
}

#laporan-laba-rugi-section .laba-rugi-hero-title {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    opacity: 1 !important;
    margin: 0 0 8px !important;
}

#laporan-laba-rugi-section .laba-rugi-hero-value {
    font-size: clamp(30px, 3.3vw, 44px) !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
    color: #047857 !important;
    word-break: break-word !important;
}

#laporan-laba-rugi-section .laba-rugi-hero-sub {
    margin-top: 10px !important;
    max-width: 820px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    font-weight: 650 !important;
}

#laporan-laba-rugi-section .laba-rugi-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 112px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

#laporan-laba-rugi-section .laba-rugi-status-badge.profit {
    border-color: #bbf7d0 !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
}

#laporan-laba-rugi-section .laba-rugi-status-badge.loss {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
}

#laporan-laba-rugi-section .laba-rugi-status-badge.neutral {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi-grid,
#laporan-laba-rugi-section .laba-rugi-pro-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    padding: 16px !important;
    min-height: 148px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: none !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 4px !important;
    background: #cbd5e1 !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi.primary::before { background: linear-gradient(90deg, #2563eb, #60a5fa) !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.success::before { background: linear-gradient(90deg, #047857, #34d399) !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.danger::before { background: linear-gradient(90deg, #e11d48, #fb7185) !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.neutral::before { background: linear-gradient(90deg, #475569, #94a3b8) !important; }

#laporan-laba-rugi-section .laba-rugi-kpi-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi-value {
    margin-top: 6px !important;
    font-size: clamp(18px, 2vw, 26px) !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    color: #0f172a !important;
    word-break: break-word !important;
}

#laporan-laba-rugi-section .laba-rugi-kpi.primary .laba-rugi-kpi-value { color: #2563eb !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.success .laba-rugi-kpi-value { color: #047857 !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.danger .laba-rugi-kpi-value { color: #be123c !important; }
#laporan-laba-rugi-section .laba-rugi-kpi.neutral .laba-rugi-kpi-value { color: #475569 !important; }

#laporan-laba-rugi-section .laba-rugi-kpi-sub {
    margin-top: 10px !important;
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

#laporan-laba-rugi-section .laba-rugi-formula-strip {
    margin-top: 12px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

#laporan-laba-rugi-section .laba-rugi-formula-strip span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

#laporan-laba-rugi-section .laba-rugi-formula-strip strong {
    color: #0f172a !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-section,
#laporan-laba-rugi-section .laba-rugi-table-card,
#laporan-laba-rugi-section .laba-rugi-snapshot-card,
#laporan-laba-rugi-section .laba-rugi-efficiency-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-section {
    padding: 16px !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-heading {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-eyebrow {
    background: #f8fafc !important;
    color: #2563eb !important;
    border-color: #e2e8f0 !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-heading h5,
#laporan-laba-rugi-section .laba-rugi-table-title,
#laporan-laba-rugi-section .laba-rugi-snapshot-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}

#laporan-laba-rugi-section .laba-rugi-stack-heading p,
#laporan-laba-rugi-section .laba-rugi-table-sub,
#laporan-laba-rugi-section .laba-rugi-snapshot-sub {
    color: #64748b !important;
}

#laporan-laba-rugi-section .laba-rugi-table-head,
#laporan-laba-rugi-section .laba-rugi-snapshot-head {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#laporan-laba-rugi-section .laba-rugi-snapshot-head {
    padding: 16px !important;
    margin: -16px -16px 14px !important;
    border-radius: 18px 18px 0 0 !important;
}

@media (max-width: 1199.98px) {
    #laporan-laba-rugi-section .laba-rugi-kpi-grid,
    #laporan-laba-rugi-section .laba-rugi-pro-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #laporan-laba-rugi-section .laba-rugi-inline-filter {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-top: 10px !important;
        border-left: 0 !important;
        border-top: 1px solid #eef2f7 !important;
    }
}

@media (max-width: 575.98px) {
    #laporan-laba-rugi-section .laba-rugi-kpi-grid,
    #laporan-laba-rugi-section .laba-rugi-pro-kpi-grid {
        grid-template-columns: 1fr !important;
    }
    #laporan-laba-rugi-section .laba-rugi-hero {
        flex-direction: column !important;
    }
    #laporan-laba-rugi-section #pnlPeriodPreset,
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls,
    #laporan-laba-rugi-section .laba-rugi-inline-filter-controls .btn {
        width: 100% !important;
    }
}


/* TBH Pro: Top Bar Dark Professional */
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #0f172a 0%, #111827 48%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 14px 34px rgba(2, 8, 23, 0.30) !important;
    }

    .desktop-brand-block,
    .desktop-header-context,
    .desktop-app-header .desktop-brand-name,
    .desktop-app-header .desktop-header-context strong {
        color: #f8fafc !important;
    }

    .desktop-brand-meta,
    .desktop-header-context-label {
        color: #94a3b8 !important;
    }

    .desktop-brand-logo {
        background: rgba(37, 99, 235, 0.16) !important;
        border-color: rgba(96, 165, 250, 0.28) !important;
        color: #dbeafe !important;
        box-shadow: none !important;
    }

    .desktop-brand-logo-fallback,
    .desktop-brand-logo i {
        color: #dbeafe !important;
    }

    .desktop-header-divider {
        background: rgba(148, 163, 184, 0.22) !important;
    }

    .desktop-header-search {
        background: rgba(15, 23, 42, 0.64) !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-search:focus-within {
        border-color: rgba(96, 165, 250, 0.56) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
    }

    .desktop-header-search i {
        color: #bfdbfe !important;
    }

    .desktop-header-search input {
        color: #ffffff !important;
    }

    .desktop-header-search input::placeholder {
        color: #94a3b8 !important;
    }

    .desktop-header-search-kbd {
        background: rgba(30, 41, 59, 0.86) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
    }

    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar {
        background: rgba(15, 23, 42, 0.64) !important;
        border: 1px solid rgba(148, 163, 184, 0.28) !important;
        border-radius: 14px !important;
        padding: 4px !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        background: transparent !important;
        border: 0 !important;
        color: #f8fafc !important;
        min-height: 34px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #f8fafc !important;
    }

    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(30, 41, 59, 0.92) !important;
        border: 1px solid rgba(148, 163, 184, 0.25) !important;
        color: #cbd5e1 !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 11px !important;
    }

    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(37, 99, 235, 0.22) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #dbeafe !important;
    }

    .desktop-header-btn,
    .desktop-user-pill,
    #desktopNotifAnchor .notif-topbar-btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border: 1px solid rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .desktop-header-btn:hover,
    .desktop-user-pill:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.45) !important;
        color: #ffffff !important;
    }

    .desktop-header-btn i,
    .desktop-user-pill i,
    #desktopNotifAnchor .notif-topbar-btn i {
        color: #dbeafe !important;
    }

    .desktop-user-pill i,
    .desktop-user-pill-caret {
        background: rgba(37, 99, 235, 0.18) !important;
        color: #dbeafe !important;
    }

    .desktop-user-pill-text small {
        color: #94a3b8 !important;
    }

    .desktop-user-pill-text span,
    #desktopUserPillName {
        color: #f8fafc !important;
    }

    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
    }

    .desktop-account-menu {
        border-color: rgba(148, 163, 184, 0.22) !important;
    }
}

@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #0f172a 0%, #111827 55%, #172033 100%) !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        box-shadow: 0 12px 26px rgba(2, 8, 23, 0.24) !important;
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #f8fafc !important;
    }

    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .text-muted,
    .mobile-topbar .small {
        color: #94a3b8 !important;
    }

    .mobile-topbar .btn {
        background: rgba(15, 23, 42, 0.66) !important;
        border-color: rgba(148, 163, 184, 0.30) !important;
        color: #f8fafc !important;
        box-shadow: none !important;
    }

    .mobile-topbar .btn i {
        color: #dbeafe !important;
    }

    .mobile-topbar .notif-topbar-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        background: rgba(15, 23, 42, 0.66) !important;
    }

    .mobile-topbar .notif-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
    }
}



/* TBH Pro: Top Bar Dark No Border - area gelap hanya pada bar, tanpa garis bawah */
@media (min-width: 992px) {
    .desktop-app-header {
        border-bottom: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
@media (max-width: 991.98px) {
    .mobile-topbar {
        border-bottom: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}


/* =========================================================
   TBH Return Marketplace Tracking - spreadsheet ringan
   ========================================================= */
.return-tracking-section .return-tracking-shell {
    display: grid;
    gap: 18px;
}
.return-tracking-hero-card {
    border: 1px solid rgba(251, 191, 36, 0.34);
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf5 48%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
    padding: 20px;
}
.return-tracking-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.return-tracking-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.return-tracking-title {
    margin: 12px 0 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #0f172a;
}
.return-tracking-subtitle {
    margin: 0;
    max-width: 820px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
    font-weight: 600;
}
.return-tracking-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
    min-width: min(100%, 520px);
}
.return-tracking-kpi {
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.88);
    padding: 13px 14px;
}
.return-tracking-kpi span {
    display: block;
    font-size: 10px;
    color: #64748b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.return-tracking-kpi strong {
    display: block;
    margin-top: 5px;
    font-size: 19px;
    line-height: 1;
    color: #0f172a;
    font-weight: 900;
}
.return-tracking-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}
.return-tracking-toolbar-left,
.return-tracking-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.return-tracking-search {
    min-width: min(100%, 320px);
}
.return-tracking-status-filter-wrap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}
.return-tracking-status-filter-wrap > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    align-self: stretch;
    color: #64748b;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    font-size: 13px;
}
.return-tracking-status-filter {
    min-width: 165px;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    box-shadow: none !important;
}
.return-tracking-status-filter:focus {
    box-shadow: inset 0 0 0 2px #2563eb !important;
}
.return-tracking-sheet-card {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
}
.return-tracking-sheet-scroll {
    overflow: auto;
    padding-bottom: 0;
}
.return-tracking-sheet-table {
    min-width: 1320px;
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}
.return-tracking-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f1f5f9;
    color: #334155;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
    padding: 10px 9px;
    white-space: nowrap;
}
.return-tracking-sheet-table thead th:last-child,
.return-tracking-sheet-table tbody td:last-child {
    border-right: 0;
}
.return-tracking-sheet-table tbody td {
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    padding: 0;
    vertical-align: middle;
    background: #ffffff;
}
.return-tracking-sheet-table tbody tr:last-child td {
    border-bottom: 0;
}
.return-tracking-sheet-table tbody tr:hover td {
    background: #f8fafc;
}
.return-tracking-sheet-table tbody tr.is-received td {
    background: #f0fdf4;
}
.return-tracking-sheet-table tbody tr.is-received:hover td {
    background: #e7f8ec;
}
.return-tracking-sheet-table tbody tr.is-pending td {
    background: #fffbeb;
}
.return-tracking-sheet-table tbody tr.is-pending:hover td {
    background: #fef3c7;
}
.return-tracking-sheet-table .rt-status.status-received {
    color: #15803d;
    background: #ecfdf5;
    font-weight: 900;
}
.return-tracking-sheet-table .rt-status.status-pending {
    color: #a16207;
    background: #fffbeb;
    font-weight: 900;
}
.return-tracking-sheet-table .form-control,
.return-tracking-sheet-table .form-select {
    width: 100%;
    min-height: 42px;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 8px 10px;
    background: transparent;
    color: #0f172a;
    font-size: 12px;
    box-shadow: none !important;
}
.return-tracking-sheet-table .form-control:focus,
.return-tracking-sheet-table .form-select:focus {
    position: relative;
    z-index: 2;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px #2563eb !important;
}
.return-tracking-sheet-table textarea.form-control {
    min-height: 42px;
    height: 42px;
    resize: vertical;
    line-height: 1.4;
}
.return-tracking-sheet-table .rt-sheet-col-date { width: 175px; }
.return-tracking-sheet-table .rt-sheet-col-store { width: 180px; }
.return-tracking-sheet-table .rt-sheet-col-marketplace { width: 150px; }
.return-tracking-sheet-table .rt-sheet-col-order { width: 190px; }
.return-tracking-sheet-table .rt-sheet-col-product { width: 300px; }
.return-tracking-sheet-table .rt-sheet-col-status { width: 175px; }
.return-tracking-sheet-table .rt-sheet-col-note { width: 260px; }
.return-tracking-sheet-table .rt-sheet-col-action { width: 78px; }
.return-tracking-sheet-table .rt-action-cell {
    padding: 5px !important;
    text-align: center;
}
.return-tracking-sheet-table .rt-action-cell .btn {
    width: 34px;
    height: 32px;
    padding: 0;
    border-radius: 5px;
}
.return-tracking-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
}
.return-tracking-status-pill.received {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #15803d;
}
.return-tracking-empty {
    padding: 22px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}
.return-tracking-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 650;
}
@media (max-width: 991.98px) {
    .return-tracking-kpis { grid-template-columns: 1fr; }
    .return-tracking-toolbar,
    .return-tracking-toolbar-left,
    .return-tracking-toolbar-right,
    .return-tracking-toolbar .btn,
    .return-tracking-search,
    .return-tracking-status-filter-wrap,
    .return-tracking-status-filter { width: 100%; }
}

.return-tracking-sheet-table textarea.form-control {
    min-height: 42px;
    resize: vertical;
}
.return-tracking-sheet-table .return-cell-hint {
    font-size: 10px;
    color: #64748b;
    margin-top: 5px;
    line-height: 1.35;
    font-weight: 650;
}
.return-tracking-sheet-table .rt-qty,
.return-tracking-sheet-table .rt-harga-jual,
.return-tracking-sheet-table .rt-biaya-packing,
.return-tracking-sheet-table .rt-total-kerugian {
    min-width: 100px;
}
html[data-theme="dark"] .return-tracking-hero-card,
body[data-theme="dark"] .return-tracking-hero-card,
html[data-theme="dark"] .return-tracking-toolbar,
body[data-theme="dark"] .return-tracking-toolbar,
html[data-theme="dark"] .return-tracking-sheet-card,
body[data-theme="dark"] .return-tracking-sheet-card {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .25);
}
html[data-theme="dark"] .return-tracking-title,
body[data-theme="dark"] .return-tracking-title,
html[data-theme="dark"] .return-tracking-kpi strong,
body[data-theme="dark"] .return-tracking-kpi strong {
    color: #f8fafc;
}
html[data-theme="dark"] .return-tracking-kpi,
body[data-theme="dark"] .return-tracking-kpi,
html[data-theme="dark"] .return-tracking-note,
body[data-theme="dark"] .return-tracking-note,
html[data-theme="dark"] .return-tracking-sheet-table tbody td,
body[data-theme="dark"] .return-tracking-sheet-table tbody td {
    background: #111827;
    border-color: rgba(148, 163, 184, .20);
    color: #e2e8f0;
}
html[data-theme="dark"] .return-tracking-subtitle,
body[data-theme="dark"] .return-tracking-subtitle,
html[data-theme="dark"] .return-tracking-kpi span,
body[data-theme="dark"] .return-tracking-kpi span {
    color: #94a3b8;
}
html[data-theme="dark"] .return-tracking-status-filter-wrap,
body[data-theme="dark"] .return-tracking-status-filter-wrap,
html[data-theme="dark"] .return-tracking-status-filter,
body[data-theme="dark"] .return-tracking-status-filter {
    background: #111827;
    border-color: rgba(148, 163, 184, .28);
    color: #e2e8f0;
}
html[data-theme="dark"] .return-tracking-status-filter-wrap > i,
body[data-theme="dark"] .return-tracking-status-filter-wrap > i {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .22);
    color: #94a3b8;
}
html[data-theme="dark"] .return-tracking-sheet-table tbody tr.is-received td,
body[data-theme="dark"] .return-tracking-sheet-table tbody tr.is-received td {
    background: rgba(22, 101, 52, .22);
}
html[data-theme="dark"] .return-tracking-sheet-table tbody tr.is-pending td,
body[data-theme="dark"] .return-tracking-sheet-table tbody tr.is-pending td {
    background: rgba(161, 98, 7, .20);
}



:root {
    --skala-header-black: #030303;
    --skala-header-soft-black: #080808;
    --skala-red: #ff3030;
    --skala-red-soft: rgba(255, 48, 48, .16);
}
@media (min-width: 992px) {
    body { padding-top: var(--desktop-app-header-height, 74px) !important; }
    .desktop-app-header {
        background: linear-gradient(90deg, #000000 0%, #070707 48%, #111111 100%) !important;
        border-bottom: 1px solid rgba(255, 48, 48, 0.22) !important;
        color: #ffffff !important;
        box-shadow: 0 1px 0 rgba(255, 48, 48, .10) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .desktop-app-header-left { flex: 0 1 620px !important; }
    .desktop-app-header-center { max-width: 620px !important; }
    .desktop-app-header-right { flex-shrink: 0 !important; }
    .desktop-brand-block.skala-main-brand {
        gap: 13px !important;
        min-width: 0 !important;
    }
    .desktop-brand-logo.skala-app-logo {
        width: 132px !important;
        height: 52px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .desktop-brand-logo.skala-app-logo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center left !important;
    }
    .desktop-brand-copy.skala-app-copy { min-width: 0 !important; }
    .desktop-brand-name#desktopHeaderAppName,
    .desktop-app-header .desktop-brand-name#desktopHeaderAppName {
        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        letter-spacing: -0.035em !important;
        max-width: 220px !important;
    }
    .desktop-brand-meta#desktopHeaderAppTagline {
        color: #ffb4b4 !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: .01em !important;
        max-width: 240px !important;
    }
    .desktop-header-divider {
        background: rgba(255, 48, 48, 0.22) !important;
    }
    .desktop-header-context-label { color: #a3a3a3 !important; }
    .desktop-header-context strong { color: #ffffff !important; }
    .desktop-header-search,
    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar,
    .desktop-header-btn,
    #desktopNotifAnchor .notif-topbar-btn,
    .desktop-user-pill.skala-account-pill {
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    .desktop-header-search:focus-within,
    .desktop-header-btn:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover,
    .desktop-user-pill.skala-account-pill:hover {
        background: rgba(255, 48, 48, 0.12) !important;
        border-color: rgba(255, 48, 48, 0.38) !important;
        color: #ffffff !important;
    }
    .desktop-header-search input,
    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        color: #ffffff !important;
    }
    .desktop-header-search input::placeholder { color: #9ca3af !important; }
    .desktop-header-search i,
    .desktop-header-btn i,
    #desktopNotifAnchor .notif-topbar-btn i { color: #fca5a5 !important; }
    .desktop-user-pill.skala-account-pill {
        min-height: 48px !important;
        height: 48px !important;
        max-width: 318px !important;
        min-width: 238px !important;
        padding: 0 10px 0 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    .desktop-user-pill.skala-account-pill .skala-account-copy {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        line-height: 1.12 !important;
    }
    .desktop-user-pill.skala-account-pill .skala-account-copy small,
    #desktopUserPillCompanyName {
        display: block !important;
        color: #ffffff !important;
        font-size: 11.5px !important;
        font-weight: 950 !important;
        max-width: 178px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -.01em !important;
    }
    .desktop-user-pill.skala-account-pill .skala-account-copy span,
    #desktopUserPillName {
        color: #fca5a5 !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        max-width: 178px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .desktop-account-company-logo {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, .08) !important;
        border: 1px solid rgba(255, 255, 255, .16) !important;
    }
    .desktop-account-company-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: none !important;
    }
    .desktop-account-company-logo.has-image img { display: block !important; }
    .desktop-account-company-logo.has-image .desktop-account-company-logo-fallback { display: none !important; }
    .desktop-account-company-logo-fallback {
        color: #fecaca !important;
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        font-size: 15px !important;
    }
    .desktop-user-pill.skala-account-pill .desktop-user-pill-caret {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        border-radius: 999px !important;
        background: rgba(255, 48, 48, 0.14) !important;
        color: #fecaca !important;
    }
}
@media (max-width: 991.98px) {
    .mobile-topbar {
        background: #000000 !important;
        border-bottom: 1px solid rgba(255, 48, 48, .22) !important;
    }
    #mobileTopbarBrand::before {
        content: "";
        display: inline-block;
        width: 28px;
        height: 16px;
        margin-right: 8px;
        vertical-align: -3px;
        background: url('skala-pusat-laba-logo.png') center / contain no-repeat;
    }
    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold { color: #ffffff !important; }
    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .small { color: #fca5a5 !important; }
}
@media (min-width: 992px) and (max-width: 1240px) {
    .desktop-brand-logo.skala-app-logo { width: 112px !important; }
    .desktop-brand-name#desktopHeaderAppName { font-size: 15px !important; max-width: 175px !important; }
    .desktop-brand-meta#desktopHeaderAppTagline { max-width: 180px !important; }
    .desktop-app-header-left { flex-basis: 500px !important; }
    .desktop-user-pill.skala-account-pill { min-width: 216px !important; max-width: 260px !important; }
}



/* SKALA Pusat Laba - header black premium, aksen putih dan biru cerah */
:root {
    --skala-ai-blue: #3b82f6;
    --skala-ai-blue-soft: rgba(59, 130, 246, .16);
    --skala-ai-blue-border: rgba(96, 165, 250, .34);
    --skala-header-ink: #020617;
    --skala-header-ink-2: #0b1120;
}
@media (min-width: 992px) {
    .desktop-app-header {
        background: linear-gradient(90deg, #020617 0%, #050816 44%, #0f172a 100%) !important;
        border-bottom: 1px solid var(--skala-ai-blue-border) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 30px rgba(2, 8, 23, .28) !important;
    }
    .desktop-brand-name#desktopHeaderAppName,
    .desktop-app-header .desktop-brand-name#desktopHeaderAppName,
    .desktop-header-context strong,
    .desktop-brand-block,
    .desktop-header-context {
        color: #ffffff !important;
    }
    .desktop-brand-meta#desktopHeaderAppTagline,
    .desktop-header-context-label {
        color: #93c5fd !important;
    }
    .desktop-header-divider {
        background: rgba(147, 197, 253, .28) !important;
    }
    .desktop-header-search,
    .desktop-header-period-mount #globalPeriodFilterBar,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterBar,
    .desktop-header-btn,
    #desktopNotifAnchor .notif-topbar-btn,
    .desktop-user-pill.skala-account-pill {
        background: rgba(255, 255, 255, .065) !important;
        border: 1px solid rgba(147, 197, 253, .24) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }
    .desktop-header-search:focus-within,
    .desktop-header-btn:hover,
    #desktopNotifAnchor .notif-topbar-btn:hover,
    .desktop-user-pill.skala-account-pill:hover {
        background: rgba(59, 130, 246, .18) !important;
        border-color: rgba(96, 165, 250, .58) !important;
        color: #ffffff !important;
    }
    .desktop-header-search input,
    .desktop-header-period-mount #globalPeriodFilterSelect,
    body.sidebar-minimized .desktop-header-period-mount #globalPeriodFilterSelect {
        color: #ffffff !important;
    }
    .desktop-header-search input::placeholder {
        color: #9ca3af !important;
    }
    .desktop-header-search i,
    .desktop-header-btn i,
    #desktopNotifAnchor .notif-topbar-btn i,
    .desktop-account-company-logo-fallback {
        color: #93c5fd !important;
    }
    .desktop-header-search-kbd {
        background: rgba(15, 23, 42, .78) !important;
        border-color: rgba(147, 197, 253, .22) !important;
        color: #bfdbfe !important;
    }
    .desktop-header-period-mount #globalPeriodFilterSelect option {
        background: #0f172a !important;
        color: #ffffff !important;
    }
    .desktop-header-period-mount .sidebar-period-reset,
    body.sidebar-minimized .desktop-header-period-mount .sidebar-period-reset {
        background: rgba(15, 23, 42, .78) !important;
        border-color: rgba(147, 197, 253, .24) !important;
        color: #bfdbfe !important;
    }
    .desktop-header-period-mount .sidebar-period-reset:hover {
        background: rgba(59, 130, 246, .18) !important;
        border-color: rgba(96, 165, 250, .58) !important;
        color: #ffffff !important;
    }
    .desktop-user-pill.skala-account-pill .skala-account-copy small,
    #desktopUserPillCompanyName {
        color: #ffffff !important;
    }
    .desktop-user-pill.skala-account-pill .skala-account-copy span,
    #desktopUserPillName {
        color: #bfdbfe !important;
    }
    .desktop-account-company-logo {
        background: rgba(59, 130, 246, .14) !important;
        border-color: rgba(147, 197, 253, .28) !important;
    }
    .desktop-user-pill.skala-account-pill .desktop-user-pill-caret {
        background: rgba(59, 130, 246, .18) !important;
        color: #bfdbfe !important;
    }
    #desktopNotifAnchor .notif-topbar-btn .notif-badge {
        background: #3b82f6 !important;
        color: #ffffff !important;
        border: 2px solid #020617 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, .20) !important;
    }
}
@media (max-width: 991.98px) {
    .mobile-topbar {
        background: linear-gradient(90deg, #020617 0%, #050816 54%, #0f172a 100%) !important;
        border-bottom: 1px solid rgba(96, 165, 250, .28) !important;
        color: #ffffff !important;
    }
    .mobile-topbar #mobileTopbarBrand,
    .mobile-topbar .fw-bold {
        color: #ffffff !important;
    }
    .mobile-topbar #mobileCurrentSectionLabel,
    .mobile-topbar .small {
        color: #93c5fd !important;
    }
    .mobile-topbar .btn,
    .mobile-topbar .notif-topbar-btn {
        background: rgba(255, 255, 255, .065) !important;
        border-color: rgba(147, 197, 253, .24) !important;
        color: #ffffff !important;
    }
    .mobile-topbar .btn i,
    .mobile-topbar .notif-topbar-btn i {
        color: #93c5fd !important;
    }
    .mobile-topbar .notif-badge {
        background: #3b82f6 !important;
        color: #ffffff !important;
        border: 2px solid #020617 !important;
    }
}



/* ===== SKALA compact sidebar v3: sidebar diperkecil, card & font dirapihkan ===== */
@media (min-width: 992px) {
    :root,
    body:not(.sidebar-minimized) {
        --sidebar-width: 218px !important;
    }

    #sidebar {
        width: var(--sidebar-width) !important;
        overflow-x: hidden !important;
    }

    #content,
    body.sidebar-minimized #content {
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }

    .brand-wrap {
        padding: 16px 13px 13px !important;
    }

    .brand-header {
        gap: 10px !important;
        align-items: center !important;
    }

    .brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 13px !important;
        box-shadow: 0 10px 18px rgba(59, 130, 246, 0.10) !important;
    }

    .brand-title,
    #sidebarCompanyName {
        font-size: 12.5px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
        max-width: 128px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .brand-subtitle,
    #sidebarCompanySubtitle {
        font-size: 8.8px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.08em !important;
        max-width: 128px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar-user-panel {
        margin: 10px 10px 12px !important;
        padding: 10px !important;
        border-radius: 15px !important;
    }

    .sidebar-user-name {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        max-width: 172px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .sidebar-user-meta {
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        max-width: 172px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .sidebar-user-panel .d-grid,
    .sidebar-user-panel .d-flex {
        gap: 6px !important;
    }

    .btn-theme-toggle,
    .theme-toggle-btn,
    #sidebarMinimizeToggle,
    #btnLogout {
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 11px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    .btn-theme-toggle i,
    .theme-toggle-btn i,
    #sidebarMinimizeToggle i,
    #btnLogout i {
        font-size: 12px !important;
    }

    .nav-category {
        font-size: 8.7px !important;
        letter-spacing: 0.12em !important;
        padding: 12px 13px 5px !important;
        line-height: 1.2 !important;
    }

    .nav-link {
        min-height: 36px !important;
        margin: 3px 9px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        gap: 9px !important;
        font-size: 11.6px !important;
        line-height: 1.15 !important;
    }

    .nav-link i {
        width: 17px !important;
        min-width: 17px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .nav-link span {
        font-size: 11.6px !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .nav-link:hover {
        transform: translateX(1px) !important;
    }

    #mainNav {
        padding-bottom: 18px !important;
    }

    #sidebar::-webkit-scrollbar {
        width: 6px !important;
    }

    #sidebar::-webkit-scrollbar-thumb {
        background: rgba(147, 197, 253, .66) !important;
        border-radius: 999px !important;
    }
}

@media (min-width: 992px) {
    body.sidebar-minimized {
        --sidebar-width: 76px !important;
    }

    body.sidebar-minimized .brand-wrap {
        padding: 13px 8px !important;
    }

    body.sidebar-minimized .brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 13px !important;
    }

    body.sidebar-minimized .sidebar-user-panel {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 8px 6px !important;
        border-radius: 13px !important;
    }

    body.sidebar-minimized #sidebarThemeToggle,
    body.sidebar-minimized #sidebarMinimizeToggle,
    body.sidebar-minimized #btnLogout {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
    }

    body.sidebar-minimized .nav-link {
        min-height: 38px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 12px !important;
    }

    body.sidebar-minimized .nav-link i {
        font-size: 15px !important;
    }
}

@media (max-width: 991.98px) {
    :root,
    body.sidebar-minimized {
        --sidebar-width: min(270px, 82vw) !important;
    }

    #sidebar {
        width: var(--sidebar-width) !important;
    }

    .brand-wrap {
        padding: 16px 14px 13px !important;
    }

    .brand-logo {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 14px !important;
    }

    .nav-link {
        min-height: 40px !important;
        padding: 9px 12px !important;
        margin: 4px 10px !important;
        font-size: 12px !important;
    }

    .nav-link span {
        font-size: 12px !important;
    }

    .nav-category {
        font-size: 9px !important;
        padding: 12px 14px 5px !important;
    }
}


/* === Return Tracking Table Alignment Fix v4 ===
   Hanya memperbaiki tampilan tabel. Field/payload/sistem simpan tetap sama. */
#return-tracking-section .return-tracking-sheet-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
#return-tracking-section .return-tracking-sheet-table {
    width: 100%;
    min-width: 1240px;
    table-layout: fixed;
}
#return-tracking-section .return-tracking-sheet-table > thead > tr > th,
#return-tracking-section .return-tracking-sheet-table > tbody > tr > td {
    box-sizing: border-box;
}
#return-tracking-section .return-tracking-sheet-table > tbody > tr > td {
    height: 44px;
    min-height: 44px;
    overflow: hidden;
}
#return-tracking-section .return-tracking-sheet-table .form-control,
#return-tracking-section .return-tracking-sheet-table .form-select {
    height: 43px;
    min-height: 43px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#return-tracking-section .return-tracking-sheet-table textarea.form-control {
    height: 43px;
    min-height: 43px;
    resize: none;
    white-space: nowrap;
}
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-date { width: 172px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-store { width: 170px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-marketplace { width: 145px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-order { width: 185px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-product { width: 285px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-status { width: 170px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-note { width: 225px; }
#return-tracking-section .return-tracking-sheet-table .rt-sheet-col-action { width: 72px; }
#return-tracking-section .return-tracking-sheet-table .rt-action-cell {
    height: 44px;
    padding: 5px !important;
    overflow: visible;
}
#return-tracking-section .return-tracking-sheet-table .rt-action-cell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}