/* ==========================================================================
   Alpha LMS - design system v2
   The ONLY custom stylesheet. Loaded after Bootstrap 5.3.3, so it overrides
   Bootstrap through variables first and component classes second.

   Sections
   1. Tokens (CSS variables)
   2. Base + typography
   3. Bootstrap overrides (buttons, forms, cards, tables, badges, alerts,
      dropdowns, modals, progress, list groups, pagination, nav)
   4. Layout shell (sidebar, topbar, content, page header)
   5. Components (stat card, data card, table, avatar, pill, progress,
      ring, empty state, form section, toolbar, toast)
   6. Auth split layout
   7. Utilities + motion
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  /* Primary indigo scale */
  --indigo-50: #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;

  /* Slate neutrals */
  --slate-25: #FBFCFE;
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Semantic: soft background + strong text (+ solid) */
  --success-soft: #DCFCE7;  --success-strong: #166534;  --success-solid: #16A34A;
  --warning-soft: #FEF3C7;  --warning-strong: #92400E;  --warning-solid: #D97706;
  --danger-soft: #FEE2E2;   --danger-strong: #991B1B;   --danger-solid: #DC2626;
  --info-soft: #E0F2FE;     --info-strong: #075985;     --info-solid: #0284C7;

  /* Surfaces + text */
  --page-bg: #F5F6FA;
  --surface: #FFFFFF;
  --border: #E5E7EF;
  --border-strong: #D5D9E4;
  --text: var(--slate-800);
  --text-muted: var(--slate-500);
  --text-strong: var(--slate-900);
  --sidebar-bg: #0F172A;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --sidebar-active: rgba(99, 102, 241, .18);
  --sidebar-text: #94A3B8;
  --sidebar-text-strong: #F1F5F9;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .8125rem;   /* 13 */
  --fs-base: .9375rem; /* 15 */
  --fs-lg: 1.0625rem;  /* 17 */
  --fs-xl: 1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */

  /* Spacing (8px grid) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radii */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .08);
  --ring: 0 0 0 3px rgba(79, 70, 229, .28);

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --content-max: 1200px;

  /* z-index */
  --z-sidebar: 1040;
  --z-topbar: 1020;
  --z-dropdown: 1050;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 150ms;
  --t: 200ms;

  /* Bootstrap variable overrides */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--page-bg);
  --bs-heading-color: var(--text-strong);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-primary: var(--indigo-600);
  --bs-primary-rgb: 79, 70, 229;
  --bs-success: var(--success-solid);
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--warning-solid);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--danger-solid);
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: var(--info-solid);
  --bs-info-rgb: 2, 132, 199;
  --bs-link-color: var(--indigo-600);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--indigo-800);
  --bs-link-hover-color-rgb: 55, 48, 163;
  --bs-secondary-color: var(--text-muted);
  --bs-focus-ring-color: rgba(79, 70, 229, .28);
}

/* 2. Base + typography ---------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--page-bg);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--text-strong);
}
h1, .h1 { font-size: var(--fs-2xl); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs-base); }
a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
small, .small { font-size: var(--fs-sm); }
.text-muted { color: var(--text-muted) !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.tabular, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
hr { border-color: var(--border); opacity: 1; }
:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 2px; }
::selection { background: var(--indigo-100); color: var(--indigo-900); }

/* 3. Bootstrap overrides -------------------------------------------------- */

/* Buttons */
.btn {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: var(--fs-base);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius-sm);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  letter-spacing: -.005em;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:focus-visible { box-shadow: var(--ring); outline: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-font-size: var(--fs-sm); min-height: 36px; }
.btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: var(--fs-lg); min-height: 52px; }
.btn i { font-size: 1.05em; line-height: 1; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--indigo-600);
  --bs-btn-border-color: var(--indigo-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--indigo-700);
  --bs-btn-hover-border-color: var(--indigo-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--indigo-800);
  --bs-btn-active-border-color: var(--indigo-800);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
  --bs-btn-disabled-bg: var(--indigo-300);
  --bs-btn-disabled-border-color: var(--indigo-300);
  box-shadow: 0 1px 2px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--slate-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--slate-900);
  --bs-btn-hover-bg: var(--slate-50);
  --bs-btn-hover-border-color: var(--slate-300);
  --bs-btn-active-color: var(--slate-900);
  --bs-btn-active-bg: var(--slate-100);
  --bs-btn-active-border-color: var(--slate-300);
  --bs-btn-disabled-color: var(--slate-400);
  --bs-btn-disabled-bg: var(--slate-50);
  --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-primary {
  --bs-btn-color: var(--indigo-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--indigo-200);
  --bs-btn-hover-color: var(--indigo-800);
  --bs-btn-hover-bg: var(--indigo-50);
  --bs-btn-hover-border-color: var(--indigo-300);
  --bs-btn-active-color: var(--indigo-800);
  --bs-btn-active-bg: var(--indigo-100);
  --bs-btn-active-border-color: var(--indigo-300);
}
.btn-ghost,
.btn-link {
  --bs-btn-color: var(--slate-600);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--slate-900);
  --bs-btn-hover-bg: var(--slate-100);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--slate-900);
  --bs-btn-active-bg: var(--slate-200);
  --bs-btn-active-border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}
.btn-ghost { color: var(--bs-btn-color); background: var(--bs-btn-bg); border: 1px solid transparent; }
.btn-ghost:hover { color: var(--bs-btn-hover-color); background: var(--bs-btn-hover-bg); text-decoration: none; }
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--danger-solid);
  --bs-btn-border-color: var(--danger-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B91C1C;
  --bs-btn-hover-border-color: #B91C1C;
  --bs-btn-active-bg: #991B1B;
  --bs-btn-active-border-color: #991B1B;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-strong);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #FECACA;
  --bs-btn-hover-color: var(--danger-strong);
  --bs-btn-hover-bg: var(--danger-soft);
  --bs-btn-hover-border-color: #FCA5A5;
  --bs-btn-active-bg: #FECACA;
  --bs-btn-active-color: var(--danger-strong);
  --bs-btn-active-border-color: #FCA5A5;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--success-solid);
  --bs-btn-border-color: var(--success-solid);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #15803D;
  --bs-btn-hover-border-color: #15803D;
  --bs-btn-active-bg: #166534;
  --bs-btn-active-border-color: #166534;
}
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 36px; }

