/* =====================================================================
   FAC Trainer Performance & Commission Dashboard
   Style dasar — identitas warna: biru FAC, putih, abu-abu ringan
   File ini akan terus ditambah di tahap-tahap berikutnya (dashboard dll)
   ===================================================================== */

:root {
    --fac-blue: #0b4f9e;
    --fac-blue-dark: #073a76;
    --fac-blue-light: #e7f0fb;
    --fac-gray: #f4f6f9;
    --fac-gray-border: #e2e6ec;
    --fac-text: #2b2f38;
    --fac-white: #ffffff;
    --fac-success: #1e9e5a;
    --fac-warning: #e0a800;
    --fac-danger: #d64545;

    /* Palet warna KPI — tiap kategori data punya warna sendiri supaya
       dashboard terasa lebih hidup, tapi tetap satu keluarga warna
       dengan --fac-blue sebagai warna utama brand. */
    --kpi-trainer:    #0b4f9e;  /* biru FAC */
    --kpi-target:     #5b6472;  /* slate netral */
    --kpi-aktual:     #0e9f6e;  /* teal/hijau */
    --kpi-gap-pos:    #0e9f6e;
    --kpi-gap-neg:    #d64545;
    --kpi-achievement:#7c3aed;  /* ungu */
    --kpi-komisi:     #c8960c;  /* emas */
    --kpi-onboarding: #ea7c1f;  /* oranye */
    --kpi-presentasi: #d6336c;  /* magenta/pink */
    --kpi-meeting:    #0891b2;  /* cyan */
}

body {
    background-color: var(--fac-gray);
    color: var(--fac-text);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------
   HALAMAN LOGIN
   --------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fac-blue) 0%, var(--fac-blue-dark) 100%);
}

.login-card {
    background: var(--fac-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.login-card .brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-card .brand h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fac-blue);
    margin-bottom: 0;
}

.login-card .brand p {
    color: #8a92a3;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.btn-fac-primary {
    background-color: var(--fac-blue);
    border-color: var(--fac-blue);
    color: var(--fac-white);
    font-weight: 600;
}

.btn-fac-primary:hover {
    background-color: var(--fac-blue-dark);
    border-color: var(--fac-blue-dark);
    color: var(--fac-white);
}

/* ---------------------------------------------------------------
   LAYOUT UMUM (dipakai mulai tahap Dashboard)
   --------------------------------------------------------------- */
.fac-topbar {
    background: var(--fac-white);
    border-bottom: 1px solid var(--fac-gray-border);
}

.fac-sidebar {
    background: var(--fac-blue-dark);
    color: var(--fac-white);
    min-height: 100vh;
}

.fac-sidebar a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.fac-sidebar a:hover,
.fac-sidebar a.active {
    color: var(--fac-white);
    background: rgba(255,255,255,0.08);
}

.fac-card {
    background: var(--fac-white);
    border: 1px solid var(--fac-gray-border);
    border-radius: 10px;
}

.fac-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fac-blue);
}

@media (max-width: 768px) {
    .fac-kpi-value {
        font-size: 1.4rem;
    }
}

/* ---------------------------------------------------------------
   KARTU KPI BERWARNA (dashboard)
   Dipakai dengan: <div class="fac-card fac-kpi kpi-<warna> p-3 h-100">
   Warna diatur lewat variabel --kpi-c yang di-set oleh kelas kpi-*
   di bawah, lalu dipakai untuk garis aksen atas, ikon bulat, dan
   angka KPI-nya.
   --------------------------------------------------------------- */
.fac-kpi {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--kpi-c, var(--fac-blue));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fac-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 30, 60, 0.08);
}

.fac-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--kpi-c, var(--fac-blue)) 14%, white);
    color: var(--kpi-c, var(--fac-blue));
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.fac-kpi .fac-kpi-value {
    color: var(--kpi-c, var(--fac-blue));
}

.kpi-trainer     { --kpi-c: var(--kpi-trainer); }
.kpi-target      { --kpi-c: var(--kpi-target); }
.kpi-aktual      { --kpi-c: var(--kpi-aktual); }
.kpi-gap-pos     { --kpi-c: var(--kpi-gap-pos); }
.kpi-gap-neg     { --kpi-c: var(--kpi-gap-neg); }
.kpi-achievement { --kpi-c: var(--kpi-achievement); }
.kpi-komisi      { --kpi-c: var(--kpi-komisi); }
.kpi-onboarding  { --kpi-c: var(--kpi-onboarding); }
.kpi-presentasi  { --kpi-c: var(--kpi-presentasi); }
.kpi-meeting     { --kpi-c: var(--kpi-meeting); }

/* Badge kecil pelengkap di dalam kartu KPI (mis. "12 entri") */
.fac-kpi-subbadge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kpi-c, var(--fac-blue)) 12%, white);
    color: var(--kpi-c, var(--fac-blue));
    margin-top: 0.35rem;
}

/* ---------------------------------------------------------------
   GRID JADWAL TRAINER (jadwal.php) — slot kosong vs terisi
   --------------------------------------------------------------- */
.fac-jadwal-grid th,
.fac-jadwal-grid td {
    white-space: nowrap;
}

.fac-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    cursor: default;
}

.fac-slot-kosong {
    background: color-mix(in srgb, var(--kpi-gap-pos) 18%, white);
    color: var(--kpi-gap-pos);
    border: 1px dashed var(--kpi-gap-pos);
}

.fac-slot-terisi.tipe-training    { background: var(--kpi-trainer); }
.fac-slot-terisi.tipe-onboarding  { background: var(--kpi-onboarding); }
.fac-slot-terisi.tipe-presentasi  { background: var(--kpi-presentasi); }
.fac-slot-terisi.tipe-meeting     { background: var(--kpi-meeting); }

/* Slot terblokir: trainer sudah FULL (7 jam) atau jeda wajib setelah
   Presentasi/Meeting — tidak bisa diisi jadwal baru. */
.fac-slot-blokir {
    background: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--kpi-gap-neg) 25%, white),
        color-mix(in srgb, var(--kpi-gap-neg) 25%, white) 4px,
        color-mix(in srgb, var(--kpi-gap-neg) 10%, white) 4px,
        color-mix(in srgb, var(--kpi-gap-neg) 10%, white) 8px
    );
    color: var(--kpi-gap-neg);
    border: 1px solid var(--kpi-gap-neg);
}