:root {
  --sp-teal: #00E0D0;
  --sp-silver: #C0C0C0;
  --sp-graphite: #1A1A1E;
  --sp-black: #080808;
  --sp-white: #F8FAFC;
  --sp-glass: rgba(255, 255, 255, 0.03);
  --sp-border: rgba(255, 255, 255, 0.10);
  --sp-success: #55B36B;
  --sp-danger: #E05252;
  --sp-warning: #F2C94C;
  --sp-info: #2E6BD8;

  --sp-bg: var(--sp-black);
  --sp-surface: #101115;
  --sp-surface-2: var(--sp-graphite);
  --sp-text: var(--sp-white);
  --sp-muted: rgba(192, 192, 192, 0.86);
  --sp-link: var(--sp-teal);
  --sp-link-hover: #48efe5;
  --sp-focus: rgba(0, 224, 208, 0.34);
  --sp-shadow: 0 18px 42px rgba(0, 0, 0, 0.40);
  --sp-font-base: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Bootstrap theme bridge */
  --bs-body-bg: var(--sp-bg);
  --bs-body-color: var(--sp-text);
  --bs-border-color: var(--sp-border);
  --bs-emphasis-color: var(--sp-white);
  --bs-secondary-color: var(--sp-muted);
  --bs-link-color: var(--sp-link);
  --bs-link-hover-color: var(--sp-link-hover);
  --bs-primary: var(--sp-teal);
  --bs-primary-rgb: 0, 224, 208;
  --bs-secondary: var(--sp-silver);
  --bs-secondary-rgb: 192, 192, 192;
  --bs-dark: var(--sp-graphite);
  --bs-dark-rgb: 26, 26, 30;
  --bs-light: var(--sp-surface);
  --bs-light-rgb: 16, 17, 21;

  /* Legacy aliases used by existing CSS */
  --mc-bg: var(--sp-bg);
  --mc-surface: var(--sp-surface);
  --mc-sidebar: var(--sp-black);
  --mc-sidebar-2: var(--sp-graphite);
  --mc-primary: var(--sp-teal);
  --mc-primary-2: #48efe5;
  --mc-text: var(--sp-text);
  --mc-muted: var(--sp-muted);
  --mc-border: var(--sp-border);
  --mc-shadow: var(--sp-shadow);
  --mc-font-base: var(--sp-font-base);
  --mc-font-display: var(--sp-font-base);

  --app-bg: var(--sp-bg);
  --app-surface: var(--sp-surface);
  --app-card: var(--sp-surface-2);
  --app-accent: var(--sp-teal);
  --app-accent-2: #48efe5;
  --app-text: var(--sp-text);
  --app-muted: var(--sp-muted);
  --app-border: var(--sp-border);

  --public-bg: var(--sp-bg);
  --public-surface: rgba(26, 26, 30, 0.88);
  --public-border: var(--sp-border);
  --public-accent: var(--sp-teal);
  --public-accent-strong: #48efe5;
  --public-text: var(--sp-text);
  --public-muted: var(--sp-muted);

  --site-bg: var(--sp-bg);
  --site-surface: rgba(26, 26, 30, 0.88);
  --site-border: var(--sp-border);
  --site-accent: var(--sp-teal);
  --site-accent-strong: #48efe5;
  --site-text: var(--sp-text);
  --site-muted: var(--sp-muted);

  --landing-accent: var(--sp-teal);
  --landing-accent-2: #48efe5;
  --landing-dark: var(--sp-bg);
  --landing-muted: var(--sp-muted);
  --landing-surface: rgba(26, 26, 30, 0.88);
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-base);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.mc-display {
  font-family: var(--sp-font-base);
  letter-spacing: 0.01em;
  color: var(--sp-white);
}

h1 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); }
h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
h3 { font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.5rem); }
h4 { font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.3rem); }
h5,
h6 { font-size: 1rem; }

a {
  color: var(--sp-link);
}

a:hover,
a:focus {
  color: var(--sp-link-hover);
}

.text-muted,
.text-secondary,
.text-white-50 {
  color: var(--sp-muted);
}

.text-dark,
.text-black-50 {
  color: var(--sp-white);
}

.text-white {
  color: var(--sp-white);
}

