/* ─── EduNexus — Global Styles ─────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");
@import "@fortawesome/fontawesome-free/css/all.min.css";
:root {
    --primary: #890c25;
    --primary-dark: #6b0a1e;
    --primary-light: #a01030;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --purple: #8b5cf6;
    --accent: #06b6d4;
    --bg: #f0f2f5;
    --sidebar-bg: #1a1d29;
    --sidebar-text: #a0aec0;
    --sidebar-active: #fff;
    --sidebar-hover: #2d3148;
    --card: #fff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --sidebar-width: 260px;
}
[data-theme="dark"] {
    --bg: #0f1117;
    --card: #1a1d29;
    --border: #2d3148;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --sidebar-bg: #0d0f18;
    --sidebar-hover: #1a1d29;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    overflow-x: hidden;
}
body {
    font-family: "Outfit", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
    text-decoration: none;
}

/* ── Layout ── */
.app-layout {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: 0.3s;
}
.main-wrap {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.topbar {
    height: 64px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 16px;
}
.page-content {
    padding: 28px;
    flex: 1;
}

/* ── Sidebar (v2 — modern) ── */
.sidebar {
    background: radial-gradient(circle at 15% 0%, #2a0a18 0%, transparent 45%), linear-gradient(180deg, #1b0712 0%, #140510 55%, #0c0309 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 10px; }
.sidebar-logo {
    padding: 22px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-logo img {
    width: 60%;
    max-width: 200px;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.sidebar-logo .logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(137, 12, 37, 0.5);
}
.sidebar-logo .logo-text {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.1;
}
.sidebar-logo .logo-sub {
    color: var(--sidebar-text);
    font-size: 11px;
}
.sidebar-user {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 14px 6px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
}
.sidebar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(137, 12, 37, 0.45);
}
.sidebar-user-name {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
.sidebar-user-role {
    color: var(--sidebar-text);
    font-size: 11px;
    text-transform: capitalize;
}
.sidebar-user-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.7);
    flex-shrink: 0;
}
.sidebar-signout { padding: 14px 14px 18px; }

/* Section labels */
.sidebar-section,
.nav-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 12px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.32);
    text-transform: uppercase;
}
.nav-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
}

/* Nav items */
.sidebar-nav { padding: 4px 12px 10px; }
.sidebar-nav a,
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 3px;
    border-radius: 10px;
    color: var(--sidebar-text);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
}
.sidebar-nav a:hover,
.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    transform: translateX(2px);
}
.sidebar-nav a.active,
.nav-item.active {
    background: linear-gradient(135deg, var(--primary) 0%, #c0192e 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(137, 12, 37, 0.45);
}
.sidebar-nav a.active::before,
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #ffd76a, #d4a94a);
    box-shadow: 0 0 8px rgba(255, 215, 106, 0.6);
}
.sidebar-nav a .nav-icon,
.nav-item .nav-icon {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 13px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    transition: background 0.18s ease;
}
.sidebar-nav a:hover .nav-icon,
.nav-item:hover .nav-icon {
    background: rgba(255, 255, 255, 0.12);
}
.sidebar-nav a.active .nav-icon,
.nav-item.active .nav-icon {
    background: rgba(255, 255, 255, 0.2);
}
.nav-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-nav a .badge-count,
.nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.sidebar-nav a .badge-count { background: var(--danger); color: #fff; }
.nav-badge.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.nav-badge.orange { background: rgba(245, 158, 11, 0.22); color: #fbbf24; }
.nav-item.active .nav-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 8px 20px;
}

/* Sidebar informational note (e.g. "managed by Accounts department") —
   rendered as its own quiet card instead of loose text in the nav list. */
.sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45);
    font-size: 11.5px;
    line-height: 1.5;
}
.sidebar-note i {
    margin-top: 1px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
}
.role-badge.admin {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
.role-badge.teacher {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
.role-badge.student {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
.role-badge.parent {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* ── Topbar ── */
.topbar-search {
    flex: 1;
    max-width: 340px;
}
.topbar-search input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    outline: none;
    font-family: inherit;
}
.topbar-search {
    position: relative;
}
.topbar-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.topbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    position: relative;
    transition: 0.15s;
    flex-shrink: 0;
}
.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
}
.topbar-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}
.topbar-user-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.topbar-user-text > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-btn:hover {
    background: var(--bg);
    color: var(--text);
}
.topbar-btn .dot {
    width: 7px;
    height: 7px;
    background: var(--danger);
    border-radius: 50%;
    position: absolute;
    top: 6px;
    right: 6px;
    border: 1.5px solid var(--card);
}
.topbar-page {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
}

