/* ════════════════════════════════════════════════
 * BLOCK 1: Utility CSS (pengganti Tailwind CDN)
 * Originally at line 9
 * ════════════════════════════════════════════════ */

/* =====================================================
       MINIMAL UTILITY CSS — menggantikan cdn.tailwindcss.com
       Hanya class yang benar-benar dipakai di file ini.
    ===================================================== */

    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    img, svg { display: block; max-width: 100%; }
    button, input, select, textarea { font-family: inherit; font-size: inherit; }
    a { text-decoration: none; color: inherit; }

    /* Display */
    .block { display: block !important; }
    .inline-block { display: inline-block; }
    .flex { display: flex; }
    .grid { display: grid; }
    .hidden { display: none !important; }
    .table { display: table; }
    .table-cell { display: table-cell; }
    .print\:table-cell { display: none; }

    /* Flex / Grid */
    .flex-1 { flex: 1 1 0%; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-shrink-0 { flex-shrink: 0; }
    .shrink-0 { flex-shrink: 0; }
    .items-start { align-items: flex-start; }
    .items-center { align-items: center; }
    .items-end { align-items: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-end { justify-content: flex-end; }
    .ml-auto { margin-left: auto; }
    .min-w-0 { min-width: 0; }

    /* Grid columns */
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Gap */
    .gap-0\.5 { gap: 0.125rem; }
    .gap-1   { gap: 0.25rem; }
    .gap-1\.5 { gap: 0.375rem; }
    .gap-2   { gap: 0.5rem; }
    .gap-3   { gap: 0.75rem; }
    .gap-4   { gap: 1rem; }
    .gap-8   { gap: 2rem; }
    .gap-x-4 { column-gap: 1rem; }
    .gap-y-0 { row-gap: 0; }
    .gap-y-1\.5 { row-gap: 0.375rem; }
    .gap-y-2\.5 { row-gap: 0.625rem; }

    /* Spacing — Margin */
    .mb-0\.5 { margin-bottom: 0.125rem; }
    .mb-1  { margin-bottom: 0.25rem; }
    .mb-1\.5 { margin-bottom: 0.375rem; }
    .mb-2  { margin-bottom: 0.5rem; }
    .mb-3  { margin-bottom: 0.75rem; }
    .mb-4  { margin-bottom: 1rem; }
    .mb-5  { margin-bottom: 1.25rem; }
    .mb-6  { margin-bottom: 1.5rem; }
    .mb-8  { margin-bottom: 2rem; }
    .mb-10 { margin-bottom: 2.5rem; }
    .mt-0\.5 { margin-top: 0.125rem; }
    .mt-1  { margin-top: 0.25rem; }
    .mt-2  { margin-top: 0.5rem; }
    .mt-3  { margin-top: 0.75rem; }
    .mt-4  { margin-top: 1rem; }
    .mt-5  { margin-top: 1.25rem; }
    .mt-6  { margin-top: 1.5rem; }
    .mt-12 { margin-top: 3rem; }
    .ml-1  { margin-left: 0.25rem; }
    .ml-3  { margin-left: 0.75rem; }
    .ml-4  { margin-left: 1rem; }
    .ml-5  { margin-left: 1.25rem; }
    .mr-1  { margin-right: 0.25rem; }
    .mr-3  { margin-right: 0.75rem; }
    .mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .my-2  { margin-top: 0.5rem; margin-bottom: 0.5rem; }

    /* Spacing — Padding */
    .p-1   { padding: 0.25rem; }
    .p-1\.5 { padding: 0.375rem; }
    .p-2   { padding: 0.5rem; }
    .p-4   { padding: 1rem; }
    .p-6   { padding: 1.5rem; }
    .p-8   { padding: 2rem; }
    .p-16  { padding: 4rem; }
    .pb-2  { padding-bottom: 0.5rem; }
    .pb-3  { padding-bottom: 0.75rem; }
    .pt-1  { padding-top: 0.25rem; }
    .px-1  { padding-left: 0.25rem; padding-right: 0.25rem; }
    .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
    .px-2  { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
    .px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-4  { padding-left: 1rem; padding-right: 1rem; }
    .px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
    .px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
    .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
    .py-1  { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
    .py-4  { padding-top: 1rem; padding-bottom: 1rem; }
    .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    /* Width / Height */
    .w-3   { width: 0.75rem; }
    .w-4   { width: 1rem; }
    .w-5   { width: 1.25rem; }
    .w-7   { width: 1.75rem; }
    .w-8   { width: 2rem; }
    .w-9   { width: 2.25rem; }
    .w-10  { width: 2.5rem; }
    .w-16  { width: 4rem; }
    .w-20  { width: 5rem; }
    .w-28  { width: 7rem; }
    .w-36  { width: 9rem; }
    .w-44  { width: 11rem; }
    .w-48  { width: 12rem; }
    .w-60  { width: 15rem; }
    .w-64  { width: 16rem; }
    .w-auto { width: auto; }
    .w-full { width: 100%; }
    .min-w-\[120px\] { min-width: 120px; }
    .max-w-md  { max-width: 28rem; }
    .max-w-lg  { max-width: 32rem; }
    .max-w-2xl { max-width: 42rem; }
    .max-w-xs  { max-width: 20rem; }
    .h-3   { height: 0.75rem; }
    .h-4   { height: 1rem; }
    .h-7   { height: 1.75rem; }
    .h-8   { height: 2rem; }
    .h-9   { height: 2.25rem; }
    .h-12  { height: 3rem; }
    .h-16  { height: 4rem; }
    .h-20  { height: 5rem; }
    .h-screen { height: 100vh; }
    .min-h-\[40px\] { min-height: 40px; }
    .min-h-\[44px\] { min-height: 44px; }
    .min-h-\[52px\] { min-height: 52px; }
    .min-h-\[72px\] { min-height: 72px; }

    /* Typography */
    .text-xs   { font-size: 0.75rem; line-height: 1rem; }
    .text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl  { font-size: 1.5rem; line-height: 2rem; }
    .text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
    .text-\[7px\]  { font-size: 7px; }
    .text-\[9px\]  { font-size: 9px; }
    .text-\[10px\] { font-size: 10px; }
    .text-\[11px\] { font-size: 11px; }
    .font-light    { font-weight: 300; }
    .font-medium   { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold     { font-weight: 700; }
    .text-left     { text-align: left; }
    .text-center   { text-align: center; }
    .text-right    { text-align: right; }
    .text-justify  { text-align: justify; }
    .text-white    { color: #ffffff; }
    .text-red-500  { color: #ef4444; }
    .underline     { text-decoration: underline; }
    .uppercase     { text-transform: uppercase; }
    .tracking-wide    { letter-spacing: 0.025em; }
    .tracking-widest  { letter-spacing: 0.1em; }
    .leading-tight    { line-height: 1.25; }
    .leading-relaxed  { line-height: 1.625; }
    .antialiased      { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    .truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .whitespace-nowrap { white-space: nowrap; }
    .break-all        { word-break: break-all; }

    /* Border */
    .border       { border-width: 1px; border-style: solid; }
    .border-b     { border-bottom-width: 1px; border-bottom-style: solid; }
    .border-r     { border-right-width: 1px; border-right-style: solid; }
    .border-t-2   { border-top-width: 2px; border-top-style: solid; }
    .border-collapse { border-collapse: collapse; }
    .border-dashed { border-style: dashed; }
    .outline-none  { outline: none; }

    /* Border Radius */
    .rounded     { border-radius: 0.25rem; }
    .rounded-lg  { border-radius: 0.5rem; }
    .rounded-xl  { border-radius: 0.75rem; }
    .rounded-2xl { border-radius: 1rem; }
    .rounded-full { border-radius: 9999px; }

    /* Background */
    .bg-transparent { background-color: transparent; }
    .bg-black\/40   { background-color: rgba(0,0,0,0.4); }

    /* Shadow */
    .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
    .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
    .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

    /* Overflow */
    .overflow-hidden   { overflow: hidden; }
    .overflow-x-auto   { overflow-x: auto; }
    .overflow-y-auto   { overflow-y: auto; }

    /* Position */
    .relative { position: relative; }
    .fixed    { position: fixed; }
    .inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
    .bottom-6 { bottom: 1.5rem; }
    .right-6  { right: 1.5rem; }
    .z-10     { z-index: 10; }
    .z-20     { z-index: 20; }
    .z-\[100\]  { z-index: 100; }
    .z-\[9999\] { z-index: 9999; }

    /* Misc */
    .cursor-pointer  { cursor: pointer; }
    .pointer-events-none { pointer-events: none; }
    .resize-none     { resize: none; }
    .object-contain  { object-fit: contain; }
    .align-middle    { vertical-align: middle; }
    .align-top       { vertical-align: top; }

    /* Transitions */
    .transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }

    /* Opacity hover */
    .hover\:opacity-70:hover { opacity: 0.7; }
    .hover\:opacity-80:hover { opacity: 0.8; }
    .hover\:underline:hover  { text-decoration: underline; }

    /* Backdrop */
    .backdrop-blur-sm { backdrop-filter: blur(4px); }

    /* Space-y */
    .space-y-1   > * + * { margin-top: 0.25rem; }
    .space-y-1\.5 > * + * { margin-top: 0.375rem; }
    .space-y-3   > * + * { margin-top: 0.75rem; }
    .space-y-4   > * + * { margin-top: 1rem; }

    /* Responsive — md: breakpoint (768px) */
    @media (min-width: 768px) {
        .md\:flex  { display: flex !important; }
        .md\:hidden { display: none !important; }
        .md\:p-8   { padding: 2rem; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .md\:col-span-2  { grid-column: span 2 / span 2; }
    }

    /* Responsive — sm: breakpoint (640px) */
    @media (min-width: 640px) {
        .sm\:block  { display: block !important; }
        .sm\:inline { display: inline !important; }
    }

    /* Print utilities */
    @media print {
        .print\:bg-white    { background-color: white !important; }
        .print\:table-cell  { display: table-cell !important; }
        .hidden.print\:table-cell { display: table-cell !important; }
    }


/* ════════════════════════════════════════════════
 * BLOCK 2: Main Application CSS
 * Originally at line 290
 * ════════════════════════════════════════════════ */

/* ===== ROOT VARIABLES ===== */
        :root {
            --bg-app: #f5ede6;
            --bg-sidebar: #3b2314;
            --bg-sidebar-header: #2e1a0f;
            --sidebar-border: #4e2f1a;
            --sidebar-text: #d4b8a8;
            --sidebar-text-muted: #9a7a68;
            --accent: #8b5e3c;
            --accent-hover: #7a4f2e;
            --accent-light: #f0ddd0;
            --accent-light2: #e8cbb8;
            --bg-header: #ffffff;
            --header-border: #e6d5c8;
            --bg-main: #ede0d4;
            --bg-page: #ffffff;
            --text-primary: #2c1a0e;
            --text-secondary: #6b4f3a;
            --text-muted: #9a7a68;
            --border-color: #d9c4b4;
            --border-input: #cdb8a8;
            --bg-input: #faf5f1;
            --bg-input-focus: #ffffff;
            --bg-table-head: #f5ede6;
            --bg-table-row-hover: #faf0e8;
            --shadow-page: 0 10px 40px rgba(139, 94, 60, 0.10);
            --modal-bg: #ffffff;
            --modal-border: #e8d5c4;
            --toast-success-bg: #f0fdf4;
            --toast-success-text: #14532d;
            --toast-success-border: #bbf7d0;
            --toast-error-bg: #fef2f2;
            --toast-error-text: #7f1d1d;
            --toast-error-border: #fecaca;

            /* ── Semantic color variables (Pass 1 dark mode) ── */
            --color-danger:         #ef4444;
            --color-danger-dark:    #dc2626;
            --color-danger-darker:  #b91c1c;
            --color-danger-darkest: #991b1b;
            --color-danger-bg:      #fee2e2;
            --color-danger-bg-lt:   #fef2f2;
            --color-danger-border:  #fecaca;

            --color-success:        #15803d;
            --color-success-mid:    #16a34a;
            --color-success-dark:   #065f46;
            --color-success-bg:     #dcfce7;
            --color-success-bg2:    #d1fae5;
            --color-success-border: #bbf7d0;

            --color-info:           #1e40af;
            --color-info-mid:       #0369a1;
            --color-info-bg:        #eff6ff;
            --color-info-bg2:       #dbeafe;
            --color-info-bg3:       #e0f2fe;
            --color-info-border:    #bae6fd;

            --color-warning:        #854d0e;
            --color-warning-mid:    #92400e;
            --color-warning-dark:   #78350f;
            --color-warning-accent: #f59e0b;
            --color-warning-bg:     #fef9c3;
            --color-warning-bg2:    #fffbeb;
            --color-warning-bg3:    #fef3c7;
            --color-warning-border: #fde68a;

            --color-purple:         #7c3aed;
            --color-purple-dark:    #6b21a8;
            --color-purple-bg:      #f3e8ff;
            --color-purple-border:  #e9d5ff;

            --color-neutral-bg:     #f1f5f9;
            --color-neutral-bg2:    #f8fafc;
            --color-neutral-border: #e2e8f0;

            /* ── Pass 3 additions ── */
            --color-rose:           #f43f5e;
            --color-violet:         #8b5cf6;
            --color-violet-dark:    #5b21b6;
            --color-violet-bg:      #f5f3ff;
            --color-violet-bg2:     #ede9fe;
            --color-violet-border:  #ddd6fe;
            --color-whatsapp:       #25D366;
            --color-disabled-bg:    #e5e7eb;
            --color-disabled-text:  #9ca3af;
            --color-disabled-border:#d1d5db;
            --color-accent-brown:   #8b5e3c;
            --color-accent-brown-lt:#8b7355;
            --color-gdrive:         #1a56db;
            --color-edit-badge-bg:  #fef08a;
            --color-edit-badge-text:#854d0e;
            --color-warn-soft-bg:   #fff8f8;
        }

        [data-theme="dark"] {
            /* ════════════════════════════════════════════════
               GitHub-style dark mode + BRIN green accent (Polish R1)
               ──────────────────────────────────────────────── */
            --bg-app: #0d1117;
            --bg-sidebar: #010409;
            --bg-sidebar-header: #010409;
            --sidebar-border: #21262d;
            --sidebar-text: #e6edf3;
            --sidebar-text-muted: #b1bac4;
            --accent: #059669;
            --accent-hover: #047857;
            --accent-light: #0a2520;
            --accent-light2: #0e3530;
            --bg-header: #0d1117;
            --header-border: #21262d;
            --bg-main: #0d1117;
            --bg-page: #0d1117;
            --text-primary: #e6edf3;
            --text-secondary: #b1bac4;
            --text-muted: #7d8590;
            --border-color: #21262d;
            --border-input: #30363d;
            --bg-input: #0d1117;
            --bg-input-focus: #161b22;
            --bg-table-head: #161b22;
            --bg-table-row-hover: #1c2128;
            --shadow-page: 0 10px 40px rgba(0,0,0,0.5);
            --modal-bg: #161b22;
            --modal-border: #30363d;
            --toast-success-bg: #0a2520;
            --toast-success-text: #34d399;
            --toast-success-border: #047857;
            --toast-error-bg: #2d0f0f;
            --toast-error-text: #fca5a5;
            --toast-error-border: #991b1b;

            /* ── Semantic color variables (Pass 1 dark mode) ── */
            --color-danger:         #f87171;
            --color-danger-dark:    #ef4444;
            --color-danger-darker:  #dc2626;
            --color-danger-darkest: #fca5a5;
            --color-danger-bg:      #2d1010;
            --color-danger-bg-lt:   #2a0f0f;
            --color-danger-border:  #7f1d1d;

            --color-success:        #34d399;
            --color-success-mid:    #10b981;
            --color-success-dark:   #6ee7b7;
            --color-success-bg:     #0a2520;
            --color-success-bg2:    #0c2e28;
            --color-success-border: #047857;

            --color-info:           #93c5fd;
            --color-info-mid:       #60a5fa;
            --color-info-bg:        #0f172a;
            --color-info-bg2:       #1e2a45;
            --color-info-bg3:       #172036;
            --color-info-border:    #1e3a6e;

            --color-warning:        #fbbf24;
            --color-warning-mid:    #f59e0b;
            --color-warning-dark:   #fde68a;
            --color-warning-accent: #d97706;
            --color-warning-bg:     #1c1505;
            --color-warning-bg2:    #1a1300;
            --color-warning-bg3:    #1e1608;
            --color-warning-border: #78350f;

            --color-purple:         #c084fc;
            --color-purple-dark:    #a855f7;
            --color-purple-bg:      #1a0a2e;
            --color-purple-border:  #4c1d95;

            --color-neutral-bg:     #161b22;
            --color-neutral-bg2:    #0d1117;
            --color-neutral-border: #21262d;

            /* ── Pass 3 additions ── */
            --color-rose:           #fb7185;
            --color-violet:         #a78bfa;
            --color-violet-dark:    #c084fc;
            --color-violet-bg:      #1e1032;
            --color-violet-bg2:     #2d1b69;
            --color-violet-border:  #4c1d95;
            --color-whatsapp:       #25D366;
            --color-disabled-bg:    #21262d;
            --color-disabled-text:  #7d8590;
            --color-disabled-border:#30363d;
            --color-accent-brown:   #059669;
            --color-accent-brown-lt:#b1bac4;
            --color-gdrive:         #60a5fa;
            --color-edit-badge-bg:  #1c1505;
            --color-edit-badge-text:#fbbf24;
            --color-warn-soft-bg:   #2d1010;
        }

        /* ===== BASE ===== */
        * { box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--bg-app);
            color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* ===== A4 PAGE ===== */
        .a4-page {
            width: 210mm;
            min-height: 297mm;
            margin: 0 auto;
            background: var(--bg-page);
            box-shadow: var(--shadow-page);
            padding: 20mm;
            border-radius: 6px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .a4-page-landscape {
            width: 297mm;
            min-height: 210mm;
            margin: 0 auto;
            background: var(--bg-page);
            box-shadow: var(--shadow-page);
            padding: 18mm;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }
        /* Fix 8: Folio page (330mm x 216mm landscape) */
        .folio-page {
            width: 330mm;
            min-height: 216mm;
            margin: 0 auto;
            background: var(--bg-page);
            box-shadow: var(--shadow-page);
            padding: 14mm 16mm;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }

        /* ===== SIDEBAR ===== */
        aside {
            background-color: var(--bg-sidebar);
            border-right: 1px solid var(--sidebar-border);
            transition: background-color 0.3s ease;
        }
        .sidebar-header {
            background-color: var(--bg-sidebar-header);
            border-bottom: 1px solid var(--sidebar-border);
        }
        /* Sidebar collapse */
        aside#main-sidebar.sidebar-collapsed { width: 56px !important; transition: width 0.25s ease; }
        aside#main-sidebar { transition: width 0.25s ease; overflow: hidden; }
        aside#main-sidebar.sidebar-collapsed .sidebar-hide { display: none !important; }
        aside#main-sidebar.sidebar-collapsed nav p.menu-section-label { display: none !important; }
        aside#main-sidebar.sidebar-collapsed .app-footer { display: none !important; }
        aside#main-sidebar.sidebar-collapsed #sidebar-user-info { display: none !important; }
        /* Toggle buttons */
        aside#main-sidebar.sidebar-collapsed #sidebar-collapse-btn { display: none !important; }
        aside#main-sidebar.sidebar-collapsed #sidebar-expand-btn   { display: flex !important; }
        /* Base menu-label style */
        .menu-label { margin-left: 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* Hide label text when collapsed */
        aside#main-sidebar.sidebar-collapsed .menu-label { display: none !important; }
        aside#main-sidebar.sidebar-collapsed .menu-ext   { display: none !important; }
        /* Collapsed menu-link: icon centered */
        aside#main-sidebar.sidebar-collapsed .menu-link {
            justify-content: center !important;
            padding-left: 0 !important; padding-right: 0 !important;
            position: relative;
        }
        aside#main-sidebar.sidebar-collapsed .menu-link i.menu-icon { margin-right: 0 !important; }
        /* Draft badge: repositioned to top-right corner of icon */
        aside#main-sidebar.sidebar-collapsed .draft-badge {
            position: absolute !important;
            top: 3px !important; right: 4px !important;
            min-width: 14px !important; height: 14px !important;
            font-size: 8px !important; padding: 0 3px !important;
            line-height: 14px !important;
        }
        .sidebar-scroll::-webkit-scrollbar { width: 4px; }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background-color: var(--accent);
            border-radius: 4px;
        }
        .menu-link {
            color: var(--sidebar-text);
            transition: all 0.2s ease;
        }
        .menu-link:hover {
            background-color: rgba(5, 150, 105, 0.12);
            color: var(--sidebar-text);
        }
        .menu-link.active {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
        }
        .menu-section-label { color: var(--sidebar-text-muted); }

        /* ===== HEADER ===== */
        header {
            background-color: var(--bg-header);
            border-bottom: 1px solid var(--header-border);
            transition: background-color 0.3s ease;
        }

        /* ===== MAIN WORKSPACE ===== */
        main.workspace { background-color: var(--bg-main); transition: background-color 0.3s ease; }

        /* ===== INPUTS ===== */
        input:not([type="radio"]):not([type="checkbox"]),
        textarea, select {
            background-color: var(--bg-input);
            color: var(--text-primary);
            border-color: var(--border-input);
            transition: all 0.2s ease;
        }
        input:not([type="radio"]):not([type="checkbox"]):focus,
        textarea:focus, select:focus {
            background-color: var(--bg-input-focus);
            box-shadow: 0 0 0 3px rgba(139,94,60,0.15);
            border-color: var(--accent) !important;
            outline: none;
        }
        input.dashed-input {
            background: transparent;
            border: none;
            border-bottom: 1.5px dashed var(--border-input);
            border-radius: 0;
            padding-bottom: 2px;
        }
        input.dashed-input:focus {
            background: transparent;
            box-shadow: none;
            border-bottom-color: var(--accent) !important;
        }
        [data-theme="dark"] input.dashed-input { background: transparent; }

        /* ===== TABLES ===== */
        .data-table thead tr { background-color: var(--bg-table-head); }
        .data-table th { color: var(--text-secondary); border-color: var(--border-color); }
        .data-table td { border-color: var(--border-color); color: var(--text-primary); }
        .data-table tbody tr:hover { background-color: var(--bg-table-row-hover); }

        /* ===== BADGE ===== */
        .badge-brown {
            background-color: var(--accent-light);
            color: var(--accent);
            border: 1px solid var(--accent-light2);
        }
        [data-theme="dark"] .badge-brown {
            background-color: var(--accent-light);
            color: #e8a870;
            border-color: var(--accent-light2);
        }

        /* ===== BTN PRIMARY ===== */
        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            color: white;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }
        .btn-primary:active { transform: translateY(0); }

        /* ===== MODAL ===== */
        .modal-box {
            background-color: var(--modal-bg);
            border: 1px solid var(--modal-border);
        }
        .modal-header {
            background-color: var(--bg-table-head);
            border-bottom: 1px solid var(--border-color);
        }
        .modal-footer {
            background-color: var(--bg-table-head);
            border-top: 1px solid var(--border-color);
        }

        /* ===== TOAST ===== */
        @keyframes slideInRight {
            from { transform: translateX(110%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; transform: translateX(20px); }
        }
        .toast-enter { animation: slideInRight 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
        .toast-exit { animation: fadeOut 0.3s ease forwards; }

        /* ===== DARK MODE TOGGLE ===== */
        .toggle-track {
            width: 44px; height: 24px;
            background-color: var(--border-color);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .toggle-track.on { background-color: var(--accent); }
        .toggle-thumb {
            width: 18px; height: 18px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 3px; left: 3px;
            transition: transform 0.3s ease;
            box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        }
        .toggle-track.on .toggle-thumb { transform: translateX(20px); }

        /* ===== FORM FIELDS (doc level) ===== */
        .doc-input {
            width: 100%;
            border: none;
            border-bottom: 1.5px dashed var(--border-input);
            background: transparent;
            color: var(--text-primary);
            outline: none;
            padding-bottom: 2px;
            font-family: 'Roboto', sans-serif;
        }
        .doc-input:focus { border-bottom-color: var(--accent); }
        [data-theme="dark"] .a4-page,
        [data-theme="dark"] .a4-page-landscape {
            color: var(--text-primary);
        }

        /* ===== PRINT ===== */
        textarea { scrollbar-width: none; }
        textarea::-webkit-scrollbar { display: none; }
        .break-all { word-break: break-all; }

        @media print {
            body, .h-screen, .overflow-hidden, .overflow-y-auto {
                display: block !important;
                height: auto !important;
                overflow: visible !important;
                background: white !important;
            }
            .no-print { display: none !important; }
            .a4-page, .a4-page-landscape {
                margin: 0; box-shadow: none; padding: 10mm; width: 100%; min-height: auto;
                background: white !important; color: black !important;
            }
            /* RAB Multi-dokumen — saat print hanya doc-side yang tercetak */
            #rab-page-list    { display:none !important; }
            #rab-editor-topbar{ display:none !important; }
            #rab-panel        { display:none !important; }
            #rab-split-wrap   { display:block !important; }
            #rab-doc-side {
                width: 100% !important;
                padding: 6mm 8mm !important;
                min-height: auto !important;
                background: white !important;
                color: black !important;
            }
            #page-rab-belanja, #rab-page-editor { padding:0 !important; }
            .rab-compact-header { margin-bottom: 3mm !important; }
            .rab-compact-meta   { margin-bottom: 2mm !important; }
            /* Fix 6: SEMUA teks wajib hitam saat cetak */
            *, *::before, *::after { color: black !important; }
            input, textarea, select {
                border: none !important; background: transparent !important;
                resize: none !important; box-shadow: none !important;
                padding: 0 !important; color: black !important;
                -webkit-appearance: none;
            }
            select { appearance: none; }
            .print-table th, .print-table td { border: 1px solid #000 !important; word-break: break-word; }
            .print-table th { background-color: #e8e8e8 !important; -webkit-print-color-adjust: exact; color-adjust: exact; text-align: center !important; vertical-align: middle !important; }
            .print-table td { vertical-align: top !important; }
            /* Keterangan — hilangkan border saat cetak */
            #rab-doc-side .warning-box { border: none !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; color: #000 !important; }
            [contenteditable] { border: none !important; outline: none !important; background: transparent !important; }
            .doc-input { border: none !important; color: black !important; }
            .flatpickr-sigdate { border: none !important; color: black !important; background: transparent !important; padding: 0 !important; }
            .kop-divider { border-bottom: 2px solid #000 !important; }
            input[type="checkbox"], input[type="radio"] {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
                accent-color: black !important;
            }
            input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { display: inline-block; content: ''; }
            input[type="checkbox"] { appearance: checkbox !important; -webkit-appearance: checkbox !important; }
            input[type="radio"] { appearance: radio !important; -webkit-appearance: radio !important; }
            /* Sembunyikan semua halaman tab saat print */
            #page-surat-tugas,
            #page-ajuan,
            #page-settings { display:none !important; }
            /* RAB Perjalanan Dinas — cetak: sembunyikan list page, panel, topbar */
            #rabrd-page-list     { display:none !important; }
            #rabrd-editor-topbar { display:none !important; }
            #rabrd-panel         { display:none !important; }
            #rabrd-doc-side {
                width: 100% !important;
                padding: 6mm 8mm !important;
                min-height: auto !important;
                background: white !important;
                color: black !important;
            }
            #rabrd-ket-display { color: black !important; }
            .print-table-rd th, .print-table-rd td { border: 1px solid #000 !important; word-break: break-word; }
            .print-table-rd th { background-color: #e8e8e8 !important; -webkit-print-color-adjust: exact; color-adjust: exact; text-align: center !important; vertical-align: middle !important; }
            .print-table-rd td { vertical-align: top !important; padding-top: 5px !important; }
            /* RAB dan Surat Tugas A4/Folio dicetak via class normal jika halaman aktif */
            /* Default: semua print area tersembunyi */
            #st-print-area,
            #ajuan-print-area { display:none !important; }
            /* Hanya yang ditandai .printing yang aktif */
            #st-print-area.printing {
                display:block !important;
                font-family:'Roboto',sans-serif;
                font-size:10.5px; line-height:1.45; color:#000;
                padding:14mm 16mm;
            }
            #ajuan-print-area.printing {
                display:block !important;
                font-family:'Roboto',sans-serif;
                font-size:10.5px; line-height:1.45; color:#000;
                padding:14mm 16mm;
            }
            .kop-divider { border-bottom:2px solid #000 !important; }
        }

        /* ===== RADIO ACCENT ===== */
        input[type="radio"] { accent-color: var(--accent); }
        input[type="checkbox"] { accent-color: var(--accent); }

        /* ===== INFO BOX ===== */
        .info-box {
            background-color: var(--accent-light);
            border: 1px solid var(--accent-light2);
            color: var(--accent);
            border-radius: 8px;
            padding: 12px 14px;
        }
        [data-theme="dark"] .info-box { color: #e8a870; }

        /* ===== WARNING BOX ===== */
        .warning-box {
            background-color: #fefce8;
            border: 1px solid var(--color-warning-border);
            color: var(--color-warning);
        }
        [data-theme="dark"] .warning-box {
            background-color: #1c1500;
            border-color: #713f12;
            color: #fcd34d;
        }

        /* ===== DIVIDER ===== */
        .section-divider { border-color: var(--border-color); }

        /* ===== STAT CARD (sidebar) ===== */
        .stat-card {
            background-color: rgba(139,94,60,0.12);
            border: 1px solid rgba(139,94,60,0.2);
            border-radius: 8px;
            padding: 10px 12px;
        }

        /* ===== SETTINGS TABS ===== */
        .settings-tab-btn {
            border: none; cursor: pointer; font-family: 'Roboto', sans-serif;
            transition: all 0.2s ease; border-bottom: 2px solid transparent;
            border-radius: 8px 8px 0 0;
        }
        .settings-tab-btn:hover { opacity: 0.85; }

        /* ===== AJUAN SPLIT PANEL ===== */
        .ajuan-split {
            display: flex;
            gap: 0;
            height: 100%;
            min-height: calc(100vh - 64px);
        }
        /* Kiri: Form isian */
        .ajuan-form-panel {
            width: 380px;
            min-width: 340px;
            flex-shrink: 0;
            overflow-y: auto;
            padding: 1.25rem;
            border-right: 1px solid var(--border-color);
            background: var(--bg-page);
            transition: background-color 0.3s;
        }
        .ajuan-form-panel::-webkit-scrollbar { width: 4px; }
        .ajuan-form-panel::-webkit-scrollbar-thumb { background: var(--accent-light2); border-radius: 2px; }

        /* Kanan: Preview dokumen A4 */
        .ajuan-preview-panel {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem 1.5rem;
            background: var(--bg-main);
            transition: background-color 0.3s;
        }
        .ajuan-preview-panel::-webkit-scrollbar { width: 6px; }
        .ajuan-preview-panel::-webkit-scrollbar-thumb { background: var(--accent-light2); border-radius: 3px; }

        /* Form field group */
        .form-group { margin-bottom: 0.875rem; }
        .form-label {
            display: block; font-size: 11px; font-weight: 700;
            margin-bottom: 4px; color: var(--text-secondary);
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .form-input {
            width: 100%; padding: 8px 10px;
            border: 1px solid var(--border-input);
            border-radius: 8px; font-size: 13px;
            background: var(--bg-input); color: var(--text-primary);
            font-family: 'Roboto', sans-serif;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-input:focus {
            outline: none; border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(139,94,60,0.12);
        }
        .form-input-row { display: flex; gap: 6px; align-items: center; }
        .form-section-title {
            font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--text-muted);
            padding: 6px 0 4px; margin-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
            display: flex; align-items: center; gap: 6px;
        }
        .form-checkbox-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
        }
        .form-checkbox-item {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; cursor: pointer; padding: 3px 0;
        }
        .form-action-bar {
            display: flex; gap: 8px; margin-top: 1rem;
            padding-top: 0.875rem; border-top: 1px solid var(--border-color);
            position: sticky; bottom: 0;
            background: var(--bg-page); z-index: 2;
        }
        /* Preview A4 wrapper */
        .preview-a4 {
            width: 210mm; min-height: 297mm; margin: 0 auto;
            background: white; box-shadow: 0 4px 24px rgba(139,94,60,0.12);
            padding: 16mm 18mm; border-radius: 4px;
            font-size: 10.5px; line-height: 1.45; color: #000;
            font-family: 'Roboto', sans-serif;
        }
        .preview-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
        .preview-badge {
            display: inline-block; font-size: 9px; padding: 1px 6px;
            border-radius: 999px; font-weight: 700;
            background: var(--accent-light); color: var(--accent);
        }
        /* No-number input styling */
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }

        /* ===== MULTI-STEP MODAL (Surat Tugas) ===== */
        .mstep-bar {
            display: flex; align-items: center; gap: 0;
            padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border-color);
            background: var(--bg-table-head);
        }
        .mstep-item {
            display: flex; align-items: center; gap: 6px; flex: 1;
            font-size: 11px; font-weight: 600; color: var(--text-muted);
            position: relative; cursor: default;
        }
        .mstep-item.active  { color: var(--accent); }
        .mstep-item.done    { color: var(--text-muted); }
        .mstep-num {
            width: 22px; height: 22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; font-weight: 800; flex-shrink: 0;
            background: var(--border-color); color: var(--text-muted);
            transition: all 0.2s;
        }
        .mstep-item.active  .mstep-num { background: var(--accent); color: white; }
        .mstep-item.done    .mstep-num { background: #22c55e; color: white; }
        .mstep-line {
            flex: 1; height: 2px; background: var(--border-color);
            margin: 0 8px; border-radius: 1px; transition: background 0.3s;
        }
        .mstep-line.done { background: #22c55e; }

        .mstep-panel { display: none; }
        .mstep-panel.active { display: block; }

        /* Mini table inside modal */
        .mini-table { width: 100%; border-collapse: collapse; font-size: 11px; }
        .mini-table th { padding: 6px 8px; font-weight: 700; background: var(--bg-table-head);
            color: var(--text-secondary); border: 1px solid var(--border-color); }
        .mini-table td { padding: 5px 8px; border: 1px solid var(--border-color);
            color: var(--text-primary); vertical-align: middle; }

        /* Doc-type checkbox card */
        .doc-card {
            border: 1.5px solid var(--border-color); border-radius: 10px;
            padding: 10px 12px; margin-bottom: 8px;
            transition: border-color 0.2s, background 0.2s;
        }
        .doc-card:has(> .doc-card-hdr input:checked) {
            border-color: var(--accent); background: var(--accent-light);
        }
        .doc-card-hdr { display: flex; align-items: center; gap: 8px;
            font-weight: 700; font-size: 12px; margin-bottom: 6px; }
        .doc-sub-row { display: flex; align-items: center; gap: 6px;
            margin: 4px 0 4px 20px; font-size: 12px; flex-wrap: wrap; }

        /* Belanja checkbox label hover */
        .rab-cb-label {
            display: flex; align-items: center; gap: 8px;
            font-size: 12px; cursor: pointer;
            padding: 6px 8px; border-radius: 8px;
            transition: background 0.15s;
        }
        .rab-cb-label:hover { background: var(--accent-light); }

        /* ===== RAB SPLIT LAYOUT ===== */
        #rab-split-wrap {
            display: flex;
            gap: 0;
            align-items: flex-start;
            width: 100%;
            min-height: 100vh;
        }
        /* Dokumen folio di kiri — fluid, bukan fixed mm */
        #rab-doc-side {
            flex: 1;
            min-width: 0;
            padding: 20px 24px;
            background: var(--bg-page);
            min-height: 100vh;
        }
        /* Panel input di kanan */
        #rab-panel {
            width: 300px;
            flex-shrink: 0;
            background: var(--bg-page);
            border-left: 2px solid var(--border-color);
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 0;
            max-height: 100vh;
            overflow-y: auto;
            box-shadow: -4px 0 24px rgba(139,94,60,0.08);
            transition: background 0.3s;
        }
        #rab-panel-header {
            padding: 12px 14px 10px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            transition: background 0.2s;
        }
        #rab-panel-header.mode-edit {
            background: var(--color-warning-bg);
            border-bottom-color: var(--color-warning-border);
        }
        [data-theme="dark"] #rab-panel-header.mode-edit {
            background: #2a1f00;
            border-bottom-color: var(--color-warning);
        }
        #rab-panel-body { padding: 12px 14px; flex: 1; }
        #rab-panel-footer {
            padding: 10px 14px;
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            background: var(--bg-table-head);
        }
        /* Live total bar in panel */
        #rab-live-total {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 10px; border-radius: 8px; margin-top: 8px;
            background: var(--accent-light); border: 1px solid var(--accent-light2);
            font-size: 12px;
        }
        /* Quick-fill satuan chips */
        .satuan-chip {
            display: inline-flex; align-items: center; padding: 2px 8px;
            border-radius: 999px; font-size: 10px; font-weight: 600;
            cursor: pointer; border: 1.5px solid var(--border-input);
            background: transparent; color: var(--text-muted);
            transition: all 0.12s; font-family: 'Roboto', sans-serif;
            margin: 2px;
        }
        .satuan-chip:hover { border-color: var(--accent); color: var(--accent); }
        .satuan-chip.selected { background: var(--accent); color: white; border-color: var(--accent); }
        /* Highlighted table row (mode edit) */
        .rab-row-editing { background: var(--color-info-bg3) !important; outline: 2px solid var(--color-info-mid); outline-offset: -1px; }
        [data-theme="dark"] .rab-row-editing { background: #0c2a3a !important; outline-color: #38bdf8; }
        /* Compact print for RAB folio */
        .rab-compact-header { margin-bottom: 4mm; }
        .rab-compact-meta { margin-bottom: 3mm; }

        /* ===== HELP DRAWER ===== */
        #help-drawer-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.35);
            z-index: 500; opacity: 0; pointer-events: none;
            transition: opacity 0.25s ease;
        }
        #help-drawer-overlay.open { opacity: 1; pointer-events: all; }
        #help-drawer {
            position: fixed; top: 0; right: 0; bottom: 0;
            width: 420px; max-width: 95vw;
            background: var(--bg-page);
            box-shadow: -8px 0 40px rgba(0,0,0,0.2);
            z-index: 501; display: flex; flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        }
        #help-drawer.open { transform: translateX(0); }
        .help-drawer-header {
            padding: 16px 20px 12px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0; display: flex; align-items: center; gap: 10px;
            background: var(--bg-table-head);
        }
        .help-drawer-body {
            flex: 1; overflow-y: auto; padding: 0;
        }
        /* Accordion section */
        .hd-section { border-bottom: 1px solid var(--border-color); }
        .hd-section-btn {
            width: 100%; text-align: left; padding: 13px 20px;
            background: none; border: none; cursor: pointer;
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; font-weight: 700; color: var(--text-primary);
            font-family: 'Roboto', sans-serif; transition: background 0.15s;
        }
        .hd-section-btn:hover { background: var(--accent-light); }
        .hd-section-btn .hd-icon {
            width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
        }
        .hd-section-btn .hd-chevron {
            margin-left: auto; transition: transform 0.2s; font-size: 13px;
            color: var(--text-muted); flex-shrink: 0;
        }
        .hd-section-btn.active .hd-chevron { transform: rotate(180deg); }
        .hd-section-body {
            display: none; padding: 0 20px 14px;
            font-size: 12px; line-height: 1.7; color: var(--text-secondary);
        }
        .hd-section-body.open { display: block; }
        /* Step items */
        .hd-step {
            display: flex; gap: 10px; margin-bottom: 10px;
        }
        .hd-step-num {
            width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
            background: var(--accent); color: white; font-size: 10px;
            font-weight: 700; display: flex; align-items: center; justify-content: center;
            margin-top: 1px;
        }
        .hd-tip {
            background: var(--accent-light); border-left: 3px solid var(--accent);
            border-radius: 0 6px 6px 0; padding: 7px 10px;
            font-size: 11px; margin-top: 8px; color: var(--text-primary);
        }
        .hd-tip strong { color: var(--accent); }
        .hd-badge {
            display: inline-flex; align-items: center; padding: 1px 7px;
            border-radius: 999px; font-size: 10px; font-weight: 700;
            margin: 2px 2px;
        }
        .hd-badge-green  { background: var(--color-success-bg); color: #166534; }
        .hd-badge-yellow { background: var(--color-warning-bg); color: var(--color-warning); }
        .hd-badge-blue   { background: var(--color-info-bg2); color: var(--color-info); }
        .hd-badge-brown  { background: var(--accent-light); color: var(--accent); }

        /* ===== KALKULATOR VOLUME (RAB Perjalanan Dinas) ===== */
        #kalkvol-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.4);
            z-index: 400; display: flex; align-items: center; justify-content: center;
            padding: 1rem; backdrop-filter: blur(2px);
        }
        #kalkvol-box {
            background: var(--bg-page); border-radius: 16px;
            width: 100%; max-width: 420px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.25);
            overflow: hidden; display: flex; flex-direction: column;
            max-height: 90vh;
        }
        #kalkvol-box .kv-header {
            padding: 14px 16px 10px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        #kalkvol-box .kv-title {
            font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
            color: var(--color-success-mid); text-transform: uppercase;
            display: flex; align-items: center; gap: 6px;
        }
        #kalkvol-box .kv-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
        #kalkvol-box .kv-footer {
            padding: 12px 16px; border-top: 1px solid var(--border-color);
            display: flex; gap: 8px; flex-shrink: 0;
        }
        .kv-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }
        .kv-input {
            width: 100%; padding: 7px 10px; border-radius: 8px;
            border: 1.5px solid var(--border-input); background: var(--bg-input);
            color: var(--text-primary); font-size: 12px;
            font-family: 'Roboto', sans-serif; outline: none;
            transition: border-color 0.15s;
        }
        .kv-input:focus { border-color: var(--color-success-mid); }
        .kv-dim-wrap {
            display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
        }
        .kv-dim-num {
            width: 64px; padding: 7px 8px; border-radius: 8px; text-align: center;
            border: 1.5px solid var(--border-input); background: var(--bg-input);
            color: var(--text-primary); font-size: 13px; font-weight: 600;
            font-family: 'Roboto', sans-serif; outline: none; flex-shrink: 0;
        }
        .kv-dim-num:focus { border-color: var(--color-success-mid); }
        .kv-dim-sel {
            padding: 7px 8px; border-radius: 8px;
            border: 1.5px solid var(--border-input); background: var(--bg-input);
            color: var(--text-primary); font-size: 12px; font-weight: 600;
            font-family: 'Roboto', sans-serif; outline: none; flex-shrink: 0;
            width: 72px; cursor: pointer;
        }
        .kv-dim-sel:focus { border-color: var(--color-success-mid); }
        .kv-times { font-size: 14px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
        .kv-preview {
            background: #f0fdf4; border: 1.5px solid var(--color-success-border);
            border-radius: 10px; padding: 10px 14px;
            text-align: center; font-size: 13px; font-weight: 700;
            color: var(--color-success-mid); margin-bottom: 12px;
        }
        [data-theme="dark"] .kv-preview { background: #052e16; border-color: #166534; }
        .kv-result-desc {
            background: #f0fdf4; border: 1.5px solid var(--color-success-border);
            border-radius: 8px; padding: 8px 12px;
            font-size: 11px; color: #166534;
            min-height: 34px; margin-bottom: 12px;
            font-style: italic;
        }
        [data-theme="dark"] .kv-result-desc { background: #052e16; border-color: #166534; color: #4ade80; }
        .kv-section-label {
            font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--text-muted);
            margin-bottom: 6px;
        }
        .kv-template-btn {
            width: 100%; text-align: left; padding: 9px 12px;
            border-radius: 8px; border: 1.5px solid var(--border-input);
            background: var(--bg-input); color: var(--text-primary);
            font-size: 12px; font-weight: 500; cursor: pointer;
            font-family: 'Roboto', sans-serif; margin-bottom: 6px;
            transition: all 0.12s; display: flex; align-items: center; gap: 8px;
        }
        .kv-template-btn:hover { border-color: var(--color-success-mid); background: #f0fdf4; color: var(--color-success-mid); }
        [data-theme="dark"] .kv-template-btn:hover { background: #052e16; }
        .kv-template-btn.active { border-color: var(--color-success-mid); background: #f0fdf4; color: var(--color-success-mid); font-weight: 700; }
        [data-theme="dark"] .kv-template-btn.active { background: #052e16; }
        .kv-template-tag { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--color-success-bg); color: #166534; flex-shrink: 0; }
        /* Location section — muncul setelah pilih template */
        #kv-loc-section { display:none; }
        #kv-loc-section.visible { display:block; }
        /* Route inputs (Transport) */
        .kv-route-wrap { display:flex; align-items:center; gap:6px; }
        .kv-route-wrap .kv-input { flex:1; }
        .kv-route-arrow { font-size:16px; color:var(--text-muted); flex-shrink:0; font-weight:700; }
        /* Province select */
        #kv-provinsi {
            width:100%; padding:8px 10px; border-radius:8px;
            border:1.5px solid var(--border-input); background:var(--bg-input);
            color:var(--text-primary); font-size:12px;
            font-family:'Roboto',sans-serif; outline:none;
            transition:border-color 0.15s;
        }
        #kv-provinsi:focus { border-color:var(--color-success-mid); }
        /* Location label icon */
        .kv-loc-label {
            font-size:11px; font-weight:700; color:var(--text-secondary);
            margin-bottom:6px; display:flex; align-items:center; gap:5px;
        }
        /* Divider tipis */
        .kv-divider { height:1px; background:var(--border-color); margin:10px 0; }

        /* ===== SEARCH & FILTER BAR ===== */
        .search-bar {
            display:flex; align-items:center; gap:8px;
            padding:8px 12px; border-radius:10px;
            border:1px solid var(--border-input);
            background:var(--bg-input); margin-bottom:12px;
        }
        .search-bar input {
            border:none; background:transparent; outline:none;
            font-size:12px; color:var(--text-primary); flex:1;
            font-family:'Roboto',sans-serif;
        }
        .search-bar input::placeholder { color:var(--text-muted); }
        .filter-chip {
            display:inline-flex; align-items:center; gap:4px;
            padding:3px 10px; border-radius:999px; font-size:11px;
            font-weight:600; cursor:pointer; border:1.5px solid var(--border-input);
            background:transparent; color:var(--text-muted);
            font-family:'Roboto',sans-serif; transition:all 0.15s;
        }
        .filter-chip.active { background:var(--accent); color:white; border-color:var(--accent); }
        .filter-chip:hover:not(.active) { border-color:var(--accent); color:var(--accent); }

        /* ===== DRAFT BADGE (sidebar notification) ===== */
        .draft-badge {
            display:inline-flex; align-items:center; justify-content:center;
            min-width:16px; height:16px; padding:0 4px;
            border-radius:999px; font-size:9px; font-weight:800;
            background:var(--color-danger); color:white; margin-left:auto; flex-shrink:0;
        }

        /* ===== PREVIEW MODAL ===== */
        .preview-modal-overlay {
            position:fixed; inset:0; background:rgba(0,0,0,0.5);
            display:flex; align-items:center; justify-content:center;
            z-index:300; padding:1rem; backdrop-filter:blur(4px);
        }
        .preview-modal-box {
            background:white; border-radius:12px; overflow:hidden;
            width:100%; max-width:680px; max-height:90vh;
            display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,0.3);
        }
        .preview-modal-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:12px 16px; border-bottom:1px solid var(--color-disabled-bg);
            background:#f9fafb; flex-shrink:0;
        }
        .preview-iframe-wrap {
            flex:1; overflow:auto; padding:16px; background:#f3f4f6;
        }
        .preview-doc {
            width:210mm; min-height:100mm; margin:0 auto;
            background:white; padding:14mm 16mm;
            font-size:10.5px; line-height:1.45;
            font-family:'Roboto',sans-serif; color:#000;
            box-shadow:0 4px 16px rgba(0,0,0,0.12); border-radius:2px;
        }

        /* ===== QUOTA WARNING BAR ===== */
        .quota-bar {
            display:flex; align-items:center; gap:8px;
            padding:6px 12px; border-radius:8px; font-size:11px;
            background:var(--color-warning-bg); color:var(--color-warning); border:1px solid var(--color-warning-border);
            margin-bottom:8px;
        }

        /* ===== AJUAN TABLE ===== */
        #ajuan-table-body tr:hover,
        #st-table-body tr:hover { background-color: var(--bg-table-row-hover) !important; }

        /* ===== SCROLLBAR MAIN ===== */
        .workspace::-webkit-scrollbar { width: 6px; }
        .workspace::-webkit-scrollbar-thumb {
            background-color: var(--accent-light2);
            border-radius: 3px;
        }

        /* ===== FLATPICKR DARK ===== */
        [data-theme="dark"] .flatpickr-calendar {
            background: #1e130a;
            border-color: #3a2010;
            color: #f0ddd0;
        }
        [data-theme="dark"] .flatpickr-day { color: #f0ddd0; }
        [data-theme="dark"] .flatpickr-day.selected { background: var(--accent); border-color: var(--accent); }

        /* ===== CONTENT EDITABLE ===== */
        [contenteditable]:focus { outline: 1px dashed var(--accent); border-radius: 2px; }

        /* ===== UNDER CONSTRUCTION ===== */
        .dev-placeholder {
            background: linear-gradient(135deg, var(--accent-light), var(--bg-page));
            border: 2px dashed var(--accent-light2);
            border-radius: 16px;
        }

        /* ===== FOOTER ===== */
        .app-footer {
            background-color: var(--bg-sidebar-header);
            border-top: 1px solid var(--sidebar-border);
            color: var(--sidebar-text-muted);
        }

        /* ── Aside base: tampil di desktop, hidden di mobile ── */
        aside#main-sidebar {
            width: 256px;
            display: flex;
            flex-direction: column;
        }

        /* ═══════════════════════════════════════════════════════════
           ║  RESPONSIVE — TABLET & MOBILE
           ═══════════════════════════════════════════════════════════ */

        /* Mobile overlay backdrop saat sidebar terbuka */
        #mobile-sidebar-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 39;
            opacity: 0;
            transition: opacity 0.25s;
        }
        #mobile-sidebar-overlay.open {
            display: block;
            opacity: 1;
        }

        /* Editor tab switcher (mobile only) */
        .editor-tab-switcher {
            display: none;
            position: sticky; top: 0; z-index: 30;
            background: var(--bg-header);
            border-bottom: 1px solid var(--header-border);
            padding: 6px 8px; gap: 6px;
        }
        .editor-tab-switcher button {
            flex: 1; padding: 8px 12px; border-radius: 8px;
            border: none; cursor: pointer; font-size: 12px; font-weight: 600;
            background: var(--bg-page); color: var(--text-secondary);
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: all 0.15s; font-family: 'Roboto', sans-serif;
        }
        .editor-tab-switcher button.active {
            background: var(--accent); color: white;
        }

        /* ═══════════════════════════════════════════════════════════
           DARK MODE OVERRIDES — Pass 1
           Target: elemen dengan class/ID yang diketahui punya inline style hardcode.
           Menggunakan !important karena melawan inline style.
           ═══════════════════════════════════════════════════════════ */
        [data-theme="dark"] {

            /* ── Status badge / pill (Ajuan, ST, Dashboard) ── */
            .dash-badge.draft,
            [class*="badge"][style*="#fef9c3"],
            [class*="badge"][style*="#fffbeb"],
            [class*="badge"][style*="#fef3c7"] {
                background: var(--color-warning-bg) !important;
                color: var(--color-warning) !important;
                border-color: var(--color-warning-border) !important;
            }
            .dash-badge.submit,
            [class*="badge"][style*="#dcfce7"],
            [class*="badge"][style*="#d1fae5"] {
                background: var(--color-success-bg) !important;
                color: var(--color-success) !important;
            }
            .dash-badge.resubmit,
            [class*="badge"][style*="#dbeafe"],
            [class*="badge"][style*="#eff6ff"],
            [class*="badge"][style*="#e0f2fe"] {
                background: var(--color-info-bg2) !important;
                color: var(--color-info) !important;
            }

            /* ── Warning / submitted banner ── */
            #rabs-submitted-warning > div,
            #rabh-submitted-warning > div,
            #rab-submitted-warning > div,
            #rabrd-submitted-warning > div,
            #ajuan-submitted-warning > div,
            [id$="-submitted-warning"] > div {
                background: var(--color-warning-bg) !important;
                border-color: var(--color-warning-border) !important;
                color: var(--color-warning) !important;
            }

            /* ── Danger / block warning modal content ── */
            [style*="background:#fef2f2"],
            [style*="background: #fef2f2"],
            [style*="background:#fee2e2"],
            [style*="background: #fee2e2"] {
                background: var(--color-danger-bg) !important;
                border-color: var(--color-danger-border) !important;
            }
            [style*="color:#991b1b"],
            [style*="color: #991b1b"],
            [style*="color:#b91c1c"],
            [style*="color: #b91c1c"],
            [style*="color:#dc2626"],
            [style*="color: #dc2626"] {
                color: var(--color-danger-dark) !important;
            }

            /* ── Success / green highlight ── */
            [style*="background:#dcfce7"],
            [style*="background: #dcfce7"],
            [style*="background:#d1fae5"],
            [style*="background: #d1fae5"] {
                background: var(--color-success-bg) !important;
            }
            [style*="color:#15803d"],
            [style*="color: #15803d"],
            [style*="color:#166534"],
            [style*="color: #166534"],
            [style*="color:#065f46"],
            [style*="color: #065f46"] {
                color: var(--color-success) !important;
            }

            /* ── Info / blue highlight ── */
            [style*="background:#eff6ff"],
            [style*="background: #eff6ff"],
            [style*="background:#dbeafe"],
            [style*="background: #dbeafe"],
            [style*="background:#e0f2fe"],
            [style*="background: #e0f2fe"] {
                background: var(--color-info-bg2) !important;
            }
            [style*="color:#1e40af"],
            [style*="color: #1e40af"],
            [style*="color:#0369a1"],
            [style*="color: #0369a1"] {
                color: var(--color-info) !important;
            }

            /* ── Warning / yellow highlight ── */
            [style*="background:#fef9c3"],
            [style*="background: #fef9c3"],
            [style*="background:#fffbeb"],
            [style*="background: #fffbeb"],
            [style*="background:#fef3c7"],
            [style*="background: #fef3c7"] {
                background: var(--color-warning-bg) !important;
            }
            [style*="color:#854d0e"],
            [style*="color: #854d0e"],
            [style*="color:#78350f"],
            [style*="color: #78350f"],
            [style*="color:#92400e"],
            [style*="color: #92400e"] {
                color: var(--color-warning) !important;
            }

            /* ── Purple highlight ── */
            [style*="background:#f3e8ff"],
            [style*="background: #f3e8ff"] {
                background: var(--color-purple-bg) !important;
            }
            [style*="color:#6b21a8"],
            [style*="color: #6b21a8"],
            [style*="color:#7c3aed"],
            [style*="color: #7c3aed"] {
                color: var(--color-purple) !important;
            }

            /* ── Neutral light backgrounds ── */
            [style*="background:#f1f5f9"],
            [style*="background: #f1f5f9"],
            [style*="background:#f8fafc"],
            [style*="background: #f8fafc"] {
                background: var(--color-neutral-bg) !important;
            }

            /* ── Dashboard stat cards ── */
            .dash-progress-fill.full  { background: var(--color-success-mid) !important; }
            .dash-progress-fill.half  { background: var(--color-warning-accent) !important; }
            .dash-progress-fill.none  { background: var(--color-neutral-border) !important; }
            .dash-progress-count.full { color: var(--color-success-mid) !important; }
            .dash-progress-count.half { color: var(--color-warning-accent) !important; }

            /* ── RAB rekap tabel ── */
            #rekap-table [style*="background:#f1f5f9"],
            #rekap-table [style*="background: #f1f5f9"],
            .rekap-table  [style*="background:#f1f5f9"] {
                background: var(--bg-table-head) !important;
                color: var(--text-primary) !important;
            }

            /* ── Help Drawer badges ── */
            .hd-badge-green  {
                background: var(--color-success-bg) !important;
                color: var(--color-success) !important;
                border-color: var(--color-success-border) !important;
            }
            .hd-badge-yellow {
                background: var(--color-warning-bg) !important;
                color: var(--color-warning) !important;
            }

            /* ── hd-tip ── */
            .hd-tip {
                background: var(--color-warning-bg) !important;
                border-color: var(--color-warning-border) !important;
                color: var(--color-warning) !important;
            }

            /* ── hd-step number ── */
            .hd-step-num {
                background: var(--color-neutral-bg) !important;
                color: var(--text-secondary) !important;
            }

            /* ── Onboarding / splash info boxes ── */
            #onboarding-modal [style*="background:#dcfce7"],
            #onboarding-modal [style*="background:#fee2e2"],
            #onboarding-modal [style*="background:#dbeafe"],
            #onboarding-modal [style*="background:#fef9c3"] {
                background: var(--bg-table-head) !important;
            }

            /* ── Storage usage bar di Sampah ── */
            #storage-usage-bar > div[style*="#16a34a"],
            #storage-usage-bar > div[style*="#f59e0b"],
            #storage-usage-bar > div[style*="#dc2626"] {
                /* warna bar tetap — semantik progress bar tetap terlihat */
            }

            /* ── Pass 3: Disabled state ── */
            [style*="background:#e5e7eb"],
            [style*="background: #e5e7eb"] {
                background: var(--color-disabled-bg) !important;
                color: var(--color-disabled-text) !important;
                border-color: var(--color-disabled-border) !important;
            }

            /* ── Pass 3: Violet / purple ── */
            [style*="background:#f5f3ff"],
            [style*="background: #f5f3ff"],
            [style*="background:#ede9fe"],
            [style*="background: #ede9fe"] {
                background: var(--color-violet-bg) !important;
            }
            [style*="color:#5b21b6"],
            [style*="color: #5b21b6"],
            [style*="color:#8b5cf6"],
            [style*="color: #8b5cf6"] {
                color: var(--color-violet) !important;
            }

            /* ── Pass 3: Edit badge (RAB, RABRD) ── */
            #rab-edit-badge, #rabrd-edit-badge {
                background: var(--color-edit-badge-bg) !important;
                color: var(--color-edit-badge-text) !important;
            }

            /* ── Pass 3: Warn soft bg ── */
            [style*="background:#fff8f8"],
            [style*="background: #fff8f8"] {
                background: var(--color-warn-soft-bg) !important;
            }

            /* ── Pass 3: Google Drive info box ── */
            #rab-gdrive-info {
                background: var(--color-info-bg2) !important;
                color: var(--color-info) !important;
            }
            [style*="color:#1a56db"],
            [style*="color: #1a56db"] {
                color: var(--color-gdrive) !important;
            }

            /* ── Pass 3: IR card icon (muted) ── */
            [style*="color:#64748b"],
            [style*="color: #64748b"] {
                color: var(--text-muted) !important;
            }

            /* ── Pass 3: Dash stat rose ── */
            .dash-stat-card.rose::before { background: var(--color-rose) !important; }
            .dash-stat-value.rose         { color: var(--color-rose) !important; }

            /* ── Pass 3: Dash tdot purple ── */
            .dash-tdot.purple {
                background: var(--color-violet-bg) !important;
                color: var(--color-violet) !important;
            }

            /* ── Pass 3: Dash quick icon purple ── */
            .dash-quick-icon[style*="background:#f5f3ff"] {
                background: var(--color-violet-bg) !important;
            }
            .dash-quick-icon i[style*="color:#8b5cf6"] {
                color: var(--color-violet) !important;
            }

            /* ── Pass 3: Onboarding text muted brown ── */
            [style*="color:#8b7355"],
            [style*="color: #8b7355"] {
                color: var(--text-secondary) !important;
            }

            /* ── Pass 3: accent brown (tombol Final RAB) ── */
            [style*="color:#8b5e3c"] { color: var(--accent) !important; }

            /* ── Pass 3: fef08a edit badge ── */
            [style*="background:#fef08a"],
            [style*="background: #fef08a"] {
                background: var(--color-edit-badge-bg) !important;
                color: var(--color-edit-badge-text) !important;
            }

            /* ── Pass 3: success light (ir-header-row, info icon) ── */
            [style*="color:#6ee7b7"],
            [style*="color: #6ee7b7"] {
                color: var(--color-success-dark) !important;
            }

            /* ── Pass 3: 9ca3af (disabled text) ── */
            [style*="color:#9ca3af"],
            [style*="color: #9ca3af"] {
                color: var(--color-disabled-text) !important;
            }
            [style*="color:#ef4444"] { color: var(--color-danger) !important; }

            /* ── MacOS-style dot buttons di KOP ── */
            [style*="background:#ff5f57"] { background: #ff5f57 !important; }
            [style*="background:#febc2e"] { background: #febc2e !important; }
            [style*="background:#28c840"] { background: #28c840 !important; }

            /* ── Tag/chip filter Ajuan ── */
            [style*="background:#fef9c3"][style*="border"] {
                background: var(--color-warning-bg) !important;
                border-color: var(--color-warning-border) !important;
                color: var(--color-warning) !important;
            }

            /* ── Rekapitulasi rekap nilai 0 (opacity rendah) ── */
            .rekap-zero { opacity: 0.5; }
        }

        /* ═══ TABLET & MOBILE (< 1024px) ═══ */
        @media (max-width: 1023px) {
            /* Sidebar: hidden by default, jadi off-canvas drawer */
            aside#main-sidebar {
                position: fixed !important;
                top: 0; left: 0; bottom: 0;
                width: 260px !important;
                z-index: 40;
                transform: translateX(-100%);
                transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 4px 0 24px rgba(0,0,0,0.15);
                display: flex !important;
            }
            aside#main-sidebar.mobile-open {
                transform: translateX(0) !important;
            }

            /* Sidebar saat mode collapsed di mobile: tetap drawer width normal */
            aside#main-sidebar.sidebar-collapsed {
                width: 260px !important;
            }
            aside#main-sidebar.sidebar-collapsed .sidebar-hide { display: block !important; }
            aside#main-sidebar.sidebar-collapsed .menu-label   { display: inline !important; }
            aside#main-sidebar.sidebar-collapsed nav p.menu-section-label { display: block !important; }
            aside#main-sidebar.sidebar-collapsed .app-footer { display: block !important; }
            aside#main-sidebar.sidebar-collapsed #sidebar-user-info { display: block !important; }
            aside#main-sidebar.sidebar-collapsed .menu-link {
                justify-content: flex-start !important;
                padding-left: 12px !important; padding-right: 12px !important;
            }
            aside#main-sidebar.sidebar-collapsed .menu-link i.menu-icon {
                margin-right: 12px !important;
            }
            aside#main-sidebar.sidebar-collapsed .draft-badge {
                position: static !important;
                top: auto !important; right: auto !important;
            }

            /* Main content full width */
            main, .main-content {
                width: 100% !important;
                margin-left: 0 !important;
            }

            /* Header */
            header { padding: 0 12px !important; }
            #header-title       { font-size: 13px !important; }
            #header-subtitle    { font-size: 9px !important; line-height: 1.3 !important; }
            #live-datetime      { display: none !important; }
            #header-sidebar-toggle {
                width: 38px !important; height: 38px !important;
            }
            /* Tombol header lebih kompak */
            header .flex.items-center.gap-2 > button:not(#header-sidebar-toggle) {
                padding: 6px 8px !important;
            }
            header .flex.items-center.gap-2 .toggle-track,
            header [onclick="toggleDarkMode()"] {
                transform: scale(0.85);
            }
        }

        /* ═══ MOBILE ONLY (< 768px) ═══ */
        @media (max-width: 767px) {
            /* Header: kompak */
            header { height: 54px !important; }
            #header-subtitle { display: none !important; }
            header .hidden.sm\\:inline { display: none !important; }

            /* Button bantuan di header — show icon only */
            header [onclick="openHelpDrawer()"] span { display: none !important; }
            header [onclick="openHelpDrawer()"] {
                padding: 7px !important; width: 36px; height: 36px;
                justify-content: center !important;
            }

            /* Sidebar drawer lebih sempit di mobile */
            aside { width: 84vw !important; max-width: 280px; }

            /* ───── HALAMAN DAFTAR ───── */
            /* Ajuan/ST/RAB list page heading */
            #rab-page-list, #rabrd-page-list,
            #page-ajuan, #page-surat-tugas, #page-settings {
                padding: 12px !important;
            }
            /* Search & filter stack vertikal */
            #rab-page-list > div:nth-child(2),
            #rabrd-page-list > div:nth-child(2) {
                flex-direction: column !important;
                align-items: stretch !important;
            }
            #rab-page-list .search-bar,
            #rabrd-page-list .search-bar {
                min-width: 0 !important; width: 100% !important;
            }
            /* Filter chips: row scroll */
            #rab-page-list .filter-chip,
            #rabrd-page-list .filter-chip {
                font-size: 11px !important;
                padding: 5px 10px !important;
            }
            /* Header daftar stack */
            #rab-page-list > div:first-child,
            #rabrd-page-list > div:first-child {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 10px !important;
            }
            #rab-page-list > div:first-child > div:last-child,
            #rabrd-page-list > div:first-child > div:last-child {
                flex-wrap: wrap;
            }
            /* Tabel daftar: scroll horizontal smooth */
            #rab-page-list > div:last-child,
            #rabrd-page-list > div:last-child {
                -webkit-overflow-scrolling: touch;
            }
            #rab-list-body td,
            #rabrd-list-body td {
                padding: 8px !important; font-size: 11px !important;
            }

            /* ───── EDITOR RAB & RAB PD: TAB SWITCHER ───── */
            #rab-page-editor, #rabrd-page-editor {
                min-height: calc(100vh - 54px) !important;
            }
            /* Tampilkan tab switcher di mobile */
            .editor-tab-switcher { display: flex !important; }

            /* Split layout: stack jadi tab — sembunyikan via class */
            #rab-page-editor [style*="display:flex"][style*="align-items:flex-start"],
            #rabrd-page-editor [style*="display:flex"][style*="align-items:flex-start"] {
                flex-direction: column !important;
                min-height: auto !important;
            }
            /* Default: show doc, hide panel */
            #rab-doc-side, #rabrd-doc-side {
                width: 100% !important;
                padding: 12px !important;
                min-height: auto !important;
            }
            #rab-panel, #rabrd-panel {
                width: 100% !important;
                position: static !important;
                max-height: none !important;
                border-left: none !important;
                border-top: 2px solid var(--border-color) !important;
            }
            /* Mode: tab-doc → show doc, hide panel */
            body.mob-tab-doc #rab-panel,
            body.mob-tab-doc #rabrd-panel { display: none !important; }
            /* Mode: tab-panel → show panel, hide doc */
            body.mob-tab-panel #rab-doc-side,
            body.mob-tab-panel #rabrd-doc-side { display: none !important; }

            /* Editor topbar lebih kompak */
            #rab-editor-topbar, #rabrd-editor-topbar {
                flex-wrap: wrap; gap: 8px !important; padding: 8px 12px !important;
            }
            #rab-editor-topbar > div:first-child,
            #rabrd-editor-topbar > div:first-child {
                width: 100%; min-width: 0;
            }
            #rab-editor-topbar > div:last-child,
            #rabrd-editor-topbar > div:last-child {
                width: 100%; justify-content: flex-end;
                flex-wrap: wrap; gap: 6px !important;
            }
            #rab-editor-topbar > div:last-child button,
            #rabrd-editor-topbar > div:last-child button {
                padding: 6px 10px !important; font-size: 11px !important;
            }
            #rab-editor-topbar > div:last-child button span,
            #rabrd-editor-topbar > div:last-child button span {
                font-size: 11px !important;
            }

            /* KOP responsive */
            #rab-doc-side .kop-divider,
            #rabrd-doc-side div[style*="kop"] {
                flex-direction: column !important;
                gap: 6px !important; padding: 6px !important;
            }
            #rab-doc-side .kop-divider img,
            #rabrd-doc-side img[alt="Logo BRIN"] {
                height: 32px !important;
            }
            #rab-doc-side .kop-divider > div[style*="text-align:center"],
            #rabrd-doc-side div[style*="text-align:center"][style*="font-weight:800"] {
                font-size: 10px !important;
            }

            /* Tabel rincian: scroll horizontal, font lebih kecil */
            #rab-doc-side table.print-table,
            #rabrd-doc-side table.print-table-rd {
                font-size: 9.5px !important;
                min-width: 800px;
            }
            #rab-doc-side table.print-table th,
            #rab-doc-side table.print-table td,
            #rabrd-doc-side table.print-table-rd th,
            #rabrd-doc-side table.print-table-rd td {
                padding: 4px !important;
            }

            /* Panel form */
            #rab-panel .space-y-3 > div,
            #rabrd-panel .space-y-3 > div {
                font-size: 12px !important;
            }
            #rab-panel input, #rab-panel select, #rab-panel textarea,
            #rabrd-panel input, #rabrd-panel select, #rabrd-panel textarea {
                font-size: 13px !important;
                padding: 8px 10px !important;
            }
            #rab-panel label, #rabrd-panel label {
                font-size: 11px !important;
            }
            #rab-panel-footer, #rabrd-panel .py-2\\.5 {
                padding: 12px 14px !important;
            }

            /* TTD area */
            #rab-doc-side > div[style*="justify-content:flex-end"],
            #rabrd-doc-side > div[style*="justify-content:flex-end"] {
                justify-content: center !important;
            }

            /* ───── MODAL RESPONSIVE ───── */
            #kalkvol-box, #help-drawer {
                width: 95vw !important; max-width: none !important;
            }
            #help-drawer { width: 100vw !important; }

            #print-preview-overlay > div {
                max-width: 100vw !important;
                height: 100vh !important;
                border-radius: 0 !important;
            }
            #print-preview-overlay { padding: 0 !important; }

            /* Settings modal */
            #settings-modal > div { max-width: 95vw !important; max-height: 90vh !important; }
            #am-modal > div, #st-modal > div { max-width: 95vw !important; max-height: 90vh !important; }

            /* Toast position */
            #toast { bottom: 16px !important; left: 16px !important; right: 16px !important; }

            /* Stat cards: kompak */
            .stat-card { padding: 6px !important; }

            /* ── Modal ST footer — mobile responsive ── */
            #st-modal .modal-footer { padding: 10px 14px !important; gap: 6px !important; }
            #st-modal .modal-footer #st-btn-back { font-size: 11px !important; padding: 7px 10px !important; }
            #st-modal .modal-footer button { font-size: 11px !important; padding: 7px 10px !important; }
            #st-modal .modal-footer .btn-primary { font-size: 11px !important; }
            /* Sembunyikan teks opsional di mobile — sisakan ikon + kata kunci */
            .mob-hide-inline { display: none; }

            /* ── Print Preview header — mobile responsive ── */
            #print-preview-overlay > div { border-radius: 12px !important; height: 95vh !important; }
            .print-preview-actions { width: 100%; justify-content: flex-end !important; gap: 6px !important; }
            #print-tte-multi-wrap { gap: 8px !important; padding: 4px 8px !important; }
            #print-tte-multi-wrap label span:first-child { font-size: 10px !important; }

            /* ── RAB Honor form — mobile responsive ── */
            /* 4 kolom (Tanggal Mulai|Akhir|Hari|Satuan) → 2 kolom */
            #page-rab-honor [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
                grid-template-columns: 1fr 1fr !important;
            }
            /* 3 kolom (Header: Judul|Ketua|Sumber Dana) → 1 kolom */
            #page-rab-honor [style*="grid-template-columns:1fr 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* 2 kolom (Nama|Uraian, Harga|Total) → 1 kolom */
            #page-rab-honor [style*="grid-template-columns:1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* ── RAB Jasa & Sewa (RABS) — mobile responsive ── */
            /* Topbar: wrap tombol ke baris baru */
            #rabs-editor-topbar {
                flex-wrap: wrap; gap: 8px !important; padding: 8px 12px !important;
            }
            #rabs-editor-topbar > div:first-child { width: 100%; min-width: 0; }

            /* Header dokumen: 3 kolom → 1 kolom */
            #page-rab-jasa [style*="grid-template-columns:1fr 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* Form item Qty/Satuan/Harga/Total: 4 kolom → 2 kolom */
            #page-rab-jasa [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
                grid-template-columns: 1fr 1fr !important;
            }

            /* Tabel item RABS: scroll horizontal */
            #rabs-items-table { font-size: 10px !important; min-width: 520px; }
            #page-rab-jasa .table-wrapper,
            #page-rab-jasa [style*="overflow-x"] { overflow-x: auto !important; }

            /* Wrapper tabel agar bisa scroll */
            #rabs-items-table { display: block; overflow-x: auto; }

            /* Sub-jenis inline select: full width di mobile */
            #rabs-sub-jenis-select-inline { width: 100% !important; font-size: 12px !important; }

            /* Footer simpan RABS: full width button */
            #page-rab-jasa [style*="justify-content:flex-end"] {
                justify-content: stretch !important;
            }
            #page-rab-jasa [style*="justify-content:flex-end"] button {
                width: 100% !important; justify-content: center !important;
            }

            /* ── RAB Pengadaan — form panel grid (5 kolom) ── */
            /* Grid 5 kolom referensi link → 1 kolom */
            #rab-panel [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* Grid 1fr auto 1fr (referensi preview) → 1 kolom */
            #rab-panel [style*="grid-template-columns:1fr auto 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* Grid 1fr 220px (nama + merek) → 1 kolom */
            #rab-panel [style*="grid-template-columns:1fr 220px"] {
                grid-template-columns: 1fr !important;
            }
            /* Grid 1fr 1fr (qty + satuan) → 1 kolom */
            #rab-panel [style*="grid-template-columns:1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }

            /* ── RAB Perjadin — meta grid (100px 10px 1fr) → stack ── */
            #rabrd-doc-side [style*="grid-template-columns:100px 10px 1fr"] {
                grid-template-columns: auto auto 1fr !important;
                font-size: 10px !important;
            }
        }

        /* ═══ TABLET ONLY (768px - 1023px) ═══ */
        @media (min-width: 768px) and (max-width: 1023px) {
            /* Header: tampilkan judul */
            #header-title { font-size: 14px !important; }
            /* Stack editor tetap split, tapi panel lebih sempit */
            #rab-panel, #rabrd-panel { width: 260px !important; }
            /* Tabel rincian: scroll horizontal kalau perlu */
            #rab-doc-side table.print-table,
            #rabrd-doc-side table.print-table-rd {
                font-size: 10px !important;
            }
        }


