/*
 * MSU Study Termination Hub — Dark Theme CSS
 * Built on top of Tabler UI v1.0.0-beta20
 *
 * Dark Palette:
 *   --bg-base      #0f172a  — deepest dark (body)
 *   --bg-surface   #1e293b  — card / panel surface
 *   --bg-elevated  #243044  — inputs, elevated surfaces
 *   --bg-hover     #2d3d55  — hover states
 *   --border-color #2e3f5a  — subtle border
 *   --brand-mid    #3d7a9b  — steel blue accent
 *   --brand-light  #6bbccc  — light teal
 *   --brand-accent #3fffd2  — mint/cyan highlight
 *   --text-primary #e2e8f0  — main text
 *   --text-muted   #7a90ab  — muted / secondary text
 */

/* ── Google Font ──────────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif; }

/* ── CSS Variables ────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-dark:        #0f172a;
  --brand-mid:         #3d7a9b;
  --brand-light:       #6bbccc;
  --brand-accent:      #3fffd2;
  --brand-accent2:     #2ae8bb;

  /* Dark surfaces */
  --bg-base:           #0f172a;
  --bg-surface:        #1e293b;
  --bg-elevated:       #243044;
  --bg-hover:          #2d3d55;
  --bg-input:          #1a2540;
  --border-color:      #2e3f5a;
  --border-focus:      #3d7a9b;

  /* Text */
  --text-primary:      #e2e8f0;
  --text-secondary:    #94a3b8;
  --text-muted:        #94a3b8;
  --text-heading:      #f1f5f9;

  /* Tabler overrides */
  --tblr-primary:      var(--brand-mid);
  --tblr-primary-rgb:  61, 122, 155;
  --tblr-body-bg:      var(--bg-base);
  --tblr-body-color:   var(--text-primary);
  --tblr-font-sans-serif: 'Inter', system-ui, sans-serif;

  /* Accent faded for banners */
  --brand-accent-faded: rgba(63, 255, 210, .08);
}

/* ── Base ─────────────────────────────────────────────────────── */
html, body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}

p, li, td, th, label, span, div {
  font-family: 'Inter', system-ui, sans-serif;
}

strong, b {
  font-weight: 700;
  color: var(--text-heading);
}

small, .small {
  font-size: .8rem;
  letter-spacing: .005em;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.navbar-vertical {
  background: #0d1829 !important;
  border-right: 1px solid var(--border-color) !important;
}

.navbar-vertical .navbar-brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Section labels */
.nav-section-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(107, 188, 204, .6);
  padding: .25rem 1rem;
  margin-top: .25rem;
}

/* Nav links */
.navbar-vertical .nav-link {
  color: rgba(226, 232, 240, .65) !important;
  border-radius: 8px;
  margin: 2px 8px;
  padding: .5rem .75rem !important;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.navbar-vertical .nav-link:hover {
  background: rgba(63, 255, 210, .07) !important;
  color: rgba(226, 232, 240, .95) !important;
}

.navbar-vertical .nav-link.active {
  background: rgba(63, 255, 210, .12) !important;
  color: var(--brand-accent) !important;
}

.navbar-vertical .nav-link .nav-link-icon {
  width: 1.4rem;
  text-align: center;
  font-size: 1.05rem;
  opacity: .85;
}

.navbar-vertical .nav-link.active .nav-link-icon {
  opacity: 1;
  color: var(--brand-accent);
}

/* ── Sidebar user block ────────────────────────────────────────── */
.sidebar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--brand-accent);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-subtitle {
  font-size: .7rem;
  color: var(--brand-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-action { flex-shrink: 0; }

.sidebar-user-dropdown {
  position: absolute;
  bottom: 100%;
  left: 8px;
  right: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  z-index: 100;
  overflow: hidden;
  margin-bottom: 6px;
}

.sidebar-user-dropdown-item {
  display: flex;
  align-items: center;
  padding: .65rem 1rem;
  font-size: .83rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .15s ease;
  font-family: 'Inter', sans-serif;
}

.sidebar-user-dropdown-item:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text-heading);
}

.sidebar-user-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}

.breadcrumb {
  font-size: .78rem;
  margin-bottom: .15rem !important;
}

.breadcrumb-item a {
  color: var(--brand-light);
  text-decoration: none;
}

.breadcrumb-item.active { color: var(--text-muted); }

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
}

/* ── Page wrapper background ─────────────────────────────────── */
.page-wrapper {
  background: var(--bg-base);
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.card-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  border-top: 2px solid var(--brand-mid);
  border-radius: 12px 12px 0 0 !important;
  padding: .875rem 1.25rem;
}

