:root {
    --bg-primary: #09090b;
    --bg-panel: rgba(24, 24, 27, 0.7);
    --top-nav-bg: rgba(9, 9, 11, 0.8);
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(39, 39, 42, 0.5);
    --accent-color: #6366f1;
    --selection-color: #4338ca;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
}

/* Dark mode specific text visibility */
.dark-theme h2,
.dark-theme h3 {
    color: var(--text-primary) !important;
}

/* Top nav bar */
.top-nav {
    background: var(--top-nav-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--nav-shadow);
}

/* 4-panel dashboard container */
.dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* Panel styling */
.dashboard-panel {
    background-color: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Responsive layout */
@media (max-width: 1200px) {
    .dashboard-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: auto;
        overflow: visible;
    }

    .dashboard-panel {
        height: 600px;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
}

#panel4 {
    grid-column: span 1;
}

.scrollable-area {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

/* Attendance sheet square colors */
.attendance-square {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: inline-block;
    margin: 1px;
    cursor: help;
    position: relative;
}

.attendance-present {
    background-color: #10b981;
}

.attendance-absent {
    background-color: #ef4444;
}

.attendance-nodata {
    background-color: #3f3f46;
    /* Zinc-700 for no data */
}

.attendance-makeup {
    background-color: #3b82f6;
}

/* Table styles for attendance sheet */
.attendance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.attendance-table th,
.attendance-table td {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
}

.attendance-table th {
    background-color: #18181b !important;
    color: #a1a1aa !important;
    font-weight: 600;
}

/* Tooltip styles */
.tooltip {
    position: relative;
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #27272a;
    color: white;
    padding: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    border: 1px solid var(--border-color);
}

/* Course selector styling */
.course-select {
    border: 2px solid var(--accent-color);
    color: white;
    font-weight: 700;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--accent-color);
    cursor: pointer;
    transition: all 0.2s;
}

.course-select:hover {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

/* --- PREMIUM ZINC DARK OVERRIDES --- */

/* Student List Items (All Panels) */
#allStudentsList li,
#studentsList div,
#absentStudentsList div {
    background-color: #09090b !important;
    /* Deep contrast cards */
    border-color: #27272a !important;
    color: var(--text-primary) !important;
    transition: transform 0.2s, border-color 0.2s;
}

#allStudentsList li:hover,
#studentsList div:hover {
    border-color: var(--accent-color) !important;
}

/* Text overrides within cards */
#allStudentsList li .text-gray-600,
#allStudentsList li .text-gray-500,
#studentsList div .text-gray-600,
#absentStudentsList div .text-gray-600 {
    color: var(--text-secondary) !important;
}

/* Absent Students Card Overrides */
#absentStudentsList div.bg-red-50 {
    background-color: #450a0a33 !important;
    border-color: #7f1d1d !important;
}

#absentStudentsList div .text-red-800 {
    color: #fca5a5 !important;
}

#absentStudentsList div .text-red-600 {
    color: #f87171 !important;
}

/* Celebration Board Inner Box */
#celebrationBoard {
    background-color: #1e1b4b33 !important;
    border-color: #3730a3 !important;
}

#celebrationBoard .bg-white {
    background-color: #09090b !important;
    border-color: #27272a !important;
}

#birthdayList li {
    border-color: #27272a !important;
    background-color: transparent !important;
}

#birthdayList li span {
    color: var(--text-primary) !important;
}

/* Inputs & Form Elements */
input,
select,
textarea {
    background-color: #09090b !important;
    border-color: #27272a !important;
    color: #fafafa !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
}

input:focus,
select:focus {
    border-color: var(--accent-color) !important;
    outline: none;
}

input::placeholder {
    color: #52525b !important;
}

/* Payment Cycle Buttons (Neutral/Paid/Unpaid) */
.pending {
    background-color: #18181b !important;
    color: #71717a !important;
    border-color: #27272a !important;
}

.paid {
    background-color: #064e3b !important;
    color: #34d399 !important;
    border-color: #065f46 !important;
}

.unpaid {
    background-color: #450a0a !important;
    color: #f87171 !important;
    border-color: #7f1d1d !important;
}

/* Global utility overrides for Dark Theme */
.border-dashed {
    border-color: #27272a !important;
}

.bg-indigo-50 {
    background-color: #1e1b4b33 !important;
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-200 {
    background-color: #18181b !important;
}

.text-gray-800,
.text-gray-700 {
    color: var(--text-primary) !important;
}

.text-indigo-800,
.text-indigo-700 {
    color: #a5b4fc !important;
}

/* Active Weekday Toggle */
.weekday-btn.bg-gray-200 {
    background-color: #18181b !important;
    color: #a1a1aa !important;
    border: 1px solid #27272a;
}

.weekday-btn.bg-indigo-600 {
    background-color: var(--accent-color) !important;
    color: white !important;
    border: 1px solid var(--accent-color);
}

/* Legend items in panel 4 */
.bg-gray-300 {
    background-color: #3f3f46 !important;
}

.bg-blue-300 {
    background-color: #1e40af !important;
}

/* Modal Content */
#attendanceModal .bg-white,
#rescheduleModal .bg-white {
    background-color: #18181b !important;
    color: #fafafa !important;
    border: 1px solid #27272a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#attendanceModal label {
    color: #fafafa !important;
}

#closeModal,
#closeRescheduleModal {
    background-color: #27272a !important;
    color: #fafafa !important;
}

/* Scrollbar refinement */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #09090b;
}

::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Ensure modals stay hidden before Tailwind initializes */
.hidden { display: none !important; }

/* Native Grid and Color Utility Fallbacks (Essential for stability) */
.grid { display: grid !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.gap-1 { gap: 0.25rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.h-5 { height: 1.25rem !important; }
.flex { display: flex !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.rounded { border-radius: 0.25rem !important; }
.border { border: 1px solid !important; }
.text-\[9px\] { font-size: 9px !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.font-bold { font-weight: 700 !important; }

/* Custom Color Schemes (Zinc-Indigo) */
.bg-zinc-800\/50 { background-color: rgba(39, 39, 42, 0.5) !important; }
.bg-zinc-900 { background-color: #18181b !important; }
.border-zinc-700\/50 { border-color: rgba(63, 63, 70, 0.5) !important; }
.border-zinc-800 { border-color: #27272a !important; }
.text-zinc-400 { color: #a1a1aa !important; }
.text-zinc-500 { color: #71717a !important; }
.text-zinc-100 { color: #f4f4f5 !important; }

/* Status Colors */
.paid { background-color: rgba(6, 78, 59, 0.4) !important; color: #34d399 !important; border-color: rgba(6, 95, 70, 0.6) !important; }
.unpaid { background-color: rgba(127, 29, 29, 0.4) !important; color: #fb7185 !important; border-color: rgba(153, 27, 27, 0.6) !important; }
.pending { background-color: rgba(39, 39, 42, 0.4) !important; color: #a1a1aa !important; border-color: rgba(63, 63, 70, 0.6) !important; }

.bg-zinc-800\/80 { background-color: rgba(39, 39, 42, 0.8) !important; }