/* ════════════════════════════════════════════════
 * PWA Update Notification Toast (Sub-sesi 3B)
 * ════════════════════════════════════════════════ */
.pwa-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 94, 60, 0.18);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(46, 26, 15, 0.18), 0 2px 6px rgba(46, 26, 15, 0.08);
    max-width: 380px;
    font-family: 'Roboto', sans-serif;
    animation: pwaSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .pwa-toast {
    background: rgba(46, 26, 15, 0.92);
    border-color: rgba(245, 237, 230, 0.12);
    color: #f5ede6;
}
@keyframes pwaSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.pwa-toast.hiding {
    animation: pwaSlideOut 0.25s ease-in forwards;
}
@keyframes pwaSlideOut {
    to { transform: translateY(20px); opacity: 0; }
}
.pwa-toast-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5e3c 0%, #6b4423 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.pwa-toast-content {
    flex: 1;
    min-width: 0;
}
.pwa-toast-title {
    font-size: 14px;
    font-weight: 600;
    color: #2e1a0f;
    margin-bottom: 2px;
}
[data-theme="dark"] .pwa-toast-title {
    color: #f5ede6;
}
.pwa-toast-desc {
    font-size: 12px;
    color: #6b4423;
    line-height: 1.4;
}
[data-theme="dark"] .pwa-toast-desc {
    color: #d4a574;
}
.pwa-toast-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.pwa-toast-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.pwa-toast-btn-ghost {
    background: transparent;
    color: #6b4423;
}
.pwa-toast-btn-ghost:hover {
    background: rgba(139, 94, 60, 0.08);
}
[data-theme="dark"] .pwa-toast-btn-ghost {
    color: #d4a574;
}
.pwa-toast-btn-primary {
    background: #8b5e3c;
    color: #fff;
}
.pwa-toast-btn-primary:hover {
    background: #6b4423;
}