/* ── Cards & Stats ── */
.card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.card-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.card-title {
    font-weight: 700;
    font-size: 15px;
}
.card-body {
    padding: 20px;
}
.grid {
    display: grid;
    gap: 20px;
}
.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.stat-card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
}
.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.stat-icon.red {
    background: rgba(137, 12, 37, 0.1);
    color: var(--primary);
}
.stat-icon.green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}
.stat-icon.blue {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}
.stat-icon.yellow {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}
.stat-icon.purple {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
}
.stat-icon.cyan {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent);
}
.stat-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.stat-change {
    font-size: 11px;
    margin-top: 4px;
    font-weight: 600;
}
.stat-change.up {
    color: var(--success);
}
.stat-change.down {
    color: var(--danger);
}

/* ── Tables ── */
.table-wrap {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
tr:last-child td {
    border-bottom: none;
}
tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}

/* ── Badges ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge.success,
.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}
.badge.danger,
.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}
.badge.warning,
.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}
.badge.primary,
.badge-primary {
    background: rgba(137, 12, 37, 0.1);
    color: var(--primary);
}
.badge.info,
.badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}
.badge.purple {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
}
.badge.gray {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-muted);
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.btn-primary {
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--primary-dark);
}
.btn-success {
    background: var(--success);
    color: #fff;
}
.btn-success:hover {
    filter: brightness(0.9);
}
.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover {
    filter: brightness(0.9);
}
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
}
.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover {
    background: var(--bg);
    color: var(--text);
}
.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}
.btn-xs {
    padding: 3px 9px;
    font-size: 11px;
}
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

/* ── Forms ── */
.form-group {
    margin-bottom: 16px;
}
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.form-control {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: 0.15s;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(137, 12, 37, 0.08);
}
textarea.form-control {
    resize: vertical;
    min-height: 90px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
    cursor: pointer;
}

/* ── File inputs ── */
input[type="file"].form-control {
    padding: 7px 13px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12.5px;
}
input[type="file"].form-control::file-selector-button {
    padding: 6px 14px;
    margin-right: 12px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: 0.15s;
}
input[type="file"].form-control::file-selector-button:hover {
    background: var(--primary-dark);
}

/* ── Segmented choice cards (e.g. audience picker) ── */
.choice-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: 0.15s;
    background: var(--card);
}
.choice-card i {
    font-size: 17px;
    color: var(--text-muted);
    transition: 0.15s;
}
.choice-card span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.choice-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.choice-card:hover {
    border-color: var(--primary-light);
}
.choice-card.active {
    border-color: var(--primary);
    background: rgba(137, 12, 37, 0.06);
    box-shadow: 0 0 0 3px rgba(137, 12, 37, 0.08);
}
.choice-card.active i,
.choice-card.active span {
    color: var(--primary);
}

/* ── Selectable checkbox lists (programs / students) ── */
.check-list {
    max-height: 230px;
    overflow-y: auto;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 6px;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.12s;
    font-size: 13px;
    font-weight: 500;
}
.check-row:hover {
    background: var(--bg);
}
.check-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}
.check-row .muted {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}
.check-empty {
    text-align: center;
    padding: 22px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Inline switch row (e.g. Active toggle) ── */
.switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 11px 13px;
    background: var(--bg);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.switch-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Photo upload (admission form) ── */
.photo-upload {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(137, 12, 37, 0.04);
    transition: 0.15s;
}
.photo-upload:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(137, 12, 37, 0.08);
}
.photo-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Qualification accordion (admission form) ── */
.qual-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.qual-item:last-child { margin-bottom: 0; }
.qual-item > summary {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(137, 12, 37, 0.03);
}
.qual-item > summary::-webkit-details-marker { display: none; }
.qual-item > summary .qual-chevron {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.15s;
}
.qual-item[open] > summary .qual-chevron { transform: rotate(180deg); }
.qual-item .qual-body {
    padding: 14px 14px 4px;
    border-top: 1px solid var(--border);
}
.qual-item > summary .qual-filled-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    margin-left: 8px;
}

