/* ===============================================
   RP3-PLUS Design System
   =============================================== */

:root {
    --rp-primary: #1e293b;
    --rp-primary-soft: #334155;
    --rp-accent: #0ea5e9;
    --rp-accent-hover: #0284c7;
    --rp-success: #10b981;
    --rp-warning: #f59e0b;
    --rp-danger: #ef4444;
    --rp-info: #06b6d4;

    --rp-bg: #f8fafc;
    --rp-bg-soft: #f1f5f9;
    --rp-surface: #ffffff;
    --rp-border: #e2e8f0;
    --rp-border-soft: #f1f5f9;

    --rp-text: #0f172a;
    --rp-text-muted: #64748b;
    --rp-text-soft: #94a3b8;

    --rp-sidebar-width: 260px;
    --rp-sidebar-collapsed: 72px;
    --rp-topbar-height: 60px;
    --rp-radius: 10px;
    --rp-radius-sm: 6px;
    --rp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
    --rp-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .06), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --rp-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--rp-bg);
    color: var(--rp-text);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

a { color: var(--rp-accent); text-decoration: none; }
a:hover { color: var(--rp-accent-hover); }

/* Soft text utility (separator "·", hint text, etc.) — dipakai banyak view */
.text-soft { color: var(--rp-text-soft); }

/* Focus card item — clickable row dengan hover state halus */
.focus-item-link {
    border-radius: 6px;
    padding: 6px 8px !important;
    margin: 0 -8px;
    color: inherit;
    transition: background-color .12s;
}
.focus-item-link:hover { background-color: var(--rp-bg-soft); color: inherit; }
.focus-item-link:hover .text-dark { color: var(--rp-accent); }

/* Mini-list item follow-up di dalam entri "Follow-up Tertunda" dashboard */
.fu-mini-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}
.fu-mini-list li {
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
    padding-left: 2px;
}
.fu-mini-list li .material-icons-outlined { font-size: 13px; opacity: .6; }

/* Item follow-up yang sudah ditandai selesai */
.fu-done .fu-text,
tr.fu-row-done .fu-text {
    text-decoration: line-through;
    color: #94a3b8;
}

/* ===== App Shell ===== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--rp-sidebar-width);
    background: var(--rp-primary);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width .2s ease;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
}

.sidebar-brand {
    height: var(--rp-topbar-height);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand .brand-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--rp-accent), #0284c7);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .3);
}

.sidebar-brand .brand-icon .material-icons {
    font-size: 18px;
}

/* Section label: divider top muncul HANYA kalau ada link/elemen lain di atasnya.
   Pakai sibling selector supaya tidak rapuh terhadap perubahan urutan nav. */
.sidebar-section-label {
    color: var(--rp-text-soft);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.7px;
    font-weight: 600;
    padding: 14px 20px 8px;
    margin-top: 4px;
}
.sidebar-link + .sidebar-section-label,
.sidebar-section-label + * + .sidebar-section-label {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 24px;
    /* Scrollbar minimal & modern (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .25) transparent;
}
/* Scrollbar minimal & modern (WebKit/Chromium) */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .22);
    border-radius: 6px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .45);
}
/* Sembunyikan tombol panah atas/bawah scrollbar */
.sidebar-nav::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    margin: 2px 10px;
    border-radius: var(--rp-radius-sm);
    color: #cbd5e1;
    font-weight: 500;
    transition: all .15s ease;
    position: relative;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.sidebar-link.active {
    background: rgba(14, 165, 233, 0.15);
    color: #ffffff;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--rp-accent);
    border-radius: 0 3px 3px 0;
}

.sidebar-link .material-icons,
.sidebar-link .material-icons-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

/* Icon size utilities — pakai ini, jangan inline style */
.material-icons.icon-xs, .material-icons-outlined.icon-xs { font-size: 14px; }
.material-icons.icon-sm, .material-icons-outlined.icon-sm { font-size: 16px; }
.material-icons.icon-md, .material-icons-outlined.icon-md { font-size: 18px; }
.material-icons.icon-lg, .material-icons-outlined.icon-lg { font-size: 24px; }
.material-icons.icon-xl, .material-icons-outlined.icon-xl { font-size: 32px; }
.material-icons.icon-2xl, .material-icons-outlined.icon-2xl { font-size: 48px; }
.material-icons.icon-3xl, .material-icons-outlined.icon-3xl { font-size: 64px; }