/* Mobile: full width toast */
@media (max-width: 640px) {
    .pwa-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}


/* ════════════════════════════════════════════════
 * Onboarding Overlay
 * ════════════════════════════════════════════════ */
#onboarding-overlay {
    display: none;
}
#onboarding-overlay.visible {
    display: flex !important;
    animation: onbFadeIn 0.4s ease;
}
#onboarding-overlay.hiding {
    animation: onbFadeOut 0.3s ease forwards;
}
@keyframes onbFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes onbFadeOut { to { opacity: 0; transform: scale(1.02) } }
@keyframes onbSlideUp {
    from { opacity: 0; transform: translateY(40px) scale(0.95) }
    to   { opacity: 1; transform: translateY(0) scale(1) }
}
@keyframes onbPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,0.3); }
    50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0.1); }
}

.onb-step {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 14px; border-radius: 14px;
    transition: background 0.2s;
}
.onb-step:hover { background: #f8f6f4; }
.onb-step-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    position: relative;
}
.onb-step-num {
    position: absolute; top: -4px; right: -4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #1a1a2e; color: white;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid white;
}
.onb-connector {
    width: 1.5px; height: 12px;
    background: linear-gradient(to bottom, #e8ddd4, transparent);
    margin-left: 33px;
}
.onb-cta-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, #1a1a2e, #8b5e3c);
    color: white; border: none; border-radius: 14px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(139,94,60,0.4);
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.02em;
}
.onb-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(139,94,60,0.5);
}
.onb-cta-btn:active { transform: translateY(0); }
.onb-cta-arrow {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: transform 0.2s;
}
.onb-cta-btn:hover .onb-cta-arrow { transform: translateX(3px); }

