/* Supply Madeena: tampilan mengikuti Madeena Brand Operating Manual.
   Warna resmi: Desert Brown #EEDBCA · Paradise Garden #407F77 · Sunset Sahara #F1D1BA · Mediterranean Ocean #466689
   Huruf: Lato (Bold heading, Regular body, Italic aksen). Varian teal (Paradise Garden) supaya beda dari
   Madina Assets (navy). Dipakai 2 sampai 3 warna per layar, tidak keempatnya sekaligus. */
:root {
  --desert: #EEDBCA;
  --garden: #407F77;
  --sahara: #F1D1BA;
  --ocean: #466689;

  --bg: #F7F0E8;
  --surface: #FFFCF8;
  --surface-2: #F4E9DD;
  --border: #E8D9C9;
  --text: #2B2622;
  --muted: #7B6F64;
  --primary: #407F77;
  --primary-strong: #326861;
  --primary-soft: #E1EFEC;
  --on-primary: #FFFCF8;
  --focus: rgba(64, 127, 119, .3);

  --side-bg: #2D5B55;
  --side-bg-2: #386B64;
  --side-text: #F4E8DC;
  --side-muted: #B9D3CE;

  --ok: #3F7D58;
  --warn: #B97F30;
  --bad: #B0544A;
  --info: #466689;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(43, 38, 34, .06), 0 4px 14px rgba(43, 38, 34, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--text); background: var(--bg);
}
h1, h2, h3 { font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
a { color: var(--primary-strong); }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 6px; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }

/* ---------- Kerangka ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  background-image: radial-gradient(circle at 100% 0, rgba(255,255,255,.07) 0 140px, transparent 141px),
                    radial-gradient(circle at 0 100%, rgba(241,209,186,.08) 0 180px, transparent 181px);
}
.brand { display: block; padding: 22px 20px 18px; text-decoration: none; color: inherit; }
.brand-logo { display: block; height: 18px; width: auto; max-width: 100%; }
.brand-name { display: block; margin-top: 10px; }
.brand-name strong { display: block; font-size: 1.05rem; }
.brand-name em { font-size: .8rem; color: var(--side-muted); }
.sidebar nav { padding: 6px 10px; flex: 1; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--side-text); text-decoration: none; margin-bottom: 2px;
}
.sidebar nav a:hover { background: var(--side-bg-2); }
.sidebar nav a.active { background: var(--desert); color: #2B3B38; font-weight: 700; }
.nav-badge { margin-left: auto; background: var(--sahara); color: #5a3a22; border-radius: 999px; font-style: normal; font-size: .75rem; padding: 1px 8px; font-weight: 700; }
.sidebar-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 8px; }
.me { flex: 1; display: block; color: inherit; text-decoration: none; min-width: 0; }
.me strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me small { color: var(--side-muted); }
.btn-icon { background: transparent; border: 0; color: inherit; padding: 8px; border-radius: 10px; cursor: pointer; display: inline-flex; }
.btn-icon:hover { background: rgba(255,255,255,.12); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 1.25rem; flex: 1; min-width: 180px; }
.topbar .btn-icon { color: var(--text); }
.menu-btn { display: none !important; }
.cutoff-form { display: flex; align-items: center; gap: 8px; }
.cutoff-form label { font-size: .85rem; color: var(--muted); }
.content { padding: 24px 28px 40px; max-width: 1400px; width: 100%; }
.foot { padding: 16px 28px 28px; }
.backdrop { display: none; }

/* ---------- Komponen ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; }
a.stat:hover { border-color: var(--primary); }
.stat .v { font-size: 1.7rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .85rem; color: var(--muted); }
.stat.bad .v { color: var(--bad); } .stat.warn .v { color: var(--warn); } .stat.ok .v { color: var(--ok); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 9px 16px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: .85rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary-strong); cursor: pointer; text-decoration: underline; font: inherit; }
input, select, textarea {
  font: inherit; color: inherit; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[type=file] { padding: 8px; }
textarea { min-height: 64px; resize: vertical; }
label { display: block; font-weight: 700; font-size: .9rem; }
label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; }
.form { display: grid; gap: 14px; }
.form-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 140px; }
.form-row > .btn { flex: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: end; }
.filters > * { width: auto; min-width: 130px; }
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid; }
.flash-success { background: #E6F2EA; border-color: #BFDCC9; color: #24563A; }
.flash-error { background: #F8E7E4; border-color: #E8C3BE; color: #7C3029; }
.flash-info { background: #E7EEF5; border-color: #C6D5E5; color: #2F4B69; }
.flash-warn { background: #F9EEDC; border-color: #EBD3A6; color: #6B4713; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-weight: 700; position: sticky; top: 0; white-space: nowrap; }
th a { color: inherit; text-decoration: none; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FBF5EE; }
td.num, th.num { text-align: right; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; margin: 1px 3px 1px 0; white-space: nowrap; }
.chip-bad { background: #F8E1DE; color: #8A2F26; }
.chip-warn { background: #F9EAD0; color: #7A5212; }
.chip-info { background: #E2EAF3; color: #2F4B69; }
.chip-muted { background: var(--surface-2); color: var(--muted); }
.chip-ok { background: #E0F0E6; color: #24563A; }
.empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.formula { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; font-variant-numeric: tabular-nums; }
.formula b { font-weight: 900; }
.callout { border-left: 4px solid var(--garden); background: var(--primary-soft); padding: 12px 16px; border-radius: 0 12px 12px 0; margin-bottom: 16px; }
.cell-edited { background: #FFF3DD; }
.src { color: var(--muted); font-size: .8rem; }
.pager { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pager a, .pager span { padding: 5px 11px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; background: var(--surface); }
.pager .cur { background: var(--primary); color: #fff; border-color: var(--primary); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 6px; cursor: pointer; color: var(--muted); }

/* ---------- Login: lengkung berlapis ---------- */
.login-page { background: var(--desert); min-height: 100vh; overflow-x: hidden; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; isolation: isolate; }
.arch { position: absolute; left: 50%; bottom: -2vh; transform: translateX(-50%); border-radius: 999px 999px 0 0; z-index: -1; transition: transform .3s ease-out; will-change: transform; }
.arch-3 { width: min(980px, 130vw); height: 84vh; background: var(--sahara); }
.arch-2 { width: min(760px, 108vw); height: 68vh; background: var(--garden); opacity: .92; }
.arch-1 { width: min(540px, 86vw); height: 52vh; background: var(--side-bg); }
.login-card { width: min(400px, 100%); padding: 30px 28px 26px; box-shadow: 0 18px 50px rgba(43, 38, 34, .22); position: relative; }
.login-logo { display: block; height: 52px; width: auto; margin: 0 0 14px; }
.login-card h1 { font-size: 1.5rem; margin-bottom: 4px; }
.login-card .tag { font-style: italic; color: var(--garden); margin-bottom: 16px; }
.install-card { max-width: 640px; margin: 40px auto; }
.brand-big { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.install-logo { height: 40px; width: auto; }

@media (prefers-reduced-motion: reduce) { .arch { transition: none; } }

/* ---------- Progres PO dan rekap family ----------
   Gerak hanya lewat transform, opacity, dan clip-path. Semua mati bila pengguna minta gerak dikurangi. */
:root {
  --st-terlambat: var(--bad);
  --st-ditahan: var(--warn);
  --st-sebagian: var(--ocean);
  --st-berjalan: var(--garden);
  --st-selesai: #9DBFA9;
  --st-batal: #C9BDB1;
}
.chip-st-terlambat { background: #F8E1DE; color: #8A2F26; }
.chip-st-ditahan { background: #F9EAD0; color: #7A5212; }
.chip-st-sebagian { background: #E2EAF3; color: #2F4B69; }
.chip-st-berjalan { background: var(--primary-soft); color: #28584F; }
.chip-st-selesai { background: #E0F0E6; color: #24563A; }
.chip-st-batal { background: var(--surface-2); color: var(--muted); }
.late { color: var(--bad); font-weight: 700; }
.fam-nums .bad b, .mf-num.bad { color: var(--bad); }
.fam-nums .ok b { color: var(--ok); }

.pbar-wrap { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.pbar { flex: 1; height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--c, var(--garden)); transform-origin: left center; transform: scaleX(var(--p, 0)); animation: fill .7s cubic-bezier(.2, .7, .2, 1) both; }
.pbar-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; min-width: 38px; text-align: right; }
.st-terlambat { --c: var(--st-terlambat); } .st-ditahan { --c: var(--st-ditahan); } .st-sebagian { --c: var(--st-sebagian); }
.st-berjalan { --c: var(--st-berjalan); } .st-selesai { --c: var(--st-selesai); } .st-batal { --c: var(--st-batal); }
td.pcol, th.pcol { min-width: 190px; }
.po-table td { vertical-align: middle; }

.stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); gap: 2px; clip-path: inset(0 round 999px); animation: wipe .8s cubic-bezier(.2, .7, .2, 1) both; }
.stack i { flex: 0 0 var(--w); background: var(--c); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: .85rem; color: var(--muted); }
.legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c, var(--garden)); vertical-align: -1px; }
.dot.mark { width: 3px; height: 12px; border-radius: 1px; background: var(--text); margin-right: 8px; }

.supbar { position: relative; height: 16px; min-width: 120px; }
.supbar-in { position: absolute; inset: 0; background: var(--surface-2); border-radius: 6px; overflow: hidden; animation: wipe .8s cubic-bezier(.2, .7, .2, 1) both; }
.supbar-in i { position: absolute; top: 0; bottom: 0; }
.seg-jadi { background: var(--garden); }
.seg-pot { background: var(--ocean); }
.seg-kurang { background: repeating-linear-gradient(135deg, rgba(176, 84, 74, .55) 0 4px, rgba(176, 84, 74, .18) 4px 8px); }
.dot.seg-kurang { background: repeating-linear-gradient(135deg, rgba(176, 84, 74, .7) 0 2px, rgba(176, 84, 74, .25) 2px 4px); }
.plan-mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); }
td.bcol, th.bcol { min-width: 170px; }