/* Forms */
.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: .375rem;
}
.form-control,
.form-select {
  min-height: 44px;
  padding: .5rem .875rem;
  font-size: var(--fs-base);
  color: var(--text-strong);
  background-color: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.form-control::placeholder { color: var(--slate-400); }
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--slate-400); }
.form-control:focus,
.form-select:focus {
  border-color: var(--indigo-500);
  box-shadow: var(--ring);
  outline: none;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] { background-color: var(--slate-50); color: var(--slate-500); }
.form-control-lg, .form-select-lg { min-height: 52px; font-size: var(--fs-lg); }
.form-control-sm, .form-select-sm { min-height: 36px; font-size: var(--fs-sm); }
textarea.form-control { min-height: 112px; line-height: 1.5; }
.form-select { padding-right: 2.5rem; }
.form-text, .form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .375rem; }
.form-control[type="file"] { padding: .4rem .5rem; line-height: 1.9; }
.form-control[type="file"]::file-selector-button {
  margin: 0 .75rem 0 0;
  padding: .3rem .875rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--slate-50);
  color: var(--slate-700);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.form-control[type="file"]:hover::file-selector-button { background: var(--slate-100); }
.form-check-input { width: 1.125rem; height: 1.125rem; margin-top: .2rem; border-color: var(--slate-400); cursor: pointer; }
.form-check-input:checked { background-color: var(--indigo-600); border-color: var(--indigo-600); }
.form-check-input:focus { border-color: var(--indigo-500); box-shadow: var(--ring); }
.form-check-label { cursor: pointer; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger-solid); background-image: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--success-solid); background-image: none; }
.form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }
.invalid-feedback, .field-error { font-size: var(--fs-xs); font-weight: 500; color: var(--danger-strong); margin-top: .375rem; }
.field-error { display: block; }
.valid-feedback { font-size: var(--fs-xs); color: var(--success-strong); }
.input-group-text {
  background: var(--slate-50);
  border-color: var(--border-strong);
  color: var(--slate-500);
  border-radius: var(--radius-sm);
}
.required-mark { color: var(--danger-solid); margin-left: 2px; }

/* Cards */
.card {
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.card-header { font-weight: 700; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--slate-25); }
.card-hover { transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
a.card { color: inherit; text-decoration: none; }

/* Tables (Bootstrap .table) */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: var(--slate-25);
  --bs-table-striped-bg: var(--slate-25);
  margin-bottom: 0;
  font-size: var(--fs-base);
}
.table > :not(caption) > * > * { padding: .875rem 1rem; }
.table > thead > tr > th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--slate-50);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Badges (Bootstrap) */
.badge {
  font-weight: 600;
  font-size: var(--fs-xs);
  padding: .35em .65em;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
}
.badge.bg-primary { background-color: var(--indigo-50) !important; color: var(--indigo-700) !important; }
.badge.bg-success { background-color: var(--success-soft) !important; color: var(--success-strong) !important; }
.badge.bg-warning { background-color: var(--warning-soft) !important; color: var(--warning-strong) !important; }
.badge.bg-danger { background-color: var(--danger-soft) !important; color: var(--danger-strong) !important; }
.badge.bg-info { background-color: var(--info-soft) !important; color: var(--info-strong) !important; }
.badge.bg-secondary { background-color: var(--slate-100) !important; color: var(--slate-600) !important; }

/* Alerts */
.alert {
  --bs-alert-border-radius: var(--radius);
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .875rem;
  border-width: 1px;
  font-size: var(--fs-base);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: var(--success-strong); --bs-alert-border-color: #BBF7D0; }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: var(--warning-strong); --bs-alert-border-color: #FDE68A; }
.alert-danger  { --bs-alert-bg: var(--danger-soft);  --bs-alert-color: var(--danger-strong);  --bs-alert-border-color: #FECACA; }
.alert-info    { --bs-alert-bg: var(--info-soft);    --bs-alert-color: var(--info-strong);    --bs-alert-border-color: #BAE6FD; }
.alert-premium { display: flex; align-items: flex-start; gap: .75rem; padding-right: 3rem; }
.alert-premium .alert-icon { font-size: 1.125rem; line-height: 1.5; flex-shrink: 0; }
.alert-premium .alert-body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.alert-premium .btn-close { padding: 1rem; }

/* Dropdowns */
.dropdown-menu {
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius);
  --bs-dropdown-padding-x: .5rem;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-link-active-bg: var(--indigo-50);
  --bs-dropdown-link-active-color: var(--indigo-700);
  --bs-dropdown-font-size: var(--fs-base);
  --bs-dropdown-zindex: var(--z-dropdown);
  box-shadow: var(--shadow-md);
  min-width: 240px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 40px;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--slate-700);
  transition: background-color var(--t-fast) var(--ease);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--slate-100); color: var(--slate-900); }
.dropdown-item.text-danger:hover { background: var(--danger-soft); }
.dropdown-divider { border-color: var(--border); margin: .5rem -.5rem; }
.dropdown-header { font-size: var(--fs-xs); }

/* Modals */
.modal { --bs-modal-border-radius: var(--radius-lg); --bs-modal-border-color: var(--border); --bs-modal-box-shadow: var(--shadow-md); }
.modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 0; padding: 1.5rem 1.5rem .5rem; }
.modal-title { font-size: var(--fs-lg); font-weight: 700; }
.modal-body { padding: .5rem 1.5rem 1rem; color: var(--slate-600); }
.modal-footer { border-top: 0; padding: .5rem 1.5rem 1.5rem; gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #0F172A; --bs-backdrop-opacity: .5; }
.modal-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}

/* Progress (Bootstrap) */
.progress {
  --bs-progress-height: .5rem;
  --bs-progress-bg: var(--slate-100);
  --bs-progress-bar-bg: var(--indigo-600);
  --bs-progress-border-radius: var(--radius-pill);
}

