/* ==========================================
   PREMIUM UI/UX ADMIN DASHBOARD – V2
   Designer: ChatGPT
   ========================================== */

* {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.2px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background:
        radial-gradient(1200px at 20% 20%, rgba(120, 141, 255, 0.18), transparent 40%),
        radial-gradient(1000px at 80% 10%, rgba(87, 230, 200, 0.16), transparent 40%),
        #f8faff;
    color: #1f2a44;
}

.navbar {
    background: rgba(13, 110, 253, 0.90);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 28px rgba(13, 110, 253, 0.35);
    padding: 0.75rem 1.5rem;
    transition: background 0.25s ease;
}
.navbar.scrolled { background: rgba(13, 110, 253, 0.98); }
.navbar-brand { font-weight: 800; font-size: 1.15rem; color: #fff !important; }
.brand-img {
    width: 40px; height: 40px; border-radius: 12px;
    object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.card {
    border-radius: 16px;
    padding: 0.75rem;
    border: 1px solid rgba(230, 233, 242, 0.65);
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 16px 38px rgba(0,0,0,0.12);
}
.card-title { font-weight: 800; color: #0f172a; margin-bottom: 1rem; }

.btn {
    border-radius: 10px;
    font-weight: 700;
    padding: 0.55rem 1rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none; color: #fff;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    box-shadow: 0 14px 32px rgba(30, 64, 175, 0.32);
}
.btn-outline-secondary { color: #475569; border-color: #cbd5e1; }
.btn-outline-secondary:hover { background: #f1f5f9; }

.table { border-radius: 14px; overflow: hidden; }
.table thead th {
    background: #eef3ff; color: #1f2a44; font-weight: 700;
    border-bottom: 1px solid #dbe1f1;
}
.table tbody tr:hover { background: #f8fbff; }
.table-striped tbody tr:nth-child(odd) { background: rgba(0,0,0,0.015); }

.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 0.55rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.badge-it { background: #2563eb; }
.badge-hukum { background: #d97706; }
.badge-kesehatan { background: #10b981; }

.chart-wrapper { min-height: 260px; position: relative; }

footer {
    background: #ffffff;
    border-top: 1px solid #e5e9f1;
    padding: 1rem 0;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.05);
}

/* Dark mode */
.dark-mode { background: #0b1120; color: #e5e7eb; }
.dark-mode .card {
    background: #111827; border-color: #1f2937; box-shadow: 0 14px 28px rgba(0,0,0,0.45);
}
.dark-mode .navbar { background: rgba(17, 24, 39, 0.95); backdrop-filter: blur(14px); }
.dark-mode .table thead th { background: #1f2937; color: #e5e7eb; }
.dark-mode .table tbody tr:hover { background: rgba(255,255,255,0.05); }
.dark-mode .form-control, .dark-mode .form-select {
    background: #0f172a; color: #e5e7eb; border-color: #334155;
}
.dark-mode .list-group-item {
    background: #111827;
    color: #e5e7eb;
    border-color: #1f2937;
}
.dark-mode .bg-light,
.dark-mode .bg-dark-subtle,
.dark-mode .alert,
.dark-mode .list-group-item .bg-light {
    background: #1b2538 !important;
    color: #e5e7eb;
}
.dark-mode .list-group-item .border,
.dark-mode .bg-dark-subtle {
    border-color: #243048 !important;
}
.dark-mode .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.dark-mode footer { background: #0f172a; }
.dark-mode body,
.dark-mode .layout,
.dark-mode .main-wrapper,
.dark-mode .page-content {
    background: #0b1220;
}