@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* ==========================================================================
   THEME ARCHITECTURE & CENTRALIZED SEMANTIC TOKENS (100% PORTAL MATCH)
   ========================================================================== */
:root, [data-theme="dark"] {
    --bg-body: #080d1a;
    --bg-card: #0d1526;
    --bg-surface: #111b31;
    --text-primary: #f0f4ff;
    --text-secondary: #6b7a99;
    --border-color: rgba(255,255,255,0.09);
    --primary-color: #4f6ef7;
    --success-color: #22c997;
    --warning-color: #f5a623;
    --danger-color: #f4637a;
    --shadow-color: 0 20px 60px rgba(0,0,0,0.32);
    --shadow-color-sm: 0 8px 24px rgba(0,0,0,0.18);
    --sp-blue-dim: rgba(79,110,247,0.14);
    --sp-blue-glow: rgba(79,110,247,0.28);
    --sp-mint-dim: rgba(34,201,151,0.13);
    --sp-rose-dim: rgba(244,99,122,0.13);
    --sp-amber-dim: rgba(245,166,35,0.13);
    --overlay-bg: rgba(8, 13, 26, 0.88);
}

[data-theme="light"] {
    --bg-body: #f6f8fc;
    --bg-card: #ffffff;
    --bg-surface: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --border-color: rgba(15,23,42,0.08);
    --primary-color: #4f6ef7;
    --success-color: #22c997;
    --warning-color: #f5a623;
    --danger-color: #f4637a;
    --shadow-color: 0 20px 60px rgba(15,23,42,0.08);
    --shadow-color-sm: 0 8px 24px rgba(15,23,42,0.04);
    --sp-blue-dim: rgba(79,110,247,0.08);
    --sp-blue-glow: rgba(79,110,247,0.18);
    --sp-mint-dim: rgba(34,201,151,0.08);
    --sp-rose-dim: rgba(244,99,122,0.08);
    --sp-amber-dim: rgba(245,166,35,0.08);
    --overlay-bg: rgba(15, 23, 42, 0.6);
}

/* ==========================================================================
   GLOBAL LAYOUT OVERRIDES & TOKENS
   ========================================================================== */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    font-family: 'DM Sans', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sp-page-container {
    --sp-bg:        var(--bg-body);
    --sp-surface:   var(--bg-card);
    --sp-lift:      var(--bg-surface);
    --sp-border:    var(--border-color);
    --sp-text:      var(--text-primary);
    --sp-muted:     var(--text-secondary);
    --sp-blue:      var(--primary-color);
    --sp-blue-dim:  var(--sp-blue-dim);
    --sp-blue-glow: var(--sp-blue-glow);
    --sp-mint:      var(--success-color);
    --sp-mint-dim:  var(--sp-mint-dim);
    --sp-rose:      var(--danger-color);
    --sp-rose-dim:  var(--sp-rose-dim);
    --sp-amber:     var(--warning-color);
    --sp-amber-dim: var(--sp-amber-dim);
    --sp-radius-lg: 20px;
    --sp-radius-md: 14px;
    --sp-radius-sm: 10px;
    --sp-radius-pill: 999px;
    --sp-shadow:    var(--shadow-color);
    --sp-shadow-sm: var(--shadow-color-sm);

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Base utility overrides */
body, .bg-white, .dark\:bg-neutral-900, .bg-slate-50\/50, .dark\:bg-neutral-900\/50, .bg-slate-50, .dark\:bg-neutral-950 {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.lg\:col-span-1, .lg\:col-span-3, #activeProfile {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#emptyState {
    background-color: var(--bg-body) !important;
}
#emptyState > div {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Headings with White-to-Blue Linear Gradients */
h2, h3, h4, .text-slate-800, .dark\:text-neutral-200, .text-slate-700, .dark\:text-neutral-300 {
    color: var(--text-primary) !important;
}
.text-slate-400, .dark\:text-neutral-500, .text-slate-500, .dark\:text-neutral-400 {
    color: var(--text-secondary) !important;
}
.border-slate-200, .dark\:border-neutral-800, .border-slate-100, .dark\:border-neutral-700 {
    border-color: var(--border-color) !important;
}

.gradient-heading {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
}
.gradient-heading i {
    color: var(--primary-color) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    margin-right: 0.5rem;
}

.gradient-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, #3a55e0 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 18px rgba(79, 110, 247, 0.25) !important;
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.gradient-btn:hover {
    opacity: 0.94;
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(79, 110, 247, 0.35) !important;
}

/* ==========================================================================
   COMPONENT STYLES (PORTAL ALIGNED OVERRIDES)
   ========================================================================== */

/* Left/Right Panel Headers */
.lg\:col-span-1 > div.shrink-0,
#historyTimelineHeader,
#activeProfile > div.shrink-0 {
    border-bottom: 1px solid var(--border-color) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%) !important;
    padding: 1.5rem !important;
}

/* Inputs, Select elements, & textareas */
.sp-input, .sp-select, select, input[type="text"], textarea {
    height: 48px;
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    padding: 0 1rem !important;
    font-size: 0.875rem !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease !important;
}
.sp-input:focus, .sp-select:focus, select:focus, input[type="text"]:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--sp-blue-glow) !important;
}
textarea.sp-input, textarea {
    height: auto !important;
    padding: 0.75rem 1rem !important;
}