/* List groups */
.list-group {
  --bs-list-group-border-color: var(--border);
  --bs-list-group-border-radius: var(--radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: .875rem;
  --bs-list-group-action-hover-bg: var(--slate-50);
  --bs-list-group-active-bg: var(--indigo-50);
  --bs-list-group-active-color: var(--indigo-800);
  --bs-list-group-active-border-color: var(--indigo-100);
}
.list-group-item { transition: background-color var(--t-fast) var(--ease); }
.list-group-flush > .list-group-item { border-color: var(--border); }

/* Pagination */
.pagination {
  --bs-pagination-color: var(--slate-600);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--slate-900);
  --bs-pagination-hover-bg: var(--slate-50);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-active-bg: var(--indigo-600);
  --bs-pagination-active-border-color: var(--indigo-600);
  --bs-pagination-focus-box-shadow: var(--ring);
  --bs-pagination-border-radius: var(--radius-sm);
  --bs-pagination-padding-x: .875rem;
  --bs-pagination-padding-y: .5rem;
  gap: .25rem;
}
.page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border-radius: var(--radius-sm) !important; }

/* Nav (tabs / pills) */
.nav-pills { --bs-nav-pills-link-active-bg: var(--indigo-600); --bs-nav-pills-border-radius: var(--radius-sm); gap: .25rem; }
.nav-link { font-weight: 600; color: var(--slate-600); min-height: 40px; display: flex; align-items: center; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav-link:hover { color: var(--slate-900); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-color: var(--indigo-700); --bs-nav-tabs-link-active-border-color: transparent transparent var(--indigo-600); --bs-nav-tabs-link-hover-border-color: transparent transparent var(--border-strong); --bs-nav-tabs-border-radius: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.nav-tabs .nav-link { white-space: nowrap; border-width: 0 0 2px; margin-bottom: -1px; background: transparent; }
.nav-tabs .nav-link.active { border-bottom-color: var(--indigo-600); background: transparent; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--slate-400); font-size: var(--fs-sm); margin-bottom: .5rem; }
.breadcrumb-item a { color: var(--text-muted); font-weight: 500; }
.breadcrumb-item.active { color: var(--slate-700); font-weight: 600; }

/* 4. Layout shell --------------------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--indigo-600); color: #fff; padding: .625rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Sidebar (Bootstrap responsive offcanvas: drawer < 992px, static >= 992px) */
.app-sidebar {
  --bs-offcanvas-width: 288px;
  --bs-offcanvas-bg: var(--sidebar-bg);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-zindex: var(--z-sidebar);
  --bs-offcanvas-transition: transform .25s var(--ease);
}
.app-sidebar__panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}
.app-sidebar__brand {
  display: flex; align-items: center; gap: .75rem;
  height: var(--topbar-h); padding: 0 1.25rem; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-800));
  color: #fff; font-size: 1.125rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px rgba(79, 70, 229, .4);
}
.brand-name { color: #fff; font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em; line-height: 1.1; }
.brand-sub { color: var(--sidebar-text); font-size: var(--fs-xs); font-weight: 500; }
.app-sidebar__close {
  margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--sidebar-text); font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.app-sidebar__close:hover { background: var(--sidebar-hover); color: #fff; }
.app-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 1rem .75rem; overscroll-behavior: contain; }
.app-sidebar__nav::-webkit-scrollbar { width: 6px; }
.app-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
.nav-section-label {
  padding: 1.25rem .75rem .5rem;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #64748B;
}
.nav-section-label:first-child { padding-top: .25rem; }
.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: .75rem;
  min-height: 44px; padding: .5rem .75rem; margin-bottom: 2px;
  border-radius: 10px;
  color: var(--sidebar-text); font-size: var(--fs-base); font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar-link i { font-size: 1.125rem; width: 20px; text-align: center; flex-shrink: 0; line-height: 1; }
.sidebar-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.sidebar-link:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: -2px; }
.sidebar-link.active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
.sidebar-link.active i { color: var(--indigo-300); }
.sidebar-link.active::before {
  content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--indigo-400);
}
.app-sidebar__footer { flex-shrink: 0; padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.sidebar-user {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem;
  border-radius: 12px; background: rgba(255, 255, 255, .04);
}
.sidebar-user__name { color: #fff; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.sidebar-user__role { color: var(--sidebar-text); font-size: var(--fs-xs); }
.sidebar-user__text { min-width: 0; }
.sidebar-user__text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 992px) {
  .app-sidebar.offcanvas-lg {
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
    transform: none; z-index: auto;
  }
  .app-sidebar .app-sidebar__close { display: none; }
}

/* Topbar */
.app-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.app-topbar__title { font-weight: 700; font-size: var(--fs-lg); color: var(--text-strong); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar__spacer { flex: 1 1 auto; }
.topbar-toggle { width: 44px; height: 44px; margin-left: -.5rem; }
.user-menu-btn {
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 44px; padding: .25rem .5rem .25rem .25rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--text); font-weight: 600; font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.user-menu-btn:hover, .user-menu-btn.show { background: var(--slate-100); border-color: var(--border); }
.user-menu-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.user-menu-btn::after { display: none; }
.user-menu-btn .bi-chevron-down { font-size: .75rem; color: var(--slate-400); }
.user-menu-header { padding: .5rem .75rem .75rem; }

/* Content */
.app-content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  flex: 1 0 auto;
}
@media (min-width: 768px) { .app-content { padding: 2rem 2rem 4rem; } }
@media (min-width: 1200px) { .app-content { padding: 2rem 2.5rem 4rem; } }

.page-header {
  display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header__text { min-width: 0; }
.page-header__title { font-size: var(--fs-2xl); font-weight: 700; margin: 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.page-header__subtitle { margin: .25rem 0 0; color: var(--text-muted); font-size: var(--fs-base); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-header__actions > .btn, .page-header__actions > form { flex: 1 1 auto; }
.page-header__actions > form .btn { width: 100%; }
@media (min-width: 768px) {
  .page-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
  .page-header__actions { flex-shrink: 0; justify-content: flex-end; }
  .page-header__actions > .btn, .page-header__actions > form { flex: 0 0 auto; }
  .page-header__actions > form .btn { width: auto; }
}

/* 5. Components ----------------------------------------------------------- */

/* Apex Enterprise LMS Stat card */
.stat-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; height: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
a.stat-card { color: inherit; text-decoration: none; }
a.stat-card:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  border-color: #cbd5e1;
  text-decoration: none;
}
.stat-card__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stat-card__label { font-size: 0.8125rem; font-weight: 600; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card__value {
  font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.025em;
  color: #0f172a; font-family: 'Plus Jakarta Sans', var(--font-sans); font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}
.stat-card__hint { font-size: 0.75rem; color: #64748b; margin: .375rem 0 0; display: flex; align-items: center; gap: 0.375rem; }
.icon-chip {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: rgba(79, 70, 229, 0.08); color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.15);
}
.icon-chip.tone-success { background: rgba(5, 150, 105, 0.08); color: #059669; border-color: rgba(5, 150, 105, 0.15); }
.icon-chip.tone-warning { background: rgba(217, 119, 6, 0.08); color: #d97706; border-color: rgba(217, 119, 6, 0.15); }
.icon-chip.tone-danger  { background: rgba(225, 29, 72, 0.08);  color: #e11d48; border-color: rgba(225, 29, 72, 0.15); }
.icon-chip.tone-info    { background: rgba(2, 132, 199, 0.08);  color: #0284c7; border-color: rgba(2, 132, 199, 0.15); }
.icon-chip.tone-purple  { background: rgba(124, 58, 237, 0.08); color: #7c3aed; border-color: rgba(124, 58, 237, 0.15); }
.icon-chip.tone-neutral { background: var(--slate-100); color: #64748b; border-color: var(--border); }
.delta { font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 9999px; }
.delta-up { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.delta-down { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.delta-warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* Welcome Banner Component */
.admin-welcome-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  border-radius: 1.25rem;
  color: #ffffff;
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.15);
  margin-bottom: 1.5rem;
}
.admin-welcome-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0) 70%);
  pointer-events: none;
}
.admin-welcome-hero-content {
  position: relative;
  z-index: 1;
}

/* Data card + premium table */
.data-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.03); overflow: hidden;
}
.data-card__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--border); background: #ffffff;
}
.data-card__title { font-size: 1.0625rem; font-weight: 700; margin: 0; color: #0f172a; font-family: 'Plus Jakarta Sans', var(--font-sans); }
.data-card__body { padding: 1.5rem; }
.data-card__footer { padding: .875rem 1.5rem; border-top: 1px solid var(--border); background: var(--slate-25); font-size: var(--fs-sm); color: var(--text-muted); }
.data-card > .table-responsive { -webkit-overflow-scrolling: touch; }

.table-premium { --bs-table-hover-bg: var(--slate-25); width: 100%; margin: 0; }
.table-premium thead th {
  position: sticky; top: 0; z-index: 1;
  padding: .75rem 1.5rem; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: var(--slate-50); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table-premium tbody td { padding: 1rem 1.5rem; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table-premium tbody tr:last-child td { border-bottom: 0; }
.table-premium tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table-premium tbody tr:hover { background: var(--slate-25); }
.table-premium .cell-primary { font-weight: 600; color: var(--text-strong); }
.table-premium .cell-secondary { font-size: var(--fs-sm); color: var(--text-muted); }
.table-premium .col-actions { text-align: right; white-space: nowrap; }
.table-premium .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-user { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cell-user__text { min-width: 0; }

/* Stack-to-cards on phones. Usage: <table class="table-premium table-stack">
   and add data-label="Column" on every <td>. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tbody tr { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem 0; border: 0; text-align: right;
  }
  .table-stack tbody td::before {
    content: attr(data-label); flex-shrink: 0;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted); text-align: left;
  }
  .table-stack tbody td[data-label=""]::before, .table-stack tbody td:not([data-label])::before { content: none; }
  .table-stack tbody td.col-actions { justify-content: flex-end; }
  .table-stack .cell-user { text-align: left; }
}

/* Avatar */
.avatar {
  --avatar-size: 36px;
  width: var(--avatar-size); height: var(--avatar-size); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; font-size: calc(var(--avatar-size) * .38);
  letter-spacing: .02em; text-transform: uppercase; line-height: 1; user-select: none;
  background: var(--indigo-100); color: var(--indigo-700);
}
.avatar-sm { --avatar-size: 28px; }
.avatar-md { --avatar-size: 36px; }
.avatar-lg { --avatar-size: 48px; }
.avatar-xl { --avatar-size: 64px; }
/* Deterministic color: explicit class, or data-k (lowercase first letter) */
.avatar-c0, .avatar[data-k="a"], .avatar[data-k="g"], .avatar[data-k="m"], .avatar[data-k="s"], .avatar[data-k="y"]
  { background: var(--indigo-100); color: var(--indigo-700); }
.avatar-c1, .avatar[data-k="b"], .avatar[data-k="h"], .avatar[data-k="n"], .avatar[data-k="t"], .avatar[data-k="z"]
  { background: #D1FAE5; color: #065F46; }
.avatar-c2, .avatar[data-k="c"], .avatar[data-k="i"], .avatar[data-k="o"], .avatar[data-k="u"]
  { background: #FEF3C7; color: #92400E; }
.avatar-c3, .avatar[data-k="d"], .avatar[data-k="j"], .avatar[data-k="p"], .avatar[data-k="v"]
  { background: #FCE7F3; color: #9D174D; }
.avatar-c4, .avatar[data-k="e"], .avatar[data-k="k"], .avatar[data-k="q"], .avatar[data-k="w"]
  { background: #E0F2FE; color: #075985; }
.avatar-c5, .avatar[data-k="f"], .avatar[data-k="l"], .avatar[data-k="r"], .avatar[data-k="x"]
  { background: #EDE9FE; color: #5B21B6; }
.app-sidebar .avatar { background: var(--indigo-500); color: #fff; }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--slate-100); color: var(--slate-600);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill-nodot::before { display: none; }
.pill-success { background: var(--success-soft); color: var(--success-strong); }
.pill-warning { background: var(--warning-soft); color: var(--warning-strong); }
.pill-danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.pill-info    { background: var(--info-soft);    color: var(--info-strong); }
.pill-primary { background: var(--indigo-50);    color: var(--indigo-700); }
.pill-neutral { background: var(--slate-100);    color: var(--slate-600); }

/* Progress premium */
.progress-premium { display: flex; flex-direction: column; gap: .375rem; }
.progress-premium__meta { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.progress-premium__value { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.progress-premium__track { height: 8px; background: var(--slate-100); border-radius: var(--radius-pill); overflow: hidden; }
.progress-premium__bar {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--indigo-500), var(--indigo-600));
  transition: width .6s var(--ease);
}
.progress-premium.is-sm .progress-premium__track { height: 4px; }
.progress-premium.is-lg .progress-premium__track { height: 12px; }
.progress-premium.is-complete .progress-premium__bar { background: linear-gradient(90deg, #22C55E, var(--success-solid)); }

/* Progress ring: <div class="progress-ring" style="--value: 72"><span>72%</span></div> */
.progress-ring {
  --value: 0; --ring-size: 64px; --ring-thickness: 7px;
  width: var(--ring-size); height: var(--ring-size); border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--indigo-600) calc(var(--value) * 1%), var(--slate-100) 0);
  font-size: calc(var(--ring-size) * .22); font-weight: 700; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.progress-ring::before {
  content: ""; position: absolute; inset: var(--ring-thickness);
  background: var(--surface); border-radius: 50%;
}
.progress-ring > * { position: relative; }
.progress-ring.is-sm { --ring-size: 48px; --ring-thickness: 5px; }
.progress-ring.is-lg { --ring-size: 96px; --ring-thickness: 9px; }

/* Empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 1.5rem; gap: .25rem;
}
.empty-state__icon {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: var(--indigo-50); color: var(--indigo-500);
}
.empty-state__title { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
.empty-state__text { max-width: 360px; margin: 0 0 .75rem; color: var(--text-muted); font-size: var(--fs-base); }

/* Form section: a titled group inside a card/form */
.form-section { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.form-section:first-child { padding-top: 0; border-top: 0; }
.form-section:last-child { padding-bottom: 0; }
.form-section__title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 .25rem; }
.form-section__desc { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 1rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-actions > .btn { flex: 1 1 auto; }
@media (min-width: 576px) { .form-actions { justify-content: flex-end; } .form-actions > .btn { flex: 0 0 auto; } }

/* Form field partial: styles raw Django widgets (no widget attrs needed) */
.form-field { margin-bottom: 1.25rem; }
.form-field > label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-700); margin-bottom: .375rem; }
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.form-field select,
.form-field textarea {
  display: block; width: 100%; min-height: 44px; padding: .5rem .875rem;
  font: inherit; font-size: var(--fs-base); color: var(--text-strong);
  background-color: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-field select {
  appearance: none; padding-right: 2.5rem;
  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='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .875rem center; background-size: 14px 10px;
}
.form-field select[multiple] { background-image: none; padding-right: .875rem; }
.form-field textarea { min-height: 112px; line-height: 1.5; resize: vertical; }
.form-field input[type="file"] {
  display: block; width: 100%; padding: .4rem .5rem; font-size: var(--fs-sm); color: var(--slate-600);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
}
.form-field input[type="file"]::file-selector-button {
  margin: 0 .75rem 0 0; padding: .4rem .875rem; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--slate-50); color: var(--slate-700); font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
}
.form-field input:hover:not(:focus):not(:disabled), .form-field select:hover:not(:focus):not(:disabled), .form-field textarea:hover:not(:focus):not(:disabled) { border-color: var(--slate-400); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--indigo-500); box-shadow: var(--ring); }
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled { background: var(--slate-50); color: var(--slate-500); }
.form-field.has-error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-field.has-error select, .form-field.has-error textarea { border-color: var(--danger-solid); }
.form-field.has-error input:focus, .form-field.has-error select:focus, .form-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .2); }
.form-field-check { display: flex; align-items: flex-start; gap: .625rem; min-height: 44px; padding-top: .625rem; }
.form-field-check input { width: 1.125rem; height: 1.125rem; margin-top: .15rem; accent-color: var(--indigo-600); flex-shrink: 0; }
.form-field-check label { font-size: var(--fs-base); font-weight: 500; color: var(--slate-700); margin: 0; }
.form-field ul { list-style: none; padding: 0; margin: 0; }

/* Toolbar (search + filters) */
.toolbar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.toolbar__search { position: relative; flex: 1 1 auto; min-width: 0; }
.toolbar__search > i { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--slate-400); pointer-events: none; }
.toolbar__search .form-control { padding-left: 2.5rem; }
.toolbar__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.toolbar__filters > * { flex: 1 1 auto; }
@media (min-width: 768px) {
  .toolbar { flex-direction: row; align-items: center; }
  .toolbar__search { max-width: 360px; }
  .toolbar__filters { flex-wrap: nowrap; align-items: center; }
  .toolbar__filters > * { flex: 0 0 auto; }
  .toolbar__filters > .form-select,
  .toolbar__filters > .form-control { width: auto; min-width: 9.5rem; }
}

/* Toast-style flash messages */
.flash-stack { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }

/* Detail rows (label / value pairs) */
.meta-list { display: grid; gap: .75rem; margin: 0; }
.meta-list dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.meta-list dd { margin: 0; color: var(--text-strong); font-weight: 500; overflow-wrap: anywhere; }

/* 6. Auth split layout (Modern 3D Animated Hero - 100vh Viewport Fit) ------ */
.auth-page-wrapper {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 50%, #F1F5F9 100%);
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.auth-header-bar {
  width: 100%;
  padding: 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  flex-shrink: 0;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.auth-brand-logo:hover {
  text-decoration: none;
  color: inherit;
}

.auth-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F46E5 0%, #312E81 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.auth-brand-text {
  display: flex;
  flex-direction: column;
}

.auth-brand-title {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.1;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.auth-brand-subtitle {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #4F46E5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.auth-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
}

.auth-security-badge i {
  color: #16A34A;
  font-size: 0.8125rem;
}

.auth-container-main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  overflow: hidden;
}

.auth-shell {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* 3D Left Hero Presentation (Compact 100vh fit) */
.auth-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 1rem 0.25rem 0.5rem;
}

/* Role Views with Smooth Transitions */
.hero-role-scene {
  display: none;
  animation: heroFadeSlide .35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-role-scene.is-active {
  display: block;
}

@keyframes heroFadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4338CA;
  margin-bottom: 0.5rem;
}

.hero-tag-pill i {
  font-size: 0.8125rem;
}

.hero-main-title {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #0F172A;
  margin-bottom: 0.35rem;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-emerald {
  background: linear-gradient(135deg, #059669 0%, #0D9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-amber {
  background: linear-gradient(135deg, #D97706 0%, #EA580C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-main-desc {
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748B;
  max-width: 480px;
  margin-bottom: 0.75rem;
}

/* 3D Character Interactive Visual Canvas */
.hero-visual-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.35rem 0 0.6rem;
  max-width: 400px;
}

/* Ambient Radial Glow Behind 3D Art */
.hero-ambient-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, rgba(129, 140, 248, 0.12) 50%, transparent 70%);
  filter: blur(36px);
  z-index: 1;
  pointer-events: none;
}

.hero-ambient-glow.glow-teacher {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 70%);
}

.hero-ambient-glow.glow-student {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(56, 189, 248, 0.2) 50%, transparent 70%);
}

/* 3D Image Artwork */
.hero-character-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 310px;
  max-height: 280px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: floatArt 5.5s ease-in-out infinite;
}

@keyframes floatArt {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.hero-character-card img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hero-character-card:hover img {
  transform: scale(1.02);
}

/* Floating Glassmorphic Badges */
.floating-glass-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 10px 22px -3px rgba(15, 23, 42, 0.12), 0 2px 5px rgba(15, 23, 42, 0.04);
  font-size: 0.75rem;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
}

.chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.chip-icon.icon-indigo {
  background: #EEF2FF;
  color: #4F46E5;
}

.chip-icon.icon-emerald {
  background: #DCFCE7;
  color: #16A34A;
}

.chip-icon.icon-amber {
  background: #FEF3C7;
  color: #D97706;
}

.chip-icon.icon-cyan {
  background: #E0F2FE;
  color: #0284C7;
}

.chip-pos-top-right {
  top: -8px;
  right: -10px;
  animation: floatBadgeTop 5s ease-in-out infinite;
}

.chip-pos-bottom-left {
  bottom: 12px;
  left: -14px;
  animation: floatBadgeBottom 6s ease-in-out 0.5s infinite;
}

.chip-pos-bottom-right {
  bottom: -8px;
  right: 6px;
  animation: floatBadgeTop 5.5s ease-in-out 1s infinite;
}

@keyframes floatBadgeTop {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes floatBadgeBottom {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(8px) rotate(-1deg);
  }
}

/* Feature Ribbon Badges below visual */
.hero-highlights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.hero-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.15s ease;
}

.hero-highlight-pill:hover {
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.hero-highlight-pill i {
  color: #4F46E5;
  font-size: 0.8125rem;
}

/* Right Login Card & Form Container */
.auth-form-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  padding: 1.75rem 1.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Role Switcher Tab Bar */
.auth-role-tabs {
  display: flex;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 1.15rem;
}

.auth-role-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  white-space: nowrap;
}

.auth-role-tab-btn:hover {
  color: #0F172A;
}

.auth-role-tab-btn.is-active {
  background: #FFFFFF;
  color: #4F46E5;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.auth-form-header {
  margin-bottom: 1.15rem;
}

.auth-form-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin-bottom: 0.2rem;
}

.auth-form-subtitle {
  font-size: 0.8125rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

/* Form input elements */
.input-icon {
  position: relative;
}

.input-icon > i.input-icon__lead {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
  z-index: 2;
  font-size: 1.05rem;
}

.input-icon .form-control {
  padding-left: 2.65rem;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  font-size: 0.875rem;
  background-color: #FFFFFF;
  color: #0F172A;
  transition: all 0.15s ease;
}

.input-icon .form-control:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  background-color: #FFFFFF;
}

.input-icon .input-icon__toggle {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 36px;
  height: 34px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #94A3B8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.input-icon .input-icon__toggle:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.input-icon .input-icon__toggle:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.input-icon .form-control.has-toggle {
  padding-right: 2.85rem;
}

.auth-btn-submit {
  height: 44px;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-btn-submit:hover {
  background: linear-gradient(135deg, #4338CA 0%, #3730A3 100%);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.auth-btn-submit i {
  transition: transform 0.2s ease;
}

.auth-btn-submit:hover i {
  transform: translateX(4px);
}

.auth-footer-bar {
  width: 100%;
  padding: 0.6rem 2rem;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  font-size: 0.75rem;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .auth-page-wrapper {
    height: auto;
    min-height: 100vh;
    max-height: none;
    overflow-y: auto;
  }
  .auth-container-main {
    flex: 1 0 auto;
    overflow: visible;
    padding: 1.5rem 1rem;
  }
  .auth-hero-stage {
    padding: 1rem 0 1.5rem;
    text-align: center;
  }
  .hero-main-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-visual-canvas {
    margin-left: auto;
    margin-right: auto;
  }
  .chip-pos-top-right {
    top: -5px;
    right: 0px;
  }
  .chip-pos-bottom-left {
    bottom: 5px;
    left: 0px;
  }
  .hero-highlights-row {
    justify-content: center;
  }
  .auth-form-card {
    padding: 1.75rem 1.25rem;
  }
}




/* 7. Utilities + motion --------------------------------------------------- */
.bg-page { background: var(--page-bg) !important; }
.bg-surface { background: var(--surface) !important; }
.border-hairline { border: 1px solid var(--border) !important; }
.rounded-app { border-radius: var(--radius) !important; }
.rounded-app-lg { border-radius: var(--radius-lg) !important; }
.shadow-app-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-app-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-app-md { box-shadow: var(--shadow-md) !important; }
.min-w-0 { min-width: 0 !important; }
.text-break-anywhere { overflow-wrap: anywhere; }
.gap-section { gap: 1.5rem; }
.section-gap { margin-bottom: 1.5rem; }
img, video, iframe { max-width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card-hover:hover { transform: none; }
}

/* ===== submissions/learning ===== */

/* Pill tabs (status filter with counts). Scrolls sideways on phones. */
.tabs-pill { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; scrollbar-width: none; }
.tabs-pill::-webkit-scrollbar { display: none; }
.tabs-pill__item {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  min-height: 44px; padding: .5rem 1rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--slate-600); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tabs-pill__item:hover { background: var(--slate-50); color: var(--slate-900); text-decoration: none; }
.tabs-pill__item.is-active { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.tabs-pill__count {
  min-width: 22px; padding: 0 .4rem; border-radius: var(--radius-pill); text-align: center;
  font-size: var(--fs-xs); line-height: 20px; font-variant-numeric: tabular-nums;
  background: var(--slate-100); color: var(--slate-600);
}
.tabs-pill__count:empty { display: none; }
.tabs-pill__item.is-active .tabs-pill__count { background: rgba(255, 255, 255, .2); color: #fff; }
button.tabs-pill__item { font-family: inherit; }

/* File link chip: icon + truncated file name */
.file-chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 44px; min-width: 0; font-weight: 500; }
.file-chip > i { color: var(--slate-400); font-size: 1.125rem; flex-shrink: 0; }
.file-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-premium td .file-chip { max-width: 220px; }
.table-stack td .file-chip { max-width: 60%; }

/* Radio option cards (review status) */
.choice-list { display: grid; gap: .5rem; }
.choice-option { position: relative; display: block; margin: 0; }
.choice-option > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.choice-option__body {
  display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .625rem .875rem;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-weight: 600; color: var(--slate-700);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.choice-option__dot {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--slate-300); background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.choice-option:hover .choice-option__body { border-color: var(--slate-400); }
.choice-option > input:checked + .choice-option__body { border-color: var(--indigo-500); background: var(--indigo-50); box-shadow: 0 0 0 1px var(--indigo-500); color: var(--indigo-800); }
.choice-option > input:checked + .choice-option__body .choice-option__dot { border-color: var(--indigo-600); box-shadow: inset 0 0 0 3px #fff; background: var(--indigo-600); }
.choice-option > input:focus-visible + .choice-option__body { box-shadow: var(--ring); }

/* Sticky side card (desktop only) */
@media (min-width: 992px) { .sticky-side { position: sticky; top: calc(var(--topbar-h) + 1.5rem); } }

/* Vertical timeline (submission history) */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 1.5rem 2rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -2px; width: 2px; background: var(--border); }
.timeline__item:last-child::before { display: none; }
.timeline__dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--slate-300); }
.timeline__item.is-current .timeline__dot { background: var(--indigo-600); border-color: var(--indigo-600); box-shadow: 0 0 0 4px var(--indigo-100); }
.comment-box { margin-top: .75rem; padding: .75rem 1rem; background: var(--slate-50); border: 1px solid var(--border); border-left: 3px solid var(--indigo-400); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--slate-700); overflow-wrap: anywhere; }

/* Lesson list rows */
.lesson-row { display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 1rem; border-bottom: 1px solid var(--border); color: inherit; transition: background-color var(--t-fast) var(--ease); }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: var(--slate-25); color: inherit; text-decoration: none; }
.lesson-row__body { flex: 1 1 auto; min-width: 0; }
.lesson-row__title { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.lesson-row__chevron { color: var(--slate-400); flex-shrink: 0; transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.lesson-row:hover .lesson-row__chevron { color: var(--indigo-600); transform: translateX(2px); }
.step-badge { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--slate-100); color: var(--slate-600); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.step-badge.is-done { background: var(--success-soft); color: var(--success-strong); font-size: 1rem; }
@media (min-width: 768px) { .lesson-row { padding: 1rem 1.5rem; } }

/* Task rows (student list) */
.task-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border); color: inherit; transition: background-color var(--t-fast) var(--ease); }
.task-row:last-child { border-bottom: 0; }
.task-row:hover { background: var(--slate-25); color: inherit; text-decoration: none; }
.task-row__body { flex: 1 1 auto; min-width: 0; }
.task-row__title { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
@media (min-width: 768px) { .task-row { padding: 1rem 1.5rem; } }
.due-overdue { color: var(--danger-strong); font-weight: 600; }
.due-soon { color: var(--warning-strong); font-weight: 600; }
.filter-chips { display: flex; gap: .5rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: .25rem; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }

/* Reading column (lesson content, task description) */
.prose { max-width: 72ch; font-size: var(--fs-lg); line-height: 1.7; color: var(--slate-700); overflow-wrap: anywhere; }
.prose p { margin: 0 0 1.25rem; }
.prose > :last-child { margin-bottom: 0; }
.prose-sm { font-size: var(--fs-base); }

/* Attachment / resource card */
.resource-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; }
.resource-card__body { flex: 1 1 200px; min-width: 0; }
.resource-card__name { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }

/* Course hero */
.hero-card { background: linear-gradient(135deg, var(--indigo-50), var(--surface) 60%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 1.5rem; }
@media (min-width: 768px) { .hero-card { padding: 2rem; } }

/* Preview banner */
.preview-banner { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-bottom: 1.5rem; background: var(--info-soft); color: var(--info-strong); border: 1px solid #BAE6FD; border-radius: var(--radius); font-weight: 500; font-size: var(--fs-sm); }
.preview-banner > i { font-size: 1.125rem; flex-shrink: 0; }

/* ===== users/students/reports ===== */
/* Progress bar + percentage on one line (table cells, stacked on phones too) */
.progress-inline { display: flex; align-items: center; gap: .75rem; min-width: 160px; }
.progress-inline > .progress-premium { flex: 1 1 auto; }
.progress-inline__value { min-width: 2.75rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); }
/* Row action buttons keep a 44px touch target when the table stacks on phones */
@media (max-width: 767.98px) {
  .table-stack .btn-sm { min-height: 44px; }
  .table-stack .btn-icon.btn-sm { width: 44px; }
}
/* Small count pills in report tables */
.pill-count { gap: .375rem; }
.pill-count b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ===== dashboards/account ===== */
/* Item list: avatar/icon + title/meta + trailing pill/button rows inside a .data-card.
   Wraps on phones so pills and buttons drop under the text instead of overflowing. */
.item-list { list-style: none; margin: 0; padding: 0; }
.item-list > li { border-bottom: 1px solid var(--border); }
.item-list > li:last-child { border-bottom: 0; }
.item-list__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem; color: inherit; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
li.item-list__row { border-bottom: 1px solid var(--border); }
.item-list > li.item-list__row:last-child { border-bottom: 0; }
a.item-list__row:hover { background: var(--slate-25); text-decoration: none; color: inherit; }
.item-list__row--block { flex-direction: column; align-items: stretch; gap: .5rem; }
.item-list__main { flex: 1 1 8rem; min-width: 0; }
.item-list__title, .item-list__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-list__main--wrap .item-list__title, .item-list__main--wrap .item-list__meta { white-space: normal; }
.item-list__title { font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.item-list__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.item-list__end { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: calc(36px + .75rem); }
@media (min-width: 576px) { .item-list__end { margin-left: auto; } }
/* Progress bar inside a table cell */
.progress-cell { width: 100%; min-width: 120px; max-width: 200px; }
/* Teacher comment block */
.feedback-comment {
  padding: .75rem 1rem; background: var(--slate-50); border-left: 3px solid var(--indigo-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--slate-700); font-size: var(--fs-sm);
}

/* ===== courses ===== */
/* Course card (list grid): whole card is one link */
.course-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; height: 100%;
  padding: 1.5rem; color: inherit; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.course-card:hover { color: inherit; text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.course-card:focus-visible { box-shadow: var(--ring); outline: none; }
.course-card__title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 .5rem; color: var(--text-strong); }
.course-card__desc { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.course-card__teacher { display: flex; align-items: center; gap: .625rem; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-700); }
.course-card__stats { display: flex; align-items: center; gap: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600); font-variant-numeric: tabular-nums; }
.course-card__stats i { margin-right: .375rem; color: var(--slate-400); }
.course-card__stats .course-card__go { margin: 0 0 0 auto; color: var(--slate-400); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.course-card:hover .course-card__go { transform: translateX(3px); color: var(--indigo-600); }

/* Three-up count strip at the bottom of an overview card */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); background: var(--slate-25); }
.stat-strip__item { padding: 1rem; }
.stat-strip__item + .stat-strip__item { border-left: 1px solid var(--border); }
.stat-strip__value { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat-strip__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
@media (min-width: 768px) { .stat-strip__item { padding: 1rem 1.5rem; } }

/* Item row: index/icon + title/meta + optional progress + actions (inside a .data-card) */
.item-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem; border-bottom: 1px solid var(--border); transition: background-color var(--t-fast) var(--ease); }
.item-row:last-child { border-bottom: 0; }
.item-row:hover { background: var(--slate-25); }
.item-row__index { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--slate-100); color: var(--slate-600); font-weight: 700; font-size: var(--fs-sm); }
.item-row__body { flex: 1 1 0; min-width: 0; }
.item-row__title { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
a.item-row__title:hover { color: var(--indigo-700); }
.item-row__meta { display: flex; flex-wrap: wrap; gap: .125rem 1rem; margin-top: .125rem; font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.item-row__meta i { margin-right: .375rem; color: var(--slate-400); }
.item-row__actions { display: flex; gap: .25rem; margin-left: auto; flex-shrink: 0; }
.item-row__progress { flex: 1 1 100%; }
@media (min-width: 768px) {
  .item-row { padding: 1rem 1.5rem; flex-wrap: nowrap; }
  .item-row__progress { flex: 0 0 200px; }
}

/* Checkbox list rows (enroll students) */
.check-list { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; gap: .75rem; min-height: 60px; padding: .75rem 1rem; margin: 0; cursor: pointer; border-bottom: 1px solid var(--border); transition: background-color var(--t-fast) var(--ease); }
.check-list .check-row:last-child { border-bottom: 0; }
.check-row:hover { background: var(--slate-25); }
.check-row:has(input:checked) { background: var(--indigo-50); }
.check-row input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--indigo-600); cursor: pointer; }
.check-row__text { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-width: 0; }
.check-row__label { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
@media (min-width: 768px) { .check-row { padding: .75rem 1.5rem; } }

/* Sticky action bar under a long form */
.sticky-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem;
  margin-top: 1rem; padding: .75rem 1rem; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.sticky-savebar__count { margin-right: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600); }
@media (max-width: 575.98px) { .sticky-savebar .btn { flex: 1 1 auto; } .sticky-savebar__count { flex: 1 0 100%; } }

/* Taller textarea for lesson content */
.field-tall textarea { min-height: 240px; }

/* File picker: label wraps a visually hidden input */
.file-drop { display: flex; align-items: center; gap: 1rem; padding: 1rem; margin: 0; cursor: pointer; background: var(--slate-25); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.file-drop:hover, .file-drop:focus-within { border-color: var(--indigo-400); background: var(--indigo-50); }
.file-drop:focus-within { box-shadow: var(--ring); }
.file-drop.has-file { border-style: solid; border-color: var(--indigo-300); background: var(--indigo-50); }
.form-field > .file-drop { display: flex; margin-bottom: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.file-drop { position: relative; }
.form-field .file-drop .file-drop__input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; box-shadow: none; opacity: 0; overflow: hidden; }
.file-drop__text { display: flex; flex-direction: column; min-width: 0; }
.file-drop__title { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.file-drop__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.file-current { display: flex; align-items: center; gap: .625rem; min-height: 44px; margin-bottom: .75rem; padding: .5rem .875rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; min-width: 0; }
.file-current i { color: var(--slate-400); }
.file-current__remove { display: inline-flex; align-items: center; gap: .375rem; margin: 0 0 0 auto; padding: .5rem 0 .5rem .5rem; flex-shrink: 0; cursor: pointer; color: var(--danger-strong); font-weight: 600; }
.file-current__remove input { accent-color: var(--danger-solid); width: 1.125rem; height: 1.125rem; }