.fam-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.fam-tools { display: flex; gap: 8px; flex-wrap: wrap; }
details.fam { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 12px; background: var(--surface); }
details.fam[open] { border-color: var(--primary); box-shadow: var(--shadow); }
details.fam > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 150px minmax(160px, 1fr) minmax(300px, auto); gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius); }
details.fam > summary::-webkit-details-marker { display: none; }
details.fam > summary:hover { background: #FBF5EE; }
details.fam > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fam-name strong { display: block; font-size: 1.05rem; }
.fam-nums { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 14px; text-align: right; }
.fam-nums em { display: block; font-style: normal; font-size: .72rem; color: var(--muted); }
.fam-nums b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.fam-nums i { font-style: normal; font-size: .75rem; }
.fam-body { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.fam-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.fam-flags .btn { margin-left: auto; }
.mini-fam { display: grid; grid-template-columns: 110px 1fr 84px; gap: 12px; align-items: center; padding: 8px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); }
.mini-fam:last-of-type { border-bottom: 0; }
.mini-fam:hover .mf-name strong { text-decoration: underline; }
.mf-name span { display: block; }
.mf-num { text-align: right; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }

@keyframes fill { from { transform: scaleX(0); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0 round 6px); } to { clip-path: inset(0 0 0 0 round 6px); } }
@media (prefers-reduced-motion: reduce) {
  .pbar i, .stack, .supbar-in { animation: none; }
}
@media (max-width: 980px) {
  details.fam > summary { grid-template-columns: 1fr; gap: 10px; }
  .fam-nums { text-align: left; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mini-fam { grid-template-columns: 1fr 70px; }
  .mini-fam .mf-bar { grid-column: 1 / -1; grid-row: 2; }
  .fam-flags .btn { margin-left: 0; }
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
  .menu-btn { display: inline-flex !important; }
  .topbar { padding: 12px 16px; }
  .content { padding: 16px 16px 32px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }