/* MUJIA — blueprint Part 10. Every colour is a token; dark mode only swaps token values. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.f837d382a885.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.42b95430773b.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.75fb76ec3559.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.15ccd91d7a8f.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.2285bacdef39.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-latin-600-normal.b8dca52ca5f9.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  --paper: #FCFBF7; --ink: #1C1C17; --soft: #6E6C5E; --rule: #DFDACB;
  --tap: #F1F0E9; --selected: #E2E7D6; --selected-ink: #3F4A31; --crest: #6B7A52;
  --amber: #A8742A; --red: #A33A2A;
  --side-bg: #3F4A31; --side-text: #FCFBF7;
  --body: 14px; --control: 36px; --radius: 6px; --form: 560px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
html[data-theme="dark"] {
  /* Olive night: the brand green kept in the dark, never plain black and grey. */
  --paper: #14160F; --ink: #ECEAE0; --soft: #A7A893; --rule: #31352A;
  --tap: #1D2017; --selected: #2D3823; --selected-ink: #C9D8AE; --crest: #9DB07C;
  --side-bg: #27301D; --side-text: #ECEAE0;
  color-scheme: dark;
}
/* Pages before sign-in follow the device: light or dark. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --paper: #14160F; --ink: #ECEAE0; --soft: #A7A893; --rule: #31352A;
    --tap: #1D2017; --selected: #2D3823; --selected-ink: #C9D8AE; --crest: #9DB07C;
    --side-bg: #27301D; --side-text: #ECEAE0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 400 var(--body)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--selected-ink); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: 24px; } h2 { font-size: 18px; margin-top: 28px; } h3 { font-size: 15px; }
p { margin: 0 0 12px; }
.mono, code { font-family: var(--mono); font-size: 0.95em; }
.soft { color: var(--soft); }
.hidden { display: none !important; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: linear-gradient(to right, var(--side-bg) 232px, var(--paper) 232px); }
.side { background: var(--side-bg); color: var(--side-text); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand img { width: 30px; height: 30px; border-radius: 50%; background: #FCFBF7; }
.brand span { font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: 0.04em; }
.switcher select { width: 100%; background: rgba(255,255,255,0.08); color: var(--side-text); border: 1px solid rgba(255,255,255,0.18); }
.switcher select option { color: #1C1C17; background: #FCFBF7; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { color: var(--side-text); text-decoration: none; padding: 7px 10px; border-radius: var(--radius); opacity: 0.86; display: flex; justify-content: space-between; align-items: center; }
.nav a:hover { background: rgba(255,255,255,0.07); opacity: 1; }
.nav a[aria-current="page"] { background: rgba(255,255,255,0.13); opacity: 1; font-weight: 500; }
.nav .group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; padding: 14px 10px 4px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: inline-block; }
.side .foot { margin-top: auto; font-size: 13px; opacity: 0.85; padding: 0 6px; }
.side .soft { color: inherit; opacity: 0.7; }
.side .foot form { display: inline; }
.side .foot button { background: none; border: 0; color: inherit; padding: 0; height: auto; text-decoration: underline; cursor: pointer; font: inherit; }

.main { padding: 22px 32px 80px; min-width: 0; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 22px; }
.where { font-size: 13px; color: var(--soft); }
.where strong { color: var(--ink); font-weight: 600; }
.where .code { font-family: var(--mono); background: var(--selected); color: var(--selected-ink); padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--tap); color: var(--soft); border: 1px solid var(--rule); white-space: nowrap; }
.badge.warn { color: var(--amber); border-color: currentColor; background: transparent; }
.badge.bad { color: var(--red); border-color: currentColor; background: transparent; }

.bottombar { display: none; }

/* ---------- forms ---------- */
form.stack, .stack { display: flex; flex-direction: column; gap: 14px; max-width: var(--form); }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; font-size: 13px; }
label .hint { font-weight: 400; color: var(--soft); font-size: 12px; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: var(--body); }
input, select, textarea, button, .button {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); height: var(--control); padding: 0 10px;
}
textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
input[type="checkbox"] { height: 16px; width: 16px; accent-color: var(--selected-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--crest); outline-offset: 1px; }
input.pin, input.code { font-family: var(--mono); letter-spacing: 0.3em; font-size: 18px; max-width: 220px; }
button, .button { cursor: pointer; background: var(--tap); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; padding: 0 14px; white-space: nowrap; }
button.primary, .button.primary { background: var(--selected-ink); border-color: var(--selected-ink); color: var(--paper); }
button.danger { color: var(--red); background: transparent; border-color: currentColor; }
button.link { background: none; border: 0; color: var(--selected-ink); text-decoration: underline; padding: 0; height: auto; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.errors, .notice { border: 1px solid var(--rule); border-left: 3px solid var(--red); padding: 10px 12px; border-radius: var(--radius); background: var(--tap); max-width: var(--form); margin-bottom: 14px; }
.notice { border-left-color: var(--crest); }
.errors ul { margin: 0; padding-left: 18px; }
.field-error { color: var(--red); font-weight: 400; font-size: 12px; }

/* ---------- tables and cards ---------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 500; color: var(--soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.muted td { color: var(--soft); }
.card { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.empty { color: var(--soft); padding: 28px 0; }
.codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 28px; font-family: var(--mono); font-size: 16px; padding: 16px 18px; border: 1px dashed var(--rule); border-radius: 8px; margin: 10px 0 16px; }
.qr { width: 196px; height: 196px; background: #FFFFFF; padding: 10px; border-radius: 8px; border: 1px solid var(--rule); }
.qr svg { width: 100%; height: 100%; display: block; }
.secret { font-family: var(--mono); word-break: break-all; font-size: 13px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { color: var(--soft); } .kv dd { margin: 0; }

/* ---------- sign-in pages ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth .box { width: 100%; max-width: 380px; }
.auth .crest { width: 150px; height: 150px; display: block; margin: 0 auto 14px; }
.auth h1 { text-align: center; font-family: var(--serif); font-size: 36px; font-weight: 500; letter-spacing: 0.08em; color: var(--crest); margin-bottom: 2px; }
.auth .sub { text-align: center; color: var(--soft); margin-bottom: 26px; }
.auth input.pin, .auth input.code { max-width: none; width: 100%; }
.auth .pin-wrap { position: relative; }
.auth .pin-wrap .reveal { position: absolute; right: 6px; bottom: 6px; height: 30px; padding: 0 10px; font-size: 12px; background: transparent; border: 0; color: var(--soft); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pinpad button { height: 46px; font-family: var(--mono); font-size: 20px; background: var(--tap); border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); }
.pinpad button.soft { font-family: var(--sans); font-size: 16px; color: var(--soft); }
.pinpad button:active { background: var(--selected); }
.auth .links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 13px; }
.auth button.primary { width: 100%; }
.auth .qr { margin: 0 auto; }
.only-phone { display: none; }

/* ---------- problem report ---------- */
.report-btn { position: fixed; right: 18px; bottom: 18px; z-index: 20; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; height: 32px; font-size: 12px; color: var(--soft); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
dialog { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); max-width: 520px; width: calc(100% - 32px); padding: 20px; }
dialog::backdrop { background: rgba(20,20,16,0.4); }
dialog img.shot { max-width: 100%; max-height: 260px; object-fit: contain; object-position: top left; border: 1px solid var(--rule); border-radius: 6px; margin: 8px 0; }

/* ---------- phone ---------- */
@media (max-width: 640px) {
  :root { --body: 15px; --control: 44px; }
  .shell { grid-template-columns: 1fr; background: var(--paper); }
  .side { display: none; }
  .main { padding: 14px 16px 96px; }
  .topline { flex-direction: column; align-items: flex-start; }
  .grid2 { grid-template-columns: 1fr; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--side-bg); z-index: 30; padding-bottom: env(safe-area-inset-bottom); }
  .bottombar a { flex: 1; color: var(--side-text); text-decoration: none; text-align: center; padding: 12px 4px; font-size: 13px; opacity: 0.85; }
  .bottombar a[aria-current="page"] { opacity: 1; font-weight: 600; }
  .report-btn { bottom: 64px; right: 12px; }
  table.cards-on-phone thead { display: none; }
  table.cards-on-phone tr { display: block; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 10px; padding: 6px 4px; }
  table.cards-on-phone td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 10px; }
  table.cards-on-phone td::before { content: attr(data-label); color: var(--soft); font-size: 12px; flex: none; }
  table.cards-on-phone td > * { text-align: right; }
  .codes { grid-template-columns: 1fr; }
  .only-phone { display: block; }
  table.cards-on-phone td { padding: 2px 10px; }
}

