/* ==========================================================================
   the organisation — brand foundation (supporting-core)
   The single source of truth for colour, type, and shape shared by every group
   application. Ported from the Legal Management System design system.

   No external dependencies: fonts are self-hosted (served next to this file), no
   CDN is called. Serve this file and its sibling `fonts/` directory from one
   static path so the relative @font-face URLs resolve.

   Rule: never write a hex value in a component — use a --token.
   Dark mode is the base; light mode overrides it, either by user choice
   ([data-tema="terang"]) or by system preference (prefers-color-scheme: light).
   ========================================================================== */

/* ---------- Fonts (self-hosted, relative to this stylesheet) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/IBMPlexSans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/IBMPlexMono-600.woff2') format('woff2')}

/* ==========================================================================
   TOKENS — base values are DARK mode.
   ========================================================================== */
:root{
  /* Identity — the accent */
  --aksen:#2FA58B;
  --aksen-lembut:rgba(47,165,139,.14);
  --aksen-kontras:#FFFFFF;

  /* Surfaces and lines */
  --latar:#0F1419;
  --permukaan:#171D26;
  --permukaan-naik:#222B37;
  --sidebar:#0B0E13;
  --garis:#2B3442;
  --garis-tegas:#3A4556;

  /* Text */
  --teks:#E6EDF3;
  --teks-2:#9AA7B5;
  --teks-3:#6B7886;

  /* Status palette — five colours. The COLOURS are group identity; their
     MEANING is defined by each application, not here. */
  --st-merah:#E5736B;
  --st-oranye:#E0A64B;
  --st-hijau:#3FB984;
  --st-hitam:#8894A0;
  --st-abu:#7E8C94;
  --st-merah-bg:rgba(229,115,107,.14);
  --st-oranye-bg:rgba(224,166,75,.14);
  --st-hijau-bg:rgba(63,185,132,.14);
  --st-hitam-bg:rgba(0,0,0,.40);
  --st-abu-bg:rgba(126,140,148,.14);

  /* Support colours — rarely used */
  --info:#3F8FCB;
  --peringatan:#D9A21B;
  --info-bg:rgba(63,143,203,.14);
  --peringatan-bg:rgba(217,162,27,.12);

  /* Sidebar is always dark in both modes */
  --sb-teks:#C4D0D4;
  --sb-teks-2:#7E9198;
  --sb-aktif:rgba(255,255,255,.07);
  --sb-garis:rgba(255,255,255,.08);

  /* Shape */
  --r:10px; --r-sm:7px; --r-pill:999px;
  --bayang:0 1px 2px rgba(0,0,0,.35);
  --bayang-2:0 8px 24px rgba(0,0,0,.45);

  /* Frame sizes */
  --lebar-sidebar:260px;
  --lebar-sidebar-sempit:68px;
  --tinggi-topbar:64px;
  --padding-isi:24px;

  /* Motion */
  --gerak-panel:140ms;
  --gerak-baris:80ms;
  --gerak-toast:150ms;

  --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A9B7BD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* erp-core component-toolkit tokens (ADDITIVE — consumed only by the .sc-* layer
     at the foot of this file; no existing rule references them → zero visual change). */
  --permukaan-2:#1E2630;          /* erp surface-2: alt table/footer surface */
  --hover:rgba(255,255,255,.06);  /* erp hover: row/button hover wash */
  --font:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif; /* body sans stack */
  --mono:"IBM Plex Mono",Consolas,monospace;                            /* mono stack */
}

/* Light mode — by system preference (unless the user forced dark via data-tema OR data-theme) */
@media (prefers-color-scheme:light){
  :root:not([data-tema="gelap"]):not([data-theme="dark"]){
    --aksen:#1F8060;
    --aksen-lembut:rgba(31,128,96,.10);
    --aksen-kontras:#FFFFFF;
    --latar:#F5F6F8;
    --permukaan:#FFFFFF;
    --permukaan-naik:#FFFFFF;
    --sidebar:#121722;
    --garis:#E1E5EA;
    --garis-tegas:#7E8893;
    --teks:#172029;
    --teks-2:#4E5862;
    --teks-3:#6A747E;
    --st-merah:#C2402E;
    --st-oranye:#A96514;
    --st-hijau:#1F8552;
    --st-hitam:#3A444B;
    --st-abu:#6B777D;
    --st-merah-bg:rgba(194,64,46,.10);
    --st-oranye-bg:rgba(185,111,22,.10);
    --st-hijau-bg:rgba(31,133,82,.10);
    --st-hitam-bg:rgba(58,68,75,.10);
    --st-abu-bg:rgba(122,135,141,.12);
    --info-bg:rgba(63,143,203,.10);
    --peringatan-bg:rgba(217,162,27,.14);
    --bayang:0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.04);
    --bayang-2:0 8px 24px rgba(16,32,48,.12);
    --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    /* erp-core component-toolkit tokens (ADDITIVE) — light values */
    --permukaan-2:#F6F8FB;
    --hover:rgba(15,23,42,.05);
  }
}

