/* SIMDA Pengadaan — visual mengikuti rujukan desain (_ref-desain/app/globals.css) */
:root {
  color-scheme: light;
  --navy:#152b4b; --navy-2:#1d3a62; --blue:#2563a9; --blue-dark:#1c4f87;
  --ink:#17263b; --muted:#6b7b91; --line:#e6ebf1; --soft:#f6f8fb;
  --green:#20845c; --amber:#a46d06; --red:#bd4b4b; --purple:#755bb2;
  --radius:8px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:#f5f7fa; color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.45; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--blue); text-decoration:none; }
h1 { font-size:22px; margin:0 0 6px; letter-spacing:-.01em; }
h2 { font-size:15px; margin:0 0 3px; }
h3 { font-size:14px; margin:0 0 3px; }
p { margin:0; }
:focus-visible { outline:3px solid #6b9aca; outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- Shell ---------- */
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:244px; background:var(--navy); color:#dce7f3; display:flex; flex-direction:column; padding:0 14px; flex-shrink:0; transition:width .2s; }
.main-area { min-width:0; flex:1; display:flex; flex-direction:column; }

/* ---------- Sidebar ---------- */
.brand { height:76px; display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.1); padding:0 7px; }
.brand-mark { width:35px; height:35px; border-radius:9px; background:#2d72b8; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; flex:1; }
.brand-copy strong { font-size:15px; letter-spacing:.08em; color:#fff; }
.brand-copy span { font-size:10px; color:#9eb1c8; margin-top:3px; }
.collapse-btn,.icon-btn,.row-action,.clear-btn { border:0; background:transparent; color:inherit; display:grid; place-items:center; padding:6px; }
.collapse-btn { color:#9eb1c8; }
.workspace { padding:21px 8px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.workspace span { display:block; font-size:9px; letter-spacing:.1em; color:#8fa5be; margin-bottom:7px; }
.workspace .ws-value { color:#f2f6fb; font-size:11px; font-weight:700; letter-spacing:.02em; }
nav { padding-top:19px; }
.nav-label { font-size:9px; letter-spacing:.13em; color:#7891ad; padding:0 11px 9px; display:block; }
.nav-label.second { padding-top:25px; }
.nav-item { border:0; width:100%; display:flex; align-items:center; gap:12px; padding:10px 11px; margin:2px 0; border-radius:6px; color:#aebed0; background:transparent; text-align:left; font-size:12px; transition:background .15s,color .15s; }
.nav-item span { flex:1; }
.nav-item em { font-style:normal; font-size:10px; background:#29496e; color:#c4d8ed; padding:2px 7px; border-radius:10px; }
.nav-item.active { background:#275687; color:#fff; font-weight:700; }
.nav-item.active em { background:#3e78b0; color:#fff; }
.nav-item:hover { background:#203f66; color:#fff; }
.sidebar-bottom { margin-top:auto; padding-bottom:16px; }
.user-mini { display:flex; align-items:center; gap:9px; padding:14px 7px 0; border-top:1px solid rgba(255,255,255,.1); }
.user-mini>div:nth-child(2) { display:flex; flex-direction:column; flex:1; min-width:0; }
.user-mini strong { font-size:11px; color:#f4f7fb; }
.user-mini span { font-size:10px; color:#8fa5be; margin-top:3px; }
.avatar { width:29px; height:29px; border-radius:50%; background:#c4d8ed; color:#17395e; display:grid; place-items:center; font-size:10px; font-weight:800; flex-shrink:0; }
/* Lipat sidebar hanya di layar lebar; di HP sidebar jadi drawer terpisah (lihat blok Responsive). */
@media (min-width:721px) {
html.sb-collapsed .sidebar { width:72px; }
html.sb-collapsed .sidebar .brand-copy,
html.sb-collapsed .sidebar .workspace,
html.sb-collapsed .sidebar .nav-label,
html.sb-collapsed .sidebar .nav-item span,
html.sb-collapsed .sidebar .nav-item em,
html.sb-collapsed .sidebar .user-mini>div:nth-child(2),
html.sb-collapsed .sidebar .user-mini .collapse-btn { display:none; }
html.sb-collapsed .sidebar .nav-item { justify-content:center; }
html.sb-collapsed .sidebar .brand { padding:0; justify-content:center; }
html.sb-collapsed .sidebar .brand-mark { display:none; }
}

/* Tombol float + backdrop drawer mobile (disembunyikan di desktop). */
.sb-fab, .sb-backdrop { display:none; }

/* ---------- Topbar ---------- */
.topbar { height:76px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 34px; flex-shrink:0; }
.breadcrumb { display:flex; align-items:center; gap:9px; color:#91a0b1; font-size:12px; }
.breadcrumb strong { color:#384b64; }
.top-actions { display:flex; gap:20px; align-items:center; }
.icon-btn { color:#77879a; }
.icon-btn:hover { color:var(--blue); }
.top-user { position:relative; }
.top-user-btn { display:flex; align-items:center; gap:9px; border:0; background:transparent; padding:5px 8px; border-radius:8px; color:inherit; cursor:pointer; }
.top-user-btn:hover { background:var(--soft); }
.top-user-btn>div:nth-child(2) { display:flex; flex-direction:column; align-items:flex-start; }
.top-user-btn>svg { color:var(--muted); }
.top-user-btn strong { font-size:11px; }
.top-user-btn span { font-size:10px; color:var(--muted); }
.user-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 28px rgba(21,43,75,.16); padding:6px; z-index:30; }
.user-menu-head { display:flex; flex-direction:column; padding:8px 10px 9px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.user-menu-head strong { font-size:12px; }
.user-menu-head span { font-size:10px; color:var(--muted); }
.user-menu a { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; color:var(--ink); font-size:12px; }
.user-menu a:hover { background:var(--soft); }
.user-menu a.danger { color:#b42318; }
.user-menu a.danger:hover { background:#fef3f2; }

/* ---------- Content ---------- */
.content { padding:30px 34px 40px; flex:1; }
footer { padding:16px 34px; color:#93a1b3; font-size:11px; border-top:1px solid var(--line); background:#fff; }
footer span { margin:0 6px; color:#c3ccd8; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-heading>div { min-width:0; }
.page-heading h1, .page-heading .muted { overflow-wrap:anywhere; }
.eyebrow { font-size:10px; letter-spacing:.14em; color:#8b9aad; font-weight:700; margin-bottom:7px; }
.muted { color:var(--muted); }
.heading-actions { display:flex; gap:10px; }
.back-link { border:0; background:transparent; color:var(--muted); padding:0; margin-bottom:12px; font-size:12px; }
.detail-title { display:flex; align-items:center; gap:10px; }
.count-pill { background:#eaf0f7; color:#41618a; font-size:11px; padding:2px 8px; border-radius:10px; vertical-align:middle; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; border-radius:6px; border:1px solid transparent; padding:9px 15px; font-size:12px; font-weight:700; background:#fff; color:var(--ink); transition:background .15s,border-color .15s,color .15s; }
.btn.primary { background:var(--blue); color:#fff; }
.btn.primary:hover { background:var(--blue-dark); }
.btn.outline { border-color:#d5dde7; color:#3f536b; }
.btn.outline:hover { border-color:#a9bcd2; background:var(--soft); }
.btn.danger { background:var(--red); color:#fff; }
.btn.danger:hover { background:#a84040; }
.btn.small { padding:7px 12px; font-size:11px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.text-btn { border:0; background:transparent; color:var(--blue); font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
.text-btn:hover { text-decoration:underline; }
.small-btn { border:1px solid #d5dde7; background:#fff; border-radius:6px; padding:6px 12px; font-size:11px; font-weight:700; color:#40536c; }
.small-btn:hover { background:var(--soft); }
.row-action { color:var(--muted); }
.row-action:hover { color:var(--blue); }
.row-action.danger:hover { color:#b42318; }
.row-actions { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.inline-form { display:inline-flex; }
.clear-btn { color:#b9c4d1; }

/* ---------- Cards / panels ---------- */
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 19px; border-bottom:1px solid var(--line); }
.panel-title h2 { display:flex; align-items:center; gap:8px; }
.panel-title p { color:var(--muted); font-size:11px; margin-top:1px; }
.panel-title .searchbox { flex:1 1 200px; max-width:280px; }
@media (max-width:640px) { .panel-title { flex-wrap:wrap; } .panel-title .searchbox { flex:1 1 100%; max-width:none; } }
.heading-icon { color:#c3cedb; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:18px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; align-items:flex-start; gap:12px; position:relative; }
.stat-icon { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:#e8f0fa; color:var(--blue); flex-shrink:0; }
.stat-icon.amber { background:#fdf3e2; color:var(--amber); }
.stat-icon.violet { background:#f0ecfb; color:var(--purple); }
.stat-icon.green { background:#e6f4ee; color:var(--green); }
.stat-content { display:flex; flex-direction:column; min-width:0; }
.stat-content span { font-size:11px; color:var(--muted); }
.stat-content strong { font-size:19px; margin:3px 0 2px; letter-spacing:-.01em; }
.stat-content small { font-size:10px; color:#93a1b3; }
.stat-arrow { position:absolute; right:14px; top:14px; color:#c9d4e0; }
.dashboard-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:15px; margin-bottom:18px; }
.dashboard-grid>:only-child { grid-column:1 / -1; }
.attention-row { display:flex; align-items:center; gap:12px; padding:14px 19px; border-bottom:1px solid var(--line); }
.attention-row:last-child { border-bottom:0; }
.attention-row>div:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.attention-row strong { font-size:12px; }
.attention-row span { font-size:11px; color:var(--muted); margin-top:2px; }
.attention-icon { width:33px; height:33px; border-radius:8px; display:grid; place-items:center; background:#fdf3e2; color:var(--amber); flex-shrink:0; }
.attention-icon.red { background:#fdecec; color:var(--red); }
.quick-item { width:100%; display:flex; align-items:center; gap:12px; padding:13px 19px; border:0; border-bottom:1px solid var(--line); background:#fff; text-align:left; }
.quick-item:last-child { border-bottom:0; }
.quick-item:hover { background:var(--soft); }
.quick-item>div:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.quick-item strong { font-size:12px; }
.quick-item span { font-size:11px; color:var(--muted); margin-top:2px; }
.quick-icon { width:33px; height:33px; border-radius:8px; display:grid; place-items:center; background:#e8f0fa; color:var(--blue); flex-shrink:0; }
.quick-icon.violet { background:#f0ecfb; color:var(--purple); }

/* ---------- Tables ---------- */
.table-panel { overflow:hidden; }
/* position:relative → jadikan containing block agar .sr-only absolut (tanpa offset) di dalam sel
   terpotong oleh overflow, bukan lolos memanjangkan scroll dokumen melewati footer. */
.table-wrap { position:relative; overflow-x:auto; max-height:640px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
thead th { position:sticky; top:0; z-index:1; background:#f8fafc; text-align:left; font-size:10px; letter-spacing:.08em; color:#7b8a9d; padding:12px 14px; border-bottom:1px solid var(--line); text-transform:uppercase; white-space:nowrap; }
tbody td { padding:12px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
tbody tr:hover { background:#fafcfe; }
tbody tr:last-child td { border-bottom:0; }
th.right, td.right { text-align:right; white-space:nowrap; }
[hidden] { display:none !important; }
td .sub, .sub { display:block; font-size:10px; color:#93a1b3; margin-top:2px; }
/* Nomor dokumen panjang tanpa spasi: izinkan putus agar tidak mendorong lebar kolom. */
.code { font-family:Consolas,"Courier New",monospace; font-size:11px; color:#2f4a6d; overflow-wrap:anywhere; }
.account { font-family:Consolas,"Courier New",monospace; font-size:11px; background:#f1f5f9; padding:3px 7px; border-radius:4px; color:#3f536b; white-space:nowrap; }
.description { display:inline-block; max-width:420px; }
.ket-list { margin:3px 0 3px 16px; padding:0; }
.ket-list li + li { margin-top:2px; }
.ket-more summary { cursor:pointer; color:var(--blue); font-size:11px; }
.ket-more[open] { margin-top:3px; }
.ket-more[open] summary { margin-bottom:3px; }
.check-col { width:40px; }
.check-col input { width:15px; height:15px; accent-color:var(--blue); }
.nowrap { white-space:nowrap; }
.table-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 19px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); flex-wrap:wrap; }
.pagination { display:flex; gap:5px; }
.pagination a,.pagination span { border:1px solid #dde4ec; border-radius:5px; padding:5px 10px; color:#4d5f76; background:#fff; font-size:11px; }
.pagination .current { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.pagination .disabled { opacity:.45; }

/* ---------- Badges & alerts ---------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap; }
.badge.success { background:#e6f4ee; color:#1c6b4b; }
.badge.warning { background:#fdf3e2; color:#8a5c05; }
.badge.info { background:#e8f0fa; color:#21588f; }
.badge.danger { background:#fdecec; color:#a13c3c; }
.badge.neutral { background:#edf2f7; color:#5d6e82; }
.alert { display:flex; align-items:flex-start; gap:10px; padding:12px 15px; border-radius:var(--radius); margin-bottom:16px; border:1px solid; font-size:12px; }
.alert.success { background:#eef8f3; border-color:#bfe3d2; color:#1c6b4b; }
.alert.info { background:#eef4fb; border-color:#c6dbf1; color:#21588f; }
.alert.warning { background:#fdf7ec; border-color:#f0dcb4; color:#8a5c05; }
.alert.danger { background:#fdeeee; border-color:#f3c9c9; color:#a13c3c; }
.note { display:flex; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:var(--radius); font-size:11.5px; border:1px dashed #d6dee8; background:var(--soft); color:#4d5f76; }
.note.warning { border-color:#efd7a8; background:#fdf7ec; color:#8a5c05; }
.note.success { border-color:#bfe3d2; background:#eef8f3; color:#1c6b4b; }

/* ---------- Sync progress ---------- */
.sync-progress { flex-basis:100%; display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft); font-size:11.5px; }
.sync-progress-label { font-weight:700; color:#52647a; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.sync-progress progress { width:100%; height:10px; border:0; border-radius:20px; overflow:hidden; appearance:none; background:#e3e9f1; color:var(--blue); }
.sync-progress progress::-webkit-progress-bar { background:#e3e9f1; border-radius:20px; }
.sync-progress progress::-webkit-progress-value { background:var(--blue); border-radius:20px; transition:width .25s; }
.sync-progress progress::-moz-progress-bar { background:var(--blue); border-radius:20px; }
.sync-status { color:#3f536b; }
.sync-status.error { color:#a13c3c; font-weight:700; }
.sync-results { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; max-height:150px; overflow:auto; color:#4d5f76; }
.sync-results li { display:flex; align-items:flex-start; gap:7px; }
.sync-results li::before { content:"✓"; color:var(--green); font-weight:700; }
.sync-reload { align-self:flex-start; }

/* ---------- Filters ---------- */
.filterbar { display:flex; align-items:center; gap:10px; padding:15px 19px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.filterbar select, .filterbar input[type=text], .filterbar .searchbox, .filterbar .filter-btn { height:36px; padding-top:0; padding-bottom:0; }
.searchbox { display:flex; align-items:center; gap:9px; border:1px solid #d9e1eb; border-radius:6px; padding:8px 12px; background:#fff; color:#96a3b3; flex:1; max-width:340px; }
.searchbox input,.searchbox input[type=search],.searchbox input:focus { border:0; outline:none; box-shadow:none; flex:1; min-width:0; background:transparent; padding:0; }
.filter-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid #d9e1eb; background:#fff; border-radius:6px; padding:8px 12px; font-size:11px; color:#4d5f76; }
.filter-btn:hover { border-color:#a9bcd2; }
.filter-group { display:flex; align-items:center; gap:7px; font-size:11px; color:#4d5f76; }
.filter-group select { border:1px solid #d9e1eb; border-radius:6px; padding:8px 10px; background:#fff; }
.ac-list { position:fixed; z-index:80; margin:0; padding:4px; list-style:none; max-height:280px; overflow:auto; background:#fff; border:1px solid #d9e1eb; border-radius:6px; box-shadow:0 8px 24px rgba(15,23,42,.14); }
.ac-list li { padding:7px 10px; font-size:12px; color:#334155; border-radius:4px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-list li:hover, .ac-list li[aria-selected="true"] { background:#eef4fb; }
.ac-list li[aria-selected="true"] { color:#21588f; font-weight:700; }
.selectionbar { display:flex; align-items:center; gap:14px; padding:11px 19px; background:#eef4fb; border-bottom:1px solid #cfe0f2; font-size:12px; color:#21588f; }
.selectionbar .btn { margin-left:auto; }
.selectionbar .btn ~ .btn { margin-left:0; }
.selectionbar .unit-change { display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; flex-wrap:nowrap; }
.selectionbar .unit-change select { width:auto; padding:5px 9px; font-size:12px; border-radius:6px; }
.selectionbar .unit-change .btn { margin-left:0; white-space:nowrap; }
.selectionbar .unit-change + .btn { margin-left:0; }
@media (max-width:640px) { .selectionbar { flex-wrap:wrap; } .selectionbar .unit-change { margin-left:0; width:100%; flex-wrap:wrap; } }

/* ---------- Forms ---------- */
.form-layout { display:grid; grid-template-columns:1.6fr 1fr; gap:15px; align-items:start; }
.form-layout > * { min-width:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:19px; }
.form-grid .full { grid-column:1/-1; }
.form-grid label, .item-form label { display:flex; flex-direction:column; gap:7px; color:#52647a; font-size:11px; font-weight:700; }
.form-grid label span.req, .item-form label span.req { color:var(--red); }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea {
  border:1px solid #d9e1eb; border-radius:6px; background:#fff; color:var(--ink); padding:9px 11px; outline:none; width:100%;
}
input:focus,select:focus,textarea:focus { border-color:#6b9aca; box-shadow:0 0 0 3px rgba(37,99,169,.1); }
input[readonly],input:disabled { background:#f5f7fa; color:#71808f; }
textarea { min-height:80px; resize:vertical; }
.field-help { font-size:10px; color:#93a1b3; font-weight:400; }
.field-error { font-size:11px; color:#b42318; font-weight:700; }
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:#b42318; }
.preview-unit select { min-width:170px; padding:7px 9px; font-size:11px; }
select.unit-kosong { border-color:#d97706; background:#fffbeb; }
.alert a { color:inherit; }
.alert a:hover { text-decoration:underline; }
.alert:focus-visible { outline:3px solid #6b9aca; outline-offset:2px; }
.file-input { display:flex; align-items:center; gap:9px; border:1px solid #d9e1eb; border-radius:6px; padding:8px 11px; background:#fff; color:#5d6e82; }
.file-input input[type=file] { border:0; padding:0; width:auto; flex:1; }
.form-footer { display:flex; align-items:center; gap:10px; margin-top:15px; }
.form-success { display:inline-flex; align-items:center; gap:5px; color:var(--green); font-size:11px; font-weight:700; }
.selected-list { padding:6px 19px 0; }
.selected-list>div { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid #f1f5f9; }
.selected-list>div>div { flex:1; display:flex; flex-direction:column; min-width:0; }
.selected-list strong { font-size:12px; }
.selected-list span { font-size:11px; color:var(--muted); }
.check-mark { width:20px; height:20px; border-radius:50%; background:#e6f4ee; color:var(--green); display:grid; place-items:center; flex-shrink:0; }
.selected-total { display:flex; align-items:center; justify-content:space-between; padding:14px 19px; margin-top:6px; border-top:1px solid var(--line); font-size:12px; }
.selected-total strong { font-size:15px; }

/* ---------- Import ---------- */
.steps { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:15px 19px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.step { display:flex; align-items:center; gap:10px; color:#93a1b3; }
.step span { width:25px; height:25px; border-radius:50%; background:#eef2f7; color:#8493a6; display:grid; place-items:center; font-size:11px; font-weight:800; flex-shrink:0; }
.step div { display:flex; flex-direction:column; }
.step strong { font-size:12px; }
.step small { font-size:10px; color:#93a1b3; }
.step.active { color:var(--ink); }
.step.active span { background:var(--blue); color:#fff; }
.step-line { flex:1; height:1px; background:var(--line); min-width:20px; }
.import-panel .panel-title { border-bottom:0; }
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; margin:0 19px 19px; padding:38px 20px; border:2px dashed #cfdae7; border-radius:10px; background:#fbfcfe; color:#5d6e82; cursor:pointer; }
.dropzone:hover,.dropzone.dragover { border-color:#8fb4d8; background:#f4f8fd; }
.dropzone input[type=file] { display:none; }
.dropzone strong { font-size:13px; color:var(--ink); }
.dropzone span { font-size:11px; color:var(--muted); }
.upload-icon,.upload-success { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#e8f0fa; color:var(--blue); }
.upload-success { background:#e6f4ee; color:var(--green); }
.import-preview { border-top:1px solid var(--line); padding:17px 19px; }
.preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.preview-head p { font-size:11px; color:var(--muted); margin-top:2px; }
.preview-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:15px; }
.preview-stats>div { background:var(--soft); border:1px solid var(--line); border-radius:7px; padding:12px 14px; display:flex; flex-direction:column; }
.preview-stats span { font-size:11px; color:var(--muted); }
.preview-stats strong { font-size:18px; margin-top:3px; }
.amber-text { color:var(--amber); }
.red-text { color:var(--red); }
.green-text { color:var(--green); }
.mb-15 { margin-bottom:15px; }

/* ---------- Rekonsiliasi & detail ---------- */
.detail-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding:17px 19px; margin-bottom:15px; }
.detail-meta>div { display:flex; flex-direction:column; border-right:1px solid var(--line); padding-right:15px; }
.detail-meta>div:last-child { border-right:0; }
.detail-meta span { font-size:10px; letter-spacing:.06em; color:#8b9aad; text-transform:uppercase; }
.detail-meta strong { font-size:12.5px; margin-top:5px; }
.inline-value { display:flex; align-items:center; gap:6px; margin-top:3px; }
.inline-value strong { margin-top:0; overflow-wrap:anywhere; }
details.inline-edit { position:relative; }
details.inline-edit>summary { list-style:none; cursor:pointer; }
details.inline-edit>summary::-webkit-details-marker { display:none; }
.inline-edit-form { position:absolute; z-index:5; top:100%; left:0; margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 20px rgba(21,43,75,.12); padding:12px; min-width:300px; }
.inline-edit-form input[type=text] { flex:1; min-width:180px; }
.inline-edit-form .field-error { flex-basis:100%; text-transform:none; letter-spacing:0; }
.recon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; }
.recon-grid.single { grid-template-columns:1fr; }
.recon-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; }
.recon-card span { font-size:11px; color:var(--muted); }
.recon-card strong { font-size:17px; margin:6px 0 3px; }
.recon-card small { font-size:10px; color:#93a1b3; }
.recon-card.accent { border-color:#c6dbf1; background:#f7fbff; }
.tabs { display:flex; flex-wrap:wrap; gap:4px; padding:0 19px; border-bottom:1px solid var(--line); }
.tab { border:0; background:transparent; padding:14px 12px; font-size:12px; font-weight:700; color:#7b8a9d; border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:6px; }
.tab em { font-style:normal; font-size:10px; background:#eef2f7; padding:1px 7px; border-radius:9px; color:#5d6e82; }
.tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab.active em { background:#e8f0fa; color:#21588f; }
.detail-section { padding:17px 19px; }
.section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-title p { font-size:11px; color:var(--muted); margin-top:2px; }
.payment-list { display:flex; flex-direction:column; }
.payment-row { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #f1f5f9; }
.payment-row:last-child { border-bottom:0; }
.payment-date { width:52px; height:52px; border-radius:8px; background:#f2f6fb; color:#3f536b; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; line-height:1.1; }
.payment-date span { font-size:9px; font-weight:600; color:#8493a6; }
.payment-row>div:nth-child(2) { flex:1; display:flex; flex-direction:column; min-width:0; }
.payment-row strong { font-size:12px; }
.payment-row span { font-size:11px; color:var(--muted); margin-top:2px; }
.payment-amount { text-align:right; min-width:130px; }
.payment-amount strong { font-size:13px; }
.payment-amount span { display:block; font-size:10px; }

/* ---------- Items ---------- */
.item-form-panel { margin-top:18px; }
.item-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; border-top:1px solid var(--line); padding:18px 19px; }
.item-form label { color:#52647a; }
.item-form label > span { display:flex; gap:3px; }
.item-form .full { grid-column:1/-1; }
/* Grup field yang tampil/hilang mengikuti pilihan jenis form (display:contents agar tetap jadi grid item). */
.form-cond { display:contents; }
.form-cond[hidden] { display:none; }
.jenis-pilih { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#52647a; }
.jenis-pilih select { width:auto; padding:7px 10px; font-size:11px; }
@media (max-width:640px) { .heading-actions .jenis-pilih { width:100%; } .jenis-pilih select { flex:1; } }
.item-form-actions { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding-top:2px; }
.item-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; border:1px solid var(--line); background:#f2f6fb; }

/* ---------- Empty ---------- */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:7px; padding:52px 20px; text-align:center; }
.empty-icon { width:48px; height:48px; border-radius:12px; background:#eef2f7; color:#8493a6; display:grid; place-items:center; margin-bottom:4px; }
.empty-state strong { font-size:13px; }
.empty-state p { font-size:11.5px; max-width:420px; }
.empty-page { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:55vh; text-align:center; }

/* ---------- Penanda baris hasil sinkron (SIPD Laporan) ---------- */
tbody tr.row-baru { background:#eef8f3; box-shadow:inset 3px 0 0 var(--green); }
tbody tr.row-berubah { background:#fdf7ec; box-shadow:inset 3px 0 0 var(--amber); }
tbody tr.row-hilang { background:#fdeeee; box-shadow:inset 3px 0 0 var(--red); }
tbody tr.row-baru:hover { background:#e6f4ee; }
tbody tr.row-berubah:hover { background:#faf0dd; }
tbody tr.row-hilang:hover { background:#fbebeb; }
/* Legenda warna baris — tanda tidak lagi berupa kolom, jadi warna perlu keterangan. */
.legend { display:flex; align-items:center; gap:14px; font-size:11px; color:var(--muted); flex-wrap:wrap; padding:11px 19px; border-top:1px solid var(--line); }
.legend span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
/* <i> default inline: tanpa display, width/height/background diabaikan → swatch kosong.
   Swatch: satu blok warna penuh (tanpa latar pucat di dalamnya). */
.legend i { display:block; width:16px; height:16px; border-radius:3px; flex-shrink:0; }
.legend .baru { background:var(--green); }
.legend .berubah { background:var(--amber); }
.legend .hilang { background:var(--red); }

/* ---------- Halaman publik ---------- */
/* Keterangan tampil penuh (tanpa potong) dan mengisi sisa lebar tabel. */
.ket-cell .description { max-width:none; }

/* ---------- Utilitas aksesibilitas ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- Modal detail baris ---------- */
dialog.modal { width:min(1080px,94vw); max-width:none; max-height:88vh; margin:auto; padding:0; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 22px 60px rgba(15,32,56,.32); overflow:auto; }
dialog.modal::backdrop { background:rgba(15,32,56,.5); }
dialog.modal .modal-head { position:sticky; top:0; z-index:2; background:#fff; }
dialog.modal .detail-meta { margin-bottom:0; }
dialog.modal .modal-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 19px; border-top:1px solid var(--line); }
.detail-grid-4 { grid-template-columns:repeat(4,1fr); }
dialog.modal .detail-meta strong { overflow-wrap:anywhere; }
/* Nilai kolom yang berbeda dari data live — kuning gelap (sama dgn teks .alert.warning, kontras ≥4.5:1). */
.detail-meta strong.berubah-live { color:#8a5c05; }

/* ---------- Login ---------- */
.login-shell { min-height:100vh; display:grid; place-items:center; background:linear-gradient(160deg,#152b4b 0%,#1d3a62 55%,#2563a9 100%); padding:24px; }
.login-card { width:100%; max-width:392px; background:#fff; border-radius:12px; padding:30px; box-shadow:0 18px 46px rgba(10,25,45,.28); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.login-brand .brand-mark { width:42px; height:42px; border-radius:11px; background:var(--navy); }
.login-brand strong { display:block; font-size:15px; letter-spacing:.06em; }
.login-brand span { font-size:11px; color:var(--muted); }
.login-card h1 { font-size:19px; }
.login-card .form-grid { grid-template-columns:1fr; padding:0; }
.login-foot { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .content{padding:28px 24px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .form-layout{grid-template-columns:1fr}
  .sidebar{width:220px}
  .dashboard-grid,.recon-grid{grid-template-columns:1fr 1fr}
  .item-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:244px;z-index:60;transform:translateX(-100%);transition:transform .25s;overflow-y:auto}
  html.sb-mobile-open .sidebar{transform:none}
  .sb-fab{display:grid;position:fixed;left:14px;bottom:14px;z-index:50;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(21,43,75,.35);place-items:center}
  .sb-backdrop{position:fixed;inset:0;z-index:55;background:rgba(21,43,75,.45)}
  .sb-backdrop:not([hidden]){display:block}
  .sidebar .brand .collapse-btn{display:none}
  .topbar{padding:0 17px}
  .top-user-btn>div:nth-child(2){display:none}
  .content{padding:24px 15px}
  .page-heading{align-items:flex-start;flex-direction:column;gap:16px}
  .heading-actions{width:100%}
  .heading-actions .btn{flex:1;justify-content:center}
  .stat-grid,.recon-grid{grid-template-columns:1fr 1fr}
  .dashboard-grid,.form-grid,.item-form{grid-template-columns:1fr}
  .form-grid .full,.item-form .full{grid-column:auto}
  .detail-meta{grid-template-columns:1fr;gap:12px}
  .detail-meta>div{border:0;padding:0}
  .preview-stats{grid-template-columns:1fr 1fr}
  .filterbar{flex-wrap:wrap}
  .searchbox{max-width:none;flex-basis:100%}
  /* Layar sempit: jaga lebar kolom wajar, biarkan .table-wrap menggeser horizontal. */
  table{min-width:520px}
  .steps{overflow:auto}
  .step-line{width:25px}
  .payment-row{gap:9px;flex-wrap:wrap}
  .payment-row>div:nth-child(2){min-width:calc(100% - 70px)}
  .payment-amount{margin-left:52px;text-align:left}
  .item-form{grid-template-columns:1fr}
  footer{padding:14px 15px}
}
@media(max-width:470px){
  .stat-grid,.recon-grid{grid-template-columns:1fr}
  .preview-stats{grid-template-columns:1fr}
  .table-footer{align-items:flex-start;gap:10px;flex-direction:column}
}