/* ============================================================
   Corporate refinement — 30 September 2026.
   Loaded after style.css and workspace.css. Presentation only:
   no markup contract, data or permission changes.

   Principles
   · One surface language: white panels, light headers, hairline rules.
     (Replaces the mixed navy "ink strip" headers on some modules.)
   · Numbers in the UI face with tabular figures, not monospace.
   · Denser ledger rows; amounts align on the right edge.
   · Compact page intro so the first real figure is above the fold.
   ============================================================ */

:root {
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --paper: #f4f6f9;
  --surface: #ffffff;
  --sunken: #f8fafc;
  --line: #dfe4ec;
  --line-2: #e9edf2;
  --paper-line: #e3e8ef;
  --paper-line-2: #edf0f5;
  --paper-floor: #f8fafc;
  --paper-wash: #f5f8fc;
  --paper-label: #5b6b80;
  --tx-1: #0f1b2d;
  --tx-2: #4b5a6e;
  --tx-3: #6b7a8e;
  --r: 8px;
  --r-lg: 10px;
}

body {
  font-feature-settings: "tnum" 1, "cv11" 1;
  letter-spacing: -.003em;
}

/* ── numbers: UI face, tabular — mono only for codes/IDs ─────── */
.amt,
.panel-head .n,
.rail-count,
.chip b,
.queue .idx,
.queue-head .n,
.spark-scale,
.bars-col span,
.meter-row b,
.strip-cell b,
.slip-line b {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.amt { font-weight: 600; font-size: .88rem; }
.panel-head .n { font-size: .75rem; font-weight: 500; }
.rail-count { font-size: .72rem; }

/* ── panels: one header style everywhere ─────────────────────── */
.panel { border-color: var(--line); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(15, 27, 45, .04); }
.panel-head,
.canvas .panel > .panel-head,
.canvas[data-view] .panel > .panel-head,
form[data-form] > .panel-head {
  background: var(--surface);
  background-image: none;
  color: var(--tx-1);
  border-bottom: 1px solid var(--line-2);
  box-shadow: none;
  min-height: 3.1rem;
  padding: .8rem var(--pad);
}
.panel-head h2, .panel-head h3,
.canvas .panel > .panel-head h2, .canvas .panel > .panel-head h3,
.canvas[data-view] .panel > .panel-head h2, .canvas[data-view] .panel > .panel-head h3,
form[data-form] > .panel-head h2, form[data-form] > .panel-head h3 {
  color: var(--tx-1);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
.canvas[data-view] .panel > .panel-head .n,
form[data-form] > .panel-head .n { color: var(--tx-3); }
form[data-form] > .panel-head .icon-btn { color: var(--tx-3); }
form[data-form] > .panel-head .icon-btn:hover { background: var(--sunken); color: var(--tx-1); }
form[data-form] > .panel-head .icon-btn:focus-visible { outline-color: var(--brand); }
/* Compose forms keep one quiet brand cue instead of a navy slab. */
form[data-form].panel { border-top: 3px solid var(--brand); }
.panel-foot { background: var(--sunken); }

/* ── ledger rows: denser; wide ledgers put amounts on one right edge ── */
.row { min-height: 3.2rem; padding-top: .7rem; padding-bottom: .7rem; }
.row-t { font-size: .875rem; font-weight: 550; color: var(--tx-1); }
.row-m { font-size: .76rem; color: var(--tx-3); }
button.row:hover { background: var(--paper-wash); }
.document-row { min-height: 0; }
@media (min-width: 62rem) {
  /* Full-width registers (Dokumen, Jurnal): one line, amount rightmost so money reads down one column. */
  .record-panel .row-r { flex-direction: row-reverse; align-items: center; flex-wrap: wrap; gap: .45rem; min-width: 8.5rem; }
  .record-panel .row-r .amt { min-width: 6.5rem; text-align: right; }
}
/* Semakan list sits beside the detail pane: amount on line 1, status tags side by side on line 2,
   so the description keeps its width instead of truncating. */
@media (min-width: 62rem) {
  .canvas[data-view="transactions"] .rows .row-r { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem; max-width: 15rem; }
  .canvas[data-view="transactions"] .rows .row-r .amt { flex-basis: 100%; text-align: right; }
}

/* ── tags: quieter, consistent height ─────────────────────────── */
.tag {
  min-height: 1.35rem;
  padding: .1rem .45rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 550;
  letter-spacing: 0;
}

/* ── controls ─────────────────────────────────────────────────── */
.btn, .btn-2, .btn-crown, .btn-crown-2 { border-radius: 7px; font-weight: 600; letter-spacing: -.005em; }
.chip { border-radius: 7px; min-height: 2.25rem; font-size: .8rem; }
.chip.is-on { font-weight: 600; }
.seg { border-radius: 8px; }
.seg button { border-radius: 6px; font-size: .82rem; }
.toolbar + .chips { margin-top: 0 !important; }
.tx-hint { padding: .1rem var(--pad) .7rem; border-bottom: 1px solid var(--line-2); }

/* ── page intro: compact, figures above the fold ─────────────── */
.canvas { padding-top: 1.5rem; }
.workspace-intro { margin-bottom: 1.25rem; }
.workspace-heading { margin-bottom: 1rem; align-items: flex-end; }
.workspace-kicker { font-size: .68rem; color: var(--tx-3); margin-bottom: .35rem; }
.workspace-heading h1 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 650; letter-spacing: -.025em; margin-bottom: .3rem; }
.workspace-heading p:not(.workspace-kicker) { font-size: .86rem; }
.workspace-date { font-size: .76rem; color: var(--tx-3); }
.workspace-shortcuts { gap: .6rem; }
.workspace-link {
  align-items: center;
  padding: .7rem .85rem;
  border-radius: 9px;
  min-height: 3.5rem;
}
.workspace-link:hover { border-color: var(--brand-line); background: var(--paper-wash); box-shadow: none; }
.workspace-icon { width: 1.9rem; height: 1.9rem; background: var(--brand-soft); color: var(--brand-ink); }
.workspace-link strong { font-size: .82rem; font-weight: 600; }
.workspace-link small { margin-top: .1rem; font-size: .72rem; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-link > span:nth-child(2) { min-width: 0; }

/* Module pages that still carry an intro (Panduan Admin) match the scale. */
.module-intro h2 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 650; letter-spacing: -.025em; }

/* ── key figure ───────────────────────────────────────────────── */
.crown-figure { font-weight: 650; letter-spacing: -.035em; }
.crown-eyebrow, .eyebrow { letter-spacing: .07em; }

/* ── sidebar ──────────────────────────────────────────────────── */
.rail-link { font-size: .86rem; font-weight: 500; }
.rail-link.is-on { font-weight: 600; }

/* ── mobile: shortcuts become a compact 2×2, description hidden ─ */
@media (max-width: 600px) {
  .workspace-heading p:not(.workspace-kicker), .workspace-date { display: none; }
  .workspace-heading h1 { font-size: 1.25rem; margin: 0; }
  .workspace-heading { margin-bottom: .8rem; }
  .workspace-link { flex-wrap: nowrap; padding: .6rem .7rem; min-height: 3rem; gap: .55rem; }
  .workspace-link > span:nth-child(2) { flex-basis: auto; }
  .workspace-link small { display: none; }
  .workspace-icon { width: 1.7rem; height: 1.7rem; }
  .workspace-icon svg { width: 16px; height: 16px; }
  .row-t { font-size: .85rem; }
  .row-r { gap: .3rem; }
}

/* ── Semakan toolbar: search keeps a usable width, wraps under the tabs when tight ── */
@media (min-width: 62rem) {
  .canvas[data-view="transactions"] .toolbar { flex-wrap: wrap; row-gap: .6rem; }
  .canvas[data-view="transactions"] .toolbar .search { flex: 1 1 13rem; min-width: 13rem; }
}

/* ── registers: fixed-width status so actions and amounts line up ── */
@media (min-width: 62rem) {
  .record-panel .row-r .tag { min-width: 6.5rem; justify-content: center; }
}

/* ── Team: clock, work reports, activity (30 Sep) ────────────── */
.btn-xs { min-height: 2rem; padding: .25rem .6rem; font-size: .76rem; }
.clock-facts { grid-template-columns: 6.5rem 1fr; margin: 0; }
.clock-facts dd { font-weight: 600; }
.clock-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.clock-actions select { flex: 1 1 9rem; min-height: 42px; border: 1px solid var(--line); border-radius: 7px; padding: 0 .6rem; background: var(--surface); }
.clock-actions .btn { flex: 1 1 8rem; min-height: 42px; }
.team-board .row-r { flex-direction: row; align-items: center; gap: .4rem; }
.team-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line-2); }
.team-kpis > div { padding: .85rem var(--pad); border-right: 1px solid var(--line-2); }
.team-kpis > div:last-child { border-right: 0; }
.team-kpis dt { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
.team-kpis dd { margin: .25rem 0 0; font-size: 1.25rem; font-weight: 650; color: var(--tx-1); }
.team-kpis dd small { font-size: .78rem; color: var(--tx-3); font-weight: 500; }
.team-links { display: grid; gap: .5rem; }
.report-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem var(--pad); border-bottom: 1px solid var(--line-2); }
.report-filters select { min-height: 2.25rem; border: 1px solid var(--line); border-radius: 7px; padding: 0 .55rem; background: var(--surface); font-size: .82rem; }
.report-list { display: grid; }
.report-card { padding: .95rem var(--pad); border-top: 1px solid var(--line-2); }
.report-list > .report-card:first-child { border-top: 0; }
.report-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.report-card header strong { display: block; font-size: .9rem; font-weight: 600; }
.report-meta { display: block; font-size: .75rem; color: var(--tx-3); margin-top: .1rem; }
.report-summary { margin: .55rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--tx-1); white-space: pre-wrap; }
.report-items { margin: .45rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--tx-2); line-height: 1.55; }
.report-note { margin: .45rem 0 0; font-size: .8rem; color: var(--tx-2); line-height: 1.5; }
.report-note.is-warn { color: var(--warn); }
.report-note.is-review { padding: .45rem .6rem; background: var(--sunken); border-radius: 6px; border: 1px solid var(--line-2); }
.report-review { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.report-review input { flex: 1 1 12rem; min-height: 2rem; border: 1px solid var(--line); border-radius: 7px; padding: 0 .6rem; font-size: .8rem; }
.narrow-stack { max-width: 48rem; }
.activity-list { padding: .2rem 0 .4rem; }
.activity-day { margin: 0; padding: .8rem var(--pad) .3rem; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; }
.activity-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .75rem; padding: .6rem var(--pad); border-top: 1px solid var(--line-3, var(--line-2)); }
.activity-time { font-size: .78rem; color: var(--tx-3); font-weight: 500; padding-top: .1rem; }
.activity-body p { margin: 0; font-size: .86rem; }
.activity-body .tag { margin-left: .3rem; }
.activity-body ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .8rem; color: var(--tx-2); line-height: 1.55; }
.activity-ids { font-family: var(--mono); font-size: .7rem; color: var(--tx-3); }
.bank-now { margin: 0 0 .8rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
.bank-hist { list-style: none; margin: .9rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line-2); display: grid; gap: .35rem; font-size: .78rem; color: var(--tx-2); }
.bank-hist li { display: flex; justify-content: space-between; gap: .5rem; }
@media (max-width: 600px) {
  .team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-kpis > div:nth-child(2) { border-right: 0; }
  .team-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}