/* ---------- the books (1B) ---------- */
.small { font-size: 12.5px; }
.warn-text { color: var(--amber); }
.stack.wide { max-width: 680px; }
.tabs { display: flex; gap: 4px; background: var(--tap); border: 1px solid var(--rule); border-radius: 8px; padding: 4px; }
.tabs a { flex: none; padding: 7px 16px; border-radius: 6px; color: var(--soft); text-decoration: none; font-weight: 500; }
.tabs a[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.catat { display: grid; grid-template-columns: minmax(0, 680px) minmax(280px, 340px); gap: 28px; align-items: start; }
.recent { border-left: 1px solid var(--rule); padding-left: 28px; }
.recent-head { display: flex; justify-content: space-between; align-items: baseline; }
.recent-head h3 { font-size: 17px; margin: 0 0 4px; }
.money { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: var(--radius); padding-left: 10px; background: var(--paper); }
.money span { color: var(--soft); font-weight: 400; }
.money input { border: 0; flex: 1; font-family: var(--mono); font-size: 16px; text-align: right; min-width: 0; }
input.r, .r { text-align: right; }
input[aria-invalid="true"] { border-color: var(--red); outline-color: var(--red); }
.rows { display: flex; flex-direction: column; gap: 6px; }
.rows-head, .rowline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 140px 26px; gap: 8px; align-items: center; }
.rows-head { font-size: 11.5px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.05em; }
.rowline select, .rowline input { width: 100%; min-width: 0; }
.rowline .stockline { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
.rowline .stockline[hidden] { display: none; }
[hidden] { display: none !important; }   /* a label or flex box with `hidden` stays hidden */
.rowline .stockline select { width: auto; min-width: 140px; flex: 0 1 220px; }
.rowline .stockline .qty { display: inline-flex; align-items: center; gap: 6px; }
.rowline .stockline .qty input { width: 110px; }
.rowline .stockline .unit { color: var(--soft); font-size: 13px; }
.rowline .x { background: none; border: 0; padding: 0; color: var(--soft); font-size: 17px; height: auto; }
.rows-foot { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--crest); padding-top: 10px; margin-top: 4px; }
.rows-foot .total { font-size: 22px; font-weight: 500; margin-left: 8px; }
.entry { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.entry .label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .meta { display: block; font-size: 12px; color: var(--soft); }
.entry .amt { white-space: nowrap; font-size: 13.5px; }
.entry.voided .amt .v, tr.voided td.num:not(.bal) { text-decoration: line-through; color: var(--soft); }
.thumb { display: inline-block; width: 22px; height: 28px; border-radius: 3px; background: var(--tap); border: 1px solid var(--rule); background-image: repeating-linear-gradient(to bottom, transparent 0 5px, var(--rule) 5px 6px); }
.nophoto { color: var(--soft); font-size: 12px; }
.month-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 16px; }
.month-nav a { text-decoration: none; font-size: 20px; }
.month-nav .button { margin-left: auto; font-size: 13px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.filters input[type="search"] { min-width: 220px; flex: 1; max-width: 320px; }
table.journal td, table.ledger td { vertical-align: middle; }
table.journal tr.sum td { border-bottom: 0; font-weight: 600; }
table.narrow { max-width: 640px; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; max-width: 1080px; }
.detail .big { font-size: 18px; font-weight: 500; }
.trail { display: grid; grid-template-columns: 140px 1fr; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.photos img { width: 150px; height: 190px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); background: var(--tap); }
.photos a.pdf { display: grid; place-items: center; width: 150px; height: 190px; border: 1px solid var(--rule); border-radius: 6px; background: var(--tap); text-decoration: none; }
.card.cash { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.card.cash .balance { font-size: 22px; font-weight: 500; }
.card.cash.muted { opacity: 0.7; }
.card.cash details form { margin-top: 8px; }
.cards + p { margin-top: 14px; }

@media (max-width: 640px) {
  .hide-phone { display: none; }
  .rows-head { display: none; }
  .rowline { grid-template-columns: minmax(0, 1fr) 118px 26px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .rowline input[name$="-note"] { grid-column: 1 / 3; grid-row: 2; }
  .rows-foot .total { font-size: 19px; }
  .tabs a { flex: 1; text-align: center; padding: 8px 4px; }
  .filters select, .filters input[type="search"] { flex: 1 1 45%; max-width: none; min-width: 0; }
  .catat form button.primary { width: 100%; height: 50px; }
}

@media print {
  .side, .bottombar, .report-btn, .topline form { display: none !important; }
  .shell { display: block; }
}

details.actions summary { cursor: pointer; color: var(--selected-ink); }
details.actions[open] { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
img.logo-preview { max-width: 160px; max-height: 80px; border: 1px solid var(--rule); border-radius: 6px; padding: 6px; background: #FFFFFF; }
form.row { margin-top: 12px; max-width: var(--form); }
form.row input[type="text"] { flex: 1; min-width: 160px; }
.stack + .row, .kv + .row { margin-top: 14px; }
.codes + .row + form { margin-top: 16px; }
.actions-list { display: flex; flex-wrap: wrap; gap: 10px; }
img.shot { max-width: 100%; border: 1px solid var(--rule); border-radius: 6px; }
.row a[aria-current="page"].badge { color: var(--ink); background: var(--selected); }

/* ---------- 1B.1: header switch, Beranda, Kas, Riwayat ---------- */
.where { display: flex; align-items: center; gap: 14px; }
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); background: var(--tap); border-radius: 999px; }
.theme-switch button { height: 26px; width: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: 13px; line-height: 1; }
.theme-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.ink { color: var(--ink); }
.strong { font-weight: 600; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.block-head h2 { margin: 0; font-size: 17px; }
.panel { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; background: var(--paper); min-width: 0; }
.cash-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cashcard { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.cashcard .name { font-weight: 600; font-size: 13px; }
.cashcard .balance { font-size: 22px; font-weight: 500; white-space: nowrap; }
svg.spark { display: block; max-width: 100%; overflow: visible; }
svg.spark polyline { fill: none; stroke: var(--crest); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.spark circle { fill: var(--crest); }
svg.spark.neg polyline { stroke: var(--amber); } svg.spark.neg circle { fill: var(--amber); }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.dash.single { grid-template-columns: minmax(0, 1fr); }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .k, .strip .k, .placecard .k { font-size: 11.5px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 20px; white-space: nowrap; }
.stat .s { font-size: 12px; color: var(--soft); }
.bars2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 14px; }
.bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.bar .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .track { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.bar .track .bg { fill: var(--tap); } .bar .track .fg { fill: var(--crest); }
.bar .mono { text-align: right; }
.bars2 .note { margin-top: 10px; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.co-btn { display: flex; flex-direction: column; align-items: stretch; text-align: left; height: auto; width: 100%; padding: 10px 12px; gap: 1px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; font-weight: 400; white-space: normal; }
.co.current .co-btn { border-color: var(--crest); }
.co-btn .top { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.co-btn .top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-btn .k { font-size: 11.5px; color: var(--soft); margin-top: 4px; }
.attn { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.attn .dot { margin-top: 7px; }
.attn > span:nth-child(2) .soft { display: block; }
.placecards { display: flex; flex-direction: column; gap: 14px; }
.placecard.muted { opacity: 0.75; }
.pc-grid { display: grid; grid-template-columns: 240px 180px 170px minmax(0, 1fr); gap: 26px; align-items: start; }
.pc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.placecard .balance { font-size: 26px; font-weight: 500; white-space: nowrap; }
.pc-flows .kv { gap: 3px 14px; margin-top: 6px; }
.pc-count { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pc-count .button { margin-top: 8px; height: 32px; }
.pc-moves { min-width: 0; }
.pc-moves .mv { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.pc-moves .mv .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-moves .k { margin-bottom: 4px; }
.struck { text-decoration: line-through; color: var(--soft); }
.pc-countform { border-top: 1px dashed var(--rule); margin-top: 14px; padding-top: 14px; }
.pc-links { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.strip { display: flex; flex-wrap: wrap; gap: 0; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--tap); margin: 4px 0 8px; }
.strip > div { display: flex; flex-direction: column; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--rule); }
.strip > div:last-child { border-right: 0; }
.strip .v { font-size: 17px; }
table.ledger .sub { display: block; font-size: 12.5px; color: var(--soft); }
.rows-toggle { height: 20px; width: 20px; padding: 0; margin-right: 4px; border: 0; background: none; color: var(--soft); font-size: 11px; vertical-align: 1px; }
.rows-toggle[aria-expanded="true"] { transform: rotate(90deg); }
tr.subrow td { background: var(--tap); font-size: 13px; padding-top: 5px; padding-bottom: 5px; }
tr.subrow td:nth-child(3) { padding-left: 34px; }

/* tablet: the laptop layout, a little narrower */
@media (max-width: 1100px) and (min-width: 641px) {
  .shell { grid-template-columns: 190px 1fr; background: linear-gradient(to right, var(--side-bg) 190px, var(--paper) 190px); }
  .main { padding: 20px 22px 80px; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bars2 { grid-template-columns: 1fr; gap: 12px; }
  .pc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  .catat, .detail { grid-template-columns: 1fr; }
  .recent { border-left: 0; padding-left: 0; }
}

/* phone: the simple version */
@media (max-width: 640px) {
  .catat, .detail { grid-template-columns: 1fr; }
  .recent { border-left: 0; padding-left: 0; }
  .topline { flex-direction: row; align-items: center; }
  .where { gap: 8px; font-size: 12.5px; }
  .cash-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cashcard .balance { font-size: 17px; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat .v { font-size: 17px; }
  .bars2, .dash .co-grid, .dash section:has(.co-grid) { display: none; }
  .pc-grid { grid-template-columns: 1fr; gap: 14px; }
  .placecard .balance { font-size: 22px; }
  .strip > div { padding-right: 14px; margin-right: 14px; }
  .pc-links { flex-wrap: wrap; }
}
table.ledger td:nth-child(1), table.ledger td:nth-child(2), table.ledger td.num, table.ledger .nophoto { white-space: nowrap; }
.entry .amt .v { display: block; text-align: right; }
.entry .amt .bal { display: block; font-size: 11.5px; color: var(--soft); text-align: right; }
details.entry-rows { padding: 2px 0 8px 40px; border-bottom: 1px solid var(--rule); margin-top: -1px; font-size: 13px; }
details.entry-rows summary { cursor: pointer; color: var(--selected-ink); font-size: 12.5px; }
.entry-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
@media (max-width: 640px) {
  .strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .strip > div { border-right: 0; padding-right: 0; margin-right: 0; }
}

/* ---------- 1B.1 follow-up: calmer proportions, month picker, company switcher, selects ---------- */
.main { width: 100%; max-width: 1360px; margin: 0 auto; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("../img/chevron.179992469e80.svg"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.month-nav { justify-content: space-between; }
.month-pick { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--paper); }
.month-pick .step { display: grid; place-items: center; width: 36px; height: 38px; text-decoration: none; color: var(--ink); font-size: 18px; }
.month-pick .step:hover { background: var(--tap); }
.month-pick .step.off { color: var(--rule); }
.month-pick select { border: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-radius: 0; height: 38px; font-weight: 600; font-size: 15px; padding-left: 14px; min-width: 170px; background-color: var(--paper); cursor: pointer; }
.filters select, .filters input[type="search"] { height: 38px; }
.co-switch { position: relative; }
.co-switch summary { list-style: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); cursor: pointer; }
.co-switch summary::-webkit-details-marker { display: none; }
.co-switch summary:hover, .co-switch[open] summary { background: rgba(255,255,255,0.13); }
.co-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.14); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
.co-name { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-name small { font-size: 11.5px; font-weight: 400; opacity: 0.7; }
.co-chev { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.7; }
.co-switch[open] .co-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.co-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-height: 60vh; overflow-y: auto; }
.co-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; align-items: center; width: 100%; height: auto; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; font-weight: 400; text-align: left; }
.co-item:hover { background: var(--tap); }
.co-item.on { background: var(--selected); }
.co-item .co-mark { width: 30px; height: 30px; background: var(--tap); color: var(--selected-ink); font-size: 11px; }
.co-item.on .co-mark { background: var(--paper); }
.co-item .tick { color: var(--selected-ink); font-size: 13px; }
@media (max-width: 640px) {
  .month-pick select { min-width: 0; flex: 1; }
  .month-pick { flex: 1; }
  .month-nav { gap: 10px; }
}
/* the same switcher and menu on the phone's Lain page (paper background, not the sidebar) */
.main .co-switch summary { background: var(--tap); border-color: var(--rule); color: var(--ink); }
.main .co-switch summary .co-mark { background: var(--selected); color: var(--selected-ink); }
.main .nav a { color: var(--ink); opacity: 1; }
.main .nav a:hover { background: var(--tap); }
.main .nav a[aria-current="page"] { background: var(--selected); }
.main .nav .group { color: var(--soft); opacity: 1; }
.badge.wrap { white-space: normal; display: inline-block; max-width: 100%; line-height: 1.35; padding: 2px 8px; border-radius: 10px; }

/* ---------- 1C: Ringkasan, Ekspor, closing ---------- */
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.report-table { width: 100%; }
.report-table tr.sum td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--rule); }
.report-table tr.soft-row td { color: var(--soft); }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll td.num, .table-scroll th.num { white-space: nowrap; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; gap: 18px; align-items: start; margin-top: 18px; }
.report-grid.two { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); margin-top: 0; }
.panel + .report-grid, .strip + .panel { margin-top: 0; }
.strip + .panel { margin-top: 4px; }
dl.checks { margin: 0; }
dl.checks > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
dl.checks dt { color: var(--ink); } dl.checks dd { margin: 0; }
dl.checks.wide > div { display: grid; grid-template-columns: 150px 1fr; } dl.checks.wide dd { color: var(--soft); }
.pick-companies { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 8px; }
.pick-companies legend { font-weight: 500; font-size: 13px; padding: 0 4px; }
.pick-companies .check { font-weight: 400; font-size: 14px; }
/* ---------- Penjualan ---------- */
.paper-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.paper-sum { position: sticky; top: 16px; }
.paper-sum h3 { margin-top: 0; }
dl.sum-list { margin: 8px 0; }
dl.sum-list > div { display: flex; justify-content: space-between; padding: 4px 0; }
dl.sum-list dt { color: var(--soft); } dl.sum-list dd { margin: 0; }
dl.sum-list .total { border-top: 2px solid var(--rule); margin-top: 4px; padding-top: 8px; font-weight: 600; font-size: 16px; }
dl.sum-list.narrow { max-width: 320px; margin-left: auto; }
.paper-main { max-width: none; }
.paper-main .stack { max-width: none; }
.paper-ref { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.paper-ref > div { display: flex; flex-direction: column; }
.paper-lines .pl-head, .paper-lines .pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 64px 112px 100px 26px; gap: 8px; align-items: center; }
.paper-editor[data-priced=""] .pl-head, .paper-editor[data-priced=""] .pl-row { grid-template-columns: minmax(0, 1fr) 96px 90px 26px; }
.pl-head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.pl-row { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.pl-row input, .pl-row select { width: 100%; min-width: 0; }
.pl-desc { display: flex; flex-direction: column; gap: 4px; }
.pl-total { color: var(--soft); }
.pl-row .x { background: none; border: 0; padding: 0; color: var(--soft); font-size: 17px; height: auto; }
.link-choice { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; margin: 0; display: grid; gap: 6px; }
.link-choice legend { font-weight: 500; padding: 0 4px; }
.heading-number { font-size: 0.6em; color: var(--soft); margin-left: 8px; }
.big-money { font-size: 22px; }
.badge.ok-badge { background: var(--selected); color: var(--selected-ink); }
.badge.muted-badge { opacity: .65; }
.badge.soft-badge { background: transparent; border: 1px dashed var(--rule); }
form.inline { display: inline; }
.danger-link { color: var(--red, #A33A2A); }
@media (max-width: 900px) { .paper-grid { grid-template-columns: 1fr; } .paper-sum { position: static; } }
@media (max-width: 640px) {
  .paper-lines .pl-head { display: none; }
  .paper-lines .pl-row, .paper-editor[data-priced=""] .pl-row { grid-template-columns: 1fr 1fr 26px; }
  .pl-row .pl-desc { grid-column: 1 / -1; }
  .pl-row [data-pl-qty] { grid-column: 1; grid-row: 2; } .pl-row [data-pl-unit] { grid-column: 2; grid-row: 2; }
  .pl-row .x { grid-column: 3; grid-row: 2; }
  .pl-row [data-pl-price] { grid-column: 1; grid-row: 3; } .pl-row .pl-total { grid-column: 2; grid-row: 3; text-align: right; }
  .paper-table .wide-only { display: none; }
}
/* ---------- Stok bahan ---------- */
.stock-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.stock-form .tabs { margin-bottom: 14px; }
.stock-form .tabs a { flex: 1; text-align: center; }
.stock-table td { vertical-align: middle; }
.stock-month { margin-bottom: 14px; }
.stock-now { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
.narrow-form { max-width: 560px; }
.archive-row { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); justify-content: space-between; max-width: 560px; }
@media (max-width: 900px) { .stock-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .stock-table .wide-only { display: none; } }
.levels-help { margin-top: 14px; }
.levels-help summary { cursor: pointer; font-weight: 500; padding: 6px 0; }
.levels-table { width: 100%; font-size: 13px; }
.levels-table th.lv, .levels-table td.lv { text-align: center; white-space: nowrap; width: 90px; }
.levels-table col.on { background: var(--selected); }
.access-table select { min-width: 110px; }
.access-table td { vertical-align: middle; }
.row.nowrap { flex-wrap: nowrap; }
.add-access { margin-top: 10px; }
.export-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.export-card { display: flex; flex-direction: column; }
.export-card .block-head { margin-bottom: 4px; }
.export-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.export-form label { flex: 1 1 150px; min-width: 0; }
.export-form select { width: 100%; }
.export-form button { flex: none; }
.export-card .export-form + p { margin-top: 12px; }
@media (max-width: 640px) { .export-top { grid-template-columns: 1fr; } .export-form button { width: 100%; } dl.checks.wide > div { grid-template-columns: 1fr; gap: 2px; } }
.notice.warn-notice { border-left-color: var(--amber); }
@media (max-width: 1100px) and (min-width: 641px) { .report-grid { grid-template-columns: 1fr 1fr; } .report-grid > .dash-side { grid-column: 1 / -1; } }
@media (max-width: 640px) { .report-grid, .report-grid.two { grid-template-columns: 1fr; } .report-head .row { width: 100%; } .places-table .wide-only { display: none; }
  .report-head .month-pick { flex: 1 1 100%; }
  .places-table th, .places-table td { padding: 7px 4px; } .places-table td.num { font-size: 13px; }
  .places-table th:first-child, .places-table td:first-child { padding-left: 0; } .places-table th:last-child, .places-table td:last-child { padding-right: 0; } }

/* Part 3: the budget year grid (categories × months); scrolls sideways inside its panel on small screens */
.budget-grid { border-collapse: collapse; min-width: 100%; }
.budget-grid th, .budget-grid td { padding: 6px 4px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
.budget-grid thead th { font-size: 12px; font-weight: 600; color: var(--soft); text-align: right; }
.budget-grid .cat { position: sticky; left: 0; background: var(--paper); box-shadow: 1px 0 0 var(--rule); text-align: left; font-weight: 500; padding-right: 12px; z-index: 1; }
.budget-grid thead .cat { font-weight: 600; }
.budget-grid th.now { color: var(--ink); }
.budget-grid input { width: 11ch; height: 34px; min-height: 0; text-align: right; padding: 4px 6px; font-size: 13px; }
.budget-grid .same input { width: 12ch; background: var(--tap); }
.budget-grid td.locked, .budget-grid th.locked { color: var(--soft); background: var(--tap); font-size: 13px; padding-left: 10px; padding-right: 10px; }
.budget-grid td.cat { font-size: 14px; }
.budget-grid tfoot th, .budget-grid tfoot td { font-weight: 600; border-bottom: 0; font-size: 13px; }
.form-foot { margin-top: 14px; gap: 12px; }
.plan-list .attn { align-items: center; }
.plan-total { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; }
.budget-meter { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.budget-meter:last-child { border-bottom: 0; }
.budget-meter .track { grid-column: 1 / -1; width: 100%; height: 6px; }
.budget-meter .track .bg { fill: var(--tap); } .budget-meter .track .fg { fill: var(--amber); } .budget-meter.lewat .track .fg { fill: var(--red); }

/* a fixed cost line: name and amount, then its status, with Bayar on the right */
.fixed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.fixed-row .name { font-weight: 500; min-width: 0; }
.fixed-row .mono { text-align: right; }
.fixed-row .state { font-size: 12.5px; }
.fixed-row .pay { grid-column: 2; grid-row: 2; height: 30px; padding: 0 12px; font-size: 13px; }
.fixed-row.muted { opacity: 0.6; }
.pager { justify-content: space-between; margin-top: 12px; gap: 12px; }