/* =========================================================
   CAREER COMPASS DESIGN SYSTEM - CANONICAL DESIGN TOKENS
   Las Piñas National High School - Senior High School
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* =====================================================
       1. BRAND & INSTITUTIONAL IDENTITY
       Official LPENHS School Colors
    ===================================================== */
    --brand-primary:        #155b2a;  /* LPENHS Forest Green */
    --brand-primary-hover:  #114a22;  /* Darkened Green on Hover */
    --brand-primary-dark:   #0d3f1d;  /* Deep Evergreen (Sidebar background) */
    --brand-primary-soft:   #edf5ee;  /* Mint / Sage light background tint */
    --brand-accent-gold:    #c89b3c;  /* Academic Gold accent */
    --brand-accent-gold-soft:#fbf4e6; /* Soft Gold Tint */
    --brand-accent-red:     #a9283b;  /* Maroon secondary */
    --brand-accent-red-soft:#faeaed;  /* Soft Maroon Tint */

    /* =====================================================
       2. NEUTRAL SURFACE & TEXT SCALE (MODERN SLATE)
    ===================================================== */
    --surface-bg:           #f8fafc;  /* Clean neutral app background (slate-50) */
    --surface-card:         #ffffff;  /* Pure white card surface */
    --surface-subtle:       #f1f5f9;  /* Slate-100 for zebra stripes & hover */
    --surface-border:       #e2e8f0;  /* Slate-200 subtle dividing line */
    --surface-border-strong:#cbd5e1;  /* Slate-300 active input border */

    --text-heading:         #0f172a;  /* High-contrast slate-900 */
    --text-body:            #334155;  /* Slate-700 primary body text */
    --text-muted:           #64748b;  /* Slate-500 secondary / timestamps */
    --text-faint:           #94a3b8;  /* Slate-400 placeholder text */
    --text-inverse:         #ffffff;  /* High-contrast on dark backgrounds */

    /* =====================================================
       3. SEMANTIC STATUS SYSTEM
    ===================================================== */
    --status-success:       #16a34a;  /* Emerald-600 */
    --status-success-bg:    #dcfce7;  /* Emerald-100 */
    --status-warning:       #d97706;  /* Amber-600 */
    --status-warning-bg:    #fef3c7;  /* Amber-100 */
    --status-danger:        #dc2626;  /* Red-600 */
    --status-danger-bg:     #fee2e2;  /* Red-100 */
    --status-info:          #0284c7;  /* Sky-600 */
    --status-info-bg:       #e0f2fe;  /* Sky-100 */

    /* =====================================================
       4. TYPOGRAPHY SCALE
    ===================================================== */
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs:              0.75rem;    /* 12px */
    --text-sm:              0.875rem;   /* 14px */
    --text-base:            1rem;       /* 16px */
    --text-lg:              1.125rem;   /* 18px */
    --text-xl:              1.25rem;    /* 20px */
    --text-2xl:             1.5rem;     /* 24px */
    --text-3xl:             1.875rem;   /* 30px */

    /* =====================================================
       5. SHAPE & ELEVATION
    ===================================================== */
    --radius-xs:            4px;
    --radius-sm:            8px;
    --radius-md:            12px;
    --radius-lg:            16px;
    --radius-full:          9999px;

    --shadow-sm:            0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg:            0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-card:          0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-dropdown:      0 12px 28px rgba(15, 23, 42, 0.12);

    /* =====================================================
       6. TRANSITIONS & FOCUS
    ===================================================== */
    --transition-fast:      150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:      200ms cubic-bezier(0.4, 0, 0.2, 1);
    --focus-ring:           0 0 0 3px rgba(21, 91, 42, 0.25);

    /* =====================================================
       7. BACKWARD COMPATIBILITY ALIASES
       Harmonizes all legacy stylesheets without breakage
    ===================================================== */
    --primary-green:        var(--brand-primary);
    --secondary-green:      var(--brand-primary-dark);
    --light-green:          var(--brand-primary-soft);
    --misty-green:          #d8ebdc;
    --green:                var(--brand-primary);
    --green-dark:           var(--brand-primary-dark);
    --green-soft:           var(--brand-primary-soft);
    --cc-green:             var(--brand-primary);
    --cc-green-dark:        var(--brand-primary-dark);
    --cc-green-soft:        var(--brand-primary-soft);
    --cc-gold:              var(--brand-accent-gold);
    --cc-red:               var(--brand-accent-red);
    --cc-ink:               var(--text-heading);
    --cc-muted:             var(--text-muted);
    --cc-line:              var(--surface-border);
    --bg-subtle:            var(--surface-bg);
    --border-color:         var(--surface-border);
    --border-color-light:   var(--surface-border);
    --white:                var(--surface-card);
    --text-dark:            var(--text-heading);
    --text-primary:         var(--text-heading);
    --text-secondary:       var(--text-body);
}

