/**
 * HADIR LMS — Design System
 */

/* ─── Light theme (default) ─────────────────────────────────────── */
:root {
    --brand-violet: #7c3aed;
    --brand-pink: #db2777;
    --brand-cyan: #0891b2;

    --bg-base: #f5f3ff;
    --bg-elevated: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(139, 92, 246, 0.14);
    --glass-shadow: 0 4px 24px -4px rgba(99, 102, 241, 0.12), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
    --glass-shadow-lg: 0 12px 40px -8px rgba(99, 102, 241, 0.18), 0 4px 16px -4px rgba(15, 23, 42, 0.08);

    --surface-border: rgba(139, 92, 246, 0.12);
    --surface-hover: rgba(139, 92, 246, 0.06);
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-focus: rgba(124, 58, 237, 0.35);
}

/* ─── Dark theme ────────────────────────────────────────────────── */
.dark {
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --bg-base: #0f172a;
    --bg-elevated: #1e293b;

    --glass-bg: rgba(15, 23, 42, 0.82);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.4);
    --glass-shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.5);

    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --input-bg: rgba(15, 23, 42, 0.8);
    --input-border: #334155;
    --input-focus: rgba(167, 139, 250, 0.4);
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--text-primary);
}

/* Global typography — tidak bergantung Tailwind arbitrary vars */
.glass-card,
.glass-card-lg,
main,
aside {
    color: var(--text-primary);
}

.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6,
main h1, main h2, main h3, main h4 {
    color: var(--text-primary);
}

.glass-card p, main p {
    color: inherit;
}

.glass-card label,
.glass-card table td {
    color: var(--text-primary);
}

/* Teks putih HANYA untuk elemen gradient/button */
.btn-gradient,
.bg-gradient-to-r,
.bg-gradient-to-br,
[class*="from-violet"][class*="to-pink"],
[class*="from-pink"][class*="to-violet"] {
    /* icons inside gradient boxes keep text-white */
}

.text-on-gradient { color: #ffffff !important; }

.dark body {
    color: var(--text-primary);
}

/* ─── Background mesh ───────────────────────────────────────────── */
.gradient-bg {
    background-color: var(--bg-base);
    background-image:
        radial-gradient(ellipse 90% 70% at 0% -5%, rgba(167, 139, 250, 0.28), transparent 55%),
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(244, 114, 182, 0.18), transparent 50%),
        radial-gradient(ellipse 60% 45% at 50% 100%, rgba(34, 211, 238, 0.12), transparent 55%),
        radial-gradient(ellipse 40% 30% at 80% 80%, rgba(139, 92, 246, 0.08), transparent 50%);
}

.dark .gradient-bg {
    background-color: #0f172a;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% -10%, rgba(139, 92, 246, 0.18), transparent),
        radial-gradient(ellipse 60% 50% at 90% 0%, rgba(236, 72, 153, 0.12), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(6, 182, 212, 0.1), transparent);
}

/* ─── Glass / surface cards ─────────────────────────────────────── */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card-lg {
    box-shadow: var(--glass-shadow-lg);
}

.surface-border {
    border-color: var(--surface-border) !important;
}

/* ─── Form inputs ───────────────────────────────────────────────── */
.input-field {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--input-border);
    background: var(--input-bg);
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dark .input-field {
    color: #f1f5f9;
}

.input-field::placeholder {
    color: var(--text-muted);
}

.input-field:focus {
    outline: none;
    border-color: var(--brand-violet);
    box-shadow: 0 0 0 3px var(--input-focus);
}

/* ─── Weather chip ──────────────────────────────────────────────── */
.weather-chip {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,243,255,0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 2px 12px -2px rgba(99, 102, 241, 0.1);
}

.dark .weather-chip {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* ─── Labels & accents ──────────────────────────────────────────── */
.label-accent {
    color: var(--brand-violet);
    letter-spacing: 0.08em;
}

.dark .label-accent {
    color: #a78bfa;
}

/* ─── Nav ───────────────────────────────────────────────────────── */
.bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 24px -4px rgba(99, 102, 241, 0.1);
}

.dark .bottom-nav {
    box-shadow: 0 -4px 24px -4px rgba(0, 0, 0, 0.3);
}

.nav-item-active {
    color: var(--brand-violet);
}

.dark .nav-item-active {
    color: #a78bfa;
}

.nav-item-idle {
    color: #94a3b8;
}

.dark .nav-item-idle {
    color: #64748b;
}

/* ─── Sidebar nav hover ─────────────────────────────────────────── */
.nav-link-idle {
    color: #475569;
}

.nav-link-idle:hover {
    background: var(--surface-hover);
    color: var(--brand-violet);
}

.dark .nav-link-idle {
    color: #94a3b8;
}

.dark .nav-link-idle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

/* ─── Table hover ───────────────────────────────────────────────── */
.table-row-hover:hover {
    background: var(--surface-hover);
}

