/* ============================================================================
   DESIGN SYSTEM — single authoritative theme + shared component layer
   ----------------------------------------------------------------------------
   Loaded AFTER style.css by every base shell (base.html & base_dashboard.html)
   so all pages inherit ONE cohesive look regardless of per-page styles.

   This file does NOT remove functionality. It normalises appearance only.
   ============================================================================ */

/* ---- 1. ONE CONSOLIDATED PALETTE ------------------------------------------
   Every token name used anywhere (--moe-*, --school-*, --eaes-*, bare names)
   is aliased to a single coherent theme so all pages resolve consistently.  */
.ds-root,
:root {
  /* Brand */
  --primary:        #17324d;
  --primary-light:  #244564;
  --secondary:      #0f766e;
  --secondary-dark: #0b5f59;
  --gold:           #b7791f;
  --gold-dark:      #9a6318;

  /* Neutral / surfaces */
  --bg:              #f6f7f2;
  --white:           #ffffff;
  --surface:         #ffffff;
  --surface-soft:    #f8fafc;
  --text:            #172033;
  --muted:           #667085;
  --border:          #dfe5dc;
  --line:            #dfe5dc;
  --line-soft:       #eef2f7;
  --ink:             #172033;
  --ink-soft:        #667085;

  /* Semantic */
  --success:         #1a8a3a;
  --success-soft:    #e6f4ea;
  --warning:         #b7791f;
  --warning-soft:    #fdf3e0;
  --danger:          #c5221f;
  --danger-soft:     #fce8e6;
  --info:            #0f766e;
  --info-soft:       #e0f2fe;

  /* Extra aliases used by scattered page styles */
  --card: #ffffff;
  --card-bg: #ffffff;
  --success-bg: #e6f4ea;
  --danger-bg: #fce8e6;
  --warning-bg: #fdf3e0;
  --info-bg: #e0f2fe;

  /* Shape / elevation / radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23,32,51,.06);
  --shadow:    0 10px 24px rgba(23,32,51,.07);
  --shadow-lg: 0 22px 48px rgba(23,32,51,.12);
  --sidebar-width: 268px;
  --sidebar-collapsed: 82px;

  /* MoE / EAES / legacy aliases -> point to the same palette */
  --moe-navy: #17324d;  --school-navy: #17324d;  --eaes-blue: #17324d;
  --moe-blue: #244564;
  --moe-green: #0f766e; --school-green: #0f766e; --eaes-green: #0f766e;
  --moe-green-soft: #e0f2fe;
  --moe-gold: #b7791f;  --school-gold: #b7791f;
  --moe-gold-soft: #fdf3e0;
  --moe-red: #c5221f;   --school-red: #c5221f;
  --moe-red-soft: #fce8e6;
  --moe-bg: #f6f7f2;    --school-bg: #f6f7f2;
  --moe-surface: #ffffff; --school-surface: #ffffff;
  --moe-line: #dfe5dc;  --school-line: #dfe5dc;
  --moe-soft-line: #eef2f7; --school-soft-line: #eef2f7;
  --moe-text: #172033;  --school-text: #172033;
  --moe-muted: #667085; --school-muted: #667085;
  --moe-ink: #172033;   --school-ink: #172033;
  --moe-ink-soft: #667085; --ink-soft: #667085;
  --moe-shadow: 0 10px 24px rgba(23,32,51,.07);
  --moe-radius: 10px;
  --shadow-soft: 0 10px 24px rgba(23,32,51,.07);
}

