/* ============================================================
   PETTY-CASH.CSS — scoped design tokens for the Petty Cash Center

   Every token and rule is scoped under `.pc-root` so the module's
   visual language (ported verbatim from the approved design) never
   leaks into — or is overridden by — the global platform stylesheet.
   Dark mode follows the module root's own data-theme attribute,
   which petty-cash-center.js keeps in sync with the app theme.

   Fonts (Archivo, JetBrains Mono) are linked from index.html and
   fall back to system-ui offline.
   ============================================================ */

.pc-root {
  /* Product redesign (v1.31.24.0): Petty Cash no longer carries its own palette or
     fonts — every canonical token (canvas, surfaces, borders, text, status
     colours, fonts) is INHERITED from platform.css so this module renders in
     the same design language as the rest of the product. Only the module's
     own token NAMES remain, as aliases. See docs/DESIGN-SYSTEM.md §2. */
  --sidebar: var(--surface); --rail: var(--surface);
  --bg: var(--canvas); --card: var(--surface); --card2: var(--surface-2); --border2: var(--grid);
  --label: var(--faint);
  --primary: var(--accent); --primary-fg: var(--on-accent); --primary-tint: var(--accent-subtle); --primary-text: var(--accent); --primary-hover: var(--accent-hover);
  --green: var(--ok); --green-tint: var(--ok-bg); --green-bd: color-mix(in srgb, var(--ok) 28%, transparent);
  --amber: var(--warn); --amber-tint: var(--warn-bg); --amber-bd: color-mix(in srgb, var(--warn) 28%, transparent);
  --blue: var(--info); --blue-tint: var(--info-bg); --blue-bd: color-mix(in srgb, var(--info) 28%, transparent);
  --purple: #6E56A6; --purple-tint: color-mix(in srgb, #6E56A6 12%, transparent);
  --input: var(--input-bg); --input-bd: var(--input-border);

  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;

  /* The module root is position:fixed;inset:0 (set in JS). Clamp horizontal
     overflow here so the full-screen overlay can never push the document
     past the viewport — documentElement.scrollWidth stays === innerWidth. */
  overflow-x: hidden;
  max-width: 100vw;
}

/* Dark mode: follows either the module root's own data-theme (set by JS) OR
   the platform's <html data-theme="dark"> ancestor (v1.14.0 embedded module —
   the app theme toggle flips the document attribute and the tokens cascade in
   without a Petty Cash re-render). */
.pc-root[data-theme="dark"],
[data-theme="dark"] .pc-root {
  --purple: #A98FD2; --purple-tint: color-mix(in srgb, #A98FD2 14%, transparent);
}

.pc-root, .pc-root * { box-sizing: border-box; }
/* v1.16.2.5 — Petty Cash Center adopts the unified workspace geometry (global
   --workspace-* tokens inherit into .pc-root) so every PC screen aligns with
   Analytics Executive: left-aligned, 1400 max, 56px left edge — replacing the
   old centered max-width:1200/margin:0 auto that made PC look like a different app. */
.pc-content-pad {
  max-width: var(--workspace-max-width);
  margin-left: 0;
  margin-right: 0;
  padding: var(--workspace-pad-top) var(--workspace-pad-inline) var(--workspace-pad-bottom);
}
.pc-root input, .pc-root select, .pc-root textarea, .pc-root button { font-family: inherit; }
.pc-root input:focus, .pc-root select:focus, .pc-root textarea:focus {
  outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Scoped scrollbar (WebKit) */
.pc-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.pc-root ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--bg); }
.pc-root ::-webkit-scrollbar-track { background: transparent; }

/* Animations (module-prefixed, safe globally). v1.31.23.0: pcSpin/pcPulse removed —
   zero consumers (CSS, JS inline styles, index.html), claimed removed by the Phase 8.1
   report but never actually landed. */