/* Mobile: narrower padding */
@media (max-width: 640px) {
    #onboarding-overlay { padding: 12px; }
    .onb-card { border-radius: 18px; }
    .onb-hero { padding: 28px 22px 24px !important; }
    .onb-hero h1 { font-size: 24px !important; }
    #onboarding-overlay > div > div:last-child { padding: 22px 22px 20px !important; }
}

/* ════════════════════════════════════════════════
 * Auto-Save Draft Recovery Banner
 * ════════════════════════════════════════════════ */
.draft-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--color-warning-bg3) 0%, var(--color-warning-border) 100%);
    border: 1.5px solid var(--color-warning-accent);
    border-radius: 12px;
    margin-bottom: 12px;
    font-family: 'Roboto', sans-serif;
    animation: draftSlideIn 0.3s ease;
}
[data-theme="dark"] .draft-banner {
    background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(245,158,11,0.08) 100%);
    border-color: rgba(245,158,11,0.6);
}
@keyframes draftSlideIn {
    from { opacity: 0; transform: translateY(-10px) }
    to   { opacity: 1; transform: translateY(0) }
}
.draft-banner-icon {
    flex-shrink: 0; font-size: 18px; color: #b45309;
}
[data-theme="dark"] .draft-banner-icon { color: #fbbf24; }
.draft-banner-content {
    flex: 1; font-size: 12px; color: var(--color-warning-mid); line-height: 1.4;
}
[data-theme="dark"] .draft-banner-content { color: var(--color-warning-border); }
.draft-banner-content strong { font-weight: 700; }
.draft-banner-actions {
    display: flex; gap: 6px; flex-shrink: 0;
}
.draft-banner-btn {
    padding: 5px 10px;
    font-size: 11px; font-weight: 600;
    border-radius: 8px; border: none; cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.draft-banner-btn-primary {
    background: #b45309; color: white;
}
.draft-banner-btn-primary:hover { background: var(--color-warning-mid); }
.draft-banner-btn-ghost {
    background: transparent; color: var(--color-warning-mid); border: 1px solid rgba(180,83,9,0.3);
}
.draft-banner-btn-ghost:hover { background: rgba(180,83,9,0.08); }
[data-theme="dark"] .draft-banner-btn-ghost { color: var(--color-warning-border); border-color: rgba(253,224,71,0.3); }


/* ════════════════════════════════════════════════
 * MI-04 fix: Dark Mode overrides — App Launcher & Pengumuman
 * Komponen baru (app-launcher, ann-item) menggunakan rgba hardcoded
 * yang perlu dinaikkan intensitasnya di dark mode.
 * ════════════════════════════════════════════════ */

/* App Launcher dropdown */
[data-theme="dark"] .app-launcher-header {
    background: linear-gradient(135deg, rgba(139,94,60,0.2) 0%, transparent 100%);
}
[data-theme="dark"] .app-launcher-footer {
    background: rgba(0,0,0,0.2);
}
[data-theme="dark"] .app-card.is-soon {
    opacity: 0.55;
}
[data-theme="dark"] .app-card-badge.soon {
    background: rgba(255,255,255,0.08);
    color: var(--text-muted);
    border-color: rgba(255,255,255,0.12);
}

/* Announcement modal — ann-item priority backgrounds */
[data-theme="dark"] .ann-item.prio-tinggi {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
}
[data-theme="dark"] .ann-item.prio-normal {
    background: rgba(139, 94, 60, 0.12);
    border-color: rgba(139, 94, 60, 0.35);
}
[data-theme="dark"] .ann-item.prio-sukses {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .ann-item-meta {
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .ann-item-badge {
    background: rgba(251,191,36,0.2);
    color: #fbbf24;
}

/* Announcement modal overlay */
[data-theme="dark"] #announcement-modal-overlay .ann-modal {
    background: var(--modal-bg);
    border-color: var(--modal-border);
}



 *   - Premium Dark + Glassmorphism
 *   - 4 detik countdown ring
 *   - Greeting personal + Quote + Info cards
 * ════════════════════════════════════════════════ */
#splash-overlay {
    background: #0a0a14;
    animation: splashFadeIn 0.6s ease;
}
#splash-overlay.hiding {
    animation: splashFadeOut 0.25s ease-out forwards;
}
@keyframes splashFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashFadeOut { to { opacity: 0; transform: scale(1.03); } }

/* ── Palette Opsi C: Hitam + Brown Subtle Glow di pojok (Q1=C) ── */
#splash-overlay {
    background: #0a0a0a; /* fallback hampir hitam */
}
.splash-bg-mesh {
    position: absolute; inset: 0; z-index: 0;
    background:
        /* Brand warmth subtle di pojok */
        radial-gradient(circle at 10% 15%,  rgba(139, 94, 60, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 90% 20%,  rgba(252, 211, 77, 0.08) 0%, transparent 38%),
        radial-gradient(circle at 85% 90%,  rgba(200, 153, 104, 0.10) 0%, transparent 42%),
        radial-gradient(circle at 15% 85%,  rgba(80, 50, 30, 0.12) 0%, transparent 40%),
        /* Base: hampir hitam dengan very subtle dark warm */
        linear-gradient(160deg,
            #050505 0%,
            #0a0a0a 30%,
            #0d0908 65%,
            #0f0a06 100%
        );
    animation: splashMeshFloat 22s ease-in-out infinite alternate;
}
@keyframes splashMeshFloat {
    0%   { transform: scale(1) translateY(0); }
    50%  { transform: scale(1.03) translateY(-1%); }
    100% { transform: scale(1.01) translateY(0.5%); }
}

/* ── Steam Wisps (Q4=D) ── */
.splash-particles {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    overflow: hidden;
}
.splash-steam-wisp {
    position: absolute;
    bottom: -120px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(245, 214, 143, var(--wisp-opacity, 0.08)) 0%,
        rgba(200, 153, 104, calc(var(--wisp-opacity, 0.08) * 0.6)) 40%,
        transparent 70%
    );
    filter: blur(20px);
    opacity: 0;
    animation: splashSteamRise linear infinite;
    will-change: transform, opacity;
}
@keyframes splashSteamRise {
    0% {
        transform: translateY(0) translateX(0) scale(0.6);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) translateX(15px) scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(-110vh) translateX(-25px) scale(1.8);
        opacity: 0;
    }
}