/* ---- 2. BASE TYPOGRAPHY ------------------------------------------------ */
body {
  font-family: Inter, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 3. UNIFIED BUTTONS --------------------------------------------------
   Normalise every known button class to one visual language.
   Primary = brand teal/navy; success = green; danger = red; warning = gold.
---------------------------------------------------------------------------- */
button, .btn, .action-btn, .sm-btn, .su-action-btn, .su-drop-btn, .ttm-btn,
.ttg-btn, .cal-btn, .view-btn, .save-btn, .cancel-btn, .copy-btn, .open-btn,
.generate-btn, .download-btn, .submit-btn, .export-btn, .btn-save, .btn-cancel,
.btn-delete, .btn-approve, .btn-reject, .btn-print, .btn-back, .edit-btn,
.filter-btn, .primary-action, .btn-light, .btn-secondary, .btn.dark,
.icon-btn, .sm-btn.primary, .su-tpl-btn, .btn-success, .btn-info, .btn-warning,
.moe-btn, .moe-btn-primary {
  /* reset */
  border-radius: var(--radius);
  box-shadow: none;
  transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: .92rem;
  min-height: 40px;
  padding: 0 18px;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}
button:disabled, .btn:disabled, button[disabled], .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary actions: focused left/right positioning helpers */
.btn.primary, .btn-primary, .sm-btn.primary, .su-action-btn.primary,
.action-btn.primary, .save-btn, .submit-btn, .generate-btn, .btn-save,
.btn-approve, .primary-action, .sm-mo-save, .su-drop-btn, .ttm-btn.primary,
.ttg-btn.primary, .btn-success, .login-btn, .moe-btn-primary {
  background: var(--secondary);
  border: 1px solid var(--secondary);
  color: #fff !important;
}
.btn.primary:hover, .btn-primary:hover, .sm-btn.primary:hover,
.action-btn.primary:hover, .save-btn:hover, .submit-btn:hover,
.generate-btn:hover, .btn-save:hover, .btn-approve:hover, .primary-action:hover,
.sm-mo-save:hover, .su-drop-btn:hover, .btn-success:hover, .login-btn:hover {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* Secondary / neutral */
.btn-light, .btn-secondary, .cancel-btn, .copy-btn, .open-btn, .btn-cancel,
.btn-back, .btn.dark, .action-btn:not(.primary):not(.danger), .sm-btn.secondary,
.su-tpl-btn, .btn-print, .filter-btn, .sm-mo-cancel, .ttg-btn.secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary) !important;
}
.btn-light:hover, .btn-secondary:hover, .cancel-btn:hover, .copy-btn:hover,
.open-btn:hover, .btn-cancel:hover, .btn-back:hover, .btn.dark:hover,
.action-btn:not(.primary):not(.danger):hover, .sm-btn.secondary:hover,
.su-tpl-btn:hover, .filter-btn:hover, .sm-mo-cancel:hover, .btn-print:hover {
  background: var(--surface-soft);
  border-color: var(--line);
}

/* Danger */
.btn.danger, .btn-danger, .delete-btn, .btn-delete, .btn-reject,
.sm-btn.danger, .su-action-btn.danger, .action-btn.danger, .btn-dangerous,
.sm-mo-delete, .sm-bulk-delete {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff !important;
}
.btn.danger:hover, .btn-danger:hover, .delete-btn:hover, .btn-delete:hover,
.btn-reject:hover, .sm-btn.danger:hover, .action-btn.danger:hover,
.sm-mo-delete:hover {
  background: #a31d1a;
  border-color: #a31d1a;
}

/* Warning */
.btn-warning {
  background: var(--warning);
  border: 1px solid var(--warning);
  color: #fff;
}
.btn-warning:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* Ghost / link-style text buttons */
.btn-ghost, .ghost-btn, .link-btn, .icon-btn, .inline-form button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--secondary);
}
.icon-btn { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--info-soft); }
.btn-ghost:hover, .ghost-btn:hover, .link-btn:hover { color: var(--secondary-dark); background: var(--info-soft); }

/* Small / large sizes (existing conventions) */
.btn.sm, .sm-btn.sm, .att-btn.sm, .action-btn.sm, .btn-sm { min-height: 32px; padding: 0 12px; font-size: .82rem; }
.btn.lg, .action-btn.lg, .btn-lg { min-height: 48px; padding: 0 24px; font-size: 1rem; }

/* ---- 4. UNIFIED CARDS -------------------------------------------------
   Normalise card radius/shadow/padding across all module prefixes.     */
