/* ============================================
   LOMS - Learning Outcomes Measurement System
   Premium Modern Design System — Multi-Theme
   ============================================
   Themes available (set via [data-theme] on <html>):
     - "inu"      → Irbid National University (Navy + Orange)
     - "indigo"   → Royal Indigo (legacy classic)
     - "emerald"  → Emerald Academic (green professional)
     - "crimson"  → Crimson Heritage (deep red / burgundy)
     - "slate"    → Slate Executive (corporate dark slate + amber)
     - "official" → Official Light (white, deep orange + teal)  [DEFAULT]
   ============================================ */

:root {
    /* ---- Layout / Geometry (theme-independent) ---- */
    --sidebar-width: 280px;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.08);

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;

    --transition: all 0.2s ease;

    /* ---- Universal status colors (kept stable across themes) ---- */
    --success: #15803d;
    --success-light: #dcfce7;
    --warning: #b45309;
    --warning-light: #fef3c7;
    --danger: #b91c1c;
    --danger-light: #fee2e2;
    --info: #1d4ed8;
    --info-light: #dbeafe;

    /* ---- Default theme (Irbid National University) ---- */
    /* Primary = Navy Blue, Accent = Orange */
    --primary: #2B3990;
    --primary-light: #4453b0;
    --primary-dark: #1f2a6e;
    --primary-50: #eef0fa;
    --primary-100: #d8dcf2;
    --primary-rgb: 43, 57, 144;

    --accent: #F37021;
    --accent-light: #ff8a45;
    --accent-dark: #d65a10;
    --accent-strong: #c2410c; /* under white text: >= 4.5:1 */
    --accent-50: #fff2eb;
    --accent-rgb: 243, 112, 33;

    --bg-body: #f4f5f9;
    --bg-card: #ffffff;
    --bg-sidebar: #1f2a6e;          /* deeper navy for sidebar */
    --bg-sidebar-hover: #2B3990;
    --sidebar-text: #d6dcf2;
    --sidebar-active: #F37021;       /* orange accent for active state */
    --sidebar-border: rgba(255,255,255,0.08);

    --text-primary: #1e293b;
    --text-secondary: #5b6478;
    --text-muted: #5f6b7d; /* 4.96:1 on the page background (was #94a3b8, 2.4:1) */
    --border: #e2e6ee;

    --login-gradient: linear-gradient(135deg, #1f2a6e 0%, #2B3990 55%, #F37021 130%);
    --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ============ Theme: Royal Indigo (legacy) ============ */
[data-theme="indigo"] {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-rgb: 99, 102, 241;

    --accent: #a855f7;
    --accent-light: #c084fc;
    --accent-dark: #7e22ce;
    --accent-strong: #7e22ce; /* under white text: >= 4.5:1 */
    --accent-50: #faf5ff;
    --accent-rgb: 168, 85, 247;

    --bg-sidebar: #1e1b4b;
    --bg-sidebar-hover: #312e81;
    --sidebar-text: #c7d2fe;
    --sidebar-active: #818cf8;

    --login-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%);
    --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ============ Theme: Emerald Academic ============ */
[data-theme="emerald"] {
    --primary: #047857;
    --primary-light: #10b981;
    --primary-dark: #064e3b;
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-rgb: 4, 120, 87;

    --accent: #ca8a04;
    --accent-light: #eab308;
    --accent-dark: #854d0e;
    --accent-strong: #854d0e; /* under white text: >= 4.5:1 */
    --accent-50: #fefce8;
    --accent-rgb: 202, 138, 4;

    --bg-sidebar: #064e3b;
    --bg-sidebar-hover: #065f46;
    --sidebar-text: #d1fae5;
    --sidebar-active: #eab308;

    --login-gradient: linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%);
    --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ============ Theme: Crimson Heritage ============ */
[data-theme="crimson"] {
    --primary: #9f1239;
    --primary-light: #be123c;
    --primary-dark: #6b0822;
    --primary-50: #fff1f2;
    --primary-100: #ffe4e6;
    --primary-rgb: 159, 18, 57;

    --accent: #b45309;
    --accent-light: #d97706;
    --accent-dark: #78350f;
    --accent-strong: #78350f; /* under white text: >= 4.5:1 */
    --accent-50: #fef3c7;
    --accent-rgb: 180, 83, 9;

    --bg-sidebar: #4c0519;
    --bg-sidebar-hover: #6b0822;
    --sidebar-text: #fecdd3;
    --sidebar-active: #f59e0b;

    --login-gradient: linear-gradient(135deg, #4c0519 0%, #9f1239 55%, #b45309 100%);
    --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ============ Theme: Slate Executive ============ */
[data-theme="slate"] {
    --primary: #1e293b;
    --primary-light: #334155;
    --primary-dark: #0f172a;
    --primary-50: #f1f5f9;
    --primary-100: #e2e8f0;
    --primary-rgb: 30, 41, 59;

    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --accent-dark: #b45309;
    --accent-strong: #b45309; /* under white text: >= 4.5:1 */
    --accent-50: #fef3c7;
    --accent-rgb: 245, 158, 11;

    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --sidebar-text: #cbd5e1;
    --sidebar-active: #f59e0b;

    --login-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
    --header-gradient: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
}

/* ============ Theme: Official Light ============ */
/* White page and sidebar, deep orange brand with teal as the second colour,
   cards with thin borders instead of shadows. Rules that go beyond colour
   tokens (white sidebar, quiet cards and tables) are at the end of the file. */
[data-theme="official"] {
    --primary: #c2410c;
    --primary-light: #ea580c;
    --primary-dark: #9a3412;
    --primary-50: #fff4ec;
    --primary-100: #ffe4d1;
    --primary-rgb: 194, 65, 12;

    --accent: #0d9488;
    --accent-light: #14b8a6;
    --accent-dark: #0f766e;
    --accent-strong: #0f766e; /* under white text: >= 4.5:1 */
    --accent-50: #e8f6f4;
    --accent-rgb: 13, 148, 136;

    --bg-body: #f7f8fa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-hover: #f4f5f7;
    --sidebar-text: #344054;
    --sidebar-active: #c2410c;
    --sidebar-border: #eceef2;

    --text-primary: #101828;
    --text-secondary: #475467;
    --text-muted: #5f6b7d;
    --border: #eceef2;

    --shadow: 0 1px 2px 0 rgb(16 24 40 / 0.04);
    --shadow-md: 0 2px 6px -1px rgb(16 24 40 / 0.06);
    --shadow-lg: 0 6px 16px -4px rgb(16 24 40 / 0.08);
    --radius: 12px;
    --radius-lg: 16px;

    --login-gradient: linear-gradient(135deg, #fff4ec 0%, #f7f8fa 55%, #e8f6f4 100%); /* light, like the pages */
    --header-gradient: linear-gradient(90deg, var(--primary), var(--accent));
}

/* ============================================
   Bootstrap CSS Variable Bridge
   Maps Bootstrap's --bs-* to our theme vars so that
   Bootstrap classes (text-primary, bg-primary, btn-primary,
   badge bg-success, .nav-tabs, progress-bar, etc.)
   all pick up the active theme automatically.
   ============================================ */
:root,
[data-theme="inu"],
[data-theme="indigo"],
[data-theme="emerald"],
[data-theme="crimson"],
[data-theme="slate"],
[data-theme="official"] {
    --bs-primary:          var(--primary);
    --bs-primary-rgb:      var(--primary-rgb);
    --bs-link-color:       var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    /* Bootstrap 5.3 colours links from the -rgb variables, so without these
       every plain link stayed Bootstrap blue whatever the theme. */
    --bs-link-color-rgb:       var(--primary-rgb);
    --bs-link-hover-color-rgb: var(--primary-rgb);
    --bs-primary-bg-subtle:     var(--primary-50);   /* alert-primary, bg-primary-subtle */
    --bs-primary-border-subtle: var(--primary-100);
    --bs-primary-text-emphasis: var(--primary-dark);
    --bs-focus-ring-color:      rgba(var(--primary-rgb), .25);
    /* Readable status colours (Bootstrap's info cyan is 2:1 on white, its
       grey and red just under 4.5:1 on tinted backgrounds). */
    --bs-info:           #0e7490;
    --bs-info-rgb:       14, 116, 144;
    --bs-secondary:      #555e68;
    --bs-secondary-rgb:  85, 94, 104;
    --bs-danger:         #b91c1c;
    --bs-danger-rgb:     185, 28, 28;
    --bs-code-color:     #a61e4d;
    --bs-border-radius:    var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
}

/* ============ Bootstrap Tab Override ============ */
/* Stronger, theme-aware nav tabs */
.nav-tabs {
    border-bottom: 2px solid var(--border);
    gap: 2px;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 18px;
    margin-bottom: -2px;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--primary-50);
    border-bottom-color: var(--primary-light);
}
.nav-tabs .nav-link.active {
    color: var(--primary-dark);
    font-weight: 700;
    background: var(--primary-50);
    border-bottom: 3px solid var(--primary);
}
.nav-tabs .nav-link .badge {
    font-size: 0.68rem;
    padding: 3px 7px;
}

/* ============ Pill Tabs variant ============ */
.nav-pills .nav-link {
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 16px;
    transition: var(--transition);
}
.nav-pills .nav-link:hover { background: var(--primary-50); color: var(--primary); }
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base type scale — an explicit 17px root lifts every rem-based size (~+6%) for
   readability (esp. older faculty / accessibility). It is uniform across the app
   AND reaches inline rem font-sizes (e.g. data tables), and is fully reversible:
   delete this single rule to fall back to the browser default (16px). The layout
   is responsive (fluid grid, .table-responsive horizontal scroll, ellipsis on
   long text) and breakpoints are px-based, so this modest bump causes no reflow. */
html { font-size: 17px; }

/* Workflow step arrows (.qstep-arrow) render the ► glyph, which always points
   right. In RTL the step flow reads right→left, so the arrow must point left.
   Mirror it once here — covers every report using the component (CLO, coordinator,
   head-section) and any future one. LTR is untouched. Reversible: delete this rule. */
html[dir="rtl"] .qstep-arrow { display: inline-block; transform: scaleX(-1); }

body {
    font-family: 'Tajawal', 'Inter', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

body.ltr { font-family: 'Inter', 'Tajawal', sans-serif; }

/* Special nav link for docs — uses theme accent colour */
.nav-link-docs {
    background: rgba(var(--accent-rgb), 0.08);
    border-inline-end: 3px solid var(--accent);
}
.nav-link-docs .nav-docs-badge {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent-dark);
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    margin-inline-start: auto;
    white-space: nowrap;
}

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

/* ============ Sidebar ============ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.rtl .sidebar { right: 0; }
.ltr .sidebar { left: 0; }

.sidebar-header {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.logo i { font-size: 1.5rem; color: var(--sidebar-active); }
.logo-text { line-height: 1.3; }
.logo-university { display: block; font-size: 0.75rem; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.login-university { margin-top: 4px; font-weight: 600; color: var(--primary); }
.support-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #7c2d12; color: #fff; padding: 8px 16px; font-size: 0.9rem; position: sticky; top: 0; z-index: 1030; }
.support-banner .btn { padding: 2px 10px; }

.sidebar-nav {
    flex: 1;
    padding: 12px 12px;
    overflow-y: auto;
}

.nav-section-title {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 12px 6px;
    margin-top: 4px;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.nav-link-item:hover {
    background: var(--bg-sidebar-hover);
    color: white;
}

.nav-link-item.active {
    /* white text: the strong shade (the brand orange is 2.9:1 under white) */
    background: linear-gradient(135deg, var(--accent-strong), color-mix(in srgb, var(--accent-strong) 82%, #000));
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}

.nav-link-item.active i { color: #fff; }

.nav-link-item i { font-size: 1.1rem; width: 22px; text-align: center; }

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.user-details { flex: 1; min-width: 0; }
.user-name { color: white; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: var(--sidebar-text); font-size: 0.75rem; }

.sidebar-actions { display: flex; gap: 6px; }
.btn-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    text-decoration: none;
    transition: var(--transition);
}
.btn-icon:hover { background: var(--bg-sidebar-hover); color: white; }
/* The sign-out button is a form button; it looks like the other icons. */
button.btn-icon { border: 0; background: transparent; padding: 0; cursor: pointer; }

.sidebar-toggle {
    background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; padding: 4px;
}

/* ============ Main Content ============ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Flex items default to min-width:auto, so a wide table would widen the whole
       page on phones instead of scrolling inside its .table-responsive box. */
    min-width: 0;
}

.rtl .main-content { margin-right: var(--sidebar-width); }
.ltr .main-content { margin-left: var(--sidebar-width); }

.top-bar {
    background: var(--bg-card);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.breadcrumb-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* a long trail wraps instead of widening the page on phones */
    row-gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.breadcrumb-area a { color: var(--primary); text-decoration: none; }
.breadcrumb-area .current { color: var(--text-primary); font-weight: 600; }

.content-area { padding: 24px; flex: 1; min-width: 0; }

/* ============ Cards ============ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.card-header h5, .card-header h4 {
    margin: 0;
    font-weight: 700;
    color: var(--text-primary);
}

.card-body { padding: 24px; }

/* ============ Stat Cards ============ */
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
}

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

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.stat-icon.purple { background: var(--primary-50); color: var(--primary); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.blue { background: var(--info-light); color: var(--info); }
.stat-icon.orange { background: var(--warning-light); color: var(--warning); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }

.stat-info { flex: 1; }
.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }

/* ============ Page Header ============ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* (?) help icon (views/_help.ejs): the explanation shows on hover / tap, not on the page */
.help-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6em; height: 1.6em; min-width: 24px; min-height: 24px;
    margin-inline-start: .3em; padding: 0; vertical-align: middle;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--text-muted); font-size: .8em; line-height: 1; cursor: help;
}
.page-title .help-tip { font-size: .55em; }
.help-tip:hover, .help-tip:focus-visible { color: var(--primary); background: rgba(var(--primary-rgb), .08); outline: none; }
.help-tooltip { --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 340px; --bs-tooltip-font-size: .9rem; --bs-tooltip-padding-x: .8rem; --bs-tooltip-padding-y: .55rem; }
.help-tooltip .tooltip-inner { text-align: start; line-height: 1.6; }

/* ============ Tables ============ */
.table { margin-bottom: 0; }
/* Absolutely placed bits inside a table (.visually-hidden text, badges) stay inside
   its horizontal scroller; otherwise, in RTL, they widen the whole page on phones. */
.table-responsive { position: relative; }
.table thead th {
    background: var(--bg-body);
    border-bottom: 2px solid var(--border);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 16px;
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.table tbody tr:hover { background: var(--primary-50); }
.table tbody tr:last-child td { border-bottom: none; }

/* ============ Buttons ============ */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    color: #fff;
}

.btn-accent {
    /* White text needs the strong shade: on the brand orange it was 2.9:1. */
    background: linear-gradient(135deg, var(--accent-strong), color-mix(in srgb, var(--accent-strong) 82%, #000));
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
    transition: var(--transition);
}
.btn-accent:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35); }

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #166534); /* white text >= 5:1 */
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ============ Forms ============ */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* ============ Badges ============ */
.badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge-achieved { background: var(--success-light); color: #065f46; }
.badge-not-achieved { background: var(--danger-light); color: #991b1b; }
.badge-domain { background: var(--primary-50); color: var(--primary-dark); }
.badge-bloom { background: var(--info-light); color: #1e40af; }

/* ============ Achievement Bar ============ */
.achievement-bar {
    height: 10px;
    border-radius: 5px;
    background: var(--bg-body);
    overflow: hidden;
    position: relative;
}

.achievement-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.achievement-fill.success { background: linear-gradient(90deg, var(--success), #34d399); }
.achievement-fill.danger { background: linear-gradient(90deg, var(--danger), #f87171); }
.achievement-fill.warning { background: linear-gradient(90deg, var(--warning), #fbbf24); }

.achievement-value {
    font-weight: 700;
    font-size: 0.95rem;
}

/* ============ Modals ============ */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}

.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border); padding: 16px 24px; }

/* ============ Mapping Matrix ============ */
.matrix-table { font-size: 0.85rem; }
.matrix-table th { text-align: center; }
.matrix-table td { text-align: center; vertical-align: middle; }
.matrix-cell { cursor: pointer; width: 36px; height: 36px; }
.matrix-cell.active {
    background: var(--primary) !important;
    color: white;
    font-weight: 700;
}
.matrix-cell:hover { background: var(--primary-100) !important; }

/* ============ Responsive ============ */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(100%); }
    .rtl .sidebar { transform: translateX(100%); }
    .ltr .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .rtl .main-content { margin-right: 0; }
    .ltr .main-content { margin-left: 0; }
    .sidebar-overlay.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1030;
    }
    .content-area { padding: 16px; }
}

.sidebar-overlay { display: none; }

/* ============ Login Page ============ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--login-gradient);
    padding: 20px;
}

.login-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    padding: 40px;
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo i { font-size: 3rem; color: var(--primary); }
.login-logo h2 { margin-top: 12px; font-weight: 800; font-size: 1.3rem; color: var(--text-primary); }

/* ============ Empty State ============ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 3rem; margin-bottom: 12px; }
.empty-state p { font-size: 1rem; }

/* ============ Section Card ============ */
.section-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 24px;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.section-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
    color: inherit;
}

.section-card .course-code {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 12px;
}

.section-card .course-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.section-card .meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.85rem; }
.section-card .meta i { margin-left: 4px; }
.ltr .section-card .meta i { margin-left: 0; margin-right: 4px; }

/* ============ Animations ============ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .stat-card, .section-card { animation: fadeInUp 0.4s ease forwards; }
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.1s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }

/* Grade table input */
.grade-input {
    width: 70px;
    text-align: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
    font-weight: 600;
    transition: var(--transition);
}
.grade-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
    outline: none;
}

/* ============================================
   Theme Switcher (sidebar footer)
   ============================================ */
.theme-switcher {
    position: relative;
}
.theme-switcher-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}
.theme-switcher-toggle:hover { background: var(--bg-sidebar-hover); color: #fff; }
.theme-menu {
    position: fixed;          /* NOT absolute — sidebar overflow+transform clips absolute children */
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: 8px;
    z-index: 9999;
    display: none;
}
.theme-menu.show { display: block; animation: fadeInUp 0.15s ease; }
.theme-menu-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px 8px;
}
.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: start;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}
.theme-option:hover { background: var(--primary-50); }
.theme-option.active { background: var(--primary-50); color: var(--primary-dark); font-weight: 700; }
.theme-option .swatch {
    width: 28px; height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    background: linear-gradient(90deg, var(--sw-a, #2B3990) 0 60%, var(--sw-b, #F37021) 60% 100%);
    flex-shrink: 0;
}
.theme-option .check {
    margin-inline-start: auto;
    color: var(--primary);
    opacity: 0;
}
.theme-option.active .check { opacity: 1; }

/* Top bar accent stripe (subtle brand band) */
.top-bar {
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background:
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        var(--header-gradient) border-box;
    border-top: 3px solid transparent;
}

/* Logo accent dot */
.logo i { color: var(--sidebar-active); }

/* Achievement bar default uses primary brand */
.achievement-fill { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }

/* Section card hover border */
.section-card:hover { border-color: var(--primary-light); }

/* Accent badge for "new" labels & links */
.badge-accent { background: var(--accent-50); color: var(--accent-dark); border:1px solid var(--accent-light); }

/* Soft-print mode kept brand-neutral */
@media print {
    .sidebar, .top-bar, .theme-menu { display: none !important; }
    .main-content { margin: 0 !important; }
}

/* ============ Collapsible Section Chevron ============ */
.collapse-chevron {
    transition: transform 0.25s ease;
    font-size: 0.85rem;
}
.collapsed .collapse-chevron,
[aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}
[data-bs-toggle="collapse"][aria-expanded="false"] .collapse-chevron {
    transform: rotate(-90deg);
}

/* ============ Quick Action Cards (Section Detail) ============ */

/* --- Management action cards --- */
.qa-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 14px 18px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 120px;
}
.qa-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}
.qa-action-card .qa-action-arrow {
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.25s ease;
}
.rtl .qa-action-card .qa-action-arrow { left: 10px; right: auto; }
.ltr .qa-action-card .qa-action-arrow { left: auto; right: 10px; }
.ltr .qa-action-card .qa-action-arrow i { transform: rotate(180deg); }
.qa-action-card:hover .qa-action-arrow {
    opacity: 1;
    color: var(--primary);
}