.splash-container {
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.splash-card {
    position: relative;
    width: 100%; max-width: 560px;
    background: rgba(30, 24, 18, 0.55);  /* Slightly lighter coffee untuk standout di hitam */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(245, 214, 143, 0.12);
    border-radius: 28px;
    padding: 44px 36px 30px;
    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(139, 94, 60, 0.15),
        inset 0 1px 0 rgba(245, 214, 143, 0.08);
    text-align: center;
    overflow: hidden;
}
.splash-card::before {
    content: '';
    position: absolute; top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.8), transparent);
}

/* Logo composition: pulse rings + spinner halo + golden glow */
.splash-logo-wrap {
    position: relative;
    width: 120px; height: 120px;
    margin: 0 auto 20px;
    /* Golden glow halo behind whole logo (Q6=B) */
    filter: drop-shadow(0 0 24px rgba(252, 211, 77, 0.35));
}

/* Pulse ring layer 1 — outer, slower */
.splash-logo-pulse-1 {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(252, 211, 77, 0.5);
    animation: splashPulseRing 3.2s ease-out infinite;
    will-change: transform, opacity;
}
/* Pulse ring layer 2 — outer, offset by 1.6s for continuous wave */
.splash-logo-pulse-2 {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(245, 214, 143, 0.45);
    animation: splashPulseRing 3.2s ease-out 1.6s infinite;
    will-change: transform, opacity;
}
@keyframes splashPulseRing {
    0%   { transform: scale(0.95); opacity: 0.9; }
    70%  { transform: scale(1.3);  opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Spinner halo — rotating, accent gold + brown */
.splash-logo-spinner {
    position: absolute; inset: -2px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(252, 211, 77, 0.95);
    border-right-color: rgba(200, 153, 104, 0.75);
    animation: splashSpinHalo 1.4s linear infinite;
    filter: drop-shadow(0 0 8px rgba(252, 211, 77, 0.5));
}
@keyframes splashSpinHalo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Inner circle — frosted, holds logo */
.splash-logo-inner {
    position: absolute; inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 214, 143, 0.12) 0%, rgba(139, 94, 60, 0.18) 100%);
    border: 1px solid rgba(252, 211, 77, 0.25);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(252, 211, 77, 0.1);
}
.splash-logo-inner img {
    width: 60px; height: 60px; object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(252, 211, 77, 0.4));
}