/* ── Section icon badge (admission form card headers) ── */
.section-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(137, 12, 37, 0.1);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* ── Progress bars ── */
.progress {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.progress-bar.primary {
    background: var(--primary);
}
.progress-bar.success {
    background: var(--success);
}
.progress-bar.warning {
    background: var(--warning);
}
.progress-bar.info {
    background: var(--info);
}

/* ── LMS specific ── */
.course-card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: 0.2s;
    box-shadow: var(--shadow);
}
.course-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.course-thumb {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
}
.course-thumb.math {
    background: linear-gradient(135deg, #890c25, #c01535);
}
.course-thumb.eng {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}
.course-thumb.sci {
    background: linear-gradient(135deg, #059669, #10b981);
}
.course-thumb.cs {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}
.course-thumb.default {
    background: linear-gradient(135deg, #475569, #64748b);
}
.course-meta {
    padding: 16px;
}
.course-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
}
.course-desc {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lesson-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    transition: 0.15s;
    cursor: pointer;
}

/* ── Compact "info card" used on the LMS admin monitor pages
   (Teachers → Subjects → Classes). Icon-badge + stat row instead of
   a big color banner, so a lone card doesn't look empty/oversized. ── */
.info-card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: 0.2s;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.info-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary);
}
.info-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.info-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.info-card-icon.math { background: linear-gradient(135deg, #890c25, #c01535); }
.info-card-icon.eng  { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.info-card-icon.sci  { background: linear-gradient(135deg, #059669, #10b981); }
.info-card-icon.cs   { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.info-card-icon.default { background: linear-gradient(135deg, #475569, #64748b); }
.info-card-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}
.info-card-desc {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.info-card-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.info-card-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.info-card-stats i { color: var(--primary); font-size: 11px; }

.lesson-item:last-child {
    border-bottom: none;
}
.lesson-item:hover {
    background: rgba(137, 12, 37, 0.03);
}
.lesson-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
.lesson-num.done {
    background: var(--success);
    color: #fff;
}
.lesson-info {
    flex: 1;
}
.lesson-title {
    font-weight: 600;
    font-size: 13.5px;
}
.lesson-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.lesson-content {
    line-height: 1.7;
    font-size: 14.5px;
}
.lesson-content h1,
.lesson-content h2,
.lesson-content h3 {
    margin: 16px 0 8px;
    font-weight: 700;
}
.lesson-content p {
    margin-bottom: 12px;
}
.lesson-content ul,
.lesson-content ol {
    margin: 0 0 12px 20px;
}
.lesson-content li {
    margin-bottom: 4px;
}

/* ── Quiz ── */
.quiz-question {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}
.quiz-qnum {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.quiz-qtext {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
}
.quiz-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: 0.15s;
    font-size: 13.5px;
}
.quiz-options label:hover {
    border-color: var(--primary);
    background: rgba(137, 12, 37, 0.03);
}
.quiz-options input:checked + span {
    font-weight: 600;
    color: var(--primary);
}

/* ── Welcome banner ── */
.welcome-banner {
    background: linear-gradient(
        135deg,
        var(--primary) 0%,
        #c01535 50%,
        #6b0a1e 100%
    );
    border-radius: var(--radius);
    padding: 28px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.welcome-banner::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
.welcome-banner::after {
    content: "";
    position: absolute;
    right: 80px;
    bottom: -60px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

/* ── Alerts ── */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #065f46;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #92400e;
}
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #1e40af;
}

/* ── Timeline ── */
.timeline {
    position: relative;
    padding-left: 28px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    margin-bottom: 16px;
}
.timeline-dot {
    position: absolute;
    left: -23px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--card);
}
.timeline-dot.success {
    background: var(--success);
}
.timeline-dot.primary {
    background: var(--primary);
}
.timeline-dot.warning {
    background: var(--warning);
}
.timeline-dot.purple {
    background: var(--purple);
}
.timeline-text {
    font-size: 13px;
    color: var(--text);
}
.timeline-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.internship-card {
    transition: transform 0.15s, box-shadow 0.15s;
}
.internship-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ── Celebratory "Confirmed" internship state ── */
.internship-card.is-confirmed {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 10px 26px rgba(16, 185, 129, 0.14);
}
.internship-card.is-confirmed:hover {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14), 0 16px 34px rgba(16, 185, 129, 0.2);
}
.confirmed-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    background: linear-gradient(120deg, #10b981, #059669, #10b981);
    background-size: 200% 100%;
    animation: confirmedShimmer 3.5s linear infinite;
}
@keyframes confirmedShimmer {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}
.confetti-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    animation: badgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop {
    0% {
        transform: scale(0.55);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
.congrats-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
    border: 1px dashed rgba(16, 185, 129, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #059669;
    margin-bottom: 12px;
}
.congrats-banner i {
    font-size: 15px;
    margin-top: 1px;
}
tr.is-confirmed-row td {
    background: rgba(16, 185, 129, 0.05);
}

/* ── Misc ── */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 44px;
    opacity: 0.25;
    margin-bottom: 14px;
    display: block;
}
.empty-state p {
    font-size: 14px;
}
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.page-title {
    font-size: 22px;
    font-weight: 800;
}
.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.tab-bar {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    gap: 4px;
}
.tab-btn {
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: 0.15s;
}
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
/* ── Exam hierarchy: Program → Class/Section → Subjects ── */
.program-group {
    margin-bottom: 22px;
}
.program-group:last-child {
    margin-bottom: 0;
}
.program-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(137, 12, 37, 0.06), rgba(137, 12, 37, 0.01));
    border-bottom: 1px solid var(--border);
}
.program-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.program-group-title {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}
.program-group-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}
.class-block {
    border-bottom: 1px solid var(--border);
}
.class-block:last-child {
    border-bottom: none;
}
.class-block-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.012);
}
.class-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}
.class-block-count {
    font-size: 11.5px;
    color: var(--text-muted);
}
.subject-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    transition: 0.15s;
}
.subject-row:hover {
    background: rgba(0, 0, 0, 0.012);
}
.subject-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.subject-info {
    min-width: 140px;
    flex: 1 1 160px;
}
.subject-name {
    font-weight: 700;
    font-size: 13px;
}
.subject-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.subject-teacher {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    flex: 1 1 150px;
}
.subject-schedule {
    min-width: 150px;
    flex: 1 1 150px;
    font-size: 12.5px;
}
.subject-progress {
    min-width: 110px;
    flex: 0 0 110px;
}
.subject-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.breadcrumb-path .crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}
.breadcrumb-path .crumb.program {
    background: rgba(137, 12, 37, 0.1);
    color: var(--primary);
}
.breadcrumb-path .crumb.class {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}
.breadcrumb-path .crumb.subject {
    background: rgba(139, 92, 246, 0.1);
    color: var(--purple);
}
.breadcrumb-path i.fa-chevron-right {
    font-size: 9px;
    color: var(--text-muted);
}
.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}
.text-muted {
    color: var(--text-muted);
}
.text-sm {
    font-size: 12.5px;
}
.fw-bold {
    font-weight: 700;
}
.mt-1 {
    margin-top: 4px;
}
.mt-2 {
    margin-top: 8px;
}
.mt-3 {
    margin-top: 12px;
}
.mt-4 {
    margin-top: 16px;
}
.mb-1 {
    margin-bottom: 4px;
}
.mb-2 {
    margin-bottom: 8px;
}
.mb-3 {
    margin-bottom: 12px;
}
.mb-4 {
    margin-bottom: 16px;
}
.flex {
    display: flex;
}
.items-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-2 {
    gap: 8px;
}
.gap-3 {
    gap: 12px;
}
.gap-4 {
    gap: 16px;
}
.flex-wrap {
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVENESS LAYER
   ──────────────────────────────────────────────────────────────────────
   Written against the shared, app-wide class names used by (almost)
   every screen — .sidebar, .topbar, .page-content, .card, .grid-*,
   .stat-card, .table-wrap, .btn, .form-control, .page-header, .tab-bar —
   plus a couple of progressive-enhancement selectors (:has) for the
   handful of pages that build their own one-off layouts. Because it
   hooks into the shared design system instead of per-page markup, it
   applies across the whole project without needing every view touched.
   ══════════════════════════════════════════════════════════════════════ */

/* Sidebar backdrop, shown only while the mobile sidebar drawer is open */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 4, 8, 0.55);
    z-index: 99;
}
.sidebar-backdrop.open { display: block; }

