/* =============================================================
   Agridesa — lapisan brand TIPIS di atas Filament

   PRINSIP (keputusan Kristian 2026-08-14):
   komponen Filament dipakai APA ADANYA. Berkas ini hanya berisi:
     1. token brand untuk halaman kustom
     2. perbaikan bug nyata — bukan estetika
     3. aturan kondisi lapangan yang tak bisa dinyatakan lewat API Filament

   JANGAN menambahkan override radius, shadow, tinggi kontrol, gaya
   tabel, sidebar, input, atau badge di sini. Semua itu pecah saat
   Filament di-upgrade dan membuang aksesibilitas yang sudah teruji.
   Warna, font, logo, favicon diatur lewat API resmi di AdminPanelProvider.
   ============================================================= */

/* ── 1. Token brand — dipakai halaman kustom, tidak meng-override Filament ── */
:root {
  --ag-green:      #0D8E44;   /* terkunci, jangan diubah */
  --ag-green-dark: #0A6E34;
  --ag-green-tint: #E6F9EF;
  --ag-gold:       #FFBA07;
  --ag-gold-tint:  #FFF6E0;
  --ag-red:        #FF5757;
  --ag-red-tint:   #FFECEC;
  --ag-ink:        #1E293B;
  --ag-ink-mid:    #64748B;
  --ag-ink-sub:    #94A3B8;
  --ag-border:     #E2E8F0;
}

/* =============================================================
   2. PERBAIKAN BUG — ditemukan lewat uji browser nyata.
      Hapus hanya kalau Filament sudah memperbaikinya di hulu.
   ============================================================= */

/* BUG A — sidebar off-canvas yang TERTUTUP masih menangkap pointer,
   sehingga sebagian layar terasa mati di HP. Filament memindahkannya
   dengan translate, tapi elemennya tetap di jalur hit-test. */
@media (max-width: 1023px) {
  .fi-sidebar:not(.fi-sidebar-open) { pointer-events: none; }
  .fi-sidebar.fi-sidebar-open       { pointer-events: auto; }
}

/* BUG B — target sentuh chrome Filament 36px di mobile.
   Aturan lapangan (app-design-system §5): tangan kotor / bersarung
   butuh target besar. Ini syarat pakai, bukan selera. */
@media (max-width: 849px) {
  .fi-icon-btn,
  .fi-user-menu-trigger { min-width: 44px; min-height: 44px; }
}

/* ── 3. Logo di topbar saat sidebar tersembunyi (<1024) ──
   Filament hanya menaruh logo di header sidebar, jadi di HP merek
   hilang sama sekali. */
.ag-topbar-logo { display: none; align-items: center; }
.ag-topbar-logo img { height: 26px; width: auto; display: block; }
@media (max-width: 1023px) { .ag-topbar-logo { display: flex; } }

/* =============================================================
   4. Kelas khusus halaman kustom (Pendataan Cepat).
      Tidak menyentuh komponen Filament mana pun.
   ============================================================= */

/* Baris field. TIDAK memakai <x-filament::grid> karena komponen itu
   mengabaikan atribut gap (terukur `gap: normal` → kolom bersinggungan
   di 0px, cincin fokus satu field menyentuh field sebelah, dan saat
   menumpuk di HP jaraknya 27px sedangkan field di luar grid 43px).
   minmax(0,1fr) menjaga sel tetap boleh menyusut — tanpa itu lebar
   minimum bawaan input[type=date] mendorong kolom melimpah. */
.ag-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .ag-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* tata letak dua kolom — halaman kustom, bukan komponen Filament.
   Satu kolom sampai 1099px: di tablet potret, dua kolom bikin kolom
   utama terlalu sempit untuk field NIK yang lebar. */
.ag-two-col { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .ag-two-col { grid-template-columns: minmax(0, 1fr) 21rem; }
}

/* NIK = angka panjang yang harus dicocokkan dgn KTP digit per digit.
   Font TETAP sama dgn field lain — monospace bikin satu field menonjol
   sendiri dan placeholder ikut terlihat asing. Keterbacaan didapat dari
   angka lebar-seragam + jarak antar digit, bukan dari ganti font. */
.ag-nik-input {
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .06em;
}
/* placeholder kembali normal — ia kalimat, bukan angka */
.ag-nik-input::placeholder {
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: normal;
}

