/* ============================================================
   SOUTHERN PROVINCE RMS — Main Stylesheet
   MOBILE-FIRST: base styles = mobile, enhanced for larger screens
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --primary:        #1a56a0;
    --primary-dark:   #134080;
    --primary-light:  #e8f0fb;
    --secondary:      #2e7d32;
    --secondary-light:#e8f5e9;
    --accent:         #f57c00;
    --accent-light:   #fff3e0;
    --danger:         #c62828;
    --danger-light:   #ffebee;
    --warning:        #f9a825;
    --warning-light:  #fffde7;
    --info:           #0277bd;
    --info-light:     #e1f5fe;
    --bg:             #f4f6fb;
    --surface:        #ffffff;
    --surface-2:      #f8f9fc;
    --border:         #dde3ed;
    --border-dark:    #b0bec5;
    --text:           #1a2332;
    --text-muted:     #6b7a99;
    --text-light:     #9eaac0;
    --sidebar-width:      260px;
    --sidebar-collapsed:  64px;
    --topbar-height:      56px;
    --sidebar-bg:         #0f2041;
    --sidebar-text:       #c8d6ef;
    --sidebar-hover:      rgba(255,255,255,0.08);
    --sidebar-active:     rgba(255,255,255,0.15);
    --sidebar-border:     rgba(255,255,255,0.07);
    --font-body:  'DM Sans', sans-serif;
    --font-mono:  'DM Mono', monospace;
    --radius:     8px;
    --radius-lg:  12px;
    --shadow:     0 2px 8px rgba(26,34,50,0.08);
    --shadow-md:  0 4px 16px rgba(26,34,50,0.12);
    --transition: 0.22s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size:   14px;
    color:       var(--text);
    background:  var(--bg);
    margin:      0;
    line-height: 1.6;
    overflow-x:  hidden;
}

/* ============================================================
   LAYOUT — MOBILE FIRST
   Mobile  (<992px): sidebar is off-canvas, topbar is fixed
   Desktop (>=992px): sidebar always visible on left
   ============================================================ */

.wrapper { display: block; min-height: 100vh; }

/* Mobile: no left offset, push content below fixed topbar */
.main-content {
    margin-left: 0;
    min-width:   0;
    padding-top: var(--topbar-height);
    transition:  margin-left var(--transition);
}

/* Desktop: offset for sidebar */
@media (min-width: 992px) {
    .main-content {
        margin-left: var(--sidebar-width);
        padding-top: 0;
    }
    body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-collapsed);
    }
}

/* ── Dark overlay behind open sidebar (mobile) ───────────── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    1099;
}
.sidebar-overlay.active { display: block; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    position:       fixed;
    top:            0;
    left:           0;
    height:         100vh;
    height:         100dvh; /* dynamic viewport on mobile browsers */
    width:          var(--sidebar-width);
    background:     var(--sidebar-bg);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    z-index:        1100;
    box-shadow:     2px 0 16px rgba(0,0,0,0.25);
    /* Off-canvas by default on mobile */
    transform:      translateX(-100%);
    transition:     transform var(--transition);
}

/* Open state (mobile) */
.sidebar.sidebar-open { transform: translateX(0); }

/* Desktop: always visible */
@media (min-width: 992px) {
    .sidebar {
        transform:  translateX(0) !important;
        transition: width var(--transition);
    }
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed);
    }
}

/* ── Sidebar Header ───────────────────────────────────────── */
.sidebar-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       0 14px;
    height:        var(--topbar-height);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink:   0;
    /* Prevent header itself from overflowing */
    overflow:      hidden;
}

.sidebar-logo {
    width:           36px;
    height:          36px;
    min-width:       36px;   /* never shrink */
    background:      var(--primary);
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       17px;
    color:           #fff;
    flex-shrink:     0;
    transition:      margin var(--transition);
}

.sidebar-title {
    flex:       1;
    min-width:  0;           /* allow shrinking */
    overflow:   hidden;
    transition: opacity var(--transition), max-width var(--transition);
    max-width:  200px;
}

.title-main {
    display:     block;
    font-size:   14px;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
}

.title-sub {
    display:     block;
    font-size:   11px;
    color:       var(--sidebar-text);
    white-space: nowrap;
}