/* Base resets & typography */
body {
    font-family: var(--font-sans);
    color: var(--text-body);
    background-color: var(--surface-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Universal Interactive Pointer */
button,
[role="button"],
a[href],
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
}

/* Universal Accessible Focus Ring (WCAG 2.2 AA / AAA Compliant) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-primary, #155b2a) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(21, 91, 42, 0.18) !important;
}

/* Accessible Screen Reader Only Utility */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   REUSABLE UNIFIED COMPONENT UTILITIES (.cc-*)
========================================================= */

/* Unified Card */
.cc-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 24px;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.cc-card:hover {
    box-shadow: var(--shadow-md);
}

/* Unified Buttons */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.cc-btn-primary {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border-color: var(--brand-primary);
}

.cc-btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(21, 91, 42, 0.25);
}

.cc-btn-secondary {
    background-color: var(--surface-card);
    color: var(--text-heading);
    border-color: var(--surface-border);
}

.cc-btn-secondary:hover {
    background-color: var(--surface-subtle);
    border-color: var(--surface-border-strong);
}

/* Unified Role & Status Badges */
.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cc-badge-student {
    background-color: var(--brand-primary-soft);
    color: var(--brand-primary-dark);
}

.cc-badge-advocate {
    background-color: var(--brand-accent-gold-soft);
    color: #8c6310;
}

.cc-badge-principal {
    background-color: var(--brand-accent-red-soft);
    color: var(--brand-accent-red);
}

.cc-badge-success {
    background-color: var(--status-success-bg);
    color: var(--status-success);
}

.cc-badge-warning {
    background-color: var(--status-warning-bg);
    color: var(--status-warning);
}

.cc-badge-danger {
    background-color: var(--status-danger-bg);
    color: var(--status-danger);
}

/* Unified Form Inputs */
.cc-input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--text-heading);
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cc-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--focus-ring);
}

/* =========================================================
   8. MODERN GLOBAL UI POLISH (APPLIED ACROSS ALL VIEWS)
========================================================= */

/* Slim Modern Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Global Card Hover Micro-Interactions */
.dashboard-card,
.stat-card,
.metric-card,
.summary-card,
.assessment-card,
.program-card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dashboard-card:hover,
.stat-card:hover,
.metric-card:hover,
.summary-card:hover,
.assessment-card:hover,
.program-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

/* Global Clean Table Polish */
table.styled-table,
table.data-table,
.dashboard-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

table.styled-table thead th,
table.data-table thead th,
.dashboard-table table thead th {
    background-color: var(--surface-subtle) !important;
    color: var(--text-heading) !important;
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--surface-border) !important;
}

table.styled-table tbody tr,
table.data-table tbody tr,
.dashboard-table table tbody tr {
    transition: background-color var(--transition-fast) !important;
}

table.styled-table tbody tr:hover,
table.data-table tbody tr:hover,
.dashboard-table table tbody tr:hover {
    background-color: #f8fafc !important;
}

table.styled-table tbody td,
table.data-table tbody td,
.dashboard-table table tbody td {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--surface-border) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-body) !important;
}

/* Modern Chatbot UI Polish */
.chatbot-bubble-ai,
.chat-msg-ai {
    background-color: #ffffff !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: 16px 16px 16px 4px !important;
    color: var(--text-heading) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 14px 18px !important;
    line-height: 1.6 !important;
}

.chatbot-bubble-student,
.chat-msg-student {
    background-color: var(--brand-primary) !important;
    border-radius: 16px 16px 4px 16px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(21, 91, 42, 0.20) !important;
    padding: 14px 18px !important;
    line-height: 1.6 !important;
}

/* Advocate Referral High-Visibility Banner */
.advocate-alert-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #fde68a !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    color: #92400e !important;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.12);
}

