/* UASC College Management System - Modern Design */
/* Design Philosophy: Clean, Professional, Educational Excellence */

/* Import Fonts — MUST be first rule in CSS */

:root {
    /* Color Palette - Academic Blue & Gold */
    --primary: #1a365d;
    --primary-light: #2d4a7c;
    --primary-dark: #0f1f3d;
    --accent: #d4af37;
    --accent-light: #e8c968;
    --accent-dark: #b8941f;
    
    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray-800);
    background: var(--gray-50);
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin-bottom: var(--space-md);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: var(--space-md);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent);
}

/* Container */
.container {
    max-width: 100vw;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Wrapper that pins both the header and the announcement ticker as a
   single unit when the user scrolls. Sticky lives on the wrapper (not
   on .main-header) so the ticker stays glued to the bottom of the
   header at every breakpoint without needing to know the header's
   rendered height. */
.site-top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Top Utility Bar */
.top-bar {
    background: var(--primary-dark);
    color: var(--white);
    padding: 0; /* Removed vertical padding to let links fill the space */
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1001;
}
.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-bar-contact {
    display: flex;
    gap: 1.5rem;
}
.top-bar-contact span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.8);
}
.top-bar-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.top-bar-links a {
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    padding: 12px 0;
    display: inline-block;
    transition: color 0.2s;
}
.top-bar-links a:hover,
.top-bar-links a.active {
    color: var(--accent);
}
.top-bar-links .sep {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

/* Header Styles */
.main-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: var(--white);
    padding: var(--space-lg) 0;
    box-shadow: var(--shadow-lg);
    /* Sticky on the header itself so admin pages (which render
       .main-header WITHOUT a .site-top-bar wrapper) still pin the
       header on scroll. On the public homepage, the .site-top-bar
       wrapper is also sticky at top:0 — both engaging together is
       harmless: the wrapper sticks first and the inner sticky never
       has to fire because its scroll container never moves past it. */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.logo-img {
max-width: 50px; 
    /* background: var(--accent); */
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* border: 2px solid rgba(255, 255, 255, 0.25); */
}

.logo-text h1 {
    font-size: 1.5rem;
    color: var(--white);
    margin: 0;
}

.logo-text p {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
}

/* Navigation */
.main-nav > ul {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
    align-items: center;
}

.main-nav a {
    color: var(--white);
    font-weight: 500;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-accent {
    background: var(--accent);
    color: var(--primary);
}

.btn-accent:hover {
    background: var(--error);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-warning {
    background: var(--warning);
    color: var(--white);
}

.btn-error {
    background: var(--error);
    color: var(--white);
}

.btn-outline {
    background: #ffffff;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

/* Card Styles */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.card-header {
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--gray-200);
}

.card-title {
    margin: 0;
    color: var(--primary);
}

.card-body {
    color: var(--gray-700);
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: calc(100vh - 100px);
}

.sidebar {
    position: fixed;
    top: 97px;
    left: 0;
    width: 280px;
    height: calc(100vh - 100px);
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    box-shadow: var(--shadow-lg);
    z-index: 998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}



.sidebar-menu {
    list-style: none;
    flex: 1;                  /* ✅ take full height */
    overflow-y: auto;         /* ✅ scroll only menu */
    display: flex;
    flex-direction: column;
}

.sidebar-menu li {
    margin: 0;
    /* Auto-margin removed: it pushed every <li> apart in the column-flex
       container, so the menu items "spread" across the full sidebar
       height with huge gaps between them. Account items now live in the
       header dropdown so there is no need for any item to be pushed to
       the bottom. */
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
    border-left-color: var(--accent);
}

.sidebar-menu .icon {
    font-size: 1.25rem;
}

/* Submenu Styles */
.has-submenu .submenu-toggle {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.has-submenu.expanded .submenu-toggle {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    background: rgba(0, 0, 0, 0.2);
    display: none;
    padding: 0;
}

.has-submenu.expanded + .sidebar-submenu {
    display: block;
}

.sidebar-submenu a {
    padding: var(--space-sm) var(--space-xl) var(--space-sm) calc(var(--space-xl) + 2rem);
    font-size: 0.9rem;
}

.sidebar-submenu a:hover,
.sidebar-submenu a.active {
    border-left-color: transparent;
    background: rgba(255, 255, 255, 0.05);
}

.main-content {
    flex: 1;
    padding: var(--space-2xl);
    background: var(--gray-50);
    margin-left: 280px;     /* same as sidebar width */
    padding: 20px;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--primary);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-card.accent {
    border-left-color: var(--accent);
}

.stat-card.success {
    border-left-color: var(--success);
}

.stat-card.warning {
    border-left-color: var(--warning);
}

.stat-card.error {
    border-left-color: var(--error);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
    background: var(--primary);
    color: var(--white);
}

.stat-card.accent .stat-icon {
    background: var(--accent);
    color: var(--primary);
}

.stat-card.success .stat-icon {
    background: var(--success);
}

.stat-card.warning .stat-icon {
    background: var(--warning);
}

.stat-card.error .stat-icon {
    background: var(--error);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin: var(--space-sm) 0;
}

.stat-change {
    font-size: 0.875rem;
    color: var(--success);
}

.stat-change.negative {
    color: var(--error);
}

/* Table Styles */
.table-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}

thead th {
    padding: var(--space-lg);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: var(--transition);
}

tbody tr:hover {
    background: var(--gray-50);
}

tbody td {
    padding: var(--space-lg);
    color: var(--gray-700);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--space-lg);
}

label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 600;
    color: var(--gray-700);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
    background: var(--white);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.badge-primary {
    background: var(--error);
    color: var(--white);
}

/* Alert Styles */
.alert {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
}

.alert-success {
    background: #d1fae5;
    border-color: var(--success);
    color: #065f46;
}

.alert-error {
    background: #fee2e2;
    border-color: var(--error);
    color: #991b1b;
}

.alert-warning {
    background: #fef3c7;
    border-color: var(--warning);
    color: #92400e;
}

.alert-info {
    background: #dbeafe;
    border-color: var(--info);
    color: #1e40af;
}

/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: pulse 15s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.login-box {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 450px;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.login-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

/* Footer */
.main-footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: var(--space-2xl) 0;
    margin-top: var(--space-2xl);
}

.footer-content {
    text-align: center;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Skip to main content link (accessibility) ──
   Hidden using the sr-only/clip pattern — invisible to sighted users
   but discoverable by screen readers and keyboard tab order. Becomes a
   visible button only when keyboard-focused. The previous `top:-3rem`
   approach worked but still occupied a sliver of the layout, which on
   some browsers/zoom levels could appear as a faint band.            */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
    z-index: 99999;
}
.skip-link:focus,
.skip-link:focus-visible {
    width: auto;
    height: auto;
    padding: 0.5rem 1.25rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    top: 0.5rem;
    left: 0.5rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Accessibility: visible focus ring for keyboard users ── */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Hero heading — responsive via clamp instead of inline style */
.public-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 6rem 0;
    color: var(--white);
    text-align: center;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
}

.public-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #1a285bb6;
}

.public-hero > .container {
    position: relative;
    z-index: 2;
}

.hero-heading {
    color: white;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* Hero sub-text */
.hero-sub {
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* Mobile navigation drawer for public pages (index.php, career.php) */
.public-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
}
.public-nav-drawer.open { display: flex; }
.public-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.public-nav-panel {
    position: relative;
    width: 280px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
    padding: 2rem 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.public-nav-panel ul {
    list-style: none;
    padding: 1rem 0;
    margin-top: 1rem;
}
.public-nav-panel ul li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.public-nav-panel ul li a:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent);
    border-left-color: var(--accent);
}
.public-nav-close {
    align-self: flex-end;
    margin: 0 1.5rem 0.5rem;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.public-nav-close:hover { background: rgba(255,255,255,0.2); }

/* ── Application form modal (homepage Apply popup) ──────────────────
   The form was previously rendered inline as a section on the public
   page. It now lives in a centered modal that opens via:
     • "Apply Now" CTA in the hero,
     • "Apply" link in the header / mobile drawer,
     • per-course "Apply" buttons on the courses listing.
   z-index sits above the sticky top-bar (1000) and the public nav
   drawer (1200) so it's always the topmost surface when open. */
.application-modal[hidden] { display: none !important; }
.application-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.application-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 0;
}
.application-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.45);
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6vh);
    overflow: hidden;
    animation: app-modal-in .22s ease-out;
}
@keyframes app-modal-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.application-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: var(--white);
    flex-shrink: 0;
}
.application-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.application-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}
.application-modal-close:hover { background: rgba(255,255,255,0.3); }
.application-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}
@media (max-width: 640px) {
    .application-modal { padding: 0; }
    .application-modal-panel {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    .application-modal-body { padding: 1rem; }
    .application-modal-header { padding: .9rem 1rem; }
    .application-modal-title { font-size: 1rem; }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   RESPONSIVE DESIGN — Full Multi-Breakpoint System
   Devices: Desktop (1280+) → Laptop (1024) → Tablet (768)
            → Phablet (640) → Mobile (480) → Small (360)
   ============================================================ */

/* ── Hamburger toggle button (hidden on desktop) ───────────── */
.sidebar-toggle {
    display: none; /* shown via media query below */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    transition: background .2s;
    margin-right: var(--space-sm);
    flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.15); }

/* Hamburger icon: three stacked spans */
.sidebar-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.sidebar-toggle span + span { margin-top: 5px; }

/* Hamburger animation to 'X' when active */
.sidebar-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-toggle.active span:nth-child(2) {
    opacity: 0;
}
.sidebar-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay that closes sidebar when tapped on mobile.
   Must be ABOVE the sticky header (1000) but BELOW the sidebar (1100).
   We keep it inert (no pointer events) until .active is added — and we
   force-hide it on desktop (>1024px) so a stuck .active class on a
   resized window can't dim the desktop layout. */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1050;
    pointer-events: none;
}
.sidebar-overlay.active {
    display: block;
    pointer-events: auto;
}
@media (min-width: 1025px) {
    /* Desktop: there is no mobile drawer, so the overlay must never show
       — even if some stale state left .active on it. */
    .sidebar-overlay,
    .sidebar-overlay.active { display: none !important; }
    /* Defensive: also undo any body scroll-lock that toggleSidebar() may
       have left behind from a previous narrow-viewport state.
       We deliberately use `overflow-y: visible` (not `auto`) — setting
       both overflow axes to anything other than `visible` turns <body>
       into the scroll container, which silently breaks
       `position: sticky` on descendants like .site-top-bar (the body's
       height is auto-sized to content so it never actually scrolls,
       and sticky's nearest scrollport stops engaging). */
    body { overflow-x: hidden; overflow-y: visible; }
}