.bg-light,
.bg-white,
.navbar-light,
.table-light,
.text-bg-light {
  background-color: var(--sp-surface);
  color: var(--sp-white);
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start,
.border-light {
  border-color: var(--sp-border);
}

:focus-visible {
  outline: 3px solid var(--sp-teal);
  outline-offset: 2px;
}

/* Utilities */
.bg-sp-black { background: var(--sp-black) !important; }
.bg-sp-graphite { background: var(--sp-graphite) !important; }
.bg-sp-glass { background: var(--sp-glass) !important; }
.border-sp { border: 1px solid var(--sp-border) !important; }
.text-sp-white { color: var(--sp-white) !important; }
.text-sp-teal { color: var(--sp-teal) !important; }
.text-sp-silver { color: var(--sp-silver) !important; }
.text-sp-muted { color: var(--sp-muted) !important; }

.card-sp,
.card {
  background: linear-gradient(170deg, var(--sp-glass), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  color: var(--sp-text);
  box-shadow: var(--sp-shadow);
}

.card-sp-lg {
  border-radius: 24px;
}

.card-header,
.card-footer {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--sp-border);
}

.btn-sp-primary,
.btn-primary,
.btn.btn-sp-primary,
.btn.btn-primary {
  --bs-btn-bg: var(--sp-teal);
  --bs-btn-border-color: var(--sp-teal);
  --bs-btn-color: var(--sp-black);
  --bs-btn-hover-bg: #48efe5;
  --bs-btn-hover-border-color: #48efe5;
  --bs-btn-hover-color: var(--sp-black);
  --bs-btn-active-bg: #1ee8dc;
  --bs-btn-active-border-color: #1ee8dc;
  --bs-btn-active-color: var(--sp-black);
  --bs-btn-disabled-bg: rgba(0, 224, 208, 0.45);
  --bs-btn-disabled-border-color: rgba(0, 224, 208, 0.45);
  --bs-btn-disabled-color: rgba(8, 8, 8, 0.65);
  font-weight: 700;
}

.btn-sp-outline,
.btn-outline-primary,
.btn-outline-light,
.btn.btn-sp-outline,
.btn.btn-outline-primary,
.btn.btn-outline-light {
  --bs-btn-color: var(--sp-teal);
  --bs-btn-border-color: rgba(0, 224, 208, 0.72);
  --bs-btn-hover-bg: var(--sp-teal);
  --bs-btn-hover-border-color: var(--sp-teal);
  --bs-btn-hover-color: var(--sp-black);
  --bs-btn-active-bg: var(--sp-teal);
  --bs-btn-active-border-color: var(--sp-teal);
  --bs-btn-active-color: var(--sp-black);
  --bs-btn-disabled-color: rgba(0, 224, 208, 0.45);
  --bs-btn-disabled-border-color: rgba(0, 224, 208, 0.35);
  font-weight: 600;
}

.btn-outline-secondary,
.btn.btn-outline-secondary {
  --bs-btn-color: var(--sp-silver);
  --bs-btn-border-color: rgba(192, 192, 192, 0.5);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-hover-border-color: rgba(192, 192, 192, 0.75);
  --bs-btn-hover-color: var(--sp-white);
}

.badge-sp,
.badge {
  border-radius: 999px;
  border: 1px solid var(--sp-border);
}

.badge-sp-teal,
.text-bg-primary,
.bg-primary {
  background: rgba(0, 224, 208, 0.16) !important;
  color: var(--sp-teal) !important;
  border-color: rgba(0, 224, 208, 0.35) !important;
}

.badge-sp-graphite {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--sp-silver) !important;
}

.text-bg-sp-graphite {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--sp-silver) !important;
  border: 1px solid var(--sp-border) !important;
}

.nav-sp,
.mc-topbar,
.public-nav,
.site-nav {
  background: rgba(8, 8, 8, 0.94) !important;
  border-bottom: 1px solid var(--sp-border);
  backdrop-filter: blur(12px);
}

.nav-sp .nav-link,
.navbar .nav-link,
.site-nav .nav-link,
.public-nav .nav-link {
  color: var(--sp-muted);
}

.nav-sp .nav-link:hover,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.nav-pills .nav-link.active {
  color: var(--sp-teal);
}