/* Greeting (Idea 1) */
.splash-greeting {
    font-size: 14px;
    color: rgba(252, 211, 77, 0.9);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    animation: splashFadeUp 0.7s ease 0.2s both;
}

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

/* Title */
.splash-title-wrap { margin-bottom: 24px; }
.splash-app-name {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #fcd34d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 6px;
    line-height: 1.1;
}
.splash-app-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0;
}
.splash-app-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    margin: 4px 0 0;
    letter-spacing: 0.3px;
}

/* Ornament */
.splash-ornament {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    margin: 0 auto 22px;
    color: rgba(252, 211, 77, 0.6);
    font-size: 11px;
}
.splash-ornament-line {
    height: 1px; flex: 1; max-width: 70px;
    background: linear-gradient(90deg, transparent, rgba(252, 211, 77, 0.4), transparent);
}

/* Quote */
.splash-quote-wrap {
    margin-bottom: 28px; padding: 0 8px;
    animation: splashFadeUp 0.9s ease 0.5s both;
}
.splash-quote-text {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 10px;
    position: relative;
    quotes: "\201C" "\201D";
    letter-spacing: 0.2px;
}
.splash-quote-text::before {
    content: open-quote;
    font-size: 44px;
    color: rgba(252, 211, 77, 0.4);
    line-height: 0;
    position: relative;
    top: 16px;
    margin-right: 4px;
    font-family: 'Lora', Georgia, serif;
    font-style: normal;
}
.splash-quote-text::after { content: close-quote; font-size: 0; }
.splash-quote-author {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: rgba(252, 211, 77, 0.85);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

/* Info Cards (Variant 3 grid) */
.splash-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 26px;
    animation: splashFadeUp 0.9s ease 0.7s both;
}
.splash-info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    transition: background 0.2s;
}
.splash-info-card:hover { background: rgba(255, 255, 255, 0.06); }
.splash-info-icon { font-size: 18px; margin-bottom: 4px; display: block; }
.splash-info-value {
    font-size: 14px; font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2; margin-bottom: 2px;
}
.splash-info-label {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.splash-info-card.warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}
.splash-info-card.warning .splash-info-value { color: #fcd34d; }
.splash-info-card.warning .splash-info-label { color: rgba(252, 211, 77, 0.7); }
.splash-info-card.warning .splash-info-icon  { color: #fbbf24; }

/* Skip Button */
.splash-skip-btn {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 22px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.splash-skip-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 1);
    border-color: rgba(252, 211, 77, 0.3);
    transform: translateY(-1px);
}
.splash-skip-btn:active { transform: translateY(0); }
.splash-skip-arrow { transition: transform 0.2s; }
.splash-skip-btn:hover .splash-skip-arrow { transform: translateX(2px); }

.splash-version-tag {
    position: absolute;
    bottom: 14px; right: 18px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 480px) {
    .splash-card { padding: 32px 22px 22px; max-width: 100%; }
    .splash-logo-wrap { width: 100px; height: 100px; }
    .splash-logo-inner img { width: 50px; height: 50px; }
    .splash-app-name { font-size: 24px; }
    .splash-quote-text { font-size: 15px; }
    .splash-info-grid { gap: 8px; }
    .splash-info-card { padding: 10px 6px; }
    .splash-info-value { font-size: 12.5px; }
    .splash-info-label { font-size: 8.5px; }
}
@media (max-height: 700px) {
    .splash-card { padding: 28px 32px 22px; }
    .splash-logo-wrap { width: 95px; height: 95px; margin-bottom: 16px; }
    .splash-logo-inner img { width: 48px; height: 48px; }
    .splash-app-name { font-size: 24px; }
    .splash-ornament { margin-bottom: 14px; }
    .splash-quote-wrap { margin-bottom: 18px; }
    .splash-info-grid { margin-bottom: 18px; }
}


/* ════════════════════════════════════════════════
 * iOS-style Switch Toggle (Q5=B)
 * Dipakai untuk TTE toggle di modal print preview
 * ════════════════════════════════════════════════ */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    vertical-align: middle;
    flex-shrink: 0;
}
.switch-toggle input {
    opacity: 0;
    width: 0; height: 0;
}
.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 999px;
    transition: background-color 0.25s ease;
}
.switch-slider::before {
    content: '';
    position: absolute;
    height: 14px; width: 14px;
    left: 2px; top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch-toggle input:checked + .switch-slider {
    background-color: var(--accent);
}
.switch-toggle input:checked + .switch-slider::before {
    transform: translateX(16px);
}
.switch-toggle input:focus-visible + .switch-slider {
    box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.25);
}
/* Hover state */
.switch-toggle:hover .switch-slider::before {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}


