/* =============================================================================
   TransMon — token desain & lapisan tema.
   Menggantikan premium-ui.css (glassmorphism, hover-lift, gradien pastel).

   Arah: "meja kerja transmisi", bukan kartu-kartu melayang.
   - Satu bidang kerja (panel hangat), permukaan dibatasi GARIS RAMBUT, bukan
     bayangan. Bayangan hanya untuk yang benar-benar mengambang (modal/dropdown).
   - Warna dari identitas TVRI: biru #14479E, merah #C4161C. BUKAN Google Blue
     (#1a73e8) atau Bootstrap Blue (#0d6efd).
   - Angka terukur pakai IBM Plex Mono tabular — kolom SLA/metering berbaris rapi.
   - Huruf layar: Plus Jakarta Sans (geometrik, sekerabat Gotham yang dipakai PDF).
     Lisensi webfont Gotham terpisah & mahal → JANGAN pakai Gotham di layar.

   Semua warna di app HARUS lewat token di sini. Jangan tulis hex mentah di view.
   ============================================================================= */

/* ── 1. Token ─────────────────────────────────────────────────────────────── */

:root {
    /* Bidang & permukaan */
    --tx-panel:        #F1F0EC;   /* latar aplikasi — kertas kerja, bukan biru-abu */
    --tx-surface:      #FFFFFF;   /* permukaan kartu, tabel, topbar, sidebar */
    --tx-surface-2:    #F7F6F2;   /* kepala tabel, baris belang, input mati */
    --tx-hairline:     #DAD7D0;   /* garis pembatas utama */
    --tx-hairline-2:   #E9E6DF;   /* pembatas dalam (antar-baris) */

    /* Tinta */
    --tx-ink:          #16181C;   /* teks utama */
    --tx-ink-2:        #5C6067;   /* teks sekunder */
    /* Dulu #93979E — 2,93:1 terhadap putih, jauh di bawah WCAG AA (4,5:1). Ia
       menyalurkan .text-muted (keterangan formulir, cap waktu) dan ::placeholder,
       yang dibaca petugas di HP di bawah sinar matahari lokasi pemancar. Nilai
       sekarang lulus di KEDUA latar: 5,05:1 di atas --tx-surface (#FFFFFF) dan
       4,67:1 di atas --tx-surface-2 (#F7F6F2, baris belang & kepala tabel).
       ⚠️ Kandidat #6E7278 tampak cukup terhadap putih (4,84) tapi hanya 4,47 di
       atas baris belang — nyaris lulus bukan lulus. Ukur terhadap keduanya. */
    --tx-ink-3:        #6B6F75;   /* teks mati, label, placeholder */

    /* Aksen & keadaan — isian (latar tombol/lencana) */
    --tx-biru:         #14479E;
    --tx-biru-tua:     #0E3475;
    --tx-merah:        #C4161C;
    --tx-merah-tua:    #9C1116;
    --tx-hijau:        #17714B;
    --tx-hijau-tua:    #115A3B;
    --tx-amber:        #D98A00;   /* isian: teks gelap di atasnya */
    --tx-amber-tua:    #B37200;
    --tx-ungu:         #6F42C1;   /* kategori ke-5 — Shift III jadwal piket */

    /* Teks di atas ISIAN berwarna (bukan di atas panel). Nilainya SAMA di kedua mode:
       kontrasnya berasal dari isiannya, bukan dari tema. Jangan pakai --tx-ink/--tx-ink-3
       di sini — keduanya membalik saat mode gelap, dan teks di atas isian ikut hilang.
         --tx-teks-isian      → di atas isian GELAP  (biru, merah, hijau, ungu)
         --tx-teks-isian-tua  → di atas isian TERANG (amber, abu) — amber tak terbaca putih */
    --tx-teks-isian:     #FFFFFF;
    --tx-teks-isian-tua: #16181C;

    /* Triplet RGB dari token di atas — supaya rgba(...) bisa dibangun TANPA menyalin
       hex ke daftar kedua (dipakai keyframes CSS & Chart.js). Ubah warnanya di atas,
       lalu samakan di sini; tetap satu sumber, bukan dua palet. */
    --tx-biru-rgb:   20, 71, 158;
    --tx-merah-rgb:  196, 22, 28;
    --tx-hijau-rgb:  23, 113, 75;
    --tx-amber-rgb:  217, 138, 0;
    --tx-ungu-rgb:   111, 66, 193;
    --tx-ink-3-rgb:  107, 111, 117;

    /* Bayangan & scrim. SELALU gelap di kedua tema — bayangan hitam di atas panel
       gelap tetap masuk akal; membalikkannya jadi putih akan tampak seperti cahaya. */
    --tx-bayang-rgb: 0, 0, 0;

    /* Konsol NOC (ticker) — gaya terminal, SENGAJA gelap di kedua tema.
       Dulu dipaku #111/#0f0/#333 di dashboard.php. Hijau fosfor dinaikkan
       kontrasnya dari #0f0 murni agar tak menyakitkan mata saat dibaca lama. */
    --tx-noc-latar:  #111318;
    --tx-noc-teks:   #3BE07A;
    --tx-noc-garis:  #2A2E36;

    /* Aksen & keadaan — teks di atas panel (versi lebih pekat agar terbaca) */
    --tx-biru-teks:    #14479E;
    --tx-merah-teks:   #A9121A;
    --tx-hijau-teks:   #12603F;
    --tx-amber-teks:   #8A5000;

    /* Aksen & keadaan — tint lembut (ikon, sorotan, latar lencana tipis) */
    --tx-biru-lembut:  #E5E9F3;
    --tx-merah-lembut: #FAE8E8;
    --tx-hijau-lembut: #E3EFE9;
    --tx-amber-lembut: #FBF0DC;
    --tx-abu-lembut:   #ECEAE5;

    /* Huruf */
    --tx-font-ui:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tx-font-angka:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bentuk — sudut tegas, bukan pil */
    --tx-radius:       6px;
    --tx-radius-kecil: 4px;
}

html[data-bs-theme="dark"] {
    --tx-panel:        #131519;
    --tx-surface:      #1A1D22;
    --tx-surface-2:    #22262C;
    --tx-hairline:     #31353C;
    --tx-hairline-2:   #272B31;

    --tx-ink:          #E8E9EB;
    --tx-ink-2:        #A2A6AD;
    /* Dulu #71757C — 3,65:1, gagal AA sama seperti kembarannya di mode terang.
       Sekarang 5,14:1 di atas --tx-surface (#1A1D22) dan 4,62:1 di atas
       --tx-surface-2 (#22262C). Tetap lebih redup dari --tx-ink-2, jadi urutan
       ink > ink-2 > ink-3 tidak terbalik. */
    --tx-ink-3:        #8A8E95;

    --tx-biru:         #2A5FC0;
    --tx-biru-tua:     #1F4A9B;
    --tx-merah:        #CE3239;
    --tx-merah-tua:    #AB232A;
    --tx-hijau:        #1D8759;
    --tx-hijau-tua:    #166D48;
    --tx-amber:        #D98A00;
    --tx-amber-tua:    #B37200;
    --tx-ungu:         #8B6AD6;   /* dinaikkan terangnya agar terbaca di latar gelap */

    /* TIDAK dibalik di mode gelap — teks di atas isian berwarna ikut isiannya, bukan tema. */
    --tx-teks-isian:     #FFFFFF;
    --tx-teks-isian-tua: #16181C;

    --tx-biru-rgb:   42, 95, 192;
    --tx-merah-rgb:  206, 50, 57;
    --tx-hijau-rgb:  29, 135, 89;
    --tx-amber-rgb:  217, 138, 0;
    --tx-ungu-rgb:   139, 106, 214;
    --tx-ink-3-rgb:  138, 142, 149;

    --tx-biru-teks:    #7FA6E8;
    --tx-merah-teks:   #EE868B;
    --tx-hijau-teks:   #5FC298;
    --tx-amber-teks:   #E0A63F;

    --tx-biru-lembut:  #1C2740;
    --tx-merah-lembut: #33191B;
    --tx-hijau-lembut: #163025;
    --tx-amber-lembut: #33270F;
    --tx-abu-lembut:   #262A30;
}

/* ── 2. Jembatan ke Bootstrap ─────────────────────────────────────────────────
   Bootstrap 5.3 menurunkan .text-*/.bg-*/.border-* dari triplet RGB di :root,
   tetapi .btn-* menuliskan hex-nya langsung per-kelas → dua-duanya harus dipetakan.
   Triplet RGB ditulis manual (CSS tak bisa mengurai hex jadi channel). */