/* ── Tax pack (Borang B draft) ───────────────────────────────── */
.tax-controls { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.tax-controls .field { display: grid; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--tx-2); min-width: 9rem; }
.tax-controls select { min-height: 40px; border: 1px solid var(--line); border-radius: 7px; padding: 0 .6rem; background: var(--surface); font-size: .9rem; }
.tax-controls .hint { flex: 1 1 18rem; margin: 0; }
.tax-meters { display: grid; gap: .6rem; margin-top: 1.1rem; }
.tax-meter { display: grid; grid-template-columns: 11rem 1fr 3rem; align-items: center; gap: .75rem; font-size: .82rem; color: var(--tx-2); }
.tax-meter b { text-align: right; color: var(--tx-1); }
.tax-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tax-table + .tax-table { border-top: 1px solid var(--line); }
.tax-table th, .tax-table td { padding: .55rem var(--pad); text-align: left; border-bottom: 1px solid var(--line-2); }
.tax-table th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; background: var(--sunken); }
.tax-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tax-table tfoot td { font-weight: 600; color: var(--tx-1); }
.tax-table .tax-profit td { font-size: .95rem; font-weight: 700; border-top: 2px solid var(--tx-1); }
.tax-table .is-warn td { color: var(--warn); }
.tax-table .muted { color: var(--tx-3); }
@media (max-width: 600px) {
  .tax-meter { grid-template-columns: 1fr 3rem; }
  .tax-meter .meter { grid-column: 1 / -1; grid-row: 2; }
  .tax-table th, .tax-table td { padding: .5rem .7rem; }
}