.card-title {
  font-weight: 700;
  color: var(--text-heading);
  font-size: .9rem;
  margin: 0;
}

.card-body {
  color: var(--text-primary);
}

/* bg-light override */
.card.bg-light {
  background: var(--bg-elevated) !important;
}

/* ── Card footer ─────────────────────────────────────────────── */
.card-footer {
  background: var(--bg-elevated) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: .65rem 1.25rem;
}

.card-footer a {
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: color .15s ease;
}

.card-footer a:hover {
  color: var(--brand-light);
}

/* ── Stat cards ───────────────────────────────────────────────── */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-icon-dark   { background: rgba(63, 255, 210, .1);   color: var(--brand-accent);  }
.stat-icon-mid    { background: rgba(61, 122, 155, .15);  color: var(--brand-light);   }
.stat-icon-light  { background: rgba(107, 188, 204, .12); color: var(--brand-light);   }
.stat-icon-accent { background: rgba(63, 255, 210, .1);   color: var(--brand-accent2); }

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1;
}

.stat-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-brand {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover { background: #2d5e78; border-color: #2d5e78; color: #fff; }
.btn-brand:focus { box-shadow: 0 0 0 3px rgba(61, 122, 155, .3); }

.btn-brand-outline {
  border: 2px solid var(--brand-mid);
  color: var(--brand-mid);
  font-weight: 600;
  background: transparent;
}
.btn-brand-outline:hover { background: var(--brand-mid); color: #fff; }

.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-secondary);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ── Status badges ────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pen  { background: rgba(133, 101,   0, .2); color: #fbbf24; }
.status-rec  { background: rgba( 26, 122, 145, .2); color: #38bdf8; }
.status-app  { background: rgba( 22, 101,  52, .2); color: #4ade80; }
.status-rej  { background: rgba(155,  28,  28, .2); color: #f87171; }
.status-with { background: rgba( 75,  85,  99, .2); color: #94a3b8; }

/* ── Tables ───────────────────────────────────────────────────── */
.table {
  font-size: .85rem;
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
}

.table thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  padding: .75rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-heading);
  background: transparent;
}

.table tbody tr:hover td { background: rgba(61, 122, 155, .06); }

.table tbody tr:last-child td { border-bottom: none; }

.regnum-cell {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-light);
  background: rgba(61, 122, 155, .15);
  padding: .2rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.filter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.filter-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.filter-card-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.filter-card-body { padding: 1rem 1.25rem; }

/* ── Form labels ──────────────────────────────────────────────── */
.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .4rem;
  letter-spacing: .01em;
}

/* ── Full-size inputs (main forms) ────────────────────────────── */
.form-control,
.form-select {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: .875rem;
  padding: .55rem .85rem;
  height: 42px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background-color: var(--bg-input);
  color: var(--text-primary);
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

textarea.form-control {
  height: auto;
  min-height: 110px;
  resize: vertical;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(61, 122, 155, .2);
  outline: none;
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.form-control::placeholder {
  color: var(--text-muted);
  font-size: .85rem;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: rgba(30, 41, 59, .6);
  color: var(--text-muted);
  border-color: rgba(46, 63, 90, .6);
  opacity: 1;
}

/* ── Small inputs (filter bars) ──────────────────────────────── */
.form-control-sm,
.form-select-sm {
  border-radius: 7px;
  border: 1px solid var(--border-color);
  font-size: .8rem;
  padding: .35rem .65rem;
  height: 34px;
  transition: border-color .2s, box-shadow .2s;
  background-color: var(--bg-input);
  color: var(--text-primary);
}

textarea.form-control-sm {
  height: auto;
}

.form-control-sm:focus,
.form-select-sm:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 2px rgba(61, 122, 155, .2);
  outline: none;
  background-color: var(--bg-elevated);
}

.form-control-sm::placeholder {
  color: var(--text-muted);
  font-size: .78rem;
}

/* ── Input groups ─────────────────────────────────────────────── */
.input-group-text {
  background: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--brand-light);
  font-size: .875rem;
}

.input-group-sm .input-group-text {
  font-size: .8rem;
  padding: .3rem .55rem;
}

/* Ensure form-select inside input-group fills height */
.input-group > .form-select,
.input-group > .form-control { flex: 1 1 auto; }

/* Rounded corners for inputs in input-groups */
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ── Select2: full-size override ──────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection--single {
  height: 42px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background-color: var(--bg-input) !important;
  font-size: .875rem !important;
  display: flex;
  align-items: center;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: .85rem !important;
  color: var(--text-primary);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent !important;
}

/* ── Select2: small (filter bars) ────────────────────────────── */
.filter-card .select2-container--bootstrap-5 .select2-selection--single {
  height: 34px !important;
  border-radius: 7px !important;
  font-size: .8rem !important;
  background-color: var(--bg-input) !important;
}

.filter-card .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  font-size: .8rem;
  color: var(--text-primary);
}

.filter-card .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
}

/* Select2 dropdown */
.select2-dropdown {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
  z-index: 9999;
}

.select2-container--bootstrap-5 .select2-results__option {
  color: var(--text-primary) !important;
  font-size: .875rem;
  padding: .5rem .85rem;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--brand-mid) !important;
  color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
  background: rgba(61, 122, 155, .25) !important;
  color: var(--brand-light) !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  padding: .4rem .75rem;
  font-size: .85rem;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--brand-mid) !important;
  outline: none;
}