.input-sp,
.form-control,
.form-select,
.form-check-input,
.form-stack input[type="text"],
.form-stack input[type="email"],
.form-stack input[type="number"],
.form-stack input[type="date"],
.form-stack input[type="datetime-local"],
.form-stack input[type="password"],
.form-stack input[type="search"],
.form-stack input[type="url"],
.form-stack select,
.form-stack textarea {
  background: var(--sp-surface-2);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}

.form-control::placeholder,
.form-select::placeholder,
.input-sp::placeholder {
  color: rgba(192, 192, 192, 0.78);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-sp:focus,
.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  border-color: rgba(0, 224, 208, 0.8);
  box-shadow: 0 0 0 0.2rem var(--sp-focus);
}

.form-check-input:checked {
  background-color: var(--sp-teal);
  border-color: var(--sp-teal);
}

.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(192, 192, 192, 0.7);
  border-color: var(--sp-border);
  opacity: 1;
}

.form-control[readonly],
.form-select[readonly] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--sp-silver);
}

.form-control.is-valid,
.form-select.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: rgba(85, 179, 107, 0.72);
  box-shadow: 0 0 0 0.18rem rgba(85, 179, 107, 0.2);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: rgba(224, 82, 82, 0.78);
  box-shadow: 0 0 0 0.18rem rgba(224, 82, 82, 0.2);
}

.table-sp,
.table {
  --bs-table-color: var(--sp-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--sp-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(0, 224, 208, 0.07);
  --bs-table-striped-color: var(--sp-text);
  --bs-table-hover-color: var(--sp-white);
  color: var(--sp-text);
}

.table > :not(caption) > * > * {
  background: transparent;
  border-color: var(--sp-border);
}

.table thead th,
.table-sp thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--sp-silver);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

/* DataTables harmonization in dark mode */
:root {
  --dt-row-selected: 0, 224, 208;
  --dt-row-selected-text: 8, 8, 8;
  --dt-row-selected-link: 8, 8, 8;
  --dt-row-stripe: 255, 255, 255;
  --dt-row-hover: 0, 224, 208;
  --dt-column-ordering: 192, 192, 192;
  --dt-html-background: var(--sp-bg);
}

div.dataTables_wrapper,
table.table-sp.dataTable {
  --dt-row-selected: 0, 224, 208;
  --dt-row-selected-text: 8, 8, 8;
  --dt-row-selected-link: 8, 8, 8;
  --dt-row-stripe: 255, 255, 255;
  --dt-row-hover: 0, 224, 208;
  --dt-column-ordering: 192, 192, 192;
  --dt-html-background: var(--sp-bg);
}

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
  background: var(--sp-surface-2);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
}

div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  color: var(--sp-muted);
}

div.dataTables_wrapper div.dataTables_paginate .page-link {
  background: var(--sp-surface-2);
  color: var(--sp-silver);
  border-color: var(--sp-border);
}

div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link {
  background: var(--sp-teal);
  color: var(--sp-black);
  border-color: var(--sp-teal);
}

table.table-sp.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.03);
}

table.table-sp.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 224, 208, 0.08);
}

table.table-sp.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 224, 208, 0.92);
  color: var(--sp-black) !important;
}

div.dtr-modal div.dtr-modal-display {
  background: var(--sp-surface-2);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
}

div.dtr-modal div.dtr-modal-close {
  background: var(--sp-surface);
  color: var(--sp-text);
}

div.dtr-modal div.dtr-modal-background {
  background: rgba(0, 0, 0, 0.65);
}

table.dataTable > tbody > tr.selected > * {
  color: var(--sp-black) !important;
}

.modal-sp .modal-content,
.modal-content,
.offcanvas,
.dropdown-menu,
.list-group-item,
.toast,
.toast-sp {
  background: var(--sp-surface-2);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
}

.modal-header,
.modal-footer,
.offcanvas-header,
.dropdown-divider,
.list-group-item {
  border-color: var(--sp-border);
}

.dropdown-item {
  color: var(--sp-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(0, 224, 208, 0.12);
  color: var(--sp-white);
}

.dropdown-item.active,
.dropdown-item:active {
  background: rgba(0, 224, 208, 0.2);
  color: var(--sp-white);
}

.login-modal .form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
}

.login-modal .form-control:focus {
  border-color: rgba(0, 224, 208, 0.65);
  box-shadow: 0 0 0 0.2rem var(--sp-focus);
}