/* ── Finance guide ──────────────────────────────────────────── */
.guide-list { margin: .6rem 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .88rem; line-height: 1.55; }
.guide-kpis dd.is-warn { color: var(--warn); }
.guide-map td { font-size: .8rem; vertical-align: top; }
.canvas[data-view="financeGuide"] code { font-family: var(--mono); font-size: .76rem; background: var(--sunken); padding: .1rem .3rem; border-radius: 4px; }

/* ── Staff home: "Hari saya" daily flow ─────────────────────── */
.day-hero { overflow: hidden; }
.day-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: 1.1rem var(--pad) .9rem; background: linear-gradient(180deg, var(--brand-soft), var(--surface)); border-bottom: 1px solid var(--line-2); }
.day-greet { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; color: var(--tx-1); }
.day-meta { margin: .3rem 0 0; font-size: .8rem; color: var(--tx-2); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.day-role { color: var(--tx-3); }
.day-steps { list-style: none; margin: 0; padding: .4rem 0; }
.day-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem var(--pad); position: relative; }
.day-step + .day-step::before { content: ""; position: absolute; left: calc(var(--pad) + .95rem); top: -.6rem; height: 1.2rem; border-left: 2px solid var(--line); }
.day-dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 650; background: var(--sunken); color: var(--tx-3); border: 1px solid var(--line); }
.day-dot svg { width: 16px; height: 16px; }
.day-step.is-now .day-dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.day-step.is-done .day-dot { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.day-text b { display: block; font-size: .92rem; font-weight: 600; color: var(--tx-1); }
.day-step.is-todo .day-text b { color: var(--tx-3); }
.day-text small { display: block; margin-top: .15rem; font-size: .78rem; color: var(--tx-2); }
.day-action .btn, .day-action .btn-2 { min-height: 40px; white-space: nowrap; }
.day-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 0 var(--pad) 1rem calc(var(--pad) + 2.75rem); font-size: .78rem; color: var(--tx-3); }
.feedback-card .panel-body { display: grid; gap: .5rem; justify-items: start; }
.feedback-quote { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tx-1); padding: .6rem .8rem; background: var(--sunken); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; }
.feedback-card.is-follow .feedback-quote { border-left-color: var(--warn); background: var(--warn-bg); }
.team-kpis dd.is-warn { color: var(--warn); }
.team-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Sales & marketing report metrics ───────────────────────── */
.metric-fields { border: 1px solid var(--line); border-radius: 9px; padding: .75rem .9rem .2rem; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.metric-fields legend { padding: 0 .35rem; font-size: .76rem; font-weight: 600; color: var(--brand-ink); }
.metric-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.metric-chip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .25rem .55rem; border-radius: 6px; background: var(--brand-soft); color: var(--brand-ink); font-size: .74rem; }
.metric-chip b { font-size: .82rem; }
@media (max-width: 600px) {
  .day-step { grid-template-columns: 2rem minmax(0, 1fr); }
  .day-action { grid-column: 2; }
  .day-action .btn, .day-action .btn-2 { width: 100%; }
  .day-alt { padding-left: var(--pad); }
  .metric-fields { grid-template-columns: 1fr; }
  .team-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-kpis-3 > div { border-bottom: 0 !important; border-right: 1px solid var(--line-2) !important; }
  .team-kpis-3 > div:last-child { border-right: 0 !important; }
  body.is-staff .workspace-intro { margin-bottom: .9rem; }
  body.is-staff .workspace-heading { display: none; }
}
body.is-staff .workspace-heading { display: none; }
.staff-home .sticky .team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-home .sticky .team-kpis > div:nth-child(2) { border-right: 0; }
.staff-home .sticky .team-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }

/* ── Ledger & reports ───────────────────────────────────────── */
.ledger-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.ledger-period .field { display: grid; gap: .3rem; font-size: .74rem; font-weight: 600; color: var(--tx-2); }
.ledger-period input { min-height: 38px; border: 1px solid var(--line); border-radius: 7px; padding: 0 .55rem; background: var(--surface); }
.ledger-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.ledger-tabs { margin: 0 var(--pad) var(--pad); }
.table-scroll { overflow-x: auto; }
.ledger-table tr.is-link { cursor: pointer; }
.ledger-table tr.is-link:hover td { background: var(--paper-wash); }
.ledger-table tr.is-section td { font-weight: 650; color: var(--tx-2); background: var(--sunken); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.ledger-table tr.is-total td { font-weight: 600; border-top: 1px solid var(--line); }
.ledger-table tr.is-warn td { color: var(--warn); }
.ledger-table td:first-child { width: 4.5rem; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.ledger-controls .panel-body { padding-bottom: .9rem; }

/* ── books in the app (3 Okt 2026): coding, journals, invoices ── */
.code-panel { margin-top: .9rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); display: grid; gap: .55rem; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.code-sug { margin: 0; font-size: .82rem; color: var(--tx-2); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.code-sug small { color: var(--tx-3); }
.code-line { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.code-line.is-split { grid-template-columns: minmax(0, 1fr) 7.5rem 2.25rem; align-items: center; }
.code-line select, .code-line input, .jl-row select, .jl-row input, .il-row select, .il-row input { min-width: 0; width: 100%; }
.code-journal { margin: 0; display: grid; gap: .15rem; font-size: .74rem; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.jl-head, .jl-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 6.5rem 6.5rem minmax(0, 1.4fr) 2.25rem; gap: .4rem; align-items: center; }
.jl-head, .il-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); font-weight: 600; }
.il-head, .il-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 5rem 7rem minmax(0, 1.6fr) 2.25rem; gap: .4rem; align-items: center; }
.il-head.is-staff, .il-row.is-staff { grid-template-columns: minmax(0, 2.4fr) 5rem 7rem 2.25rem; }
.jl-total { margin: .2rem 0 0; font-size: .86rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem .9rem; }
.import-warn { margin: .6rem 0; padding: .65rem .8rem; border-radius: var(--r); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); font-size: .82rem; }
.import-warn ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.panel-head select, .panel-head input[type="month"] { width: auto; min-height: 2rem; font-size: .8rem; padding: .2rem .5rem; }
@media (max-width: 40rem) {
  .jl-head, .il-head { display: none; }
  .jl-row { grid-template-columns: 1fr 1fr 2.25rem; }
  .jl-row select, .jl-row input[name^="memo_"] { grid-column: 1 / -1; }
  .il-row, .il-row.is-staff { grid-template-columns: 1fr 1fr 2.25rem; }
  .il-row input[name^="desc_"], .il-row select { grid-column: 1 / -1; }
  .code-line.is-split { grid-template-columns: minmax(0, 1fr) 6rem 2.25rem; }
}

