/* ============================================================================
   VS Omni — kerangka shell. Anatomi direproduksi dari library 12.04.02:
     sidebar + rel ikon  → App Shell.dc.html "Sidebar — expanded + rail" (marker mode `fill`)
     bar bawah           → Mobile UI.dc.html "A · Labeled"
     app bar             → Mobile UI.dc.html "A · Standard title"
     kepala halaman      → App Shell.dc.html "Anatomi halaman" (PAGE HEADER)
     laci / lembar bawah → App Shell.dc.html drawer + Mobile UI.dc.html "A · Bottom sheet"
     kosong / kerangka   → GUI/09/EMPTY-STATE, GUI/09/SKELETON
   Warna, radius, bayangan, jarak: token. Ukuran yang tidak punya token disalin dari
   specimen dan dikumpulkan di blok --_* di bawah supaya bisa diaudit satu tempat.

   Marker nav aktif memakai mode `fill` milik specimen (bukan `tick`): aturan owner
   melarang garis warna di pinggir baris.
   ============================================================================ */

/* Wadah yang diukur. Sebuah container tidak bisa meng-query dirinya sendiri, jadi .omni-app ada di dalamnya. */
.omni-root { container: omni / inline-size; }

.omni-app {
  /* dari specimen, tanpa token padanan */
  --_nav-item-h: 38px;   --_nav-item-radius: 8px;  --_nav-item-fs: 13.5px; --_nav-gap: 11px;
  --_rail-w: 56px;       --_rail-btn: 38px;        --_rail-radius: 9px;
  --_side-w: 280px;      /* GUI/08/SIDEBAR kolom 280px */
  --_topbar-h: 60px;     --_tab-label-fs: 10px;    --_tab-icon: 22px;
  --_sheet-radius: 22px; --_drawer-w: 380px;
  --_scrim: rgba(5,5,5,0.42);
  --_hit: var(--field-h); /* 44px: sasaran ketuk minimum */

  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "main" "tabs";
  background: var(--bg-app);
}

/* iOS memperbesar layar bila isian < 16px. Primitive Input memakai 15px, jadi dinaikkan ke token --text-md. */
.omni-app .vs-input input, .omni-app .vs-sel select, .omni-auth .vs-input input { font-size: var(--text-md); }
/* Kontras. --text-subtle (#777D88) hanya 4.14:1 di putih dan 3.41:1 di kanvas: di bawah 4.5:1.
   Di Omni semua teks yang membawa informasi memakai --text-muted (10.86:1). Token DS tidak diubah.
   Tanda wajib (*) memakai --tag-danger-text (5.9:1) menggantikan --accent-red (3.77:1). */