@keyframes pcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ============================================================
   Add/Edit Expense modal (Phase 9 mobile-first audit)

   addModal() in petty-cash-center.js was entirely inline-styled — no class
   for any of its structural pieces meant no @media query could ever reach
   it. These classes carry the EXACT same values the inline styles already
   had (same var(--input)/var(--input-bd)/var(--card) tokens, same padding/
   font sizes) so desktop looks unchanged; the @media blocks below are the
   actual new behavior: 2-col field grid collapses to 1 column, inputs hit
   16px (iOS zoom guard, matches .gud-input's same-purpose fix in
   gudang.css), and Save/Cancel get both a real min-height and a pinned
   footer instead of scrolling away with a long form.
   ============================================================ */
.pc-add-box {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  animation: pcPop .22s ease;
  display: flex;
  flex-direction: column;
}
.pc-add-head,
.pc-add-foot { flex: 0 0 auto; }
.pc-add-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.pc-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-add-input {
  width: 100%;
  margin-top: 6px;
  background: var(--input);
  border: 1px solid var(--input-bd);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
}
.pc-add-btn {
  border-radius: 9px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-add-btn--cancel { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.pc-add-btn--save { background: var(--primary); color: #fff; border: none; font-weight: 700; padding: 10px 20px; }
@media (max-width: 600px) {
  .pc-add-grid { grid-template-columns: 1fr; }
  .pc-add-input { font-size: 16px; }
}

/* ============================================================
   RESPONSIVE — single 1024px breakpoint (v1.13.1 mobile hardening)

   ≥1024px  → desktop: icon rail + sidebar + full topbar.
   <1024px  → mobile/tablet-portrait: rail + sidebar hidden, full-width
              content, compact header (title · bell · hamburger), and a
              slide-in drawer carries navigation + identity. List/table
              grids reflow into stacked cards so nothing scrolls sideways.
   ============================================================ */

/* Desktop default: mobile-only chrome (hamburger, drawer) stays hidden. */
.pc-root .pc-mobile-only { display: none !important; }
.pc-root .pc-drawer-scrim { display: none; }

/* v1.14.0 embedded module: the in-content screen switcher is mobile-only —
   on desktop the platform panel menu drives navigation. */
.pc-embed-nav { display: flex; }
@media (min-width: 768px) { .pc-embed-nav { display: none !important; } }

/* Tablet-landscape down: KPI grid to two-up before the full mobile reflow. */
@media (max-width: 1180px) {
  .pc-root .pc-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 1023px) {
  /* — Structure: drop desktop nav surfaces, let content fill the screen — */
  .pc-root .pc-rail,
  .pc-root .pc-sidebar { display: none !important; }
  .pc-root .pc-desktop-only { display: none !important; }
  .pc-root .pc-mobile-only { display: flex !important; }
  .pc-root .pc-drawer-scrim { display: block; }

  /* — Header: compact, no clipping — */
  .pc-root .pc-topbar { gap: 10px !important; padding: 0 14px !important; }
  .pc-root .pc-topbar-title { min-width: 0 !important; flex: 1 1 auto !important; }

  /* — Content: tighter padding, single-column everywhere — */
  .pc-root .pc-content-pad { padding: 16px 16px 60px !important; }
  .pc-root .pc-kpis { grid-template-columns: 1fr !important; }
  .pc-root .pc-2col { grid-template-columns: 1fr !important; }

  /* Section header rows (title + actions) wrap instead of overflowing. */
  .pc-root .pc-head-row { flex-wrap: wrap !important; }
  .pc-root .pc-set-stats { flex-wrap: wrap !important; gap: 18px 28px !important; }

  /* — KPI cards: full width, comfortable padding — */
  .pc-root .pc-kpis > div { padding: 16px !important; }

  /* — Expenses list → stacked card per row — */
  .pc-root .pc-exp-head { display: none !important; }
  .pc-root .pc-exp-row {
    grid-template-columns: 1fr auto !important;
    gap: 4px 12px !important;
    padding: 14px 16px !important;
  }
  .pc-root .pc-exp-row > div:nth-child(1) { order: 1; }
  .pc-root .pc-exp-row > div:nth-child(5) { order: 2; text-align: right !important; }
  .pc-root .pc-exp-row > div:nth-child(2) { order: 3; grid-column: 1 / -1; }
  .pc-root .pc-exp-row > div:nth-child(3) { order: 4; }
  .pc-root .pc-exp-row > div:nth-child(6) { order: 5; text-align: right !important; }
  .pc-root .pc-exp-row > div:nth-child(4) { display: none !important; } /* kategori → in detail drawer */

  /* — NOR select list → stacked card per row — */
  .pc-root .pc-nor-row {
    grid-template-columns: auto 1fr auto !important;
    gap: 4px 10px !important;
  }
  .pc-root .pc-nor-row > div:nth-child(1) { order: 1; }
  .pc-root .pc-nor-row > div:nth-child(2) { order: 2; }
  .pc-root .pc-nor-row > div:nth-child(5) { order: 3; text-align: right !important; }
  .pc-root .pc-nor-row > div:nth-child(3) { order: 4; grid-column: 1 / -1; }
  .pc-root .pc-nor-row > div:nth-child(4) { order: 5; grid-column: 1 / -1; }

  /* — NOR history cards: allow wrapping so metrics never clip — */
  .pc-root .pc-nor-hist { flex-wrap: wrap !important; }

  /* — Settings signatory editor → name+position paired, the rest stacked — */
  .pc-root .pc-sig-head { display: none !important; }
  .pc-root .pc-sig-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px; border: 1px solid var(--border2); border-radius: 10px;
  }
  .pc-root .pc-sig-row > input:nth-child(1) { grid-column: 1 / -1; }  /* order */
  .pc-root .pc-sig-row > input:nth-child(2) { grid-column: 1 / -1; }  /* label */
  .pc-root .pc-sig-row > input:nth-child(3) { grid-column: 1 / 2; }   /* name */
  .pc-root .pc-sig-row > input:nth-child(4) { grid-column: 2 / 3; }   /* position */
  .pc-root .pc-sig-row > div:nth-child(5) { grid-column: 1 / -1; justify-self: end; } /* delete */

  /* — NOR paper: shrink the print padding; let the wide rincian table
       scroll inside its own card rather than widening the page — */
  .pc-root .pc-nor-paper { max-width: 100% !important; }
  .pc-root .pc-nor-paper .pc-nor-pad { padding: 22px 18px !important; }
  .pc-root .pc-nor-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Mobile drawer ──────────────────────────────────────────────── */
.pc-drawer-scrim {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(20, 16, 14, .5); backdrop-filter: blur(2px);
  animation: pcFade .18s ease;
}
.pc-drawer {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 280px; max-width: 84vw;
  background: var(--sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pcDrawerIn .24s cubic-bezier(.22, .61, .36, 1);
  overflow-y: auto;
}
@keyframes pcDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ── Nama Unit autocomplete (v1.17.4 — Part A · Petty Cash Intelligence) ──────
   Apple-style suggestion dropdown that replaces the native datalist. Scoped
   under .pc-root so it inherits the module's design tokens and dark mode. */
.pc-root .pc-ac { position: relative; }
.pc-root .pc-ac-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 248px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-lg);
  padding: 5px; display: flex; flex-direction: column; gap: 1px;
  animation: pcAcIn .14s cubic-bezier(.22, .61, .36, 1);
}
/* The `display: flex` above must not win over the `hidden` attribute the JS
   toggles to close the dropdown (author rules otherwise beat the UA
   [hidden]{display:none} default regardless of specificity). */
.pc-root .pc-ac-menu[hidden] { display: none; }
@keyframes pcAcIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pc-root .pc-ac-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--text); line-height: 1.3;
  transition: background .12s ease;
}
.pc-root .pc-ac-item:hover { background: var(--card2); }
.pc-root .pc-ac-item.pc-ac-active { background: var(--primary-tint); color: var(--primary-text); }
.pc-root .pc-ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-root .pc-ac-tag {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue); border: 1px solid var(--blue-bd);
}
.pc-root .pc-ac-empty { padding: 11px 12px; font-size: 12px; color: var(--muted); }