/* ════════════════════════════════════════════════
 * Print Preview Loading Spinner
 *   Muncul saat iframe sedang render (fix race condition
 *   setelah SW reload)
 * ════════════════════════════════════════════════ */
.print-spinner-ring {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(139, 94, 60, 0.15);
    border-top-color: #8b5e3c;
    border-right-color: rgba(139, 94, 60, 0.5);
    animation: printSpinnerRotate 0.85s linear infinite;
}
@keyframes printSpinnerRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════
 * PWA Update Reloading Overlay
 *   Muncul saat user klik "Reload" dari toast update
 *   Menutup semua modal & menampilkan transition
 * ════════════════════════════════════════════════ */
.pwa-reload-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
    color: white; font-family: 'Roboto', sans-serif;
    animation: pwaReloadFadeIn 0.3s ease;
}
@keyframes pwaReloadFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pwa-reload-spinner {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(252, 211, 77, 0.15);
    border-top-color: #fcd34d;
    border-right-color: rgba(252, 211, 77, 0.5);
    animation: printSpinnerRotate 0.85s linear infinite;
    filter: drop-shadow(0 0 12px rgba(252, 211, 77, 0.4));
}
.pwa-reload-title {
    font-size: 16px; font-weight: 700;
    letter-spacing: 0.3px;
    color: white;
}
.pwa-reload-subtitle {
    font-size: 12px; color: rgba(255,255,255,0.7);
    font-weight: 400;
    max-width: 320px; text-align: center;
    line-height: 1.5;
}


/* ════════════════════════════════════════════════
 * Pusat Riset Combobox (Reusable)
 *   - Searchable dropdown dengan fuzzy match
 *   - Premium tapi userfriendly
 *   - Recent picks section
 *   - Typo suggestion + manual entry hints
 * ════════════════════════════════════════════════ */

.pr-combobox-wrap {
    position: relative;
    width: 100%;
}

