/* =============================================================
   SIABSEN PKL - Tema white-label
   Warna utama & latar bisa diubah admin lewat menu Pengaturan.
   Nilai di :root sini hanya DEFAULT; header tiap halaman menimpa
   --tefa-blue / --tefa-blue-dark / --tefa-bg sesuai pengaturan.
   ============================================================= */

:root {
    --tefa-blue: #E6007E;       /* warna utama (default; ditimpa dari Pengaturan) */
    --tefa-blue-dark: #9C0057;  /* varian gelap untuk gradasi */
    --tefa-green: #198754;      /* warna aksen sekunder (status/grafik) */
    --tefa-bg: #f4f7fb;
}

body {
    background-color: var(--tefa-bg);
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* ---------------- Override warna utama Bootstrap agar sesuai logo ---------------- */
.btn-primary {
    background-color: var(--tefa-blue) !important;
    border-color: var(--tefa-blue) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tefa-blue-dark) !important;
    border-color: var(--tefa-blue-dark) !important;
}
.btn-outline-primary {
    color: var(--tefa-blue) !important;
    border-color: var(--tefa-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tefa-blue) !important;
    border-color: var(--tefa-blue) !important;
}
.text-primary { color: var(--tefa-blue) !important; }
.bg-primary { background-color: var(--tefa-blue) !important; }
.nav-pills .nav-link.active { background-color: var(--tefa-blue) !important; }
a { color: var(--tefa-blue); }

/* ---------------- Login Page ---------------- */
.login-page {
    background: linear-gradient(135deg, var(--tefa-blue), var(--tefa-blue-dark));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrapper { width: 100%; max-width: 400px; padding: 15px; }
.login-card { border-radius: 16px; }
.login-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* ---------------- Layout lama: dipakai di area Siswa & Guru Sekolah ---------------- */
.wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: #fff;
    border-right: 1px solid #e9ecef;
    min-height: 100vh;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 1030;
    transition: margin-left .3s;
}
.sidebar .brand {
    padding: 1.1rem 1rem;
    font-weight: 700;
    color: var(--tefa-blue);
    border-bottom: 1px solid #eee;
    display: flex; align-items: center; gap: .5rem;
}
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.sidebar .nav-link {
    color: #495057;
    padding: .65rem 1.2rem;
    border-radius: 0;
    font-size: .93rem;
}
.sidebar .nav-link.active, .sidebar .nav-link:hover {
    background: #fdeaf3;
    color: var(--tefa-blue);
    border-right: 3px solid var(--tefa-blue);
}
.sidebar .nav-link i { width: 22px; }

.main-content {
    margin-left: 250px;
    width: calc(100% - 250px);
    transition: margin-left .3s;
}
@media (max-width: 991.98px) {
    .sidebar { margin-left: -250px; }
    .sidebar.show { margin-left: 0; }
    .main-content { margin-left: 0; width: 100%; }
}

.topnavbar {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: .7rem 1.2rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
}

.content-body { padding: 1.3rem; }

/* ---------------- Layout AdminLTE 4 - dipakai khusus area Admin ---------------- */
.app-sidebar .brand-link { border-bottom-color: rgba(255,255,255,.1); }
.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--tefa-blue) !important;
    color: #fff !important;
}
.app-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: var(--tefa-blue-dark) !important;
    color: #fff !important;
}
.app-header.navbar { border-bottom: 1px solid #e9ecef; }
.app-content { padding: 1.2rem 0; }

/* ---------------- Cards ---------------- */
.stat-card {
    border: none;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.stat-card .stat-icon {
    font-size: 2.1rem;
    opacity: .85;
}
.stat-card h3 { font-weight: 700; margin-bottom: 0; }

.bg-c1 { background: linear-gradient(135deg,var(--tefa-blue),var(--tefa-blue-dark)); }
.bg-c2 { background: linear-gradient(135deg,#198754,#22c55e); }
.bg-c3 { background: linear-gradient(135deg,#fd7e14,#fbbf24); }
.bg-c4 { background: linear-gradient(135deg,#0dcaf0,#38bdf8); }
.bg-c5 { background: linear-gradient(135deg,#dc3545,#f87171); }
.bg-c6 { background: linear-gradient(135deg,#6f42c1,#a855f7); }

.card { border-radius: 14px; border: 1px solid #edf0f5; }

/* ---------------- Misc ---------------- */
.foto-siswa-sm { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.foto-siswa-lg { width: 130px; height: 130px; object-fit: cover; border-radius: 12px; border: 3px solid #eaf2ff; }

.btn-absen-masuk { background: var(--tefa-green); border: none; }
.btn-absen-pulang { background: var(--tefa-blue); border: none; }

#peta-lokasi { height: 300px; border-radius: 12px; }

.status-luar-radius {
    background: #fff3f3;
    border: 1px solid #f8d7da;
    color: #842029;
    border-radius: 10px;
    padding: .8rem 1rem;
}

/* ---------------- Print (Cetak Laporan) ---------------- */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    .print-area { width: 100%; }
}
.kop-surat {
    text-align: center;
    border-bottom: 3px double #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.kop-surat h4, .kop-surat h5 { margin: 0; }