/* =====================================================================
   Tesys UI — TOKENS + komponen tambahan
   ---------------------------------------------------------------------
   File ini AMAN ditempel ke layout lama (layouts/app.blade.php).
   Isinya hanya variabel warna/radius/shadow + komponen baru yang TIDAK
   bertabrakan dengan class AdminLTE/Bootstrap (.shell/.sidebar/.content
   milik mockup sengaja TIDAK disertakan di sini).

   Ini SATU-SATUNYA tempat nilai warna/radius/jarak/bayangan didefinisikan.
   Lapisan sesudahnya (components, compat, pages, shell) hanya memakai
   var(--…), jadi mengubah satu nilai di sini berlaku ke seluruh modul.

   Urutan pemuatan di layouts/app.blade.php:
     base -> tesys-ui -> TOKENS (file ini) -> components -> compat
          -> pages -> shell -> motion
   ===================================================================== */

:root {

    /* =================================================================
       1. PERMUKAAN & TEKS
       Latar aplikasi abu sangat terang, kartu putih, garis tipis.
       Kontras teks utama 15.8:1 di atas putih — nyaman untuk layar kerja
       seharian dan tetap lolos AA pada ukuran 11–13px yang dipakai ERP.
       ================================================================= */
    --bg:            #f7f8fa;
    --surface:       #ffffff;
    --surface-2:     #f2f4f7;   /* isian lembut: header tabel, chip, hover */
    --surface-3:     #e9ecf2;   /* isian tekan / pembatas blok             */
    --border:        #e5e7eb;
    --border-strong: #d2d7e0;

    --text:       #171923;      /* judul & angka                          */
    --text-dim:   #4a5061;      /* teks sekunder                          */
    --text-faint: #6b7280;      /* keterangan, label kolom, placeholder   */

    /* Label seksi sidebar (OVERVIEW, WORKFLOW, ...). Nilai bawaan di
       tesys-ui.css terlalu pudar untuk huruf 9,5px; disamakan dengan
       --text-faint agar lolos WCAG AA. */
    --sidebar-text-dim: #6b7280;

    /* Charcoal identitas TESYS — avatar, lambang, badge gelap. */
    --charcoal:   #22262f;
    --charcoal-2: #363b47;

    /* =================================================================
       2. MERAH TESYS
       Satu-satunya warna bermuatan "aksi". Tidak dipakai sebagai hiasan.
       #d71920 pada putih = 5.2:1; putih di atasnya juga 5.2:1, jadi aman
       dipakai dua arah (teks merah maupun tombol merah).
       ================================================================= */
    --accent:      #d71920;
    --accent-dark: #b51218;
    --accent-soft: #e9757a;     /* garis tepi / keadaan hover ringan      */
    --accent-tint:   #fdecec;   /* latar chip & menu aktif                */
    --accent-tint-2: #f9d9da;   /* garis tepi di atas latar tint          */
    --accent-text: #b51218;     /* teks merah di atas tint (6.9:1)        */
    --accent-ring: rgba(215, 25, 32, .18);

    /* =================================================================
       3. WARNA SEMANTIK
       Enam arti, bukan sebelas warna. Setiap pasangan teks/latar sudah
       dicek >= 4.5:1 sehingga badge kecil tetap terbaca.

         merah  = kritis / ditolak        kuning = menunggu
         hijau  = selesai / disetujui     biru   = informasi
         abu    = draft / nonaktif        ungu   = analitis / khusus
       ================================================================= */
    --success: #067647;  --success-bg: #e6f6ee;
    --warning: #92400e;  --warning-bg: #fef3c7;
    --orange:  #b54708;  --orange-bg:  #feecdc;
    --danger:  #b42318;  --danger-bg:  #fee9e7;
    --info:    #175cd3;  --info-bg:    #eaf1fe;
    --purple:  #6941c6;  --purple-bg:  #f2eefd;

    /* --primary dipakai .badge-primary: biru = informasi, disamakan
       dengan --info supaya tidak ada dua nada biru yang bersaing. */
    --primary: #175cd3;  --primary-bg: #eaf1fe;

    /* Abu = draft / nonaktif. */
    --darkbadge: #344054; --darkbadge-bg: #eaecf0;

    /* =================================================================
       4. RADIUS
       Tombol & input 8 - kartu 12 - drawer & modal 16 - avatar bulat.
       Nilainya sengaja kecil: bidang kerja padat data terasa lebih
       presisi dengan sudut tegas daripada sudut membulat besar.
       ================================================================= */
    --radius-sm:   8px;    /* tombol, input, chip, menu item */
    --radius-md:   12px;   /* kartu, panel, dropdown         */
    --radius-lg:   16px;   /* drawer, modal, command palette */
    --radius-pill: 999px;

    /* =================================================================
       5. BAYANGAN
       Hanya untuk elemen yang benar-benar mengambang (modal, drawer,
       dropdown, popup). Kartu biasa memakai garis tepi, bukan bayangan —
       halaman jadi tenang dan hierarki tetap terbaca.
       ================================================================= */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 10px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 8px rgba(16, 24, 40, .05), 0 12px 24px rgba(16, 24, 40, .08);
    --shadow-lg: 0 8px 16px rgba(16, 24, 40, .07), 0 24px 48px rgba(16, 24, 40, .12);
    --shadow-accent: 0 1px 2px rgba(215, 25, 32, .16), 0 6px 14px rgba(215, 25, 32, .16);

    /* Kurva & durasi animasi — satu sumber supaya gerakan terasa seragam. */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: .14s;
    --dur: .22s;
    --dur-slow: .36s;

    /* =================================================================
       6. SKALA JARAK — kelipatan 4px
       4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48. Dipakai untuk padding
       komponen dan jarak antar blok supaya ritmenya sama di semua modul.
       ================================================================= */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px;

    /* =================================================================
       7. TIPOGRAFI
       Ukuran dipilih per PERAN, bukan per halaman; bobot mengikuti
       tingkatannya: judul 700, seksi 600, label 500, isi 400.
       ================================================================= */
    --fs-page:    19px;    /* judul halaman di topbar        */
    --fs-section: 13.5px;  /* judul kartu / seksi            */
    --fs-body:    13px;    /* teks isi                       */
    --fs-label:   11.5px;  /* label field, header tabel      */
    --fs-caption: 10.5px;  /* keterangan, meta, status kecil */
    --fs-data:    12.5px;  /* angka di tabel                 */

    --fw-heading: 700;
    --fw-section: 600;
    --fw-label:   500;
    --fw-body:    400;

    /* =================================================================
       8. JEMBATAN TOKEN LAMA (navy + amber)
       tesys-ui-base.css masih mendefinisikan --navy/--amber, dan puluhan
       blade memakainya lewat var(). Karena file ini dimuat SESUDAHNYA,
       definisi di sini menang — semua pemakaian lama ikut palet baru
       tanpa perlu menyunting blade satu per satu.
       ================================================================= */
    --navy:         #22262f;
    --navy-mid:     #363b47;
    --navy-lt:      #ffffff;
    --amber:        #d71920;
    --amber-dk:     #b51218;
    --amber-tint:   #fdecec;
    --amber-border: #f9d9da;
    --text-muted:   #6b7280;
    --border-soft:  #e5e7eb;
    --body-bg:      #f7f8fa;
    --card-bg:      #ffffff;
}