/* Light mode — forced by the user. Supports BOTH the legacy data-tema="terang" and the
   phoenix-core data-theme="light" attribute (Fase 1.5 theme migration: both work during the
   transition, so apps can move their toggle to the shell's data-theme at their own pace). */
:root[data-tema="terang"],:root[data-theme="light"]{
  --aksen:#1F8060;
  --aksen-lembut:rgba(31,128,96,.10);
  --aksen-kontras:#FFFFFF;
  --latar:#F5F6F8;
  --permukaan:#FFFFFF;
  --permukaan-naik:#FFFFFF;
  --sidebar:#121722;
  --garis:#E1E5EA;
  --garis-tegas:#7E8893;
  --teks:#172029;
  --teks-2:#4E5862;
  --teks-3:#6A747E;
  --st-merah:#C2402E;
  --st-oranye:#A96514;
  --st-hijau:#1F8552;
  --st-hitam:#3A444B;
  --st-abu:#6B777D;
  --st-merah-bg:rgba(194,64,46,.10);
  --st-oranye-bg:rgba(185,111,22,.10);
  --st-hijau-bg:rgba(31,133,82,.10);
  --st-hitam-bg:rgba(58,68,75,.10);
  --st-abu-bg:rgba(122,135,141,.12);
  --info-bg:rgba(63,143,203,.10);
  --peringatan-bg:rgba(217,162,27,.14);
  --bayang:0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.04);
  --bayang-2:0 8px 24px rgba(16,32,48,.12);
  --panah:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E6169' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* erp-core component-toolkit tokens (ADDITIVE) — light values */
  --permukaan-2:#F6F8FB;
  --hover:rgba(15,23,42,.05);
}

/* ==========================================================================
   BASE — reset + typographic scale (element defaults only; components live
   in the templates layer / each app).
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;color:var(--teks);background:var(--latar);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
a{color:var(--aksen);text-decoration:none}
a:hover{text-decoration:underline}

/* A single focus ring for the whole interface */
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px;border-radius:3px}

h1{font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 10px}
h3{font-size:15px;font-weight:600;line-height:1.3;color:var(--teks);margin:0 0 8px}

/* Labels in sentence case — never all-caps */
label,.label{display:block;font-size:12.5px;font-weight:500;line-height:1.3;
  color:var(--teks-2);margin:0 0 5px}
.kecil{font-size:12px;line-height:1.4;color:var(--teks-2)}
.teks-abu{color:var(--teks-3)}
.teks-merah{color:var(--st-merah);font-weight:600}

/* Structured data: document numbers, codes, checksums */
.mono,code,kbd{font-family:"IBM Plex Mono",Consolas,monospace;font-variant-ligatures:none}
code{font-size:13px;background:var(--permukaan-naik);border:1px solid var(--garis);
  padding:1px 6px;border-radius:5px;color:var(--teks-2)}

svg.ikon{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.ikon-kecil{width:15px;height:15px}

/* ==========================================================================
   COMPONENT TOOLKIT — ported from erp-core, neutral .sc-*  (ADDITIVE)
   --------------------------------------------------------------------------
   A namespaced (.sc-*) copy of erp-core's content-component layer so that
   supporting feature-libraries can converge on the EXACT erp-core look in a
   later phase. Nothing here is wired into any feature template yet — defining
   these classes has ZERO visual effect until a template opts in by using them.

   Every erp token is remapped to the supporting-core token of the same MEANING;
   metrics / radii / weights / casing are preserved exactly so the rendered look
   matches erp-core. Token map applied throughout this section (erp name -> ours):
     accent          -> --aksen
     accent-contrast -> --aksen-kontras
     bg              -> --latar
     surface         -> --permukaan
     surface-2       -> --permukaan-2    (added to :root + both light blocks)
     elevated        -> --permukaan-naik
     border          -> --garis
     border-strong   -> --garis-tegas
     text            -> --teks
     muted           -> --teks-2
     faint           -> --teks-3
     ok              -> --st-hijau
     ok-bg           -> --st-hijau-bg
     warn            -> --st-oranye
     warn-bg         -> --st-oranye-bg
     danger          -> --st-merah
     danger-bg       -> --st-merah-bg
     radius          -> --r
     radius-sm       -> --r-sm
     shadow          -> --bayang-2
     hover (+ shell hover) -> --hover     (added to :root + both light blocks)
     font            -> --font            (added to :root)
     mono            -> --mono            (added to :root)
   ========================================================================== */

/* ---- Content card -------------------------------------------------------- */
.sc-card {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  box-shadow: var(--bayang-2);
  padding: 24px 26px;
  margin: 0 0 20px;
}
.sc-card h1 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sc-muted {
  color: var(--teks-2);
}
.sc-sub {
  color: var(--teks-2);
  font-size: 13.5px;
  margin: 0 0 18px;
}
.sc-sub a {
  color: var(--aksen);
}
/* standalone select (e.g. report filters) outside a form grid */
.sc-select {
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 8px 11px;
  min-width: 240px;
}
.sc-select:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 25%, transparent);
}