/* Close button — mobile only */
.sidebar-close {
    background:    none;
    border:        none;
    color:         var(--sidebar-text);
    font-size:     22px;
    cursor:        pointer;
    padding:       4px;
    border-radius: 4px;
    flex-shrink:   0;
    line-height:   1;
    margin-left:   auto;
}
.sidebar-close:hover { color: #fff; }

@media (min-width: 992px) { .sidebar-close { display: none; } }

/* Collapse/expand toggle — desktop only */
.sidebar-toggle {
    display:       none;
    background:    none;
    border:        none;
    color:         var(--sidebar-text);
    font-size:     20px;
    cursor:        pointer;
    padding:       6px;
    border-radius: 6px;
    flex-shrink:   0;
    line-height:   1;
    /* Always keep toggle accessible — min tap size */
    min-width:     32px;
    min-height:    32px;
    align-items:   center;
    justify-content: center;
}
.sidebar-toggle:hover { color: #fff; background: var(--sidebar-hover); }

@media (min-width: 992px) { .sidebar-toggle { display: flex; } }

/* ── Collapsed state (desktop only) ──────────────────────── */
@media (min-width: 992px) {

    /* Hide title text but keep it in flow so header stays balanced */
    body.sidebar-collapsed .sidebar-title {
        opacity:        0;
        max-width:      0;
        pointer-events: none;
        overflow:       hidden;
    }

    /* Center logo in the 64px strip */
    body.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding:         0 8px;
        gap:             0;
    }

    /* Push toggle to far right — it must stay visible and clickable */
    body.sidebar-collapsed .sidebar-toggle {
        margin-left: auto;
        /* Ensure it's never clipped */
        position:    relative;
        z-index:     10;
    }

    body.sidebar-collapsed .user-info              { opacity: 0; max-width: 0; pointer-events: none; overflow: hidden; }

    /* Show pointer cursor on collapsed sidebar so users know it's clickable */
    body.sidebar-collapsed .sidebar { cursor: pointer; }
    body.sidebar-collapsed .sidebar a { cursor: pointer; }
    body.sidebar-collapsed .menu-section           { opacity: 0; pointer-events: none; }
    body.sidebar-collapsed .sidebar-menu li a span { opacity: 0; }
}

/* ── Sidebar User Block ────────────────────────────────────── */
.sidebar-user {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    overflow:      hidden;
    flex-shrink:   0;
}

.user-avatar {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--accent);
    color:           #fff;
    font-weight:     700;
    font-size:       14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.user-info { flex: 1; overflow: hidden; transition: opacity var(--transition); }

.user-name {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         #fff;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.user-role, .user-school {
    display:       block;
    font-size:     11px;
    color:         var(--sidebar-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar Menu ─────────────────────────────────────────── */
.sidebar-menu {
    list-style: none;
    padding:    6px 0 32px;
    margin:     0;
    overflow-y: auto;
    overflow-x: hidden;
    flex:       1;
    -webkit-overflow-scrolling: touch;
}

.sidebar-menu::-webkit-scrollbar       { width: 4px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.menu-section {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          rgba(200,214,239,.45);
    padding:        14px 18px 4px;
    white-space:    nowrap;
    overflow:       hidden;
    transition:     opacity var(--transition);
}

.sidebar-menu li a {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         11px 18px;
    color:           var(--sidebar-text);
    text-decoration: none;
    font-size:       13.5px;
    font-weight:     500;
    transition:      background var(--transition), color var(--transition);
    white-space:     nowrap;
    overflow:        hidden;
    min-height:      44px; /* accessible tap target */
}

.sidebar-menu li a i {
    font-size:   18px;
    flex-shrink: 0;
    width:       22px;
    text-align:  center;
}

.sidebar-menu li a span { transition: opacity var(--transition); }

.sidebar-menu li a:hover    { background: var(--sidebar-hover); color: #fff; }
.sidebar-menu li a.active   { background: var(--sidebar-active); color: #fff; border-left: 3px solid var(--accent); }
.logout-link:hover          { background: rgba(198,40,40,.2) !important; color: #ff6b6b !important; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    background:      var(--surface);
    border-bottom:   1px solid var(--border);
    padding:         0 12px;
    height:          var(--topbar-height);
    display:         flex;
    align-items:     center;
    box-shadow:      var(--shadow);
    /* Fixed on mobile so it stays at top while scrolling */
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         900;
    gap:             8px;
}

@media (min-width: 992px) {
    .topbar {
        position: sticky;
        padding:  0 24px;
        gap:      12px;
    }
}

/* ── Hamburger button ─────────────────────────────────────── */
.hamburger-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          none;
    color:           var(--text);
    font-size:       22px;
    cursor:          pointer;
    padding:         6px;
    border-radius:   var(--radius);
    min-width:       40px;
    min-height:      40px;
    flex-shrink:     0;
    transition:      background var(--transition);
    line-height:     1;
}

.hamburger-btn:hover { background: var(--primary-light); color: var(--primary); }

@media (min-width: 992px) { .hamburger-btn { display: none; } }

.topbar-left {
    display:     flex;
    align-items: center;
    min-width:   0;
    flex:        1;
    gap:         8px;
}

.topbar-info { min-width: 0; overflow: hidden; }

.topbar-title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

@media (min-width: 576px) { .topbar-title { font-size: 17px; } }
@media (min-width: 992px) { .topbar-title { font-size: 18px; } }

.topbar-breadcrumb {
    font-size:     12px;
    color:         var(--text-muted);
    margin-top:    1px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       none;
}

@media (min-width: 480px) { .topbar-breadcrumb { display: block; } }

.topbar-right {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

@media (min-width: 576px) { .topbar-right { gap: 10px; } }
@media (min-width: 768px) { .topbar-right { gap: 14px; } }

/* Hide text labels in topbar buttons on small screens */
@media (max-width: 575px) {
    .topbar-right .btn { padding: 7px 9px; }
    .topbar-right .btn .btn-label { display: none; }
}

/* ── Page Content ─────────────────────────────────────────── */
.page-content { padding: 14px; }

@media (min-width: 576px) { .page-content { padding: 18px; } }
@media (min-width: 992px) { .page-content { padding: 24px; } }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow);
    overflow:      hidden;
}

.card-header {
    background:      var(--surface-2);
    border-bottom:   1px solid var(--border);
    padding:         11px 14px;
    font-weight:     600;
    font-size:       13.5px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    flex-wrap:       wrap;
}

.card-body { padding: 14px; }

@media (min-width: 768px) {
    .card-header { padding: 14px 20px; font-size: 14px; }
    .card-body   { padding: 20px; }
}

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       14px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    box-shadow:    var(--shadow);
    transition:    transform var(--transition), box-shadow var(--transition);
}

@media (min-width: 768px) { .stat-card { padding: 18px; gap: 16px; } }

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

.stat-icon {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
}

@media (min-width: 768px) { .stat-icon { width: 52px; height: 52px; font-size: 22px; border-radius: 12px; } }

.stat-icon.blue   { background: var(--primary-light);   color: var(--primary);   }
.stat-icon.green  { background: var(--secondary-light); color: var(--secondary); }
.stat-icon.orange { background: var(--accent-light);    color: var(--accent);    }
.stat-icon.red    { background: var(--danger-light);    color: var(--danger);    }
.stat-icon.info   { background: var(--info-light);      color: var(--info);      }

.stat-value {
    font-size:   22px;
    font-weight: 800;
    color:       var(--text);
    font-family: var(--font-mono);
    line-height: 1;
}

@media (min-width: 768px) { .stat-value { font-size: 26px; } }

.stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }

/* ── Tables — scroll horizontally on mobile ───────────────── */
.table-wrapper {
    overflow-x:    auto;
    border-radius: var(--radius);
    border:        1px solid var(--border);
    -webkit-overflow-scrolling: touch;
}

.table { margin: 0; font-size: 12.5px; min-width: 100%; }

@media (min-width: 768px) { .table { font-size: 13.5px; } }

.table thead th {
    background:     var(--primary);
    color:          #fff;
    font-weight:    600;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding:        9px 10px;
    border:         none;
    white-space:    nowrap;
}

@media (min-width: 768px) { .table thead th { font-size: 12px; padding: 11px 14px; } }

.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody tr:hover           { background: var(--primary-light); }

.table td, .table tbody th {
    padding:        8px 10px;
    vertical-align: middle;
    border-color:   var(--border);
}

@media (min-width: 768px) { .table td, .table tbody th { padding: 10px 14px; } }

/* ── Forms ────────────────────────────────────────────────── */
.form-label {
    font-weight:   600;
    font-size:     13px;
    color:         var(--text);
    margin-bottom: 5px;
    display:       block;
}

.form-control, .form-select {
    border:        1px solid var(--border-dark);
    border-radius: var(--radius);
    font-size:     16px;  /* 16px = no iOS zoom on focus */
    padding:       10px 12px;
    color:         var(--text);
    background:    var(--surface);
    transition:    border-color var(--transition), box-shadow var(--transition);
    width:         100%;
    min-height:    44px;
}

@media (min-width: 768px) {
    .form-control, .form-select { font-size: 14px; min-height: auto; }
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(26,86,160,0.12);
    outline:      none;
}

.form-required::after { content: ' *'; color: var(--danger); }
.form-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    font-family:     var(--font-body);
    font-weight:     600;
    font-size:       14px;
    border-radius:   var(--radius);
    padding:         9px 16px;
    transition:      all var(--transition);
    min-height:      42px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             5px;
    white-space:     nowrap;
}

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-success { background: var(--secondary); border-color: var(--secondary); }

.btn-sm   { padding: 6px 12px; font-size: 12px; min-height: 34px; }
.btn-icon { padding: 7px 10px; min-height: 36px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border:        none;
    border-left:   4px solid;
    border-radius: var(--radius);
    font-size:     13.5px;
    padding:       12px 14px;
}

.alert-success { background: var(--secondary-light); border-color: var(--secondary); color: #1b5e20; }
.alert-danger  { background: var(--danger-light);    border-color: var(--danger);    color: var(--danger); }
.alert-warning { background: var(--warning-light);   border-color: var(--warning);   color: #5d3f00; }
.alert-info    { background: var(--info-light);      border-color: var(--info);      color: var(--info); }
.alert-light   { background: var(--surface-2);       border-color: var(--border);    color: var(--text); }
.alert-icon    { margin-right: 6px; font-weight: 700; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link {
    color:        var(--primary);
    border-color: var(--border);
    font-size:    13px;
    padding:      8px 11px;
    min-height:   38px;
    display:      flex;
    align-items:  center;
}
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ── Modals — full screen on mobile ──────────────────────── */
@media (max-width: 575px) {
    .modal-dialog {
        margin:    0;
        max-width: 100%;
        min-height: 100%;
    }
    .modal-content { border-radius: 0; min-height: 100vh; }
    .modal-body    { padding: 16px; }
    .modal-footer  { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .modal-header  { padding: 14px 16px; }
}

/* ── Marks Entry ─────────────────────────────────────────── */
.mark-input {
    width:         58px;
    text-align:    center;
    font-family:   var(--font-mono);
    font-size:     14px;
    font-weight:   600;
    padding:       5px 4px;
    border:        1.5px solid var(--border-dark);
    border-radius: 6px;
    transition:    border-color .15s, box-shadow .15s;
    min-height:    38px;
}

.mark-input:focus     { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,160,.12); outline: none; }
.mark-input.has-value { border-color: var(--secondary); background: #f0fff4; }
.mark-input.error-val { border-color: var(--danger) !important; background: #fff0f0; }

/* ── Sticky save bar (marks entry) ───────────────────────── */
.save-bar {
    position:        sticky;
    bottom:          0;
    background:      rgba(255,255,255,.97);
    border-top:      2px solid var(--primary);
    padding:         10px 14px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    z-index:         100;
    flex-wrap:       wrap;
    backdrop-filter: blur(4px);
}

@media (min-width: 768px) { .save-bar { padding: 14px 20px; } }

/* ── Grade colours ────────────────────────────────────────── */
.grade-A, .grade-1 { color: var(--secondary); font-weight: 700; }
.grade-B, .grade-2 { color: var(--info);      font-weight: 700; }
.grade-C, .grade-3 { color: var(--accent);    font-weight: 700; }
.grade-D, .grade-4 { color: var(--warning);   font-weight: 700; }
.grade-E, .grade-F, .grade-5 { color: var(--danger); font-weight: 700; }

/* ── Utilities ────────────────────────────────────────────── */
.text-mono { font-family: var(--font-mono); }
.fw-700    { font-weight: 700; }
.fw-600    { font-weight: 600; }
.w-100     { width: 100%; }

/* ── Page header ──────────────────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    margin-bottom:   16px;
    flex-wrap:       wrap;
    gap:             10px;
}

.page-title    { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }

@media (min-width: 768px) { .page-title { font-size: 22px; } .page-header { margin-bottom: 24px; } }

/* ── Login page ───────────────────────────────────────────── */
.login-page {
    min-height:      100vh;
    background:      linear-gradient(135deg, #0f2041 0%, #1a56a0 60%, #2e7d32 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}

.login-card {
    background:    var(--surface);
    border-radius: 16px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.3);
    width:         100%;
    max-width:     420px;
    overflow:      hidden;
}

.login-header {
    background:  linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:     28px 24px;
    text-align:  center;
    color:       #fff;
}

.login-logo {
    width:           56px;
    height:          56px;
    background:      rgba(255,255,255,0.15);
    border-radius:   14px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    margin-bottom:   12px;
}

.login-header h1 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.login-header p  { font-size: 12px; opacity: .8; margin: 0; }
.login-body      { padding: 24px; }

/* ── Spinner overlay ──────────────────────────────────────── */
.spinner-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(255,255,255,0.7);
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .hamburger-btn,
    .sidebar-overlay, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; padding-top: 0 !important; }
    body   { font-size: 11px; }
    .table { font-size: 10px; }
    .table thead th, .table td { padding: 4px 6px; }
}