.dark .table-row-hover:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ─── Theme toggle ────────────────────────────────────────────────── */
.theme-toggle-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-border);
    box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.12);
    color: #475569;
}

.dark .theme-toggle-btn {
    background: rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
}

.theme-toggle-btn:hover {
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--brand-violet);
}

/* ─── Login card ────────────────────────────────────────────────── */
.login-card {
    box-shadow: var(--glass-shadow-lg);
}

/* ─── Clock ─────────────────────────────────────────────────────── */
.clock-display {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: #1e1b4b;
}

@media (min-width: 640px) {
    .clock-display { font-size: 2.25rem; }
}

.dark .clock-display {
    color: #ffffff;
}

.clock-hms {
    color: inherit;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.clock-seconds {
    animation: pulse-glow 1s ease-in-out infinite;
    color: #7c3aed;
}

.dark .clock-seconds {
    color: #a78bfa;
}

.clock-date {
    color: #64748b;
}

.dark .clock-date {
    color: #94a3b8;
}

.weather-temp {
    color: #1e1b4b;
}

.dark .weather-temp {
    color: #ffffff;
}

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-violet), var(--brand-pink));
    border-radius: 999px;
}

/* ─── SweetAlert2 ───────────────────────────────────────────────── */
.swal2-popup {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    border-radius: 1.25rem !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: var(--glass-shadow-lg) !important;
}