/* list-page card header: title left, action (e.g. +Tambah) right */
.sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.sc-head h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Big page header (dashboard): icon + title + subtitle ---- */
.sc-pagehead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}
.sc-pagehead-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--aksen) 14%, transparent);
  color: var(--aksen);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-pagehead h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sc-pagehead .sc-sub {
  margin: 3px 0 0;
}

/* ---- Topbar icon button (notification bell) ---- */
.sc-topbar-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sc-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--garis);
  background: transparent;
  color: var(--teks-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.sc-iconbtn:hover {
  background: var(--hover);
  color: var(--teks);
  border-color: var(--garis-tegas);
  text-decoration: none;
}
.sc-bell {
  position: relative;
}
.sc-notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--st-merah);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--permukaan);
}

/* ---- Notifications page list ---- */
.sc-notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc-notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  box-shadow: var(--bayang-2);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.1s ease;
}
.sc-notif-item:hover {
  border-color: var(--garis-tegas);
  text-decoration: none;
}
.sc-notif-count {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 9px;
  background: var(--st-merah-bg);
  color: var(--st-merah);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-notif-title {
  font-weight: 600;
}

/* ---- Dashboard: stat cards + panels -------------------------------------- */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}
.sc-stat {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  box-shadow: var(--bayang-2);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
/* clickable stat card (links to the related report) */
a.sc-stat:hover {
  border-color: var(--garis-tegas);
  box-shadow: var(--bayang-2), 0 0 0 1px var(--garis-tegas) inset;
  text-decoration: none;
}
.sc-stat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 40x40 soft-accent icon box at the right of each card */
.sc-stat-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--aksen) 14%, transparent);
  color: var(--aksen);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-stat .k {
  font-size: 12px;
  font-weight: 600;
  color: var(--teks-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sc-stat .v {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sc-stat .v .cur {
  font-size: 13px;
  font-weight: 600;
  color: var(--teks-2);
  margin-right: 4px;
}
.sc-stat .sub {
  font-size: 12.5px;
  color: var(--teks-3);
}
.sc-stat.accent {
  border-color: color-mix(in srgb, var(--aksen) 45%, var(--garis));
}
.sc-stat.accent .v {
  color: var(--aksen);
}
.sc-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 0 0 20px;
}
.sc-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}
.sc-kv {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.sc-kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sc-kv .n {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sc-kv .l {
  font-size: 12.5px;
  color: var(--teks-2);
}

/* ---- Tables -------------------------------------------------------------- */
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sc-table th,
.sc-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--garis);
  vertical-align: middle;
}
.sc-table th {
  color: var(--teks-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--permukaan-2);
  border-bottom-color: var(--garis-tegas);
  white-space: nowrap;
}
.sc-table tbody tr:last-child td {
  border-bottom: none;
}
.sc-table tbody tr:hover {
  background: var(--hover);
}
.sc-table td.num,
.sc-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
.sc-table .empty {
  color: var(--teks-3);
  font-style: italic;
  text-align: center;
  padding: 28px 14px;
}
.sc-table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--garis-tegas);
  border-bottom: none;
  background: var(--permukaan-2);
}
.sc-table tr.section td {
  font-weight: 600;
  color: var(--teks-2);
  background: var(--permukaan-2);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.sc-table tr.subtotal td {
  font-weight: 600;
  border-top: 1px solid var(--garis-tegas);
}
/* live total in entry forms */
.sc-table tr.sc-total-row td {
  font-weight: 700;
}
.sc-table tr.sc-total-lg td {
  font-size: 1.3em;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sc-table td[data-line-total] {
  color: var(--teks-2);
  white-space: nowrap;
}
.sc-table tfoot td [data-balance] {
  font-weight: 600;
}
/* inputs/selects embedded inside table rows (e.g. line editor) */
.sc-table input,
.sc-table select {
  width: 100%;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 7px 9px;
}
.sc-table input:focus,
.sc-table select:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 25%, transparent);
}