/* Select2 focus ring */
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 3px rgba(61, 122, 155, .2) !important;
}

/* Select2 multiple */
.select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: 42px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background-color: var(--bg-input) !important;
}

/* ── File input ───────────────────────────────────────────────── */
.form-control[type=file] {
  height: auto;
  padding: .5rem .85rem;
  color: var(--text-secondary);
}

.form-control[type=file]::file-selector-button {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  padding: .25rem .65rem;
  margin-right: .75rem;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s;
}

.form-control[type=file]::file-selector-button:hover {
  background: var(--bg-hover);
}

/* ── Section divider in forms ─────────────────────────────────── */
.form-section-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-light);
  padding-bottom: .5rem;
  border-bottom: 2px solid rgba(63, 255, 210, .25);
  margin-bottom: 1.25rem;
}

/* ── Alerts ───────────────────────────────────────────────────── */
.alert { border-radius: 10px; font-size: .875rem; border: none; }
.alert-success { background: rgba(22, 101, 52, .25); color: #4ade80; border: 1px solid rgba(74, 222, 128, .2); }
.alert-danger,
.alert-error   { background: rgba(155, 28, 28, .25); color: #f87171; border: 1px solid rgba(248, 113, 113, .2); }
.alert-warning { background: rgba(133, 101, 0, .25); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .2); }
.alert-info    { background: rgba(26, 122, 145, .25); color: #38bdf8; border: 1px solid rgba(56, 189, 248, .2); }

.btn-close { filter: invert(1) grayscale(1) opacity(.6); }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination .page-link {
  border-radius: 6px !important;
  font-size: .82rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border-color);
  margin: 0 2px;
  transition: all .2s;
}
.pagination .page-link:hover {
  background: var(--bg-hover);
  border-color: var(--brand-mid);
  color: var(--text-heading);
}
.pagination .page-item.active .page-link {
  background: var(--brand-mid) !important;
  border-color: var(--brand-mid) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* ── HTMX loading indicator ───────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity .25s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Alpine cloak ─────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Rotate helper ────────────────────────────────────────────── */
.rotate-180 { transform: rotate(180deg); }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: .75rem;
  display: block;
  opacity: .35;
}
.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .25rem;
}
.empty-state-text { font-size: .85rem; }

/* ── Detail field ─────────────────────────────────────────────── */
.detail-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.detail-value {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Login / auth page ────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  max-width: 420px;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
  overflow: hidden;
}

.auth-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand-light), var(--brand-accent));
}

.auth-body { padding: 2.5rem; }

.auth-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* ── Approval timeline ────────────────────────────────────────── */
.timeline-item {
  display: flex;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-color);
}
.timeline-item:last-child { border-bottom: none; }

.timeline-step {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(61, 122, 155, .15);
  color: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Tab nav ──────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--border-color);
}
.nav-tabs .nav-link {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  padding: .6rem 1rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--brand-light); border-bottom-color: var(--brand-mid); }
.nav-tabs .nav-link.active {
  color: var(--brand-light);
  border-bottom: 2px solid var(--brand-mid);
  background: transparent;
}

/* ── Required label star ─────────────────────────────────────── */
.form-label.required::after {
  content: ' *';
  color: #f87171;
  font-weight: 700;
}

/* ── Responsive table wrapper ────────────────────────────────── */
.table-responsive-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Dividers & hr ────────────────────────────────────────────── */
hr {
  border-color: var(--border-color);
  opacity: 1;
}

