/* =====================================================================
   config/theme.css - satu-satunya tempat nilai desain (warna, font, ukuran, radius,
   jarak, bayangan). app.css dan komponen hanya memakai var(--...).
   Ganti nilai di sini -> seluruh aplikasi ikut berubah.
   ===================================================================== */
:root{
  /* ---------- palet dasar (ubah brand di sini) ---------- */
  --blue-900:#0A3A63; --blue-700:#0F4C81; --blue-300:#9FC0DC; --blue-200:#CBDEEE;
  --blue-150:#D6E6F3; --blue-100:#E6EEF6;
  --green-700:#14795A; --green-500:#1A9E73; --green-200:#BFE4D6; --green-100:#E4F4EE; --green-50:#F5FBF9;
  --amber-700:#9A6206; --amber-500:#D98A0B; --amber-100:#FBF0DB; --amber-50:#FFFCF5;
  --red-700:#A8392A;   --red-500:#CE4A36;   --red-100:#FAE7E3;   --red-50:#FEF7F5;
  --slate-950:#10212E; --slate-900:#17242E; --slate-850:#17303F; --slate-800:#1F3A4C;
  --slate-500:#64788C; --slate-450:#7D93A8; --slate-350:#B4C2CE; --slate-300:#BFCDDA;
  --slate-250:#C6D4E0; --slate-220:#CBD7E2; --slate-200:#D3DEE8; --slate-150:#DCE4EC;
  --slate-120:#E9EFF5; --slate-110:#EAF0F5; --slate-100:#EDF1F5; --slate-80:#F2F5F8;
  --slate-70:#F4F7FA;  --slate-60:#F6F9FC;  --slate-50:#F7FAFC;  --slate-30:#FAFCFE;
  --white:#FFFFFF;
  /* Microsoft (tombol "Masuk dengan akun Microsoft"): warna logo & tombol RESMI dari panduan
     branding Microsoft identity platform — jangan disesuaikan dengan brand Gesit. */
  --ms-red:#F25022; --ms-green:#7FBA00; --ms-blue:#00A4EF; --ms-yellow:#FFB900;
  --ms-btn-line:#8C8C8C; --ms-btn-text:#5E5E5E;
  --shadow-rgb:16,33,46;   /* untuk bayangan & overlay */
  --brand-rgb:15,76,129;

  /* ---------- warna semantik (dipakai komponen) ---------- */
  --c-brand:var(--blue-700);        --c-brand-strong:var(--blue-900);
  --c-brand-soft:var(--blue-100);   --c-brand-soft-hover:var(--blue-150);
  --c-brand-line:var(--blue-200);   --c-brand-ring:var(--blue-300);
  --c-brand-tint:rgba(var(--brand-rgb),.07);
  --c-on-brand:var(--white);

  --c-ok:var(--green-500);   --c-ok-text:var(--green-700);   --c-ok-soft:var(--green-100);   --c-ok-line:var(--green-200); --c-ok-bg:var(--green-50);
  --c-warn:var(--amber-500); --c-warn-text:var(--amber-700); --c-warn-soft:var(--amber-100); --c-warn-bg:var(--amber-50);
  --c-bad:var(--red-500);    --c-bad-text:var(--red-700);    --c-bad-soft:var(--red-100);    --c-bad-bg:var(--red-50);
  --c-neutral-soft:var(--slate-100);
  --c-pending:var(--slate-220);     /* segmen "terjadwal" di pita progres */

  --c-bg:var(--slate-80);           /* latar halaman */
  --c-surface:var(--white);         /* panel, input, tombol */
  --c-surface-sunken:var(--slate-50);   /* header tabel, input readonly, rule row */
  --c-surface-subtle:var(--slate-30);   /* hover baris, footer form */
  --c-surface-empty:var(--slate-70);    /* sel kosong kalender */

  --c-text:var(--slate-900);
  --c-text-muted:var(--slate-500);
  --c-text-faint:var(--slate-350);
  --c-text-label:var(--slate-450);  /* judul grup kecil (h4) */

  --c-line:var(--slate-150);
  --c-line-soft:var(--slate-100);
  --c-line-strong:var(--slate-300);

  --c-side-bg:var(--slate-950);  --c-side-hover:var(--slate-850); --c-side-line:var(--slate-800);
  --c-side-text:var(--slate-250); --c-side-muted:var(--slate-450); --c-side-active-text:var(--white);

  --c-map-bg:var(--slate-60);  --c-map-grid:var(--slate-120);
  --c-map-note-bg:rgba(255,255,255,.85);
  --c-photo-a:var(--slate-200); --c-photo-b:var(--slate-110);
  --c-scrim:rgba(var(--shadow-rgb),.4);
  --c-toast-bg:var(--slate-950); --c-toast-text:var(--white);
  --c-skel:var(--slate-100); --c-skel-shine:var(--slate-30);   /* skeleton loading */
  --c-progress:var(--c-brand);                                 /* progress bar atas */
  --c-focus:var(--c-brand);                                    /* garis fokus keyboard (aksesibilitas) */
  --c-map-rep:var(--slate-950);                                /* penanda posisi rep di peta */
  --c-notice-bg:var(--c-brand-soft); --c-notice-text:var(--c-brand-strong);

  /* halaman Masuk & layar awal - default mengikuti sidebar & brand agar senada */
  --c-login-bg:var(--c-bg);
  --c-login-hero-bg:var(--c-side-bg);
  --c-login-hero-glow:rgba(var(--brand-rgb),.55);   /* sorotan warna brand di panel kiri */
  --c-login-hero-text:var(--c-side-text);
  --c-login-hero-title:var(--c-side-active-text);
  --c-login-hero-muted:var(--c-side-muted);
  --c-login-hero-line:var(--c-side-line);
  --c-login-point:var(--c-ok);                      /* titik daftar keunggulan */
  --bg-login-hero:radial-gradient(120% 80% at 0% 100%,var(--c-login-hero-glow),transparent 60%),var(--c-login-hero-bg);   /* latar panel kiri halaman Masuk */
  --c-sso-bg:var(--white); --c-sso-bg-hover:var(--slate-50);
  --c-sso-line:var(--ms-btn-line); --c-sso-text:var(--ms-btn-text);

  /* ---------- tipografi ---------- */
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --fs-2xs:10.5px; --fs-xs:11px; --fs-sm:11.5px; --fs-md:12px; --fs-base:12.5px;
  --fs-lg:13px; --fs-xl:14px; --fs-2xl:15px; --fs-icon:20px; --fs-stat:21px; --fs-h1:23px;
  --fs-body:var(--fs-xl);   /* ukuran teks dasar <body> */

  --fw-regular:400; --fw-medium:500; --fw-bold:600;

  --fs-hero:26px;           /* judul panel kiri halaman Masuk */

  --lh-body:1.5; --lh-snug:1.45; --lh-tight:1.4; --lh-heading:1.25;
  --ls-tight:-.01em; --ls-tighter:-.02em; --ls-caps:.04em;

  /* ---------- bentuk ---------- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-input:7px; --radius-lg:8px;
  --radius-panel:10px; --radius-card:14px; --radius-pill:999px; --radius-round:50%;
  --border-w:1px;

  /* ---------- jarak ---------- */
  --space-2xs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
  --space-xl:20px; --space-2xl:24px; --space-3xl:32px; --space-4xl:48px;
  --pad-panel-x:var(--space-lg); --pad-panel-y:14px;
  --pad-cell-x:var(--space-lg);  --pad-cell-y:11px;
  --pad-input:8px 11px; --pad-btn:8px 14px;
  --gap-grid:var(--space-lg);

  /* ---------- ukuran tata letak ---------- */
  --w-sidebar:236px; --h-topbar:52px; --w-content:1360px; --w-aside:330px; --w-login:400px;
  --h-input:35px; --h-map:230px; --h-map-sm:150px; --h-photo:92px;
  --w-login-hero:440px; --w-login-logo:140px; --pad-login:30px; --w-passtoggle:72px;
  --w-login-box-logo:210px;  /* logo lengkap di kotak Masuk (semua ukuran layar) */
  --w-login-box-logo-max:70%;/* batas lebar logo pada layar sempit */
  --w-login-mark:52px;       /* ikon logo di panel kiri halaman Masuk */
  --w-weeknav-label:150px;   /* label periode "12 – 17 Okt 2026" di Rencana kunjungan */
  --size-sso-logo:18px;

  /* ---------- ukuran & jarak di dalam komponen ----------
     Semua angka yang dulu tertulis di app.css. Ubah di sini untuk tema yang lebih
     rapat / lega tanpa menyentuh app.css. */
  --space-3xs:3px;          /* catatan kecil di bawah judul */
  --space-label:5px;        /* label -> isian, remah roti */
  --gap-tight:6px;          /* antar-butir kecil: legenda, chip, sel kalender */
  --gap-inline:10px;        /* antar-elemen sebaris: brand, filter, topbar */
  --gap-stack:10px;         /* antar-baris daftar ringkas */
  --gap-header:18px;        /* judul halaman -> konten */
  --gap-navgrp:14px; --gap-nav-item:4px;   /* jarak antar-menu di sidebar */
  --gap-totals:28px; --gap-trail:13px; --indent-trail:7px;
  --border-w-strong:2px;    /* tab aktif, pin, sel terpilih, garis jejak */
  --border-w-accent:3px;    /* penanda kiri item peringatan */
  --focus-offset:2px;
  --nudge-swatch:-1px;      /* penyelarasan kotak warna legenda dengan teks */

  --pad-brand:18px 18px 14px; --pad-brand-logo:3px; --pad-side-x:18px;
  --pad-nav-x:10px; --pad-nav-item:7px 10px;
  --pad-screen-top:22px; --pad-screen-top-sm:18px; --pad-screen-bottom-sm:40px;
  --pad-head-y:13px;        /* judul panel & kaki form */
  --pad-stat:13px 15px;
  --pad-th-y:9px; --pad-row-y:10px;
  --pad-chip:3px 9px; --pad-tab:9px 15px;
  --pad-btn-sm:6px 11px; --pad-btn-xs:3px var(--space-sm);
  --pad-rule:9px var(--space-md); --pad-tok:var(--space-xs) 9px; --pad-q:var(--space-md) 14px;
  --pad-cal-cell-y:9px; --pad-state-y:40px; --pad-alerts-y:6px;
  --pad-toast:10px var(--space-lg); --pad-banner:6px var(--space-lg);

  --size-avatar:28px; --size-pin:11px; --size-swatch:11px; --size-check:15px;
  --size-trail-dot:8px; --size-map-grid:34px; --size-map-ctrl:28px;
  --w-brand-logo:30px; --h-rail:9px; --w-rail-min:150px;
  --w-field-min:140px; --w-file-min:220px; --w-totals-min:280px;
  --w-trail-time:60px; --w-rule-prefix:34px; --w-qty:60px;
  --w-cal-min:560px; --w-cal-label:150px; --w-cal-label-sm:110px; --w-cal-cell-min:34px;
  --h-payload:160px;

  /* skeleton (kerangka saat memuat) */
  --sk-h-line:10px; --sk-h-text:14px; --sk-h-h1:24px; --sk-h-num:22px;
  --sk-w-crumb:140px; --sk-w-h1:260px; --sk-w-title:180px; --sk-w-num:70px; --sk-w-label:90px;

  /* lapisan (z-index) */
  --z-topbar:5; --z-toast:20; --z-scrim:25; --z-drawer:30; --z-banner:40; --z-progress:60; --z-skip:70;

  /* ---------- efek ---------- */
  --shadow-pin:0 1px 4px rgba(var(--shadow-rgb),.3);
  --shadow-pop:0 6px 24px rgba(var(--shadow-rgb),.25);
  --ring-focus:0 0 0 3px var(--c-brand-soft);
  --ring-error:0 0 0 3px var(--c-bad-soft);
  --shadow-card:0 1px 2px rgba(var(--shadow-rgb),.04),0 12px 32px rgba(var(--shadow-rgb),.08);
  --dur-progress:1.1s;       /* satu putaran animasi progress bar / layar awal */
  --delay-indicator:.15s;    /* indikator muat baru tampil bila lebih lama dari ini (anti-kedip) */
  --dur-splash-delay:.25s;   /* layar awal baru muncul bila pemeriksaan sesi lebih lama dari ini */
  --opacity-disabled:.6; --opacity-muted:.5;
  --dur-fast:.18s;
  --dur-shimmer:1.4s;        /* kecepatan kilau skeleton */
  --h-progress:3px;          /* tebal progress bar atas */
  --opacity-refreshing:.55;  /* data lama saat sedang dimuat ulang */
  --focus-w:2px;             /* tebal garis fokus keyboard */
  --w-dialog:440px;          /* lebar dialog konfirmasi */
  --w-viewer:960px;          /* lebar maks. pratinjau foto */
  --h-viewer:78vh;           /* tinggi maks. foto di pratinjau */
  --c-viewer-bg:rgba(var(--shadow-rgb),.92); /* latar di balik foto pratinjau */
  --c-viewer-scrim:rgba(var(--shadow-rgb),.75);
  --h-img-preview:96px;      /* tinggi pratinjau gambar produk */

  /* ---------- cetak / PDF (Unduh PDF) ---------- */
  --fs-print:9.5pt;          /* teks dasar dokumen */
  --fs-print-sm:8pt;         /* label, catatan, isi tabel padat */
  --fs-print-h1:15pt;        /* judul dokumen */
  --c-print-accent:var(--c-brand);       /* garis kop & judul panel */
  --c-print-head-bg:var(--c-surface-sunken);
  --gap-print:3.5mm;         /* jarak antar-blok */
  --pad-print-panel:2.5mm 3.5mm;
  --pad-print-cell:1.6mm 2.4mm;
  --w-print-logo:28mm;
  --h-print-photo:32mm;
  --border-print-accent:0.8mm;
  /* Dokumen PDF (template .print-doc) */
  --w-print-content:186mm;   /* lebar isi = A4 210mm - margin kiri & kanan @page (12 + 12). Ubah bersama @page. */
  --fs-print-h2:11pt;        /* judul section dokumen */
  --gap-print-sec:6mm;       /* jarak antar-section */
  --w-print-label:28mm;      /* kolom label pada tabel label-nilai */
  --w-print-totals:75mm;     /* lebar blok total order */
  --h-print-map:62mm;        /* tinggi peta validasi lokasi */
  --w-print-time:16mm;       /* kolom jam pada jejak kunjungan */
}

/* Ukuran & margin kertas cetak / PDF. @page tidak dapat membaca var(), jadi nilainya
   ditulis langsung di sini (tetap satu-satunya tempat nilai desain). Nomor halaman di kaki. */
@page{
  size:A4 portrait;
  margin:14mm 12mm 16mm;
  @bottom-right{content:counter(page) " / " counter(pages);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:8pt;color:#64788C}
}