:root{color-scheme:light;--navy:#0b3d5c;--blue:#0f73bf;--line:#dfe7ed;--muted:#64748b}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17232b;line-height:1.5}button,a,input,select,textarea{transition:background-color .15s,color .15s,border-color .15s}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{border-radius:8px;max-width:100%}input,select,textarea{accent-color:var(--blue)}:focus-visible{outline:3px solid #38bdf8!important;outline-offset:3px}table{border-collapse:collapse}table th{font-weight:650;font-size:12px;color:#526579;letter-spacing:.025em}table td{vertical-align:middle}tbody tr:hover{background:#f8fafc}button[class*="bg-brand"],a[class*="bg-brand"]{border-radius:8px}button[class*="bg-brand"]:hover,a[class*="bg-brand"]:hover{background:#0f73bf}.admin-shell{background:#f4f7fa}.app-header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:white;border-bottom:1px solid var(--line);gap:20px}.app-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}.brand-mark{display:grid;place-items:center;width:42px;height:46px;background:var(--navy);color:white;border-radius:12px;font-size:25px;font-weight:750}.app-brand strong{display:block;font-size:21px;letter-spacing:.09em}.app-brand small{display:block;font-size:11px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:20px;font-size:13px}.user-name{font-weight:600}.logout-link{border:1px solid var(--line);padding:8px 15px;border-radius:8px;color:#526579}.app-frame{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 84px)}.app-sidebar{background:white;border-right:1px solid var(--line);padding:28px 16px}.nav-caption{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:700;margin:0 14px 18px}.nav-link{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:5px;border-radius:9px;color:#526579;font-size:13px;font-weight:550}.nav-link:hover{background:#f4f7fa;color:var(--navy)}.nav-link.is-active{background:#e8f2fa;color:#0866ad;font-weight:700}.nav-number{font-size:10px;opacity:.65;font-variant-numeric:tabular-nums}.sidebar-help{margin:32px 8px 0;padding:18px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.sidebar-help strong{color:var(--navy)}.sidebar-help p{margin:8px 0 12px}.sidebar-help a{color:var(--blue);font-weight:600}.app-main{padding:36px;min-width:0;max-width:1800px;width:100%;margin:0 auto;align-self:start}.app-main h2{color:var(--navy);letter-spacing:-.03em}.app-main .overflow-x-auto{border-radius:12px}.app-main form.bg-white,.app-main section.bg-white{border-radius:12px;box-shadow:0 4px 20px #16324a04}.app-main>.flex:first-child{flex-wrap:wrap;align-items:center}.app-main .p-3{padding:14px}.empty-state{text-align:center;padding:48px 20px!important;color:var(--muted)}.empty-state strong{display:block;color:var(--navy);font-size:16px;margin-bottom:6px}.status-badge{display:inline-block;border-radius:99px;padding:4px 10px;font-size:11px;font-weight:650;background:#edf2f7;color:#526579}.status-valid,.status-aktif,.status-selesai{background:#e6f5ed;color:#17734c}.status-dibatalkan,.status-diganti{background:#fff0ed;color:#b33f31}.app-notice{position:fixed;bottom:24px;right:24px;z-index:1000;max-width:min(480px,calc(100vw - 32px));padding:18px 20px;border:1px solid #f5b8b8;border-radius:12px;background:#fff5f5;color:#991b1b;box-shadow:0 8px 28px #0002;font-size:14px}.app-notice button{display:block;margin-top:10px;font-weight:700}.skip-link{position:fixed;top:-100px;left:16px;z-index:1001;background:white;padding:12px}.skip-link:focus{top:8px}#nav-toggle{display:none}.dashboard-intro{margin-bottom:28px}.dashboard-intro h2{font-size:30px;color:var(--navy);font-weight:700;letter-spacing:-.03em}.dashboard-intro p{font-size:14px;color:var(--muted);margin-top:8px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.metric-card{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.metric-card small{color:var(--muted);font-size:12px}.metric-card strong{display:block;font-size:36px;line-height:1.2;color:var(--navy);margin:14px 0 8px;font-variant-numeric:tabular-nums}.metric-card p{font-size:11px;color:var(--muted)}.workflow-panel{margin-top:28px;background:white;border:1px solid var(--line);border-radius:14px;padding:28px}.workflow-panel h3{font-size:18px;font-weight:650;color:var(--navy)}.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}.workflow-step{padding:20px;background:#f7f9fc;border-radius:10px;font-size:13px}.workflow-step strong{display:block;margin-bottom:8px;color:var(--navy)}.workflow-step p{color:var(--muted);margin-bottom:14px}.workflow-step a{color:var(--blue);font-weight:650}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-main{padding:24px}.workflow-grid{grid-template-columns:1fr}}
@media(max-width:767px){.app-header{height:76px;padding:0 16px;gap:12px}.app-brand small{max-width:150px;font-size:10px}.brand-mark{width:34px;height:40px}.header-actions{gap:8px}.user-name{display:none}#nav-toggle{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:8px}.app-frame{display:block;min-height:calc(100vh - 76px)}.app-sidebar{display:none;border-bottom:1px solid var(--line)}.app-sidebar.is-open{display:block}.app-main{padding:24px 16px}.app-main h2{font-size:25px}.metric-grid{gap:12px}.metric-card{padding:18px}.metric-card strong{font-size:30px}.workflow-panel{padding:20px}.app-main form.flex>input,.app-main form.flex>select{width:100%;min-width:0}.app-main form.flex>button{min-height:44px}.app-main .flex.gap-3{flex-wrap:wrap}.app-notice{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Shared toast and confirmation UI, independent of the CSS CDN. */
.app-toasts{position:fixed;right:24px;bottom:24px;z-index:10000;display:grid;gap:12px;width:min(440px,calc(100vw - 32px));pointer-events:none}.app-toast{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:#fff;border:1px solid #dfe7ed;border-left:5px solid #0f73bf;border-radius:12px;padding:16px 18px;box-shadow:0 10px 36px #16324a26;pointer-events:auto;font-size:14px;overflow-wrap:anywhere;animation:toast-enter .2s ease-out}.app-toast strong{display:block;color:#0b3d5c}.app-toast p{margin:4px 0 0;color:#475569}.app-toast-error{border-left-color:#dc2626}.app-toast-success{border-left-color:#16845b}.app-toast-warning{border-left-color:#d97706}.app-toast button{flex-shrink:0;border:0;background:transparent;color:#64748b;font-size:24px;line-height:1;padding:0 4px}.app-dialog{border:0;border-radius:18px;width:min(480px,calc(100vw - 32px));max-height:90vh;padding:28px;color:#17232b;box-shadow:0 24px 80px #0b3d5c40}.app-dialog::backdrop{background:#0b203c80}.app-dialog h3{font-size:21px;font-weight:700;line-height:1.4;margin:0 0 20px;color:#0b3d5c}.app-dialog input,.app-dialog textarea{display:block;width:100%;border:1px solid #cbd5e1;padding:12px;font:inherit;border-radius:8px}.app-dialog textarea{min-height:100px;resize:vertical}.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.app-dialog-actions button{border:1px solid #cbd5e1;border-radius:8px;padding:10px 18px;background:white;font:inherit}.app-dialog-actions .app-dialog-primary{background:#0b3d5c;color:white;border-color:#0b3d5c}.app-dialog-actions .app-dialog-danger{background:#b91c1c;color:white;border-color:#b91c1c}@keyframes toast-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.app-toast{animation:none}}@media(max-width:600px){.app-toasts{right:16px;bottom:16px}.app-dialog{padding:22px}}