:root {
    --bs-font-sans-serif:      var(--tx-font-ui);
    --bs-body-font-family:     var(--tx-font-ui);
    --bs-body-bg:              var(--tx-panel);
    --bs-body-color:           var(--tx-ink);
    --bs-secondary-color:      var(--tx-ink-2);
    --bs-tertiary-bg:          var(--tx-surface-2);
    --bs-border-color:         var(--tx-hairline);
    --bs-border-radius:        var(--tx-radius);
    --bs-border-radius-sm:     var(--tx-radius-kecil);
    --bs-border-radius-lg:     var(--tx-radius);

    --bs-primary:              #14479E;
    --bs-primary-rgb:          20, 71, 158;
    --bs-danger-rgb:           196, 22, 28;
    --bs-success-rgb:          23, 113, 75;
    --bs-warning-rgb:          217, 138, 0;
    --bs-info-rgb:             92, 96, 103;

    --bs-primary-bg-subtle:    var(--tx-biru-lembut);
    --bs-danger-bg-subtle:     var(--tx-merah-lembut);
    --bs-success-bg-subtle:    var(--tx-hijau-lembut);
    --bs-warning-bg-subtle:    var(--tx-amber-lembut);

    --bs-primary-text-emphasis: var(--tx-biru-teks);
    --bs-danger-text-emphasis:  var(--tx-merah-teks);
    --bs-success-text-emphasis: var(--tx-hijau-teks);
    --bs-warning-text-emphasis: var(--tx-amber-teks);

    --bs-link-color:           var(--tx-biru-teks);
    --bs-link-color-rgb:       20, 71, 158;
    --bs-link-hover-color:     var(--tx-biru-tua);
}

html[data-bs-theme="dark"] {
    --bs-body-bg:              var(--tx-panel);
    --bs-body-color:           var(--tx-ink);
    --bs-border-color:         var(--tx-hairline);
    --bs-primary-rgb:          42, 95, 192;
    --bs-danger-rgb:           206, 50, 57;
    --bs-success-rgb:          29, 135, 89;
    --bs-warning-rgb:          217, 138, 0;
    --bs-info-rgb:             162, 166, 173;
    --bs-link-color-rgb:       127, 166, 232;
    --bs-link-hover-color:     #A8C3F0;
}

/* Teks berwarna dibaca di atas panel, jadi pakai varian -teks yang lebih pekat —
   bukan warna isian tombol (mis. #D98A00 amber tak terbaca sebagai teks). */
.text-primary { color: var(--tx-biru-teks) !important; }
.text-danger  { color: var(--tx-merah-teks) !important; }
.text-success { color: var(--tx-hijau-teks) !important; }
.text-warning { color: var(--tx-amber-teks) !important; }
.text-muted   { color: var(--tx-ink-3) !important; }

/* Aksen ungu — kategori ke-5, dipakai ikon judul & deret grafik Genset/Solar.
   ⚠️ Untuk IKON/aksen, bukan teks: di mode gelap rasionya 4,13 terhadap panel
   (lulus 3:1 untuk elemen grafis, di bawah 4,5 untuk teks). Sebelum ada kelas ini
   `dashboard.php` memakai `.text-purple` yang TIDAK PERNAH terdefinisi di mana pun —
   ikonnya diam-diam mewarisi warna induk, tanpa satu pun gejala. */
.text-ungu    { color: var(--tx-ungu) !important; }

/* Bootstrap 5 tak punya utilitas garis putus-putus, sementara kotak "belum ada
   catatan" di form AC memang dirancang begitu (`border border-2 border-dashed`).
   Tanpa kelas ini garisnya tampil UTUH — beda halus yang tak pernah bergejala. */
.border-dashed { border-style: dashed !important; }

/* ── 3. Tombol ────────────────────────────────────────────────────────────── */

.btn {
    --bs-btn-border-radius: var(--tx-radius);
    font-weight: 500;
}

/* Pil dinormalkan: standar tombol laporan sudah sudut tegas — jangan ada
   dua bahasa bentuk di layar yang sama. */
.btn.rounded-pill { border-radius: var(--tx-radius) !important; }