.dark .swal2-popup {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ─── Semantic text utilities (light + dark) ─────────────────────── */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--brand-violet) !important; }
.text-link { color: #6d28d9 !important; }
.text-danger { color: #dc2626 !important; }
.text-warning { color: #d97706 !important; }
.text-success { color: #059669 !important; }

.dark .text-accent { color: #a78bfa !important; }
.dark .text-link { color: #c4b5fd !important; }
.dark .text-danger { color: #f87171 !important; }
.dark .text-warning { color: #fbbf24 !important; }
.dark .text-success { color: #34d399 !important; }

/* ─── Badges & status chips ──────────────────────────────────────── */
.badge-pinned {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}
.dark .badge-pinned {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
}

.badge-role {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
}
.badge-tutor {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}
.badge-peserta {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}
.dark .badge-tutor { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; }
.dark .badge-peserta { background: rgba(34, 211, 238, 0.12); color: #67e8f9; }

.badge-hadir { background: rgba(16, 185, 129, 0.12); color: #047857; }
.badge-izin { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.badge-sakit { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.badge-alpha { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.badge-wait { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.badge-success { background: rgba(16, 185, 129, 0.12); color: #047857; }
.badge-info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.badge-warning { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.badge-danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.dark .badge-hadir { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.dark .badge-izin { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.dark .badge-sakit { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.dark .badge-alpha { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
.dark .badge-wait { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.dark .badge-success { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.dark .badge-info { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.dark .badge-warning { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
.dark .badge-danger { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }

/* ─── Form inputs themed ─────────────────────────────────────────── */
.input-themed {
    border: 1.5px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
}
.input-themed::placeholder { color: var(--text-muted); }
.input-themed:focus {
    outline: none;
    border-color: var(--brand-violet);
    box-shadow: 0 0 0 3px var(--input-focus);
}

.btn-ghost:hover { background: var(--surface-hover); }

/* ─── Drive preview ──────────────────────────────────────────────── */
.drive-preview-card { background: var(--bg-elevated); }
.drive-preview-loading { color: var(--text-muted); }

.dark .drive-preview-body { background: #0f172a; }

/* ─── Tailwind color overrides for dark mode ─────────────────────── */
.dark .text-violet-600 { color: #a78bfa !important; }
.dark .text-violet-500 { color: #a78bfa !important; }
.dark .text-violet-700 { color: #c4b5fd !important; }
.dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-amber-700 { color: #fcd34d !important; }
.dark .text-amber-800 { color: #fde68a !important; }
.dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-emerald-700 { color: #6ee7b7 !important; }
.dark .text-red-500 { color: #f87171 !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-cyan-600 { color: #22d3ee !important; }
.dark .text-cyan-700 { color: #67e8f9 !important; }
.dark .text-teal-600 { color: #2dd4bf !important; }
.dark .text-teal-700 { color: #5eead4 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }

.dark .bg-cyan-50 { background: rgba(6, 182, 212, 0.12) !important; }
.dark .bg-teal-50 { background: rgba(20, 184, 166, 0.12) !important; }
.dark .bg-teal-100 { background: rgba(20, 184, 166, 0.18) !important; }
.dark .bg-emerald-50 { background: rgba(16, 185, 129, 0.1) !important; }
.dark .bg-slate-50 { background: rgba(30, 41, 59, 0.55) !important; }
.dark .bg-slate-800\/50 { background: rgba(30, 41, 59, 0.5) !important; }

.dark .hover\:bg-emerald-50:hover { background: rgba(16, 185, 129, 0.12) !important; }
.dark .hover\:bg-teal-50:hover { background: rgba(20, 184, 166, 0.12) !important; }

.dark .border-teal-200 { border-color: rgba(45, 212, 191, 0.3) !important; }
.dark .border-red-200 { border-color: rgba(248, 113, 113, 0.35) !important; }

.dark .bg-amber-50 { background: rgba(245, 158, 11, 0.1) !important; }
.dark .bg-amber-100 { background: rgba(245, 158, 11, 0.15) !important; }
.dark .bg-emerald-100 { background: rgba(16, 185, 129, 0.15) !important; }
.dark .bg-red-100 { background: rgba(239, 68, 68, 0.15) !important; }
.dark .bg-violet-50 { background: rgba(139, 92, 246, 0.1) !important; }
.dark .bg-violet-100 { background: rgba(139, 92, 246, 0.15) !important; }
.dark .bg-blue-100 { background: rgba(59, 130, 246, 0.15) !important; }
.dark .bg-slate-100 { background: rgba(148, 163, 184, 0.12) !important; }

.dark .hover\:bg-violet-50:hover { background: rgba(139, 92, 246, 0.12) !important; }
.dark .hover\:bg-red-50:hover { background: rgba(239, 68, 68, 0.1) !important; }

.dark .border-amber-300 { border-color: rgba(251, 191, 36, 0.35) !important; }
.dark .border-violet-200 { border-color: rgba(167, 139, 250, 0.25) !important; }
.dark .border-violet-800 { border-color: rgba(167, 139, 250, 0.3) !important; }

.dark .bg-violet-50.dark\:bg-violet-950\/30,
.dark .bg-violet-50 { background: rgba(139, 92, 246, 0.1) !important; }

/* ─── Light mode: perkuat kontras warna Tailwind ─────────────────── */
.text-violet-600 { color: #6d28d9 !important; }
.text-violet-500 { color: #7c3aed !important; }
.text-violet-700 { color: #5b21b6 !important; }
.text-amber-600 { color: #b45309 !important; }
.text-amber-700 { color: #92400e !important; }
.text-amber-800 { color: #78350f !important; }
.text-emerald-600 { color: #047857 !important; }
.text-emerald-700 { color: #065f46 !important; }
.text-red-500 { color: #dc2626 !important; }
.text-red-600 { color: #b91c1c !important; }
.text-cyan-600 { color: #0891b2 !important; }
.text-cyan-700 { color: #0e7490 !important; }
.text-teal-600 { color: #0d9488 !important; }
.text-teal-700 { color: #0f766e !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-400 { color: #94a3b8 !important; }

.bg-amber-100 { color: #92400e; }
.bg-emerald-100 { color: #065f46; }
.bg-red-100 { color: #b91c1c; }
.bg-violet-100 { color: #5b21b6; }
.bg-blue-100 { color: #1d4ed8; }
.bg-slate-100 { color: #475569; }

.bg-cyan-50 { color: #0e7490; }
.bg-teal-50 { color: #0f766e; }
.bg-teal-100 { color: #115e59; }
.bg-emerald-50 { color: #065f46; }

/* Pastikan heading tanpa class di glass-card tetap terbaca */
.glass-card strong { color: inherit; }

/* Tabel admin — header & sel */
.admin-table thead th {
    color: var(--text-secondary);
    font-weight: 700;
}
.admin-table tbody td {
    color: var(--text-primary);
}
.dark .admin-table thead {
    background: rgba(30, 41, 59, 0.65) !important;
}
.dark .admin-table thead th {
    color: var(--text-secondary);
}

/* Forum / callout box */
.callout-violet {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    color: var(--text-secondary);
}
.dark .callout-violet {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(167, 139, 250, 0.25);
}

/* Alert box presensi */
.alert-amber {
    background: #fffbeb;
    border: 2px solid #fcd34d;
    color: #78350f;
}
.alert-amber .alert-title { color: #92400e; }
.alert-amber .alert-desc { color: #b45309; }
.dark .alert-amber {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
}
.dark .alert-amber .alert-title { color: #fcd34d; }
.dark .alert-amber .alert-desc { color: #fbbf24; }

/* ─── Profile photo crop modal ───────────────────────────────────── */
.profile-crop-stage {
    height: min(72vw, 320px);
    max-height: 320px;
}

.profile-crop-stage .cropper-container,
.profile-crop-stage .cropper-wrap-box,
.profile-crop-stage .cropper-canvas,
.profile-crop-stage .cropper-drag-box,
.profile-crop-stage .cropper-crop-box,
.profile-crop-stage .cropper-view-box {
    border-radius: 0.75rem;
}

.profile-crop-stage .cropper-view-box {
    outline: 2px solid rgba(167, 139, 250, 0.85);
    outline-offset: -1px;
}

.profile-crop-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c4b5fd, #f472b6);
    outline: none;
}

.profile-crop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    cursor: pointer;
}

.profile-crop-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    cursor: pointer;
}