.sidebar-toggle { cursor: pointer; }
.sidebar-toggle .sidebar-chevron {
    margin-left: auto;
    font-size: 18px !important;
    transition: transform .2s ease;
}
.sidebar-toggle[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-sublink {
    padding-left: 44px !important;
    font-size: 13px;
    color: #94a3b8;
}
.sidebar-sublink .material-icons,
.sidebar-sublink .material-icons-outlined {
    font-size: 16px;
}
.sidebar-sublink.active {
    background: rgba(14, 165, 233, 0.18);
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 11px;
    color: var(--rp-text-soft);
}

/* ===== Main Area ===== */
.main-area {
    flex: 1;
    margin-left: var(--rp-sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===== Topbar ===== */
.topbar {
    height: var(--rp-topbar-height);
    background: var(--rp-surface);
    border-bottom: 1px solid var(--rp-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0; z-index: 1020;
}

.topbar-search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.topbar-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius-sm);
    background: var(--rp-bg-soft);
    font-size: 13px;
    color: var(--rp-text);
    transition: all .15s ease;
}

.topbar-search input:focus {
    background: var(--rp-surface);
    border-color: var(--rp-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.topbar-search .material-icons {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--rp-text-soft);
    font-size: 18px;
    pointer-events: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.topbar-icon-btn {
    width: 36px; height: 36px;
    border-radius: var(--rp-radius-sm);
    border: none;
    background: transparent;
    color: var(--rp-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background .15s ease;
}

.topbar-icon-btn:hover { background: var(--rp-bg-soft); }
.topbar-icon-btn .material-icons { font-size: 20px; }

.topbar-icon-btn .badge-dot {
    position: absolute;
    top: 6px; right: 8px;
    width: 8px; height: 8px;
    background: var(--rp-danger);
    border-radius: 50%;
    border: 2px solid var(--rp-surface);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--rp-radius-sm);
    cursor: pointer;
}

.topbar-user:hover { background: var(--rp-bg-soft); }

.user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rp-accent), #6366f1);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

.user-info { line-height: 1.2; }
.user-info .name { font-weight: 600; font-size: 13px; }
.user-info .role { color: var(--rp-text-muted); font-size: 11px; }

/* ===== Page Content ===== */
.page-content {
    padding: 28px 32px;
    flex: 1;
}

.page-header {
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--rp-text);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.page-header .subtitle {
    color: var(--rp-text-muted);
    font-size: 13px;
    margin: 0;
}

/* ===== Cards (unified) =====
   Override Bootstrap .card biar match design tokens.
   Pakai <x-card> component untuk konsistensi. */
.card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-sm);
    transition: box-shadow .15s ease;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--rp-border-soft);
    padding: 14px 18px;
    font-weight: 600;
    color: var(--rp-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-body { padding: 22px; }

.card.card-flat {
    box-shadow: none;
    border-color: var(--rp-border-soft);
}

.card.card-clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.card.card-clickable:hover {
    box-shadow: var(--rp-shadow-md);
    transform: translateY(-1px);
}

/* Stat card */
.stat-card {
    background: var(--rp-surface);
    border: 1px solid var(--rp-border);
    border-radius: var(--rp-radius);
    padding: 18px 20px;
    transition: all .15s ease;
}

.stat-card:hover {
    box-shadow: var(--rp-shadow-md);
    transform: translateY(-1px);
}

.stat-card .stat-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.stat-card .stat-label {
    color: var(--rp-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--rp-text);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.5px;
}

.stat-card .stat-meta {
    margin-top: 8px;
    font-size: 13px;
    color: #475569;       /* slate-600 — lebih jelas dari muted default */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
/* Override warna inline utility di dalam stat-meta supaya tidak terlalu pucat */
.stat-card .stat-meta .text-muted    { color: #475569 !important; }
.stat-card .stat-meta .text-warning  { color: #b45309 !important; }
.stat-card .stat-meta .text-danger   { color: #b91c1c !important; }
.stat-card .stat-meta .text-success  { color: #047857 !important; }
.stat-card .stat-meta .text-info     { color: #0e7490 !important; }
.stat-card .stat-meta .text-primary  { color: #0369a1 !important; }

.stat-card .stat-meta.up { color: var(--rp-success); }
.stat-card .stat-meta.down { color: var(--rp-danger); }

.stat-card .stat-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon.bg-blue { background: #dbeafe; color: #1d4ed8; }
.stat-icon.bg-amber { background: #fef3c7; color: #b45309; }
.stat-icon.bg-emerald { background: #d1fae5; color: #047857; }
.stat-icon.bg-rose { background: #ffe4e6; color: #be123c; }

/* ===== Buttons ===== */
.btn {
    font-weight: 500;
    border-radius: var(--rp-radius-sm);
    font-size: 13px;
    padding: 8px 14px;
    transition: all .15s ease;
}

.btn-primary {
    background: var(--rp-accent);
    border-color: var(--rp-accent);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--rp-accent-hover);
    border-color: var(--rp-accent-hover);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.btn-lg { font-size: 14px; padding: 10px 18px; }

/* ===== Login Page ===== */
.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}

.login-hero {
    background:
        radial-gradient(circle at 20% 20%, rgba(14, 165, 233, .35), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(99, 102, 241, .25), transparent 45%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
    color: white;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .6;
    pointer-events: none;
}

.login-hero-content { position: relative; z-index: 1; }

.login-hero .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.3px;
}

.login-hero .brand-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--rp-accent), #6366f1);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(14, 165, 233, .35);
}

.login-hero h1 {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.login-hero .lead {
    font-size: 15px;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
    max-width: 460px;
}

.login-hero .feature-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 12px;
}

.login-hero .feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
}

.login-hero .feature-list .material-icons {
    color: var(--rp-accent);
    background: rgba(14, 165, 233, 0.15);
    padding: 6px;
    border-radius: 6px;
    font-size: 14px;
}

.login-hero .footer-tag {
    color: rgba(255,255,255,.5);
    font-size: 12px;
    position: relative;
    z-index: 1;
}

.login-form-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--rp-surface);
}

.login-card {
    width: 100%;
    max-width: 380px;
}

.login-card h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.login-card .lead {
    color: var(--rp-text-muted);
    font-size: 13px;
    margin: 0 0 28px;
}

.form-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--rp-text);
    margin-bottom: 6px;
}

.form-control {
    border-radius: var(--rp-radius-sm);
    border: 1px solid var(--rp-border);
    padding: 9px 12px;
    font-size: 13px;
    transition: all .15s ease;
}

.form-select {
    border-radius: var(--rp-radius-sm);
    border: 1px solid var(--rp-border);
    padding: 9px 32px 9px 12px;
    font-size: 13px;
    transition: all .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rp-accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

.form-control.form-control-sm,
.form-select.form-select-sm { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--rp-danger);
    background-image: none;
    padding-right: 12px;
}

/* Row dengan akses dibatasi: lebih muda + ikon gembok */
.table-row-locked { background: #f8fafc; color: #64748b; }
.table-row-locked a { color: #64748b; }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--rp-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}
.invalid-feedback {
    color: var(--rp-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Footer ===== */
.app-footer {
    border-top: 1px solid var(--rp-border);
    background: var(--rp-surface);
    padding: 14px 32px;
    color: var(--rp-text-muted);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== Alerts override ===== */
.alert {
    border-radius: var(--rp-radius-sm);
    border: 1px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
}
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ===== Unified data tables (Customer, Contact, dll.) ===== */
.data-table { margin-bottom: 0; vertical-align: middle; }
.data-table thead { background: #f8fafc; }
.data-table thead th { font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #475569; padding: 13px 16px; border-bottom: 1px solid var(--rp-border); }
.data-table tbody td { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--rp-border-soft); }
.data-table tbody tr:hover { background: #f8fafc; }

/* Compact stat cards (5-col row) — relaxed for breathing room */
.stat-row-compact .stat-card { padding: 16px 18px; }
.stat-row-compact .stat-card .stat-row { gap: 12px; }
.stat-row-compact .stat-card .stat-label { font-size: 11.5px; letter-spacing: 0.3px; margin-bottom: 6px; }
.stat-row-compact .stat-card .stat-value { font-size: 24px; }
.stat-row-compact .stat-card .stat-value-rp { font-size: 18px !important; }
.stat-row-compact .stat-card .stat-meta { font-size: 12.5px; margin-top: 6px; }
.stat-row-compact .stat-card .stat-icon { width: 38px; height: 38px; }
.stat-row-compact .stat-card .stat-icon .material-icons-outlined { font-size: 20px; }

/* Customer type badges (di Customer + Contact lists) */
.cust-type-badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.cust-type-badge.end_user    { background: #dbeafe; color: #1d4ed8; }
.cust-type-badge.konsultan   { background: #ede9fe; color: #6d28d9; }
.cust-type-badge.kontraktor  { background: #ffedd5; color: #c2410c; }
.cust-type-badge.panel_maker { background: #fef3c7; color: #b45309; }
.cust-type-badge.dealer      { background: #d1fae5; color: #047857; }

/* Visibility badges */
.vis-badge { font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.vis-badge .material-icons-outlined { font-size: 13px; }
.vis-badge.public { background: #f1f5f9; color: #475569; }
.vis-badge.division_only { background: #fef3c7; color: #92400e; }
.vis-badge.strict { background: #fee2e2; color: #991b1b; }

/* Merayakan chip */
.merayakan-chip { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 3px; background: #f1f5f9; color: #475569; margin-right: 4px; }

/* Customer / PIC list tabs (Semua / End User / Konsultan / dll) */
.customer-tabs { display: flex; width: 100%; border-bottom: 1px solid #e2e8f0; }
.customer-tabs .nav-item { flex: 1 1 0; display: flex; }
.customer-tabs .nav-item + .nav-item { border-left: 1px solid #e2e8f0; }
.customer-tabs .nav-link { flex: 1; color: #64748b; font-weight: 500; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 6px; }
.customer-tabs .nav-link.active { color: var(--rp-accent); border-bottom-color: var(--rp-accent); background: transparent; }
.customer-tabs .nav-link .count-badge { background: #e2e8f0; color: #475569; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.customer-tabs .nav-link.active .count-badge { background: var(--rp-accent); color: #fff; }

/* Customer/PIC form tabs (Data Perusahaan + PIC) */
.cust-form-tabs { border-bottom: 1px solid var(--rp-border); }
.cust-form-tabs .nav-link { color: #64748b; font-weight: 500; padding: 10px 18px; border: 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.cust-form-tabs .nav-link.active { color: var(--rp-accent); border-bottom-color: var(--rp-accent); background: transparent; }
.cust-form-tabs .nav-link:hover:not(.active) { color: var(--rp-text); border-bottom-color: #e2e8f0; }

/* PIC notes */
.pic-note-item { padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; }
.pic-note-item.shared-note { background: #eff6ff; border-left: 3px solid #0ea5e9; }
.pic-note-item.private-note { background: #f8fafc; border-left: 3px solid #94a3b8; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .sidebar.is-open { transform: translateX(0); }
    .main-area { margin-left: 0; }
    .sidebar-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 1029;
    }
    .sidebar-backdrop.is-open { display: block; }
}

@media (max-width: 767.98px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { display: none; }
    .login-form-area { padding: 24px; }
    .page-content { padding: 20px 16px; }
    .topbar { padding: 0 16px; }
    .topbar-search { display: none; }
}

/* ===== Loading overlay ===== */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(248, 250, 252, .75);
    backdrop-filter: blur(2px);
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
}
#loading-overlay.is-active { display: flex; }

/* v0.16.1.8 — Modal z-index fix: ensure modal & backdrop above ALL custom layers.
   Bootstrap default modal=1055, backdrop=1050. Our #loading-overlay was 1080 (above
   modal). Reorder: loading=1100, modal=1090, backdrop=1085. */
.modal { z-index: 1090 !important; }
.modal-backdrop { z-index: 1085 !important; }
#loading-overlay { z-index: 1100; }

/* =================================================================
   Detail Page Layout (Customer Show, PIC Show, etc.)
   Modern hero, color-coded per entity type, no avatar.
   ================================================================= */

.detail-topbar { padding: 4px 4px 0; }
.detail-topbar a.text-muted {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px;
    transition: background .15s, color .15s;
}
.detail-topbar a.text-muted:hover {
    color: var(--rp-accent) !important;
    background: var(--rp-bg-soft);
}

.detail-hero {
    position: relative;
    border-radius: 14px;
    padding: 26px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    border: 1px solid var(--rp-border);
}
/* Decorative tint stripe on left edge for color identifier */
.detail-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--rp-primary);
}

/* Hero variants — color identifier per entity */
.detail-hero.hero-customer {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}
.detail-hero.hero-customer::before { background: linear-gradient(180deg, #1e293b, #475569); }

.detail-hero.hero-pic {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.detail-hero.hero-pic::before { background: linear-gradient(180deg, #0ea5e9, #0284c7); }

.detail-hero.hero-project {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}
.detail-hero.hero-project::before { background: linear-gradient(180deg, #f59e0b, #d97706); }

.detail-hero .page-title {
    font-size: 22px !important;
    line-height: 1.25;
    margin: 0;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--rp-text);
}
.detail-hero .badge {
    font-size: .72rem;
    padding: .4em .7em;
    font-weight: 600;
    letter-spacing: .01em;
}
.detail-hero .text-muted.small { font-size: .82rem; line-height: 1.5; }
.detail-hero .text-muted.small a { color: var(--rp-accent); text-decoration: none; }
.detail-hero .text-muted.small a:hover { text-decoration: underline; }

.detail-tabs {
    background: var(--rp-surface);
    border-radius: 12px;
    padding: 10px;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    border: 1px solid var(--rp-border);
}
.detail-tabs .nav-link {
    color: var(--rp-text);
    font-size: .92rem;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 8px;
    text-align: left;
    background: transparent;
    border: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    transition: background .15s, color .15s;
}
.detail-tabs .nav-link:hover { background: var(--rp-bg-soft); }
.detail-tabs .nav-link.active {
    background: var(--rp-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(14, 165, 233, .25);
}
.detail-tabs .nav-link.active .badge { background: rgba(255,255,255,.28) !important; }
.detail-tabs .nav-link .badge { margin-left: auto; }

.tab-content .card {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    border: 1px solid var(--rp-border);
    border-radius: 12px;
}
.tab-content .card-header {
    background: var(--rp-surface);
    border-bottom: 1px solid var(--rp-border);
    font-size: .95rem;
    padding: 16px 22px;
    border-radius: 12px 12px 0 0;
}
.tab-content .card-body { padding: 22px; }
.tab-content .card .card-body dl.row dt,
.tab-content .card .card-body dl.row dd {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Modern Activity Timeline — vertical line, dots, card per item */
.activity-timeline {
    position: relative;
    padding: 20px 20px 20px 0;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    left: 38px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--rp-border) 0%, var(--rp-border-soft) 100%);
}
.activity-item {
    position: relative;
    padding-left: 74px;
    padding-right: 4px;
    margin-bottom: 14px;
}
.activity-item:last-child { margin-bottom: 0; }
.activity-dot {
    position: absolute;
    left: 22px;
    top: 6px;
    width: 36px; height: 36px;
    background: #fff;
    border: 2px solid var(--rp-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--rp-accent);
    z-index: 1;
    box-shadow: 0 0 0 4px #fff, 0 2px 4px rgba(14, 165, 233, .15);
}
.activity-dot .material-icons-outlined { font-size: 18px; }
.activity-dot.dot-plan { border-color: #06b6d4; color: #06b6d4; }
.activity-dot.dot-plan { box-shadow: 0 0 0 4px #fff, 0 2px 4px rgba(6, 182, 212, .15); }
.activity-dot.dot-rejected { border-color: #ef4444; color: #ef4444; }
.activity-dot.dot-rejected { box-shadow: 0 0 0 4px #fff, 0 2px 4px rgba(239, 68, 68, .15); }

.activity-card {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    padding: 12px 16px;
    transition: box-shadow .18s ease, transform .15s ease, border-color .15s;
}
.activity-card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
    border-color: var(--rp-accent);
}
.activity-card .activity-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.activity-card .activity-head .activity-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--rp-text);
    line-height: 1.3;
}
.activity-card .activity-head .activity-time {
    font-size: .72rem;
    color: var(--rp-text-muted);
    white-space: nowrap;
    line-height: 1.3;
}
.activity-card .activity-meta {
    display: flex;
    gap: 10px 14px;
    flex-wrap: wrap;
    font-size: .76rem;
    color: var(--rp-text-muted);
    align-items: center;
}
.activity-card .activity-meta a { color: var(--rp-accent); text-decoration: none; }
.activity-card .activity-meta a:hover { text-decoration: underline; }
.activity-card .activity-meta .activity-pic-chip {
    background: var(--rp-bg-soft);
    border: 1px solid var(--rp-border);
    padding: 1px 7px;
    border-radius: 10px;
    color: var(--rp-text);
    font-size: .7rem;
    font-weight: 500;
}
.activity-card .activity-notes {
    font-size: .82rem;
    color: var(--rp-text);
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--rp-border-soft);
    white-space: pre-line;
    line-height: 1.5;
}

/* Version badge in footer */
.app-version-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--rp-bg-soft);
    color: var(--rp-text-muted);
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 600;
    font-family: ui-monospace, Menlo, monospace;
}

/* TOP list — vertical with fixed-width percent column */
.top-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.top-list li {
    display: grid;
    grid-template-columns: 1fr 60px;
    align-items: center;
    column-gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--rp-border-soft);
    font-size: .85rem;
}
.top-list li:last-child { border-bottom: none; }
.top-list li .top-name { line-height: 1.3; }
.top-list li .top-month { display: block; font-size: .72rem; color: var(--rp-text-muted); }
.top-list li .top-pct { text-align: right; font-weight: 600; color: #047857; }
.top-list li .top-pct.no-pct { color: var(--rp-text-muted); font-weight: 400; }

/* Status bar — strip lebar di atas hero project */
.status-bar {
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    position: relative;
    overflow: hidden;
}
.status-bar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
}
.status-bar-label { text-transform: uppercase; padding-left: 12px; }
.status-bar-meta { font-weight: 400; opacity: .85; }
.status-bar-secondary { background: #f1f5f9; color: #475569; }
.status-bar-secondary::before { background: #64748b; }
.status-bar-info { background: #ecfeff; color: #0e7490; }
.status-bar-info::before { background: #06b6d4; }
.status-bar-warning { background: #fffbeb; color: #b45309; }
.status-bar-warning::before { background: #f59e0b; }
.status-bar-primary { background: #eff6ff; color: #1e40af; }
.status-bar-primary::before { background: #3b82f6; }
.status-bar-amber { background: #fffbeb; color: #c2410c; }
.status-bar-amber::before { background: #f97316; }
.status-bar-success { background: #ecfdf5; color: #047857; }
.status-bar-success::before { background: #10b981; }
.status-bar-danger { background: #fef2f2; color: #b91c1c; }
.status-bar-danger::before { background: #ef4444; }

/* =========================================================
   Timeline Info List (text-based replacement for horiz-timeline)
   Lebih ringan, tidak sumpek, pakai pattern row info standar.
   ========================================================= */
.tl-info-list { display: flex; flex-direction: column; gap: 0; }
.tl-info-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px dashed var(--rp-border-soft);
    color: var(--rp-text);
    text-decoration: none;
}
.tl-info-row:last-child { border-bottom: none; }
.tl-info-clickable { cursor: pointer; transition: background .12s; border-radius: 8px; }
.tl-info-clickable:hover { background: var(--rp-bg-soft); }
.tl-info-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--rp-bg-soft); color: var(--rp-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tl-info-icon .material-icons-outlined { font-size: 20px; }
.tl-info-color-secondary { background: #f1f5f9; color: #475569; }
.tl-info-color-info      { background: #ecfeff; color: #0e7490; }
.tl-info-color-success   { background: #ecfdf5; color: #047857; }
.tl-info-color-primary   { background: #eff6ff; color: #1e40af; }
.tl-info-color-warning   { background: #fffbeb; color: #b45309; }
.tl-info-color-danger    { background: #fef2f2; color: #b91c1c; }
.tl-info-body { flex: 1 1 auto; min-width: 0; }
.tl-info-label { font-weight: 600; font-size: .95rem; color: var(--rp-text); }
.tl-info-meta  { font-size: .8rem; color: var(--rp-text-muted); margin-top: 3px; }
.tl-info-when  { text-align: right; flex-shrink: 0; min-width: 130px; }
.tl-info-date  { font-size: .9rem; font-weight: 600; color: var(--rp-text); }
.tl-info-rel   { font-size: .78rem; color: var(--rp-text-muted); margin-top: 3px; }
.tl-info-overdue {
    background: #f1f5f9;
    border-radius: 8px;
    border-bottom-color: transparent;
}
.tl-info-overdue .tl-info-icon  { background: #fef2f2; color: #b91c1c; }
.tl-info-overdue .tl-info-label { color: #b91c1c; }
.tl-info-overdue .tl-info-rel   { color: #b91c1c; font-weight: 600; }

.tl-today-divider {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 0;
    gap: 0;
}
.tl-today-divider::before, .tl-today-divider::after {
    content: ''; flex: 1 1 auto; height: 1px;
}
.tl-today-divider::before { background: linear-gradient(90deg, transparent, #fecaca); }
.tl-today-divider::after  { background: linear-gradient(90deg, #fecaca, transparent); }
.tl-today-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .3);
    white-space: nowrap;
    margin: 0 14px;
}
.tl-today-pill .material-icons-outlined { font-size: 15px; }

@media (max-width: 575px) {
    .tl-info-row { flex-wrap: wrap; }
    .tl-info-when { min-width: 0; text-align: left; width: 100%; padding-left: 54px; margin-top: 4px; }
    .tl-info-date { display: inline; }
    .tl-info-rel { display: inline; margin-left: 8px; }
}

/* PT/BU breakdown table */
.table-row-pt { background: var(--rp-bg-soft); }
.table-row-bu td { padding-top: 4px; padding-bottom: 4px; }

/* Compact icon-only action button (used di tabel list) */
.action-cell { white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.action-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    color: var(--rp-text-muted);
    border-radius: 6px;
    transition: background .12s, color .12s;
    text-decoration: none;
    margin-left: 3px;
}
.action-ico:hover { background: var(--rp-bg-soft); color: var(--rp-accent); }
.action-ico .material-icons-outlined { font-size: 19px; }

/* Decision Maker star icon */
.dm-star {
    color: #f59e0b;
    font-size: 16px !important;
    vertical-align: middle;
    margin-left: 2px;
}
.dm-star-sm { font-size: 13px !important; }
.dm-star-lg { font-size: 18px !important; }

/* =================================================================
   DASHBOARD-STYLE DETAIL PAGE (modern reference layout)
   ================================================================= */

/* Breadcrumb top */
.detail-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px;
    font-size: .82rem;
    color: var(--rp-text-muted);
    padding: 4px 0 12px;
}
.detail-breadcrumb a { color: var(--rp-text-muted); text-decoration: none; }
.detail-breadcrumb a:hover { color: var(--rp-accent); }
.detail-breadcrumb .sep { color: var(--rp-text-soft); margin: 0 2px; }
.detail-breadcrumb .current { color: var(--rp-text); font-weight: 600; }

/* Rich hero (with thumbnail) — Project page */
.detail-hero-rich {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    margin-bottom: 16px;
}
.detail-hero-rich .hero-main {
    display: flex; gap: 16px;
    flex: 1 1 auto; min-width: 0;
    align-items: center;
}
.detail-hero-rich .hero-thumb {
    width: 92px; height: 76px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: var(--rp-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.detail-hero-rich .hero-thumb.thumb-customer {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    font-weight: 700;
    font-size: 24px;
    border-radius: 10px;
}
.detail-hero-rich .hero-info { min-width: 0; }
.detail-hero-rich .hero-status-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; color: var(--rp-text-muted);
    margin-top: 4px;
    flex-wrap: wrap;
}
.detail-hero-rich .hero-status-row .material-icons-outlined { font-size: 14px; }

/* Varian status-row lebih lega (font sedikit lebih besar, gap lebih luas, boleh wrap) */
.detail-hero-rich .hero-status-row-lg {
    font-size: .9rem;
    gap: 6px 12px;
    line-height: 1.6;
}
.detail-hero-rich .hero-status-row-lg .badge { font-size: .8rem; padding: .4em .7em; }
.detail-hero-rich .hero-status-row-lg .status-pill { font-size: .8rem; }
.detail-hero-rich .hero-status-row-lg .small { font-size: .85rem !important; }
.detail-hero-rich .hero-status-row-lg .material-icons-outlined { font-size: 16px; }

.detail-hero-rich .hero-meta-cards {
    display: flex; gap: 14px; align-items: stretch;
    flex-shrink: 0;
}
.detail-hero-rich .hero-meta-card {
    display: flex;
    flex-direction: column;
}
.owner-card {
    display: flex; align-items: center; gap: 8px;
    padding-right: 14px;
}
.owner-card-label {
    font-size: .68rem;
    color: var(--rp-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    margin-bottom: 2px;
}
.owner-card-avatar {
    width: 34px; height: 34px;
    background: var(--rp-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.owner-card-avatar.sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.owner-card-name { font-size: .85rem; font-weight: 600; color: var(--rp-text); line-height: 1.2; }
.owner-card-role { font-size: .72rem; color: var(--rp-text-muted); line-height: 1.2; }

.detail-hero-rich .hero-actions {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.detail-hero-rich .hero-actions .btn {
    font-size: .82rem;
    padding: 6px 12px;
}
/* Grup tombol kiri (workflow/primary) & kanan (utility) — di-spread via space-between */
.hero-actions-group {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.hero-actions-left:empty,
.hero-actions-right:empty { display: none; }
.hero-actions-right { margin-left: auto; }

/* ===== Override Bootstrap outline button — pastikan readable di white bg ===== */
/* btn-outline-warning default kuning #ffc107 sangat samar di putih → ganti amber yang lebih gelap */
.btn-outline-warning {
    color: #b45309 !important;
    border-color: #d97706 !important;
}
.btn-outline-warning:hover:not(:disabled),
.btn-outline-warning:focus:not(:disabled) {
    background-color: #d97706 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}
/* btn-outline-info default cyan #0dcaf0 juga samar → pakai darker cyan */
.btn-outline-info {
    color: #0e7490 !important;
    border-color: #06b6d4 !important;
}
.btn-outline-info:hover:not(:disabled),
.btn-outline-info:focus:not(:disabled) {
    background-color: #06b6d4 !important;
    border-color: #0e7490 !important;
    color: #fff !important;
}
/* btn-outline-secondary default abu — naikkan kontras */
.btn-outline-secondary {
    color: #475569 !important;
    border-color: #94a3b8 !important;
}
.btn-outline-secondary:hover:not(:disabled),
.btn-outline-secondary:focus:not(:disabled) {
    background-color: #475569 !important;
    border-color: #334155 !important;
    color: #fff !important;
}
/* btn-outline-success — naikkan ke green-700 */
.btn-outline-success {
    color: #047857 !important;
    border-color: #10b981 !important;
}
.btn-outline-success:hover:not(:disabled),
.btn-outline-success:focus:not(:disabled) {
    background-color: #047857 !important;
    border-color: #065f46 !important;
    color: #fff !important;
}
/* btn-outline-primary tetap (Bootstrap blue cukup terbaca) tapi naik ke sky-700 */
.btn-outline-primary {
    color: #0369a1 !important;
    border-color: #0ea5e9 !important;
}
.btn-outline-primary:hover:not(:disabled),
.btn-outline-primary:focus:not(:disabled) {
    background-color: #0369a1 !important;
    border-color: #075985 !important;
    color: #fff !important;
}
/* btn-check (radio/checkbox toggle) checked → teks putih di atas background biru */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: #0369a1 !important;
    border-color: #075985 !important;
    color: #fff !important;
}
/* btn-outline-danger naik ke red-700 supaya delete button jelas */
.btn-outline-danger {
    color: #b91c1c !important;
    border-color: #ef4444 !important;
}
.btn-outline-danger:hover:not(:disabled),
.btn-outline-danger:focus:not(:disabled) {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    color: #fff !important;
}

/* Horizontal tabs (replace vertical pills for dashboard layout) */
.tabs-horizontal {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rp-border);
    margin-bottom: 18px;
    padding: 0 4px;
    flex-wrap: wrap;
}
.tabs-horizontal .nav-link {
    background: transparent;
    border: none;
    color: var(--rp-text-muted);
    font-weight: 500;
    font-size: .9rem;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.tabs-horizontal .nav-link:hover { color: var(--rp-text); }
.tabs-horizontal .nav-link.active {
    color: var(--rp-accent);
    border-bottom-color: var(--rp-accent);
    background: transparent;
    box-shadow: none;
    font-weight: 600;
}
.tabs-horizontal .nav-link .badge {
    background: var(--rp-bg-soft) !important;
    color: var(--rp-text-muted) !important;
    font-size: .68rem;
    margin-left: 4px;
}
.tabs-horizontal .nav-link.active .badge {
    background: rgba(14, 165, 233, .12) !important;
    color: var(--rp-accent) !important;
}

/* Dashboard cards (4-col Overview layout) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dashboard-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }  /* fallback to 4 even if cols-5 set */
.dashboard-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dashboard-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1399px) {
    .dashboard-grid, .dashboard-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .dashboard-grid, .dashboard-grid.cols-5, .dashboard-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .dashboard-grid, .dashboard-grid.cols-5, .dashboard-grid.cols-3, .dashboard-grid.cols-2 { grid-template-columns: 1fr; }
}

.dash-card {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    display: flex; flex-direction: column;
}
.dash-card .dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rp-border);
    gap: 8px;
}
.dash-card .dash-card-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--rp-text);
    display: flex; align-items: center; gap: 6px;
    margin: 0;
}
.dash-card .dash-card-title .material-icons-outlined {
    font-size: 18px;
    color: var(--rp-text-muted);
}
.dash-card .dash-card-action a {
    font-size: .78rem;
    color: var(--rp-accent);
    text-decoration: none;
    font-weight: 500;
}
.dash-card .dash-card-action a:hover { text-decoration: underline; }
.dash-card .dash-card-body { padding: 18px 20px; flex: 1 1 auto; }
.dash-card .dash-card-body.no-pad { padding: 0; }

/* Key-Value grid (2-column inside wide cards) */
.kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}
.kv-grid .kv-row {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--rp-border-soft);
}
.kv-grid .kv-row.col-span-2 { grid-column: 1 / -1; }
.kv-grid .kv-label {
    display: block;
    color: var(--rp-text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: 5px;
}
.kv-grid .kv-value {
    display: block;
    color: var(--rp-text);
    font-size: .92rem;
    word-break: break-word;
    line-height: 1.5;
}
.kv-grid .kv-value a { color: var(--rp-accent); text-decoration: none; }
.kv-grid .kv-value a:hover { text-decoration: underline; }
@media (max-width: 575px) {
    .kv-grid { grid-template-columns: 1fr; }
}

/* Activity block (Last/Next) */
.activity-block {
    padding: 10px 12px;
    background: var(--rp-bg-soft);
    border-radius: 8px;
}
.activity-block-next {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.activity-block-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--rp-text-muted);
    margin-bottom: 4px;
}
.activity-block-next .activity-block-label { color: #047857; }

/* Scrollable list inside dash-card body (Activity History, Project Involvement) */
.scrollable-list {
    max-height: 540px;
    overflow-y: auto;
}
.scrollable-list .activity-item { padding-left: 64px; }

/* Feed item icon circle (used in Recent Activity cards) */
.feed-item-icon-circle {
    font-size: 18px !important;
    width: 32px; height: 32px;
    background: var(--rp-bg-soft);
    color: var(--rp-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Key-Value list (vertical stack — label above value, no fixed-width column) */
.kv-list {
    display: flex; flex-direction: column;
    gap: 14px;
}
.kv-list .kv-row {
    display: block;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--rp-border-soft);
}
.kv-list .kv-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.kv-list .kv-label {
    display: block;
    color: var(--rp-text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: 3px;
}
.kv-list .kv-value {
    display: block;
    color: var(--rp-text);
    font-size: .85rem;
    word-break: break-word;
    line-height: 1.4;
}
.kv-list .kv-value.placeholder { color: var(--rp-text-soft); font-style: italic; }
.kv-list .kv-value a { color: var(--rp-accent); text-decoration: none; }
.kv-list .kv-value a:hover { text-decoration: underline; }

/* Activity feed item (Recent Activity from PIC) */
.feed-item {
    display: flex; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rp-border-soft);
    align-items: flex-start;
}
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-item-avatar {
    width: 32px; height: 32px;
    background: var(--rp-bg-soft);
    color: var(--rp-text-muted);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.feed-item-avatar.sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; }
.feed-item-body { flex-grow: 1; min-width: 0; }
.feed-item-name { font-size: .82rem; font-weight: 600; color: var(--rp-text); line-height: 1.3; }
.feed-item-meta { font-size: .72rem; color: var(--rp-text-muted); }
.feed-item-content { font-size: .82rem; color: var(--rp-text); margin: 2px 0 0; line-height: 1.3; }
.feed-item-icon {
    color: var(--rp-text-muted);
    flex-shrink: 0;
    align-self: center;
}
.feed-item-time {
    font-size: .7rem;
    color: var(--rp-text-muted);
    white-space: nowrap;
    align-self: center;
}

/* Linked project row (Top 5 Projects) */
.linked-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rp-border-soft);
    gap: 12px;
}
.linked-row:last-child { border-bottom: none; padding-bottom: 0; }
.linked-row-info { flex-grow: 1; min-width: 0; }
.linked-row-name { font-size: .85rem; font-weight: 600; color: var(--rp-text); line-height: 1.3; }
.linked-row-name a { color: inherit; text-decoration: none; }
.linked-row-name a:hover { color: var(--rp-accent); }
.linked-row-meta { font-size: .72rem; color: var(--rp-text-muted); }
.linked-row-side { font-size: .78rem; text-align: right; flex-shrink: 0; }
.linked-row-pic { color: var(--rp-text); }

/* PIC role chip (for project Key People & PIC profile) */
.pic-role-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .68rem;
    font-weight: 600;
    background: var(--rp-bg-soft);
    color: var(--rp-text);
    border: 1px solid var(--rp-border);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.pic-role-chip.role-dm { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pic-role-chip.role-influencer { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.pic-role-chip.role-technical { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.pic-role-chip.role-operational { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

/* Dark metric panel (PIC profile influence/warmth/decision placeholder) */
.metric-panel-dark {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex; gap: 24px; flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
}
.metric-item .metric-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    margin-bottom: 4px;
}
.metric-item .metric-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}
.metric-item .metric-value small { font-size: .65rem; opacity: .6; font-weight: 400; }
.metric-item .metric-bar {
    height: 4px; width: 80px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.metric-item .metric-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px;
}
.metric-item .metric-bar.placeholder > div { background: rgba(255,255,255,.2); width: 0; }

/* Expertise / hobby chip */
.expertise-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 14px;
    font-size: .75rem;
    font-weight: 500;
    margin: 2px;
    border: 1px solid #e2e8f0;
}

/* Document row */
.doc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rp-border-soft);
}
.doc-row:last-child { border-bottom: none; }
.doc-row-icon {
    width: 36px; height: 36px;
    background: var(--rp-bg-soft);
    color: var(--rp-text-muted);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.doc-row-info { flex-grow: 1; min-width: 0; }
.doc-row-name { font-size: .82rem; font-weight: 600; color: var(--rp-text); line-height: 1.3; }
.doc-row-meta { font-size: .7rem; color: var(--rp-text-muted); }
.doc-row-date { font-size: .72rem; color: var(--rp-text-muted); white-space: nowrap; }

/* Milestone steps (project) */
.milestone-steps {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 4px;
    overflow-x: auto;
}
.milestone-step {
    display: flex; flex-direction: column; align-items: center;
    flex: 1 1 0;
    position: relative;
    min-width: 80px;
}
.milestone-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--rp-border);
    z-index: 0;
}
.milestone-step.done:not(:last-child)::after { background: #10b981; }
.milestone-step .step-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--rp-bg-soft);
    border: 2px solid var(--rp-border);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    color: var(--rp-text-muted);
}
.milestone-step.done .step-dot { background: #10b981; border-color: #10b981; color: #fff; }
.milestone-step.done .step-dot .material-icons-outlined { font-size: 13px; }
.milestone-step.current .step-dot { background: #fff; border-color: var(--rp-accent); box-shadow: 0 0 0 3px rgba(14, 165, 233, .2); }
.milestone-step .step-label {
    font-size: .68rem;
    font-weight: 600;
    color: var(--rp-text);
    margin-top: 6px;
    white-space: nowrap;
}
.milestone-step .step-date {
    font-size: .62rem;
    color: var(--rp-text-muted);
}
.milestone-step.current .step-label { color: var(--rp-accent); }

.min-w-0 { min-width: 0; }

/* Detail row grid (g-3 already, but ensure spacing breathes) */
.row.cust-detail-row, .row.g-3 > .col-lg-2, .row.g-3 > .col-lg-10 { /* default ok */ }

@media (max-width: 768px) {
    .detail-hero { padding: 16px 20px; }
    .detail-hero .page-title { font-size: 19px !important; }
    .detail-tabs.flex-md-column { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
    .detail-tabs .nav-link { flex: 0 0 auto; }
    .detail-tabs .nav-link .badge { margin-left: 4px; }
}

/* ============================================================
   v0.7.0 — Corporate palette overrides (kontras AA, no clash)
   ============================================================ */

/* Bootstrap default badge text-color fixes (5.3.x kadang lupa set fg) */
.badge.bg-warning,
.badge.text-bg-warning,
.aging-badge.bg-warning { color: #78350f !important; }
.badge.bg-light,
.badge.text-bg-light { color: #1f2937 !important; background-color: #f3f4f6 !important; border: 1px solid #e5e7eb; }
.badge.bg-info,
.badge.text-bg-info { color: #ffffff !important; background-color: #0891b2 !important; }
.badge.bg-secondary,
.badge.text-bg-secondary { color: #ffffff !important; background-color: #64748b !important; }
.badge.bg-success,
.badge.text-bg-success { background-color: #16a34a !important; }
.badge.bg-primary,
.badge.text-bg-primary { background-color: #2563eb !important; }
.badge.bg-danger,
.badge.text-bg-danger { background-color: #dc2626 !important; }

/* Force kontras kalau ada 'text-white' di-pair dengan bg cerah (developer-typo guard) */
.bg-warning.text-white,
.bg-light.text-white,
.bg-info-subtle.text-white { color: #1f2937 !important; }

/* Custom amber badge utility (sudah dipakai untuk negosiasi) */
.badge.bg-amber, .bg-amber { background-color: #f59e0b !important; color: #1f2937 !important; }

/* Stat icon — tambah violet untuk App Settings */
.stat-icon.bg-violet { background: #ede9fe; color: #6d28d9; }

/* Status bar — tambah variant 'light' untuk Draft + perhalus existing */
.status-bar-light { background: #f8fafc; color: #475569; border: 1px dashed #cbd5e1; }
.status-bar-light::before { background: #94a3b8; }

/* Project status pill ala soft-corporate (dipakai opsional di kanban/list) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1px solid transparent;
}
.status-pill-draft               { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.status-pill-daftar              { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.status-pill-design              { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.status-pill-tender_kontraktor   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pill-kontraktor_pemenang { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.status-pill-negosiasi           { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.status-pill-po                  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill-lost                { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* Visibility row hover & secondary-text-on-yellow guard */
.vis-badge.division_only { color: #92400e !important; background: #fef3c7 !important; }

/* Aging badge — perhalus supaya text always readable */
.aging-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.aging-badge.bg-success { background: #ecfdf5 !important; color: #047857 !important; }
.aging-badge.bg-warning { background: #fffbeb !important; color: #92400e !important; }
.aging-badge.bg-danger  { background: #fef2f2 !important; color: #b91c1c !important; }

/* Tabel row khusus draft — kasih hint visual */
tr.row-draft, .project-row-draft { background: #fafbfc; }
tr.row-draft td { opacity: .82; }


/* RAB & Quotation status pills (extended) */
.status-pill-submitted   { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.status-pill-in_review   { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pill-approved    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill-rejected    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.status-pill-cancelled   { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.status-pill-sent        { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.status-pill-accepted    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* v0.11 — Activity / HPP / KKB status pills (extended) */
.status-pill-planned        { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.status-pill-auto_approved  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.status-pill-quoted         { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill-need_revision  { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.status-pill-mediasi        { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pill-disepakati     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.status-pill-disengketakan  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* v0.13 — Activity workflow status pills */
.status-pill-planning         { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.status-pill-waiting_approval { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.status-pill-finished         { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* Stat card text-warning soften */
.stat-card .stat-value.text-warning { color: #b45309 !important; }

/* =========================================================
   v0.8.0 — RAB Form layout (PDF FM-CC-01 mapping)
   ========================================================= */
.rab-card { border: 1px solid var(--rp-border); border-radius: 10px; background: #fff; margin-bottom: 16px; }
.rab-card-head { padding: 16px 22px; border-bottom: 1px solid var(--rp-border-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fafbfc; border-radius: 10px 10px 0 0; }
.rab-card-head h3 { font-size: 15px; font-weight: 700; margin: 0; color: #1f2937; display: flex; align-items: center; gap: 10px; }
.rab-card-head .rab-card-num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 10px; background: var(--rp-accent); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 700; }
.rab-card-body { padding: 20px 24px; }

/* Header info grid - 4 col equal */
.rab-header-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; }
.rab-header-grid .rab-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rab-header-grid .rab-field label { font-size: 12px; font-weight: 600; color: var(--rp-text-muted); text-transform: uppercase; letter-spacing: .3px; margin: 0; }
.rab-header-grid .rab-field-readonly { font-size: 14px; color: #1f2937; padding: 8px 0; min-height: 36px; word-wrap: break-word; }
.rab-header-grid .rab-field input,
.rab-header-grid .rab-field select { font-size: 14px; }
.rab-header-grid .rab-field.col-2 { grid-column: span 2; }
.rab-header-grid .rab-field.col-full { grid-column: 1 / -1; }
@media (max-width: 992px) { .rab-header-grid { grid-template-columns: repeat(2, 1fr); } .rab-header-grid .rab-field.col-2, .rab-header-grid .rab-field.col-full { grid-column: 1 / -1; } }

/* Line items table */
.rab-line-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.rab-line-table thead th { background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 11px 10px; border-bottom: 1px solid var(--rp-border); white-space: nowrap; }
.rab-line-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--rp-border-soft); vertical-align: top; }
.rab-line-table tbody tr:last-child td { border-bottom: none; }
.rab-line-table input[type="text"],
.rab-line-table input[type="number"],
.rab-line-table select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--rp-border); border-radius: 4px; width: 100%; }
.rab-line-table input:focus, .rab-line-table select:focus { outline: none; border-color: var(--rp-accent); box-shadow: 0 0 0 2px rgba(59,130,246,.12); }
.rab-line-table .col-no       { width: 60px; }
.rab-line-table .col-acct     { width: 110px; }
.rab-line-table .col-qty      { width: 80px; text-align: right; }
.rab-line-table .col-unit     { width: 80px; }
.rab-line-table .col-price    { width: 150px; text-align: right; }
.rab-line-table .col-total    { width: 160px; text-align: right; font-weight: 600; }
.rab-line-table .col-action   { width: 36px; text-align: center; }
.rab-line-table .col-desc     { min-width: 240px; }
.rab-line-table td.numeric    { text-align: right; }
.rab-line-table tr.section-divider td { background: #fafbfc; font-weight: 700; color: #1f2937; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.rab-line-table .btn-add-line { background: #f0f9ff; color: #1d4ed8; border: 1px dashed #93c5fd; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.rab-line-table .btn-add-line:hover { background: #dbeafe; }
.rab-line-table .btn-del-line { background: transparent; color: #dc2626; border: none; padding: 4px; cursor: pointer; }
.rab-line-table .btn-del-line:hover { background: #fef2f2; border-radius: 4px; }

/* Summary panel di kanan form */
.rab-summary-panel { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border: 1px solid var(--rp-border); border-radius: 10px; padding: 16px 18px; position: sticky; top: 16px; }
.rab-summary-panel h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rp-border-soft); }
.rab-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 12.5px; gap: 12px; }
.rab-summary-row.divider { border-top: 1px dashed var(--rp-border-soft); padding-top: 10px; margin-top: 6px; }
.rab-summary-row.highlight { border-top: 2px solid var(--rp-accent); margin-top: 10px; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--rp-accent); }
.rab-summary-row .label { color: var(--rp-text-muted); flex: 1 1 auto; min-width: 0; }
.rab-summary-row .value { font-weight: 600; color: #1f2937; text-align: right; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rab-summary-row .value.positive { color: #047857; }
.rab-summary-row .value.danger { color: #b91c1c; }

/* Tipe RAB radio cards */
.rab-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rab-type-card { border: 1px solid var(--rp-border); border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: all .15s; background: #fff; }
.rab-type-card:hover { border-color: var(--rp-accent); }
.rab-type-card input { display: none; }
.rab-type-card input:checked + .rab-type-inner { color: var(--rp-accent); }
.rab-type-card:has(input:checked) { border-color: var(--rp-accent); background: #eff6ff; box-shadow: 0 0 0 2px rgba(59,130,246,.12); }
.rab-type-inner h5 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.rab-type-inner p { font-size: 11px; color: var(--rp-text-muted); margin: 0; line-height: 1.4; }
@media (max-width: 768px) { .rab-type-grid { grid-template-columns: 1fr; } }

/* BU chips selector */
.rab-bu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rab-bu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--rp-border); background: #fff; font-size: 12px; cursor: pointer; user-select: none; transition: all .15s; }
.rab-bu-chip:hover { border-color: var(--rp-accent); }
.rab-bu-chip input { display: none; }
.rab-bu-chip:has(input:checked) { background: #eff6ff; border-color: var(--rp-accent); color: #1d4ed8; font-weight: 600; }
.rab-bu-chip .bu-pt { font-size: 10px; padding: 1px 6px; background: #f1f5f9; color: #64748b; border-radius: 8px; font-weight: 700; }
.rab-bu-chip.locked { cursor: not-allowed; opacity: .55; }
.rab-bu-chip.locked::after { content: '🔒'; font-size: 10px; margin-left: 4px; }

/* TOP table */
.rab-top-table { width: 100%; font-size: 12.5px; }
.rab-top-table thead th { background: #f1f5f9; color: #475569; font-size: 11px; padding: 6px 8px; }
.rab-top-table tbody td { padding: 5px 8px; border-bottom: 1px solid var(--rp-border-soft); }
.rab-top-table input { font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--rp-border); border-radius: 4px; }
.rab-top-table .col-pct, .rab-top-table .col-days { text-align: right; }
.rab-top-table tr.total-row td { font-weight: 700; background: #f8fafc; }

/* RAB Project Banner */
.rab-project-banner { background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); border: 1px solid #bfdbfe; border-radius: 10px; padding: 18px 22px; }
.rab-project-banner-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.rab-project-banner .rab-project-name { font-size: 22px; font-weight: 700; color: #1e3a8a; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.rab-project-banner .rab-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rab-project-banner .rab-project-konsultan-info { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #bfdbfe; color: #475569; }
@media (max-width: 768px) { .rab-project-banner .rab-project-name { font-size: 18px; } }

/* RAB Document-style header (replica PDF FM-CC-01) */
.rab-card-document { border: 1px solid #d1d9e2; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.rab-card-document .rab-card-head { background: #f6f9fc; border-bottom: 1px solid #d1d9e2; border-radius: 8px 8px 0 0; padding: 11px 18px; }
.rab-card-document .rab-card-head h3 { color: #1e3a8a; font-size: 13.5px; }
.rab-card-document .rab-card-head .rab-card-num { background: #2563eb; color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.rab-card-document .rab-card-head small { color: #64748b !important; font-style: italic; }

.rab-doc-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    background: #fff;
}
.rab-doc-cell {
    padding: 12px 16px;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    background: #fff;
    min-height: 78px;
    display: flex; flex-direction: column; gap: 6px;
    transition: background .2s;
}
.rab-doc-cell:nth-child(3n) { border-right: none; }
.rab-doc-cell:nth-last-child(-n+3) { border-bottom: none; }
.rab-doc-cell label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    color: #64748b; margin: 0;
}
.rab-doc-cell .rab-doc-value { font-size: 13px; color: #1f2937; padding: 3px 0; line-height: 1.5; }
.rab-doc-cell .rab-doc-value.rab-doc-emphasis { font-weight: 700; color: #1e40af; font-size: 14px; }
.rab-doc-cell .rab-doc-input {
    width: 100%;
    border: 1px solid #cbd5e1; border-radius: 4px;
    padding: 5px 9px; font-size: 13px;
    background: #f8fafc;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.rab-doc-cell .rab-doc-input:hover { background: #fff; border-color: #93c5fd; }
.rab-doc-cell .rab-doc-input:focus {
    outline: none; background: #fff; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.rab-doc-cell.rab-locked { background: #fafbfc; }
.rab-doc-cell.rab-locked label { color: #94a3b8; }
.rab-doc-cell.rab-doc-pelanggan { background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); }
.rab-doc-cell.rab-doc-pelanggan label { color: #92400e; }
.rab-doc-cell.rab-doc-warning { background: #fef2f2; }

.rab-doc-pt-row { padding: 12px 16px; border-top: 2px solid #e5e7eb; background: #f8fafc; }
.rab-doc-pt-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #64748b; margin: 0; }

@media (max-width: 768px) {
    .rab-doc-grid { grid-template-columns: 1fr 1fr; }
    .rab-doc-cell { border-right: 1px solid #cbd5e1 !important; }
    .rab-doc-cell:nth-child(2n) { border-right: none !important; }
}
@media (max-width: 480px) {
    .rab-doc-grid { grid-template-columns: 1fr; }
    .rab-doc-cell { border-right: none !important; }
}

/* RAB Subsection (tree-style line items, replica PDF) */
.rab-subsection { border-top: 1px solid #cbd5e1; }
.rab-subsection:first-child { border-top: none; }
.rab-subsection.has-children > .rab-subsection-rows { display: none; }
.rab-subsection-head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    background: #fbfcfe;
    border-bottom: 1px solid #e5e9ef;
}
.rab-subsection .rab-subsection .rab-subsection-head { background: #fdfdfe; padding-left: 32px; }
.rab-subsection-no {
    font-weight: 700; color: #1e3a8a; font-size: 12.5px;
    background: #fff; border: 1px solid #cbd5e1; padding: 2px 8px; border-radius: 4px;
    flex-shrink: 0; min-width: 50px; text-align: center;
}
.rab-subsection-label { flex: 1 1 auto; font-size: 12px; color: #1f2937; line-height: 1.4; min-width: 0; }
.rab-subsection-code { font-size: 10.5px; color: #64748b; background: #fff; padding: 2px 6px; border-radius: 3px; border: 1px solid #e2e8f0; flex-shrink: 0; }
.rab-subsection-add {
    background: #2563eb; color: #fff; border: none; padding: 4px 10px;
    border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer;
    flex-shrink: 0; transition: background .15s;
}
.rab-subsection-add:hover { background: #1d4ed8; }

.rab-subsection-rows { padding: 0; }
.rab-subsection-empty { padding: 12px 20px; background: #fafbfc; border-bottom: 1px solid #e2e8f0; }

/* Document-style line table (PDF mirror) */
.rab-line-table-document { width: 100%; border-collapse: collapse; }
.rab-line-table-document td {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    vertical-align: middle;
    font-size: 12.5px;
}
.rab-line-table-document td:last-child { border-right: none; }
.rab-line-table-document tr:last-child td { border-bottom: none; }
.rab-line-table-document .rab-doc-input { width: 100%; font-variant-numeric: tabular-nums; }
.rab-line-table-document .text-end, .rab-line-table-document .text-end input { text-align: right; }
.rab-line-table-document .text-center, .rab-line-table-document .text-center input { text-align: center; }
.rab-line-table-document input.an-money, .rab-line-table-document input.an-qty, .rab-line-table-document input.an-persen { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.rab-line-table-document td.qo-item-total { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; padding-right: 12px; }
.rab-line-table-document .btn-del-line { background: transparent; color: #dc2626; border: none; padding: 2px 4px; cursor: pointer; border-radius: 3px; }
.rab-line-table-document .btn-del-line:hover { background: #fef2f2; }

/* TOP table document style */
.rab-top-table-document { width: 100%; border-collapse: collapse; }
.rab-top-table-document thead th { background: #1e3a8a; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 8px 14px; text-align: left; border-right: 1px solid #1e40af; }
.rab-top-table-document thead th:last-child { border-right: none; }
.rab-top-table-document thead th.col-pct { width: 120px; text-align: right; }
.rab-top-table-document thead th.col-days { width: 240px; text-align: right; }
.rab-top-table-document tbody td { padding: 8px 14px; border-bottom: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; font-size: 12.5px; font-weight: 600; color: #1f2937; }
.rab-top-table-document tbody td:last-child { border-right: none; }
.rab-top-table-document tbody td input { font-weight: 500; }
.rab-top-table-document tr.total-row td { background: #f1f5f9; font-weight: 700; color: #1e3a8a; }

/* Summary document style */
.rab-summary-document { padding: 0; border: 2px solid #1e3a8a; overflow: hidden; }
.rab-summary-document .rab-summary-head { background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%); padding: 12px 18px; }
.rab-summary-document .rab-summary-head h4 { color: #fff; margin: 0; font-size: 14px; font-weight: 700; }
.rab-summary-document .rab-summary-head small { color: #c7d2fe; font-style: italic; display: block; margin-top: 2px; }
.rab-summary-document .rab-summary-body { padding: 16px 18px; }
.rab-summary-document .rab-summary-row.highlight { background: #eff6ff; margin: 10px -18px -16px; padding: 14px 18px; border-top: 2px solid #1e3a8a; }

/* Smooth hover for editable cells */
.rab-doc-input:not(:disabled):not([readonly]):hover { background: #fff; border-color: #93c5fd; }

/* Summary panel di atas form, sticky scroll */
/* Sticky summary: wrap padding-bottom = visible gap saat scroll, bg solid match page */
.rab-summary-sticky-wrap {
    position: sticky;
    top: 56px;
    z-index: 100;
    padding-bottom: 20px;
    background-color: #f8fafc;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
}
.rab-summary-sticky {
    box-shadow: 0 6px 20px rgba(30,58,138,.22);
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
}
.rab-summary-sticky .rab-summary-head { padding: 10px 18px; }
.rab-summary-sticky .rab-summary-head h4 { font-size: 13px; }
.rab-summary-sticky .rab-summary-head small { font-size: 10.5px; }
.rab-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.rab-summary-cell {
    padding: 8px 12px;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    display: flex; flex-direction: column; gap: 2px;
}
.rab-summary-cell:nth-child(4n) { border-right: none; }
.rab-summary-cell:nth-last-child(-n+4) { border-bottom: none; }
.rab-summary-cell .label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.rab-summary-cell .value { font-size: 13px; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }
.rab-summary-cell .value.positive { color: #047857; }
.rab-summary-cell.highlight { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.rab-summary-cell.highlight .label { color: #1e3a8a; }
.rab-summary-cell.highlight .value { color: #1e3a8a; font-size: 14px; }
@media (max-width: 992px) { .rab-summary-grid { grid-template-columns: repeat(2, 1fr); } .rab-summary-cell { border-right: 1px solid #cbd5e1 !important; } .rab-summary-cell:nth-child(2n) { border-right: none !important; } }

/* Summary value color rules */
.rab-summary-cell .value.value-red    { color: #b91c1c !important; }
.rab-summary-cell .value.value-orange { color: #c2410c !important; }
.rab-summary-cell .value.value-green  { color: #047857 !important; }
.rab-summary-cell.highlight .value.value-red    { color: #b91c1c !important; }
.rab-summary-cell.highlight .value.value-orange { color: #c2410c !important; }
.rab-summary-cell.highlight .value.value-green  { color: #047857 !important; }

/* Validation highlight (saat submit gagal) */
.rab-validation-highlight {
    animation: pulseHighlight 1.2s ease-in-out 0s 3;
    box-shadow: 0 0 0 3px rgba(220,38,38,.4) !important;
    border-color: #dc2626 !important;
}
@keyframes pulseHighlight {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220,38,38,.4); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,.15); }
}

/* Locked rate mode: hide first column when no description */
.rab-line-table-document.rab-line-locked-mode tbody tr { background: #fafbfc; }

/* Bootstrap extra small button + icon-xs */
.btn-xs { padding: 2px 8px; font-size: 11px; line-height: 1.4; border-radius: 4px; }
.btn-xs .material-icons-outlined { font-size: 14px; }

/* Locked rate row: visual plain text, no input box */
.line-row[data-locked="1"] .rab-doc-input {
    border: none !important;
    background: transparent !important;
    padding: 6px 4px !important;
    box-shadow: none !important;
    color: #1f2937;
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}
.line-row[data-locked="1"] td { background: #f8fafc; vertical-align: middle; }
.line-row[data-locked="1"] .rab-doc-input.line-unit { font-weight: 700; color: #64748b; text-align: center; }

/* Quotation Live Preview */
.qo-preview-wrap { position: sticky; top: 76px; }
.qo-preview-head {
    padding: 8px 14px;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.qo-preview-head h4 { margin: 0; font-size: 12px; font-weight: 700; color: #1e40af; }
.qo-preview-head small { color: #64748b; font-style: italic; font-size: 10px; }
.qo-preview-paper {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0;
    min-height: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

@media (max-width: 992px) { .qo-preview-wrap { position: static; margin-top: 16px; } }

/* ============ RAB Show — Summary cards grid (overview) ============ */
.rab-summary-show {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.rab-summary-show-cell {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    padding: 14px 16px;
    transition: transform .15s, box-shadow .15s;
}
.rab-summary-show-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.rab-summary-show-cell .label { font-size: 11px; font-weight: 600; color: var(--rp-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.rab-summary-show-cell .value { font-size: 16px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.rab-summary-show-cell .sub-value { font-size: 11px; color: var(--rp-text-muted); margin-top: 2px; }
.rab-summary-show-cell.highlight {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #93c5fd;
    grid-column: span 1;
}
.rab-summary-show-cell.highlight .label { color: #1e3a8a; }
@media (max-width: 992px) { .rab-summary-show { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .rab-summary-show { grid-template-columns: 1fr; } }

/* ============ Approval Stepper (Timeline) ============ */
.approval-stepper {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.approval-step {
    display: flex;
    gap: 16px;
    padding: 14px 0 14px 0;
    position: relative;
}
/* Connecting line */
.approval-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 50px;
    bottom: -10px;
    width: 2px;
    background: var(--rp-border);
    z-index: 0;
}
.approval-step-done:not(:last-child)::before { background: #16a34a; }
.approval-step-current:not(:last-child)::before { background: linear-gradient(180deg, #2563eb 0%, var(--rp-border) 100%); }

.approval-step-marker {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    box-shadow: 0 0 0 4px #fff;
}
.approval-step-marker .material-icons-outlined { font-size: 20px; }
.approval-step-done .approval-step-marker { background: #16a34a; color: #fff; }
.approval-step-current .approval-step-marker {
    background: #2563eb; color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(37,99,235,.18);
    animation: pulseStep 1.8s ease-in-out infinite;
}
.approval-step-pending .approval-step-marker { background: var(--rp-bg-soft); color: var(--rp-text-soft); border: 1px solid var(--rp-border); }
@keyframes pulseStep {
    0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(37,99,235,.18); }
    50% { box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgba(37,99,235,.08); }
}

.approval-step-body { flex: 1 1 auto; padding-top: 4px; }
.approval-step-title { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.approval-step-done .approval-step-title { color: #047857; }
.approval-step-current .approval-step-title { color: #1d4ed8; }
.approval-step-pending .approval-step-title { color: var(--rp-text-muted); }
.approval-step-role { font-size: 11px; color: var(--rp-text-muted); margin-top: 1px; }
.approval-step-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.approval-step-note { margin-top: 4px; font-size: 11.5px; color: #64748b; font-style: italic; padding: 4px 8px; background: var(--rp-bg-soft); border-left: 3px solid var(--rp-border); border-radius: 0 4px 4px 0; }

/* Progress bar */
.approval-progress-bar { height: 8px; background: var(--rp-bg-soft); border-radius: 4px; overflow: hidden; }
.approval-progress-fill { height: 100%; background: linear-gradient(90deg, #16a34a, #2563eb); transition: width .5s ease; border-radius: 4px; }

/* kv-label for overview info display */
.kv-label { font-size: 11px; font-weight: 600; color: var(--rp-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.kv-value { font-size: 14px; color: #0f172a; }

/* ============ Approval Stepper HORIZONTAL ============ */
.approval-stepper-h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 8px 0;
}
.approval-h-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 0 0 auto;
    min-width: 80px;
    position: relative;
    z-index: 1;
}
.approval-h-marker {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    box-shadow: 0 0 0 4px #fff;
    flex-shrink: 0;
    transition: all .2s;
}
.approval-h-marker .material-icons-outlined { font-size: 18px; }
.approval-h-done .approval-h-marker { background: #16a34a; color: #fff; }
.approval-h-current .approval-h-marker {
    background: #2563eb; color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(37,99,235,.2);
    animation: pulseH 1.8s ease-in-out infinite;
}
.approval-h-pending .approval-h-marker { background: var(--rp-bg-soft); color: var(--rp-text-soft); border: 1px solid var(--rp-border); }
@keyframes pulseH {
    0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(37,99,235,.2); }
    50% { box-shadow: 0 0 0 4px #fff, 0 0 0 14px rgba(37,99,235,.06); }
}

.approval-h-label { width: 100%; max-width: 110px; }
.approval-h-name { font-size: 12px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.approval-h-done .approval-h-name { color: #047857; }
.approval-h-current .approval-h-name { color: #1d4ed8; }
.approval-h-pending .approval-h-name { color: var(--rp-text-muted); }
.approval-h-role { font-size: 10px; color: var(--rp-text-muted); margin-top: 2px; line-height: 1.2; }
.approval-h-approver {
    font-size: 10px;
    color: #047857;
    margin-top: 3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.approval-h-connector {
    flex: 1 1 auto;
    height: 2px;
    background: var(--rp-border);
    margin-top: 18px;
    min-width: 20px;
    border-radius: 2px;
}
.approval-h-conn-done { background: #16a34a; }
.approval-h-conn-pending { background: var(--rp-border); }

@media (max-width: 768px) {
    .approval-stepper-h { overflow-x: auto; padding-bottom: 12px; }
    .approval-h-step { min-width: 75px; }
    .approval-h-connector { min-width: 14px; }
}

/* Hero meta cards — proper card box */
.detail-hero-rich .hero-meta-card {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 150px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.detail-hero-rich .hero-meta-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,.08);
    border-color: #cbd5e1;
}
.detail-hero-rich .hero-meta-card .hero-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--rp-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.detail-hero-rich .hero-meta-card .hero-meta-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.detail-hero-rich .hero-meta-card .hero-meta-value.text-success { color: #047857; }
.detail-hero-rich .hero-meta-card .hero-meta-value.text-warning { color: #b45309; }
.detail-hero-rich .hero-meta-card .hero-meta-value.text-danger { color: #b91c1c; }

/* Subtotal row per subsection */
.rab-subsection-subtotal { background: #fafbfc; }
.rab-subsection-subtotal td { border-top: 1pt solid #e5e7eb; padding-top: 6px !important; padding-bottom: 6px !important; }

/* Compact subsection (locked rate 1-liner) */
.rab-subsection-compact { border-bottom: 1px solid var(--rp-border-soft); }
.rab-subsection-head-compact {
    display: grid;
    grid-template-columns: 50px minmax(160px, 1fr) auto 70px 160px 150px;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    background: #fafbfc;
}
.rab-subsection-head-compact .rab-subsection-label { font-size: 12.5px; line-height: 1.4; }
.rab-compact-qty { font-weight: 700; color: #1e3a8a; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rab-compact-base { font-size: 12px; color: var(--rp-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.rab-compact-base .rp-cell { font-size: 11.5px; }
.rab-compact-total { font-weight: 700; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 992px) {
    .rab-subsection-head-compact { grid-template-columns: 40px 1fr; row-gap: 4px; }
    .rab-subsection-head-compact > * { grid-column: 1 / -1; text-align: left; }
    .rab-subsection-head-compact .rab-subsection-no { grid-column: 1; grid-row: 1; }
    .rab-subsection-head-compact .rab-subsection-label { grid-column: 2; grid-row: 1; }
}

/* Data row description — indent supaya feel masuk ke dalam subsection */
.rab-line-data .rab-line-desc { padding-left: 64px !important; color: #374151; }
.rab-line-data td { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 12.5px; }
.rab-line-data td.text-end, .rab-line-data td .text-end { font-variant-numeric: tabular-nums; }

/* Konsistensi font seluruh detail RAB */
.dash-card,
.dash-card .table,
.dash-card .table td,
.dash-card .table th,
.rab-line-table-document,
.rab-line-table-document td,
.rab-subsection-head,
.rab-subsection-head-compact,
.approval-h-step,
.hero-meta-card {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Force monospace-only di nomor/code untuk distinguishability */
.rab-subsection-code,
.rab-subsection-no,
code.text-muted,
.hero-status-row code {
    font-family: 'DejaVu Sans Mono', 'Consolas', monospace;
}

/* Konsistensi value cells dengan tabular-nums */
.dash-card .table td.text-end,
.dash-card .table th.text-end {
    font-variant-numeric: tabular-nums;
}

/* Accounting Rp format — Rp di kiri (muted), angka rata kanan tabular-nums.
   Max angka 500.000.000.000 (12 digit) → ~125px content. */
.rp-cell {
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 130px;
    max-width: 150px;
}
.rp-cell .rp-cur {
    color: #94a3b8;
    font-weight: 400;
    font-size: .88em;
    flex-shrink: 0;
}
.rp-cell .rp-val {
    text-align: right;
    font-weight: inherit;
    flex: 0 0 auto;
}

/* Allow shrink di dalam table cells & compact rows supaya tidak overflow */
.rab-line-table-document td .rp-cell,
.rab-form-compact-row .rp-cell,
.rab-compact-base .rp-cell,
.rab-compact-total .rp-cell,
.dash-card .table td .rp-cell {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* RAB Form compact row (locked rates / BOP single line) */
.rab-subsection-form-compact { border-bottom: 1px solid var(--rp-border-soft); }
.rab-form-compact-row {
    display: grid;
    grid-template-columns: 50px minmax(180px,1fr) auto 90px auto 150px auto 150px auto;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: #fafbfc;
}
.rab-form-compact-row .rab-fc-no {
    background: #fff;
    border: 1px solid var(--rp-border);
    color: #1e3a8a;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    min-width: 50px;
}
.rab-form-compact-row .rab-fc-label { font-size: 12px; color: #1f2937; line-height: 1.4; }
.rab-form-compact-row .rab-fc-code {
    background: #fff;
    border: 1px solid var(--rp-border);
    color: var(--rp-text-muted);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
}
.rab-form-compact-row .rab-fc-qty { display: flex; align-items: center; gap: 4px; }
.rab-form-compact-row .rab-fc-pct { font-weight: 600; color: var(--rp-text-muted); }
.rab-form-compact-row .rab-fc-times,
.rab-form-compact-row .rab-fc-equals { font-size: 14px; padding: 0 4px; }
.rab-form-compact-row .rab-fc-input {
    width: 100%;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.rab-form-compact-row .rab-fc-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.rab-form-compact-row .rab-fc-input[readonly] { background: #f3f4f6; cursor: default; }
.rab-form-compact-row .rab-fc-lock,
.rab-form-compact-row .rab-fc-edit-hint { white-space: nowrap; }

@media (max-width: 992px) {
    .rab-form-compact-row { grid-template-columns: auto 1fr; row-gap: 6px; }
    .rab-form-compact-row > * { grid-column: 1 / -1; }
    .rab-form-compact-row .rab-fc-no, .rab-form-compact-row .rab-fc-code { grid-column: auto; }
}

/* Prev RAB column (saat edit revisi) — patokan harga revisi sebelumnya */
.prev-rab-cell { background: #fffbeb; border-left: 1px dashed #f59e0b; padding: 4px 8px !important; }
.prev-rab-value { font-size: 11px; line-height: 1.3; text-align: right; }
.prev-rab-value .prev-rab-label { color: #92400e; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 9px; }
.prev-rab-value .prev-rab-amount { font-weight: 600; color: #92400e; font-variant-numeric: tabular-nums; }
.prev-rab-value.is-changed .prev-rab-amount { text-decoration: line-through; opacity: .7; }
.prev-rab-value .prev-rab-diff { font-weight: 700; margin-top: 1px; font-size: 10.5px; font-variant-numeric: tabular-nums; }


/* === Filter collapse pattern === */
.filter-toggle-bar { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
.filter-toggle-bar .filter-toggle-chips .badge { font-weight: 500; font-size: 11px; padding: 4px 8px; }
.filter-toggle-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.filter-toggle-btn .filter-chevron { transition: transform 0.2s ease; }
.filter-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-top: 8px; }
.filter-panel-tabs { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px 8px; margin-top: 8px; }

/* === Quotation Live Preview (mirror PDF) ============================ */
.qo-paper-modern {
    position: relative;
    padding: 16px 18px 20px;
    font-family: Helvetica, Arial, sans-serif;
    color: #1e293b;
    font-size: 11px;
    line-height: 1.4;
    background: #fff;
}
.qo-paper-modern .qo-pgnum {
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 8.5px;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

/* Header strip */
.qo-prev-hdr {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 8px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #cbd5e1;
}
.qo-prev-hdr td { vertical-align: middle; padding: 0; }
.qo-prev-hdr td.qo-prev-hdr-l { width: 55%; }
.qo-prev-hdr td.qo-prev-hdr-r { width: 45%; text-align: right; }
.qo-prev-logo {
    display: inline-block;
    vertical-align: middle;
    width: 32px; height: 32px;
    background: #2563eb;
    color: #fff;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    margin-right: 8px;
}
.qo-prev-pt {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.qo-prev-pt .qo-prev-tagline {
    display: block;
    font-size: 9px;
    font-weight: 400;
    color: #64748b;
    margin-top: 1px;
}
.qo-prev-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 2px;
    line-height: 1;
}
.qo-prev-no {
    font-size: 10.5px;
    font-weight: 700;
    color: #2563eb;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

/* Date strip */
.qo-prev-dates {
    text-align: right;
    font-size: 10.5px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.qo-prev-dates .lbl {
    color: #64748b;
    display: inline-block;
    min-width: 64px;
    text-align: left;
}

/* TO + PROJECT */
.qo-prev-addr {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 12px;
}
.qo-prev-addr td { vertical-align: top; padding: 0; width: 50%; }
.qo-prev-addr td.qo-prev-addr-l { padding-right: 8px; }
.qo-prev-addr td.qo-prev-addr-r { padding-left: 8px; }
.qo-prev-addr-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 3px;
}
.qo-prev-addr-name { font-size: 11px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.qo-prev-addr-body { font-size: 10.5px; color: #1e293b; line-height: 1.4; white-space: pre-line; }
.qo-prev-attn { font-size: 10.5px; color: #1e293b; margin-top: 3px; }
.qo-prev-attn .attn-lbl { color: #64748b; }
#qo-prev-pics .pic-row { font-size: 10.5px; color: #1e293b; margin-top: 3px; line-height: 1.35; }
#qo-prev-pics .pic-row .attn-lbl { color: #64748b; }
#qo-prev-pics .pic-row .pic-jab { color: #64748b; font-size: 9.5px; }

/* Greeting */
.qo-prev-greeting {
    font-size: 10.5px;
    line-height: 1.5;
    margin: 0 0 10px;
    white-space: pre-line;
}

/* Items */
.qo-prev-items {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0;
    table-layout: fixed;
}
.qo-prev-items thead th {
    background: #f1f5f9;
    color: #0f172a;
    padding: 5px 7px;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid #2563eb;
    text-align: left;
}
.qo-prev-items thead th.text-end { text-align: right; }
.qo-prev-items thead th.text-center { text-align: center; }
.qo-prev-items td {
    padding: 4px 7px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 10.5px;
    vertical-align: middle;
    line-height: 1.4;
    word-wrap: break-word;
}
.qo-prev-items td.text-end { text-align: right; font-variant-numeric: tabular-nums; }
.qo-prev-items td.text-center { text-align: center; }
.qo-prev-items td.no { color: #2563eb; text-align: center; font-weight: 700; }

/* Totals — kiri: bank info, kanan: totals card */
.qo-prev-totals-layout {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 12px;
}
.qo-prev-totals-layout td { vertical-align: top; padding: 0; }
.qo-prev-totals-layout td.qo-prev-bank-cell { width: 52%; padding-right: 10px; }
.qo-prev-totals-layout td.qo-prev-totals-cell { width: 48%; text-align: right; }
.qo-prev-bank-box { border: 1px solid #cbd5e1; padding: 7px 10px; }
.qo-prev-bank-title {
    font-size: 9px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1.5px solid #2563eb;
}
.qo-prev-bank-body { font-size: 10px; color: #1e293b; line-height: 1.5; }
.qo-prev-bank-body .bank-name { font-weight: 700; color: #0f172a; }
.qo-prev-totals {
    border-collapse: collapse;
    width: auto;
    table-layout: auto;
    display: inline-table;
    text-align: left;
}
.qo-prev-totals td {
    padding: 3px 12px;
    font-size: 10.5px;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}
.qo-prev-totals td.lbl {
    color: #475569;
    text-align: right;
    min-width: 110px;
}
.qo-prev-totals td.val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #0f172a;
    min-width: 140px;
}
.qo-prev-totals tr.row td { border-bottom: 1px solid #f1f5f9; }
.qo-prev-totals tr.disc td { color: #64748b; font-size: 10px; }
.qo-prev-totals tr.grand td {
    background: #eff6ff;
    color: #1e40af !important;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    border-top: 2px solid #2563eb;
    letter-spacing: 0.3px;
}
.qo-prev-totals tr.grand td.lbl { text-transform: uppercase; font-size: 10.5px; color: #1e40af !important; }
.qo-prev-totals tr.grand td.val { color: #1e40af !important; }

/* TOP + Notes — stacked (atas-bawah) */
.qo-prev-block { width: 100%; margin: 0 0 10px; }
.qo-prev-bot-title {
    font-size: 9px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 4px;
    padding-bottom: 3px;
    border-bottom: 1.5px solid #2563eb;
}
.qo-prev-top-table { width: 100%; border-collapse: collapse; }
.qo-prev-top-table td {
    padding: 3px 4px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 10px;
    vertical-align: top;
    line-height: 1.4;
}
.qo-prev-top-table td.pct {
    color: #2563eb;
    font-weight: 700;
    text-align: right;
    width: 32px;
    font-variant-numeric: tabular-nums;
}
.qo-prev-top-table td.name { font-weight: 600; color: #0f172a; }
.qo-prev-top-table td.desc { color: #475569; }
.qo-prev-top-table td.days {
    color: #64748b;
    white-space: nowrap;
    text-align: right;
    width: 70px;
    font-size: 9.5px;
}
.qo-prev-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 10px;
    padding: 4px 0;
}
.qo-paper-modern ul#qo-prev-notes {
    margin: 0;
    padding-left: 16px;
    font-size: 10px;
    color: #1e293b;
    line-height: 1.45;
}
.qo-paper-modern ul#qo-prev-notes li { margin-bottom: 3px; }

/* Closing + Signature */
.qo-prev-closing {
    font-size: 10.5px;
    color: #1e293b;
    line-height: 1.45;
    margin: 10px 0 12px;
    white-space: pre-line;
}
.qo-prev-sig { margin-top: 6px; }
.qo-prev-sig-h { font-size: 10.5px; color: #1e293b; margin-bottom: 4px; }
.qo-prev-sig-qr {
    width: 56px;
    height: 56px;
    border: 1px dashed #cbd5e1;
    text-align: center;
    line-height: 56px;
    color: #94a3b8;
    font-size: 8px;
    font-style: italic;
    margin-bottom: 4px;
}
.qo-prev-sig-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 10.5px;
    text-decoration: underline;
    display: inline-block;
}
.qo-prev-sig-role { font-size: 10px; color: #1e293b; margin-top: 1px; }