/* ════════════════════════════════════════════════════════════════
   UX-audit fixes (2 Okt 2026)
   Line-editor controls, sheet rows, tab strips, toast, minimum text
   size and phone tap targets. Appended last so it wins on order;
   specificity is raised only where an earlier rule out-ranks it.
   ════════════════════════════════════════════════════════════════ */

/* 1 ── line-editor & inline controls look like .field controls ── */
.code-line select, .code-line input,
.jl-row select, .jl-row input,
.il-row select, .il-row input,
.panel-head select, .panel-head input[type="month"],
.panel-body .actions > select,
select[data-change],
.row-r select {
  min-height: 38px;
  padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-size: .9rem; color: var(--tx-1);
  accent-color: var(--brand); caret-color: var(--brand);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.code-line :is(select, input):hover:not(:focus):not(:disabled),
.jl-row :is(select, input):hover:not(:focus):not(:disabled),
.il-row :is(select, input):hover:not(:focus):not(:disabled),
.panel-head :is(select, input[type="month"]):hover:not(:focus):not(:disabled),
.panel-body .actions > select:hover:not(:focus):not(:disabled),
select[data-change]:hover:not(:focus):not(:disabled),
.row-r select:hover:not(:focus):not(:disabled) { border-color: var(--brand-line); }
.code-line :is(select, input):focus,
.jl-row :is(select, input):focus,
.il-row :is(select, input):focus,
.panel-head :is(select, input[type="month"]):focus,
.panel-body .actions > select:focus,
select[data-change]:focus,
.row-r select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.code-line :is(select, input):disabled,
.jl-row :is(select, input):disabled,
.il-row :is(select, input):disabled { background: var(--paper-2); color: var(--tx-3); cursor: not-allowed; }
.code-line input::placeholder, .jl-row input::placeholder, .il-row input::placeholder { color: var(--tx-3); }
/* desktop panel heads stay compact — they sit beside an h2 */
.panel-head select, .panel-head input[type="month"] { width: auto; min-height: 2rem; padding: .25rem .55rem; font-size: .8rem; }
@media (max-width: 600px) {
  .code-line select, .code-line input,
  .jl-row select, .jl-row input,
  .il-row select, .il-row input,
  .panel-head select, .panel-head input[type="month"],
  .panel-body .actions > select,
  select[data-change],
  .row-r select { min-height: 44px; font-size: 1rem; /* 16px: no iOS focus zoom */ }
  /* the remove-line column grows to hold a 44px icon button */
  .jl-row { grid-template-columns: 1fr 1fr 44px; }
  .il-row, .il-row.is-staff { grid-template-columns: 1fr 1fr 44px; }
  .code-line.is-split { grid-template-columns: minmax(0, 1fr) 6rem 44px; }
}

/* 2 ── bottom-sheet rows: titles get room before the right column ── */
.sheet-body > .rows > .row { grid-template-columns: minmax(8rem, 1fr) minmax(0, auto); }
.row-r .tag { white-space: normal; text-align: right; }

/* 3 ── tab strips: fade hint while scrollable, wrap on desktop ── */
@media (max-width: 61.99rem) {
  .seg, .ledger-tabs, .chips {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  /* Where supported, the fade follows the scroll: it lifts at the end of
     the strip and never shows on a strip that doesn't overflow (an
     inactive scroll timeline leaves the animation without effect). */
  @supports (animation-timeline: scroll()) {
    .seg, .ledger-tabs, .chips {
      -webkit-mask-image: none; mask-image: none;
      animation: tabstrip-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
}
@keyframes tabstrip-fade {
  0%, 92% { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  100% { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 62rem) {
  .seg, .ledger-tabs, .chips { flex-wrap: wrap; overflow-x: visible; }
}

/* 4 ── toast clears the primary buttons on phones: drop in from the top ── */
@media (max-width: 600px) {
  .toast {
    top: calc(env(safe-area-inset-top, 0px) + 4.5rem); bottom: auto;
    transform: translate(-50%, -10px);
  }
  .toast.show { transform: translate(-50%, 0); }
}

/* 5 ── nothing below 12px. :root :is() lifts specificity above the
   per-surface rules (.topbar-head .eyebrow, settings .facts dt …). ── */
:root :is(.eyebrow, p.eyebrow, .crown-eyebrow, .tag, .rail-group, .slip-sec, .panel-head .n,
  .crown-cell dt, .band-cell dt, .team-kpis dt, .canvas[data-view="settings"] .facts dt) { font-size: .75rem; }

/* 6 ── phone tap targets ── */
@media (max-width: 600px) {
  .chip, .btn-xs { min-height: 44px; }
  .icon-btn { min-height: 44px; min-width: 44px; }
}

/* 7 ── Laporan kerja filters share the row and are thumb-sized ── */
@media (max-width: 600px) {
  .report-filters select { flex: 1 1 140px; min-height: 44px; }
  .report-filters .btn-xs { flex: 1 1 140px; }
}

/* 8 ── employee (and other) forms: one column on narrow phones ── */
@media (max-width: 479.98px) {
  .panel-body.form .field-row { grid-template-columns: 1fr; }
}