/* Dropdown panel */
.pr-combobox-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 50;
    background: var(--modal-bg, white);
    border: 1px solid var(--border-color, var(--color-disabled-bg));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    animation: prComboboxFadeIn 0.15s ease;
}
.pr-combobox-dropdown.open {
    display: block;
}
@keyframes prComboboxFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section label (Terakhir Dipilih / Semua) */
.pr-combobox-section-label {
    padding: 8px 12px 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, var(--color-disabled-bg));
    position: sticky;
    top: 0;
    z-index: 1;
}
.pr-combobox-section-label i {
    font-size: 11px;
    color: var(--accent, #8b5e3c);
}

/* Item */
.pr-combobox-item {
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text-primary, #111827);
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.12s, padding-left 0.12s;
    line-height: 1.4;
    word-break: break-word;
}
.pr-combobox-item:last-child { border-bottom: none; }
.pr-combobox-item:hover,
.pr-combobox-item.highlighted {
    background: var(--accent-light, #fef3e6);
    padding-left: 16px;
    color: var(--accent, #8b5e3c);
    font-weight: 600;
}
.pr-combobox-item.pr-combobox-recent {
    background: linear-gradient(90deg, rgba(252, 211, 77, 0.06), transparent);
}
.pr-combobox-item.pr-combobox-recent:hover,
.pr-combobox-item.pr-combobox-recent.highlighted {
    background: var(--accent-light, #fef3e6);
}

/* Highlight match */
.pr-combobox-mark {
    background: rgba(252, 211, 77, 0.4);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}

/* Empty state */
.pr-combobox-empty {
    padding: 16px 14px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
}
.pr-combobox-empty i { font-size: 14px; color: var(--accent, #8b5e3c); }

/* "Ketik untuk cari lebih banyak" footer */
.pr-combobox-more {
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    background: var(--bg-secondary, #f9fafb);
    border-top: 1px solid var(--border-color, var(--color-disabled-bg));
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: italic;
}
.pr-combobox-more i { font-size: 12px; color: var(--accent, #8b5e3c); }

/* Hint (typo suggestion / manual entry) */
.pr-combobox-hint {
    display: none;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.5;
    animation: prComboboxFadeIn 0.2s ease;
}
.pr-combobox-hint i {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Typo hint (gold/lightbulb) */
.pr-combobox-hint-typo {
    background: rgba(252, 211, 77, 0.12);
    color: var(--color-warning-mid);
    border: 1px solid rgba(252, 211, 77, 0.35);
}
.pr-combobox-hint-typo i { color: #d97706; }
.pr-combobox-hint-suggest {
    background: rgba(217, 119, 6, 0.15);
    color: var(--color-warning-mid);
    border: 1px solid rgba(217, 119, 6, 0.3);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin: 0 2px;
    transition: all 0.15s;
}
.pr-combobox-hint-suggest:hover {
    background: rgba(217, 119, 6, 0.25);
    transform: translateY(-1px);
}

/* Manual entry hint (neutral/pencil) */
.pr-combobox-hint-manual {
    background: rgba(99, 102, 241, 0.06);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.pr-combobox-hint-manual i { color: #6366f1; }

/* Scrollbar styling untuk dropdown */
.pr-combobox-dropdown::-webkit-scrollbar { width: 8px; }
.pr-combobox-dropdown::-webkit-scrollbar-track { background: transparent; }
.pr-combobox-dropdown::-webkit-scrollbar-thumb {
    background: rgba(139, 94, 60, 0.25);
    border-radius: 4px;
}
.pr-combobox-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 94, 60, 0.4);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .pr-combobox-dropdown { max-height: 220px; }
    .pr-combobox-item { font-size: 12px; padding: 10px 12px; }
}


/* ════════════════════════════════════════════════
 * Storage Stat Card — Warning States (Q4)
 * ════════════════════════════════════════════════ */
#stat-storage-card {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
#stat-storage-card:hover {
    transform: translateY(-1px);
    border-color: rgba(252, 211, 77, 0.3);
}
#stat-storage-card.storage-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
}
#stat-storage-card.storage-warn #stat-saved {
    color: #d97706 !important;
}
#stat-storage-card.storage-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    animation: storagePulse 2s ease-in-out infinite;
}
#stat-storage-card.storage-danger #stat-saved {
    color: var(--color-danger-dark) !important;
}
@keyframes storagePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }
}


/* ════════════════════════════════════════════════
 * Storage Breakdown Modal (Donut + Progress Bar)
 *   Prefix: sb- (storage breakdown)
 *   Kontras tinggi, no transparency issue
 * ════════════════════════════════════════════════ */

/* ── Donut Chart Section ── */
.sb-donut-section {
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(252, 211, 77, 0.08) 100%);
    border: 1px solid var(--accent-light2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sb-donut-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

.sb-donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sb-donut-segment-bg {
    fill: none;
    stroke: rgba(0,0,0,0.05);
    stroke-width: 18;
}

.sb-donut-segment {
    fill: none;
    stroke-width: 18;
    transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}

.sb-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sb-donut-center-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 2px;
}

.sb-donut-center-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sb-donut-center-unit {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 600;
}

.sb-quota-info {
    flex: 1;
    min-width: 0;
}

.sb-quota-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 6px;
}

.sb-quota-percentage {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.sb-quota-of {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 10px;
}

.sb-quota-bar-wrap {
    background: rgba(0,0,0,0.06);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.sb-quota-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #d4a574);
    border-radius: 999px;
    transition: width 0.6s ease, background 0.3s ease;
}

/* ── Section Label ── */
.sb-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sb-section-label i { color: var(--accent); font-size: 12px; }

/* ── Breakdown List ── */
.sb-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sb-bd-row {
    padding: 11px 14px;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.18s;
}

.sb-bd-row:hover {
    border-color: var(--accent-light2);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sb-bd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sb-bd-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sb-bd-icon i {
    font-size: 14px;
    color: white;
}

.sb-bd-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    min-width: 0;
}

.sb-bd-size {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.sb-bd-bar-wrap {
    position: relative;
    background: rgba(0,0,0,0.05);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.sb-bd-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.sb-bd-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
}

.sb-bd-pct {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sb-bd-detail {
    color: var(--text-muted);
}

/* ── Tip Box ── */
.sb-tip-box {
    margin-top: 14px;
    background: rgba(252, 211, 77, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--color-warning-mid);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.55;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.sb-tip-box i {
    font-size: 14px;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Responsive: stack pada layar sempit ── */
@media (max-width: 480px) {
    .sb-donut-section {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .sb-donut-wrap {
        width: 110px;
        height: 110px;
    }
    .sb-donut-center-value { font-size: 18px; }
    .sb-quota-info { text-align: center; }
}


/* ════════════════════════════════════════════════
 * App Launcher (Ekosistem Aplikasi)
 *   - Dropdown grid 2x2 dengan 4 aplikasi
 *   - Triggered by ikon grid (ph-squares-four) di header
 * ════════════════════════════════════════════════ */

.app-launcher-wrap {
    position: relative;
    display: inline-block;
}

#app-launcher-btn:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}
#app-launcher-btn.active {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

.app-launcher-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    z-index: 100;
}
.app-launcher-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.app-launcher-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--accent-light) 0%, rgba(255,255,255,0) 100%);
}
.app-launcher-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.app-launcher-title i { color: var(--accent); font-size: 14px; }
.app-launcher-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.app-launcher-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    min-height: 200px;
}

.app-card {
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    overflow: hidden;
}
.app-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 94, 60, 0.12);
}
.app-card.is-current {
    background: var(--accent-light);
    border-color: var(--accent-light2);
    cursor: default;
}
.app-card.is-current:hover {
    transform: none;
    box-shadow: none;
}
.app-card.is-soon {
    opacity: 0.65;
    cursor: not-allowed;
}
.app-card.is-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-color);
}

.app-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.app-card-icon i { color: white !important; }

.app-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 4px;
}
.app-card-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

.app-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
.app-card-badge.aktif {
    background: var(--accent);
    color: white;
}
.app-card-badge.soon {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.app-launcher-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-app);
    text-align: center;
}
.app-launcher-footer-text {
    font-size: 10.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.app-launcher-footer-text i { font-size: 11px; color: var(--accent); }

/* Spinner untuk loading state */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Responsive: mobile */
@media (max-width: 480px) {
    .app-launcher-dropdown {
        /* Fixed position centered di viewport - bukan anchor ke tombol */
        /* Tombol launcher diposisikan absolute di anchor, tapi di mobile
           dropdown harus selalu fit viewport. Header height = 60px. */
        position: fixed;
        top: 68px;          /* 60px header + 8px gap */
        left: 12px;
        right: 12px;
        width: auto;        /* fill space dari left ke right */
        max-width: none;
    }
}


/* ════════════════════════════════════════════════
 * Pengumuman (Splash + Bell + Modal)
 * ════════════════════════════════════════════════ */

/* ── Bell button dot indicator (di header) ── */
#bell-btn:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}
.bell-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
    border: 2px solid var(--bg-header, white);
    animation: bellDotPulse 2s ease-in-out infinite;
}
@keyframes bellDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ── Splash Announcement Card ── */
.splash-ann-wrap {
    margin-bottom: 28px;
    text-align: left;
    animation: splashFadeUp 0.9s ease 0.5s both;
}

.splash-ann-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 16px;
    position: relative;
    backdrop-filter: blur(8px);
}
.splash-ann-card.prio-tinggi {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15), 0 4px 16px rgba(220, 38, 38, 0.12);
}
.splash-ann-card.prio-normal {
    background: rgba(139, 94, 60, 0.10);
    border-color: rgba(139, 94, 60, 0.35);
}
.splash-ann-card.prio-sukses {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
}

.splash-ann-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.splash-ann-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    color: white;
}
.prio-tinggi .splash-ann-icon { background: var(--color-danger-dark); }
.prio-normal .splash-ann-icon { background: var(--accent, #8b5e3c); }
.prio-sukses .splash-ann-icon { background: #10b981; }

.splash-ann-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex: 1;
}
.prio-tinggi .splash-ann-label { color: #fca5a5; }
.prio-normal .splash-ann-label { color: #f5d3aa; }
.prio-sukses .splash-ann-label { color: var(--color-success-dark); }

.splash-ann-badge-new {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fbbf24;
    color: var(--color-warning-dark);
    animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.splash-ann-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    line-height: 1.3;
    margin-bottom: 6px;
}
.splash-ann-body {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.splash-ann-body strong { color: rgba(255, 255, 255, 0.98); font-weight: 700; }
.splash-ann-body em { color: rgba(252, 211, 77, 0.9); }
.splash-ann-body a {
    color: #fbbf24;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.splash-ann-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.splash-ann-meta {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 5px;
}
.splash-ann-readmore {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.25);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.splash-ann-readmore:hover {
    background: rgba(251, 191, 36, 0.2);
    transform: translateY(-1px);
}

.splash-ann-more {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s;
}
.splash-ann-more:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}
.splash-ann-more-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
}

/* ── Modal "Baca Selengkapnya" — items ── */
.ann-item {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    position: relative;
}
.ann-item:last-child { margin-bottom: 0; }
.ann-item.prio-tinggi {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.25);
}
.ann-item.prio-normal {
    background: rgba(139, 94, 60, 0.04);
    border-color: rgba(139, 94, 60, 0.2);
}
.ann-item.prio-sukses {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.25);
}

.ann-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ann-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}
.ann-item.prio-tinggi .ann-item-icon { background: var(--color-danger-dark); }
.ann-item.prio-normal .ann-item-icon { background: var(--accent); }
.ann-item.prio-sukses .ann-item-icon { background: #10b981; }

.ann-item-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex: 1;
}
.ann-item.prio-tinggi .ann-item-label { color: var(--color-danger-dark); }
.ann-item.prio-normal .ann-item-label { color: var(--accent); }
.ann-item.prio-sukses .ann-item-label { color: #047857; }

.ann-item-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fbbf24;
    color: var(--color-warning-dark);
}

.ann-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 6px;
}

.ann-item-body {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.ann-item-body p { margin-bottom: 8px; }
.ann-item-body p:last-child { margin-bottom: 0; }
.ann-item-body strong { color: var(--text-primary); font-weight: 700; }
.ann-item-body em { color: var(--accent); font-style: italic; }
.ann-item-body a {
    color: var(--accent);
    text-decoration: underline;
}
.ann-item-body a:hover { color: var(--accent-hover); }
.ann-item-body ul {
    padding-left: 18px;
    margin: 6px 0;
}
.ann-item-body li {
    margin-bottom: 4px;
}

.ann-item-meta {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 10.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ════════════════════════════════════════════════
 * Pengumuman Modal — Smooth Entrance Animation
 * Mengatasi "tidak smooth" issue saat klik dari splash
 * ════════════════════════════════════════════════ */

/* Backdrop animation */
#announcement-modal-overlay {
    transition: opacity 0.25s ease-out;
    opacity: 0;
}
#announcement-modal-overlay:not(.hidden) {
    opacity: 1;
}

/* Modal panel animation */
#announcement-modal-overlay .ann-modal {
    animation: annModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.05s;
}
@keyframes annModalIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Active state untuk tombol "Baca selengkapnya" — visual feedback klik */
.splash-ann-readmore:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}
.splash-ann-more:active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}


/* ════════════════════════════════════════════════
 * Print Preview Refresh Hint (v33+)
 * Muncul kalau iframe loading bermasalah (timeout 3s)
 * ════════════════════════════════════════════════ */
#print-preview-refresh-hint {
    display: none;
}
#print-preview-refresh-hint[style*="display:flex"],
#print-preview-refresh-hint[style*="display: flex"] {
    display: flex !important;
}
@media (max-width: 480px) {
    #print-preview-refresh-hint {
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        max-width: none !important;
    }
}

/* ════════════════════════════════════════════════
   Milestone 8 — Master-Detail Responsive Layout
   Note: Flex chain (main-workspace + page-ajuan + md-container) di-apply via inline
   JS di switchTab('ajuan') — untuk override class .block {display:block !important}.
   ──────────────────────────────────────────────── */

/* Tablet (768-1023px): list pane lebih sempit */
@media (max-width: 1023px) {
    #ajuan-md-container {
        grid-template-columns: 260px 1fr !important;
        gap: 10px !important;
    }
}

/* Mobile (≤767px): single column, swap-view via JS */
@media (max-width: 767px) {
    #ajuan-md-container {
        display: block !important;
        height: auto !important;
    }
    #ajuan-list-pane,
    #ajuan-detail-pane {
        height: 100% !important;
        width: 100% !important;
        margin-bottom: 0;
    }
    #ajuan-detail-pane {
        display: none;
    }

    #page-ajuan .search-bar {
        min-width: 100% !important;
    }
}

/* Very small mobile (≤480px): more compact rows */
@media (max-width: 480px) {
    #ajuan-list-body > div {
        padding: 8px 10px !important;
    }
    #ajuan-detail-body {
        font-size: 12px;
    }
    #ajuan-detail-body button {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }
}

/* Smooth transitions for collapsible sections */
#ajuan-detail-body .ph-caret-down,
#ajuan-detail-body .ph-caret-right {
    transition: transform 0.18s ease;
}