.qa-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
    transition: transform 0.25s ease;
}
.qa-action-card:hover .qa-action-icon {
    transform: scale(1.08);
}
.qa-action-icon-outline {
    background: var(--primary-50) !important;
    color: var(--primary) !important;
    box-shadow: none !important;
    border: 1.5px solid var(--primary-100);
}
.qa-action-icon-accent {
    background: linear-gradient(135deg, var(--accent-strong), color-mix(in srgb, var(--accent-strong) 82%, #000)) !important;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3) !important;
}

.qa-action-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Primary variant */
.qa-action-primary {
    border-color: rgba(var(--primary-rgb), 0.15);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--primary-50) 100%);
}
.qa-action-primary:hover {
    border-color: var(--primary-light);
}

/* Accent variant */
.qa-action-accent {
    border-color: rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--accent-50) 100%);
}
.qa-action-accent:hover {
    border-color: var(--accent-light);
}

/* Outline variant */
.qa-action-outline {
    border-style: dashed;
    border-color: var(--border);
}
.qa-action-outline:hover {
    border-color: var(--primary);
    border-style: solid;
    background: var(--primary-50);
}

/* --- Report / Document cards --- */
.qa-report-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--qa-accent, var(--primary));
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    color: var(--text-primary);
    min-height: 78px;
}
.qa-report-card:hover {
    transform: translateY(-2px) translateX(-2px);
    box-shadow: var(--shadow-md);
    border-inline-start-width: 5px;
    background: var(--qa-accent-light, var(--primary-50));
    color: var(--text-primary);
}