/* ---- Freeze panes: wide reports — sticky top header + left column -------- */
.sc-rpt-wrap {
  max-height: 72vh;
  overflow: auto;
}
.sc-rpt-wrap > table.sc-table th,
.sc-rpt-wrap > table.sc-table td {
  background: var(--permukaan);
}
.sc-rpt-wrap > table.sc-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--permukaan-2);
  box-shadow: inset 0 -1px 0 var(--garis-tegas);
}
.sc-rpt-wrap > table.sc-table thead tr:first-child th {
  height: 34px;
}
.sc-rpt-wrap > table.sc-table thead tr.rpt-sub th {
  top: 34px;
}
.sc-rpt-wrap > table.sc-table th:first-child,
.sc-rpt-wrap > table.sc-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--garis);
}
.sc-rpt-wrap > table.sc-table thead th:first-child {
  z-index: 3;
}
.sc-rpt-wrap > table.sc-table tr.subtotal td,
.sc-rpt-wrap > table.sc-table tr.section td,
.sc-rpt-wrap > table.sc-table tfoot td {
  background: var(--permukaan-2);
}
/* multi-period report column separators (mp-m between months, mp-p Value|%) via
   box-shadow inset — NOT a collapsed border (which bleeds a light line through the frozen
   left column while scrolling). box-shadow is boxed in the cell → occluded by the frozen
   column; theme colour → tidy in dark & light. */
.sc-rpt-wrap > table.sc-mp td.mp-m {
  box-shadow: inset 2px 0 0 var(--garis-tegas);
}
.sc-rpt-wrap > table.sc-mp td.mp-p {
  box-shadow: inset 1px 0 0 var(--garis);
}
.sc-rpt-wrap > table.sc-mp thead th.mp-m {
  box-shadow: inset 2px 0 0 var(--garis-tegas), inset 0 -1px 0 var(--garis-tegas);
}
.sc-rpt-wrap > table.sc-mp thead th.mp-p {
  box-shadow: inset 1px 0 0 var(--garis), inset 0 -1px 0 var(--garis-tegas);
}

/* ---- Forms --------------------------------------------------------------- */
.sc-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
.sc-form.wide {
  max-width: none;
}
.sc-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--teks-2);
  margin: 0 0 6px;
}
.sc-form input,
.sc-form select,
.sc-form textarea {
  width: 100%;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 10px 12px;
}
.sc-form input::placeholder,
.sc-form textarea::placeholder {
  color: var(--teks-3);
}
.sc-form input:focus,
.sc-form select:focus,
.sc-form textarea:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 25%, transparent);
}
.sc-form .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.sc-form .hint {
  font-size: 12px;
  color: var(--teks-3);
  margin-top: 5px;
  font-weight: 400;
}

/* ---- Combobox (type-ahead) ---- */
.sc-cb-wrap { position: relative; }
select.sc-cb-native { display: none; }
.sc-cb-input {
  width: 100%;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 10px 12px;
}
.sc-table .sc-cb-input { padding: 7px 9px; }
.sc-cb-input:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 25%, transparent);
}
.sc-cb-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 360px;
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: var(--permukaan);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.sc-cb-opt {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.sc-cb-opt.active,
.sc-cb-opt:hover { background: var(--permukaan-2); }
.sc-cb-opt.sel { color: var(--aksen); font-weight: 600; }

/* table cell no-wrap utility (e.g. date column) */
.sc-table .nowrap { white-space: nowrap; }

/* horizontal-scroll wrapper for wide tables (no freeze-pane; distinct from .sc-rpt-wrap) */
.sc-tablewrap {
  overflow-x: auto;
}

/* ---- Buttons ------------------------------------------------------------- */
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
  background: var(--aksen);
  color: var(--aksen-kontras);
}
.sc-btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
}
.sc-btn.secondary {
  background: transparent;
  color: var(--teks);
  border-color: var(--garis-tegas);
}
.sc-btn.secondary:hover {
  background: var(--hover);
  text-decoration: none;
}
.sc-btn.danger {
  background: var(--st-merah);
  color: #fff;
}
.sc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.sc-btn.sm {
  padding: 6px 11px;
  font-size: 13px;
}

