:root { color-scheme: light; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --primary: #fbbf24; --hero-background: linear-gradient(135deg, #15263f 0%, #203956 55%, #2a4866 100%); }
        * { box-sizing: border-box; } body { margin: 0; font: 15px/1.55 system-ui, sans-serif; background: #f8fafc; color: var(--ink); }
        a { color: var(--primary); text-underline-offset: 3px; } button,input,select { font: inherit; } button,a,input,select,summary { outline-offset: 4px; }
        h1,h2,h3,p { margin-top: 0; } h1 { font-size: clamp(25px,4vw,34px); letter-spacing: -.035em; margin-bottom: 8px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
        .shell { display: grid; grid-template-columns: 232px minmax(0,1fr); min-height: 100vh; }
        .sidebar { background: #fff; border-right: 1px solid var(--line); padding: 28px 20px; }
        .brand { text-decoration: none; font-size: 21px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); } .brand small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
        nav { display: grid; gap: 8px; margin-top: 32px; } nav a { padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); } nav a[aria-current="page"] { background: #fffbeb; color: var(--primary); font-weight: 650; } nav a:hover { background: #f8fafc; }
        .workspace { min-width: 0; } .topbar { background: #fff; padding: 15px 32px; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
        main { max-width: 1300px; padding: 32px; margin: auto; } .eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .12em; font-weight: 750; text-transform: uppercase; margin-bottom: 8px; }
        .muted { color: var(--muted); } .small { font-size: 12px; } .page-heading { margin-bottom: 26px; } .panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
        .stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 16px; margin-bottom: 24px; } .stat { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .stat strong { display: block; font-size: 32px; letter-spacing: -.04em; }
        .fields,.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:end; } .actions { align-items:center; } .fields label { display:grid; gap:6px; flex:1 1 170px; } label { font-size: 13px; font-weight: 600; }
        input,select { max-width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:7px; background:white; min-height:43px; color:var(--ink); } input[type="hidden"] { display:none; }
        button,.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:10px 16px; min-height:43px; border:1px solid var(--primary); background:var(--primary); border-radius:7px; color:white; font-weight:600; cursor:pointer; text-decoration:none; font-size:13px; }
        .secondary { background:white; color:var(--primary); border-color:#cbd5e1; } .danger { background:#fff4f3; color:#a1352a; border-color:#e8c1bc; } button:disabled { opacity:.5; cursor:default; }
        .notice { background:#fffbeb; border:1px solid #fde68a; padding:14px 18px; border-radius:8px; margin-bottom:20px; } .error { background:#fff3f2; border-color:#ebc4bf; color:#9e2f25; }
        .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { color:var(--muted); font-size:11px; letter-spacing:.04em; text-transform:uppercase; } th,td { padding:15px 12px; border-bottom:1px solid var(--line); vertical-align:top; } th:first-child,td:first-child { padding-left:0; } td:last-child { padding-right:0; }
        .badge { display:inline-block; padding:4px 9px; border-radius:6px; font-size:11px; font-weight:650; background:#edf0f4; color:#53657b; white-space:nowrap; } .badge.active { background:#e8f3ee; color:#28614a; } .badge.pending { background:#fff4d9; color:#815b13; }
        details { margin:10px 0; } summary { cursor:pointer; color:var(--primary); font-weight:600; font-size:13px; } details form { margin-top:12px; } .stack { display:grid; gap:12px; } .record { border:1px solid var(--line); border-radius:9px; padding:16px; margin-top:12px; }
        .pagination { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px; } .break { overflow-wrap:anywhere; } .invitation { overflow-wrap:anywhere; } pre { font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; background:#f0f2f5; border-radius:6px; padding:12px; }
        .mobile-nav { display:none; } footer { color:var(--muted); font-size:12px; padding:8px 32px 24px; }
        @media(max-width:850px) { .shell { grid-template-columns:1fr; } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:16px 20px; } .sidebar nav { display:flex; flex-wrap:wrap; margin-top:16px; gap:8px; } nav a { font-size:13px; padding:8px 10px; } .topbar { padding:12px 20px; } main { padding:24px 20px; } .panel { padding:18px; } footer { padding:8px 20px 20px; } }
        @media(max-width:650px) {
            .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td { display:block; width:100%; }
            .responsive-table thead { display:none; }
            .responsive-table tr { border:1px solid var(--line); border-radius:9px; padding:14px; margin-bottom:16px; }
            .responsive-table td,.responsive-table td:first-child,.responsive-table td:last-child { padding:8px 0; border:0; }
            .responsive-table td[data-label]::before { content:attr(data-label); display:block; color:var(--muted); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.06em; margin-bottom:6px; }
            .responsive-table td form button { width:100%; }
        }
        @media(max-width:520px) { .fields label { flex-basis:100%; } .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .stat { padding:16px; } .actions button,.actions .button { flex:1 1 auto; } .topbar .muted { display:none; } }
    

/* i-Kertas Kerja reference: slate headers, amber accents, bold sans-serif, rounded cards. */
body { font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; background:#f8fafc; color:#0f172a; }
h1,h2,h3 { font-family:inherit; font-weight:800; letter-spacing:-.025em; } h1 { font-size:clamp(25px,3vw,32px); }
.shell { grid-template-columns:248px minmax(0,1fr); } .sidebar { background:white; border-right:1px solid #e2e8f0; padding:28px 20px; }
.brand { color:#0f172a; font-size:18px; font-weight:850; letter-spacing:-.035em; display:flex; gap:12px; align-items:center; }
.brand small { color:#64748b; font-size:9px; letter-spacing:.1em; font-weight:650; }
.brand-tile { width:44px; height:44px; border-radius:12px; background:#fbbf24; color:#0f172a; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-caption { margin-top:32px; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#64748b; }
.sidebar nav { margin-top:14px; counter-reset:section; } .sidebar nav a { color:#475569; display:flex; align-items:center; gap:12px; border:1px solid transparent; border-radius:12px; padding:12px; font-weight:600; font-size:13px; }
.sidebar nav a::before { counter-increment:section; content:counter(section,decimal-leading-zero); width:28px; height:28px; border-radius:50%; background:white; border:1px solid #e2e8f0; color:#64748b; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:10px; font-weight:800; }
.sidebar nav a[aria-current="page"] { color:#0f172a; border-color:#fcd34d; background:#fffbeb; box-shadow:0 1px 3px #0f172a08; }
.sidebar nav a[aria-current="page"]::before { background:#fbbf24; color:#0f172a; border-color:#fbbf24; }
.sidebar nav a:hover { background:#f8fafc; border-color:#e2e8f0; } .sidebar nav a[aria-current="page"]:hover { background:#fef3c7; border-color:#fcd34d; }
.topbar { background:white; border-bottom:1px solid #e2e8f0; }
.page-heading { background:#15263f; background:var(--hero-background); color:white; border:1px solid #294562; border-radius:16px; padding:26px 28px; box-shadow:0 8px 18px #0f172a0c; }
.page-heading h1 { color:white; font-weight:850; } .page-heading .muted { color:#cbd5e1; } .page-heading .eyebrow { color:#fcd34d; font-weight:800; font-size:10px; letter-spacing:.15em; }
.page-heading p:last-child { margin-bottom:0; } .page-heading .button.secondary { background:#1e293b; border-color:#475569; color:white; }
.eyebrow { color:#a16207; font-size:10px; font-weight:800; letter-spacing:.14em; }
.panel,.stat { border-radius:16px; border-color:#e2e8f0; box-shadow:0 1px 3px #0f172a05; } .panel h2 { font-size:18px; }
.stat { position:relative; padding:24px; } .stat::before { content:''; width:24px; height:4px; border-radius:5px; background:#fbbf24; display:block; margin-bottom:14px; } .stat strong { font-size:32px; font-weight:850; }
.record { border-radius:12px; } button,.button { background:#fbbf24; color:#0f172a; border-color:#fbbf24; border-radius:10px; font-size:13px; font-weight:750; }
button:hover,.button:hover { background:#f59e0b; border-color:#f59e0b; } .secondary { color:#334155; background:white; border-color:#cbd5e1; } .secondary:hover { background:#f8fafc; border-color:#94a3b8; }
.danger { color:#a1352a; background:#fff4f3; border-color:#e8c1bc; } .danger:hover { background:#fee2e2; border-color:#fca5a5; }
input,select { border-radius:12px; border-color:#cbd5e1; background:white; color:#0f172a; font-size:14px; padding:11px 13px; }
input:focus,select:focus { outline:none; border-color:#d97706; box-shadow:inset 0 0 0 1px #d97706; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid #d97706; outline-offset:3px; }
a,summary { color:#334155; } label { color:#475569; font-weight:750; font-size:12px; }
.notice { border-radius:12px; } .badge { border-radius:999px; padding:4px 10px; }
.back-link { margin-top:24px; font-size:13px; } .help-link { display:flex; justify-content:flex-end; margin-top:18px; font-size:13px; }
body.auth-page { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 20px; }
.auth-shell { width:100%; max-width:480px; background:white; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px #0f172a0b; }
.auth-header { display:flex; align-items:center; gap:14px; background:#15263f; background:var(--hero-background); color:white; padding:20px 28px; border-bottom:1px solid #294562; }
.auth-header .brand-tile { width:48px; height:48px; font-size:14px; }
.auth-header strong { display:block; font-size:20px; font-weight:850; letter-spacing:-.025em; }
.auth-header span:last-child { display:block; font-size:9px; font-weight:750; letter-spacing:.13em; color:#fcd34d; margin-top:4px; }
.auth-content { padding:30px 28px; } .auth-card { padding:0; margin:0; width:100%; }
.auth-card h1 { font-size:26px; font-weight:850; margin-bottom:10px; } .auth-card form { display:grid; gap:18px; margin-top:26px; }
.auth-card label { display:grid; gap:8px; } .auth-card input,.auth-card button { width:100%; min-height:46px; }
.auth-card small { display:block; margin-top:24px; font-size:11px; color:#64748b; line-height:1.7; } .auth-card .notice { font-size:13px; }
.auth-card .eyebrow { margin-bottom:8px; } .auth-card .muted { font-size:14px; line-height:1.75; }
.auth-footer { background:#f8fafc; border-top:1px solid #e2e8f0; padding:14px 28px; color:#64748b; font-size:10px; line-height:1.7; }
@media(max-width:850px) { .shell { grid-template-columns:1fr; } .sidebar { padding:18px 20px; border-right:0; border-bottom:1px solid #e2e8f0; } .sidebar-caption { display:none; } .sidebar nav { margin-top:16px; } .sidebar nav a { padding:8px; gap:8px; font-size:12px; } .sidebar nav a::before { width:23px; height:23px; font-size:9px; } .page-heading { padding:22px; } }
@media(max-width:520px) { body.auth-page { padding:20px 16px; } .auth-content,.auth-header { padding:24px; } .auth-card h1 { font-size:24px; } .auth-footer { padding:14px 24px; } .stat { padding:18px; } .page-heading { padding:20px; } }

/* Collapsible navigation preserves an icon rail and named destinations. */
.nav-icon { width:20px; height:20px; flex-shrink:0; }
.sidebar nav a::before { display:none; }
.sidebar nav a { position:relative; }
.nav-tooltip { display:none; }
.sidebar-heading { display:flex; flex-direction:column; gap:16px; }
.sidebar-toggle { display:none; align-self:flex-end; width:36px; min-height:36px; padding:8px; }
.sidebar-toggle svg { width:18px; height:18px; }
.sidebar-backdrop[hidden] { display:none; }
.sidebar-backdrop { display:none; }
.sidebar-ready { --sidebar-width:248px; }
.sidebar-ready.sidebar-collapsed { --sidebar-width:76px; }
.sidebar-ready .shell { grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.sidebar-ready .sidebar { position:sticky; top:0; align-self:start; min-height:100vh; height:100dvh; padding:24px 16px; z-index:40; border-right:1px solid #e2e8f0; }
.sidebar-ready .sidebar-toggle { display:inline-flex; }
.sidebar-ready .sidebar nav { display:grid; gap:8px; margin-top:12px; }
.sidebar-ready .sidebar nav a { min-height:44px; padding:12px; gap:12px; }
.sidebar-ready .brand { font-size:16px; }
.sidebar-ready .brand-tile { width:40px; height:40px; font-size:12px; }
.sidebar-collapsed .brand-text,.sidebar-collapsed .sidebar-caption,.sidebar-collapsed .nav-label { display:none; }
.sidebar-collapsed .sidebar-heading { align-items:center; }
.sidebar-collapsed .sidebar-toggle { align-self:center; }
.sidebar-collapsed .sidebar-toggle svg { transform:rotate(180deg); }
.sidebar-collapsed .sidebar nav { margin-top:24px; }
.sidebar-collapsed .sidebar nav a { justify-content:center; padding:11px; gap:0; }
.sidebar-collapsed .nav-tooltip { position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); z-index:60; max-width:230px; width:max-content; pointer-events:none; padding:8px 12px; border-radius:8px; font-size:12px; font-weight:600; color:white; background:#0f172a; box-shadow:0 4px 12px #0f172a20; }
.sidebar-collapsed .sidebar nav a:hover .nav-tooltip,.sidebar-collapsed .sidebar nav a:focus-visible .nav-tooltip { display:block; }
@media(max-width:850px) {
    .sidebar-ready,.sidebar-ready.sidebar-collapsed { --sidebar-width:64px; }
    .sidebar-ready .shell { display:block; }
    .sidebar-ready .workspace { margin-left:64px; }
    .sidebar-ready .sidebar { position:fixed; inset:0 auto 0 0; width:64px; padding:20px 10px; border-bottom:0; background:white; }
    .sidebar-ready:not(.sidebar-collapsed) .sidebar { width:248px; padding:20px 16px; box-shadow:8px 0 24px #0f172a20; }
    .sidebar-ready .sidebar nav { display:grid; }
    .sidebar-ready .sidebar nav a { font-size:13px; }
    .sidebar-ready:not(.sidebar-collapsed) .sidebar-caption { display:block; }
    .sidebar-ready.sidebar-mobile-open .sidebar-backdrop { display:block; position:fixed; inset:0 0 0 64px; width:auto; height:auto; min-height:0; margin:0; padding:0; border:0; border-radius:0; z-index:30; background:#0f172a55; }
    .sidebar-ready main { padding:24px 16px; }
    .sidebar-ready .topbar { padding:12px 16px; }
}
/* Shared footer for authenticated, login and recovery pages. */
.site-footer { text-align:center; font-size:11px; line-height:1.8; color:#64748b; padding:16px 24px 24px; }
.site-footer .footer-product { white-space:nowrap; }
.site-footer.auth-footer { padding:14px 20px; font-size:10px; }
@media(max-width:767px) {
    .site-footer .footer-product,.site-footer .footer-organization { display:block; }
    .site-footer .footer-separator { display:none; }
    .site-footer { padding:16px 12px 24px; }
}
@media(prefers-reduced-motion:no-preference) {
    .sidebar-toggle svg { transition:transform .15s ease; }
}

/* Controls can shrink within the narrower content area beside the mobile rail. */
.fields label { min-width:0; }
.fields input,.fields select,.stack input,.stack select { width:100%; min-width:0; }
@media(max-width:380px) { .sidebar-ready .stats { grid-template-columns:1fr; } }

/* Operational workspace, preserving the approved palette. */
textarea {font:inherit;line-height:1.5;width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:7px;resize:vertical;color:var(--ink);background:#fff;}
.stack>label,.item-row>label {display:grid;gap:6px;min-width:0;}
.stack input,.stack select {width:100%;}
.item-row {margin:0;display:grid;gap:16px;}
#item-list {margin-bottom:20px;}
.request-link {display:block;color:var(--ink);text-decoration:none;margin-bottom:12px;}
.request-link .badge {margin-left:12px;white-space:normal;}
.request-link p {margin:8px 0 0;overflow-wrap:anywhere;}
.admin-tabs {display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.admin-tabs a {font-size:14px;font-weight:600;color:#334155;background:transparent;border:1px solid transparent;padding:11px 14px;line-height:1.5;}
.admin-tabs a:hover {color:#0f172a;background:#f1f5f9;border-color:transparent;}
.admin-tabs a[aria-current="page"], .admin-tabs a[aria-current="page"]:hover {color:#0f172a;background:#fffbeb;border-color:#fbbf24;font-weight:700;box-shadow:none;}
.admin-tabs a:focus-visible {outline:3px solid #2563eb;outline-offset:3px;}
.actions form {margin:0;}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid #d97706;outline-offset:3px;} input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid #d97706;outline-offset:-3px;}
@media(max-width:520px){.topbar>.actions {width:100%;}.item-row .actions {align-items:center;}.badge {white-space:normal;}.admin-tabs {gap:8px;}.admin-tabs a {padding:8px;}.page-heading h1 {overflow-wrap:anywhere;}}

/* Review corrections: readable notices and a separate bottom toggle. */
.notice { color:#713f12; }
.page-heading .notice { color:#713f12; }
.notice.error { color:#9e2f25; }
.sidebar-ready .sidebar { display:flex; flex-direction:column; min-height:0; }
.sidebar-ready .sidebar-heading { flex-shrink:0; }
.sidebar-ready .sidebar nav { align-content:start; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-bottom:8px; }
.sidebar-bottom { margin-top:auto; padding-top:16px; display:flex; justify-content:flex-end; flex-shrink:0; border-top:1px solid #e2e8f0; }
.sidebar-collapsed .sidebar-bottom { justify-content:center; }
.sidebar-ready.sidebar-collapsed .sidebar nav { overflow:visible; }
.sidebar-bottom .sidebar-toggle { align-self:auto; }
@media(max-height:650px) { .sidebar-ready.sidebar-collapsed .sidebar nav { overflow-y:auto; overflow-x:hidden; } }

/* Shared application dialogs: warnings and action confirmations. */
.app-dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #e2e8f0; border-radius:16px; color:#0f172a; background:white; box-shadow:0 24px 80px #0f172a40; overflow:auto; }
.app-dialog::backdrop { background:#0f172a88; }
.app-dialog-heading { padding:22px 24px 18px; background:#0f172a; color:white; }
.app-dialog-heading .eyebrow { color:#fcd34d; margin-bottom:8px; }
.app-dialog-heading h2 { font-size:21px; margin:0; }
.app-dialog-content { padding:24px; }
.app-dialog-content p { margin:0 0 24px; overflow-wrap:anywhere; white-space:pre-line; }
.app-dialog-actions { justify-content:flex-end; gap:12px; }
.app-dialog [hidden] { display:none; }
@media(max-width:420px) { .app-dialog-heading,.app-dialog-content { padding:20px; } .app-dialog-actions { flex-wrap:wrap; } .app-dialog-actions button { flex:1 1 auto; } }

.action-icon { width:18px; height:18px; flex:0 0 18px; vertical-align:middle; }
.budget-fields { align-items:start; }
.budget-fields label { min-width:0; }
.budget-fields select { width:100%; min-width:0; text-overflow:ellipsis; }

/* Balanced list columns, without changing the page width. */
.nota-list { table-layout:fixed; }
.nota-list .nota-reference-column { width:20%; }
.nota-list .nota-status-column { width:20%; }
.nota-list .nota-amount-column { width:15%; }
.nota-list td { overflow-wrap:anywhere; }
.nota-list .badge { white-space:normal; }
.nota-list th:last-child,.nota-list td:last-child:not([colspan]) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(min-width:651px) and (max-width:1100px) { .nota-list .nota-amount-column { width:120px; } }
@media(max-width:650px) {
    .nota-list colgroup { display:none; }
    .nota-list td:last-child:not([colspan]) { text-align:left; }
}

/* Continuous application history, following the Waran timeline layout. */
.nota-timeline { list-style:none; padding:0; margin:24px 0 0; }
.nota-timeline-item { display:grid; grid-template-columns:38px minmax(0,1fr); gap:14px; min-height:90px; }
.nota-timeline-rail { position:relative; display:flex; justify-content:center; }
.nota-timeline-rail::after { content:""; position:absolute; top:34px; bottom:0; width:2px; background:#e2e8f0; }
.nota-timeline-item:last-child .nota-timeline-rail::after { display:none; }
.nota-timeline-marker { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; border:2px solid #cbd5e1; border-radius:50%; color:#475569; background:#f1f5f9; }
.nota-timeline-marker svg { width:17px; height:17px; }
.nota-timeline-sent .nota-timeline-marker { color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
.nota-timeline-approved .nota-timeline-marker { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.nota-timeline-returned .nota-timeline-marker { color:#92400e; background:#fffbeb; border-color:#fde68a; }
.nota-timeline-cancelled .nota-timeline-marker { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
.nota-timeline-entry { min-width:0; padding:2px 0 26px; overflow-wrap:anywhere; }
.nota-timeline-date { font-size:12px; font-weight:600; color:#64748b; }
.nota-timeline-entry h3 { margin:6px 0; font-size:15px; line-height:1.5; color:#0f172a; }
.nota-timeline-actor { margin:4px 0; font-size:13px; color:#475569; }
.nota-timeline-reason { margin:10px 0 0; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; font-size:14px; white-space:pre-line; }
.nota-timeline-item:last-child .nota-timeline-entry { padding-bottom:0; }
@media(max-width:420px) { .nota-timeline-item { grid-template-columns:34px minmax(0,1fr); gap:10px; } }

/* Shared semantic status capsules, on light and navy surfaces. */
.badge.nota-status { white-space:normal; line-height:1.5; border:1px solid transparent; }
.badge.nota-status-draft { color:#475569; background:#f1f5f9; border-color:#cbd5e1; }
.badge.nota-status-procurement { color:#1e40af; background:#dbeafe; border-color:#93c5fd; }
.badge.nota-status-budget { color:#6b21a8; background:#f3e8ff; border-color:#d8b4fe; }
.badge.nota-status-returned { color:#92400e; background:#fef3c7; border-color:#fcd34d; }
.badge.nota-status-ready { color:#166534; background:#dcfce7; border-color:#86efac; }
.badge.nota-status-cancelled { color:#991b1b; background:#fee2e2; border-color:#fca5a5; }
.nota-back { margin-bottom:16px; }
.page-heading.nota-heading { padding:22px 28px; }
.nota-heading .eyebrow { margin:0 0 12px; }
.nota-heading-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nota-heading-title h1 { margin:0; min-width:0; overflow-wrap:anywhere; }
.nota-heading-title .nota-status { flex:0 1 auto; max-width:320px; }
.nota-heading-person { margin-top:16px; overflow-wrap:anywhere; }
.nota-heading-person p { margin:3px 0; font-size:14px; line-height:1.6; }
.nota-heading-person .nota-heading-name { font-weight:650; color:#f8fafc; }
.nota-heading-actions { justify-content:flex-end; margin-top:18px; }
@media(max-width:650px) {
    .page-heading.nota-heading { padding:20px; }
    .nota-heading-title { flex-direction:column; align-items:flex-start; gap:10px; }
    .nota-heading-title .nota-status { max-width:100%; }
}

/* Per-item review and correction cycle. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.review-item-list { display:grid; gap:16px; margin-top:16px; }
.review-target { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; border:1px solid #e2e8f0; border-radius:12px; padding:18px; margin:16px 0; min-width:0; }
.review-item-list .review-target { margin:0; }
.review-target-heading { grid-column:1; grid-row:1; align-self:center; }
.review-target-heading h3 { margin:0; }
.review-item-content { grid-column:1 / -1; grid-row:2; min-width:0; overflow-wrap:anywhere; }
.review-control { display:contents; }
.review-switch { grid-column:2; grid-row:1; display:flex; border:1px solid #cbd5e1; border-radius:9px; padding:3px; margin:0; gap:4px; background:#f8fafc; }
.review-switch label { position:relative; cursor:pointer; }
.review-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.review-switch span { display:block; padding:8px 12px; border-radius:6px; color:#475569; }
.review-switch input[value="confirmed"]:checked + span { background:#dcfce7; color:#166534; }
.review-switch input[value="query"]:checked + span { background:#fef3c7; color:#92400e; }
.review-switch input:focus-visible + span { outline:2px solid #0f172a; outline-offset:2px; }
.review-query-fields { grid-column:1 / -1; padding-top:14px; border-top:1px solid #fde68a; }
.review-query-fields[hidden] { display:none; }
.review-query-fields > label,.query-response { display:grid; gap:8px; }
.review-target.is-queried,.item-has-query { border-color:#fbbf24; background:#fffdf5; }
.query-field-options { padding:0; border:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:12px 20px; }
.query-field-options legend { font-size:13px; font-weight:650; margin-bottom:10px; }
.query-field-options label,.query-resolve { display:flex; align-items:center; gap:8px; }
.query-field-options input,.query-resolve input { width:18px; height:18px; flex:0 0 18px; accent-color:#b45309; }
.review-item-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; }
.review-item-values dt { font-size:12px; color:#64748b; }
.review-item-values dd { margin:4px 0 0; font-size:14px; }
.query-record { border:1px solid #fde68a; border-left:4px solid #fbbf24; border-radius:10px; padding:18px; margin:16px 0; overflow-wrap:anywhere; }
.query-record.query-resolved { border-color:#bbf7d0; border-left-color:#22c55e; }
.query-record-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; flex-wrap:wrap; }
.query-record-heading h3 { margin-bottom:10px; }
.query-text { white-space:pre-line; overflow-wrap:anywhere; }
.query-response { margin-top:16px; background:#f8fafc; padding:14px; border-radius:8px; }
.query-response p:last-child { margin-bottom:0; }
.query-resolve { margin-top:16px; }
.query-snapshot { margin-top:12px; }
.query-snapshot summary { font-size:13px; color:#475569; cursor:pointer; }
.query-snapshot p { margin:10px 0; }
.query-summary p { margin:6px 0; }
.query-summary-links { display:flex; gap:10px 18px; flex-wrap:wrap; }
.query-summary-links a { color:#854d0e; }
.review-actions { justify-content:flex-end; }
.review-submit-summary { font-size:13px; color:#475569; }
@media(max-width:650px) {
    .review-target { grid-template-columns:minmax(0,1fr); padding:14px; }
    .review-switch { grid-column:1; grid-row:2; justify-self:start; }
    .review-item-content { grid-row:3; }
    .review-item-values { grid-template-columns:minmax(0,1fr); }
    .review-query-fields { grid-row:4; }
    .query-record { padding:14px; }
}

.item-query-note { grid-column:1 / -1; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:12px; margin-top:10px; overflow-wrap:anywhere; }
.item-query-note p { margin:8px 0; }
.item-query-note a { color:#92400e; font-size:13px; }
.review-actions [hidden], [data-allocation-label][hidden] { display:none; }

/* Descriptive metadata: neutral outlined capsules, distinct from status pills. */
.procurement-facts { display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin:18px 0 22px; }
.procurement-fact { min-width:200px; max-width:100%; border:1px solid #cbd5e1; border-radius:10px; background:#fff; padding:12px 16px; overflow-wrap:anywhere; }
.procurement-fact dt { display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b; margin-bottom:6px; }
.procurement-fact dt svg { width:16px; height:16px; flex:0 0 16px; }
.procurement-fact dd { margin:0; font-size:15px; font-weight:650; color:#0f172a; }
.procurement-fact-detail { display:block; margin-top:6px; font-size:12px; font-weight:400; color:#475569; }
@media(max-width:650px) { .procurement-facts { flex-direction:column; } .procurement-fact { min-width:0; width:100%; } }

.badge.notification-count { background:#edf0f4; color:#53657b; }
.badge.notification-count.has-unread { background:#dc2626; color:#fff; }

/* Reviewer remarks carry visual priority; applicant replies stay neutral. */
.query-callout { background:#fef2f2; border:1px solid #fecaca; border-left:4px solid #dc2626; border-radius:8px; padding:14px 16px; margin:12px 0; color:#991b1b; }
.query-callout-heading { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:750; }
.query-callout-heading svg { width:18px; height:18px; flex:0 0 18px; }
.query-callout .query-callout-text { margin:10px 0 0; font-size:15px; font-weight:650; line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
@media(max-width:420px) { .query-callout { padding:12px; } }

.query-comparison { margin:18px 0; }
.query-comparison h4 { margin:0 0 6px; font-size:14px; }
.query-diff-table { table-layout:fixed; width:100%; }
.query-diff-table th:first-child { width:24%; }
.query-diff-table td { vertical-align:top; overflow-wrap:anywhere; }
.query-diff-value { white-space:pre-line; }
.query-diff-table .query-diff-changed td:last-child { background:#f0fdf4; color:#14532d; }
.query-diff-label { display:block; font-size:11px; font-weight:600; color:#64748b; margin:4px 0; }
.query-diff-changed td:last-child .query-diff-label { color:#166534; }
.query-diff-notice { font-size:13px; padding:10px 12px; background:#f8fafc; border-radius:8px; }
@media(max-width:650px) { .query-diff-table th:first-child { width:auto; } .query-diff-table td { white-space:normal; } .query-diff-table .query-diff-value { white-space:pre-line; } }

.register-table { table-layout:fixed; width:100%; }
.register-table th:nth-child(1) { width:18%; }
.register-table th:nth-child(2) { width:24%; }
.register-table th:nth-child(4) { width:19%; }
.register-table th:nth-child(5) { width:13%; }
.register-table td { overflow-wrap:anywhere; vertical-align:top; }
.register-table td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
@media(max-width:650px) { .register-table td:last-child { text-align:left; } }

.export-icon { width:22px; height:22px; flex-basis:22px; }
.account-link { color:inherit; text-decoration:none; }
.account-link:hover { text-decoration:underline; }

.role-options{border:0;padding:0;margin:12px 0;min-width:0}.role-options legend{font-weight:700;margin-bottom:12px}.role-option{display:flex;align-items:flex-start;gap:12px;margin:12px 0}.role-option input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:2px 0;accent-color:#0f172a}

.user-role-badges{display:flex;flex-wrap:wrap;gap:8px;max-width:320px}.user-role-badges .badge{white-space:normal}.user-account-actions{margin-top:12px}.user-account-actions summary{font-size:13px;color:#64748b}.role-modal-header{padding:24px 24px 0}.role-modal-header h2{margin:0 0 12px;font-size:21px}.role-modal-header p{margin:4px 0;overflow-wrap:anywhere}.role-modal .role-options{margin:0 0 20px}.role-modal .role-option{padding:12px;border:1px solid #e2e8f0;border-radius:10px;margin:0 0 10px;cursor:pointer}.role-modal .role-option:has(input:checked){border-color:#94a3b8;background:#f8fafc}.role-modal-actions{justify-content:flex-end;gap:12px}.role-modal .app-dialog-content>form>p{font-size:12px;margin-bottom:24px}

/* Shared UI states. */
.notice.notice-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.notice p{margin:6px 0}.notice ul{margin-bottom:0}.validation-summary a{color:inherit;text-decoration:underline}.field-error{display:block;font-size:12px;font-weight:500;color:#b91c1c;margin-top:6px;line-height:1.5}[aria-invalid=true]{border-color:#b91c1c!important}.field-error+input{margin-top:8px}.ui-feedback{position:fixed;bottom:24px;right:24px;max-width:min(440px,calc(100vw - 32px));padding:14px 18px;border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:12px;box-shadow:0 8px 32px #0f172a1f;z-index:1000;font-size:14px;line-height:1.5}.ui-feedback.is-error{color:#991b1b;background:#fef2f2;border-color:#fecaca}[hidden].ui-feedback,[hidden].ui-offline{display:none}.is-busy{cursor:wait;opacity:.75}.is-busy::before{content:'';width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;flex-shrink:0;animation:ui-spin .8s linear infinite;margin-right:8px}button:active:not(:disabled),.button:active:not([aria-disabled=true]){filter:brightness(.96)}button:disabled:hover{cursor:not-allowed;filter:none}.empty-state{padding:24px 8px;max-width:600px;text-align:left}.empty-state h2{font-size:17px;margin:0 0 8px}.empty-state p{font-size:14px;color:#64748b;line-height:1.7;margin:8px 0 16px}.empty-state .button{margin-top:4px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.is-busy::before{animation:none}}@media(max-width:520px){.ui-feedback{bottom:16px;right:16px;left:16px;max-width:none}.empty-state{padding:16px 0}}

input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:#b91c1c}

.draft-state{color:#64748b}.draft-state.has-changes{color:#92400e;border-left:3px solid #f59e0b;padding-left:12px}

button:disabled,button:disabled:hover{background:#f1f5f9;border-color:#cbd5e1;color:#64748b;opacity:1;cursor:not-allowed;box-shadow:none}

.nota-datetime{font-size:12px;line-height:1.5;margin:6px 0 0}.verification-details dt{color:#64748b;font-size:13px;margin-top:16px}.verification-details dd{margin:4px 0 0;font-weight:650;overflow-wrap:anywhere}

/* Akaun Saya: compact, responsive profile details. */
.account-profile-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.account-profile-header h2{margin:0 0 3px}
.account-profile-header p{margin:0;font-size:13px}
.account-profile-icon{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:13px;background:#eaf0f7;color:#355675}
.account-profile-icon svg{width:26px;height:26px}
.account-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:22px;margin:0;padding:24px 0;border-top:1px solid #e2e8f0}
.account-profile-grid>div{min-width:0}
.account-profile-grid dt{color:#64748b;font-size:12px;font-weight:600;margin:0 0 5px}
.account-profile-grid dd{margin:0;color:#0f172a;font-size:14px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}
.account-profile-roles{border-top:1px solid #e2e8f0;padding-top:20px}
.account-profile-roles h3{color:#64748b;font-size:12px;font-weight:650;margin:0 0 14px}
.account-role-list{display:flex;flex-wrap:wrap;gap:12px}
.account-role{display:flex;align-items:center;gap:12px;min-width:220px;max-width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#fafbfd}
.account-role-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:#eaf0f7;color:#355675}
.account-role-icon svg{width:20px;height:20px}
.account-role strong{font-size:13px}
.account-role p{margin:2px 0 0;overflow-wrap:anywhere}
@media(max-width:650px){.account-profile-grid{grid-template-columns:minmax(0,1fr);row-gap:18px;padding:20px 0}.account-role{width:100%;min-width:0}}

/* Compact controls and administration navigation on phones only. */
.account-action-icon,.mobile-admin-trigger {display:none;}
.mobile-admin-sheet {display:none;}
@media(max-width:767px) {
    .topbar .topbar-actions {width:auto;display:flex;flex-wrap:nowrap;gap:12px;}
    .topbar-actions .mobile-icon-button,.topbar-actions>a[aria-label^="Notifikasi"],.review-actions a[data-download] {flex:0 0 auto;min-width:44px;min-height:44px;padding:10px;justify-content:center;}
    .mobile-icon-button .mobile-action-label,.review-actions a[data-download] .mobile-action-label {display:none;}
    .account-action-icon {display:block;width:20px;height:20px;}
    .topbar-actions .notification-count {min-width:20px;padding:2px 5px;}
    .admin-tabs[data-mobile-admin="hide"],.admin-tabs.mobile-admin-ready {display:none;}
    .mobile-admin-trigger:not([hidden]) {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:20px;min-height:44px;}
    .mobile-admin-sheet[open] {display:block;position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:85dvh;margin:0;padding:20px 20px max(20px,env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:20px 20px 0 0;background:white;color:var(--ink);overflow-y:auto;}
    .mobile-admin-sheet::backdrop {background:rgb(15 23 42 / .45);}
    .mobile-admin-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;}
    .mobile-admin-heading h2 {margin:0;font-size:18px;}
    .mobile-admin-heading button {min-width:44px;min-height:44px;padding:8px;font-size:24px;}
    .mobile-admin-links {display:grid;gap:8px;margin-top:16px;}
    .mobile-admin-links a {display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;border:1px solid transparent;color:#334155;font-size:14px;}
    .mobile-admin-links a[aria-current="page"] {background:#fffbeb;border-color:#fbbf24;color:#0f172a;font-weight:700;}
    .mobile-admin-links svg {width:22px;height:22px;flex:none;}
}

/* Fit the login card to shorter browser windows without scaling readable content. */
@media(max-height:800px) {
    body.auth-page {padding:16px;}
    .auth-header {padding:16px 24px;}
    .auth-content {padding:20px 24px;}
    .auth-card form {gap:14px;margin-top:18px;}
    .auth-card small {margin-top:16px;line-height:1.5;}
    .auth-card .muted {line-height:1.5;}
    .site-footer.auth-footer {padding:10px 20px;line-height:1.5;}
}
@media(max-height:640px) {
    body.auth-page {padding:12px;}
    .auth-header {padding:12px 20px;}
    .auth-header .brand-tile {width:40px;height:40px;}
    .auth-content {padding:16px 20px;}
    .auth-card h1 {font-size:24px;margin-bottom:6px;}
    .auth-card .eyebrow {margin-bottom:4px;}
    .auth-card form {gap:10px;margin-top:12px;}
    .auth-card label {gap:4px;}
    .auth-card input,.auth-card button {min-height:44px;padding-top:8px;padding-bottom:8px;}
    .auth-card .help-link {margin-top:10px;}
    .auth-card small {margin-top:12px;}
    .site-footer.auth-footer {padding:8px 16px;}
}