.qa-report-icon-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    transition: transform 0.25s ease;
}
.qa-report-card:hover .qa-report-icon-wrap {
    transform: scale(1.08);
}

.qa-report-body {
    flex: 1;
    min-width: 0;
}
.qa-report-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}
.qa-report-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.qa-report-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.qa-report-chevron {
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: transform 0.25s ease, color 0.25s ease;
}
.qa-report-card:hover .qa-report-chevron {
    color: var(--qa-accent, var(--primary));
    transform: translateX(-3px);
}
.ltr .qa-report-card:hover .qa-report-chevron {
    transform: translateX(3px);
}
.ltr .qa-report-chevron {
    transform: rotate(180deg);
}
.ltr .qa-report-card:hover .qa-report-chevron {
    transform: rotate(180deg) translateX(-3px);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .qa-action-card { padding: 16px 10px 14px; min-height: 100px; }
    .qa-action-icon { width: 42px; height: 42px; font-size: 1.2rem; border-radius: 12px; }
    .qa-action-label { font-size: 0.78rem; }
    .qa-report-card { padding: 12px 14px; gap: 10px; }
    .qa-report-icon-wrap { width: 38px; height: 38px; min-width: 38px; font-size: 1rem; border-radius: 10px; }
    .qa-report-title { font-size: 0.82rem; }
    .qa-report-desc { display: none; }
}