/* Keputusan owner 21 Sep 2026: kicker mono kapital berjarak lebar dilepas di Omni. Label kecil memakai huruf isi, tanpa kapital paksa. */
.omni-root .vs-kicker, .omni-auth .vs-kicker { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.omni-root .vs-field__hint:not(.vs-field__hint--error), .omni-auth .vs-field__hint:not(.vs-field__hint--error),
.omni-root .vs-field__opt, .omni-auth .vs-field__opt,
.omni-root .vs-selfield__hint { color: var(--text-muted); }
.omni-root .vs-field__req, .omni-auth .vs-field__req,
.omni-root .vs-field__hint--error, .omni-auth .vs-field__hint--error { color: var(--tag-danger-text); }
/* Cincin fokus digambar kotak .vs-input (focus-within). Tanpa ini base.css menambah cincin kedua di dalamnya. */
.vs-input input:focus-visible, .vs-sel select:focus-visible { box-shadow: none; }
/* Aturan owner: tanpa garis warna di pinggir. Nada toast dibawa ikonnya. */
.vs-toast__bar { display: none; }
.vs-toast { padding-left: 14px; }
/* Tangga lapisan: lembar 1200 < dialog 1290 < toast 1600 */
.vs-dialog__overlay { z-index: 1290; }

/* ---------- Sidebar (Lega) ---------- */
.omni-side { grid-area: side; display: none; flex-direction: column; background: var(--surface-0); border-right: 1px solid var(--line-100); min-height: 0; position: sticky; top: 0; height: 100dvh; }
.omni-side__brand { padding: 18px 18px 14px; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.omni-side__logo { height: var(--space-7); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.omni-side__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--text-strong); letter-spacing: var(--ls-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-side__toggle { margin-left: auto; width: var(--_hit); height: var(--_hit); flex: 0 0 auto; border: 0; border-radius: var(--_rail-radius); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.omni-side__toggle:hover { background: var(--surface-1); color: var(--text-strong); }
.omni-side__toggle[aria-pressed="true"] { color: var(--text-strong); }
.omni-nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.omni-nav__group { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 8px; }
.omni-nav__group:first-child { padding-top: 6px; }
.omni-nav__item {
  display: flex; align-items: center; gap: var(--_nav-gap); min-height: var(--_nav-item-h); padding: 0 12px;
  border: 0; border-radius: var(--_nav-item-radius); background: transparent; color: var(--text-muted);
  font-family: var(--font-body); font-size: var(--_nav-item-fs); font-weight: var(--fw-medium); text-align: left;
  cursor: pointer; transition: background .12s ease, color .12s ease; width: 100%;
}
.omni-nav__item:hover { background: var(--surface-1); }
.omni-nav__item:active { background: var(--ink-050); }
.omni-nav__item[aria-current="page"] { background: var(--primary); color: var(--primary-contrast); font-weight: var(--fw-semibold); }
.omni-nav__item svg { flex: 0 0 auto; }
.omni-nav__label { flex: 1; min-width: 0; }
.omni-nav__soon { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.omni-nav__item[aria-current="page"] .omni-nav__soon { color: var(--text-on-dark-muted); }
.omni-side__foot { margin-top: auto; border-top: 1px solid var(--line-100); padding: 14px 16px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.omni-side__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.omni-side__who b { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-side__who span { font-size: var(--text-2xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tanda platform. Terkunci: lihat omni-shell-lock.css */
.omni-mark { padding: var(--space-5) clamp(var(--space-5), 3cqi, var(--gutter)) var(--space-6); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); color: var(--text-muted); }
.omni-mark img { height: 11px; width: auto; display: block; }

/* ---------- Rel ikon (Sedang) ---------- */
.omni-rail { grid-area: side; display: none; flex-direction: column; align-items: center; padding: 18px 0; gap: 4px; background: var(--surface-1); border-right: 1px solid var(--line-100); position: sticky; top: 0; height: 100dvh; overflow: auto; }
.omni-rail__btn { width: var(--_hit); height: var(--_hit); border: 0; border-radius: var(--_rail-radius); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; flex: 0 0 auto; }
.omni-rail__btn:hover { background: var(--surface-0); }
.omni-rail__btn:active { background: var(--ink-100); }
.omni-rail__btn[aria-current="page"] { background: var(--primary); color: var(--primary-contrast); }
.omni-rail__spacer { flex: 1; }

/* ---------- Topbar ---------- */
.omni-top { grid-area: top; display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-5); background: var(--surface-0); border-bottom: 1px solid var(--line-100); position: sticky; top: 0; z-index: 20; padding-top: max(10px, env(safe-area-inset-top)); min-width: 0; }
.omni-top__logo { height: var(--space-7); width: auto; max-width: 96px; object-fit: contain; flex: 0 0 auto; }
.omni-top__title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-top__btn { width: var(--_hit); height: var(--_hit); border-radius: var(--radius-pill); border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-strong); flex: 0 0 auto; }
.omni-top__btn:hover { background: var(--surface-1); }
.omni-top__btn:active { background: var(--ink-050); }

/* ---------- Bar bawah (Ringkas) ---------- */
.omni-tabs { grid-area: tabs; display: flex; background: var(--surface-0); border-top: 1px solid var(--line-200); padding: 5px 6px max(14px, env(safe-area-inset-bottom)); position: sticky; bottom: 0; z-index: 20; }
.omni-tabs__item { flex: 1; min-width: 0; min-height: var(--_hit); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-family: var(--font-body); font-size: var(--_tab-label-fs); font-weight: var(--fw-medium); border-radius: var(--radius-sm); }
.omni-tabs__item:active { background: var(--surface-1); }
.omni-tabs__item[aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ---------- Area modul ---------- */
.omni-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.omni-statusbar { display: none; padding: var(--space-3) var(--space-5); font-size: var(--text-xs); background: var(--tag-warning-bg); color: var(--tag-warning-text); border-bottom: 1px solid var(--tag-warning-border); }
.omni-statusbar[data-show="1"] { display: block; }
.omni-page { container: page / inline-size; flex: 1; min-width: 0; }
.omni-pagehead { background: var(--surface-0); padding: clamp(var(--space-5), 3cqi, 22px) clamp(var(--space-5), 3cqi, var(--gutter)) var(--space-6); border-bottom: 1px solid var(--line-100); display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.omni-pagehead__text { display: flex; flex-direction: column; gap: 5px; flex: 1 1 240px; min-width: 0; }
.omni-pagehead h1 { font-size: clamp(var(--text-h3), 1rem + 1.4cqi, var(--text-h2)); letter-spacing: var(--ls-tight); }
.omni-pagehead__sub { font-size: 13.5px; color: var(--text-muted); }
.omni-pagehead__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.omni-body { padding: clamp(var(--space-5), 3cqi, var(--space-6)) clamp(var(--space-5), 3cqi, var(--gutter)) var(--space-10); display: grid; gap: var(--space-6); max-width: var(--container-lg); width: 100%; }

/* Kartu bagian: kicker + judul (App Shell "Section header") */
.omni-card { background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: clamp(var(--space-5), 4cqi, var(--space-7)); display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.omni-sechead { display: flex; align-items: flex-end; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-100); flex-wrap: wrap; }
.omni-sechead__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.omni-sechead__title { font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-bold); color: var(--text-strong); }
.omni-formgrid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
[data-formerror]:not(:empty) { margin-bottom: var(--space-5); }
.omni-formgrid .is-wide { grid-column: 1 / -1; }
.omni-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.omni-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: var(--space-3) 0; border-top: 1px solid var(--line-100); }
.omni-kv:first-child { border-top: 0; }
.omni-kv span:first-child { color: var(--text-muted); }
.omni-kv span:last-child { font-weight: var(--fw-semibold); color: var(--text-strong); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---------- GUI/09/EMPTY-STATE ---------- */
.omni-empty { border: 1.5px dashed var(--line-200); border-radius: var(--radius-md); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.omni-empty__ic { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--ink-050); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.omni-empty__title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); color: var(--text-strong); }
.omni-empty__msg { font-size: var(--text-xs); color: var(--text-muted); max-width: 300px; }

/* ---------- GUI/09/SKELETON (gradien & durasi disalin dari specimen) ---------- */
.omni-skel { display: block; border-radius: var(--radius-pill); background: linear-gradient(90deg, #F0F2F5 25%, #E6E8EE 37%, #F0F2F5 63%); background-size: 400% 100%; animation: vs-shimmer 1.4s ease infinite; }
.omni-skel--block { border-radius: var(--radius-sm); }
@keyframes vs-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Laci / lembar bawah ---------- */
.omni-scrim { position: fixed; inset: 0; z-index: 1200; background: var(--_scrim); backdrop-filter: blur(3px); animation: vs-fade .16s ease; }
.omni-sheet { position: fixed; z-index: 1201; left: 0; right: 0; bottom: 0; max-height: 92dvh; background: var(--surface-0); border-radius: var(--_sheet-radius) var(--_sheet-radius) 0 0; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: vs-sheet-up .22s ease; overscroll-behavior: contain; }
.omni-sheet__grab { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--line-200); margin: 8px auto 6px; flex: 0 0 auto; }
.omni-sheet__head { display: flex; align-items: center; gap: 10px; padding: 10px 20px 14px; border-bottom: 1px solid var(--line-100); }
.omni-sheet__titles { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.omni-sheet__title { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); color: var(--text-strong); }
.omni-sheet__body { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.omni-sheet__foot { display: flex; gap: 10px; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-100); background: var(--surface-1); flex-wrap: wrap; }
.omni-sheet__foot .is-push { flex: 1; }
@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vs-slide { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.omni-toasts { position: fixed; z-index: 1600; left: 0; right: 0; bottom: calc(88px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); pointer-events: none; padding: 0 var(--space-5); }
.omni-toasts > * { pointer-events: auto; }

/* Pita Safe Mode: bagian shell, terkunci (omni-shell-lock.css). */
.omni-safemode { display: none; padding: var(--space-3) var(--space-5); font-size: var(--text-xs); background: var(--tag-warning-bg); color: var(--tag-warning-text); border-bottom: 1px solid var(--tag-warning-border); text-align: center; }
.omni-safemode[data-show="1"] { display: block; }
.omni-safemode a { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }
.omni-impbar { display: none; padding: var(--space-3) var(--space-5); font-size: var(--text-xs); font-weight: var(--fw-semibold); background: var(--tag-danger-bg); color: var(--tag-danger-text); border-bottom: 1px solid var(--tag-danger-border); text-align: center; position: sticky; top: 0; z-index: 25; }
.omni-impbar[data-show="1"] { display: block; }
.omni-impbar__btn { min-height: var(--field-h-sm); margin-left: var(--space-3); padding: 0 var(--space-4); border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.omni-statusbar[data-level="info"] { background: var(--tag-info-bg); color: var(--tag-info-text); border-bottom-color: var(--tag-info-border); }
.omni-offline { display: none; padding: var(--space-3) var(--space-5); font-size: var(--text-xs); background: var(--primary); color: var(--primary-contrast); text-align: center; }
.omni-offline[data-show="1"] { display: block; }

/* ============================================================================
   Pergantian bentuk kerangka. Hanya navigasi yang berganti; isi tetap cair.
   Dua angka ini DISETUJUI owner 21 Sep 2026 (PRD §16.4.1):
     776px  = rel ikon 56 + --container-sm 720   → Ringkas ke Sedang
     1240px = sidebar 280 + --container-md 960   → Sedang ke Lega
   Container query tidak menerima var(), jadi ditulis sebagai angka.
   ============================================================================ */
@container omni (min-width: 776px) {
  .omni-app { grid-template-columns: var(--_rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "side top" "side main"; }
  .omni-rail { display: flex; }
  .omni-tabs { display: none; }
  .omni-top { min-height: var(--_topbar-h); padding-inline: var(--space-6); }
  .omni-top__logo { display: none; }
  .omni-sheet { left: auto; top: 0; bottom: 0; right: 0; width: var(--_drawer-w); max-width: 88vw; max-height: none; border-radius: 0; animation: vs-slide .18s ease; }
  .omni-sheet__grab { display: none; }
  .omni-sheet__head { padding: 18px 20px; }
  .omni-toasts { align-items: flex-end; bottom: var(--space-7); }
}
@container omni (min-width: 1240px) {
  .omni-app { grid-template-columns: var(--_side-w) minmax(0, 1fr); }
  /* Auto-rail, pola VS OS (permintaan owner 21 Sep 2026): menyentuh area isi menciutkan sidebar jadi rel ikon;
     mengarahkan kursor atau fokus ke sidebar melebarkannya lagi. Trek kisi ikut melebar supaya isi tidak tertutup. */
  .omni-app.is-rail { grid-template-columns: var(--_rail-w) minmax(0, 1fr); }
  .omni-app.is-rail:has(> .omni-side:hover), .omni-app.is-rail:has(> .omni-side:focus-within) { grid-template-columns: var(--_side-w) minmax(0, 1fr); }
  .omni-app { transition: grid-template-columns .2s cubic-bezier(.2,.7,.3,1); }
  .omni-app.is-rail .omni-side { overflow: hidden; }
  .omni-app.is-rail .omni-side:hover, .omni-app.is-rail .omni-side:focus-within { box-shadow: var(--shadow-pop); z-index: 40; }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) :is(.omni-nav__label, .omni-nav__soon, .omni-side__name, .omni-side__logo, .omni-side__who, .omni-side__toggle) { display: none; }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) .omni-nav__group { font-size: 0; padding: var(--space-3) 0 0; margin: 0 var(--space-4) var(--space-3); border-top: 1px solid var(--line-100); }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) .omni-nav__group:first-child { border-top: 0; margin: 0; padding: 0; }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) .omni-nav { padding-inline: 6px; }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) .omni-nav__item { justify-content: center; padding-inline: 0; min-height: var(--_hit); }
  .omni-app.is-rail .omni-side:not(:hover):not(:focus-within) :is(.omni-side__foot, .omni-side__brand) { justify-content: center; padding-inline: 0; min-height: 54px; }
  .omni-rail { display: none; }
  .omni-side { display: flex; }
  .omni-top__title { visibility: hidden; } /* nama usaha sudah ada di sidebar */
}

@media (prefers-reduced-motion: reduce) {
  .omni-app { transition: none; }
  .omni-scrim, .omni-sheet, .omni-skel { animation: none; }
}