.btn-primary {
    --bs-btn-bg: var(--tx-biru);            --bs-btn-border-color: var(--tx-biru);
    --bs-btn-hover-bg: var(--tx-biru-tua);  --bs-btn-hover-border-color: var(--tx-biru-tua);
    --bs-btn-active-bg: var(--tx-biru-tua); --bs-btn-active-border-color: var(--tx-biru-tua);
    --bs-btn-disabled-bg: var(--tx-biru);   --bs-btn-disabled-border-color: var(--tx-biru);
    --bs-btn-focus-shadow-rgb: 20, 71, 158;
}
.btn-outline-primary {
    --bs-btn-color: var(--tx-biru-teks);    --bs-btn-border-color: var(--tx-biru);
    --bs-btn-hover-bg: var(--tx-biru);      --bs-btn-hover-border-color: var(--tx-biru);
    --bs-btn-active-bg: var(--tx-biru-tua); --bs-btn-active-border-color: var(--tx-biru-tua);
    --bs-btn-disabled-color: var(--tx-biru-teks);
    --bs-btn-focus-shadow-rgb: 20, 71, 158;
}
.btn-danger {
    --bs-btn-bg: var(--tx-merah);            --bs-btn-border-color: var(--tx-merah);
    --bs-btn-hover-bg: var(--tx-merah-tua);  --bs-btn-hover-border-color: var(--tx-merah-tua);
    --bs-btn-active-bg: var(--tx-merah-tua); --bs-btn-active-border-color: var(--tx-merah-tua);
    --bs-btn-disabled-bg: var(--tx-merah);   --bs-btn-disabled-border-color: var(--tx-merah);
    --bs-btn-focus-shadow-rgb: 196, 22, 28;
}
.btn-outline-danger {
    --bs-btn-color: var(--tx-merah-teks);    --bs-btn-border-color: var(--tx-merah);
    --bs-btn-hover-bg: var(--tx-merah);      --bs-btn-hover-border-color: var(--tx-merah);
    --bs-btn-active-bg: var(--tx-merah-tua); --bs-btn-active-border-color: var(--tx-merah-tua);
    --bs-btn-disabled-color: var(--tx-merah-teks);
    --bs-btn-focus-shadow-rgb: 196, 22, 28;
}
.btn-success {
    --bs-btn-bg: var(--tx-hijau);            --bs-btn-border-color: var(--tx-hijau);
    --bs-btn-hover-bg: var(--tx-hijau-tua);  --bs-btn-hover-border-color: var(--tx-hijau-tua);
    --bs-btn-active-bg: var(--tx-hijau-tua); --bs-btn-active-border-color: var(--tx-hijau-tua);
    --bs-btn-disabled-bg: var(--tx-hijau);   --bs-btn-disabled-border-color: var(--tx-hijau);
    --bs-btn-focus-shadow-rgb: 23, 113, 75;
}
.btn-outline-success {
    --bs-btn-color: var(--tx-hijau-teks);    --bs-btn-border-color: var(--tx-hijau);
    --bs-btn-hover-bg: var(--tx-hijau);      --bs-btn-hover-border-color: var(--tx-hijau);
    --bs-btn-active-bg: var(--tx-hijau-tua); --bs-btn-active-border-color: var(--tx-hijau-tua);
    --bs-btn-disabled-color: var(--tx-hijau-teks);
    --bs-btn-focus-shadow-rgb: 23, 113, 75;
}
.btn-warning {
    --bs-btn-bg: var(--tx-amber);            --bs-btn-border-color: var(--tx-amber);
    --bs-btn-hover-bg: var(--tx-amber-tua);  --bs-btn-hover-border-color: var(--tx-amber-tua);
    --bs-btn-active-bg: var(--tx-amber-tua); --bs-btn-active-border-color: var(--tx-amber-tua);
    --bs-btn-disabled-bg: var(--tx-amber);   --bs-btn-disabled-border-color: var(--tx-amber);
    --bs-btn-focus-shadow-rgb: 217, 138, 0;
}
.btn-outline-warning {
    --bs-btn-color: var(--tx-amber-teks);    --bs-btn-border-color: var(--tx-amber);
    --bs-btn-hover-bg: var(--tx-amber);      --bs-btn-hover-border-color: var(--tx-amber);
    --bs-btn-active-bg: var(--tx-amber-tua); --bs-btn-active-border-color: var(--tx-amber-tua);
    --bs-btn-disabled-color: var(--tx-amber-teks);
    --bs-btn-focus-shadow-rgb: 217, 138, 0;
}
.btn-outline-secondary {
    --bs-btn-color: var(--tx-ink-2);         --bs-btn-border-color: var(--tx-hairline);
    --bs-btn-hover-bg: var(--tx-surface-2);  --bs-btn-hover-border-color: var(--tx-ink-3);
    --bs-btn-hover-color: var(--tx-ink);
    --bs-btn-active-bg: var(--tx-abu-lembut);--bs-btn-active-border-color: var(--tx-ink-3);
    --bs-btn-active-color: var(--tx-ink);
}

/* ── 4. Permukaan: garis rambut, bukan bayangan ───────────────────────────────
   Kartu tak lagi "melayang". Bayangan disisakan untuk yang memang di atas
   halaman (modal, dropdown, sidebar mengambang di HP). */