/* ------------------------------------------------------------ SCROLLBAR */
body.tesys-ui * { scrollbar-width: thin; scrollbar-color: #cdd2dc transparent; }
body.tesys-ui *::-webkit-scrollbar { width: 9px; height: 9px; }
body.tesys-ui *::-webkit-scrollbar-track { background: transparent; }
body.tesys-ui *::-webkit-scrollbar-thumb {
    background-color: #d2d7e0; border-radius: 999px;
    border: 2.5px solid transparent; background-clip: content-box;
    transition: background-color .2s ease;
}
body.tesys-ui *::-webkit-scrollbar-thumb:hover { background-color: #b3bac6; }
body.tesys-ui *::-webkit-scrollbar-corner { background: transparent; }

/* ----------------------------------------------------------- STAT CARDS */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: 11px;
    transition: border-color var(--dur, .22s) ease;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.stat-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: var(--fw-heading, 700); line-height: 1.15; }
.stat-lbl { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }

/* ------------------------------------------- STAGE STRIP (status counts) */
.stage-strip { display: flex; gap: 0; }
.stage-item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; padding: 0 4px; background: none; border: none; font-family: inherit; cursor: pointer;
}
.stage-item::before {
    content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
    background: var(--border); z-index: 0;
}
.stage-item:first-child::before { display: none; }
.stage-num {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: var(--fw-heading, 700); font-size: 11.5px; z-index: 1; font-family: "Plus Jakarta Sans", sans-serif;
    transition: transform .15s ease;
}
.stage-item:hover .stage-num { transform: scale(1.08); }
.stage-lbl { font-size: 9.7px; color: var(--text-dim); text-align: center; font-weight: 600; line-height: 1.2; }

/* ---------------------------------------------------------------- TOAST */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: 90vw; }
.toast {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 13px 14px; display: flex; gap: 10px; align-items: flex-start;
    opacity: 0; transform: translateX(16px); transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.toast-title { font-size: 12.5px; font-weight: var(--fw-section, 600); }
.toast-msg { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.toast-success .toast-ic { background: var(--success-bg); color: var(--success); }
.toast-info .toast-ic { background: var(--info-bg); color: var(--info); }
.toast-error .toast-ic { background: var(--danger-bg); color: var(--danger); }

/* --------------------------------------------------------- EMPTY STATE */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; gap: 9px; color: var(--text-faint); }
.empty-state .et { font-size: 12.5px; font-weight: var(--fw-section, 600); color: var(--text); }
.empty-state .ed { font-size: 11.5px; max-width: 280px; }

/* ------------------------------------------------------------- SKELETON */
@keyframes tesys-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400px 100%; animation: tesys-shimmer 1.3s ease infinite;
}
.sk-line { height: 11px; margin-bottom: 8px; }

/* --------------------------------------------------------- KEY/VALUE ROW */
.kv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: none; }
.kv-row span:first-child { color: var(--text-faint); }

/* ----------------------------------------------------------- UTILITIES */
.num { font-variant-numeric: tabular-nums; }
.tname { font-weight: var(--fw-section, 600); }
.tsub { color: var(--text-faint); font-size: 10.5px; }