/* ================================================================
   Presensi Digital UHO — Global Stylesheet
   Versi    : 2.0
   Deskripsi: Konsolidasi seluruh <style> inline dari semua view
              ke satu file terpusat. Dimuat oleh kedua template
              (header.php dan admin_header.php).
   ================================================================ */


/* ── 1. VARIABEL BRAND ──────────────────────────────────────────── */

:root {
    --uho-blue:      #1e3a8a;
    --uho-blue-deep: #0f2557;
    --uho-blue-mid:  #16306e;
    --uho-blue-lite: #2c4fb0;
    --uho-yellow:    #eab308;
    --uho-bg:        #f4f6fb;
}


/* ── 2. RESET & BASE ────────────────────────────────────────────── */

body {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(234, 179, 8, 0.25);
}


/* ── 3. LAYOUT: MOBILE APP SHELL (Pegawai) ──────────────────────── */

.app-shell-bg {
    background:
        radial-gradient(120% 60% at 50% 0%,
            rgba(30, 58, 138, 0.06) 0%,
            rgba(30, 58, 138, 0) 55%),
        var(--uho-bg);
}


/* ── 4. LAYOUT: ADMIN PANEL ─────────────────────────────────────── */

.admin-bg {
    background:
        radial-gradient(100% 50% at 100% 0%,
            rgba(30, 58, 138, 0.05) 0%,
            rgba(30, 58, 138, 0) 50%),
        var(--uho-bg);
}


/* ── 5. GRADIEN & KOMPONEN BRAND ────────────────────────────────── */

/*
 * Dipakai di: header mobile (brand bar), dashboard PPK & Vendor,
 * tombol utama, halaman pegawai (kinerja, profil, dashboard).
 * Sebelumnya hanya ada di header.php → menyebabkan admin page
 * kehilangan background dan teks putih tidak terbaca.
 */
.brand-gradient {
    background: linear-gradient(
        135deg,
        var(--uho-blue-deep) 0%,
        var(--uho-blue)      55%,
        var(--uho-blue-lite) 100%
    );
}

/* Sidebar admin panel */
.sidebar-gradient {
    background: linear-gradient(
        185deg,
        var(--uho-blue-deep) 0%,
        var(--uho-blue-mid)  60%,
        var(--uho-blue)      100%
    );
}

/* Kartu kaca (glassmorphism ringan) — mobile pages */
.card-elevated {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.9);
}


/* ── 6. SIDEBAR & NAVIGASI ADMIN ────────────────────────────────── */

/* Scrollbar tipis di nav sidebar */
.nav-scroll::-webkit-scrollbar {
    width: 6px;
}
.nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

/* Ikon bergeser saat hover link nav */
.nav-link i {
    transition: transform 0.2s ease;
}
.nav-link:hover i {
    transform: translateX(2px);
}


/* ── 7. SWEETALERT2 ─────────────────────────────────────────────── */

.swal2-popup {
    border-radius: 1.25rem !important;
}


/* ── 8. DATATABLES OVERRIDE ─────────────────────────────────────── */

/* Filter & length control */
.dataTables_wrapper {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.85rem;
    margin-left: 0.5rem;
    outline: none;
    background: #f8fafc;
    transition: all .2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--uho-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.4rem 0.6rem;
    outline: none;
    margin-right: 0.5rem;
    background: #f8fafc;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 0.8rem;
    color: #64748b;
}

/* Tombol paginasi */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0.6rem !important;
    padding: 0.3rem 0.75rem !important;
    margin: 0 2px;
    border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--uho-blue) !important;
    color: #fff !important;
    border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eff6ff !important;
    color: var(--uho-blue) !important;
    border: 1px solid #dbeafe !important;
}
table.dataTable.no-footer {
    border-bottom: 1px solid #f1f5f9;
}

/* Tombol export (Excel / Print) */
.dt-buttons .dt-button {
    background: var(--uho-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.55rem 1.1rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    margin-right: 0.5rem;
    box-shadow: 0 4px 12px -4px rgba(30, 58, 138, 0.4);
    transition: all .2s;
}
.dt-buttons .dt-button:hover {
    background: var(--uho-blue-mid) !important;
    transform: translateY(-1px);
}


/* ── 9. PETA LEAFLET (paket_form) ───────────────────────────────── */

/* Cegah konflik z-index antara Leaflet dan elemen halaman */
#map {
    z-index: 0;
}
.leaflet-top,
.leaflet-bottom {
    z-index: 400;
}

/* Border map card berubah saat hover */
#map-card:hover .map-ring {
    border-color: var(--uho-blue);
}


/* ── 10. INPUT SPESIFIK (paket_form) ────────────────────────────── */

/* Input koordinat GPS — gaya terminal/monospace */
.coord-input {
    font-family: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
}

/* Badge satuan yang menempel di sisi kanan input radius */
.input-suffix {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: #f1f5f9;
    border-left: 1px solid #e2e8f0;
    border-radius: 0 0.75rem 0.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    pointer-events: none;
    user-select: none;
}


/* ── 11. ANIMASI ────────────────────────────────────────────────── */

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.scale-in {
    animation: scaleIn 0.3s ease;
}