/* ===================================================================
   DDAP — Department-Driven Assessment Plan
   Unified visual identity for the per-semester assessment plan feature.
   Used by: section detail banner, sections list badge, plan-coverage view,
   CLOs list, questions/CLO picker, readiness panel.
   =================================================================== */
:root {
    /* DDAP brand color (purple) — distinct from primary/accent so it never
       collides with theme switching. Hard-coded so the feature looks the
       same regardless of which theme the institution picks. */
    --ddap-primary: #7c3aed;
    --ddap-primary-dark: #6d28d9;
    --ddap-primary-light: #8b5cf6;
    --ddap-soft: #ddd6fe;
    --ddap-soft-bg: rgba(124, 58, 237, 0.05);
    --ddap-soft-border: rgba(124, 58, 237, 0.15);
    --ddap-text: #6b21a8;
}

/* ── Banner shown on section detail when a plan is active ─────────────── */
.plan-banner {
    background: var(--ddap-soft-bg);
    border: 1px solid var(--ddap-soft-border);
    border-left: 4px solid var(--ddap-primary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 1.5rem;
}
html[dir="rtl"] .plan-banner {
    border-left: none;
    border-right: 4px solid var(--ddap-primary);
}
.plan-banner-title {
    font-weight: 700;
    color: var(--ddap-primary-dark);
    margin: 0 0 6px 0;
    font-size: 0.95rem;
}
.plan-banner-desc {
    color: var(--ddap-text);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Inline numeric badge inside narrative text ──────────────────────── */
.plan-badge {
    display: inline-block;
    background: var(--ddap-primary);
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    margin: 0 4px 0 0;
}

/* ── Tag used in section lists ("In Plan (3 CLOs)") ──────────────────── */
.plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ddap-soft);
    color: var(--ddap-primary-dark);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.75rem;
    text-decoration: none;
    transition: filter .15s ease;
}
.plan-tag:hover { filter: brightness(.95); color: var(--ddap-primary-dark); }

