/*
 * AkseleraSync — Portal Staf
 *
 * Additive, role-scoped styles layered on top of the shared Portal Wali shell.
 * Every override is gated by [data-active-portal="staf"] so Portal Wali and
 * Portal Guru keep their own visual and interaction contracts.
 */

/* =====================================================================
   STANDAR TOPBAR PORTAL
   =====================================================================
   Dirancang di Portal Staf, disalin apa adanya oleh Portal Wali, Guru, dan
   Pimpinan. Ganti prefiks [data-active-portal="staf"] dengan portal Anda dan
   ganti prefiks class staff- dengan prefiks portal Anda. Seluruh angka WAJIB
   berasal dari skala --sp-* / --fs-* / --touch-min di assets/css/tokens.css.
   Tidak boleh ada angka mentah.

   ---------------------------------------------------------------------
   1. STRUKTUR MARKUP
   ---------------------------------------------------------------------
   Tiga slot, selalu dalam urutan ini. Slot kiri dan kanan berukuran tetap,
   slot tengah yang melar.

     <header class="topbar staff-topbar">

       <!-- KIRI — hanya pada layar berkedalaman; pada route akar slot ini
            TIDAK dirender sebagai ruang kosong, melainkan disembunyikan
            penuh (display:none) supaya judul rata dengan tepi konten. -->
       <button type="button" class="back-btn staff-topbar__back"
               data-staff-action="back" aria-label="Kembali ke layar sebelumnya">
         <svg class="staff-topbar__glyph" viewBox="0 0 24 24" width="20" height="20"
              aria-hidden="true" focusable="false"> ...chevron... </svg>
       </button>

       <!-- TENGAH — dua tingkat. Eyebrow menyebut KONTEKS (ruang kerja atau
            area), judul menyebut LAYAR. Eyebrow tidak pernah mengulang judul.
            Judul tunggal tanpa eyebrow terbaca seperti label, bukan kepala
            halaman; inilah yang membuat "Agenda" terasa tidak profesional. -->
       <div class="top-title staff-topbar__titles">
         <p class="staff-topbar__eyebrow">Operasional</p>
         <h1 class="staff-topbar__title">Daftar Periksa</h1>
       </div>

       <!-- KANAN — hanya tombol bundar berisi ikon. TIDAK PERNAH pil berteks. -->
       <div class="top-action staff-topbar__actions">
         <button type="button" class="round-btn staff-round-action"
                 data-staff-action="navigate" data-route="pencarian"
                 aria-label="Buka pencarian"> ...ikon... </button>
       </div>
     </header>

   ---------------------------------------------------------------------
   2. UKURAN
   ---------------------------------------------------------------------
   topbar tinggi minimum   76px, sticky, border bawah 1px
   padding topbar          atas  var(--sp-4) + env(safe-area-inset-top)
                           bawah var(--sp-4)
                           kiri/kanan var(--d-page-pad) — sama persis dengan
                           padding konten, sehingga judul dan kartu pertama
                           berbagi satu garis tepi kiri
   jarak antar slot        var(--sp-3)

   eyebrow                 var(--fs-caption) 12px / --fw-bold / uppercase
                           letter-spacing var(--ls-label) / warna var(--muted)
                           satu baris, elipsis bila mepet
   judul                   var(--fs-heading) 18px di ponsel
                           var(--fs-title)   20px mulai 480px
                           --fw-bold (700, BUKAN 800 — 800 terbaca berat dan
                           murah pada judul pendek)
                           letter-spacing -.02em, line-height 1.18
                           boleh membungkus sampai 2 baris; judul panjang
                           memakai navTitle yang lebih pendek, bukan elipsis
   jarak eyebrow → judul   var(--sp-1) dikurangi optis => 3px

   tombol bundar           var(--bell-size) x var(--bell-size)
                           border-radius: var(--bell-radius)
                           ikon di dalamnya 22px
                           tombol cari dan tombol lonceng memakai markup dan
                           ukuran yang sama persis sehingga terbaca sekeluarga
   tombol kembali          var(--bell-size), pill, chevron SVG 20px currentColor

   ---------------------------------------------------------------------
   2b. BENTUK LONCENG — KEPUTUSAN DAN TOKENNYA
   ---------------------------------------------------------------------
   Pemilik produk menetapkan bentuk Portal Staf sebagai standar keempat
   portal. Keputusannya: PIL PENUH (lingkaran pada kotak 44px). Alasannya
   bukan selera — class-nya bernama `round-btn`, dan aturan di berkas ini
   sudah lama berbunyi "tombol bundar selalu pil"; sudut lembut membuat
   lonceng jadi satu-satunya kontrol ikon yang bersudut di antara semua
   tombol bundar portal.

   Menyamakan ANGKA-nya saja terbukti tidak pernah berhasil. Tiap portal
   menimpa radiusnya di berkasnya sendiri, jadi begitu satu portal berubah,
   tiga lainnya tertinggal — sempat tercatat wali 12px, guru 13px, staf
   999px, pimpinan 999px sekaligus. Karena itu nilainya dipindahkan ke
   token bersama di assets/css/tokens.css:

       --bell-size:   var(--touch-min)     -> 44px
       --bell-radius: var(--r-pill)        -> 999px

   CARA MENGIKUTINYA — untuk Portal Wali, Guru, dan Pimpinan:
     1. Pakai token itu apa adanya:
          width: var(--bell-size); height: var(--bell-size);
          border-radius: var(--bell-radius);
     2. HAPUS radius lonceng yang ditulis sendiri di berkas portal Anda.
        Selama nilai lama masih ada, ia menang atas token dan
        ketidakseragaman kembali lagi.
     3. Markup: SATU anak saja —
          <button type="button" class="round-btn <portal>-round-action"
                  aria-label="Buka pemberitahuan"> ...ikon... </button>
        Bukan dua anak. Ikon kedua, titik penanda, atau <span> pembungkus
        tambahan membuat tinggi tombol antar portal berbeda-beda. Portal
        Wali sudah memakai bentuk satu anak ini.

   Mengubah bentuk lonceng di keempat portal kelak cukup dengan mengubah
   satu baris --bell-radius di tokens.css.

   LONCENG DI HERO BERANDA. Di Portal Staf lonceng beranda mengambang di
   sudut kanan-atas potret. Aturannya: ia harus menggantung di LUAR
   lengkung foto, bukan di atas wajah, dan latarnya padat — tombol tembus
   pandang di atas foto kehilangan kontras ikonnya. Lihat komentar pada
   .staff-hero__portrait .round-btn untuk angka pengukurannya.

   ---------------------------------------------------------------------
   3. JARAK TOPBAR KE KONTEN
   ---------------------------------------------------------------------
   main.staff-page padding-top = var(--sp-5) (20px), bukan var(--sp-4).
   Bersama padding bawah topbar 16px, kartu pertama berjarak 36px dari
   baseline judul — cukup untuk memisahkan kepala halaman dari isinya.

   ---------------------------------------------------------------------
   4. AKSESIBILITAS — WAJIB
   ---------------------------------------------------------------------
   - Setiap tombol ikon punya aria-label yang menyebut tujuan ("Buka
     pencarian", "Buka pemberitahuan", "Kembali ke layar sebelumnya").
     Glif panah atau kaca pembesar TIDAK boleh menjadi satu-satunya nama.
   - SVG di dalam tombol memakai aria-hidden="true" focusable="false".
   - Target sentuh minimum 44x44 (var(--touch-min)) tanpa kecuali.
   - Ukuran teks terkecil 12px (var(--fs-caption)); eyebrow berada tepat di
     ambang ini dan tidak boleh diperkecil lagi.
   - :focus-visible memakai outline 3px, bukan outline:none.

   =====================================================================
   STANDAR JARAK ANTAR-BLOK HALAMAN
   =====================================================================
   Ini akar dari cacat "kartu menempel ke judul section berikutnya" yang
   muncul di banyak layar dan di semua portal. Penyebabnya satu: pada shell
   bersama HANYA .section yang memiliki margin-bottom. Setiap blok lain —
   .card, .notice, .btn-row, .chips, .state-card, .family-strip, banner,
   strip hari — tidak punya jarak sama sekali. Begitu salah satu blok itu
   diikuti sebuah section, jaraknya nol dan keduanya terbaca menyatu.

   Jangan menambal per halaman. Perbaiki sekali di KONTAINER halaman:

     main.<portal>-page {
       display: grid;
       grid-template-columns: minmax(0, 1fr);
       align-content: start;
       gap: var(--sp-5);              // 20px — ritme dasar antar blok
     }
     main.<portal>-page > .section { margin-bottom: 0; }   // hapus margin lama

   Lalu satu aturan tambahan, karena batas "blok selesai / bagian baru
   dimulai" butuh lebih banyak udara daripada jarak antar dua section:

     main.<portal>-page > :not(.section) + .section { margin-top: var(--sp-3); }

   ATURAN JARAK MINIMUM YANG BERLAKU
     blok  -> blok              20px  var(--sp-5)
     kartu -> judul section     32px  var(--sp-5) + var(--sp-3)   <= WAJIB
     blok  -> footer merek      32px  var(--sp-5) + var(--sp-3)
     dalam section: head -> isi 12px  var(--sp-3)

   Blok yang membawa margin/border pemisahnya sendiri (mis. mode switcher)
   harus dinolkan saat menjadi anak langsung halaman, agar jaraknya tidak
   berlipat menjadi dua sumber.

   ---------------------------------------------------------------------
   RITME SECTION OPSI B — pemilik produk 26 Agu 2026, SoT 7.2.5
   ---------------------------------------------------------------------
   Tiga perangkat membuat section tidak lagi terasa menempel. Portal lain
   menyalin KETIGANYA sekaligus, bukan salah satunya.

   1. RASIO JARAK >= 3:1. Antar section var(--d-section-gap) 40px
      (dipetakan ke --sec-gap di tokens.css; Pimpinan 32px), blok judul
      ke isinya var(--sec-head-gap) 12px. 40:12 = 3,3:1, sehingga mata
      mengelompokkan isi ke judulnya sendiri, bukan ke section tetangga.
      Pada ritme grid Staf, gap kontainer 20px digenapkan margin-top
      pasangan .staff-section + .staff-section menjadi 40px.

   2. ANATOMI HEADER. Judul section var(--fs-heading) 18px / 800 /
      letter-spacing -.012em (Pimpinan TIDAK dinaikkan, kepadatan).
      Bar aksen 14x3 pill di atas judul, warnanya warna kicker section
      (default var(--kick-indigo)). Kicker: WAJIB di section beranda,
      opsional di halaman dalam; var(--fs-caption) 12px — tidak boleh
      lebih kecil — 800 / uppercase / var(--ls-label) / MAKSIMAL 2 kata /
      tidak mengulang judul; warna teks = warna bar. Bila kicker hadir,
      bar menempel di kiri kicker dalam satu baris; tanpa kicker, bar di
      atas judul. Warna per domain: tindakan atau tugas hari ini =
      --kick-terra, layanan atau menu = --kick-emerald, agenda atau
      jadwal = --kick-gold, keuangan = --kick-emerald, dokumen atau
      data = --kick-indigo, lainnya = --kick-indigo. --gold mentah
      #D7A52E DILARANG untuk teks kicker: kontrasnya kurang.

   3. DIVIDER BERMEREK, hanya DI ANTARA section level halaman — TIDAK
      PERNAH di dalam kartu, sheet, modal, atau antar item daftar.
      Garis 1px gradien var(--line) selebar ~84% tengah; icon mark
      akselerasync 13px di piring kanvas bulat 20px, grayscale(1),
      opacity .55 — kecil dan tenang. Digambar absolut di TENGAH gap
      lewat pseudo pada section berikutnya sehingga TIDAK menambah
      tinggi layout. Implementasi acuan: blok DIVIDER BERMEREK ANTAR
      SECTION di bagian RITME BLOK HALAMAN berkas ini. WAJIB grep dulu
      pseudo selektor target portal Anda; bila dua-duanya terpakai,
      injeksikan <div class="sec-divider" aria-hidden="true"> lewat satu
      loop kecil setelah innerHTML, jangan menimpa pseudo yang ada.
   ===================================================================== */

[data-active-portal="staf"] {
  --staff-navy: #101d3d;
  --staff-indigo: #243b72;
  --staff-ocean: #0b5369;
  --staff-emerald: #087a60;
  --staff-aqua: #29dade;
  --staff-gold: #d7a52e;
  --staff-purple: #7551a6;
  --staff-sky: #2679a9;
  --staff-card-radius: var(--r-lg);
  --staff-control-radius: var(--r-md);
  --staff-touch: var(--touch-min);
  --staff-border: rgba(231, 227, 217, .94);
  --staff-shadow: var(--elev-2);
  --staff-shadow-raised: var(--elev-3);
}

/* ---------- Portal frame and common helpers ---------- */

[data-active-portal="staf"] .staff-page {
  min-width: 0;
  position: relative;
  animation: staff-page-enter .32s cubic-bezier(.32, .72, 0, 1) both;
}

[data-active-portal="staf"] .staff-stack {
  display: grid;
  gap: var(--sp-3);
}

[data-active-portal="staf"] .staff-stack.compact { gap: var(--sp-2); }
[data-active-portal="staf"] .staff-stack.loose { gap: var(--sp-4); }

[data-active-portal="staf"] .staff-inline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

[data-active-portal="staf"] .staff-inline.start { align-items: flex-start; }
[data-active-portal="staf"] .staff-inline.wrap { flex-wrap: wrap; }

[data-active-portal="staf"] .staff-grow,
[data-active-portal="staf"] .staff-inline > .list-main {
  min-width: 0;
  flex: 1;
}

[data-active-portal="staf"] .staff-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

[data-active-portal="staf"] .staff-scroll::-webkit-scrollbar { display: none; }

[data-active-portal="staf"] .staff-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.35;
  text-transform: uppercase;
}

[data-active-portal="staf"] .staff-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.3;
}