/* Accordions (Left Sidebar Directory) */
.dir-group {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
    transition: background-color 0.3s, border-color 0.3s;
}
.dir-toggle {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.85rem 1rem !important;
    transition: background-color 0.2s;
}
.dir-toggle:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
.dir-toggle span.bg-white, .dir-toggle span.dark\:bg-neutral-800 {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.dir-student {
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
}
.dir-student:last-child {
    border-bottom: none !important;
}
.dir-student:hover {
    background: var(--sp-blue-dim) !important;
    color: var(--text-primary) !important;
}
.dir-student div.text-slate-700, .dir-student div.dark\:text-neutral-300 {
    color: var(--text-primary) !important;
}

/* Sidebar action triggers */
.md\:col-span-1 button {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    color: var(--text-primary) !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.2s !important;
    box-shadow: var(--shadow-color-sm) !important;
}
.md\:col-span-1 button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-color) !important;
}

.md\:col-span-1 button[onclick*="parent_call"] { border-left: 4px solid var(--danger-color) !important; }
.md\:col-span-1 button[onclick*="parent_call"] div { background-color: var(--sp-rose-dim) !important; color: var(--danger-color) !important; }
.md\:col-span-1 button[onclick*="parent_call"]:hover { border-color: var(--danger-color) !important; }

.md\:col-span-1 button[onclick*="violation"] { border-left: 4px solid var(--warning-color) !important; }
.md\:col-span-1 button[onclick*="violation"] div { background-color: var(--sp-amber-dim) !important; color: var(--warning-color) !important; }
.md\:col-span-1 button[onclick*="violation"]:hover { border-color: var(--warning-color) !important; }

.md\:col-span-1 button[onclick*="special_exam"] { border-left: 4px solid #a78bfa !important; }
.md\:col-span-1 button[onclick*="special_exam"] div { background-color: rgba(167, 139, 250, 0.15) !important; color: #a78bfa !important; }
.md\:col-span-1 button[onclick*="special_exam"]:hover { border-color: #a78bfa !important; }

.md\:col-span-1 button[onclick*="leave_of_absence"] { border-left: 4px solid var(--success-color) !important; }
.md\:col-span-1 button[onclick*="leave_of_absence"] div { background-color: var(--sp-mint-dim) !important; color: var(--success-color) !important; }
.md\:col-span-1 button[onclick*="leave_of_absence"]:hover { border-color: var(--success-color) !important; }

.md\:col-span-1 button[onclick*="sanction"] { border-left: 4px solid var(--primary-color) !important; }
.md\:col-span-1 button[onclick*="sanction"] div { background-color: var(--sp-blue-dim) !important; color: var(--primary-color) !important; }
.md\:col-span-1 button[onclick*="sanction"]:hover { border-color: var(--primary-color) !important; }

/* Recent Records Cards Grid */
#recentRecordsList button {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 1.25rem !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: left;
}
#recentRecordsList button:hover {
    border-color: rgba(79, 110, 247, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-color) !important;
}
#recentRecordsList button span {
    background: var(--sp-blue-dim) !important;
    border: 1px solid rgba(79, 110, 247, 0.25) !important;
    color: var(--primary-color) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
}

/* Timeline cards layout matching Portal elements */
.timeline-item > div.bg-white, .timeline-item > div.dark\:bg-neutral-950 {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 1.25rem !important;
    box-shadow: var(--shadow-color-sm) !important;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
.timeline-item > div.bg-white:hover, .timeline-item > div.dark\:bg-neutral-950:hover {
    border-color: rgba(79, 110, 247, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-color) !important;
}

/* Timeline color coding accents (No Green Headers) */
.border-red-200, .dark\:border-red-500\/20 { border-left: 4px solid var(--danger-color) !important; }
.border-orange-200, .dark\:border-orange-500\/20 { border-left: 4px solid var(--warning-color) !important; }
.border-purple-200, .dark\:border-purple-500\/20 { border-left: 4px solid #a78bfa !important; }
.border-teal-200, .dark\:border-teal-500\/20 { border-left: 4px solid var(--success-color) !important; }
.border-slate-300, .dark\:border-neutral-700 { border-left: 4px solid var(--primary-color) !important; }

.timeline-item .mb-3.text-\[11px\].font-bold {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.65rem !important;
}

/* Separator rules styling */
.status-separator {
    display: flex;
    align-items: center;
    margin: 2rem 0 1rem 0;
}
.status-separator::before, .status-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}
.status-separator span {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    border-left: 2px solid var(--border-color) !important;
}
.timeline-marker {
    position: absolute;
    left: -6px;
    top: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Dynamic configuration dialog */
#addRecordModal {
    background-color: var(--overlay-bg) !important;
    backdrop-filter: blur(4px);
}
#addRecordModal > div {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-color) !important;
}
#addRecordModal form > div.border-b,
#addRecordModal form > div.border-t {
    border-color: var(--border-color) !important;
    background-color: var(--bg-surface) !important;
}
#addRecordModal label.cursor-pointer {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}
#addRecordModal label.cursor-pointer:hover {
    background-color: var(--bg-card) !important;
    border-color: var(--primary-color) !important;
}
#recordFileNameDisplay {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Offline Banner configurations */
#offlineBanner {
    background-color: var(--danger-color) !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem;
    font-weight: 800;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-color-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom UI scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background-color: var(--text-secondary); 
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background-color: var(--text-primary); 
}
.rotate-90 { transform: rotate(90deg); }

@media print {
    body * { visibility: hidden; }
    #activeProfile, #activeProfile * { visibility: visible; }
    #activeProfile { 
        position: absolute; 
        left: 0; top: 0; 
        width: 100%; 
        min-height: 100vh; 
        overflow: visible !important; 
    }
    #activeProfile .col-span-1.border-r { display: none !important; } 
    #activeProfile .md\:col-span-2 { grid-column: span 3 / span 3 !important; } 
    .print-hide { display: none !important; } 
    .timeline-item { page-break-inside: avoid; }
    .custom-scrollbar { overflow: visible !important; }
}