@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; color: #1e293b; }
        
        :root { --primary-color: #003366; --primary-light: #004b99; }
        .bg-kemenpora { background-color: var(--primary-color) !important; }
        .text-kemenpora { color: var(--primary-color) !important; }
        .border-kemenpora { border-color: var(--primary-color) !important; }
        
        /* ── ADMIN SIDEBAR ── */
        .sidebar-link { position: relative; border-radius: 14px; transition: all 0.22s cubic-bezier(.4,0,.2,1); gap: 12px; }
        .sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
        .sidebar-link.active { background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(251,191,36,0.08) 100%); border-left: 3px solid #fbbf24; color: #fcd34d; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(251,191,36,0.15); }
        .sidebar-link.active i { color: #fbbf24; }
        .sidebar-link i { width: 20px; text-align: center; transition: color 0.2s; }

        /* ── ADMIN STAT CARDS ── */
        .card-shadow { box-shadow: 0 2px 8px rgba(0,51,102,0.07), 0 1px 2px rgba(0,0,0,0.05); }
        .modern-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .modern-card:hover { transform: translateY(-5px); box-shadow: 0 24px 40px rgba(0,51,102,0.12), 0 8px 16px rgba(0,0,0,0.06); }

        /* ── ADMIN HEADER ── */
        #view-dashboard > main > header { background: rgba(255,255,255,0.97); border-bottom: 1.5px solid #e8edf5; }

        /* ── ADMIN SECTIONS ── */
        .admin-section-card { background: #ffffff; border-radius: 24px; box-shadow: 0 2px 12px rgba(0,51,102,0.06), 0 1px 4px rgba(0,0,0,0.04); border: 1px solid #eef1f6; }

        /* ── ADMIN TABLE ── */
        .admin-table thead th { background: #f4f7fb; color: #003366; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid #e5ecf7; padding: 14px 20px; }
        .admin-table tbody tr { transition: background 0.15s; }
        .admin-table tbody tr:hover { background: #f8fbff; }
        .admin-table tbody td { padding: 14px 20px; font-size: 13.5px; border-bottom: 1px solid #f0f4f9; color: #374151; vertical-align: middle; }

        /* ── ADMIN FILTER PILLS ── */
        .admin-filter-btn { font-size: 13px; padding: 10px 22px; border-radius: 50px; font-weight: 700; transition: all 0.2s; }
        .admin-filter-btn.active, .admin-org-filter-btn.active { background: var(--primary-color) !important; color: white !important; box-shadow: 0 4px 14px rgba(0,51,102,0.25); }
        .admin-org-sub-btn.active { background: #2563eb !important; color: white !important; }

        /* ── ADMIN FORM INPUTS ── */
        .admin-input { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 11px 16px; font-size: 13.5px; outline: none; width: 100%; transition: all 0.2s; color: #1e293b; }
        .admin-input:focus { border-color: #003366; background: #fff; box-shadow: 0 0 0 3px rgba(0,51,102,0.08); }

        /* ── ADMIN BADGE ── */
        .badge-primary { background: #eef4ff; color: #003366; border-radius: 8px; font-size: 11px; font-weight: 800; padding: 3px 10px; letter-spacing: .05em; }
        .badge-success { background: #ecfdf5; color: #065f46; border-radius: 8px; font-size: 11px; font-weight: 800; padding: 3px 10px; }
        .badge-warn { background: #fffbeb; color: #92400e; border-radius: 8px; font-size: 11px; font-weight: 800; padding: 3px 10px; }

        /* ── SIDEBAR NAV GROUP LABELS ── */
        .sidebar-group-label { font-size: 10px; font-weight: 900; color: rgba(147,197,253,0.7); letter-spacing: .18em; text-transform: uppercase; padding: 0 16px; margin-top: 28px; margin-bottom: 6px; }

        /* ── ADMIN PROGRESS BAR ── */
        #progressBarAttendance { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); }
        #bcProgressBar { background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%); }

        /* ── STAT ICON BOX ── */
        .stat-icon-box { border-radius: 18px; width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; font-size: 26px; flex-shrink:0; }

        /* ── ADMIN BUTTON STYLES ── */
        .btn-admin-primary { background: var(--primary-color); color: white; font-weight: 700; border-radius: 12px; padding: 10px 20px; font-size: 13px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; }
        .btn-admin-primary:hover { background: var(--primary-light); box-shadow: 0 6px 20px rgba(0,51,102,0.3); transform: translateY(-1px); }
        .btn-admin-danger { background: #fee2e2; color: #b91c1c; font-weight: 700; border-radius: 12px; padding: 10px 16px; font-size: 13px; transition: all 0.2s; border: 1px solid #fecaca; }
        .btn-admin-danger:hover { background: #b91c1c; color: white; }
        .btn-admin-success { background: #dcfce7; color: #15803d; font-weight: 700; border-radius: 12px; padding: 10px 16px; font-size: 13px; transition: all 0.2s; border: 1px solid #bbf7d0; }
        .btn-admin-success:hover { background: #15803d; color: white; }

        /* ── SIDEBAR COLLAPSE BUTTON (mobile) ── */
        #sidebar { transition: width 0.3s cubic-bezier(.4,0,.2,1); }

        /* ── SETTING TAB BAR ── */
        .setting-tab-btn { font-size: 13px; padding: 10px 22px; font-weight: 700; border-bottom: 3px solid transparent; color: #94a3b8; transition: all 0.2s; white-space: nowrap; }
        .setting-tab-btn.active-tab { border-bottom-color: var(--primary-color); color: var(--primary-color); }
        .setting-tab-btn:hover { color: #475569; }

        /* ── ADMIN FOOTER ── */
        #admin-footer { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); border-top: 3px solid var(--primary-color); }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .filter-pill { transition: all 0.2s; }
        .filter-pill.active { background-color: var(--primary-color) !important; color: white !important; }
        
        footer a:hover { color: #fbbf24; text-decoration: underline; }
        
        /* Manipulasi Garis Peta agar terlihat tegas dan elegan */
        #map_div svg g path, #map_div_public svg g path { stroke: #ffffff !important; stroke-width: 1px !important; transition: all 0.3s ease; }
        #map_div svg g path:hover, #map_div_public svg g path:hover { stroke: #fbbf24 !important; stroke-width: 2px !important; filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.3)); cursor: pointer; z-index: 50; }

        /* Setup Folder Background Statis */
        .dynamic-bg-public, .dynamic-bg-admin { background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-color: #f8fafc; }
        .dynamic-bg-public { background-image: url('/Background/bg-public.png'); }
        .dynamic-bg-admin  { background-image: url('/Background/bg-admin.png'); }

        /* Styling tambahan untuk Rich Text Editor di dalam area email */
        #setEmailBody ul { list-style-type: disc; padding-left: 20px; margin-top: 5px; margin-bottom: 5px; }
        #setEmailBody ol { list-style-type: decimal; padding-left: 20px; margin-top: 5px; margin-bottom: 5px; }