/* ── Large tablets / small laptops ── */
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .sj-class-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .grid-4,
    .sj-stats { grid-template-columns: repeat(2, 1fr); }
    .page-content { padding: 22px; }
}

/* ── Tablets / mobile ── */
@media (max-width: 768px) {
    #menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .sidebar {
        transform: translateX(-100%);
        width: min(var(--sidebar-width), 82vw);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 6px 0 40px rgba(0, 0, 0, 0.45);
    }
    .main-wrap {
        margin-left: 0;
        width: 100%;
        min-width: 0;
    }
    .grid-2,
    .grid-3,
    .grid-4,
    .sj-stats,
    .sj-class-grid,
    .grid { grid-template-columns: 1fr; }
    .page-content { padding: 16px; }

    /* Topbar: shrink the search box instead of letting it force horizontal
       scroll, and let the right-hand icon cluster wrap if it must. */
    .topbar { padding: 0 14px; gap: 10px; }
    .topbar-search { max-width: 45vw; }
    .topbar-right { gap: 6px; flex-wrap: wrap; }

    /* Page headers: title stacks above its action buttons instead of
       squeezing them onto one line. */
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header > div:last-child,
    .page-header .btn { width: 100%; }
    .page-title { font-size: 19px; }

    /* Card headers: same problem as page headers on a smaller scale —
       a title plus one or more action buttons on the right routinely
       overflow a ~375-430px screen (e.g. two buttons like "Upcoming /
       Due / Previous" + "View Installment Plan"). Stack them instead. */
    .card-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .card-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
    .card-header > div:last-child > * { flex: 1; }

    /* Tabs that would otherwise overflow the viewport become a scroll
       strip rather than wrapping/breaking the underline. */
    .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tab-btn { white-space: nowrap; }

    /* Any button row / action group wraps instead of overflowing. */
    .btn-group,
    .row-actions,
    .sj-row-actions { flex-wrap: wrap; }

    /* Modals built with a variety of ad-hoc class names all get a sane,
       viewport-safe width and internal scrolling on small screens. */
    [class*="modal"] {
        width: 92vw !important;
        max-width: 92vw !important;
        max-height: 88vh;
        overflow-y: auto;
    }
}

/* ── Tables: make every table in the app horizontally scrollable on
   narrow screens instead of squashing its columns illegibly.
   `.table-wrap` is the app's existing scroll-container convention and is
   already used across most index pages; give the table inside it a
   sensible minimum width so it scrolls smoothly. `:has()` is used as a
   progressive-enhancement fallback so tables that were never wrapped in
   `.table-wrap` (or a manual overflow-x:auto div) still get one. ── */
@media (max-width: 900px) {
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 640px; }

    /* Fallback for tables with no scroll container at all. */
    body:not(.no-auto-scroll) *:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Small phones ── */
@media (max-width: 480px) {
    .sidebar-user-name,
    .sidebar-user-role { max-width: 140px; }
    .topbar-search { display: none; }
    .topbar { gap: 6px; padding: 0 10px; }
    .topbar-right { gap: 4px; }
    /* Collapse the name/role text out of the user chip and keep just the
       avatar circle — there simply isn't room for both the AI Insights
       pill, the notification/theme icons, and a full name+role block on
       a ~375-430px screen. */
    .topbar-user { padding: 4px; gap: 0; border: none; background: none; }
    .topbar-user-text { display: none; }
    .card { padding: 14px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 20px; }
    .form-control { font-size: 14px; }
    .btn { padding: 9px 14px; font-size: 13px; }
}

/* ── Global print rules ─────────────────────────────────────────────────
   Previously nothing in the stylesheet stripped the app chrome for print,
   so clicking "Print" printed the sidebar, topbar, and search bar along
   with whatever you actually wanted (e.g. ID cards). This hides everything
   except the printable content on any page. */
@media print {
  .sidebar, .topbar, .no-print, .alert { display: none !important; }
  .app-layout { display: block !important; }
  .main-wrap { margin: 0 !important; width: 100% !important; }
  .page-content { padding: 0 !important; }
  body { background: #fff !important; }
}

/* ── Pagination / icon safety net ───────────────────────────────────────
   Some list pages can end up on Laravel's *built-in* pagination view
   instead of our own resources/views/vendor/pagination/default.blade.php
   override (e.g. any future ->links('pagination::...') call, a
   ->simplePaginate() that doesn't have a matching override, or a package
   upgrade that adds a new pagination view name). The framework's bundled
   view sizes its prev/next icons with Tailwind's `h-5 w-5` utility
   classes — since this app doesn't ship Tailwind, those classes do
   nothing and the raw <svg> (no width/height attributes) stretches to
   fill its container, producing a single giant chevron with no other
   page content. These rules make sure that can never happen, regardless
   of which pagination view ends up being rendered. */
nav[aria-label="Pagination Navigation"] svg,
nav[role="navigation"][aria-label*="agination"] svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0;
}

/* Belt-and-braces: no raw, un-sized SVG anywhere in the app should ever
   be able to grow past its container. Icons that need a specific size
   already set it via an explicit class (.qa-icon svg, .stat-icon-wrap
   svg, etc.) or width/height attributes, which this does not override. */
svg:not([width]):not([height]) {
  max-width: 100%;
  max-height: 100%;
}