/* =========================================================
   CANONICAL DASHBOARD DESIGN SYSTEM STANDARDIZATION
   Harmonizes Student, Admin, and Principal Dashboards
   ========================================================= */

/* 1. Universal Layout & Scroller Foundation */
.dashboard-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: var(--surface-bg);
    overflow: hidden;
}

.dashboard-sidebar {
    width: 260px;
    min-width: 260px;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-primary);
    color: var(--white);
    padding: 24px 12px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.dashboard-sidebar .sidebar-link,
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    min-height: 42px;
    border-radius: 8px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dashboard-sidebar .sidebar-link i,
.sidebar-link i {
    width: 20px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-sidebar .sidebar-link .link-text,
.sidebar-link .link-text {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.3;
}

.dashboard-sidebar .sidebar-link:hover,
.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--white);
}

.dashboard-sidebar .sidebar-link.active,
.sidebar-link.active {
    background-color: var(--white) !important;
    color: var(--brand-primary, #155b2a) !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dashboard-sidebar .sidebar-link.active i,
.sidebar-link.active i,
.dashboard-sidebar .sidebar-link.active .link-text,
.sidebar-link.active .link-text {
    color: var(--brand-primary, #155b2a) !important;
}

.dashboard-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    min-height: 0;
    padding: 24px 32px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--surface-bg);
}

/* 2. Unified Dashboard Topbar */
.dashboard-topbar {
    width: 100%;
    min-height: 72px;
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    margin: 0;
    box-sizing: border-box;
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.topbar-page-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.topbar-page-desc {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.4;
}

/* 2b. Canonical Topbar Action Icons (Notifications & Settings) */
.dashboard-topbar-icons,
.topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-icon,
.icon-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background-color: var(--surface-bg, #f8fafc) !important;
    color: var(--text-body, #475569) !important;
    border: 1px solid var(--surface-border, #e2e8f0) !important;
    border-radius: var(--radius-sm, 10px) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color var(--transition-fast, 0.15s ease),
                border-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease),
                transform var(--transition-fast, 0.15s ease),
                box-shadow var(--transition-fast, 0.15s ease) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.topbar-icon i,
.icon-btn i {
    color: var(--text-body, #475569) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color var(--transition-fast, 0.15s ease) !important;
}

.topbar-icon:hover,
.icon-btn:hover {
    background-color: var(--brand-primary-soft, #edf5ee) !important;
    border-color: #a7f3d0 !important;
    color: var(--brand-primary, #155b2a) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(21, 91, 42, 0.08) !important;
}

.topbar-icon:hover i,
.icon-btn:hover i {
    color: var(--brand-primary, #155b2a) !important;
}

.topbar-icon:active,
.icon-btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.topbar-icon:focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--status-success, #16a34a) !important;
    outline-offset: 2px !important;
}

/* Canonical Header Dropdown Menu */
.icon-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background-color: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: var(--radius-sm, 10px);
    box-shadow: var(--shadow-dropdown, 0 12px 28px rgba(15, 23, 42, 0.12));
    overflow: hidden;
    z-index: 1000;
    box-sizing: border-box;
    padding: 6px 0;
}

.icon-menu.show {
    display: block;
}

.icon-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-body, #334155);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}

.icon-menu-item i {
    width: 16px;
    text-align: center;
    font-size: 0.92rem;
    color: var(--brand-primary, #155b2a);
    flex-shrink: 0;
}

.icon-menu-item:hover {
    background-color: var(--brand-primary-soft, #edf5ee);
    color: var(--brand-primary-dark, #0d3f1d);
}

/* 3. Unified Dashboard Summary & Stat Cards */
.dashboard-stats,
.dash-stats,
.analytics-kpi-grid,
.recs-kpi-grid,
.reports-kpi-bar,
.eis-stats-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    box-sizing: border-box;
}

.eis-stats-grid:not(.grid-4col):not(.eis-stats-grid-4):not(.grid-3col):not(.grid-2col) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.eis-stats-grid.grid-4col,
.eis-stats-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eis-stats-grid.grid-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.eis-stats-grid.grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.eis-stats-grid .stat-label,
.principal-section .stat-label,
.recs-kpi-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.dashboard-stat-card,
.dash-stat-card,
.kpi-card,
.recs-kpi-card,
.report-kpi-card {
    min-height: 104px;
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    box-sizing: border-box;
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    min-width: 0;
}

.dashboard-stat-card:hover,
.dash-stat-card:hover,
.kpi-card:hover,
.recs-kpi-card:hover,
.report-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--surface-border-strong);
}

.dash-stat-icon,
.stat-icon,
.kpi-icon-wrap,
.recs-kpi-icon,
.report-kpi-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.dash-stat-label,
.stat-label,
.kpi-label,
.report-kpi-title {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-stat-value,
.stat-value,
.kpi-value,
.recs-kpi-value,
.report-kpi-value {
    display: block;
    color: var(--text-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin: 2px 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value-range {
    font-size: clamp(0.95rem, 1.05vw, 1.15rem) !important;
    letter-spacing: -0.4px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
}

.dash-stat-sub,
.stat-small,
.kpi-meta,
.recs-kpi-sub,
.report-kpi-sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.80rem;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: normal;
}

/* 4. Unified Dashboard Panels */
.dashboard-panel,
.principal-panel {
    width: 100%;
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-sizing: border-box;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.dashboard-panel:hover,
.principal-panel:hover {
    box-shadow: var(--shadow-md);
}

.dash-panel-head,
.panel-header,
.principal-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-title {
    margin: 0;
    color: var(--text-heading);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.panel-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

/* 5. Canonical Horizontal Scrolling Table Containers */
.student-table-wrapper,
.activity-table-wrapper,
.dash-table-wrap,
.scores-table-responsive,
.analytics-table-wrapper,
.recs-table-responsive,
.reports-table-responsive,
.principal-table-wrapper,
.dss-table-wrapper,
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
    background-color: var(--surface-card);
    box-shadow: var(--shadow-sm);
    margin-top: 12px;
    margin-bottom: 12px;
}

.student-table-wrapper table,
.activity-table-wrapper table,
.dash-table-wrap table,
.scores-table-responsive table,
.analytics-table-wrapper table,
.recs-table-responsive table,
.reports-table-responsive table,
.principal-table-wrapper table,
.dss-table-wrapper table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: auto;
}

.student-table-wrapper table th,
.activity-table-wrapper table th,
.dash-table-wrap table th,
.scores-table-responsive table th,
.analytics-table-wrapper table th,
.recs-table-responsive table th,
.reports-table-responsive table th,
.principal-table-wrapper table th,
.dss-table-wrapper table th {
    padding: 13px 16px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background-color: var(--surface-subtle);
    color: var(--text-heading);
    border-bottom: 2px solid var(--surface-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-table-wrapper table td,
.activity-table-wrapper table td,
.dash-table-wrap table td,
.scores-table-responsive table td,
.analytics-table-wrapper table td,
.recs-table-responsive table td,
.reports-table-responsive table td,
.principal-table-wrapper table td,
.dss-table-wrapper table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-body);
    font-size: 0.88rem;
    vertical-align: middle;
}

.student-table-wrapper table tbody tr:hover,
.activity-table-wrapper table tbody tr:hover,
.dash-table-wrap table tbody tr:hover,
.scores-table-responsive table tbody tr:hover,
.analytics-table-wrapper table tbody tr:hover,
.recs-table-responsive table tbody tr:hover,
.reports-table-responsive table tbody tr:hover,
.principal-table-wrapper table tbody tr:hover,
.dss-table-wrapper table tbody tr:hover {
    background-color: var(--surface-subtle);
    transition: background-color var(--transition-fast);
}

/* Assessment Scores, Strand Summary & Evaluation Roster Tables — Full Content Area Fit (No Horizontal Scroll on Desktop) */
.scores-table-responsive table.scores-compact-table,
#scoresDataTable.scores-compact-table,
.strand-table-responsive table.strand-summary-table,
#strandSummaryTable.strand-summary-table,
.roster-table-responsive table.roster-table,
#studentRosterTable.roster-table,
.principal-table-wrapper table.roster-compact-table,
#principalRosterTable.roster-compact-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
}

@media (min-width: 901px) {
    .scores-table-card .scores-table-responsive {
        overflow-x: hidden !important;
    }
}

/* 6. Canonical Modal Dialog Overlays */
.modal-overlay {
    z-index: 10000 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(15, 23, 42, 0.65) !important;
}

/* 6.1 Canonical Mobile Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s ease);
    pointer-events: none;
}

.sidebar-overlay.active,
body.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.sidebar-close-btn { display: none; }

.mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e8f0);
    color: var(--text-dark, #1e293b);
    font-size: 16px;
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease);
    margin-right: 10px;
    flex-shrink: 0;
}

.mobile-sidebar-toggle:hover {
    background: var(--surface-bg, #f8fafc);
    border-color: #cbd5e1;
}

/* 6.2 Canonical Empty State System */
.cc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 20px;
    width: 100%;
    box-sizing: border-box;
}

.cc-empty-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-primary-soft, #edf5ee);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--brand-primary, #155b2a);
    box-shadow: 0 2px 6px rgba(21, 91, 42, 0.06);
    flex-shrink: 0;
}

.cc-empty-icon-wrap svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cc-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #1e293b);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.cc-empty-desc {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    margin: 0;
    max-width: 420px;
    line-height: 1.45;
}

/* 7. Universal Responsive Breakpoints for All Dashboards */
@media (max-width: 1200px) {
    .dashboard-stats,
    .dash-stats,
    .analytics-kpi-grid,
    .recs-kpi-grid,
    .reports-kpi-bar,
    .eis-stats-grid,
    .eis-stats-grid-4,
    .eis-stats-grid.grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .sidebar-close-btn { display: none; }

.mobile-sidebar-toggle {
        display: inline-flex !important;
    }

    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .dashboard-wrapper {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    /* Off-canvas Sliding Drawer for Mobile & Tablet */
    .dashboard-sidebar,
    .dashboard-sidebar:hover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 270px !important;
        max-width: 82vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(-105%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        padding: 20px 14px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: var(--brand-primary, var(--primary-green, #155b2a)) !important;
    }

    body.sidebar-open .dashboard-sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
    }

    .dashboard-sidebar .sidebar-brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        position: relative !important;
        width: 100% !important;
        padding: 0 0 16px 0 !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .dashboard-sidebar .sidebar-logo,
    .sidebar-logo {
        width: 155px !important;
        height: 65px !important;
        min-width: 140px !important;
        min-height: 55px !important;
        max-width: 165px !important;
        max-height: 72px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .dashboard-sidebar .sidebar-brand-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 65px !important;
    }

    .sidebar-brand-name,
    .sidebar-brand-sub,
    .dashboard-sidebar .sidebar-brand-sub {
        opacity: 1 !important;
        max-width: none !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 0.8rem !important;
    }

    .dashboard-sidebar .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .dashboard-sidebar .sidebar-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        text-align: left !important;
        color: #ffffff !important;
    }

    .dashboard-sidebar .sidebar-link .link-text {
        display: inline-block !important;
        opacity: 1 !important;
        max-width: none !important;
        margin-left: 10px !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
    }

    .dashboard-sidebar .sidebar-link.active {
        background-color: #ffffff !important;
        color: var(--brand-primary, var(--primary-green, #155b2a)) !important;
    }

    .dashboard-sidebar .sidebar-link.active i,
    .dashboard-sidebar .sidebar-link.active .link-text {
        color: var(--brand-primary, var(--primary-green, #155b2a)) !important;
    }

    .sidebar-close-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #ffffff;
        font-size: 15px;
        cursor: pointer;
    }

    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9998 !important;
    }

    .dashboard-main {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 20px 16px !important;
        overflow: visible !important;
    }

    .dash-row-2col,
    .analytics-grid-2col,
    .principal-summary-grid,
    .pillar-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .dashboard-stats,
    .dash-stats,
    .analytics-kpi-grid,
    .recs-kpi-grid,
    .reports-kpi-bar,
    .eis-stats-grid,
    .eis-stats-grid-4,
    .eis-stats-grid.grid-4col,
    .eis-stats-grid.grid-3col,
    .eis-stats-grid.grid-2col {
        grid-template-columns: 1fr !important;
    }

    .dashboard-topbar {
        padding: 16px 18px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .topbar-left {
        width: 100% !important;
    }

    .topbar-right,
    .dashboard-topbar-icons {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .dash-panel-head,
    .panel-header,
    .principal-panel-heading,
    .analytics-header,
    .recs-header,
    .reports-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .dashboard-panel,
    .principal-panel {
        padding: 16px !important;
    }
}

/* =========================================================
   ASSESSMENT MODAL NAVIGATION TABS — NO SCROLLBAR SAFEGUARD
   ========================================================= */
.score-modal-nav-tabs {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.score-modal-nav-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}