/* Sidebar open state on mobile */
.sidebar.open {
    transform: translateX(0) !important;
}

/* ── 1024px — Tablet Landscape ─────────────────────────────── */
@media (max-width: 1024px) {
    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 1100;
        margin-top: -35px;
        height: 92vh;
        padding-bottom: 60px;
    }

    /* Content area fills full width */
    .main-content {
        margin-left: 0 !important;
        padding: var(--space-lg);
    }

    .dashboard-container {
        flex-direction: column;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Show hamburger button */
    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Stats grid — 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* KPI counter grid */
    .kc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── 768px — Tablet Portrait / Large Phone ──────────────────── */
@media (max-width: 768px) {
    /* Typography scale-down */
    html { font-size: 15px; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.1rem; }

    /* Header — keep single row, compress spacing */
    .header-content {
        flex-wrap: nowrap;
        gap: var(--space-sm);
    }
    .logo-text h1 { font-size: 1.1rem; }
    .logo-text p  { font-size: 0.72rem; }
    /* Nav stays horizontal — shrink gaps and font */
    .main-nav > ul  {
        flex-direction: row;
        gap: var(--space-sm);
        flex-wrap: nowrap;
    }
    .main-nav a {
        font-size: 0.82rem;
        padding: var(--space-xs) var(--space-sm);
    }

    /* Grids → single column */
    .stats-grid,
    .grid-2,
    .grid-3,
    .kc-grid {
        grid-template-columns: 1fr;
    }

    /* Tables — horizontal scroll */
    .table-container,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table, .table { min-width: 560px; }

    /* Cards */
    .card { padding: var(--space-lg); }

    /* Login box */
    .login-box {
        padding: var(--space-xl) var(--space-lg);
        margin: var(--space-md);
        max-width: calc(100% - 2rem);
    }

    /* Main content padding */
    .main-content { padding: var(--space-md); }
    .main { padding: var(--space-md); }

    /* Page header stacks on narrow */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header .page-actions { width: 100%; }

    /* Flex-between stacks */
    .flex-between {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    /* Toolbar wraps */
    .toolbar { flex-direction: column; align-items: stretch; }
    .sb, .flt { min-width: 100%; }

    /* Info grid */
    .info-grid { grid-template-columns: 1fr; }

    /* Stat value smaller */
    .stat-value { font-size: 1.6rem; }
}

/* ── 640px — Phablet ─────────────────────────────────────────── */
@media (max-width: 640px) {
    html { font-size: 14px; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }

    /* Top bar: keep the user dropdown (My Profile / Change Password /
       Settings / Logout) and notification bell reachable on phones. The
       sidebar drawer covers page navigation; account actions stay here. */
    .main-nav > ul {
        gap: var(--space-xs);
    }
    .main-nav a {
        font-size: 0.78rem;
        padding: var(--space-xs) var(--space-sm);
    }
    /* Hide non-essential top-bar links on phones; user/notification
       dropdowns are kept by virtue of not having this class. */
    .main-nav .nav-mobile-hide { display: none; }
    /* Pin the hamburger to the right edge — without this it floats in
       the middle on public pages where main-nav is empty after the
       nav-mobile-hide items collapse. */
    .main-header .sidebar-toggle { margin-left: auto; }
    /* Collapse the main-nav element when it contains no visible
       children (public pages on mobile). :has() falls back gracefully
       on older browsers — the only side-effect is the existing layout. */
    .main-nav:not(:has(li:not(.nav-mobile-hide))) { display: none; }

    /* Keep header single tight row */
    .header-content {
        gap: var(--space-xs);
        padding: 0;
    }

    /* Login */
    .login-container { padding: var(--space-sm); }
    .login-box {
        padding: var(--space-lg) var(--space-md);
        border-radius: var(--radius-lg);
    }
    .login-logo { width: 60px; height: 60px; font-size: 1.5rem; }

    /* Buttons full-width on very small screens */
    .btn { padding: var(--space-sm) var(--space-md); font-size: 0.875rem; }
    .btn-row { flex-direction: column; }
    .btn-row .btn,
    .btn-row .apply-btn,
    .btn-row .btn-submit { width: 100%; justify-content: center; }

    /* Form grids */
    .grid2, .form-grid { grid-template-columns: 1fr; }

    /* Badges — smaller */
    .badge { font-size: 0.65rem; padding: 0.2rem 0.55rem; }

    /* Action buttons wrap */
    .action-btns { flex-wrap: wrap; gap: .25rem; }
    .act-btn { font-size: .7rem; padding: .25rem .5rem; }

    /* Stats card */
    .stat-card { padding: var(--space-lg); }
    .stat-icon { width: 48px; height: 48px; font-size: 1.4rem; }
    .stat-value { font-size: 1.5rem; }

    /* Card hover lift disabled (interferes with touch) */
    .card:hover { transform: none; }
    .stat-card:hover { transform: none; }
}

/* ── 480px — Mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
    html { font-size: 13.5px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }

    /* Header compact — z-index lives on the sticky wrapper now so the
       header + ticker block sits above mobile drawers/overlays. */
    .main-header { padding: var(--space-md) 0; }
    .site-top-bar { z-index: 2000; }
    .logo-img { width: 36px; height: 36px; font-size: 1rem; }
    .logo-text { display: none; }      /* logo title/subtitle would push the user trigger off-screen */
    .logo { gap: var(--space-sm); flex-shrink: 1; min-width: 0; }

    /* Right-side nav (bell + user trigger) must never shrink or wrap off-screen */
    .header-content { gap: var(--space-xs); }
    .sidebar-toggle { flex-shrink: 0; margin-right: 0; }
    .main-nav { flex-shrink: 0; }
    .main-nav > ul { flex-wrap: nowrap; }

    /* Container padding */
    .container { padding: 0 var(--space-md); }

    /* Main content */
    .main-content { padding: var(--space-sm); }

    /* Table cells — tighter padding */
    tbody td, .table tbody td { padding: .6rem .75rem; font-size: .8rem; }
    thead th, .table thead th { padding: .65rem .75rem; font-size: .72rem; }

    /* Info rows */
    .info-row { flex-direction: column; gap: .2rem; }
    .info-val  { text-align: left; }

    /* Page header */
    .page-header h2 { font-size: 1.1rem; }

    /* Login box — full stretch */
    .login-box { margin: .5rem; padding: var(--space-md); }
    .login-header { margin-bottom: var(--space-lg); }

    /* Filter tabs scroll */
    .filter-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ── 360px — Small / Compact Mobile ─────────────────────────── */
@media (max-width: 360px) {
    html { font-size: 13px; }
    .stats-grid { gap: var(--space-sm); }
    .card { padding: var(--space-md); }
    .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .stat-value { font-size: 1.3rem; }
    .kc-num { font-size: 1.3rem; }
    table, .table { min-width: 460px; }
}

/* ============================================================
   MODULE UTILITY CLASSES (used across all module pages)
   ============================================================ */

/* Color badge variants used in tables */
.bg-blue   { background:#dbeafe; color:#1e40af; }
.bg-green  { background:#d1fae5; color:#065f46; }
.bg-red    { background:#fee2e2; color:#991b1b; }
.bg-yellow { background:#fef3c7; color:#92400e; }
.bg-purple { background:#ede9fe; color:#5b21b6; }
.bg-orange { background:#ffedd5; color:#9a3412; }
.bg-gray   { background:#f1f5f9; color:#475569; }

/* Toolbar / filter bar */
.toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sb {
    flex: 1;
    min-width: 180px;
    padding: .55rem .9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .85rem;
    outline: 0;
    background: #fff;
}
.sb:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,54,93,.08); outline: 2px solid var(--accent); outline-offset: 2px; }
.flt {
    padding: .55rem .75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .83rem;
    outline: 0;
    background: #fff;
    cursor: pointer;
}
.flt:focus { border-color: var(--primary); outline: 2px solid var(--accent); outline-offset: 2px; }

/* Action buttons in tables */
.act-btn {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: .3rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
}
.ab-edit  { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.ab-edit:hover  { background:#2563eb; color:#fff; }
.ab-del   { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.ab-del:hover   { background:#dc2626; color:#fff; }
.ab-view  { background:#ecfdf5; color:#059669; border-color:#a7f3d0; }
.ab-view:hover  { background:#059669; color:#fff; }
.ab-approve { background:#ecfdf5; color:#059669; border-color:#a7f3d0; }
.ab-approve:hover { background:#059669; color:#fff; }
.ab-reject  { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.ab-reject:hover  { background:#dc2626; color:#fff; }

/* Avatar + name cell in tables */
.faculty-cell, .student-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,#1a365d,#2d4a7c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fn { font-size: .88rem; font-weight: 700; color: #1a365d; }
.fe { font-size: .74rem; color: #94a3b8; }

/* Breadcrumb */
.breadcrumb-nav { margin-bottom: 1.25rem; }
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .83rem;
    color: var(--gray-500);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin-right: .25rem;
    color: var(--gray-400);
}
.breadcrumb-item.active { color: var(--gray-600); font-weight: 500; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Back button link */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .83rem;
    transition: color .15s;
}
.back-btn:hover { color: #fff; }

/* Empty state placeholder */
.empty-state {
    text-align: center;
    padding: 3.5rem 2rem;
    color: #94a3b8;
}
.empty-state i { font-size: 2.5rem; color: #e2e8f0; margin-bottom: 1rem; display: block; }

/* Alert shorthand variants */
.alert-s {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #065f46;
    padding: .85rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.alert-e {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: .85rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Action buttons row */
.action-btns {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}
.action-link {
    color: var(--primary);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.action-link:hover { text-decoration: underline; }

/* Apply / submit button */
.apply-btn, .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.25rem;
    background: linear-gradient(135deg,#1a365d,#2d4a7c);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}
.apply-btn:hover, .btn-submit:hover { opacity: .88; }

/* Btn load / btn-row */
.btn-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.btn-load {
    padding: .5rem 1rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: .83rem;
    cursor: pointer;
    color: #374151;
}
.btn-load:hover { background: #e2e8f0; }

/* Generic page-content wrapper used by some older pages */
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Stats / dashboard card tiles */
.stat-tile {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e8edf5;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.stat-value { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: .8rem; color: #64748b; margin-top: .2rem; }

/* Filter tabs (used in notifications, etc.) */
.filter-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.tab-btn {
    padding: .45rem 1rem;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: .83rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.tab-btn.active, .tab-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Section heading inside pages */
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e8edf5;
}

/* Progress bar utility */
.progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), #2d4a7c);
    transition: width .3s ease;
}

/* Tag chip */
.chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
}

/* Info grid (key-value pairs) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.info-item label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
}
.info-item span {
    font-size: .9rem;
    color: #1a365d;
    font-weight: 600;
}

/* ============================================================
   MISSING UTILITY CLASSES — added for module consistency
   ============================================================ */

/* .ct — compact card section title with icon spacing */
.ct {
    font-size: .9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: .9rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #e8edf5;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* .info-row / .info-label / .info-val — key-value pair rows */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .55rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: .875rem;
    gap: 1rem;
}
.info-row:last-child { border-bottom: none; }
.info-label {
    color: #64748b;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
    min-width: 120px;
}
.info-val {
    color: #1e293b;
    font-weight: 600;
    font-size: .875rem;
    text-align: right;
}

/* .fg — compact form group (shorthand for .form-group) */
.fg {
    margin-bottom: .9rem;
}
.fg label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* .grid2 — 2-column grid shorthand */
.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 640px) {
    .grid2 { grid-template-columns: 1fr; }
}

/* .form-input — class-based form input (supplements attribute selectors) */
.form-input {
    width: 100%;
    padding: .6rem .85rem;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: .9rem;
    transition: var(--transition);
    background: var(--white);
    color: var(--gray-800);
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 54, 93, .1);
}

/* .form-label — class-based label */
.form-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: .35rem;
    letter-spacing: .02em;
}

/* .form-grid — responsive 2-col form layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* .form-row — responsive auto-fit form layout. Used by /profile.php and
 * modules/student/profile.php. Without this rule, form-row collapsed to a
 * plain block and every .form-group inside stretched to 100% width.
 * auto-fit with minmax handles rows of 1, 2, or 3 fields gracefully. */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-row .form-group {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

/* .form-section — grouped block of fields under an h3 heading.
 * Used by modules/student/profile.php (Basic, Student Details, ID,
 * Community, Bank, Family, Photo). Without this rule the seven
 * sections rendered as a single flat box. */
.form-section {
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    margin-bottom: 1.25rem;
}
.form-section:first-of-type { padding-top: 0; }
.form-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.form-section > h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary, #1a365d);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.form-section > h3::before {
    content: "";
    width: 4px;
    height: 1rem;
    background: var(--primary, #1a365d);
    border-radius: 2px;
}

/* .form-actions — footer button row inside a form */
.form-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    margin-top: 1.25rem;
}

/* .table — class on <table> elements (same visual as bare table {}) */
.table {
    width: 100%;
    border-collapse: collapse;
}
.table thead {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
}
.table thead th {
    padding: .85rem 1rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    white-space: nowrap;
}
.table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background .15s;
}
.table tbody tr:hover { background: var(--gray-50); }
.table tbody td {
    padding: .8rem 1rem;
    color: var(--gray-700);
    font-size: .875rem;
    vertical-align: middle;
}

/* .kc / .kc-num / .kc-label — compact KPI counter cards */
.kc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.kc {
    background: var(--white);
    border: 1px solid #e8edf5;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.kc-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: .25rem;
}
.kc-label {
    font-size: .72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* .btn-secondary — neutral secondary button */
.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}
.btn-secondary:hover {
    background: var(--gray-300);
    color: var(--gray-900);
}

/* .btn-sm — small button modifier */
.btn-sm {
    padding: .3rem .75rem;
    font-size: .8rem;
    border-radius: var(--radius-sm);
}

/* .btn-danger — red destructive action button */
.btn-danger {
    background: var(--error);
    color: var(--white);
}
.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* .notice-box — notification / announcement item */
.notice-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: .75rem;
}

/* .rule-item — numbered list rule row */
.rule-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .45rem 0;
    font-size: .875rem;
    color: #374151;
    border-bottom: 1px solid #f1f5f9;
}
.rule-item:last-child { border-bottom: none; }

/* .stop-item / .stop-dot / .stop-name — route stop list */
.stop-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.stop-item:last-child { border-bottom: none; }
.stop-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.stop-name {
    font-size: .875rem;
    color: #374151;
    font-weight: 500;
}

/* .stat-info — text block inside stat cards */
.stat-info h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 .25rem;
    font-family: var(--font-body);
}
.stat-info p {
    font-size: .8rem;
    color: #64748b;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* .page-header — module page title bar */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: .75rem;
}
.page-header h2 {
    font-size: 1.35rem;
    color: var(--primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.page-header .page-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

/* ── Print styles ── */
@media print {
    .sidebar,
    .main-header,
    .main-footer,
    .sidebar-toggle,
    .sidebar-overlay,
    .page-actions,
    .btn,
    .toolbar,
    .filter-tabs,
    nav { display: none !important; }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .dashboard-container {
        display: block !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    a { color: #000 !important; text-decoration: underline !important; }
}

/* ── Table horizontal scroll fade affordance ── */
.table-container {
    position: relative;
}
@media (max-width: 768px) {
    .table-container::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
        pointer-events: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
}

/* card hover lift suppressor for inner action areas */
.card.no-hover:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}
.idcard-wrapper{
    display:flex;
    gap:20px;
    justify-content:center;
    fl
    flex-wrap:wrap;
}

/* Header user dropdown + circular avatar */
.dropdown { position: relative; }
.main-nav a.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.user-trigger-avatar,
.dropdown-user-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;
}
.user-trigger-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
.dropdown-user-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
.user-trigger-avatar::before,
.dropdown-user-avatar::before {
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-trigger-avatar img,
.dropdown-user-avatar img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.user-trigger-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.user-trigger-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.user-trigger-roles {
    font-size: 0.72rem;
    color: var(--accent);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    transition: var(--transition);
}
.user-trigger:hover .user-trigger-name,
.user-trigger:hover .user-trigger-roles {
    white-space: normal;
    max-width: 250px;
    overflow: visible;
    text-overflow: clip;
}
@media (max-width: 1024px) {
    .user-trigger-name, .user-trigger-roles { max-width: 120px; }
}
@media (max-width: 640px) {
    .main-nav a.user-trigger {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .user-trigger-info,
    .main-nav a.user-trigger .user-trigger-caret { display: none !important; }
}
/* User dropdown — compact mode. Header used to stack name + role +
   email + last-login at full size (≈ 110px tall); shrunk so the whole
   dropdown sits in ~half the vertical space without losing any info. */
.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    background: var(--gray-50);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.dropdown-user-meta { min-width: 0; flex: 1; line-height: 1.25; }
.dropdown-user-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-user-role {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.dropdown-user-email {
    color: var(--gray-600);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.dropdown-user-last-login {
    font-size: 0.68rem;
    color: var(--gray-500);
    margin-top: 1px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    min-width: 200px;
    margin-top: 0;
    z-index: 1000;
    padding: 0.5rem 0;
    display: none;
}

/* Bridging the gap between trigger and menu to prevent accidental closing */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li { display: block; width: 100%; margin: 0; }
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-menu a + a { border-top: 1px solid var(--gray-100); }
.dropdown-menu a i { width: 16px; text-align: center; color: var(--gray-500); font-size: 0.85rem; }
.dropdown-menu a:hover { background: var(--gray-50); color: var(--gray-900); }
.dropdown-menu a:hover i { color: var(--gray-700); }
.dropdown-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.15rem 0;
}
.dropdown-menu a.dropdown-danger { color: #b91c1c; }
.dropdown-menu a.dropdown-danger i { color: #dc2626; }
.dropdown-menu a.dropdown-danger:hover { background: #fef2f2; color: #991b1b; }

/* ── Public announcement ticker (homepage) ───────────────────────────── */
/* Sits inside .site-top-bar as a sibling of .main-header — it inherits
   the wrapper's sticky behavior, so it pins to the bottom of the header
   automatically. Keep the background fully opaque so page content
   doesn't bleed through while it's pinned. */
.announcement-ticker {
    display: flex;
    align-items: stretch;
    background: #fffbeb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
    color: #78350f;
    font-size: 0.92rem;
    overflow: hidden;
}
.announcement-ticker-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: #f59e0b;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    flex-shrink: 0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    z-index: 1;
}
.announcement-ticker-label i { font-size: 0.95rem; }
.announcement-ticker-track {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    padding: 0.65rem 0;
}
.announcement-ticker-strip {
    display: inline-flex;
    gap: 3rem;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
}
.announcement-ticker:hover .announcement-ticker-strip { animation-play-state: paused; }
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ticker-item.is-urgent     { color: #b91c1c; }
.ticker-item.is-important  { color: #b45309; }
.ticker-item .ticker-dot   { font-size: 0.45rem; opacity: 0.6; }
.ticker-item .ticker-sep   { opacity: 0.45; padding: 0 0.15rem; }
.ticker-item .ticker-tag   {
    background: #b91c1c; color: #fff;
    font-size: 0.7rem; padding: 0.1rem 0.4rem;
    border-radius: 4px; letter-spacing: 0.04em;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
    .announcement-ticker { font-size: 0.85rem; }
    .announcement-ticker-label { padding: 0.5rem 0.7rem; font-size: 0.7rem; }
    .announcement-ticker-label span { display: none; }
    .announcement-ticker-strip { animation-duration: 45s; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .announcement-ticker-strip { animation: none; padding-left: 1rem; }
}

/* ============================================================
   NOTIFICATIONS UI REFINEMENTS
   ============================================================ */
.main-nav a.notification-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#notification-count {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    padding: 0.15rem 0.35rem;
    box-shadow: 0 0 0 2px var(--primary-dark);
    line-height: 1;
    transform: translate(50%, -30%);
}
@media (max-width: 640px) {
    #notification-count {
        top: 4px;
        right: 6px;
    }
}
#notification-dropdown {
    width: 340px;
    max-width: 90vw;
    padding: 0;
    overflow: hidden;
}
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.notification-mark-all {
    font-size: 0.75rem;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    transition: color 0.15s;
}
.notification-mark-all:hover {
    text-decoration: underline;
    color: var(--primary-light);
}
.notification-body {
    max-height: 380px;
    overflow-y: auto;
}
.notification-item {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.15s ease;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background: var(--gray-50);
}
.notification-item.unread {
    background: #eff6ff;
}
.notification-item.unread:hover {
    background: #dbeafe;
}
.notif-title {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}
.notif-msg {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.notif-time {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ============================================================
   RICH TEXT & ACADEMIC OVERVIEW FORMATTING
   ============================================================ */
.academic-content h2 {
    color: var(--primary);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    font-family: var(--font-display);
}
.academic-content h2:first-child {
    margin-top: 0;
}
.academic-content h3 {
    color: var(--primary-light);
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: 1.35rem;
}
.academic-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: var(--gray-700);
    text-align: justify;
}
.academic-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
.academic-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--gray-700);
}
.academic-content strong {
    color: var(--primary-dark);
    font-weight: 700;
}

/* ============================================================
   PUBLIC TABBED UI (ACADEMICS PAGE)
   ============================================================ */
.public-tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 2rem;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}
.public-tabs::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.public-tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: var(--transition);
}
.public-tab-btn:hover {
    color: var(--primary-light);
}
.public-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
}
.public-tab-pane { display: none; animation: fadeIn 0.3s ease-in-out; }
.public-tab-pane.active { display: block; }