[data-active-portal="staf"] .staff-copy {
  margin: var(--sp-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-divider {
  width: 100%;
  height: 1px;
  margin: var(--sp-3) 0;
  border: 0;
  background: var(--sand);
}

[data-active-portal="staf"] .staff-icon-box {
  width: 42px;
  height: 42px;
  flex: none;
  padding: var(--sp-1);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: linear-gradient(145deg, #f2f4fa, #d9e1f2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68);
}

[data-active-portal="staf"] .staff-icon-box .custom-icon {
  width: 34px;
  height: 34px;
}

[data-active-portal="staf"] .staff-icon-box.green { color: var(--emerald); background: linear-gradient(145deg, #f0f9f6, #cde9df); }
[data-active-portal="staf"] .staff-icon-box.gold { color: var(--gold-dark); background: linear-gradient(145deg, #fff9e9, #f5e4b5); }
[data-active-portal="staf"] .staff-icon-box.warm { color: var(--terracotta); background: linear-gradient(145deg, #fff7f3, #f3d6c9); }
[data-active-portal="staf"] .staff-icon-box.rose { color: var(--danger); background: linear-gradient(145deg, #fff5f6, #f5d6db); }
[data-active-portal="staf"] .staff-icon-box.sky { color: var(--staff-sky); background: linear-gradient(145deg, #f1f9fd, #cfe8f5); }
[data-active-portal="staf"] .staff-icon-box.purple { color: var(--staff-purple); background: linear-gradient(145deg, #f7f2fb, #e4d6f2); }

/* Runtime icon markup includes a textual fallback inside the background-image
   span. The icon assets are verified at mount time, so keep that label from
   painting over the artwork while retaining the parent aria contract. */
[data-active-portal="staf"] .staff-icon-fallback {
  display: none !important;
}

/* ---------- Topbar (lihat STANDAR TOPBAR PORTAL di puncak berkas) ---------- */

[data-active-portal="staf"] .staff-topbar {
  gap: var(--sp-3);
  min-height: 76px;
  align-items: center;
  padding-block: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4);
  border-bottom: 1px solid rgba(231, 227, 217, .82);
}

/* Pada route akar tidak ada tombol kembali. Slot kiri disembunyikan penuh —
   bukan sekadar visibility:hidden — supaya judul rata dengan tepi konten dan
   tidak tampak terdorong tanpa sebab. */
[data-active-portal="staf"] .staff-topbar .staff-back-placeholder {
  display: none;
}

[data-active-portal="staf"] .staff-topbar__titles {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

[data-active-portal="staf"] .staff-topbar__eyebrow {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-active-portal="staf"] .staff-topbar__title {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

@media (min-width: 480px) {
  [data-active-portal="staf"] .staff-topbar__title { font-size: var(--fs-title); }
}

/* Tombol kembali dan tombol aksi adalah satu keluarga bentuk: lingkaran
   44px. Perbedaannya hanya warna isian. */
[data-active-portal="staf"] .staff-topbar__back {
  width: var(--touch-min);
  min-width: var(--touch-min);
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--staff-border);
  border-radius: var(--r-pill);
  box-shadow: var(--elev-1);
  cursor: pointer;
}

[data-active-portal="staf"] .staff-topbar__back:active { background: #f4f2ec; }
[data-active-portal="staf"] .staff-topbar__glyph { display: block; }

/* .top-action pada shell bersama adalah kotak 44px bergaris. Di sini ia hanya
   pembungkus tanpa rupa; yang terlihat adalah tombol bundar di dalamnya. */
[data-active-portal="staf"] .staff-topbar .top-action {
  width: auto;
  height: auto;
  min-height: var(--touch-min);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 0;
  background: transparent;
}

[data-active-portal="staf"] .staff-topbar .top-action > :only-child {
  width: var(--touch-min);
  height: var(--touch-min);
}

[data-active-portal="staf"] .staff-topbar .round-btn {
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 1px solid #d8e0ef;
  box-shadow: var(--elev-1);
}

[data-active-portal="staf"] .staff-topbar .round-btn:active {
  background: #dfe7f5;
}

/* Bentuk baku tombol aksi bundar, dipakai topbar maupun hero.
   Ukuran dan radiusnya TIDAK ditulis sebagai angka di sini: keduanya
   diambil dari --bell-size/--bell-radius di tokens.css supaya keempat
   portal punya satu sumber bentuk. Lihat STANDAR TOPBAR PORTAL di puncak
   berkas ini. */
[data-active-portal="staf"] .staff-round-action {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  padding: 0;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: var(--bell-radius);
}

[data-active-portal="staf"] .staff-round-action .staff-icon {
  width: 22px;
  height: 22px;
}

/* Keep section copy and its trailing action in separate flex tracks.
   Jarak blok judul ke konten memakai token ritme section, bukan angka
   bebas: 12px berbanding 40px antar section menjaga rasio proximity
   3:1 (lihat RITME SECTION OPSI B di puncak berkas). */
[data-active-portal="staf"] .staff-section > .section-head {
  align-items: flex-start;
  margin-bottom: var(--sec-head-gap);
}

[data-active-portal="staf"] .staff-section > .section-head > div {
  min-width: 0;
  flex: 1;
}

[data-active-portal="staf"] .staff-section > .section-head > :is(.text-btn, .small-btn, .status) {
  flex: none;
  max-width: 42%;
}

[data-active-portal="staf"] .staff-section > .section-head .section-title,
[data-active-portal="staf"] .staff-section > .section-head .section-sub {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   ANATOMI HEADER SECTION — bar aksen + kicker (RITME SECTION OPSI B)
   ---------------------------------------------------------------------
   Bar aksen 14x3 pill menandai awal section; warnanya warna kicker
   section (default var(--kick-indigo) dari tokens.css). Tanpa kicker,
   bar berdiri di atas judul lewat ::before judul. Bila kicker hadir,
   bar pindah menjadi ::before kicker sehingga keduanya satu baris, dan
   bar milik judul dilepas supaya tidak dobel. ::before pada
   .section-title dan .staff-sec-kicker belum terpakai di mana pun —
   sudah diperiksa lewat grep sebelum dipakai di sini.

   Kicker: 12px (var(--fs-caption), batas bawah yang mengikat), 800,
   uppercase, maksimal 2 kata, tidak mengulang judul. Warna bukan
   pembeda tunggal: teks kicker itu sendiri cadangan non-warnanya. */
[data-active-portal="staf"] .staff-page .section-head .section-title::before {
  content: "";
  width: 14px;
  height: 3px;
  display: block;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo);
}

[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker {
  margin: 0 0 var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--kick-indigo);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  line-height: 1.35;
  text-transform: uppercase;
}

[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker::before {
  content: "";
  width: 14px;
  height: 3px;
  flex: none;
  border-radius: var(--r-pill);
  background: currentColor;
}

[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker + .section-title::before {
  content: none;
}

/* Warna kicker per domain — lihat tabelnya di RITME SECTION OPSI B. */
[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker.terra { color: var(--kick-terra); }
[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker.emerald { color: var(--kick-emerald); }
[data-active-portal="staf"] .staff-page .section-head .staff-sec-kicker.gold { color: var(--kick-gold); }

/* ---------- Premium staff home hero ---------- */

[data-active-portal="staf"] .staff-hero {
  min-height: 258px;
  padding: calc(17px + env(safe-area-inset-top, 0px)) 16px 35px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(ellipse at 96% 112%, rgba(41, 218, 222, .35) 0%, rgba(41, 218, 222, .08) 38%, transparent 64%),
    radial-gradient(circle at 4% -22%, rgba(103, 139, 232, .38) 0%, transparent 48%),
    linear-gradient(142deg, #0f1935 0%, #1a346b 52%, #0b5369 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), 0 12px 34px rgba(15, 31, 66, .16);
}

[data-active-portal="staf"] .staff-hero::before {
  content: "";
  width: 58px;
  height: 58px;
  position: absolute;
  z-index: 1;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: auto;
  bottom: auto;
  left: 58%;
  border: 0;
  border-radius: 0;
  opacity: .56;
  background: url("/presentasi/storage/brand/ibnuhajar-ih-mark.webp?v=20260802") center / contain no-repeat;
  box-shadow: none;
  filter: saturate(1.16) brightness(1.34) drop-shadow(0 6px 14px rgba(3, 15, 40, .25));
  transform: translate3d(-50%, 0, 0);
}

[data-active-portal="staf"] .staff-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .018) 29%, transparent 50%),
    radial-gradient(circle at 78% 42%, rgba(255, 255, 255, .08), transparent 9rem);
}

[data-active-portal="staf"] .staff-hero__top {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: relative;
  z-index: 4;
}

[data-active-portal="staf"] .staff-hero__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-caption);
  font-weight: 700;
}

[data-active-portal="staf"] .staff-hero__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

[data-active-portal="staf"] .staff-hero__actions,
[data-active-portal="staf"] .staff-hero__action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-hero .round-btn {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .17);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-active-portal="staf"] .staff-hero__body,
[data-active-portal="staf"] .staff-hero__content {
  min-height: 154px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  align-items: end;
  gap: 10px;
  position: relative;
  z-index: 3;
}

[data-active-portal="staf"] .staff-hero__body { padding-top: var(--sp-4); }

[data-active-portal="staf"] .staff-hero__copy {
  min-width: 0;
  padding: 0 0 var(--sp-2);
}

[data-active-portal="staf"] .staff-hero__eyebrow,
[data-active-portal="staf"] .staff-hero .eyebrow {
  margin-bottom: var(--sp-1);
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-caption);
  font-weight: 600;
}

[data-active-portal="staf"] .staff-hero h1,
[data-active-portal="staf"] .staff-hero__name {
  max-width: 255px;
  margin: 0;
  color: #fff;
  font-size: var(--fs-metric-md);
  font-weight: 800;
  letter-spacing: -.026em;
  line-height: 1.18;
  text-wrap: balance;
}

[data-active-portal="staf"] .staff-hero__role,
[data-active-portal="staf"] .staff-hero__meta,
[data-active-portal="staf"] .staff-hero .school-line {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

[data-active-portal="staf"] .staff-hero__badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-active-portal="staf"] .staff-hero__badge {
  min-height: 27px;
  padding: var(--sp-1) var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.25;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-active-portal="staf"] .staff-hero__portrait {
  width: 122px;
  height: 154px;
  margin: 0 0 -35px auto;
  position: relative;
  align-self: end;
  display: grid;
  place-items: end center;
  filter: drop-shadow(0 16px 21px rgba(3, 15, 40, .27));
  animation: staff-avatar-enter .58s cubic-bezier(.32, .72, 0, 1) both;
}

[data-active-portal="staf"] .staff-hero__portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 21px -4px 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 61px 61px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

[data-active-portal="staf"] .staff-hero__portrait img,
[data-active-portal="staf"] img.staff-hero__avatar,
[data-active-portal="staf"] .staff-hero__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

[data-active-portal="staf"] img.staff-hero__avatar {
  max-width: 122px;
  max-height: 154px;
  margin: 0 0 -35px auto;
  align-self: end;
  position: relative;
  z-index: 3;
  filter: drop-shadow(0 16px 21px rgba(3, 15, 40, .27));
  animation: staff-avatar-enter .58s cubic-bezier(.32, .72, 0, 1) both;
}

[data-active-portal="staf"] .staff-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--indigo), #5f79b7);
  box-shadow: var(--elev-1);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-avatar.round { border-radius: 50%; }
[data-active-portal="staf"] .staff-avatar.large { width: 62px; height: 62px; border-radius: var(--r-xl); }

[data-active-portal="staf"] .staff-avatar img,
[data-active-portal="staf"] .staff-mini-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

[data-active-portal="staf"] .staff-mini-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--emerald), #20a588);
  box-shadow: var(--elev-1);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-avatar-stack {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

[data-active-portal="staf"] .staff-avatar-stack .staff-mini-avatar { margin-left: -7px; }
[data-active-portal="staf"] .staff-avatar-stack .staff-mini-avatar:first-child { margin-left: 0; }

[data-active-portal="staf"] .staff-hero__team {
  min-width: 0;
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-hero__team .staff-avatar-stack {
  min-width: 0;
  flex: none;
  padding-left: 0;
}

[data-active-portal="staf"] .staff-hero__team .staff-mini-avatar {
  width: 26px;
  height: 26px;
  margin-left: -7px;
  border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 4px 10px rgba(3, 15, 40, .24);
  font-size: var(--fs-caption);
}

[data-active-portal="staf"] .staff-hero__team .staff-mini-avatar:first-child {
  margin-left: 0;
}

[data-active-portal="staf"] .staff-hero__team-label,
[data-active-portal="staf"] .staff-hero__team > span:last-child,
[data-active-portal="staf"] .staff-hero__team-copy {
  min-width: 0;
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-hero__team-copy {
  display: grid;
  gap: var(--sp-0);
}

[data-active-portal="staf"] .staff-hero__team-copy strong {
  display: block;
  color: rgba(255, 255, 255, .94);
  font-size: var(--fs-caption);
  line-height: 1.2;
}

[data-active-portal="staf"] .staff-hero__team-copy span,
[data-active-portal="staf"] .staff-hero__team-copy small {
  display: block;
  color: rgba(255, 255, 255, .64);
  font-size: var(--fs-caption);
  line-height: 1.25;
  white-space: nowrap;
}

/* Runtime hero compatibility: the renderer may compose the portrait directly
   inside the shared .hero-row, as the teacher portal does. */
[data-active-portal="staf"] .hero.staff-hero {
  min-height: 260px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 46px;
}

[data-active-portal="staf"] .hero.staff-hero::before {
  width: 146px;
  height: 146px;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  opacity: .28;
  transform: translate3d(-50%, 0, 0);
  filter: saturate(1.12) brightness(1.08) drop-shadow(0 12px 26px rgba(3, 15, 40, .18));
}

[data-active-portal="staf"] .hero.staff-hero > .staff-hero__content {
  min-height: 138px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: end;
  gap: var(--sp-3);
}

[data-active-portal="staf"] .hero.staff-hero .staff-hero__copy {
  min-width: 0;
  padding: 22px 0 var(--sp-3);
}

[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait {
  width: 112px;
  min-width: 0;
  height: 138px;
  margin: 0;
  padding-top: 38px;
  position: relative;
  align-self: end;
  display: block;
}

/* Lonceng beranda menggantung di sudut kanan-atas potret.

   Pada top:0 ia mendarat 32px di dalam potret — 73% badannya menutupi
   kepala dan kerudung, dan karena latarnya kaca tembus pandang, ikonnya
   kehilangan kontras di atas foto. Diukur di 390px maupun 1280px.

   Foto punya sudut kanan-atas membulat 52px, jadi ada ruang kosong di
   luar lengkung itu. Menaikkan lonceng var(--sp-4) memindahkan pusatnya
   dari jarak 51.6px ke 65.3px dari titik pusat lengkung — yakni KELUAR
   dari lengkungan foto — sehingga ia menggantung di latar hero, bukan di
   atas wajah. Tepi kanannya tetap 0 supaya sejajar dengan talang 16px
   halaman dan sisi kanan potret.

   Latarnya juga dipadatkan: tombol yang mengambang di atas foto tidak
   boleh tembus pandang, karena yang di belakangnya bukan warna rata. */
[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait .round-btn {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  position: absolute;
  z-index: 4;
  top: calc(var(--sp-4) * -1);
  right: 0;
  /* STANDAR TOPBAR PORTAL: tombol bundar selalu pil, dan radiusnya diambil
     dari token bersama, bukan ditulis ulang di sini. */
  border-radius: var(--bell-radius);
}

[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait .round-btn.staff-round-action {
  background: rgba(11, 25, 56, .82);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 6px 18px rgba(6, 14, 34, .34);
}

[data-active-portal="staf"] .hero.staff-hero img.staff-hero__avatar,
[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait > img {
  width: 112px;
  height: 126px;
  max-width: none;
  max-height: none;
  margin: 0;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 52px 52px var(--r-xl) var(--r-xl);
}

/* ---------- Active workspace and mode switching ---------- */

[data-active-portal="staf"] .staff-profile-card,
[data-active-portal="staf"] .staff-workspace-card {
  margin: 0;
  padding: var(--sp-3) 14px;
  position: relative;
  z-index: 6;
  background: #fff;
  border: 1px solid var(--staff-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

[data-active-portal="staf"] :where(.staff-hero + .staff-profile-card, .staff-hero + .staff-workspace-card),
[data-active-portal="staf"] :where(.family-strip.staff-profile-card, .family-strip.staff-workspace-card) {
  margin: -48px 16px 0;
}

[data-active-portal="staf"] .staff-profile-card__top,
[data-active-portal="staf"] .staff-workspace-card__head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-active-portal="staf"] .staff-workspace-card__head > div,
[data-active-portal="staf"] .staff-profile-card__main {
  min-width: 0;
  flex: 1;
}

[data-active-portal="staf"] .staff-workspace-card__eyebrow {
  margin-bottom: var(--sp-1);
  color: var(--emerald-dark);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-active-portal="staf"] .staff-profile-card__name,
[data-active-portal="staf"] .staff-workspace-card__title {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.35;
}

[data-active-portal="staf"] .staff-profile-card__meta,
[data-active-portal="staf"] .staff-workspace-card__meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-workspace-card__head .status { flex: none; margin-top: 2px; }

[data-active-portal="staf"] .staff-mode-switcher,
[data-active-portal="staf"] .staff-workspace-switcher {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  border-top: 1px solid var(--sand);
  scrollbar-width: none;
}

[data-active-portal="staf"] .staff-mode-switcher::-webkit-scrollbar,
[data-active-portal="staf"] .staff-workspace-switcher::-webkit-scrollbar { display: none; }

[data-active-portal="staf"] .staff-mode-chip,
[data-active-portal="staf"] .staff-workspace-chip {
  min-height: var(--touch-min);
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}

[data-active-portal="staf"] .staff-mode-chip.active,
[data-active-portal="staf"] .staff-mode-chip[aria-pressed="true"],
[data-active-portal="staf"] .staff-workspace-chip.active,
[data-active-portal="staf"] .staff-workspace-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--indigo);
  border-color: var(--indigo);
  box-shadow: 0 5px 13px rgba(36, 59, 114, .18);
}

[data-active-portal="staf"] .staff-mode-chip:active,
[data-active-portal="staf"] .staff-workspace-chip:active { transform: scale(.96); }

[data-active-portal="staf"] .staff-hero .staff-mode-switcher,
[data-active-portal="staf"] .staff-hero .staff-workspace-switcher {
  position: relative;
  z-index: 5;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top-color: rgba(255, 255, 255, .13);
}

[data-active-portal="staf"] .staff-hero .staff-mode-chip,
[data-active-portal="staf"] .staff-hero .staff-workspace-chip {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-active-portal="staf"] .staff-hero .staff-mode-chip.active,
[data-active-portal="staf"] .staff-hero .staff-workspace-chip.active {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

[data-active-portal="staf"] .staff-mode-banner {
  min-height: 92px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  /* Lingkaran hias di pojok kanan bawah dulu digambar oleh ::after yang
     menjorok 42px keluar kotak. Karena banner ber-overflow:hidden, yang
     terlihat memang sudah benar, tetapi scrollWidth-nya tetap 42px lebih
     lebar daripada clientWidth — persis tanda "isi terpotong" yang dicari
     pemindai. Digambar sebagai lapisan background, hasil visualnya sama
     persis dan kotaknya tidak lagi meluber. */
  background:
    radial-gradient(circle at calc(100% - 14px) calc(100% - 2px), rgba(36, 59, 114, .07) 0 56px, transparent 57px),
    linear-gradient(145deg, #f3f6fb, #e6edf8);
  border: 1px solid #d8e0ef;
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-mode-banner > div { min-width: 0; flex: 1; }
[data-active-portal="staf"] .staff-mode-banner h2 { margin: var(--sp-3) 0 0; font-size: var(--fs-subhead); line-height: 1.3; }
[data-active-portal="staf"] .staff-mode-banner p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }

/* ---------- Summary metrics and service launchers ---------- */

[data-active-portal="staf"] .staff-summary-grid,
[data-active-portal="staf"] .staff-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-profile-card .staff-summary-grid,
[data-active-portal="staf"] .staff-workspace-card .staff-summary-grid {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sand);
}

[data-active-portal="staf"] .staff-summary-grid > div,
[data-active-portal="staf"] .staff-metric {
  min-width: 0;
  padding: 10px var(--sp-2);
  text-align: center;
  background: #faf9f5;
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
}

[data-active-portal="staf"] .staff-summary-grid strong,
[data-active-portal="staf"] .staff-metric__value,
[data-active-portal="staf"] .staff-metric-value {
  display: block;
  color: var(--ink);
  font-size: var(--fs-subhead);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

[data-active-portal="staf"] .staff-summary-grid span,
[data-active-portal="staf"] .staff-metric__label,
[data-active-portal="staf"] .staff-metric-label {
  display: block;
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-summary-grid.four,
[data-active-portal="staf"] .staff-metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

[data-active-portal="staf"] .staff-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px var(--sp-2);
}

[data-active-portal="staf"] .staff-service-button,
[data-active-portal="staf"] .staff-service-btn {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}

[data-active-portal="staf"] .staff-service-button .service-icon,
[data-active-portal="staf"] .staff-service-btn .service-icon,
[data-active-portal="staf"] .staff-service-icon {
  width: 50px;
  height: 50px;
  padding: var(--sp-1);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  color: var(--indigo);
  background: linear-gradient(145deg, #f2f4fa, #d9e1f2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68), 0 4px 10px rgba(21, 36, 74, .08);
  transition: transform .2s cubic-bezier(.32, .72, 0, 1), box-shadow .2s ease;
}

[data-active-portal="staf"] .staff-service-button .service-icon.green,
[data-active-portal="staf"] .staff-service-icon.green { color: var(--emerald); background: linear-gradient(145deg, #f0f9f6, #cde9df); }
[data-active-portal="staf"] .staff-service-button .service-icon.gold,
[data-active-portal="staf"] .staff-service-icon.gold { color: var(--gold-dark); background: linear-gradient(145deg, #fff9e9, #f5e4b5); }
[data-active-portal="staf"] .staff-service-button .service-icon.warm,
[data-active-portal="staf"] .staff-service-icon.warm { color: var(--terracotta); background: linear-gradient(145deg, #fff7f3, #f3d6c9); }
[data-active-portal="staf"] .staff-service-button .service-icon.rose,
[data-active-portal="staf"] .staff-service-icon.rose { color: var(--danger); background: linear-gradient(145deg, #fff5f6, #f5d6db); }
[data-active-portal="staf"] .staff-service-button .service-icon.sky,
[data-active-portal="staf"] .staff-service-icon.sky { color: var(--staff-sky); background: linear-gradient(145deg, #f1f9fd, #cfe8f5); }
[data-active-portal="staf"] .staff-service-button .service-icon.purple,
[data-active-portal="staf"] .staff-service-icon.purple { color: var(--staff-purple); background: linear-gradient(145deg, #f7f2fb, #e4d6f2); }

[data-active-portal="staf"] .staff-service-button .custom-icon,
[data-active-portal="staf"] .staff-service-icon .custom-icon { width: 42px; height: 42px; }

[data-active-portal="staf"] .staff-service-button:active .service-icon,
[data-active-portal="staf"] .staff-service-btn:active .service-icon { transform: scale(.92); }

[data-active-portal="staf"] .staff-service-name,
[data-active-portal="staf"] .staff-service-button .service-name {
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------- Action center and work queue ---------- */

/* Antrean kerja adalah tumpukan kartu PUTIH di atas latar halaman yang juga
   nyaris putih. Tanpa garis warna pemisah, dua permukaan sewarna butuh
   var(--sp-3); pada var(--sp-2) keduanya terbaca sebagai satu blok panjang
   dan pengguna bisa salah tekan. Lihat ATURAN JARAK MINIMUM di puncak. */
[data-active-portal="staf"] .staff-work-queue,
[data-active-portal="staf"] .staff-action-center {
  display: grid;
  gap: var(--sp-3);
}

[data-active-portal="staf"] .staff-work-item,
[data-active-portal="staf"] .staff-action-card {
  width: 100%;
  min-width: 0;
  min-height: 74px;
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}

[data-active-portal="staf"] .staff-work-item.urgent,
[data-active-portal="staf"] .staff-action-card.urgent { border-left-color: var(--terracotta); }
[data-active-portal="staf"] .staff-work-item.good,
[data-active-portal="staf"] .staff-action-card.good { border-left-color: var(--emerald); }
[data-active-portal="staf"] .staff-work-item.gold,
[data-active-portal="staf"] .staff-action-card.gold { border-left-color: var(--gold); }
[data-active-portal="staf"] .staff-work-item.waiting,
[data-active-portal="staf"] .staff-action-card.waiting { border-left-color: var(--staff-purple); }
[data-active-portal="staf"] .staff-work-item.done,
[data-active-portal="staf"] .staff-action-card.done { opacity: .7; border-left-color: var(--emerald); }

[data-active-portal="staf"] .staff-work-item:active,
[data-active-portal="staf"] .staff-action-card:active { transform: scale(.985); }

[data-active-portal="staf"] .staff-work-item__main,
[data-active-portal="staf"] .staff-action-card__main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--sp-1);
}

[data-active-portal="staf"] .staff-work-item__title,
[data-active-portal="staf"] .staff-action-card__title {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-work-item__meta,
[data-active-portal="staf"] .staff-action-card__meta {
  min-width: 0;
  margin-top: 0;
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-work-item__footer,
[data-active-portal="staf"] .staff-action-card__footer {
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

[data-active-portal="staf"] .staff-work-item__side,
[data-active-portal="staf"] .staff-action-card__side {
  min-width: max-content;
  padding-left: 2px;
  display: grid;
  justify-items: end;
  gap: 6px;
}

[data-active-portal="staf"] .staff-work-item__due,
[data-active-portal="staf"] .staff-action-card__due {
  display: block;
  padding-top: var(--sp-0);
  color: var(--terracotta-dark);
  font-size: var(--fs-caption);
  font-weight: 800;
  white-space: nowrap;
}

/* Runtime compatibility: cards may combine shared tap-card markup. */
[data-active-portal="staf"] .tap-card.staff-work-item,
[data-active-portal="staf"] .tap-card.staff-action-card {
  display: flex;
  align-items: flex-start;
}

[data-active-portal="staf"] .tap-card.staff-work-item .tap-main,
[data-active-portal="staf"] .tap-card.staff-action-card .tap-main { min-width: 0; flex: 1; }

/* ---------- Schedule, shifts, rosters and handover ---------- */

[data-active-portal="staf"] .staff-day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58px, 1fr);
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}

[data-active-portal="staf"] .staff-day-strip::-webkit-scrollbar { display: none; }

[data-active-portal="staf"] .staff-day {
  min-height: 58px;
  padding: var(--sp-2) var(--sp-2);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
}

[data-active-portal="staf"] .staff-day strong { color: var(--ink); font-size: var(--fs-body); }
[data-active-portal="staf"] .staff-day.active { color: rgba(255, 255, 255, .78); background: var(--indigo); border-color: var(--indigo); box-shadow: 0 7px 16px rgba(36, 59, 114, .2); }
[data-active-portal="staf"] .staff-day.active strong { color: #fff; }

[data-active-portal="staf"] .staff-schedule,
[data-active-portal="staf"] .staff-shift-list {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-schedule-row,
[data-active-portal="staf"] .staff-shift-row {
  width: 100%;
  min-height: 69px;
  padding: var(--sp-3) var(--sp-3);
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--sand);
}

[data-active-portal="staf"] button.staff-schedule-row,
[data-active-portal="staf"] button.staff-shift-row { cursor: pointer; }

[data-active-portal="staf"] .staff-schedule-row:last-child,
[data-active-portal="staf"] .staff-shift-row:last-child { border-bottom: 0; }

[data-active-portal="staf"] .staff-schedule-row > .time,
[data-active-portal="staf"] .staff-shift-row > .time {
  width: auto;
  color: var(--indigo);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-schedule-row.current,
[data-active-portal="staf"] .staff-shift-row.current { background: linear-gradient(90deg, var(--emerald-soft), #fff 52%); }
[data-active-portal="staf"] .staff-schedule-row.cancelled,
[data-active-portal="staf"] .staff-shift-row.cancelled { opacity: .62; }

[data-active-portal="staf"] .staff-shift-card,
[data-active-portal="staf"] .staff-handover-card {
  padding: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-shift-card__head,
[data-active-portal="staf"] .staff-handover-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-active-portal="staf"] .staff-shift-card__head > div,
[data-active-portal="staf"] .staff-handover-card__head > div { min-width: 0; flex: 1; }

[data-active-portal="staf"] .staff-shift-card__title,
[data-active-portal="staf"] .staff-handover-card__title { font-size: var(--fs-body); font-weight: 800; line-height: 1.4; }

[data-active-portal="staf"] .staff-shift-card__meta,
[data-active-portal="staf"] .staff-handover-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

[data-active-portal="staf"] .staff-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-roster-card {
  min-width: 0;
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-roster-card__name { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-roster-card__meta { color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }

/* ---------- Reusable operational cards ---------- */

[data-active-portal="staf"] .staff-operation-grid,
[data-active-portal="staf"] .staff-module-grid,
[data-active-portal="staf"] .staff-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-operation-card,
[data-active-portal="staf"] .staff-module-card,
[data-active-portal="staf"] .staff-resource-card {
  min-width: 0;
  min-height: 132px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] button.staff-operation-card,
[data-active-portal="staf"] button.staff-module-card,
[data-active-portal="staf"] button.staff-resource-card { width: 100%; cursor: pointer; }

[data-active-portal="staf"] .staff-operation-card > .staff-icon-box,
[data-active-portal="staf"] .staff-module-card > .staff-icon-box,
[data-active-portal="staf"] .staff-resource-card > .staff-icon-box { margin-bottom: 10px; }

[data-active-portal="staf"] .staff-operation-card__title,
[data-active-portal="staf"] .staff-module-card__title,
[data-active-portal="staf"] .staff-resource-card__title {
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-operation-card__meta,
[data-active-portal="staf"] .staff-module-card__meta,
[data-active-portal="staf"] .staff-resource-card__meta {
  margin-top: var(--sp-1);
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-operation-card__footer,
[data-active-portal="staf"] .staff-module-card__footer,
[data-active-portal="staf"] .staff-resource-card__footer {
  margin-top: auto;
  padding-top: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ---------- Checklist, stages and approvals ---------- */

[data-active-portal="staf"] .staff-checklist {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-checklist-item,
[data-active-portal="staf"] .staff-checklist > .list-row {
  min-height: 64px;
  padding: var(--sp-3) var(--sp-3);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--sand);
}

[data-active-portal="staf"] .staff-checklist-item:last-child,
[data-active-portal="staf"] .staff-checklist > .list-row:last-child { border-bottom: 0; }

[data-active-portal="staf"] .staff-checklist input[type="checkbox"],
[data-active-portal="staf"] .staff-checklist input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--emerald);
}

[data-active-portal="staf"] .staff-checklist-item__main { min-width: 0; flex: 1; }
/* Judul dan meta adalah <span>; tanpa display:block keduanya mengalir satu
   baris dan menempel ("…cek perimeterSatpam · Gerbang A"). */
[data-active-portal="staf"] .staff-checklist-item__title { display: block; color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-checklist-item__meta { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
[data-active-portal="staf"] .staff-checklist-item.done .staff-checklist-item__title { color: var(--muted); text-decoration: line-through; }

[data-active-portal="staf"] .staff-progress-steps,
[data-active-portal="staf"] .staff-stage-strip {
  counter-reset: staff-stage;
  display: grid;
  /* Lebar minimum kolom mengikuti kata terpanjang pada label langkah
     ("Pendampingan"); kolom yang lebih sempit memaksa kata terputus. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

[data-active-portal="staf"] .staff-progress-steps li,
[data-active-portal="staf"] .staff-stage {
  counter-increment: staff-stage;
  min-width: 0;
  min-height: 68px;
  padding: var(--sp-2) var(--sp-1) var(--sp-2);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sp-1);
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.3;
  /* Label langkah boleh membungkus antar-kata sampai dua baris, tetapi
     tidak pernah patah di tengah kata ("Terbitka n", "Diperiks a"). */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

[data-active-portal="staf"] .staff-progress-steps li::before,
[data-active-portal="staf"] .staff-stage::before {
  content: counter(staff-stage);
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #aeb7c8;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-progress-steps li.done,
[data-active-portal="staf"] .staff-stage.done { color: var(--emerald-dark); background: var(--emerald-soft); border-color: #c6e4da; }
[data-active-portal="staf"] .staff-progress-steps li.done::before,
[data-active-portal="staf"] .staff-stage.done::before { content: "✓"; background: var(--emerald); }
[data-active-portal="staf"] .staff-progress-steps li.active,
[data-active-portal="staf"] .staff-stage.active { color: var(--indigo); background: var(--indigo-soft); border-color: #bcc9e4; }
[data-active-portal="staf"] .staff-progress-steps li.active::before,
[data-active-portal="staf"] .staff-stage.active::before { background: var(--indigo); }

/* Temuan detektor #4 & #6 (route pemeliharaan, penerimaan, kas): saat
   barisnya membungkus, langkah done dan active berbagi permukaan pastel
   yang nyaris sewarna (emerald-soft vs indigo-soft, selisih warna 2,1)
   dan hanya berjarak 8px, sehingga terbaca satu blok. Jarak antar
   permukaan senada mengikuti tangga token kartu-ke-kartu: var(--sp-3).
   Hanya .staff-progress-steps yang dinaikkan; .staff-stage-strip tidak
   pernah membungkus pada route yang dipindai, jadi tetap 6px. */
[data-active-portal="staf"] .staff-progress-steps { gap: var(--sp-3); }

[data-active-portal="staf"] .staff-approval-card {
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-approval-card__head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-active-portal="staf"] .staff-approval-card__head > div { min-width: 0; flex: 1; }
[data-active-portal="staf"] .staff-approval-card__title { color: var(--ink); font-size: var(--fs-small); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-approval-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }
[data-active-portal="staf"] .staff-approval-card__actions { margin-top: var(--sp-3); padding-top: var(--sp-3); display: flex; gap: var(--sp-2); border-top: 1px solid var(--sand); }
[data-active-portal="staf"] .staff-approval-card__actions > * { flex: 1; }

/* ---------- Ticket board / kanban-like workflow ---------- */

[data-active-portal="staf"] .staff-ticket-board,
[data-active-portal="staf"] .staff-kanban {
  margin-inline: -16px;
  padding: 2px var(--sp-4) 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 82%);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

[data-active-portal="staf"] .staff-ticket-board::-webkit-scrollbar,
[data-active-portal="staf"] .staff-kanban::-webkit-scrollbar { display: none; }

[data-active-portal="staf"] .staff-ticket-column,
[data-active-portal="staf"] .staff-kanban-column {
  min-width: 0;
  padding: 10px;
  align-self: start;
  scroll-snap-align: start;
  background: #f5f3ed;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-ticket-column__head,
[data-active-portal="staf"] .staff-kanban-column__head {
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-ticket-column__title,
[data-active-portal="staf"] .staff-kanban-column__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; }

[data-active-portal="staf"] .staff-ticket-list { display: grid; gap: var(--sp-2); }

[data-active-portal="staf"] .staff-ticket {
  min-width: 0;
  padding: var(--sp-3);
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

[data-active-portal="staf"] button.staff-ticket { width: 100%; cursor: pointer; }
[data-active-portal="staf"] .staff-ticket.priority-high,
[data-active-portal="staf"] .staff-ticket.urgent { border-left-color: var(--terracotta); }
[data-active-portal="staf"] .staff-ticket.priority-medium { border-left-color: var(--gold); }
[data-active-portal="staf"] .staff-ticket.resolved { border-left-color: var(--emerald); }

[data-active-portal="staf"] .staff-ticket__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-ticket__id { color: var(--muted); font-size: var(--fs-caption); font-weight: 800; letter-spacing: .03em; }
[data-active-portal="staf"] .staff-ticket__title { margin-top: var(--sp-1); color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.42; overflow-wrap: anywhere; }
[data-active-portal="staf"] .staff-ticket__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
[data-active-portal="staf"] .staff-ticket__footer { margin-top: var(--sp-2); padding-top: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); border-top: 1px solid var(--sand); }
[data-active-portal="staf"] .staff-ticket__sla { color: var(--terracotta-dark); font-size: var(--fs-caption); font-weight: 800; }

/* ---------- Tables and dense administrative data ---------- */

[data-active-portal="staf"] .staff-table-wrap,
[data-active-portal="staf"] .staff-data-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  scrollbar-width: thin;
}

[data-active-portal="staf"] .staff-table,
[data-active-portal="staf"] .staff-data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
  background: #fff;
  font-size: var(--fs-caption);
}

[data-active-portal="staf"] .staff-table.compact,
[data-active-portal="staf"] .staff-data-table.compact { min-width: 500px; }

[data-active-portal="staf"] .staff-table th,
[data-active-portal="staf"] .staff-table td,
[data-active-portal="staf"] .staff-data-table th,
[data-active-portal="staf"] .staff-data-table td {
  padding: var(--sp-3) var(--sp-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--sand);
}

[data-active-portal="staf"] .staff-table th,
[data-active-portal="staf"] .staff-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: #faf9f5;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-active-portal="staf"] .staff-table tr:last-child td,
[data-active-portal="staf"] .staff-data-table tr:last-child td { border-bottom: 0; }

[data-active-portal="staf"] .staff-table td strong,
[data-active-portal="staf"] .staff-data-table td strong { display: block; color: var(--ink); font-size: var(--fs-caption); }

[data-active-portal="staf"] .staff-table td small,
[data-active-portal="staf"] .staff-data-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.4; }

[data-active-portal="staf"] .staff-table-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* ---------- Visitor and front-office workflows ---------- */

[data-active-portal="staf"] .staff-visitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-visitor-card,
[data-active-portal="staf"] .staff-guest-card {
  min-width: 0;
  padding: var(--sp-3);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-visitor-card__head,
[data-active-portal="staf"] .staff-guest-card__head { display: flex; align-items: flex-start; gap: var(--sp-2); }
[data-active-portal="staf"] .staff-visitor-card__head > div,
[data-active-portal="staf"] .staff-guest-card__head > div { min-width: 0; flex: 1; }
[data-active-portal="staf"] .staff-visitor-card__name,
[data-active-portal="staf"] .staff-guest-card__name { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-visitor-card__meta,
[data-active-portal="staf"] .staff-guest-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

[data-active-portal="staf"] .staff-visitor-pass {
  padding: var(--sp-4);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .17), transparent 8rem),
    linear-gradient(145deg, var(--indigo-dark), var(--indigo));
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
}

[data-active-portal="staf"] .staff-visitor-pass__code { margin: 8px 0 4px; font-size: var(--fs-display); font-weight: 800; letter-spacing: .08em; }
[data-active-portal="staf"] .staff-visitor-pass__meta { color: rgba(255, 255, 255, .76); font-size: var(--fs-caption); line-height: 1.5; }

/* ---------- Security patrol and incidents ---------- */

/* Kartu peta patroli tingginya 170px agar gambar rutenya terbaca sebagai
   peta, bukan sebagai baris teks. Sebelumnya seluruh isi menumpuk di
   puncak dan menyisakan 81px kosong di kaki kartu — sebuah kartu yang
   terlihat setengah jadi. Isi kini disebar: ringkasan di atas, penanda
   rute di kaki, dan bidang bergambar di antaranya. */
[data-active-portal="staf"] .staff-patrol-map {
  min-height: 170px;
  padding: 14px;
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--sp-2);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 25%, rgba(8, 122, 96, .15) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 38%, rgba(215, 165, 46, .22) 0 5px, transparent 6px),
    linear-gradient(32deg, transparent 47%, rgba(36, 59, 114, .06) 48% 51%, transparent 52%),
    linear-gradient(145deg, #f6f8f3, #e9eee6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

/* Penanda rute dulu digambar oleh ::after ber-position:absolute. Pseudo
   tidak dihitung sebagai isi oleh pemindai mana pun — juga tidak oleh mata
   yang membaca kartu ini sebagai "ada tulisan di atas, lalu kosong". Kini
   ia elemen sungguhan di dalam aliran, sehingga kaki kartu benar-benar
   berisi. */
[data-active-portal="staf"] .staff-patrol-map__tag {
  justify-self: start;
  padding: var(--sp-1) var(--sp-2);
  color: var(--emerald-dark);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(8, 122, 96, .16);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-patrol-list { display: grid; gap: var(--sp-2); }

[data-active-portal="staf"] .staff-patrol-point,
[data-active-portal="staf"] .staff-checkpoint {
  min-height: 58px;
  padding: 10px var(--sp-3);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-patrol-point::before,
[data-active-portal="staf"] .staff-checkpoint::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #aeb7c8;
  box-shadow: 0 0 0 1px #aeb7c8;
}

[data-active-portal="staf"] .staff-patrol-point.done::before,
[data-active-portal="staf"] .staff-checkpoint.done::before { background: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); }
[data-active-portal="staf"] .staff-patrol-point.alert::before,
[data-active-portal="staf"] .staff-checkpoint.alert::before { background: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta); }

[data-active-portal="staf"] .staff-incident-card {
  padding: var(--sp-3);
  background: linear-gradient(145deg, #fff, #fff8f4);
  border: 1px solid #edcdbc;
  border-left: 4px solid var(--terracotta);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-incident-card.resolved { background: linear-gradient(145deg, #fff, #f3faf7); border-color: #c9e3da; border-left-color: var(--emerald); }
[data-active-portal="staf"] .staff-incident-card__title { color: var(--ink); font-size: var(--fs-small); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-incident-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

/* ---------- Maintenance, assets and inventory ---------- */

[data-active-portal="staf"] .staff-maintenance-card,
[data-active-portal="staf"] .staff-work-order {
  padding: var(--sp-3);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-maintenance-card__head,
[data-active-portal="staf"] .staff-work-order__head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-active-portal="staf"] .staff-maintenance-card__head > div,
[data-active-portal="staf"] .staff-work-order__head > div { min-width: 0; flex: 1; }
[data-active-portal="staf"] .staff-maintenance-card__title,
[data-active-portal="staf"] .staff-work-order__title { color: var(--ink); font-size: var(--fs-small); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-maintenance-card__meta,
[data-active-portal="staf"] .staff-work-order__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

[data-active-portal="staf"] .staff-maintenance-card__progress,
[data-active-portal="staf"] .staff-work-order__progress { margin-top: var(--sp-3); }

[data-active-portal="staf"] .staff-maintenance-card__footer,
[data-active-portal="staf"] .staff-work-order__footer {
  margin-top: var(--sp-3);
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: 1px solid var(--sand);
}

[data-active-portal="staf"] .staff-inventory-grid,
[data-active-portal="staf"] .staff-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-inventory-card,
[data-active-portal="staf"] .staff-asset-card {
  min-width: 0;
  padding: var(--sp-3);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-inventory-card.low,
[data-active-portal="staf"] .staff-asset-card.due { background: #fff9eb; border-color: #ead49a; }
[data-active-portal="staf"] .staff-inventory-card__title,
[data-active-portal="staf"] .staff-asset-card__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-inventory-card__meta,
[data-active-portal="staf"] .staff-asset-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
[data-active-portal="staf"] .staff-inventory-card__stock { margin-top: 10px; color: var(--indigo); font-size: var(--fs-title); font-weight: 800; line-height: 1; }

[data-active-portal="staf"] .staff-stock-track {
  height: 7px;
  margin-top: var(--sp-2);
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r-pill);
}

[data-active-portal="staf"] .staff-stock-track > span { display: block; height: 100%; background: var(--emerald); border-radius: inherit; }
[data-active-portal="staf"] .staff-inventory-card.low .staff-stock-track > span { background: var(--gold); }

/* ---------- Finance, administration and HR ---------- */

[data-active-portal="staf"] .staff-finance-summary,
[data-active-portal="staf"] .staff-payroll-summary,
[data-active-portal="staf"] .staff-admin-summary,
[data-active-portal="staf"] .staff-hr-summary {
  padding: var(--sp-4);
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 91% 12%, rgba(255, 255, 255, .16), transparent 8rem),
    linear-gradient(145deg, var(--indigo-dark), var(--indigo));
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
}

[data-active-portal="staf"] .staff-finance-summary.green,
[data-active-portal="staf"] .staff-payroll-summary.green { background: radial-gradient(circle at 91% 12%, rgba(255, 255, 255, .16), transparent 8rem), linear-gradient(145deg, var(--emerald-dark), var(--emerald)); }

[data-active-portal="staf"] .staff-finance-summary__label,
[data-active-portal="staf"] .staff-payroll-summary__label,
[data-active-portal="staf"] .staff-admin-summary__label,
[data-active-portal="staf"] .staff-hr-summary__label { display: block; color: rgba(255, 255, 255, .72); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label); line-height: var(--lh-snug); }

[data-active-portal="staf"] .staff-finance-summary__value,
[data-active-portal="staf"] .staff-payroll-summary__value,
[data-active-portal="staf"] .staff-admin-summary__value,
[data-active-portal="staf"] .staff-hr-summary__value { display: block; margin-top: var(--sp-1); font-size: var(--fs-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }

[data-active-portal="staf"] .staff-finance-summary__meta,
[data-active-portal="staf"] .staff-payroll-summary__meta,
[data-active-portal="staf"] .staff-admin-summary__meta,
[data-active-portal="staf"] .staff-hr-summary__meta { margin-top: var(--sp-1); color: rgba(255, 255, 255, .78); font-size: var(--fs-caption); line-height: 1.5; }

[data-active-portal="staf"] .staff-transaction,
[data-active-portal="staf"] .staff-admin-record,
[data-active-portal="staf"] .staff-employee-record {
  min-height: 64px;
  padding: var(--sp-3) var(--sp-3);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid var(--sand);
}

[data-active-portal="staf"] .staff-transaction:last-child,
[data-active-portal="staf"] .staff-admin-record:last-child,
[data-active-portal="staf"] .staff-employee-record:last-child { border-bottom: 0; }

[data-active-portal="staf"] .staff-transaction__main,
[data-active-portal="staf"] .staff-admin-record__main,
[data-active-portal="staf"] .staff-employee-record__main { min-width: 0; flex: 1; }
[data-active-portal="staf"] .staff-transaction__title,
[data-active-portal="staf"] .staff-admin-record__title,
[data-active-portal="staf"] .staff-employee-record__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-transaction__meta,
[data-active-portal="staf"] .staff-admin-record__meta,
[data-active-portal="staf"] .staff-employee-record__meta { margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
[data-active-portal="staf"] .staff-transaction__value { flex: none; color: var(--ink); font-size: var(--fs-caption); font-weight: 800; text-align: right; }

[data-active-portal="staf"] .staff-leave-balance-grid,
[data-active-portal="staf"] .staff-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-leave-balance,
[data-active-portal="staf"] .staff-benefit-card {
  min-width: 0;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-leave-balance__value,
[data-active-portal="staf"] .staff-benefit-card__value { color: var(--indigo); font-size: var(--fs-title); font-weight: 800; line-height: 1.1; }
[data-active-portal="staf"] .staff-leave-balance__label,
[data-active-portal="staf"] .staff-benefit-card__label { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); font-weight: 700; line-height: 1.4; }

/* margin: 0 wajib. <dl> membawa margin bawaan peramban sebesar 1em, dan
   karena badan section berukuran --fs-body (15px) angkanya menjadi 15px —
   di luar skala 4px. Ia mengendap sebagai ruang mati di kaki section dan
   membuat jarak antar section terbaca 35px, bukan 20px. */
[data-active-portal="staf"] .staff-profile-facts,
[data-active-portal="staf"] .staff-employment-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-profile-facts > div,
[data-active-portal="staf"] .staff-employment-facts > div {
  min-width: 0;
  padding: var(--sp-3);
  background: #faf9f5;
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
}

[data-active-portal="staf"] .staff-profile-facts dt,
[data-active-portal="staf"] .staff-employment-facts dt { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
[data-active-portal="staf"] .staff-profile-facts dd,
[data-active-portal="staf"] .staff-employment-facts dd { margin: 4px 0 0; color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }

/* ---------- Training, compliance and staff performance ---------- */

[data-active-portal="staf"] .staff-progress-card,
[data-active-portal="staf"] .staff-compliance-card,
[data-active-portal="staf"] .staff-performance-card {
  padding: var(--sp-3);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-progress-card__head,
[data-active-portal="staf"] .staff-compliance-card__head,
[data-active-portal="staf"] .staff-performance-card__head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-active-portal="staf"] .staff-progress-card__head > div,
[data-active-portal="staf"] .staff-compliance-card__head > div,
[data-active-portal="staf"] .staff-performance-card__head > div { min-width: 0; flex: 1; }

[data-active-portal="staf"] .staff-progress-card__title,
[data-active-portal="staf"] .staff-compliance-card__title,
[data-active-portal="staf"] .staff-performance-card__title { color: var(--ink); font-size: var(--fs-small); font-weight: 800; line-height: 1.4; }

[data-active-portal="staf"] .staff-progress-card__meta,
[data-active-portal="staf"] .staff-compliance-card__meta,
[data-active-portal="staf"] .staff-performance-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

[data-active-portal="staf"] .staff-progress-track,
[data-active-portal="staf"] .staff-score-track {
  height: 8px;
  margin-top: var(--sp-3);
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r-pill);
}

[data-active-portal="staf"] .staff-progress-track > span,
[data-active-portal="staf"] .staff-score-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--emerald), #28a88a);
  border-radius: inherit;
}

[data-active-portal="staf"] .staff-competency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-competency-card {
  min-width: 0;
  min-height: 126px;
  padding: var(--sp-3);
  display: grid;
  align-content: space-between;
  gap: var(--sp-2);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-competency-card__label { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
[data-active-portal="staf"] .staff-competency-card__score { color: var(--indigo); font-size: var(--fs-title); font-weight: 800; line-height: 1; }
[data-active-portal="staf"] .staff-competency-card__meta { color: var(--muted); font-size: var(--fs-caption); line-height: 1.4; }

/* ---------- Documents, evidence and secure files ---------- */

[data-active-portal="staf"] .staff-document-grid,
[data-active-portal="staf"] .staff-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-document-card,
[data-active-portal="staf"] .staff-evidence-card {
  min-width: 0;
  padding: var(--sp-3);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-document-card__preview,
[data-active-portal="staf"] .staff-evidence-card__preview {
  min-height: 86px;
  margin: -3px -3px 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--indigo);
  background: linear-gradient(145deg, #f2f4fa, #dce4f3);
  border-radius: var(--r-md);
}

[data-active-portal="staf"] .staff-document-card__preview .custom-icon,
[data-active-portal="staf"] .staff-evidence-card__preview .custom-icon { width: 66px; height: 66px; }
[data-active-portal="staf"] .staff-document-card__title,
[data-active-portal="staf"] .staff-evidence-card__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
[data-active-portal="staf"] .staff-document-card__meta,
[data-active-portal="staf"] .staff-evidence-card__meta { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }

[data-active-portal="staf"] .staff-confidential,
[data-active-portal="staf"] .staff-sensitive {
  padding: var(--sp-3);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid #efcbd1;
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-confidential > input,
[data-active-portal="staf"] .staff-sensitive > input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--danger);
}

[data-active-portal="staf"] .staff-confidential strong,
[data-active-portal="staf"] .staff-sensitive strong { display: block; font-size: var(--fs-caption); line-height: 1.4; }
[data-active-portal="staf"] .staff-confidential small,
[data-active-portal="staf"] .staff-sensitive small { display: block; margin-top: var(--sp-1); color: var(--text); font-size: var(--fs-caption); line-height: 1.45; }

/* ---------- Forms, filters and search ---------- */

[data-active-portal="staf"] .staff-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

[data-active-portal="staf"] .staff-form-grid > .field { min-width: 0; margin-bottom: 0; }
[data-active-portal="staf"] .staff-form-grid > .field.full,
[data-active-portal="staf"] .staff-form-grid > .staff-form-full { grid-column: 1 / -1; }

[data-active-portal="staf"] .staff-search-box {
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-search-box > .custom-icon { width: 23px; height: 23px; }
[data-active-portal="staf"] .staff-search-box input {
  min-width: 0;
  min-height: var(--touch-min);
  flex: 1;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

[data-active-portal="staf"] .staff-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}

[data-active-portal="staf"] .staff-filter-bar::-webkit-scrollbar { display: none; }

[data-active-portal="staf"] .staff-upload-zone {
  width: 100%;
  min-height: 112px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--indigo);
  background: linear-gradient(145deg, #fff, #faf9f5);
  border: 1.5px dashed #c9c4b8;
  border-radius: var(--r-lg);
  cursor: pointer;
}

[data-active-portal="staf"] .staff-upload-zone .custom-icon { width: 34px; height: 34px; }

[data-active-portal="staf"] .field input:disabled,
[data-active-portal="staf"] .field select:disabled,
[data-active-portal="staf"] .field textarea:disabled {
  color: var(--muted);
  background: #f5f3ed;
  cursor: not-allowed;
}

/* ---------- Activity reports and multi-version output ---------- */

[data-active-portal="staf"] .staff-version-grid {
  margin: 0;
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  background: #faf9f5;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-version-grid legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="staf"] .staff-version-grid label {
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2) 10px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
}

[data-active-portal="staf"] .staff-version-grid input {
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: var(--emerald);
}

/* ---------- Communication ---------- */

[data-active-portal="staf"] .staff-thread {
  min-height: 220px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: #f7f5ef;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

[data-active-portal="staf"] .staff-message {
  max-width: 84%;
  padding: 10px var(--sp-3);
  align-self: flex-start;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  box-shadow: 0 3px 9px rgba(21, 36, 74, .05);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

[data-active-portal="staf"] .staff-message.mine,
[data-active-portal="staf"] .staff-message.outgoing {
  align-self: flex-end;
  color: #fff;
  background: var(--indigo);
  border-color: var(--indigo);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
}

[data-active-portal="staf"] .staff-message small { display: block; margin-top: var(--sp-1); opacity: .64; font-size: var(--fs-caption); text-align: right; }

[data-active-portal="staf"] .staff-thread-composer {
  margin-top: var(--sp-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-2);
}

[data-active-portal="staf"] .staff-thread-composer textarea,
[data-active-portal="staf"] .staff-thread-composer input {
  width: 100%;
  min-height: var(--touch-min);
  max-height: 128px;
  padding: var(--sp-3) var(--sp-3);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  resize: vertical;
}

[data-active-portal="staf"] .staff-thread-composer button { width: 46px; min-height: 46px; padding: 0; border-radius: var(--r-md); }

/* ---------- States, skeletons and empty surfaces ---------- */

[data-active-portal="staf"] .staff-empty,
[data-active-portal="staf"] .staff-state-card {
  padding: 28px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="staf"] .staff-empty .staff-icon-box,
[data-active-portal="staf"] .staff-state-card .staff-icon-box { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: var(--r-xl); }
[data-active-portal="staf"] .staff-empty h2,
[data-active-portal="staf"] .staff-state-card h2 { margin: 0; color: var(--ink); font-size: var(--fs-heading); }
[data-active-portal="staf"] .staff-empty p,
[data-active-portal="staf"] .staff-state-card p { margin: 7px auto 17px; max-width: 330px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.55; }

[data-active-portal="staf"] .staff-skeleton { display: grid; gap: 10px; }
[data-active-portal="staf"] .staff-skeleton > span {
  display: block;
  height: 72px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, #f2efe8 25%, #faf9f5 45%, #f2efe8 65%);
  background-size: 280% 100%;
  animation: staff-shimmer 1.2s linear infinite;
}

/* ---------- Staff nav, sheet and footer ---------- */

[data-active-portal="staf"] .staff-bottom-nav {
  /* Sama dengan lebar dasar .bottom-nav bersama (--portal-frame-width di
     tokens.css); ditulis ulang di sini hanya karena baris ini juga
     mengganti warna latar & garis atasnya. Portal Staf TIDAK menimpa
     token ini di desktop, jadi nilainya tetap 480px di lebar berapa
     pun — beda dengan Pimpinan, lihat catatan di tokens.css. */
  width: min(100%, var(--portal-frame-width, 480px));
  background: rgba(255, 255, 255, .985);
  border-top-color: var(--line);
}

[data-active-portal="staf"] .staff-bottom-nav .nav-indicator { background: var(--indigo-soft); }
[data-active-portal="staf"] .staff-bottom-nav .nav-btn.active { color: var(--indigo); }

/* Staff uses the same assets as the other portals.  Keep it on the shared
   28 px icon / 12 px label rail, then compensate each artwork's optical—not
   geometric—centre.  This deliberately avoids moving or scaling active icons. */
[data-active-portal="staf"] .staff-bottom-nav .nav-btn[data-route="home"] > .staff-icon {
  transform: translate3d(-.37px, -1.49px, 0);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn[data-route="tasks"] > .staff-icon {
  transform: translate3d(-3.49px, -1.04px, 0);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn[data-route="agenda"] > .staff-icon {
  transform: translate3d(.25px, -.50px, 0);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn[data-route="account"] > .staff-icon {
  transform: translate3d(.07px, -1.36px, 0);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn.active[data-route="home"] > .staff-icon {
  transform: translate3d(-.43px, -4.71px, 0) scale(1.15);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn.active[data-route="tasks"] > .staff-icon {
  transform: translate3d(-4.01px, -4.20px, 0) scale(1.15);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn.active[data-route="agenda"] > .staff-icon {
  transform: translate3d(.29px, -3.57px, 0) scale(1.15);
}
[data-active-portal="staf"] .staff-bottom-nav .nav-btn.active[data-route="account"] > .staff-icon {
  transform: translate3d(.08px, -4.56px, 0) scale(1.15);
}

[data-active-portal="staf"] .staff-sheet {
  width: min(100%, 480px);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px calc(20px + var(--safe-bottom));
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 55px rgba(21, 36, 74, .23);
  animation: staff-sheet-up .34s cubic-bezier(.32, .72, 0, 1);
}

[data-active-portal="staf"] .staff-sheet .sheet-title { color: var(--ink); font-weight: 800; }
[data-active-portal="staf"] .staff-sheet .sheet-sub { color: var(--muted); }

[data-active-portal="staf"] .staff-sheet-head {
  margin: 2px 0 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

[data-active-portal="staf"] .staff-sheet-head > div {
  min-width: 0;
  flex: 1;
}

[data-active-portal="staf"] .staff-sheet-head h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-sheet-head .section-sub {
  margin-top: var(--sp-1);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-sheet-head > .round-btn {
  width: auto;
  min-width: 58px;
  min-height: var(--touch-min);
  flex: none;
  padding-inline: 10px;
}

/* The shared toast ships a Material Symbols text token. Portal Staf does not
   depend on that font, so render a deterministic CSS check instead. */
[data-active-portal="staf"] #toast > .material-symbols-rounded {
  width: 22px;
  height: 22px;
  flex: none;
  position: relative;
  display: block;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
}

[data-active-portal="staf"] #toast > .material-symbols-rounded::before {
  content: "";
  width: 5px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

[data-active-portal="staf"] .staff-footer-switch {
  padding-top: 22px;
  text-align: center;
}

[data-active-portal="staf"] .staff-footer-switch .text-btn {
  min-height: var(--touch-min);
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}

/* ---------- Interaction, focus and affordance ---------- */

[data-active-portal="staf"] :where(
  .staff-mode-chip,
  .staff-workspace-chip,
  .staff-day,
  .staff-work-item,
  .staff-action-card,
  .staff-operation-card,
  .staff-module-card,
  .staff-resource-card,
  .staff-roster-card,
  .staff-ticket,
  .staff-visitor-card,
  .staff-maintenance-card,
  .staff-inventory-card,
  .staff-document-card,
  .staff-competency-card
):focus-visible {
  outline: 3px solid rgba(215, 165, 46, .56);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  [data-active-portal="staf"] :where(
    .staff-work-item,
    .staff-action-card,
    .staff-operation-card,
    .staff-module-card,
    .staff-resource-card,
    .staff-roster-card,
    .staff-ticket,
    .staff-visitor-card,
    .staff-maintenance-card,
    .staff-inventory-card,
    .staff-document-card,
    .staff-competency-card
  ):hover {
    border-color: #ccd5e7;
    box-shadow: 0 12px 27px rgba(21, 36, 74, .12);
    transform: translateY(-1px);
  }
}

/* ---------- Motion ---------- */

@keyframes staff-page-enter {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes staff-avatar-enter {
  from { opacity: 0; transform: translate3d(11px, 12px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes staff-sheet-up {
  from { transform: translate3d(0, 102%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes staff-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* ---------- Responsive reflow ---------- */

@media (max-width: 380px) {
  [data-active-portal="staf"] .staff-hero { min-height: 250px; }
  [data-active-portal="staf"] .staff-hero__body,
  [data-active-portal="staf"] .staff-hero__content { grid-template-columns: minmax(0, 1fr) 105px; }
  [data-active-portal="staf"] .staff-hero__portrait,
  [data-active-portal="staf"] img.staff-hero__avatar { width: 105px; max-width: 105px; }
  [data-active-portal="staf"] .staff-hero h1,
  [data-active-portal="staf"] .staff-hero__name { font-size: var(--fs-title); }
  [data-active-portal="staf"] .staff-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-active-portal="staf"] .staff-summary-grid.four,
  [data-active-portal="staf"] .staff-metric-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-active-portal="staf"] .staff-operation-grid,
  [data-active-portal="staf"] .staff-module-grid,
  [data-active-portal="staf"] .staff-resource-grid,
  [data-active-portal="staf"] .staff-visitor-grid,
  [data-active-portal="staf"] .staff-inventory-grid,
  [data-active-portal="staf"] .staff-asset-grid,
  [data-active-portal="staf"] .staff-document-grid,
  [data-active-portal="staf"] .staff-evidence-grid { grid-template-columns: 1fr; }
  [data-active-portal="staf"] .staff-schedule-row,
  [data-active-portal="staf"] .staff-shift-row { grid-template-columns: 44px auto minmax(0, 1fr); }
  [data-active-portal="staf"] .staff-schedule-row > .status,
  [data-active-portal="staf"] .staff-shift-row > .status { grid-column: 3; justify-self: start; }
}

@media (max-width: 420px) {
  [data-active-portal="staf"] .staff-work-item,
  [data-active-portal="staf"] .staff-action-card {
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: var(--sp-2);
  }

  [data-active-portal="staf"] .staff-work-item__side,
  [data-active-portal="staf"] .staff-action-card__side {
    min-width: 0;
    padding-left: 0;
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  [data-active-portal="staf"] .staff-work-item__side .status,
  [data-active-portal="staf"] .staff-action-card__side .status {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-caption);
  }
}

@media (max-width: 340px) {
  [data-active-portal="staf"] .staff-profile-card,
  [data-active-portal="staf"] .staff-workspace-card { margin-inline: var(--sp-3); }
  [data-active-portal="staf"] .staff-summary-grid,
  [data-active-portal="staf"] .staff-metric-grid { grid-template-columns: 1fr; }
  [data-active-portal="staf"] .staff-summary-grid > div,
  [data-active-portal="staf"] .staff-metric { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left; }
  [data-active-portal="staf"] .staff-summary-grid span,
  [data-active-portal="staf"] .staff-metric__label { margin-top: 0; text-align: right; }
  [data-active-portal="staf"] .staff-roster-grid,
  [data-active-portal="staf"] .staff-leave-balance-grid,
  [data-active-portal="staf"] .staff-benefit-grid,
  [data-active-portal="staf"] .staff-profile-facts,
  [data-active-portal="staf"] .staff-employment-facts,
  [data-active-portal="staf"] .staff-competency-grid,
  [data-active-portal="staf"] .staff-form-grid,
  [data-active-portal="staf"] .staff-version-grid { grid-template-columns: 1fr; }
  [data-active-portal="staf"] .staff-form-grid > .field.full,
  [data-active-portal="staf"] .staff-form-grid > .staff-form-full { grid-column: auto; }
  [data-active-portal="staf"] .staff-work-item,
  [data-active-portal="staf"] .staff-action-card { grid-template-columns: auto minmax(0, 1fr); }
  [data-active-portal="staf"] .staff-work-item__side,
  [data-active-portal="staf"] .staff-action-card__side { grid-column: 2; justify-items: start; }
  [data-active-portal="staf"] .staff-approval-card__actions { flex-direction: column; }
}

@media (min-width: 620px) {
  [data-active-portal="staf"] .staff-bottom-nav { bottom: 18px; border-radius: 0 0 30px 30px; }
  [data-active-portal="staf"] .staff-sheet { margin-bottom: 0; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-active-portal="staf"] .staff-page,
  [data-active-portal="staf"] .staff-hero__portrait,
  [data-active-portal="staf"] img.staff-hero__avatar,
  [data-active-portal="staf"] .staff-sheet,
  [data-active-portal="staf"] .staff-skeleton > span {
    animation: none !important;
  }

  [data-active-portal="staf"] :where(
    .staff-mode-chip,
    .staff-workspace-chip,
    .staff-service-icon,
    .staff-work-item,
    .staff-action-card,
    .staff-operation-card,
    .staff-module-card,
    .staff-resource-card,
    .staff-ticket,
    .staff-bottom-nav .nav-btn > .custom-icon
  ) {
    transition: none !important;
  }
}

[data-active-portal="staf"].reduce-motion .staff-page,
[data-active-portal="staf"].reduce-motion .staff-hero__portrait,
[data-active-portal="staf"].reduce-motion img.staff-hero__avatar,
[data-active-portal="staf"].reduce-motion .staff-sheet,
[data-active-portal="staf"].reduce-motion .staff-skeleton > span,
[data-active-portal="staf"] .reduce-motion .staff-page,
[data-active-portal="staf"] .reduce-motion .staff-hero__portrait,
[data-active-portal="staf"] .reduce-motion img.staff-hero__avatar,
[data-active-portal="staf"] .reduce-motion .staff-sheet,
[data-active-portal="staf"] .reduce-motion .staff-skeleton > span {
  animation: none !important;
  transition: none !important;
}

@media (forced-colors: active) {
  [data-active-portal="staf"] :where(
    .staff-work-item,
    .staff-action-card,
    .staff-operation-card,
    .staff-module-card,
    .staff-resource-card,
    .staff-ticket,
    .staff-table-wrap,
    .staff-data-table-wrap,
    .staff-sheet
  ) {
    border: 1px solid CanvasText;
  }

  [data-active-portal="staf"] .staff-mode-chip.active,
  [data-active-portal="staf"] .staff-workspace-chip.active { outline: 2px solid Highlight; }
}
/* Coverage-detail actions may contain three or four safe workflow choices.

   Jarak baris dibedakan dari jarak kolom dengan sengaja. Antar kolom yang
   berdampingan cukup var(--sp-3) — mata sudah dibantu tepi kiri/kanan
   tombol. Antar BARIS, sebuah sel bisa berakhir dengan keterangan tombol
   nonaktif (small.staff-disabled-reason), sehingga pasangannya menjadi
   "teks ke permukaan" yang menuntut 12px terlihat; var(--sp-4) memberi
   ruang itu sekaligus menampung luberan tinta ±1px. */
[data-active-portal="staf"] .staff-page .btn-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  column-gap: var(--sp-3);
  row-gap: var(--sp-4);
}

[data-active-portal="staf"] .staff-page .btn-row > * {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: var(--sp-3) var(--sp-3);
  flex: none;
  font-size: var(--fs-small);
  line-height: 1.35;
}

[data-active-portal="staf"] .staff-page .btn-row > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Baris aksi yang memuat keterangan tombol nonaktif turun menjadi satu kolom.

   align-items: stretch di atas sengaja dipertahankan: pada 10 route dua
   tombol bersebelahan punya jumlah baris teks berbeda ("Ajukan perubahan
   data" 2 baris, "Lihat riwayat perubahan" 1 baris) dan tanpa peregangan
   dasar keduanya bergerigi.

   Tetapi peregangan itu mengukur SEL, bukan tombol. Sel yang memuat
   .staff-disabled-action berisi tombol 44px + var(--sp-4) + keterangan dua
   sampai tiga baris, sehingga tinggi barisnya melonjak ke 77-127px dan
   tombol biasa di sebelahnya ikut meregang sampai setinggi itu. Diukur di
   16 route: `rekonsiliasi` dan `offboarding` meregangkan tombol 44px
   menjadi 127px. Tombol setinggi 127px tidak lagi terbaca sebagai tombol,
   melainkan sebagai papan berwarna.

   Menghapus stretch akan menukar satu cacat dengan cacat lain. Yang benar
   adalah mengakui bahwa aksi yang membawa keterangan bukan sepadan dengan
   tombol polos: begitu satu sel membawa keterangan, seluruh baris memakai
   satu kolom. Tiap tombol lalu selebar penuh, tingginya alami, dan
   keterangan berada tepat di bawah tombol yang dijelaskannya — juga saat
   satu baris memuat dua tombol nonaktif sekaligus (route `audit`,
   `tagihan`, `dokumen`, `rekonsiliasi`). */
[data-active-portal="staf"] .staff-page .btn-row:has(> .staff-disabled-action) {
  grid-template-columns: minmax(0, 1fr);
}

[data-active-portal="staf"] .staff-page :is(.primary-btn, .secondary-btn, .danger-btn):disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: saturate(.45);
  box-shadow: none;
}

/* UX sweep: mobile reading, action and data hierarchy. */
[data-active-portal="staf"] .staff-page :is(.section-sub, .list-meta, .staff-copy),
[data-active-portal="staf"] .staff-mode-banner p,
[data-active-portal="staf"] .staff-metric-help { font-size: var(--fs-caption); line-height: 1.5; }
/* Judul section naik dari 16px ke 18px / 800 (RITME SECTION OPSI B,
   26 Agu 2026): pada 16px judul kalah wibawa dari isi kartunya sendiri
   dan section terbaca menempel. Pimpinan tidak ikut naik — kepadatan. */
[data-active-portal="staf"] .staff-page .section-title { font-size: var(--fs-heading); font-weight: 800; letter-spacing: -.012em; line-height: 1.3; }
[data-active-portal="staf"] .staff-page .status { min-height: 25px; padding: var(--sp-1) var(--sp-2); display: inline-flex; align-items: center; font-size: var(--fs-caption); font-weight: 800; line-height: 1.25; white-space: normal; text-align: center; }

/* A contextual label should not compete with the work queue. */
[data-active-portal="staf"] .staff-page .staff-mode-banner { min-height: 80px; padding: var(--sp-3) 14px; background: linear-gradient(145deg, #f8faff, #edf3fb); border-color: #dfe7f3; border-radius: var(--r-lg); box-shadow: 0 2px 8px rgba(21, 36, 74, .035); }
[data-active-portal="staf"] .staff-page .staff-mode-banner::before { content: ""; width: 3px; position: absolute; inset: 13px auto 13px 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--staff-indigo); }
/* Pil "Ruang kerja aktif" adalah permukaan keras; judul di bawahnya hanya
   huruf tanpa padding sendiri. Pada var(--sp-1) tepi pil mendarat langsung
   di badan huruf. var(--sp-3) mengembalikan pasangan "kartu ke teks" ke
   ambang minimumnya. */
[data-active-portal="staf"] .staff-page .staff-mode-banner h2 { margin-top: var(--sp-3); font-size: var(--fs-heading); letter-spacing: -.02em; line-height: 1.22; }
[data-active-portal="staf"] .staff-page .staff-mode-banner p { margin-top: var(--sp-1); }
[data-active-portal="staf"] .staff-page .staff-mode-banner > .staff-icon { width: 40px; height: 40px; opacity: .9; }

/* Two metrics are a paired operational summary, not a three-column grid with a blank. */
[data-active-portal="staf"] .staff-page .staff-metric-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-active-portal="staf"] .staff-page .staff-metric-grid { gap: 10px; }
[data-active-portal="staf"] .staff-page .staff-metric { min-height: 76px; padding: var(--sp-3) var(--sp-3); text-align: left; background: #fff; border-color: #e3e8f0; border-radius: var(--r-lg); box-shadow: 0 3px 10px rgba(21, 36, 74, .035); }
[data-active-portal="staf"] .staff-page .staff-metric-label { margin-top: 0; font-size: var(--fs-caption); line-height: 1.3; }
[data-active-portal="staf"] .staff-page .staff-metric-value { margin-top: var(--sp-1); font-size: var(--fs-title); }
[data-active-portal="staf"] .staff-page .staff-metric-help { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-caption); }

/* Workflow labels and utility controls must remain legible and reachable. */
[data-active-portal="staf"] .staff-page .staff-progress-steps { gap: var(--sp-3); }
[data-active-portal="staf"] .staff-page .staff-progress-steps li { min-height: 72px; padding: var(--sp-2) 6px var(--sp-2); font-size: var(--fs-caption); line-height: 1.35; }
[data-active-portal="staf"] .staff-page .staff-progress-steps li::before { width: 27px; height: 27px; font-size: var(--fs-caption); }
[data-active-portal="staf"] :is(.staff-page, .staff-sheet, .staff-topbar) :is(.back-btn, .round-btn, .text-btn) { min-height: var(--staff-touch); }
[data-active-portal="staf"] .staff-topbar .back-btn,
[data-active-portal="staf"] .staff-topbar .round-btn { width: var(--staff-touch); min-width: var(--staff-touch); height: var(--staff-touch); }
[data-active-portal="staf"] .staff-footer-switch .text-btn { min-height: var(--staff-touch); }
[data-active-portal="staf"] .staff-mode-chip,
[data-active-portal="staf"] .staff-workspace-chip { min-height: var(--touch-min); padding-inline: var(--sp-3); font-size: var(--fs-caption); }
[data-active-portal="staf"] .staff-page .btn-row { margin-top: 2px; padding: var(--sp-2); background: #f8fafc; border: 1px solid #e3e8f0; border-radius: var(--r-lg); }
[data-active-portal="staf"] .staff-page .btn-row > * { min-height: var(--staff-touch); padding: var(--sp-3) var(--sp-3); font-size: var(--fs-small); }

/* Dense data is still scrollable, but no longer rendered as a miniature desktop table. */
[data-active-portal="staf"] .staff-table-wrap,
[data-active-portal="staf"] .staff-data-table-wrap { position: relative; scroll-padding-inline: 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
[data-active-portal="staf"] .staff-table,
[data-active-portal="staf"] .staff-data-table { min-width: 560px; font-size: var(--fs-caption); }
[data-active-portal="staf"] .staff-table.compact,
[data-active-portal="staf"] .staff-data-table.compact { min-width: 520px; }
[data-active-portal="staf"] .staff-table th,
[data-active-portal="staf"] .staff-table td,
[data-active-portal="staf"] .staff-data-table th,
[data-active-portal="staf"] .staff-data-table td { padding: var(--sp-3) 14px; scroll-snap-align: start; }
[data-active-portal="staf"] .staff-table th,
[data-active-portal="staf"] .staff-data-table th { font-size: var(--fs-caption); }
[data-active-portal="staf"] .staff-table td strong,
[data-active-portal="staf"] .staff-data-table td strong { font-size: var(--fs-caption); }
[data-active-portal="staf"] .staff-table td small,
[data-active-portal="staf"] .staff-data-table td small { font-size: var(--fs-caption); }

/* Keyboard/focus parity across route controls, sheets and shared navigation. */
[data-active-portal="staf"] :is(.staff-page, .staff-sheet, .staff-topbar, .staff-bottom-nav) :is(button, a, input, select, textarea, [role="button"]):focus-visible { outline: 3px solid rgba(36, 59, 114, .58); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); }

/* Hooks for route-specific command surfaces. They are used only on high-intent workflows. */
[data-active-portal="staf"] .staff-domain-command { margin: 0 0 14px; padding: var(--sp-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; background: linear-gradient(145deg, #0f2753, #164f67); border-radius: var(--r-lg); box-shadow: 0 10px 22px rgba(15, 39, 83, .16); }
[data-active-portal="staf"] .staff-domain-command__copy { min-width: 0; color: rgba(255, 255, 255, .76); font-size: var(--fs-caption); line-height: 1.42; }
[data-active-portal="staf"] .staff-domain-command__title { display: block; margin-bottom: 2px; color: #fff; font-size: var(--fs-subhead); font-weight: 800; line-height: 1.25; }
[data-active-portal="staf"] .staff-domain-command :is(button, .primary-btn) { min-height: 44px; padding-inline: var(--sp-3); color: var(--ink); background: #fff; border-color: #fff; box-shadow: none; }
[data-active-portal="staf"] .staff-domain-priority,
[data-active-portal="staf"] .staff-domain-queue { margin: 0 0 14px; border-radius: var(--r-lg); }
[data-active-portal="staf"] .staff-domain-priority { padding: var(--sp-3); color: #713717; background: #fff7f1; border: 1px solid #f0d1bd; border-left: 4px solid var(--terracotta); }
[data-active-portal="staf"] .staff-domain-queue { overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 5px 14px rgba(21, 36, 74, .045); }

@media (max-width: 380px) {
  [data-active-portal="staf"] .staff-page .staff-progress-steps li { min-height: 68px; padding-inline: var(--sp-1); font-size: var(--fs-caption); }
  [data-active-portal="staf"] .staff-domain-command { grid-template-columns: 1fr; }
  [data-active-portal="staf"] .staff-domain-command :is(button, .primary-btn) { width: 100%; }
}

/* The workspace rail and home notification are primary navigation controls. */
[data-active-portal="staf"] .staff-mode-chip,
[data-active-portal="staf"] .staff-workspace-chip { min-height: var(--staff-touch); }
[data-active-portal="staf"] .staff-hero .round-btn { width: var(--staff-touch); min-width: var(--staff-touch); height: var(--staff-touch); }


/* Home hero: reveal every workspace without a clipped horizontal chip rail. */
@media (max-width: 480px) {
  [data-active-portal="staf"] .staff-hero .staff-workspace-switcher {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  [data-active-portal="staf"] .staff-hero .staff-workspace-chip {
    width: 100%;
    min-height: var(--staff-touch);
    padding: 6px var(--sp-1);
    white-space: normal;
    font-size: var(--fs-caption);
    line-height: 1.16;
  }
}


/* Final touch-target and visitor-pass hierarchy corrections from visual QA.
   Ukurannya mengikuti --bell-size, bukan angka portal sendiri. */
[data-active-portal="staf"] .staff-hero .round-btn {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
}

[data-active-portal="staf"] .staff-visitor-pass > :is(.staff-visitor-pass__meta, .staff-visitor-pass__code) {
  display: block;
}

[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait .round-btn {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
}


/* Hero identity and workspace overlap: match the established Wali/Guru composition. */
[data-active-portal="staf"] .hero.staff-hero .staff-hero__portrait > img,
[data-active-portal="staf"] .hero.staff-hero img.staff-hero__avatar {
  object-fit: cover;
  object-position: center 42%;
}

[data-active-portal="staf"] .hero.staff-hero + .family-strip.staff-workspace-card,
[data-active-portal="staf"] .hero.staff-hero + .family-strip.staff-profile-card {
  margin: -78px 16px 0;
  padding: var(--sp-4);
  position: relative;
  z-index: 8;
  box-shadow: var(--staff-shadow-raised);
}

@media (max-width: 340px) {
  [data-active-portal="staf"] .hero.staff-hero + .family-strip.staff-workspace-card,
  [data-active-portal="staf"] .hero.staff-hero + .family-strip.staff-profile-card { margin-inline: var(--sp-3); }
}


/* Reserve the lower hero layer so the overlapping workspace card never covers its own switcher. */
[data-active-portal="staf"] .hero.staff-hero { padding-bottom: 112px; }


/* =====================================================================
   Formulir domain, ringkasan agregat, dan alasan tombol nonaktif
   ---------------------------------------------------------------------
   Tiga komponen ini menggantikan sheet generik lama. Seluruh ukuran
   memakai token dari tokens.css; tidak ada teks di bawah 12px dan setiap
   kontrol memenuhi target sentuh minimum.
   ===================================================================== */

/* --- Kontrol formulir di dalam bottom sheet ------------------------- */

[data-active-portal="staf"] .staff-form {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}

[data-active-portal="staf"] .staff-form .field {
  margin-bottom: var(--sp-3);
}

[data-active-portal="staf"] .staff-form .field label {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-small);
}

[data-active-portal="staf"] .staff-form :is(input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

[data-active-portal="staf"] .staff-form textarea {
  min-height: 88px;
  line-height: var(--lh-normal);
  resize: vertical;
}

[data-active-portal="staf"] .staff-form select {
  padding-right: var(--sp-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right var(--sp-4) center, right var(--sp-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

[data-active-portal="staf"] .staff-form :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(36, 59, 114, .14);
}

[data-active-portal="staf"] .staff-form-note {
  margin: 0 0 var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* --- Ringkasan agregat pada layar domain ----------------------------
   Menggantikan kartu "prioritas" lama yang hanya mengulang baris pertama
   daftar di bawahnya. Angka di sini adalah hitungan lintas record.     */

[data-active-portal="staf"] .staff-domain-stats {
  margin: 0 0 var(--d-card-gap);
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--staff-border);
  border-radius: var(--d-card-radius);
  box-shadow: var(--elev-1);
}

[data-active-portal="staf"] .staff-domain-stats .staff-summary-grid {
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Tombol nonaktif dengan alasan yang selalu terlihat --------------
   Demo berjalan di tablet: atribut title tidak pernah muncul karena tidak
   ada kursor yang bisa menahan hover.                                  */

/* Jarak tombol -> alasannya adalah pasangan "permukaan ke teks": minimumnya
   var(--sp-3) = 12px. Dipakai satu anak tangga di atasnya (var(--sp-4))
   karena tinta huruf 12px meluber ±1px di atas kotak barisnya, sehingga
   jarak yang TERLIHAT selalu satu piksel lebih kecil daripada nilai gap.
   Pada var(--sp-1) alasan terpaku di bawah tepi tombol dan terbaca sebagai
   bagian dari tombolnya, bukan sebagai keterangan. */
[data-active-portal="staf"] .staff-disabled-action {
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

[data-active-portal="staf"] .staff-page .btn-row > .staff-disabled-action {
  min-height: 0;
  padding: 0;
  font-size: inherit;
}

[data-active-portal="staf"] .staff-disabled-action > button {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3);
  font-size: var(--fs-small);
}

[data-active-portal="staf"] .staff-disabled-reason {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  text-align: left;
  overflow-wrap: anywhere;
}

[data-active-portal="staf"] .staff-disabled-reason::before {
  content: "";
  width: var(--sp-2);
  height: var(--sp-2);
  margin-right: var(--sp-1);
  display: inline-block;
  border-radius: var(--r-pill);
  background: var(--gold-dark, #b8860b);
  vertical-align: baseline;
}


/* =====================================================================
   Target sentuh 44px untuk kontrol yang lolos dari sapuan sebelumnya
   ---------------------------------------------------------------------
   Tombol topbar, sakelar, dan kotak cari sebelumnya berada di bawah
   ambang 44px. Ukuran visual sakelar dipertahankan; yang diperbesar
   adalah area sentuhnya lewat lapisan transparan.
   ===================================================================== */

[data-active-portal="staf"] .staff-topbar .top-action > :only-child {
  width: var(--touch-min);
  height: var(--touch-min);
}

/* Di portal ini sakelar adalah tombolnya sendiri, bukan bagian dari baris
   yang bisa diketuk. Tinggi kotaknya dinaikkan ke 44px sementara jalur
   sakelar tetap digambar 50x30 lewat ::after, sehingga tampilannya sama
   persis dengan portal lain tetapi target sentuhnya memenuhi ambang. */
[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .switch {
  width: 50px;
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .switch::after {
  content: "";
  width: 50px;
  height: 30px;
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border-radius: var(--r-pill);
  background: #d8d4ca;
  transform: translate(-50%, -50%);
  transition: background var(--motion-base) var(--motion-ease);
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .switch.on::after {
  background: var(--emerald);
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .switch::before {
  position: relative;
  z-index: 1;
  transform: translateX(-10px);
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .switch.on::before {
  transform: translateX(10px);
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .search-box {
  min-height: var(--touch-min);
  align-items: center;
}

[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .search-box input {
  min-height: var(--touch-min);
  padding-block: var(--sp-2);
  font-size: var(--fs-small);
}


/* Judul kartu perintah kini berupa kalimat status, bukan label tombol.
   Pada lebar bingkai ponsel penuh (sampai 460px) susunannya ditumpuk agar
   judul tidak terpecah menjadi tiga baris di samping tombol lebar. */
@media (max-width: 460px) {
  [data-active-portal="staf"] .staff-domain-command {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-3);
  }

  [data-active-portal="staf"] .staff-domain-command :is(button, .primary-btn) {
    width: 100%;
  }
}


/* Baris chip filter berdiri sendiri di atas section pertama. Jaraknya kini
   diatur ritme blok halaman di bawah, bukan margin khusus di sini. */
[data-active-portal="staf"] .staff-page > .chips {
  margin-bottom: 0;
  padding-block: var(--sp-1);
}

[data-active-portal="staf"] .staff-page > .chips .chip {
  min-height: var(--touch-min);
  flex: none;
  display: inline-flex;
  align-items: center;
}


/* =====================================================================
   RITME BLOK HALAMAN — sumber tunggal jarak vertikal
   ---------------------------------------------------------------------
   Lihat "STANDAR JARAK ANTAR-BLOK HALAMAN" di puncak berkas untuk alasan
   dan angkanya. Sebelum blok ini ada 19 jenis pasangan blok bertetangga
   yang berjarak nol di 61 route; semuanya berasal dari satu penyebab, yaitu
   hanya .section yang punya margin-bottom pada shell bersama.

   Perbaikannya di kontainer, bukan di tiap komponen, supaya komponen baru
   apa pun otomatis ikut ritme yang sama tanpa perlu ditambal lagi.
   ===================================================================== */

[data-active-portal="staf"] main.staff-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
}

/* Margin lama .section digantikan gap kontainer, agar tidak berlipat. */
[data-active-portal="staf"] main.staff-page > .section {
  margin-bottom: 0;
}

/* Batas "blok selesai / bagian baru dimulai" butuh udara lebih banyak
   daripada jarak antar dua section: 20px + 12px = 32px. Inilah aturan yang
   memisahkan kartu "Batas privasi aktif" dari judul "Perlindungan akun",
   kartu profil dari judul "Ruang kerja", dan strip hari Agenda dari baris
   "Senin, 3 Agustus 2026". */
[data-active-portal="staf"] main.staff-page > :not(.section) + .section {
  margin-top: var(--sp-3);
}

/* Jarak antar SECTION mengikuti token ritme section: gap kontainer 20px
   di atas hanya ritme dasar antar blok, pasangan section bertetangga
   menggenapkan sisanya lewat margin-top sampai genap
   var(--d-section-gap) 40px. Rasio 40:12 terhadap var(--sec-head-gap)
   itulah yang membuat isi menempel ke judulnya sendiri, bukan ke
   section tetangga (RITME SECTION OPSI B, pemilik produk 26 Agu 2026).
   position: relative hanya menjadi jangkar pseudo divider di bawah;
   tanpa z-index ia tidak membuat stacking context baru, jadi watermark
   dan overlay lain tidak terpengaruh. */
[data-active-portal="staf"] main.staff-page > .staff-section + .staff-section {
  position: relative;
  margin-top: calc(var(--d-section-gap) - var(--sp-5));
}

/* ---------------------------------------------------------------------
   DIVIDER BERMEREK ANTAR SECTION — SoT 7.2.5
   ---------------------------------------------------------------------
   Hanya DI ANTARA section level halaman; tidak pernah di dalam kartu,
   sheet, modal, atau antar item daftar — selektor > main.staff-page
   di atas sudah mengunci itu. Digambar absolut di TENGAH gap 40px oleh
   pseudo pada section KEDUA, sehingga tidak menambah tinggi layout.
   ::before dan ::after pada .staff-section belum terpakai di mana pun —
   sudah diperiksa lewat grep sebelum dipakai di sini.

   Garis dibuat transparan selebar piring di tengah supaya terputus
   rapi: piring mark ikut opacity .55, dan piring semi transparan tidak
   bisa menutup garis di belakangnya dengan bersih. */
[data-active-portal="staf"] main.staff-page > .staff-section + .staff-section::before {
  content: "";
  height: 1px;
  position: absolute;
  top: calc(-.5 * var(--d-section-gap));
  right: 8%;
  left: 8%;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--line) 22%,
    var(--line) calc(50% - 13px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    var(--line) calc(50% + 13px),
    var(--line) 78%,
    transparent);
}

[data-active-portal="staf"] main.staff-page > .staff-section + .staff-section::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(-.5 * var(--d-section-gap) - 10px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--canvas) url("/presentasi/storage/brand/akselerasync-mark-1x1.webp") center / 13px 13px no-repeat;
  filter: grayscale(1);
  opacity: .55;
}

/* Footer merek adalah penutup halaman, bukan blok konten berikutnya.
   Padding atas bawaan footer bersama (20px) DINOLKAN di sini: bersama gap
   kontainer 20px dan margin 12px ia menumpuk menjadi 54px udara sebelum
   logo — dua setengah kali ritme dasar, dan bukan kelipatan 4px. Yang
   berlaku adalah 20 + 12 = 32px, persis "blok -> footer merek" di standar. */
[data-active-portal="staf"] main.staff-page > .brand-footer {
  margin-top: var(--sp-3);
  padding-top: 0;
}

/* Blok yang membawa pemisahnya sendiri dinolkan ketika menjadi anak langsung
   halaman: gap kontainer sudah memisahkannya, garis dan margin tambahan
   membuat jaraknya berlipat dari dua sumber. */
[data-active-portal="staf"] main.staff-page > :is(.staff-mode-switcher, .staff-workspace-switcher) {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

[data-active-portal="staf"] main.staff-page > :is(.staff-domain-command, .staff-domain-priority, .staff-domain-queue, .staff-domain-stats, .btn-row) {
  margin-bottom: 0;
}

[data-active-portal="staf"] main.staff-page > .btn-row {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   RITME DI DALAM SECTION
   ---------------------------------------------------------------------
   Ritme di atas hanya mengatur anak langsung halaman. Di dalam sebuah
   section, isi dibungkus satu wadah (.staff-section__body) yang selama ini
   tidak punya jarak sama sekali: begitu renderer menaruh beberapa blok
   sejenis langsung di sana — dua kartu agenda di route `agenda`, misalnya —
   keduanya bersentuhan pada 0px dan terbaca sebagai satu kartu panjang.

   Sama seperti ritme halaman, perbaikannya di wadah, bukan di tiap
   pemanggilan renderer, supaya blok baru apa pun otomatis ikut ritme.

   .list-card dikecualikan: panel daftar memang memisahkan barisnya dengan
   garis 1px, dan menambah jarak di sana justru memecah panelnya. */
[data-active-portal="staf"] .staff-section__body:not(.list-card) > * + * {
  margin-top: var(--sp-3);
}

/* Hero beranda: kartu ruang kerja menumpang di atas hero, lalu halaman
   dimulai. Padding atas halaman sudah memberi 20px, cukup untuk memisahkan
   kartu dari blok pertama tanpa memutus komposisi tumpang tindihnya. */
[data-active-portal="staf"] .staff-hero .staff-hero__team {
  margin-top: var(--sp-3);
}

[data-active-portal="staf"] .staff-hero .staff-workspace-switcher {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
}


/* =====================================================================
   Perbaikan komponen bersama yang menjadi sumber cacat lintas layar
   ===================================================================== */

/* .family-meta pada shell bersama dipotong elipsis satu baris. Pada kartu
   identitas staf isinya "STF-2024-018 · Koordinator Operasional" sehingga
   jabatan selalu terpenggal. Nama jabatan yang terpotong terbaca murah;
   biarkan membungkus ke baris kedua. */
[data-active-portal="staf"] :is(.staff-page, .staff-sheet) .family-meta {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Kartu identitas: status tetap sejajar atas ketika meta membungkus. */
[data-active-portal="staf"] .staff-profile-card .family-top {
  align-items: flex-start;
}

[data-active-portal="staf"] .staff-profile-card .family-top > .status {
  margin-top: 2px;
}

/* Tombol teks pendek ("Ganti", "Buka", "Lihat") tingginya sudah 44px tetapi
   lebarnya hanya 30-35px. Target sentuh diukur dua arah. */
[data-active-portal="staf"] :is(.staff-page, .staff-sheet, .staff-topbar) .text-btn {
  min-width: var(--touch-min);
}

/* Kotak centang daftar periksa digambar 22px tetapi area sentuhnya harus
   44px. Kotaknya digambar ulang lewat ::before/::after agar ukuran visual
   tetap sama sementara kotak sentuhnya memenuhi ambang. */
[data-active-portal="staf"] .staff-checklist-item > input[type="checkbox"] {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  margin: 0;
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

[data-active-portal="staf"] .staff-checklist-item > input[type="checkbox"]::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #c6cddb;
  border-radius: var(--r-xs);
  background: #fff;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

[data-active-portal="staf"] .staff-checklist-item > input[type="checkbox"]:checked::before {
  background: var(--emerald);
  border-color: var(--emerald);
}

[data-active-portal="staf"] .staff-checklist-item > input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  opacity: 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

[data-active-portal="staf"] .staff-checklist-item > input[type="checkbox"]:checked::after {
  opacity: 1;
}


/* =====================================================================
   Rel ruang kerja — kelima chip harus selalu terlihat utuh
   ---------------------------------------------------------------------
   Diukur di 360px dan 390px: pada rel satu baris, tulisan "Operasional"
   terpotong 4-7px di hero, dan chip "SDM" berada 32-62px di luar area
   terlihat pada layar Akun. Chip yang terpotong atau tersembunyi membuat
   ruang kerja terasa tidak tersedia, padahal justru inilah kendali utama
   yang harus selalu terjangkau.

   Tiga kolom yang membungkus ke baris kedua memberi tiap chip ~104-114px,
   cukup untuk kata terpanjang tanpa memenggal kata di tengah.
   ===================================================================== */
@media (max-width: 480px) {
  /* Kolom berdampingan cukup var(--sp-2); antar BARIS chip putih bertemu
     chip putih tanpa garis pemisah, jadi barisnya butuh var(--sp-3) agar
     kedua baris tidak melebur menjadi satu blok. */
  [data-active-portal="staf"] .staff-workspace-switcher,
  [data-active-portal="staf"] .staff-hero .staff-workspace-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--sp-2);
    row-gap: var(--sp-3);
    overflow: visible;
  }

  [data-active-portal="staf"] .staff-workspace-chip,
  [data-active-portal="staf"] .staff-hero .staff-workspace-chip {
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--fs-caption);
    line-height: 1.2;
    white-space: normal;
  }

  /* Mode kerja hanya empat butir. Membungkus ke baris kedua lebih baik
     daripada menggulir mendatar yang memotong kata terakhir. */
  [data-active-portal="staf"] .staff-mode-switcher,
  [data-active-portal="staf"] .staff-hero .staff-mode-switcher {
    flex-wrap: wrap;
    overflow: visible;
  }
}


/* =====================================================================
   Jaring pengaman: label status tidak boleh tergencet
   ---------------------------------------------------------------------
   Di bawah 420px kartu pekerjaan berubah menjadi kisi dua kolom dan slot
   status dipindah ke kolom kedua. Bila penanda status ditulis tanpa
   pembungkus __side, ia jatuh ke kolom ikon selebar 24px sehingga pilnya
   menyusut menjadi lingkaran kecil dan tulisannya meluber keluar.

   Markup-nya sudah diseragamkan di renderer, dan aturan berikut menjaga
   agar bentuk markup yang keliru tidak pernah lagi merusak tampilan.
   ===================================================================== */
[data-active-portal="staf"] :is(.staff-work-item, .staff-action-card) > .status {
  min-width: max-content;
  grid-column: 2;
  justify-self: start;
}

/* Tombol dalam notice ikut mengecil sampai teksnya terpotong ketika ruang
   sempit. Beri lebar alaminya dan biarkan barisnya membungkus. */
[data-active-portal="staf"] .staff-page > .notice {
  flex-wrap: wrap;
}

[data-active-portal="staf"] .staff-page > .notice > .text-btn {
  flex: none;
  min-width: max-content;
}