/* ---- Row of action buttons (list rows, detail headers) ------------------- */
.sc-act {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Inline "add" box ---- */
.sc-addbox {
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-top: 16px;
}
.sc-addrow {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.sc-addrow > div {
  flex: 1 1 160px;
}
.sc-addrow label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--teks-2);
  margin: 0 0 5px;
}
.sc-addrow input,
.sc-addrow select {
  width: 100%;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 9px 11px;
}
/* FILTER row: controls must NOT stretch full width. .sc-addrow is used for the
   "add" row (many fields, may fill the row) AND the filter row. The explicit
   .filter modifier (or a GET form) → controls use a sensible width, not melar. */
.sc-addrow.filter > div,
form.sc-addrow[method="get"] > div { flex: 0 1 auto; }
.sc-addrow.filter select,
form.sc-addrow[method="get"] select { width: auto; min-width: 200px; max-width: 320px; }
.sc-addrow.filter input,
form.sc-addrow[method="get"] input { width: auto; max-width: 220px; }

/* alternative filter row (.sc-filter — inline label+input markup) */
.sc-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
}
.sc-filter label { font-size: 13px; font-weight: 600; color: var(--teks-2); }
.sc-filter input,
.sc-filter select {
  width: auto;
  max-width: 240px;
  background: var(--latar);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  color: var(--teks);
  font: inherit;
  padding: 8px 11px;
}
/* date & number fields need no stretch — cap their div width so they don't balloon */
.sc-addrow > div:has(> input[type="date"]) { flex: 0 1 170px; }
.sc-addrow > div:has(> input[type="number"]) { flex: 0 1 150px; }

/* ---- Validation / flash messages ----------------------------------------- */
.sc-err {
  background: var(--st-merah-bg);
  border: 1px solid color-mix(in srgb, var(--st-merah) 45%, transparent);
  color: var(--st-merah);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 0 0 16px;
}
.sc-ok {
  background: var(--st-hijau-bg);
  border: 1px solid color-mix(in srgb, var(--st-hijau) 45%, transparent);
  color: var(--st-hijau);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

/* ---- Status pills -------------------------------------------------------- */
.sc-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.sc-pill.ok {
  background: var(--st-hijau-bg);
  color: var(--st-hijau);
  border: none;
  margin: 0;
  padding: 3px 10px;
}
.sc-pill.warn {
  background: var(--st-oranye-bg);
  color: var(--st-oranye);
}
.sc-pill.danger {
  background: var(--st-merah-bg);
  color: var(--st-merah);
  border: none;
  margin: 0;
  padding: 3px 10px;
}
.sc-pill.muted {
  background: var(--hover);
  color: var(--teks-2);
}

/* ---- Topbar logout (shared across pages) --------------------------------- */
.sc-topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--teks-2);
}
.sc-topbar-user .who {
  color: var(--teks);
  font-weight: 600;
}
.sc-logout {
  background: transparent;
  border: 1px solid var(--garis-tegas);
  color: var(--teks);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sc-logout:hover {
  background: var(--hover);
}

/* ---- Visual analytics dashboard: KPI MoM + inline SVG charts (dep-free) --- */
.sc-ac-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}
.sc-ac-kpi {
  background: var(--permukaan-naik);
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sc-ac-kpi-label { color: var(--teks-2); font-size: 0.82rem; }
.sc-ac-kpi-val { font-size: 1.4rem; font-weight: 700; color: var(--teks); line-height: 1.1; }
.sc-ac-delta { font-size: 0.82rem; font-weight: 600; }
.sc-ac-up { color: var(--st-hijau); }
.sc-ac-down { color: var(--st-merah); }
.sc-ac-flat { color: var(--teks-2); }

.sc-ac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.sc-ac-chart { width: 100%; height: auto; display: block; }
.sc-ac-blabel { fill: var(--teks); font-size: 12px; }
.sc-ac-bval { fill: var(--teks-2); font-size: 12px; }
.sc-ac-btrack { fill: var(--garis); opacity: 0.45; }
.sc-ac-bar { fill: var(--aksen); }
.sc-ac-axis { stroke: var(--garis); stroke-width: 1; }
.sc-ac-xlabel { fill: var(--teks-2); font-size: 11px; }

.sc-ac-s1 { --ac-color: var(--aksen); }
.sc-ac-s2 { --ac-color: var(--st-hijau); }
.sc-ac-line { fill: none; stroke: var(--ac-color); stroke-width: 2; stroke-linejoin: round; }
.sc-ac-area { fill: var(--ac-color); stroke: none; opacity: 0.14; }
.sc-ac-legend { color: var(--ac-color, currentColor); }