/* ── Star/pin marker placed beside CLO codes when targeted by plan ──── */
.plan-marker {
    color: var(--ddap-primary);
    font-size: 0.85rem;
    margin: 0 4px;
}
.plan-marker[data-state="targeted"] { color: var(--ddap-primary); }
.plan-marker[data-state="excluded"] { color: #b45309; }

/* ── Status pill for plan-coverage progress per CLO ──────────────────── */
.plan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}
.plan-status-ok      { background: #dcfce7; color: #166534; }
.plan-status-pending { background: #fef9c3; color: #854d0e; }
.plan-status-missing { background: #fee2e2; color: #991b1b; }

/* ── Onboarding tip banner (dismissable) ────────────────────────────── */
.plan-onboarding {
    position: relative;
    background: linear-gradient(135deg, var(--ddap-soft-bg), rgba(124,58,237,.10));
    border: 1px solid var(--ddap-soft-border);
    border-radius: 12px;
    padding: 14px 16px 14px 56px;
    margin-bottom: 1rem;
}
html[dir="rtl"] .plan-onboarding { padding: 14px 56px 14px 16px; }
.plan-onboarding::before {
    content: "✨";
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: 1.5rem;
}
html[dir="rtl"] .plan-onboarding::before { left: auto; right: 18px; }
.plan-onboarding .btn-close-onboarding {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    font-size: 0.85rem;
    color: var(--ddap-text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
html[dir="rtl"] .plan-onboarding .btn-close-onboarding { right: auto; left: 8px; }
.plan-onboarding .btn-close-onboarding:hover { background: rgba(0,0,0,.05); }

/* ── Coverage progress bar on plan-coverage view ────────────────────── */
.plan-progress-track {
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.plan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ddap-primary-light), var(--ddap-primary));
    transition: width .4s ease;
}


/* ===================================================================
   Mode-Transition Governance — warned banner
   Shown above the purple DDAP banner when a plan is in keep_warned state
   (assessment mode tightened after activation; instructor must finish
   the current commitments).
   =================================================================== */
.warned-banner {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-left: 4px solid #ffc107;
    border-radius: 10px;
    padding: 12px 14px;
}
html[dir="rtl"] .warned-banner {
    border-left: none;
    border-right: 4px solid #ffc107;
}
.warned-banner strong { color: #856404; }

/* ============ Section Divider ============ */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
    margin: 1.75rem 0;
    border: none;
}

/* ============ Quick Links — Compact Action Strip ============ */
.quick-links {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.quick-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.quick-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-primary);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    transition: all .2s ease;
    white-space: nowrap;
}
.quick-link:hover {
    background: var(--primary-50);
    border-color: rgba(var(--primary-rgb), .2);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.quick-link-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
}
.quick-link-icon.ql-muted {
    background: var(--bg-body) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border);
}
.quick-link .badge {
    font-size: .62rem;
    padding: 2px 6px;
    border-radius: 10px;
}
.quick-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.quick-links-row + .quick-links-row {
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--border);
}
.quick-links-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .03em;
    white-space: nowrap;
    margin-inline-end: .35rem;
}
.quick-links-row.ql-secondary .quick-links-label { color: var(--text-muted); }
.quick-links-row.ql-secondary .quick-link {
    font-weight: 500;
    opacity: .88;
}
/* Numbered sequence chips — row 1 reads as an ordered path, not a pile of links */
.quick-links-row.ql-steps { counter-reset: qlstep; }
.quick-links-row.ql-steps .quick-link { position: relative; padding-inline-start: .6rem; }
.quick-links-row.ql-steps .quick-link::before {
    counter-increment: qlstep;
    content: counter(qlstep);
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--primary-50, #eff6ff);
    color: var(--primary, #2563eb);
    border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), .25);
    font-size: .68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