.ag-stat {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.ag-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* aksi primer di zona ibu jari — HP saja, aturan lapangan §5 */
@media (max-width: 849px) {
  .ag-sticky-action {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: .75rem .875rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ag-border);
  }
  .ag-sticky-action .fi-btn { width: 100%; }
  .fi-main { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================
   5. Halaman MASUK — foto satu layar penuh + kartu naik dari dasar.
      Struktur mengikuti mockup-login-final-id_2026-06-23.html (F1):
      foto mengisi layar, copy mengambang di bawah, kartu putih sudut-atas
      melengkung menimpa foto. Ini kerangka HALAMAN, bukan gaya komponen:
      field & tombol di dalam kartu tetap komponen Filament apa adanya (D22).
   ============================================================= */
.ag-auth {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: #084F26;   /* hijau dalam — terlihat sebelum foto termuat */
}

/* ── lapisan visual ──
   flex:1 membuat foto mengambil SISA tinggi layar; kartu tetap setinggi
   isinya di dasar. Kalau formulir lebih tinggi dari layar, foto menyusut
   sampai min-height lalu halaman menggulir — formulir tidak pernah terpotong. */
.ag-auth-visual {
  position: relative;
  flex: 1;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.ag-hero-img,
.ag-hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* video menimpa foto hanya setelah benar-benar siap diputar */
.ag-hero-vid { opacity: 0; transition: opacity .6s ease; }
.ag-hero-vid.is-ready { opacity: 1; }

/* stop gradien disalin dari mockup — gelap di puncak supaya logo terbaca,
   bening di tengah supaya foto bicara, pekat di dasar supaya copy terbaca */
.ag-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(8,40,22,.42) 0%,
              rgba(8,40,22,.04) 22%,
              rgba(8,40,22,.10) 46%,
              rgba(8,40,22,.62) 72%,
              rgba(6,47,26,.97) 100%);
}

.ag-hero-copy {
  position: relative;
  /* Jarak bawah harus MELEBIHI tumpang tindih kartu (-1.75rem), kalau tidak
     tagline nyaris menempel ke tepi kartu. Dengan 2.25rem jeda bersihnya
     cuma 8px — terukur, dan terasa sesak di HP. */
  padding: 1.5rem 1.5rem 3.75rem;
  color: #fff;
  max-width: 34rem;
}
.ag-hero-logo { height: 28px; width: auto; display: block; margin-bottom: 1rem; }

.ag-tagline {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1; margin: .7rem 0 0;
}
/* ── kartu auth: bottom-sheet yang menimpa foto ── */
.ag-auth-panel {
  position: relative;
  z-index: 2;
  margin-top: -1.75rem;          /* menimpa foto, seperti di mockup */
  background: #fff;
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: 0 -10px 34px rgba(8,40,22,.24);
  padding: 1.75rem 1.375rem 1.5rem;
}
.ag-auth-card { width: 100%; max-width: 25rem; margin: 0 auto; }

.ag-auth-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  text-align: center; margin: 0;
}
.ag-auth-lead {
  font-size: .875rem; color: var(--ag-ink-mid);
  text-align: center; margin: .375rem 0 1.5rem;
}
.ag-auth-alt {
  margin: 1.25rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--ag-border);
  text-align: center; font-size: .875rem; color: var(--ag-ink-mid);
}
.ag-auth-alt a { color: var(--ag-green-dark); font-weight: 600; text-decoration: none; }
.ag-auth-alt a:hover { text-decoration: underline; }
.ag-auth-foot {
  font-size: .75rem; color: var(--ag-ink-sub);
  text-align: center; margin: 1.25rem 0 0;
}

/* ── desktop: dua kolom. Mockup hanya merancang HP, jadi di layar lebar
      bottom-sheet dibatalkan — foto jadi kolom penuh-tinggi di kiri. ── */
@media (min-width: 900px) {
  .ag-auth { flex-direction: row; }
  .ag-auth-visual { flex: 1.05; min-height: 100dvh; }
  .ag-hero-copy { padding: 3rem 3rem 3.25rem; }
  .ag-hero-logo { height: 32px; margin-bottom: 1.5rem; }
  .ag-tagline { font-size: 2.125rem; }
  .ag-sub { font-size: .95rem; }
  .ag-hero-scrim {
    background: linear-gradient(180deg,
                rgba(8,40,22,.34) 0%,
                rgba(8,40,22,.10) 40%,
                rgba(8,40,22,.78) 100%);
  }

  .ag-auth-panel {
    flex: 1;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 3rem;
  }
}
@media (min-width: 1400px) {
  .ag-tagline { font-size: 2.5rem; }
}

/* =============================================================
   6. Pemilih organisasi (topbar).
      Muncul hanya untuk user yang anggota >1 organisasi.
   ============================================================= */
.ag-orgpicker { display: flex; align-items: center; }