.login-modal .text-muted {
  color: var(--sp-muted);
}

.toast-sp,
.toast {
  box-shadow: var(--sp-shadow);
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;
}

.alert-sp,
.alert {
  background: rgba(255, 255, 255, 0.03);
  color: var(--sp-text);
  border: 1px solid var(--sp-border);
  border-left: 4px solid var(--sp-teal);
}

.alert-warning {
  border-left-color: var(--sp-warning);
}

.alert-danger,
.alert-error {
  border-left-color: var(--sp-danger);
}

.pagination .page-link {
  background: var(--sp-surface-2);
  color: var(--sp-silver);
  border-color: var(--sp-border);
}

.pagination .page-item.active .page-link {
  background: var(--sp-teal);
  border-color: var(--sp-teal);
  color: var(--sp-black);
}

.accordion-item,
.accordion-button {
  background: var(--sp-surface-2);
  color: var(--sp-text);
  border-color: var(--sp-border);
}

.accordion-button:not(.collapsed) {
  background: rgba(0, 224, 208, 0.10);
  color: var(--sp-white);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem var(--sp-focus);
}

.mc-sidebar {
  background: linear-gradient(180deg, var(--sp-black), var(--sp-graphite));
  border-right: 1px solid var(--sp-border);
}

.mc-sidebar .mc-brand .t2 {
  color: var(--sp-muted);
}

.mc-nav .nav-link {
  color: var(--sp-silver);
}

.mc-nav .nav-link:hover {
  background: rgba(0, 224, 208, 0.10);
  color: var(--sp-white);
}

.mc-nav .nav-link.active {
  background: rgba(0, 224, 208, 0.16);
  border: 1px solid rgba(0, 224, 208, 0.35);
  color: var(--sp-white);
}

.mc-strip,
.mc-strip.alt {
  background: var(--sp-teal);
}

.mc-strip.green {
  background: var(--sp-success);
}

.mc-strip.red {
  background: var(--sp-danger);
}

.mc-strip.yellow {
  background: var(--sp-warning);
}

.mc-row-actions--staff .btn-outline-warning {
  white-space: nowrap;
}

.student-bottom-nav {
  background: var(--sp-surface-2);
}

.student-bottom-nav a.active {
  color: var(--sp-teal);
}

body.pocket .btn.btn-sp-primary {
  background: var(--mc-primary, var(--sp-teal));
  border-color: transparent;
  color: var(--sp-black);
}

body.pocket .btn.btn-sp-primary:hover {
  background: var(--mc-primary-2, var(--sp-link-hover));
  border-color: transparent;
  color: var(--sp-black);
}

body.pocket .btn.btn-sp-outline {
  border-color: var(--mc-primary, var(--sp-teal));
  color: var(--mc-primary, var(--sp-teal));
  background: transparent;
}

body.pocket .btn.btn-sp-outline:hover {
  background: var(--mc-surface, var(--sp-surface));
}

body.pocket .btn.btn-outline-secondary {
  border-color: var(--sp-border);
  color: var(--sp-silver);
  background: transparent;
}

body.pocket .btn.btn-outline-secondary:hover {
  background: var(--mc-surface, var(--sp-surface));
}

body.pocket .btn.btn-outline-danger {
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
  background: transparent;
}

body.pocket .btn.btn-outline-danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

body.pocket .pocket-toggle .btn-check:checked + .btn {
  background: var(--mc-primary-2, var(--sp-link-hover));
  border-color: transparent;
  color: var(--sp-black);
}

@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .form-stack input[type="text"],
  .form-stack input[type="email"],
  .form-stack input[type="number"],
  .form-stack input[type="date"],
  .form-stack input[type="datetime-local"],
  .form-stack input[type="password"],
  .form-stack input[type="search"],
  .form-stack input[type="url"],
  .form-stack select,
  .form-stack textarea {
    font-size: 16px;
  }

  .table-responsive .table {
    font-size: .85rem;
  }

  .table-responsive th,
  .table-responsive td {
    padding: .5rem .6rem;
  }
}

@media (max-width: 767.98px) {
  .student-page .card {
    box-shadow: none;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .table-responsive .table {
    font-size: .9rem;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(192, 192, 192, 0.28);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 224, 208, 0.45);
}