[dir="rtl"] .quick-links-row.ql-steps .quick-link::before {
    content: counter(qlstep, arabic-indic);
}
.quick-links-row.ql-steps .quick-link:hover::before {
    background: var(--primary, #2563eb);
    color: #fff;
}

@media (max-width: 575.98px) {
    .quick-link { padding: .4rem .65rem; font-size: .76rem; }
    .quick-link-icon { width: 22px; height: 22px; font-size: .7rem; }
}

/* ============ Per-section quality-cycle mini flow (_section_flow.ejs) ============ */
.sflow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: .5rem .75rem;
    background: var(--bg-main, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: .85rem;
    font-size: .74rem;
}
.sflow-step {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border-radius: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sflow-step.done    { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.sflow-step.pending { color: var(--text-muted, #5f6b7d); background: transparent; border-color: var(--border, #e5e7eb); }
.sflow-step.active  { background: var(--bg-card, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.sflow-step.active.role-instructor  { color: #1d4ed8; border-color: #bfdbfe; }
.sflow-step.active.role-coordinator { color: #15803d; border-color: #86efac; }
.sflow-step.active.role-head        { color: #7e22ce; border-color: #e9d5ff; }
.sflow-arrow { color: var(--border, #cbd5e1); font-size: .65rem; flex-shrink: 0; }
.sflow-you {
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    padding: .08rem .45rem;
    font-size: .66rem;
    font-weight: 700;
    animation: sflowPulse 2s ease-in-out infinite;
}
.sflow-wait {
    background: #fef3c7;
    color: #92400e;
    border-radius: 10px;
    padding: .08rem .45rem;
    font-size: .66rem;
    font-weight: 700;
}
.sflow-complete { color: #15803d; font-weight: 700; }
@keyframes sflowPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 575.98px) {
    .sflow-label { display: none; }
    .sflow-step.active .sflow-label { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section page (views/sections/detail.ejs + _status_panel.ejs) and list
   Tone comes from a .tone-* class; direction from logical properties, so the
   same rules serve RTL and LTR.
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    margin-top: 6px; font-size: .88rem; color: var(--text-secondary);
}
.sec-meta i { margin-inline-end: 4px; }
.sec-meta-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }

.sec-status {
    --tone-bg: rgba(var(--bs-info-rgb),.06); --tone-border: rgb(var(--bs-info-rgb)); --tone-text: var(--bs-info-text-emphasis, #055160);
    background: var(--tone-bg);
    border: 1px solid rgba(0,0,0,.06);
    border-inline-start: 4px solid var(--tone-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 1.5rem;
}
.sec-status.tone-success   { --tone-bg: rgba(25,135,84,.06);  --tone-border: #198754; --tone-text: #0f5132; }
.sec-status.tone-warning   { --tone-bg: rgba(255,193,7,.08);  --tone-border: #ffc107; --tone-text: #664d03; }
.sec-status.tone-info      { --tone-bg: rgba(var(--bs-info-rgb),.06); --tone-border: rgb(var(--bs-info-rgb)); --tone-text: var(--bs-info-text-emphasis, #055160); }
.sec-status.tone-secondary { --tone-bg: rgba(108,117,125,.08);--tone-border: #6c757d; --tone-text: #41464b; }

.sec-status-main {
    display: flex; flex-wrap: wrap; gap: 14px 20px;
    align-items: center; justify-content: space-between;
}
.sec-status-text { flex: 1 1 320px; min-width: 0; }
.sec-stage-chip {
    display: inline-block; margin-bottom: 6px;
    font-size: .75rem; font-weight: 600; padding: .2rem .65rem;
    border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.1);
    color: var(--tone-text);
}
.sec-status-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--tone-text);
}
.sec-status-hint { margin: 0; font-size: .88rem; color: var(--tone-text); opacity: .85; }
.sec-status-parallel { margin-top: 6px; font-size: .82rem; color: var(--text-secondary); }
.sec-status .btn-sec-go {
    background: var(--tone-border); color: #fff; border: none; font-weight: 600;
    padding: .55rem 1.2rem; border-radius: 8px; white-space: nowrap;
}
.sec-status .btn-sec-go:hover { filter: brightness(.92); color: #fff; }

.sec-status-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.sec-status-progress .progress { flex: 1 1 200px; max-width: 420px; height: 8px; background: rgba(0,0,0,.06); border-radius: 4px; }
.sec-status-progress .progress-bar { background: var(--tone-border); transition: width .4s; }
.sec-status-progress .sec-steps-count { font-weight: 700; font-size: .85rem; color: var(--tone-text); }
.sec-status-progress .btn-link { font-size: .82rem; padding: 0; text-decoration: none; }

.rdy-stepper {
    display: grid; grid-template-columns: repeat(var(--rdy-cols, 8), 1fr);
    gap: 0; list-style: none;
    margin: 14px 0 0; padding: 14px 0 0;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.rdy-step { position: relative; padding: 0 6px; text-align: center; font-size: .8rem; color: #495057; }
.rdy-step::before {
    content: ''; position: absolute; top: 14px; inset-inline-start: 50%;
    width: 100%; height: 2px; background: rgba(0,0,0,.08); z-index: 0;
}
.rdy-step:last-child::before { display: none; }
.rdy-step-dot {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%;
    background: #fff; border: 2px solid #dee2e6;
}
.rdy-step.is-done .rdy-step-dot    { border-color: #198754; background: #198754; color: #fff; }
.rdy-step.is-todo .rdy-step-dot    { border-color: #ffc107; background: #fff3cd; color: #664d03; animation: rdyPulse 1.8s infinite; }
.rdy-step.is-waiting .rdy-step-dot { border-color: #0dcaf0; background: #cff4fc; color: #055160; }
.rdy-step.is-blocked .rdy-step-dot,
.rdy-step.is-na .rdy-step-dot      { border-color: #dee2e6; color: #adb5bd; }
.rdy-step-label { display: block; line-height: 1.25; font-weight: 500; }
.rdy-step-owner { display: block; margin-top: 2px; font-size: .7rem; color: #6c757d; }
.rdy-step.is-done .rdy-step-label  { color: #198754; font-weight: 600; }
.rdy-step.is-todo .rdy-step-label  { color: #664d03; font-weight: 700; }
.rdy-step.is-blocked, .rdy-step.is-na { opacity: .55; }
@keyframes rdyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(255,193,7,0); }
}
@media (prefers-reduced-motion: reduce) { .rdy-step.is-todo .rdy-step-dot { animation: none; } }
@media (max-width: 768px) {
    .rdy-stepper { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
    .rdy-step:nth-child(4n)::before { display: none; }
    .rdy-step-label { font-size: .72rem; }
}

.rdy-support { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,.08); }
.rdy-support-title { margin-bottom: 8px; font-size: .78rem; font-weight: 600; color: #555e68; }
.rdy-support-list { display: flex; flex-direction: column; gap: 6px; }
.rdy-support-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 8px; background: rgba(255,193,7,.06); border: 1px solid rgba(255,193,7,.25);
    color: inherit; text-decoration: none; transition: background .15s ease;
}
.rdy-support-item:hover { background: rgba(255,193,7,.12); }
.rdy-support-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 8px; background: #fff3cd; color: #856404; font-size: 1rem;
}
.rdy-support-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdy-support-body strong { font-size: .85rem; color: #664d03; }
.rdy-support-body small { font-size: .78rem; }
.rdy-support-cta { flex-shrink: 0; white-space: nowrap; font-size: .78rem; font-weight: 600; color: #664d03; }

.sec-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: .85rem; color: var(--text-secondary); }

/* Workspace tabs as a segmented control: every tab is a visible button and
   the active one is filled. (The underline style read as plain headings here,
   and overflow clipped its bottom border.) */
.nav-tabs.sec-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;   /* wraps on narrow screens — no scrollbar */
    padding: 6px; margin-bottom: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.sec-tabs .nav-item { flex: 1 1 auto; }
.nav-tabs.sec-tabs .nav-link {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0; padding: .7rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-body); color: var(--text-secondary);
    font-size: .92rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.nav-tabs.sec-tabs .nav-link:hover {
    background: var(--primary-50); color: var(--primary); border-color: var(--primary-100);
}
.nav-tabs.sec-tabs .nav-link.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), .28);
}
.nav-tabs.sec-tabs .nav-link.active .badge { background: #fff !important; color: var(--primary) !important; }
.nav-tabs.sec-tabs .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec-ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sec-links .list-group-item { display: flex; align-items: center; gap: 12px; }
.sec-link-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 8px; background: var(--primary-50); color: var(--primary);
}
.sec-link-body { flex: 1; min-width: 0; }
.sec-link-body small { display: block; color: var(--text-secondary); }

.sec-next { font-size: .82rem; line-height: 1.3; }
.sec-next a { font-weight: 600; }
.sec-row-actions { display: flex; gap: 4px; flex-wrap: nowrap; }

/* Course-level advisory (e.g. syllabus not approved) at the top of the status panel */
.sec-advisory {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: -4px 0 14px; padding: 10px 12px;
    background: #fff8e1; border: 1px solid #ffe08a; border-radius: var(--radius);
    color: #664d03;
}
.sec-advisory > i { font-size: 1.3rem; flex-shrink: 0; }
.sec-advisory-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.sec-advisory-text span { font-size: .82rem; opacity: .9; }

/* Same advisory as a compact chip on the instructor section cards */
.sec-advisory-chip {
    display: inline-block; margin: 8px 0 0; padding: .15rem .55rem;
    font-size: .74rem; font-weight: 600; border-radius: 999px;
    background: #fff8e1; border: 1px solid #ffe08a; color: #664d03;
}

/* Dashboard: "needs my attention" (views/_attention_panel.ejs) */
.att-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.att-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; color: var(--primary-dark); }
.att-empty { color: var(--text-secondary); }
.att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px; }
.att-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-inline-start: 4px solid var(--att-tone, var(--primary)); border-radius: var(--radius); color: inherit; text-decoration: none; background: var(--bg-body); transition: background .15s ease; }
.att-item:hover { background: var(--primary-50); color: inherit; }
.att-item.tone-danger  { --att-tone: #dc3545; }
.att-item.tone-warning { --att-tone: #f59e0b; }
.att-item.tone-info    { --att-tone: rgb(var(--bs-info-rgb)); }
.att-item.tone-muted   { --att-tone: #adb5bd; }
.att-icon { font-size: 1.15rem; color: var(--att-tone, var(--primary)); flex-shrink: 0; }
.att-count { font-size: 1.25rem; font-weight: 800; min-width: 2ch; text-align: center; }
.att-label { flex: 1; min-width: 0; font-size: .9rem; }
.att-go { color: var(--text-muted); flex-shrink: 0; }

.coord-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-body); }
.coord-row-main { flex: 1 1 300px; min-width: 0; }

/* Abbreviations: explained first use + glossary dialog (views/layout.ejs) */
abbr.lms-abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.glossary-btn { white-space: nowrap; }
.glossary-list dt { font-weight: 700; color: var(--primary); }
.glossary-list dd { margin: 0 0 10px; color: var(--text-secondary); }

/* Sidebar: label + one-line description (views/layout.ejs) */
.nav-link-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nav-link-desc { font-size: .68rem; opacity: .7; font-weight: 400; white-space: normal; }

/* ── Readable status colours (WCAG AA, 4.5:1 for normal text) ──────────────
   Bootstrap's yellow on white is 1.6:1 and its green outline 4.2:1 on the
   page background; keep the hues, darken the text. */
.btn-outline-warning {
    --bs-btn-color: #92400e; --bs-btn-border-color: #d97706;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #92400e; --bs-btn-active-border-color: #92400e;
}
.btn-outline-success {
    --bs-btn-color: #146c43; --bs-btn-border-color: #146c43;
    --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43;
}
.text-warning { color: #b45309 !important; }
.text-success { color: #146c43 !important; }
.bg-accent-strong { background: var(--accent-strong) !important; color: #fff !important; }

/* ── Official Light theme: layout rules ───────────────────────────────────
   A white sidebar needs dark text, and the calmer look comes from fewer
   effects: no gradients, lifts or entry animations, thin borders. */
[data-theme="official"] .sidebar { border-inline-end: 1px solid var(--border); }
[data-theme="official"] .sidebar-header,
[data-theme="official"] .sidebar-footer { border-color: var(--border); }
[data-theme="official"] .logo { color: var(--text-primary); }
[data-theme="official"] .logo i {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--primary); color: #fff; font-size: 1.1rem;
}
[data-theme="official"] .nav-section-title { color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
[data-theme="official"] .nav-link-item i { color: #667085; }
[data-theme="official"] .nav-link-item:hover { background: var(--bg-sidebar-hover); color: var(--text-primary); }
[data-theme="official"] .nav-link-item.active {
    background: var(--primary-50); /* #c2410c on it: 5.1:1 */
    color: var(--primary);
    box-shadow: none;
}
[data-theme="official"] .nav-link-item.active i { color: var(--primary); }
[data-theme="official"] .user-name { color: var(--text-primary); }
[data-theme="official"] .user-role { color: var(--text-secondary); }
[data-theme="official"] .btn-icon:hover,
[data-theme="official"] .theme-switcher-toggle:hover { color: var(--text-primary); }
[data-theme="official"] .sidebar-toggle { color: var(--text-primary); }

[data-theme="official"] .top-bar { background: var(--bg-card); border-top: 0; box-shadow: none; }

[data-theme="official"] .card,
[data-theme="official"] .card:hover,
[data-theme="official"] .stat-card { box-shadow: none; }
[data-theme="official"] .card,
[data-theme="official"] .stat-card,
[data-theme="official"] .section-card { animation: none; }
[data-theme="official"] .stat-card { border-radius: var(--radius-lg); }
[data-theme="official"] .stat-card:hover { transform: none; box-shadow: var(--shadow-md); }
/* KPI cards: a thin coloured edge in the colour of their icon */
[data-theme="official"] .stat-card:has(.stat-icon.purple) { border-color: #f8c9a6; }
[data-theme="official"] .stat-card:has(.stat-icon.green)  { border-color: #a6dccf; }
[data-theme="official"] .stat-card:has(.stat-icon.blue)   { border-color: #bcd2f7; }
[data-theme="official"] .stat-card:has(.stat-icon.orange) { border-color: #f5d08f; }
[data-theme="official"] .stat-card:has(.stat-icon.red)    { border-color: #f4bcb6; }
[data-theme="official"] .stat-value { color: var(--text-primary); }

[data-theme="official"] .btn-primary { background: var(--primary); box-shadow: none; }
[data-theme="official"] .btn-primary:hover { background: var(--primary-dark); transform: none; box-shadow: none; }
[data-theme="official"] .btn-accent { background: var(--accent-strong); box-shadow: none; }
[data-theme="official"] .btn-accent:hover { background: color-mix(in srgb, var(--accent-strong) 85%, #000); transform: none; box-shadow: none; }
[data-theme="official"] .nav-pills .nav-link.active { background: var(--primary); box-shadow: none; }

[data-theme="official"] .table thead th {
    background: #f9fafb; border-bottom-width: 1px;
    text-transform: none; letter-spacing: 0;
}
[data-theme="official"] .table tbody tr:hover { background: #fafafb; }

/* Achievement bars in teal: in orange they would read as a warning. */
[data-theme="official"] .achievement-fill { background: var(--accent-strong); }

[data-theme="official"] .section-card .course-code {
    background: var(--primary-50); color: var(--primary-dark); /* 7.4:1 */
    border: 1px solid var(--primary-100); padding: 3px 12px;
}

[data-theme="official"] .login-card { border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* ── Colour review: buttons, badges and checkboxes that kept Bootstrap's colours ── */
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: rgb(var(--bs-info-rgb)); --bs-btn-border-color: rgb(var(--bs-info-rgb));
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, rgb(var(--bs-info-rgb)) 82%, #000); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, rgb(var(--bs-info-rgb)) 70%, #000);
}
.btn-outline-info {
    --bs-btn-color: rgb(var(--bs-info-rgb)); --bs-btn-border-color: rgb(var(--bs-info-rgb));
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgb(var(--bs-info-rgb)); --bs-btn-hover-border-color: rgb(var(--bs-info-rgb));
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgb(var(--bs-info-rgb));
}
.btn-outline-danger {
    --bs-btn-color: #b91c1c; --bs-btn-border-color: #b91c1c;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #991b1b;
}
.btn-outline-secondary {
    --bs-btn-color: #555e68; --bs-btn-border-color: #c4c9d0;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #555e68; --bs-btn-hover-border-color: #555e68;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #444b53;
}
/* Badges on a light tint had white text (1.4:1); text-* classes still win. */
.badge.bg-opacity-10, .badge.bg-opacity-25, .badge.bg-opacity-50, .badge.bg-light { color: var(--text-primary); }
.badge.bg-warning { color: #3d2a00; }
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--primary); border-color: var(--primary);
}
.form-check-input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .2); }

/* ── Official Light: the review's theme-specific fixes ── */
[data-theme="official"] {
    /* info follows the theme's teal instead of Bootstrap cyan */
    --bs-info: #0f766e;
    --bs-info-rgb: 15, 118, 110;
    --bs-info-bg-subtle: #e8f6f4;
    --bs-info-border-subtle: #b7e3dd;
    --bs-info-text-emphasis: #134e4a;
}
[data-theme="official"] .user-avatar { background: var(--primary); } /* white initial: 5.2:1 */
[data-theme="official"] .nav-link-desc { opacity: 1; color: var(--text-muted); }
[data-theme="official"] .nav-link-item.active .nav-link-desc { color: var(--primary-dark); }
/* Blue KPI icons become teal, the theme's second colour */
[data-theme="official"] .stat-icon.blue { background: var(--accent-50); color: var(--accent-dark); }
[data-theme="official"] .stat-card:has(.stat-icon.blue) { border-color: #a6dccf; }
/* Text in the brand colour on a brand tint needs the darker shade */
[data-theme="official"] .badge.text-primary,
[data-theme="official"] .bg-primary-subtle.text-primary { color: var(--primary-dark) !important; }

/* Pagination kept Bootstrap's blue. */
.pagination {
    --bs-pagination-color: var(--primary); --bs-pagination-hover-color: var(--primary-dark);
    --bs-pagination-focus-color: var(--primary-dark); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .2);
    --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary);
}
/* info is dark now: a "text-dark" info badge needs white text */
.badge.bg-info.text-dark { color: #fff !important; }
[data-theme="official"] .text-info { color: #115e59 !important; }
[data-theme="official"] .text-primary[class*="bg-opacity-"],
[data-theme="official"] [class*="bg-opacity-"] > .text-primary,
[data-theme="official"] .bg-primary[class*="bg-opacity-"] strong { color: var(--primary-dark) !important; }

/* Section cards on the dashboard: where the section stands */
.sec-card-status { font-weight: 600; }
.sec-card-status-action  { color: #92400e; }
.sec-card-status-waiting { color: var(--text-secondary); }
.sec-card-status-done    { color: #15803d; }
.sec-card-status-locked  { color: var(--text-muted); }

/* The "do it now" button takes the panel tone; on the warning yellow, white text was 1.6:1. */
.sec-status.tone-warning .btn-sec-go, .sec-status.tone-warning .btn-sec-go:hover { color: #3d2a00; }

/* ── Phone width ── */
/* Page headers: the title block may shrink, long badges wrap (the CLO report header ran off the screen). */
.page-header > div { min-width: 0; }
.page-header .badge { white-space: normal; text-align: start; }
/* A select never wider than its container (long department names). */
.form-select { max-width: 100%; }
/* Grade entry: the sticky name column took the whole phone width, hiding the mark boxes. */
.grade-student-cell { white-space: nowrap; }
@media (max-width: 576px) {
    .grade-student-cell { white-space: normal; max-width: 120px; font-size: .78rem; line-height: 1.35; }
}
/* Wide tables (5 columns or more) keep their first column (name, code) in view
   while the rest scrolls; background-color, not box-shadow, so Bootstrap's row
   colours and stripes survive. .no-pin turns it off (multi-row headers). */
@media (max-width: 576px) {
    .table-responsive > .table:not(.no-pin):has(> thead > tr > :nth-child(5)) > :is(thead, tbody, tfoot) > tr > :first-child {
        position: sticky; inset-inline-start: 0; z-index: 1; background-color: var(--bg-card);
        max-width: 130px; white-space: normal; border-inline-end: 1px solid var(--border);
    }
    .table-responsive > .table:not(.no-pin):has(> thead > tr > :nth-child(5)) > thead > tr > :first-child { z-index: 2; background-color: var(--bg-body); }
    .matrix-table tbody th { min-width: 110px; max-width: 130px; }
    .pg-mapping .course-plo-table .course-col { min-width: 130px; }
}

/* info is dark since the colour review: solid info backgrounds that asked for dark text get white. */
.bg-info.text-dark:not([class*="bg-opacity-"]) { color: #fff !important; }
/* Links on the light green of table-success rows (3.99:1 in the brand orange). */
.table-success a:not(.btn) { color: var(--primary-dark); }
.table-success .btn-outline-primary { --bs-btn-color: var(--primary-dark); --bs-btn-border-color: var(--primary-dark); }

/* Links that open in a new tab (public/js/work-guard.js) */
.newtab-icon { font-size: .72em; margin-inline-start: .3em; opacity: .7; }