.card, .modern-card, .main-card, .side-card, .success-card, .profile-card,
.result-card, .login-card, .welcome-card, .recent-section, .stat-card,
.summary-box, .profile-item, .portal-box, .modal-box, .content-card,
.filter-card, .table-card, .info-card, .nav-card, .settings-card, .class-card,
.student-card, .upload-card, .review-card, .reg-data-panel, .data-panel,
.form-panel, .notice-panel, .sm-card, .su-card, .ttm-card, .ttg-card,
.cal-card, .hero-card, .dashboard-card, .panel, .card-box, .qbuilder-card,
.qbq-card, .qbuilder-sidebar-card, .qbq-sidebar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card, .stat-card, .summary-box, .profile-item, .modern-card, .main-card,
.side-card, .success-card, .profile-card, .result-card, .recent-section,
.settings-card, .content-card, .filter-card, .table-card, .upload-card,
.review-card, .sm-card, .su-card, .ttm-card, .ttg-card, .cal-card,
.data-panel, .form-panel, .notice-panel, .card-box {
  padding: 20px;
}
.card:hover, .modern-card:hover, .stat-card:hover, .sm-card:hover, .su-card:hover,
.ttm-card:hover, .ttg-card:hover { transform: none; box-shadow: var(--shadow); }

/* Card headers */
.card-header, .table-header, .modal-header, .card-title, .panel-header,
.sm-header-head, .su-card-h, .ttm-card-h, .ttg-card-h {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.card-header h2, .card-header h3, .table-header h2, .card-title h2,
.modal-header h2, .side-card h3, .panel-header h2, .panel-header h3,
.sm-card-h h2, .su-card-h h2 {
  color: var(--primary);
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0;
}

/* ---- 5. STAT CARDS ---------------------------------------------------- */
.stat-card, .sm-stat, .su-stat, .metric-card, .cal-stat, .ttm-stat, .rk-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  position: relative;
}
.stat-card h3, .stat-info h3, .sm-stat h3, .su-stat h3, .metric-card h3,
.sm-stat-head h3 { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.stat-card .num, .stat-info h2, .sm-stat .num, .su-stat .num, .metric-card .num,
.sm-stat-num, .stat-card p { color: var(--primary); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stats-grid, .sm-stats, .su-stats, .metric-grid, .data-grid { gap: 16px; }

/* ---- 5b. HORIZONTAL SEGMENTED STAT BAR -------------------------------- */
.stats-row {
  display: flex;
  flex-wrap: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 24px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell h3 { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.stat-cell .num { color: var(--primary); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.stat-cell.alerted .num { color: var(--warning); }
@media (max-width: 860px) {
  .stats-row { flex-wrap: wrap; }
  .stat-cell { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---- 6. UNIFIED TABLES -------------------------------------------------
   One header / row / hover / border language for every table class.    */
table, .modern-table, .result-table, .data-table, .recent-section table,
.ttm-table, .ttm-grid-table, .ttg-table, .editable-grid, .cal-table,
.sm-tbl, .su-sec-tbl, .student-table, .exam-table, .status-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  width: 100%;
}
th, .modern-table thead th, .result-table thead th, .recent-section th,
.data-table thead th, .ttm-table thead th, .ttm-grid-table thead th,
.ttg-table thead th, .editable-grid thead th, .cal-table thead th,
.sm-tbl thead th, .su-sec-tbl thead th, .student-table thead th,
.exam-table thead th, .status-table thead th {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--line) !important;
}
td, .modern-table tbody td, .result-table tbody td, .recent-section td,
.data-table tbody td, .ttm-table td, .ttm-grid-table td, .ttg-table td,
.editable-grid td, .cal-table td, .sm-tbl td, .su-sec-tbl td,
.student-table td, .exam-table td, .status-table td {
  color: var(--text);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .885rem;
  vertical-align: middle;
}
tbody tr:hover { background: var(--surface-soft); }

/* ---- 7. UNIFIED BADGES / STATUS PILLS ---------------------------------
   One pill shape; semantic colors shared everywhere.                   */
.badge, .status-badge, .table-badge, .gender-badge, .age-box, .user-badge,
.semester-badge, .status-pill, .sm-badge, .su-badge, .cal-badge, .rk-badge,
.tag, .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.4;
  background: var(--surface-soft);
  color: var(--primary);
  vertical-align: middle;
  white-space: nowrap;
}
/* Approved / success / present */
.badge.approved, .badge.success, .badge.present, .badge.correct, .badge.passed,
.badge.promoted, .status-approved, .status-pill.approved, .sm-badge.ok,
.su-badge.ok { background: var(--success-soft); color: var(--success); }
/* Pending / warning / late */
.badge.pending, .badge.late, .badge.submitted, .badge.warning, .badge.review,
.status-pending, .status-pill.pending, .sm-badge.warn { background: var(--warning-soft); color: var(--warning); }
/* Rejected / danger / absent / failed */
.badge.rejected, .badge.danger, .badge.absent, .badge.closed, .badge.failed,
.badge.not-promoted, .status-rejected, .status-pill.rejected, .sm-badge.bad {
  background: var(--danger-soft); color: var(--danger); }
/* Neutral / muted */
.badge.muted, .badge.neutral, .badge.info { background: var(--surface-soft); color: var(--muted); }

/* ---- 8. UNIFIED ALERTS & TOASTS --------------------------------------- */
.messages-wrapper, .messages, .att-msgs, .ds-alert-wrap { margin-bottom: 1rem; }

.custom-alert, .att-msg, .message, .moe-msg, .ds-alert, .toast-msg,
.sm-toast, .su-toast, .alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--surface-soft);
  color: var(--primary);
}
.custom-alert.success, .att-msg.success, .message.success, .moe-msg.success,
.ds-alert.success, .toast-msg.success, .sm-toast.success, .su-toast.success,
.alert.success { background: var(--success-soft); color: var(--success); border-color: #bfe6c9; }
.custom-alert.error, .att-msg.error, .message.error, .moe-msg.error,
.ds-alert.error, .toast-msg.error, .sm-toast.error, .su-toast.error,
.alert.error { background: var(--danger-soft); color: var(--danger); border-color: #f3c1bf; }
.custom-alert.warning, .att-msg.warning, .message.warning, .moe-msg.warning,
.ds-alert.warning, .toast-msg.warning, .sm-toast.warning, .su-toast.warning,
.alert.warning { background: var(--warning-soft); color: var(--warning); border-color: #efddb4; }
.custom-alert.info, .att-msg.info, .message.info, .moe-msg.info, .ds-alert.info,
.toast-msg.info, .sm-toast.info, .su-toast.info, .alert.info { background: var(--info-soft); color: var(--info); border-color: #bfd9ea; }

/* ---- 9. UNIFIED FORMS -------------------------------------------------- */
.form-control, .form-group input, .form-group select, .form-group textarea,
input, select, textarea, .form-grid input, .form-grid select, .form-grid textarea,
.sm-input, .su-input, .ttg-input, .ttg-select, .cal-input, .field input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea, .form-group textarea, .form-grid textarea, .form-control[type=textarea] {
  padding: 10px 12px; min-height: 96px; resize: vertical;
}
.form-control:focus, .form-group input:focus, .form-group select:focus,
input:focus, select:focus, textarea:focus, .sm-input:focus, .ttg-input:focus,
.ttg-select:focus, .cal-input:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(15,118,110,.14);
  background: #fff;
}

label, .form-label, .form-group label, .field label, .att-label {
  color: var(--primary);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 0;
  display: block;
  margin-bottom: 6px;
}
.required, .req { color: var(--danger); font-weight: 700; }

/* ---- 10. UNIFIED MODALS ------------------------------------------------ */
.modal, .modal-box, .sm-modal, .tt-modal, .tt-modal-overlay, .sm-mov,
.modal-backdrop, .dialog-backdrop, .dialog {
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.modal-header, .sm-modal-head, .tt-modal-head, .dialog-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2, .sm-modal-head h3, .tt-modal-head h3, .dialog-head h3 {
  color: var(--primary); font-size: 1.1rem; margin: 0;
}
.modal-body, .sm-modal-body, .tt-modal-body, .dialog-body {
  padding: 22px;
}
.modal-footer, .sm-modal-foot, .tt-modal-foot, .dialog-foot, .modal-actions {
  padding: 16px 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-backdrop, .sm-mov, .tt-modal-overlay, .dialog-backdrop {
  background: rgba(23,32,51,.45);
  backdrop-filter: blur(2px);
}
.modal-backdrop button.close, .modal-close, .sm-modal-close, .tt-modal-close {
  background: transparent; border: 0; font-size: 1.3rem; color: var(--muted); cursor: pointer; width:36px; height:36px; border-radius: var(--radius-sm);
}
.modal-backdrop button.close:hover, .modal-close:hover { background: var(--surface-soft); color: var(--danger); }

/* ---- 11. EMPTY STATES -------------------------------------------------- */
.empty-state, .empty, .sm-empty, .su-empty, td.empty, .empty-state {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: .95rem;
}
.empty-state i, .empty i, .sm-empty i { font-size: 2.4rem; display: block; margin-bottom: 12px; opacity: .35; }
.empty-state h2, .empty-state h3, .empty-state h4, .sm-empty h3 {
  color: var(--primary); font-size: 1.05rem; margin: 0 0 6px;
}

/* ---- 12. LOADING / SPINNER --------------------------------------------- */
.spinner, .sm-spinner, .su-spinner, .tt-spinner, .ds-spinner {
  border: 3px solid var(--line-soft);
  border-top-color: var(--secondary);
  border-radius: 50%;
  width: 40px; height: 40px;
  animation: ds-spin .8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---- 13. FILTER BARS --------------------------------------------------- */
.filter-bar, .filter-card, .filters, .sm-filters, .su-filters, .scope-toolbar {
  display: grid;
  gap: 12px;
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.filter-bar label, .filter-card label, .sm-filters label { display: block; margin-bottom: 6px; }

/* ---- 14. PAGINATION ---------------------------------------------------- */
.pagination, .sm-pagination, .pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pagination a, .pagination span, .sm-pagination a, .sm-pagination span, .sm-pbtn, .pager a {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff; color: var(--primary); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: background .15s ease;
}
.pagination a:hover, .sm-pagination a:hover, .sm-pbtn:hover, .pager a:hover { background: var(--info-soft); border-color: var(--info); }
.pagination .current, .sm-pagination .current, .sm-pbtn.active,
.pagination span.current { background: var(--secondary); color: #fff; border-color: var(--secondary); }

/* ---- 15. TABLE ACTION BUTTONS (compact) -------------------------------- */
.inline-actions, .row-actions, .action-buttons, .inline-buttons,
td.actions, .item-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.inline-actions .btn, .inline-actions button, .row-actions a, .row-actions button,
td.actions a, td.actions form button, .inline-form button, .action-link {
  min-height: 34px;
  padding: 0 12px;
  font-size: .82rem;
  border-radius: var(--radius-sm);
}
.action-link { background: transparent; border: 0; color: var(--secondary); font-weight: 600; }
.action-link:hover { color: var(--secondary-dark); background: var(--info-soft); }
.action-link.danger { color: var(--danger); }
.action-link.danger:hover { color: var(--danger); background: var(--danger-soft); }

/* ---- 16. RESPONSIVE ---------------------------------------------------- */
.table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  .filter-bar, .filter-card, .sm-filters, .su-filters { grid-template-columns: 1fr; }
  .modal-actions, .footer-actions, .form-actions, .action-buttons, .btn-row {
    flex-direction: column; align-items: stretch;
  }
  .modal-actions .btn, .form-actions .btn { width: 100%; }
  th, td, .modern-table thead th, .data-table thead th { white-space: nowrap; }
}

/* ---- 17. CROSS-PORTAL SHELLS & ACCESSIBILITY -------------------------
   The examination staff and student portals use independent base templates.
   Keep their existing routes and markup while giving each one the same
   Dera visual language as the main management shell.                    */
.skip-link { position: fixed; left: 16px; top: -56px; z-index: 100000; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 16px; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid rgba(15,118,110,.36); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { width: 17px; min-height: 17px; height: 17px; padding: 0; accent-color: var(--secondary); vertical-align: middle; }
input[type="file"] { padding: 8px 10px; min-height: 42px; }
input[aria-invalid="true"], .errorlist + input, .errorlist + select, .errorlist + textarea, .field-error input, .field-error select, .field-error textarea { border-color: var(--danger) !important; }
.errorlist, .field-errors, .qbuilder-error, .qbq-error { list-style: none; padding: 0; margin: 6px 0 0; color: var(--danger); font-size: .82rem; font-weight: 600; }
.helptext, .help-text, .form-text, .qbuilder-hint, .qbq-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .81rem; line-height: 1.45; }

/* Exam staff shell */
.moe-staff-shell { min-height: 100vh; background: var(--bg); }
.moe-staff-sidebar { background: var(--primary) !important; border-right: 1px solid rgba(255,255,255,.12); }
.moe-staff-brand { min-height: 76px; border-bottom-color: rgba(255,255,255,.14) !important; }
.moe-staff-brand img { object-fit: contain !important; background: #fff; border-radius: var(--radius-sm); }
.moe-staff-brand strong { color: #fff !important; }
.moe-staff-brand span { color: rgba(255,255,255,.7) !important; }
.moe-staff-nav { padding: 14px 10px !important; }
.moe-staff-nav a { display: flex; align-items: center; gap: 10px; min-height: 42px; border-radius: var(--radius-sm); color: rgba(255,255,255,.78) !important; margin: 2px 0; font-weight: 600; }
.moe-staff-nav a:hover, .moe-staff-nav a.active { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.moe-staff-topbar { min-height: 76px; background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--line) !important; }
.moe-staff-topbar h1 { color: var(--primary) !important; font-size: clamp(1.15rem, 2vw, 1.45rem) !important; }
.moe-staff-user { color: var(--muted) !important; }
.moe-staff-body { max-width: 1440px; width: 100%; margin: 0 auto; padding: 24px !important; }

/* Student examination shell */
.moe-frame { background: var(--bg); }
.moe-header { background: rgba(255,255,255,.97) !important; border-bottom-color: var(--line) !important; }
.moe-header-text h1 { color: var(--primary) !important; }
.moe-crest img { object-fit: contain !important; }
.moe-nav-link.active { color: var(--secondary) !important; }
.moe-nav-link.active::after { background: var(--secondary) !important; }
.moe-nav-link:hover { background: var(--surface-soft) !important; color: var(--primary) !important; }
.moe-profile-avatar { background: var(--info-soft) !important; color: var(--primary) !important; border-color: var(--border) !important; }
.moe-profile-menu { border-color: var(--line) !important; box-shadow: var(--shadow-lg) !important; }
.moe-student-info { border-bottom-color: var(--line) !important; }
.moe-basic-title { background: var(--primary) !important; }
.moe-basic-label { background: var(--surface-soft) !important; color: var(--primary) !important; }
.moe-main { background: var(--bg) !important; }
.moe-footer { background: #fff !important; border-top-color: var(--line) !important; }

img { max-width: 100%; }
.dashboard-body, .moe-staff-body, .moe-main { min-width: 0; }
@media (max-width: 900px) {
  .moe-staff-shell { display: block !important; }
  .moe-staff-sidebar { width: 100% !important; min-height: auto; }
  .moe-staff-nav { display: flex; overflow-x: auto; padding: 8px !important; }
  .moe-staff-nav a { flex: 0 0 auto; padding: 0 12px; }
  .moe-staff-body { padding: 18px !important; }
}
@media (max-width: 640px) {
  .moe-header-right { gap: 8px !important; }
  .moe-profile-menu { right: -8px !important; }
  .moe-staff-topbar { padding: 14px 16px !important; align-items: flex-start !important; gap: 12px; }
  .moe-staff-user > span { display: none; }
  .moe-staff-body { padding: 14px !important; }
  .stats-row { display: grid; grid-template-columns: 1fr; }
  .stat-cell { border-bottom: 1px solid var(--line-soft) !important; }
  .stat-cell:last-child { border-bottom: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }