/* Admin ala D1 Studio: chrome abu terang, toolbar, grid rapat, footer statistik. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif; background: #fff; color: #1f2328; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #0969da; outline-offset: 1px; }
#app { display: flex; height: 100vh; overflow: hidden; }
body:not(.rw) #grid td { cursor: default; }

/* ---- sidebar: daftar tabel + pohon bulan ---- */
#sidebar { width: 208px; flex: none; border-right: 1px solid #d8dee4; background: #f6f8fa; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
#side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; border-bottom: 1px solid #d8dee4; font-weight: 700; font-size: 15px; }
#side-brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #fff; }
body.no-side #sidebar { display: none; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#side-tables { display: flex; flex-direction: column; gap: 1px; }
.side-table { display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1f2328; text-align: left; }
.side-table:hover { background: #eaeef2; }
.side-table.active { background: #ddf4ff; font-weight: 600; }
.tbl-dot { color: #59636e; font-size: 12px; }
#side-cal { border-top: 1px solid #d8dee4; padding-top: 8px; }
#cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#cal-nav button { border: 1px solid #d8dee4; background: #fff; border-radius: 6px; padding: 1px 9px; cursor: pointer; }
#cal-title { font-weight: 600; font-size: 13px; }
#cal-head, #cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
#cal-head span { text-align: center; font-size: 10px; color: #59636e; padding: 2px 0; }
.cal-pad { min-height: 26px; }
.cal-day { position: relative; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; min-height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1px; color: #1f2328; }
.cal-day:hover { background: #eaeef2; }
.cal-day .cal-num { font-size: 12px; }
.cal-day .cal-n { font-style: normal; font-size: 9px; background: #0969da; color: #fff; border-radius: 8px; padding: 0 5px; line-height: 1.5; }
.cal-day.has-data { border-color: #bcd8f5; background: #f0f6ff; font-weight: 600; }
.cal-day.today .cal-num { border-bottom: 2px solid #cf222e; }
.cal-day.active { background: #0969da; border-color: #0969da; }
.cal-day.active .cal-num { color: #fff; }
.cal-day.active .cal-n { background: #fff; color: #0969da; }

/* ---- toolbar ---- */
#tool-wrap { border-bottom: 1px solid #d8dee4; background: #fff; }
#toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-wrap: wrap; }
.tb-btn { border: 1px solid #d8dee4; background: #f6f8fa; cursor: pointer; padding: 3px 10px; border-radius: 6px; font-size: 12px; }
.tb-btn:hover:not(:disabled) { background: #eaeef2; }
.tb-btn:disabled { opacity: .45; cursor: default; }
#tb-filter { margin-left: 6px; border: 1px solid #d8dee4; border-radius: 6px; padding: 3px 8px; font-size: 12px; width: 220px; max-width: 40vw; }
#tb-applied { font-size: 11px; border: 1px solid #1a7f37; color: #1a7f37; border-radius: 10px; padding: 1px 8px; cursor: pointer; background: #dafbe1; }

/* ---- grid ---- */
#grid-wrap { flex: 1; overflow: auto; background: #fff; }
#grid { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; }
#grid th, #grid td { border: 1px solid #d8dee4; padding: 4px 10px; white-space: nowrap; }
#grid thead th { background: #f6f8fa; position: sticky; top: 0; font-weight: 600; text-align: left; z-index: 2; }
#grid thead th .col-key { color: #8c959f; margin-right: 6px; font-size: 11px; }
#grid thead th .col-key.is-pk { color: #0969da; }
#grid tbody tr:hover td { background: #f6f8fa; }
#grid tbody tr.selected td { background: #ddf4ff; }
#grid .rownum { background: #f6f8fa; color: #59636e; text-align: right; position: sticky; left: 0; z-index: 1; }
#grid td.editable:hover { outline: 2px solid #0969da; outline-offset: -2px; cursor: text; }
#grid td.editable:focus { outline: 2px solid #0969da; outline-offset: -2px; }
#grid td input { width: 100%; border: none; outline: none; font: inherit; background: #fff8c5; }
#grid td.dirty { background: #fff8c5; }
#grid td.grid-empty { text-align: center; color: #59636e; padding: 18px; }
.c-good { background: #dafbe1; }
#grid tbody tr:hover td.c-good { background: #cdf5d8; }
.c-bad { background: #ffebe9; }
#grid tbody tr:hover td.c-bad { background: #ffddd8; }
.c-warn { background: #fff8c5; }

/* ---- footer: tab tanggal + statistik + pager + gembok ---- */
#foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid #d8dee4; background: #f6f8fa; padding: 4px 8px; flex-wrap: wrap; }
#tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 120px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.tab { border: 1px solid #d8dee4; border-bottom: none; background: #eaeef2; padding: 3px 12px; cursor: pointer; border-radius: 6px 6px 0 0; white-space: nowrap; font-size: 12px; }
.tab.active { background: #fff; font-weight: 600; border-bottom: 2px solid #0969da; }
.tab-nav, #btn-side, #btn-lock, #btn-mk, #btn-add, #btn-resign, #btn-pinnew, #btn-imp, #btn-tpl, #btn-clrday { border: 1px solid #d8dee4; background: #fff; cursor: pointer; padding: 3px 10px; border-radius: 6px; font-size: 12px; flex: none; }
#btn-clrday { color: #cf222e; border-color: #cf222e; }
#btn-lock { margin-left: auto; font-weight: 600; }
.tab-empty { color: #59636e; font-size: 12px; }
#foot-stats { color: #59636e; font-size: 12px; white-space: nowrap; padding: 0 4px; }
#pager { display: flex; align-items: center; gap: 4px; }
#pager button { border: 1px solid #d8dee4; background: #fff; border-radius: 6px; padding: 1px 8px; cursor: pointer; }
#pager button:disabled { opacity: .4; cursor: default; }
#pager-info { font-size: 12px; color: #1f2328; min-width: 90px; text-align: center; }

/* ---- modal login ---- */
#login-veil { position: fixed; inset: 0; background: rgba(31,35,40,.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
#login-box { background: #fff; padding: 20px 22px; border-radius: 10px; min-width: 300px; max-width: 90vw; border: 1px solid #d8dee4; box-shadow: 0 8px 28px rgba(31,35,40,.25); }
#login-box h3 { margin: 0 0 8px; }
#login-box label { display: block; margin: 8px 0; font-size: 13px; }
#login-box input { width: 100%; padding: 6px; margin-top: 2px; border: 1px solid #d8dee4; border-radius: 6px; }
.login-btns { display: flex; gap: 8px; margin-top: 14px; }
.login-btns button { border: 1px solid #d8dee4; background: #f6f8fa; border-radius: 6px; padding: 5px 16px; cursor: pointer; }
.login-btns button[type="submit"] { background: #0969da; border-color: #0969da; color: #fff; font-weight: 600; }
.login-err { color: #cf222e; }

/* ---- rekapitulasi ---- */
#rekap { padding: 16px; max-width: 760px; }
#rekap-form { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#rekap-form input, #rekap-form button { border: 1px solid #d8dee4; border-radius: 6px; padding: 5px 10px; font-size: 13px; }
#rekap-form input { min-width: 200px; }
#rekap-form button { background: #0969da; color: #fff; border-color: #0969da; cursor: pointer; }
#rekap h3 { margin: 6px 0 12px; }
#rekap-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rekap-card { border: 1px solid #d8dee4; border-radius: 8px; padding: 10px 16px; min-width: 130px; background: #f6f8fa; display: flex; flex-direction: column; font-size: 12px; color: #59636e; }
.rekap-card b { font-size: 26px; color: #1f2328; }
.rekap-card.bad { border-color: #cf222e; background: #ffebe9; }
.rekap-card.bad b { color: #cf222e; }
#rekap-tbl { border-collapse: collapse; }
#rekap-tbl th, #rekap-tbl td { border: 1px solid #d8dee4; padding: 4px 10px; font-size: 12.5px; }
#rekap-tbl th { background: #f6f8fa; text-align: left; }

/* ---- RDC ---- */
#rdc { margin-bottom: 18px; }
#rdc-title { margin: 2px 0 10px; font-size: 17px; }
#rdc-champ { border: 2px solid #d4a017; background: #fff8e1; border-radius: 10px; padding: 10px 16px; display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
#rdc-champ-t { font-size: 12px; color: #7a5c00; font-weight: 600; }
#rdc-champ b { font-size: 18px; }
#rdc-champ-v { font-size: 15px; font-weight: 700; color: #1a7f37; }
#rdc-div { font-size: 12px; color: #59636e; margin-bottom: 8px; }
#rdc-tbl { border-collapse: collapse; margin-bottom: 8px; }
#rdc-tbl th, #rdc-tbl td { border: 1px solid #d8dee4; padding: 4px 10px; font-size: 12.5px; }
#rdc-tbl th { background: #f6f8fa; text-align: left; }
#rdc-tbl tr.is-champ td { background: #fff8e1; font-weight: 600; }
#rdc-tbl td.rdc-name { cursor: pointer; color: #0969da; }
#rdc-exp { display: flex; gap: 8px; align-items: center; font-size: 13px; }
#rdc-exp select, #rdc-exp button { border: 1px solid #d8dee4; border-radius: 6px; padding: 4px 10px; }
#rdc-exp button { background: #0969da; color: #fff; border-color: #0969da; cursor: pointer; }

#rdc-tbl td.is-baru { color:#0969da; font-weight:600; }

#rdc-nav { display:flex; align-items:center; gap:8px; margin:2px 0 6px; }
#rdc-nav button { border:1px solid #d8dee4; background:#fff; border-radius:6px; padding:1px 10px; cursor:pointer; font-size:14px; }
#rdc-help { border-radius:50% !important; width:24px; height:24px; padding:0 !important; font-weight:700; color:#0969da; }
#rdc-expl { border:1px solid #d8dee4; background:#f6f8fa; border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:10px; max-width:760px; line-height:1.6; }

#rdc-prov { border:1px dashed #9a6700; background:#fff8e1; border-radius:8px; padding:8px 14px; font-size:12.5px; margin-bottom:10px; max-width:760px; }

#import-veil { position: fixed; inset: 0; background: rgba(31,35,40,.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
#import-box { background: #fff; padding: 20px 22px; border-radius: 10px; min-width: 320px; max-width: 92vw; max-height: 86vh; overflow: auto; border: 1px solid #d8dee4; box-shadow: 0 8px 28px rgba(31,35,40,.25); }
#import-box h3 { margin: 0 0 6px; font-size: 15px; }
.imp-hint { color: #59636e; font-size: 12px; }
#import-file { margin: 8px 0; }
#imp-prev { font-size: 12.5px; margin: 6px 0; }
.imp-err { color: #cf222e; font-size: 12px; max-height: 180px; overflow: auto; padding-left: 18px; }