/* !important di sini disengaja: puluhan view memaku `style="border-radius:14px"`
   dan `.shadow-sm` satu per satu. Satu aturan token mengalahkan improvisasi itu
   sekaligus — kalau tidak, radius kartu tetap tiga macam di layar yang sama. */
.card,
.dash-stat-card {
    background: var(--tx-surface);
    border: 1px solid var(--tx-hairline) !important;
    border-radius: var(--tx-radius) !important;
    box-shadow: none !important;
}

.card-header {
    background: var(--tx-surface);
    border-bottom: 1px solid var(--tx-hairline-2);
    border-radius: var(--tx-radius) var(--tx-radius) 0 0 !important;
    font-weight: 600;
}

.modal-content  { border: 1px solid var(--tx-hairline); border-radius: var(--tx-radius); }
.dropdown-menu  { border: 1px solid var(--tx-hairline); border-radius: var(--tx-radius); }

/* ── 5. Angka terukur ─────────────────────────────────────────────────────────
   Jam siaran, tegangan, arus, persentase: satu lebar per digit supaya kolom
   berbaris dan selisih terbaca dari bentuknya, bukan dari membaca angkanya. */

.table,
.badge,
.dash-stat-value,
.stat-details h3 { font-variant-numeric: tabular-nums; }

.tx-angka,
.dash-stat-value,
.stat-details h3 {
    font-family: var(--tx-font-angka);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── 6. Tabel ─────────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: var(--tx-surface);
    --bs-table-border-color: var(--tx-hairline-2);
    --bs-table-hover-bg: var(--tx-surface-2);
}
.table > thead th,
.table-light > :not(caption) > * > * {
    background-color: var(--tx-surface-2);
    color: var(--tx-ink-2);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-color: var(--tx-hairline);
}

/* ── 7. Formulir ──────────────────────────────────────────────────────────── */

.form-control,
.form-select {
    border-radius: var(--tx-radius);
    border-color: var(--tx-hairline);
    background-color: var(--tx-surface);
    color: var(--tx-ink);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--tx-biru);
    box-shadow: 0 0 0 3px rgba(20, 71, 158, 0.14);
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--tx-biru-teks);
    box-shadow: 0 0 0 3px rgba(127, 166, 232, 0.18);
}
.form-control::placeholder { color: var(--tx-ink-3); }
.form-check-input:checked {
    background-color: var(--tx-biru);
    border-color: var(--tx-biru);
}
.form-label {
    color: var(--tx-ink-2);
    font-weight: 600;
    font-size: 0.82rem;
}

/* ── 8. Paginasi & bilah kemajuan ─────────────────────────────────────────── */

.page-item.active .page-link {
    background-color: var(--tx-biru);
    border-color: var(--tx-biru);
}
.page-link { color: var(--tx-biru-teks); }
.progress  { background-color: var(--tx-abu-lembut); }
.progress-bar { --bs-progress-bar-bg: var(--tx-biru); }

/* ── 9. Bilah gulir ───────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--tx-hairline);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--tx-ink-3); }

/* ── 10. Lini masa audit ──────────────────────────────────────────────────── */

.timeline { position: relative; padding-left: 0; list-style: none; }
.timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 20px;
    width: 1px;
    background-color: var(--tx-hairline);
}
.timeline-item { position: relative; margin-bottom: 1.25rem; padding-left: 50px; }
.timeline-icon {
    position: absolute;
    left: 4px; top: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    font-size: 1.05rem;
    z-index: 10;
    box-shadow: 0 0 0 4px var(--tx-panel);
}
.timeline-panel { position: relative; }

/* ── 11. Kerangka muat DataTables ─────────────────────────────────────────────
   Balok tenang yang menunjukkan BENTUK tabel yang sedang datang. Tanpa kilau
   menyapu (shimmer) — itu dekorasi, dan menarik mata ke tempat yang salah. */

div.dataTables_processing {
    font-size: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    left: 0 !important;
    top: 42px !important;
    margin: 0 !important;
    transform: none !important;
    padding: 0 8px !important;
    z-index: 5;
}
div.dataTables_processing::before {
    content: "";
    display: block;
    height: 176px;
    border-radius: var(--tx-radius);
    background-image: repeating-linear-gradient(
        180deg,
        rgba(128, 132, 140, 0.14) 0 30px,
        transparent 30px 44px
    );
    animation: tx-memuat 1.6s ease-in-out infinite;
}
@keyframes tx-memuat {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Ikon tombol muat ulang berputar selama permintaan berjalan (topbar). */
.spin-once { animation: tx-putar .8s linear infinite; }
@keyframes tx-putar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}