/* ── Text color overrides ─────────────────────────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand-light) !important; }
.text-danger { color: #f87171 !important; }
.text-success { color: #4ade80 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info { color: #38bdf8 !important; }

/* ── Dropdown menus ───────────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
}

.dropdown-item {
  color: var(--text-secondary);
  font-size: .875rem;
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}

.dropdown-divider {
  border-color: var(--border-color);
}

/* ── Responsive: Mobile (< 576px) ────────────────────────────── */
@media (max-width: 575.98px) {
  .page-title { font-size: .95rem; }
  .page-header { padding: .75rem 0; }

  .stat-value { font-size: 1.35rem; }
  .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .stat-label { font-size: .65rem; }

  .filter-card-body { padding: .75rem; }
  .filter-card-body .form-label { font-size: .65rem; }

  .card { border-radius: 10px; }
  .card-header { padding: .75rem 1rem; }
  .card-body { padding: .75rem 1rem; }

  .table thead th { padding: .6rem .75rem; font-size: .62rem; }
  .table tbody td { padding: .65rem .75rem; font-size: .8rem; }

  .btn-group { flex-wrap: nowrap; }

  .nav-tabs .nav-link { font-size: .75rem; padding: .5rem .6rem; }

  .detail-label { font-size: .62rem; }
  .detail-value { font-size: .82rem; }

  /* Stack actions vertically on mobile */
  .page-header .col-auto .d-flex { flex-wrap: wrap; }
}

/* ── Responsive: Tablet (576px – 991px) ──────────────────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .page-title { font-size: 1.05rem; }
  .stat-value { font-size: 1.5rem; }

  .filter-card-body { padding: .85rem 1rem; }
}

/* ── Responsive: Sidebar adjustments on lg ───────────────────── */
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-collapse {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .sidebar-user {
    border-top: 1px solid var(--border-color);
    padding: .75rem 1rem;
  }
}

/* ── Dropdown menu in sidebar (vertical) ─────────────────────── */
.navbar-vertical .dropdown-menu {
  background: rgba(15, 23, 41, .85);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .25rem 0;
  margin-left: 1rem;
}

.navbar-vertical .dropdown-item {
  color: rgba(226, 232, 240, .7);
  font-size: .83rem;
  padding: .45rem 1rem;
  border-radius: 4px;
  margin: 2px 4px;
}

.navbar-vertical .dropdown-item:hover {
  background: rgba(63, 255, 210, .07);
  color: rgba(226, 232, 240, .95);
}

.navbar-vertical .dropdown-item.active {
  background: rgba(63, 255, 210, .12);
  color: var(--brand-accent);
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  .navbar-vertical,
  .page-header,
  .filter-card,
  .sidebar-user,
  .btn { display: none !important; }

  .page-wrapper { margin: 0; padding: 0; }
  .card { border: 1px solid #ddd; box-shadow: none; }
}

/* ── CKEditor 5 Dark Theme Overrides ──────────────────────────── */
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.ck.ck-editor__main > .ck-editor__editable:focus {
  border-color: var(--brand-mid) !important;
  box-shadow: 0 0 0 2px rgba(61, 122, 155, .2) !important;
}
.ck.ck-toolbar,
.ck.ck-toolbar.ck-rounded-corners {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
}
.ck.ck-toolbar .ck-button {
  color: var(--text-secondary) !important;
}
.ck.ck-toolbar .ck-button:hover,
.ck.ck-toolbar .ck-button.ck-on {
  background: var(--bg-elevated) !important;
  color: var(--text-heading) !important;
}
.ck.ck-dropdown__panel,
.ck.ck-dropdown__panel .ck-list {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
.ck.ck-list__item .ck-button {
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
}
.ck.ck-list__item .ck-button:hover,
.ck.ck-list__item .ck-button:focus {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}
.ck.ck-button.ck-on {
    background: rgba(61, 122, 155, 0.2) !important;
    color: var(--brand-mid) !important;
}
.django_ckeditor_5 {
    width: 100%;
}
.ck-reset_all .ck-tooltip .ck-tooltip__text {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* ── File Input Styling ───────────────────────────────────────── */
input[type="file"] {
  display: block;
  width: 100%;
  padding: .4375rem .75rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4285714;
  color: var(--text-primary);
  background-color: var(--bg-input);
  background-clip: padding-box;
  border: 1px solid var(--border-color);
  appearance: none;
  border-radius: 6px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input[type="file"]::file-selector-button {
  padding: .4375rem .75rem;
  margin: -.4375rem -.75rem;
  margin-inline-end: .75rem;
  color: var(--text-heading);
  background-color: var(--bg-elevated);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bg-surface);
}

input[type="file"]:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 2px rgba(61, 122, 155, .2);
  outline: none;
}