/* styles/pg-app.css — the settings kit (pg.css, the lead's final stylesheet, copied in) fitted into the app: settings
   mode in the app's shell, the dialog frame bridge, the kit's menus in #inbox-layer, and the few parts the final kit
   does not define yet. pg.css is replaced whenever design/final/pg.css changes; this file is the foundation's and
   stays. Loaded last. Sections: 1 tokens outside .pg-root · 2 settings mode in the shell · 3 the page column and the
   legacy bodies · 4 the phone list · 5 menus and sheets · 6 dialogs · 7 extras (fold into pg.css upstream). */

/* ---------- 1. Tokens outside .pg-root ----------
   pg.css declares its tokens on .pg-root (the settings column and the settings sidebar). Menus live in #inbox-layer and
   dialogs in #layer, outside it (and a settings dialog can open over the setup wizard), so the same values are declared
   on :root too. Keep in step with pg.css's .pg-root block. */
:root {
  --pg-navy: #172944; --pg-navy-2: #2c3e62; --pg-navy-3: #4a5d84; --pg-navy-hover: #263c5b;
  --pg-ink: #172033; --pg-muted: #5c6a86; --pg-faint: #7d889e;
  --pg-line: #e4e8ef; --pg-rule: #eef1f5; --pg-soft: #f5f7fa; --pg-ground: #f8f8f7;
  --pg-cream: #fffefa; --pg-cream-line: #e9e7e1; --pg-cream-hover: #f1f1ec; --pg-cream-open: #eeeee8;
  --pg-gold: #c69749; --pg-gold-bar: #bf8118; --pg-gold-deep: #86662a; --pg-gold-wash: #f6ecd6;
  --pg-good: #1f7a55; --pg-good-bg: #e3f3ea; --pg-warn: #8f5410; --pg-warn-bg: #fbeedb; --pg-bad: #b4372f; --pg-bad-bg: #fbe8e5;
  --pg-blue: #2f62a4; --pg-blue-soft: #edf3fb;
  --pg-radius-card: 12px; --pg-radius-ctl: 9px; --pg-radius-dlg: 14px;
  --pg-shadow-menu: 0 14px 36px rgba(23, 32, 51, .14), 0 2px 8px rgba(23, 32, 51, .06);
  --pg-shadow-dlg: 0 24px 60px rgba(23, 32, 51, .22);
  --pg-m: 120ms;
  --pg-font: "Lite Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. The rail and the two settings places in the shell ----------
   The rail (#business-rail) stands at the left edge everywhere (frame.js): the Businesses in the app, the person's
   Organizations in the account's and the Organization's settings (more than one), or aside (one). It is drawn at its
   full width and slid by --business-rail, which the shell's offsets also read; registered as a length, it can move:
   .rail-anim (frame.js railMotion) carries the rail out or in and what stands beside it over. Tambah organisasi stands
   at its foot. The Business's pages (Umum, Koneksi, Paket) are the app's: its sidebar, its bar on a phone, the column
   in .pg-main.pg-in-app. The account's and the Organization's pages are settings mode (.tenant-shell.in-settings): no
   app sidebar, no drawer, no phone bar of the app, no renewal banner; the settings sidebar (#pg-sidebar.pg-root.pg-sb)
   beside the rail and the column after both (0 sidebar on a phone). */
@property --business-rail { syntax: '<length>'; inherits: true; initial-value: 0px; }
.tenant-shell.frame-h { --rail-full: 60px; }
.tenant-shell.frame-h .business-rail { width: var(--rail-full); transform: translateX(calc(var(--business-rail) - var(--rail-full))); }
.tenant-shell.frame-h.rail-anim { transition: --business-rail 280ms cubic-bezier(.4, 0, .2, 1); }
/* An Organization's tile is round (a Business's is a rounded square), its initials up to three. */
.business-rail .business-rail-org { border-radius: 50%; color: #5f6570; font-size: 10px; letter-spacing: 0; }
.business-rail .business-rail-org.selected { color: #fff; }
.business-rail .business-rail-add-org { border-radius: 50%; }
.business-rail-foot { flex: none; display: flex; justify-content: center; width: 100%; margin-top: auto; padding: 12px 0 16px; }
.business-rail-foot::before { content: none; }
.business-rail-list + .business-rail-foot { border-top: 1px solid #dcdad2; }
.business-rail .business-rail-list.business-rail-ghost { position: absolute; left: 0; right: 0; z-index: 1; overflow: hidden; pointer-events: none; }
@media (max-width: 720px) {
  .tenant-shell.frame-h { --rail-full: 48px; }
  .business-rail-foot { padding: 10px 0 14px; }
}
.tenant-shell.frame-h.in-settings :is(#rail, .sidebar-scrim, #renewal-banner) { display: none !important; }
.tenant-shell.frame-h.in-settings .app-frame { margin-left: var(--business-rail); width: calc(100% - var(--business-rail)); }
.tenant-shell.frame-h #pg-sidebar.pg-sb { left: var(--business-rail); min-height: 0; }
#pg-sidebar[hidden], .tenant-shell:not(.in-settings) #pg-sidebar { display: none !important; }
/* With the rail beside it, the Lacak mark is the rail's. */
.tenant-shell.with-business-rail #pg-sidebar .pg-sb-mark img { display: none; }
@media (max-width: 720px) {
  .tenant-shell.frame-h.in-settings #mobile-top { display: none !important; }
}
.pg-main.pg-settings { position: relative; }
.pg-main.pg-in-app { margin-left: 0; min-height: 0; }
/* Penagihan in the settings sidebar: open while one of its pages is on screen, its three pages under it. */
.pg-sb-link.pg-is-open { background: var(--pg-cream-open); color: var(--pg-navy); font-weight: 650; }
.pg-sb-sub { display: grid; gap: 2px; margin: 2px 0 6px 19px; padding-left: 7px; border-left: 1px solid #deded6; }
.pg-sb-sub .pg-sb-link { height: 32px; font-size: 12px; }
.pg-sb-sub .pg-sb-link .pg-icon { width: 15px; height: 15px; }
/* Penagihan's tabs, on a phone only: under the bar, the page on screen filled. */
.pg-tabs { display: none; }
@media (max-width: 720px) {
  .pg-tabs { position: sticky; top: 54px; z-index: 29; display: flex; gap: 2px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 254, 250, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pg-cream-line); }
  .pg-tabs::-webkit-scrollbar { display: none; }
  .pg-tab { flex: 1 1 auto; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--pg-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .pg-tab.pg-is-on { border-color: var(--pg-line); background: #fff; color: var(--pg-navy); box-shadow: 0 1px 2px rgba(23, 32, 51, .1); }
  /* The bar and the tabs name the page: its title stays for screen readers and focus. */
  .pg-main:has(> .pg-tabs) .pg-page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-main:has(> .pg-tabs) .pg-page-head { margin-bottom: 16px; }
  .pg-main:has(> .pg-tabs) .pg-page-title-row { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-shell.frame-h.rail-anim { transition: none; }
}

/* ---------- 3. The page column and the legacy bodies ----------
   A page not rebuilt yet draws its old st- body inside .pg-legacy (settings-kit.js kitPage); the old kit's CSS keeps
   styling it, without the old page's own frame (padding, width — neutralised in settings-kit.css). Wide legacy pages
   (Langganan's and Faktur's tables, Anggota) get a wider column until they are rebuilt. */
.pg-page.pg-is-wide { max-width: 1180px; }
.pg-legacy.st-page { width: auto; max-width: none; margin: 0; padding: 0; }
.pg-legacy + .pg-sec, .pg-legacy + .pg-legacy { margin-top: 36px; }
.pg-legacy .st-card { overflow-x: auto; }
.pg-page-actions .st-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-eyebrow .pg-btn.pg-link { min-height: 0; font-size: inherit; }
.pg-eyebrow .pg-tile { border-radius: 5px; }
.pg-page[data-pg-denied] { padding-top: 24px; }
.pg-notice h2:focus { outline: none; }
.pg-root h1.pg-page-title:focus { outline: none; }
@media (max-width: 720px) {
  .pg-page-actions .st-head-actions { width: 100%; }
  .pg-page-actions .st-head-actions > * { flex: 1 1 auto; }
}

/* ---------- 4. The phone list (pg-home-group, pg-home-row) ---------- */
button.pg-home-row { width: 100%; border: 0; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-home-row .pg-avatar { width: 32px; height: 32px; font-size: 11px; }
.pg-home-row.pg-is-alert .pg-row-copy small { color: var(--pg-bad); font-weight: 600; }
.pg-home-row.pg-is-danger .pg-row-copy b { color: var(--pg-bad); }
.pg-home-row .pg-seg { margin-left: auto; }
.pg-row-mark.pg-is-bad { background: var(--pg-bad-bg); color: var(--pg-bad); }
.pg-home-row .pg-count, .pg-menu .pg-count { display: inline-grid; flex: none; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pg-bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; }
.pg-home-row .pg-count { margin-left: auto; }
.pg-home-row .pg-dot { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--pg-bad); }
.pg-home-row { position: relative; }

/* ---------- 5. Menus and sheets (settings-kit.js openKitMenu, in #inbox-layer) ---------- */
.pg-menu { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; color: var(--pg-ink); font: 400 13.5px/1.5 var(--pg-font); font-variant-numeric: tabular-nums; }
.pg-menu *, .pg-menu *::before, .pg-menu *::after { box-sizing: border-box; }
.pg-menu .pg-menu-label { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; }
.pg-menu .pg-menu-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-menu .pg-menu-label small { color: var(--pg-muted); font-size: 12px; font-weight: 500; white-space: normal; }
.pg-menu > button:disabled { opacity: .5; cursor: default; }
.pg-menu .pg-menu-tile { width: 24px; height: 24px; border-radius: 6px; font-size: 8px; }
.pg-menu .pg-menu-check { color: var(--pg-navy); }
.pg-menu .pg-menu-group { margin: 4px 0 2px; }
.pg-menu .pg-menu-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-menu-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 6px 0 10px; color: var(--pg-ink); font-size: 13px; font-weight: 550; }
.pg-menu-row .pg-seg { margin-left: auto; }
.pg-menu-row .pg-seg button { min-height: 24px; padding: 0 9px; font-size: 11.5px; }
.pg-menu.is-entering { transform-origin: top left; animation: dx-menu-in var(--m-pop, 160ms) var(--m-in, ease) both; }
.pg-menu.is-above.is-entering { transform-origin: bottom left; }
.pg-menu.is-leaving { animation: dx-menu-out 140ms var(--m-out, ease) forwards; pointer-events: none; }
@media (max-width: 720px) {
  .pg-menu .pg-menu-head { position: sticky; top: -8px; z-index: 1; margin: -8px -12px 4px; padding: 10px 16px 8px; background: #fff; border-bottom: 1px solid var(--pg-rule); }
  .pg-menu-row { min-height: 44px; font-size: 14px; }
  .pg-menu .pg-menu-tile { width: 28px; height: 28px; font-size: 9px; }
  .pg-menu.is-entering { animation: lacak-sheet-in var(--m-move, 220ms) var(--m-in, ease) both; }
  .pg-menu.is-leaving { animation: lacak-sheet-out 140ms var(--m-out, ease) forwards; }
  .pg-scrim.is-entering { animation: lacak-fade-in 160ms ease both; }
  .pg-scrim.is-leaving { animation: lacak-fade-out 140ms ease forwards; pointer-events: none; }
}

/* Tambah organisasi (settings-shell.js) lives in #layer, outside .pg-root: the kit's zero-specificity resets for it. */
:where(#overlay-add-organization) :where(p, h4) { margin: 0; }
:where(#overlay-add-organization) :where(button, input, select) { font: inherit; color: inherit; }
:where(#overlay-add-organization) :where(.pg-input, .pg-select) { color: var(--pg-ink); }
#overlay-add-organization .pg-fields-2 { margin-top: 16px; }

/* ---------- 6. Dialogs (dialogs.js dialogHtml in the kit's look: .lk-dialog.pg-dlg) ----------
   The final kit styles a native dialog.pg-dlg; the app's layer draws a section.lk-dialog (its Esc, scrim, Tab trap and
   motion stay the app's), so the frame is restated here over dialogs.css. A dialog drawn by a page not rebuilt yet
   (.pg-dlg-legacy) keeps its old body (plates, facts, fields) and its body's grid rhythm; a pgDialog body is the kit's. */
.lk-dialog.pg-dlg { border-radius: var(--pg-radius-dlg); background: #fff; color: var(--pg-ink); box-shadow: var(--pg-shadow-dlg); font: 400 13.5px/1.55 var(--pg-font); font-variant-numeric: tabular-nums; }
/* The kit's two widths; a legacy size of a page's own (size-plan, 860px) keeps its page CSS. */
.lk-dialog.pg-dlg.size-narrow { width: min(520px, calc(100vw - 32px)); }
.lk-dialog.pg-dlg.size-wide { width: min(760px, calc(100vw - 32px)); }
.lk-dialog.pg-dlg.tone-danger { box-shadow: var(--pg-shadow-dlg); }
.lk-dialog.pg-dlg *, .lk-dialog.pg-dlg *::before, .lk-dialog.pg-dlg *::after { box-sizing: border-box; }
.lk-dialog.pg-dlg .pg-dlg-head { align-items: flex-start; border-bottom: 0; }
.lk-dialog.pg-dlg .pg-dlg-head h2 { margin: 0; color: var(--pg-ink); font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.lk-dialog.pg-dlg .pg-dlg-head p { margin: 2px 0 0; color: var(--pg-muted); font-size: 12.5px; white-space: normal; }
.lk-dialog.pg-dlg .pg-dlg-x { flex: 0 0 30px; }
.lk-dialog.pg-dlg .pg-dlg-x .pg-icon { width: 16px; height: 16px; }
.lk-dialog.pg-dlg .pg-dlg-body { display: block; }
.lk-dialog.pg-dlg.pg-dlg-legacy .pg-dlg-body { display: grid; align-content: start; gap: 14px; }
.lk-dialog.pg-dlg .pg-dlg-foot { gap: 10px; }
.lk-dialog.pg-dlg .pg-dlg-foot :is(button.lkd-quiet, button.lkd-action) { min-height: 36px; padding: 0 14px; border-radius: var(--pg-radius-ctl); font-size: 13px; font-weight: 600; }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-quiet { border: 1px solid #d3d9e4; background: #fff; color: var(--pg-ink); }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-quiet:hover { border-color: #bfc8d6; background: #f8f9fb; }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-action { min-width: 0; border: 1px solid var(--pg-navy); background: var(--pg-navy); color: #fff; box-shadow: 0 3px 8px rgba(23, 32, 51, .12); }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-action:hover { border-color: var(--pg-navy-hover); background: var(--pg-navy-hover); }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-action.danger-button { border-color: var(--pg-bad); background: var(--pg-bad); }
.lk-dialog.pg-dlg .pg-dlg-foot button.lkd-action.danger-button:hover { border-color: #a02e27; background: #a02e27; }
.lk-dialog.pg-dlg .pg-dlg-foot > .lkd-action:only-child { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) {
  .lk-dialog.pg-dlg, .lk-dialog.pg-dlg[class*="size-"] { top: auto; bottom: 0; width: 100%; max-width: 100vw; max-height: 92dvh; border-radius: 16px 16px 0 0; box-shadow: 0 -16px 48px rgba(23, 32, 51, .22); }
  .lk-dialog.pg-dlg .pg-dlg-head { padding: 18px 18px 0; }
  .lk-dialog.pg-dlg .pg-dlg-body { padding: 16px 18px 20px; }
  .lk-dialog.pg-dlg .pg-dlg-foot { position: sticky; bottom: 0; display: flex; flex-direction: column-reverse; align-items: stretch; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .lk-dialog.pg-dlg .pg-dlg-foot :is(button, .pg-btn) { width: 100%; min-height: 44px; margin: 0; }
  .lk-dialog.pg-dlg.entering { animation: lkd-sheet-in 260ms var(--m-in) both; }
  .lk-dialog.pg-dlg.is-leaving { animation: lkd-sheet-out 160ms var(--m-out) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-menu, .pg-scrim, .lk-dialog.pg-dlg { animation: none !important; }
}

/* ---------- 7. Extras the final kit does not define yet (fold into pg.css upstream) ---------- */
/* An info-toned attention card. */
.pg-attn-card.pg-is-info { border-color: #cfdcef; border-left-color: var(--pg-blue); background: #f5f8fd; }
.pg-attn-card.pg-is-info .pg-attn-icon { background: var(--pg-blue-soft); color: var(--pg-blue); }
/* A field's refusal under it, and the control it refuses. */
.pg-field label small { color: var(--pg-faint); font-weight: 500; }
.pg-field .pg-hint.pg-error, .pg-row .pg-error { color: var(--pg-bad); font-size: 12px; font-weight: 600; line-height: 1.5; }
.pg-field.pg-is-refused :is(.pg-input, .pg-select, .pg-textarea) { border-color: var(--pg-bad); box-shadow: 0 0 0 3px rgba(180, 55, 47, .12); }
/* A busy button's spinner. */
.pg-icon.pg-spin { animation: spin .8s linear infinite; }
/* The person menu's Penagihan count in the app (app.js accountMenu). */
.account-menu-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 9px; background: #b4372f; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; vertical-align: 1px; }

/* The existing avatar and renewal banner in the settings frame. */
.pg-sb-person .rail-avatar { width: 32px; height: 32px; }
[data-pg-renewal-banner]:empty { display: none; }