.ag-orgpicker-trigger {
  display: inline-flex; align-items: center; gap: .45rem;
  max-width: 15rem; padding: .4rem .6rem;
  border: 1px solid var(--ag-border); border-radius: .5rem;
  background: #fff; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--ag-ink);
  min-height: 36px;
}
.ag-orgpicker-trigger:hover { border-color: var(--ag-ink-sub); }

/* Belum memilih = keadaan yang harus mengganggu, bukan yang bisa diabaikan.
   Datanya bisa masuk tenant yang salah. */
.ag-orgpicker-trigger[data-perlu-pilih] {
  border-color: var(--ag-gold);
  background: var(--ag-gold-tint);
}

.ag-orgpicker-ico   { width: 16px; height: 16px; flex: none; color: var(--ag-ink-mid); }
.ag-orgpicker-caret { width: 15px; height: 15px; flex: none; color: var(--ag-ink-sub); }
.ag-orgpicker-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-orgpicker-sub   { display: block; font-size: .75rem; color: var(--ag-ink-sub); font-weight: 400; }

.ag-orgpicker-block {
  display: flex; align-items: center; gap: .5rem;
  margin: .75rem 1rem 0; padding: .7rem .9rem;
  border: 1px solid var(--ag-gold); background: var(--ag-gold-tint);
  border-radius: .5rem; font-size: .875rem;
}
.ag-orgpicker-block-ico { width: 18px; height: 18px; flex: none; color: #8A6100; }

/* di HP nama organisasi memakan lebar yang dibutuhkan judul halaman */
@media (max-width: 640px) {
  .ag-orgpicker-trigger { max-width: 9rem; font-size: .8125rem; }
}

/* Field nomor HP di layar masuk — angka panjang, sama alasannya dgn NIK:
   lebar digit seragam supaya mudah diperiksa ulang. */
.ag-phone-input {
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  letter-spacing: .04em;
}

/* =============================================================
   7. Halaman undangan + pesan WhatsApp siap salin.
   ============================================================= */
.ag-form { display: flex; flex-direction: column; gap: 1rem; }
.ag-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.ag-hint  { font-size: .8125rem; color: var(--ag-ink-mid); margin: .375rem 0 0; }
.ag-err   { font-size: .875rem; color: var(--ag-red); margin: .375rem 0 0; }
.ag-btn-full { width: 100%; justify-content: center; }

.ag-alert-red,
.ag-alert-green {
  border-radius: .5rem; padding: .75rem 1rem; font-size: .875rem;
}
.ag-alert-red   { border: 1px solid var(--ag-red);   background: var(--ag-red-tint); }
.ag-alert-green { border: 1px solid var(--ag-green); background: var(--ag-green-tint); }

/* Kode undangan: 8 karakter yang disalin manual atau dibacakan lewat telepon.
   Renggang + lebar seragam supaya tidak ada yang salah baca. */
.ag-kode-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 1.125rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}

.ag-undangan-teks {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.55;
  background: var(--ag-green-tint); border: 1px solid var(--ag-green);
  border-radius: .5rem; padding: 1rem; max-height: 22rem; overflow-y: auto;
}
.ag-undangan-aksi {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .875rem;
}
.ag-undangan-catatan { font-size: .8125rem; color: var(--ag-ink-mid); }
[x-cloak] { display: none !important; }
.ag-undangan {
  margin-bottom: 1.25rem; padding: 1rem;
  border: 1px solid var(--ag-border); border-radius: .75rem; background: #fff;
}
.ag-undangan-judul { font-weight: 700; margin: 0 0 .625rem; font-size: .9375rem; }

/* =============================================================
   8. Penanda STAGING.
      Hanya muncul kalau APP_ENV=staging|local (lihat AdminPanelProvider).
      Sengaja mencolok: orang memotret layar ini untuk laporan dan demo,
      dan tangkapan layar staging tidak boleh disangka produksi.
   ============================================================= */
.ag-staging-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--ag-gold); color: #4A3400;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-align: center;
  padding: .3rem .75rem; line-height: 1.3;
}

/* Aksi sekunder di layar kode OTP — sengaja tidak berbentuk tombol
   supaya tidak bersaing dengan aksi utama (Verifikasi). */
.ag-otp-aksi {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; font-size: .875rem;
}
.ag-tautan {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ag-green-dark); font-weight: 600; font-size: .875rem;
}
.ag-tautan:hover { text-decoration: underline; }

/* Penanda nomor terverifikasi di halaman profil. */
.ag-terverifikasi {
  display: inline-block; margin-left: .4rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ag-green-dark); background: var(--ag-green-tint);
  border: 1px solid var(--ag-green); border-radius: 999px;
  padding: .1rem .45rem; vertical-align: middle;
}