/* ============================================================================
 * Genius Education Platform — Design Tokens & Bootstrap Theme Override
 * ============================================================================ */

:root {
  /* ── Brand colors ───────────────────────────────────────────────────────── */
  --ge-primary:        #163B7A;   /* navy — main brand */
  --ge-primary-hover:  #122f61;   /* navy-dark */
  --ge-primary-light:  #e8eef7;   /* navy-50 */
  --ge-secondary:      #0ea5e9;   /* sky-500 */
  --ge-secondary-hover:#0284c7;   /* sky-600 */
  --ge-accent:         #D7AF4A;   /* gold — Genius "G" */
  --ge-accent-hover:   #c49a35;   /* gold-dark */

  /* ── Neutrals ───────────────────────────────────────────────────────────── */
  --ge-bg:             #f8fafc;   /* slate-50 */
  --ge-bg-card:        #ffffff;
  --ge-bg-sidebar:     #f1f5f9;   /* slate-100 */
  --ge-text:           #1e293b;   /* slate-800 */
  --ge-text-muted:     #64748b;   /* slate-500 */
  --ge-border:         #e2e8f0;   /* slate-200 */
  --ge-border-accent:  #D8E2EE;   /* border-blue-100 */
  --ge-border-light:   #f1f5f9;   /* slate-100 */

  /* ── Status colors ──────────────────────────────────────────────────────── */
  --ge-success:        #22c55e;
  --ge-warning:        #f59e0b;
  --ge-danger:         #ef4444;
  --ge-info:           #3b82f6;

  /* ── Extended text colors ────────────────────────────────────────────────── */
  --ge-text-heading:   #1D3150;   /* navy-900 headings */
  --ge-text-secondary: #60708E;   /* blue-gray-500 */
  --ge-text-tertiary:  #7E8CA3;   /* blue-gray-400 */
  --ge-text-body:      #4E6489;   /* blue-gray-600 */
  --ge-text-link:      #4F6FA8;   /* blue-accent links */
  --ge-text-meta:      #556A8D;   /* blue-gray meta text */
  --ge-search-placeholder: #8A97AB; /* search icons/placeholders */

  /* ── Extended backgrounds ────────────────────────────────────────────────── */
  --ge-bg-light:       #EEF4FA;   /* blue-50 */
  --ge-bg-subtle:      #F4F7FB;   /* blue-gray-25 */
  --ge-bg-hover:       #F4F8FD;   /* hover state */
  --ge-bg-muted:       #F3F6FA;   /* page background variant */
  --ge-bg-institution: #F2F6FB;   /* institution strip bg */

  /* ── Extended status colors ──────────────────────────────────────────────── */
  --ge-danger-muted:   #B45353;   /* muted red text */
  --ge-success-dark:   #166534;   /* green-800 */
  --ge-warning-dark:   #92400e;   /* amber-800 */
  --ge-danger-dark:    #991b1b;   /* red-800 */
  --ge-info-dark:      #1e40af;   /* blue-800 */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --ge-font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ge-font-size-xs:   0.75rem;
  --ge-font-size-sm:   0.875rem;
  --ge-font-size-base: 1rem;
  --ge-font-size-lg:   1.125rem;
  --ge-font-size-xl:   1.25rem;
  --ge-font-size-2xl:  1.5rem;
  --ge-font-size-3xl:  1.875rem;
  --ge-font-size-4xl:  2.25rem;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --ge-space-xs:       0.25rem;
  --ge-space-sm:       0.5rem;
  --ge-space-md:       1rem;
  --ge-space-lg:       1.5rem;
  --ge-space-xl:       2rem;
  --ge-space-2xl:      3rem;

  /* ── Borders & Shadows ──────────────────────────────────────────────────── */
  --ge-radius-sm:      0.375rem;
  --ge-radius-md:      0.5rem;
  --ge-radius-lg:      0.75rem;
  --ge-radius-xl:      1rem;
  --ge-radius-full:    9999px;
  --ge-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --ge-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --ge-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* ── Utility Classes ────────────────────────────────────────────────────── */

/* Margin bottom utilities */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }

/* Margin top utilities */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }

/* Padding utilities */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ── Body defaults ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--ge-font-family);
  background-color: var(--ge-bg);
  color: var(--ge-text);
}

/* ── Bootstrap overrides ────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--ge-primary) !important;
  border-color: var(--ge-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ge-primary-hover) !important;
  border-color: var(--ge-primary-hover) !important;
}
.btn-outline-primary {
  color: var(--ge-primary) !important;
  border-color: var(--ge-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ge-primary) !important;
  border-color: var(--ge-primary) !important;
  color: #fff !important;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.ge-navbar {
  background: linear-gradient(135deg, var(--ge-primary) 0%, #1a4a8a 100%) !important;
  box-shadow: var(--ge-shadow-md);
}
.ge-navbar .navbar-brand {
  font-weight: 700;
  font-size: var(--ge-font-size-xl);
  letter-spacing: -0.025em;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.ge-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  box-shadow: var(--ge-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.ge-card:hover {
  box-shadow: var(--ge-shadow-md);
  transform: translateY(-2px);
}
.ge-card .card-body { padding: var(--ge-space-lg); }

/* ── Category filter chips ─────────────────────────────────────────────────── */
.ge-chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--ge-radius-full);
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  color: var(--ge-text);
  margin: 0.2rem;
  user-select: none;
}
.ge-chip:hover {
  border-color: var(--ge-primary);
  color: var(--ge-primary);
}
.ge-chip.active {
  background: var(--ge-primary);
  border-color: var(--ge-primary);
  color: #fff;
}

/* ── Status badges ─────────────────────────────────────────────────────────── */
.ge-badge-open       { background: var(--ge-success); color: #fff; }
.ge-badge-closed     { background: #94a3b8; color: #fff; }
.ge-badge-full       { background: var(--ge-warning); color: #fff; }
.ge-badge-cancelled  { background: var(--ge-danger); color: #fff; }
.ge-badge-private    { background: var(--ge-text); color: #fff; }
.ge-badge-draft      { background: #94a3b8; color: #fff; }
.ge-badge-inprogress { background: var(--ge-info); color: #fff; }
.ge-badge-completed  { background: #06b6d4; color: #fff; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.ge-footer {
  background: var(--ge-text);
  color: #cbd5e1;
  padding: var(--ge-space-2xl) 0 var(--ge-space-lg);
}
.ge-footer h5, .ge-footer h6 {
  color: var(--ge-bg-sidebar);
  font-weight: 600;
}
.ge-footer a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
}
.ge-footer a:hover { color: var(--ge-border); }
.ge-footer-bottom {
  border-top: 1px solid #334155;
  padding-top: var(--ge-space-lg);
  margin-top: var(--ge-space-xl);
  text-align: center;
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}

/* ── Detail panel ──────────────────────────────────────────────────────────── */
.ge-detail-panel {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  box-shadow: var(--ge-shadow-md);
  padding: var(--ge-space-xl);
}

/* ── Tab styles ────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link {
  color: var(--ge-text-muted);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--ge-space-sm) var(--ge-space-md);
}
.nav-tabs .nav-link.active {
  color: var(--ge-primary);
  border-bottom-color: var(--ge-primary);
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--ge-primary);
}

/* ── Teacher scope tabs ────────────────────────────────────────────────────── */
.ge-scope-tabs {
  display: inline-flex;
  height: 40px;
  border-radius: 8px;
  background: var(--ge-bg-subtle);
  overflow: hidden;
}
.ge-scope-tab {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ge-text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ge-scope-tab:hover { color: var(--ge-primary); }
.ge-scope-tab.active {
  background: var(--ge-bg-card);
  border-color: var(--ge-border-accent);
  color: var(--ge-primary);
  font-weight: 600;
}

/* ── Vertical scope tabs (sidebar-style nav) ──────────────────────────────── */
.ge-scope-tabs--vertical {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  border-radius: var(--ge-radius-lg);
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  padding: 6px;
  gap: 2px;
}
.ge-scope-tabs--vertical .ge-scope-tab {
  width: 100%;
  justify-content: flex-start;
  height: 40px;
  padding: 0 12px;
  gap: 10px;
  border-radius: var(--ge-radius-sm);
}
.ge-scope-tabs--vertical .ge-scope-tab.active {
  background: var(--ge-bg-subtle);
  border-color: transparent;
}

/* ── Profile read-only chip (used next to email/dob) ──────────────────────── */
.ge-readonly-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ge-bg-subtle);
  color: var(--ge-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Profile membership chip ──────────────────────────────────────────────── */
.ge-membership-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--ge-bg-subtle);
  color: var(--ge-text);
  border: 1px solid var(--ge-border);
}
.ge-membership-chip--active {
  background: #EAF6EF;
  color: #3E8C63;
  border-color: transparent;
}

/* ── Profile info row (label · value pairs) ──────────────────────────────── */
.ge-info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ge-border);
}
.ge-info-row:last-child { border-bottom: none; }
.ge-info-row-label {
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}
.ge-info-row-value {
  color: var(--ge-text);
  font-weight: 500;
  word-break: break-word;
}

/* ── Section heading inside ge-card body ──────────────────────────────────── */
.ge-card-title {
  margin: 0 0 4px;
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
}
.ge-card-subtitle {
  margin: 0 0 var(--ge-space-lg);
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}

/* ── Ownership chips ──────────────────────────────────────────────────────── */
.ge-ownership-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.ge-ownership-owner       { background: #EAF6EF; color: #3E8C63; }
.ge-ownership-assigned    { background: var(--ge-bg-light); color: #4B6FAE; }
.ge-ownership-school      { background: #F3F4F6; color: #6B7280; }
.ge-ownership-readonly    { background: #F3F4F6; color: #6B7280; }

/* ── Enrollment status chips ──────────────────────────────────────────────── */
.ge-enrollment-enrolled   { background: #EAF6EF; color: #3E8C63; }
.ge-enrollment-pending    { background: #FFF8EE; color: #92640A; }
.ge-enrollment-cancelled  { background: #FEF2F2; color: #B91C1C; }
.ge-enrollment-removed    { background: #F3F4F6; color: #6B7280; }

/* ── Access summary block ─────────────────────────────────────────────────── */
.ge-access-block {
  background: #F8FBFF;
  border: 1px solid #E3EAF2;
  border-radius: 8px;
  padding: 12px;
}
.ge-access-block-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ge-text-secondary);
  margin-bottom: 4px;
}
.ge-access-block-text {
  font-size: 14px;
  color: var(--ge-text-body);
  margin: 0;
}

/* ── Notification impact block ────────────────────────────────────────────── */
.ge-notification-block {
  background: #F8FBFF;
  border: 1px solid #DCE7F3;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--ge-text-body);
}

/* ── Destructive warning block ────────────────────────────────────────────── */
.ge-warning-block {
  background: #FFF8EE;
  border: 1px solid #F1D7A8;
  border-radius: 8px;
  padding: 12px;
}
.ge-warning-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ge-text-heading);
  margin-bottom: 4px;
}
.ge-warning-block-body {
  font-size: 13px;
  font-weight: 400;
  color: var(--ge-text-body);
  margin: 0;
}

/* ── Enrolled users panel ─────────────────────────────────────────────────── */
.ge-enrolled-panel {
  width: 100%;
  max-height: 220px;
  border: 1px solid var(--ge-border-accent);
  border-radius: 8px;
  background: #FFFFFF;
  overflow-y: auto;
}
.ge-enrolled-row {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ge-border-light);
}
.ge-enrolled-row:last-child { border-bottom: none; }
.ge-enrolled-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ge-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ge-text-muted);
  flex-shrink: 0;
  margin-right: 10px;
}
.ge-enrolled-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-heading);
  line-height: 1.2;
}
.ge-enrolled-secondary {
  font-size: 12px;
  color: var(--ge-text-tertiary);
  line-height: 1.2;
}

/* ── Stat card ────────────────────────────────────────────────────────────── */
.ge-stat-card {
  height: 68px;
  border-radius: 8px;
  border: 1px solid var(--ge-border-accent);
  background: #FAFCFE;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.ge-stat-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ge-text-heading);
  line-height: 1;
}
.ge-stat-card-label {
  font-size: 12px;
  color: var(--ge-text-secondary);
  margin-top: 2px;
}

/* ── Teacher course card ──────────────────────────────────────────────────── */
.ge-teacher-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  box-shadow: var(--ge-shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  padding: 14px 16px;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ge-teacher-card:hover {
  box-shadow: var(--ge-shadow-md);
  border-color: var(--ge-primary-light);
}
.ge-teacher-card.selected {
  border-color: var(--ge-primary);
  box-shadow: var(--ge-shadow-md);
}

/* ── Read-only indicator ──────────────────────────────────────────────────── */
.ge-readonly-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ge-text-tertiary);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ge-chip { font-size: var(--ge-font-size-xs); padding: 0.25rem 0.6rem; }
}

/* ── Icon sizing utility ──────────────────────────────────────────────────── */
.ge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}
.ge-icon svg {
  width: 100%;
  height: 100%;
}
.ge-icon-sm  { width: 14px; height: 14px; }
.ge-icon-md  { width: 18px; height: 18px; }
.ge-icon-lg  { width: 24px; height: 24px; }
.ge-icon-xl  { width: 32px; height: 32px; }
.ge-icon-2xl { width: 48px; height: 48px; }

/* ── Text sizing utility classes ──────────────────────────────────────────── */
.ge-text-xs    { font-size: var(--ge-font-size-xs); color: var(--ge-text-muted); }
.ge-text-sm    { font-size: var(--ge-font-size-sm); color: var(--ge-text-muted); }
.ge-text-label { font-size: 15px; font-weight: 600; color: var(--ge-text); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ge-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.ge-empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ge-text-muted);
  opacity: 0.5;
}
.ge-empty-state-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 4px;
}
.ge-empty-state-subtitle {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  margin: 0;
}

/* ── Inline error alert ───────────────────────────────────────────────────── */
.ge-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--ge-radius-md);
  padding: 12px 16px;
  color: #b91c1c;
  margin-bottom: 16px;
  font-size: var(--ge-font-size-sm);
}

/* ── Page header row (title + actions) ────────────────────────────────────── */
.ge-page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.ge-page-header-row .shell-page-header {
  margin-bottom: 0;
}

/* ── Button utilities ─────────────────────────────────────────────────────── */
.ge-btn-md {
  height: 40px;
  border-radius: var(--ge-radius-sm);
}
.ge-input-md {
  height: 42px;
}

/* ── Layout utilities ─────────────────────────────────────────────────────── */
.ge-flex-col {
  display: flex;
  flex-direction: column;
}
.ge-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ge-gap-sm  { gap: 8px; }
.ge-gap-md  { gap: 12px; }
.ge-gap-lg  { gap: 16px; }
.ge-min-w-0 { min-width: 0; }
.ge-sticky-top { position: sticky; top: 1rem; }
.ge-max-w-sm { max-width: 480px; width: 100%; }
.ge-max-w-md { max-width: 700px; }
.ge-max-w-lg { max-width: 800px; }
.ge-min-h-sm { min-height: 300px; }
.ge-min-h-md { min-height: 400px; }
.ge-cursor-pointer { cursor: pointer; }
.ge-whitespace-pre { white-space: pre-wrap; }
.ge-overflow-scroll { max-height: 200px; overflow: auto; }
.ge-mx-auto { margin: 0 auto; }
.ge-hidden { display: none; }

/* ── Text color utilities ─────────────────────────────────────────────────── */
.ge-text-muted-light { color: var(--ge-text-tertiary); }
.ge-text-secondary   { color: var(--ge-text-secondary); }
.ge-text-link        { color: var(--ge-text-link); }
.ge-text-navy        { color: var(--ge-text-heading); }
.ge-text-accent      { color: var(--ge-accent); }
.ge-text-danger-dark { color: #b91c1c; }
.ge-text-required    { color: #C4533A; margin-left: 2px; }
.ge-text-footer      { color: #A0B4CC; }

/* ── Font size utilities ──────────────────────────────────────────────────── */
.ge-font-10 { font-size: 10px; }
.ge-font-11 { font-size: 11px; }
.ge-font-12 { font-size: 12px; }
.ge-font-13 { font-size: 13px; }
.ge-font-14 { font-size: 14px; }
.ge-font-18 { font-size: 18px; }
.ge-font-085 { font-size: 0.85rem; }
.ge-font-082 { font-size: 0.82rem; }
.ge-font-078 { font-size: 0.78rem; }

/* ── Font weight utilities ────────────────────────────────────────────────── */
.ge-fw-500 { font-weight: 500; }
.ge-fw-600 { font-weight: 600; }
.ge-fw-700 { font-weight: 700; }

/* ── Card / Panel containers ──────────────────────────────────────────────── */
.ge-card-section {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 20px;
}
.ge-card-section-flush {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  overflow: hidden;
}

/* ── Table utilities ──────────────────────────────────────────────────────── */
.ge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ge-font-size-sm);
}
.ge-table-header {
  background: var(--ge-bg);
  border-bottom: 1px solid var(--ge-border);
}
.ge-table-th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ge-table-row {
  border-bottom: 1px solid var(--ge-border);
}
.ge-table-td {
  padding: 12px 16px;
}
.ge-table-td-muted {
  padding: 12px 16px;
  color: var(--ge-text-muted);
}
.ge-table-td-bold {
  padding: 12px 16px;
  font-weight: 500;
  color: var(--ge-text);
}

/* ── List item separator ──────────────────────────────────────────────────── */
.ge-list-item {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ge-border);
}

/* ── Notification list ────────────────────────────────────────────────────── */
.ge-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
}
.ge-notif-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.ge-notif-page-info {
  display: flex;
  align-items: center;
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
}

/* ── Recurring form highlight ─────────────────────────────────────────────── */
.ge-recurring-box {
  background: #f0f4ff;
}
.ge-session-box {
  background: #f8f9fa;
}

/* ── Empty state with min-height ──────────────────────────────────────────── */
.ge-empty-state--tall {
  min-height: 300px;
}

/* ── Progress bar thin ────────────────────────────────────────────────────── */
.ge-progress-thin {
  height: 6px;
}

/* ── Code/pre blocks ──────────────────────────────────────────────────────── */
.ge-pre-wrap {
  white-space: pre-wrap;
  word-break: break-all;
}
.ge-pre-scroll {
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 400px;
  overflow: auto;
}

/* ── Profile avatar ───────────────────────────────────────────────────────── */
.ge-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #dee2e6;
}
.ge-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #6c757d;
}

/* ── Events calendar table ────────────────────────────────────────────────── */
.ge-calendar-table { table-layout: fixed; }
.ge-calendar-col   { width: 14.28%; }

/* ── Student courses empty ────────────────────────────────────────────────── */
.ge-sc-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ge-text-tertiary);
  font-size: 14px;
}

/* ── Font size 0.7rem ─────────────────────────────────────────────────────── */
.ge-font-07 { font-size: 0.7rem; }

/* ── Student dashboard course stat card ───────────────────────────────────── */
.ge-stat-card--course {
  text-align: left;
  align-items: flex-start;
  height: auto;
  padding: 14px 16px;
}
.ge-stat-card--course-title {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  margin-bottom: 4px;
}

/* ── Upcoming dot success variant ─────────────────────────────────────────── */
.sd-upcoming-dot--success {
  background: var(--ge-success);
}

/* ── Component helpers (inline-style replacements) ────────────────────────── */
.ge-toast-container { z-index: 9999; position: fixed; top: 0; right: 0; }
.ge-min-h-50vh { min-height: 50vh; }
.ge-auth-shell-flat { min-height: auto; padding: 0; }
.ge-lm-wrapper { width: 100%; border-radius: 8px; overflow: hidden; }
.ge-lm-fill { height: 100%; width: 100%; }
.ge-star { font-size: 1.5rem; }
.ge-star--active { color: #f5a623; }
.ge-star--inactive { color: #ccc; }
.cb-brand-subtitle { font-weight: 400; font-size: 16px; color: #5E718F; }
.cb-details-action-link--disabled { color: #8B95A7; cursor: default; }

/* ── Misc one-offs ────────────────────────────────────────────────────────── */
.ge-spinner-lg { width: 3rem; height: 3rem; }
.ge-nowrap { white-space: nowrap; }
.ge-h-250 { height: 250px; }
.ge-cursor-default { cursor: default; }

/* ============================================================================
 * AppShell — Unified sidebar + header layout for authenticated users
 * Uses --ge-* design tokens from theme.css
 * ============================================================================ */

/* ── Variables ────────────────────────────────────────────────────────────── */
.app-shell {
  --shell-sidebar-w: 260px;
  display: flex;
  min-height: 100vh;
  background: var(--ge-bg);
  font-family: var(--ge-font-family);
}

/* ── Left Sidebar ─────────────────────────────────────────────────────────── */
.shell-sidebar {
  width: var(--shell-sidebar-w);
  min-height: 100vh;
  background: var(--ge-bg-card);
  border-right: 1px solid var(--ge-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.shell-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 20px;
  text-decoration: none;
}

.shell-sidebar-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--ge-radius-md);
  background: var(--ge-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.shell-sidebar-brand-text {
  font-size: var(--ge-font-size-lg);
  font-weight: 700;
  color: var(--ge-text);
  letter-spacing: -0.025em;
}

/* ── Sidebar search ───────────────────────────────────────────────────────── */
.shell-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 8px 12px;
  background: var(--ge-bg);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  transition: border-color 0.15s ease;
}

.shell-sidebar-search:focus-within {
  border-color: var(--ge-primary);
}

.shell-sidebar-search svg {
  width: 16px;
  height: 16px;
  color: var(--ge-text-muted);
  flex-shrink: 0;
}

.shell-sidebar-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  min-width: 0;
}

.shell-sidebar-search input::placeholder {
  color: var(--ge-text-muted);
}

.shell-sidebar-search-btn {
  border: none;
  background: var(--ge-primary);
  color: #fff;
  font-size: var(--ge-font-size-xs, 12px);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ge-radius-sm, 6px);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.shell-sidebar-search-btn:hover,
.shell-sidebar-search-btn:focus-visible {
  background: var(--ge-primary-dark, var(--ge-primary));
  outline: none;
}

/* ── Sidebar nav ──────────────────────────────────────────────────────────── */
.shell-sidebar-nav-wrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.shell-sidebar-nav {
  padding: 0 12px;
  list-style: none;
  margin: 0;
}
.shell-sidebar-nav--flush {
  padding: 0;
}

.shell-sidebar-section {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-text-muted);
}

.shell-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ge-radius-md);
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  margin-bottom: 2px;
}

.shell-nav-item:hover {
  background: var(--ge-bg-sidebar);
  color: var(--ge-text);
}

.shell-nav-item.active {
  background: var(--ge-primary-light);
  color: var(--ge-primary);
  font-weight: 600;
}

.shell-nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shell-nav-icon svg {
  width: 20px;
  height: 20px;
}

.shell-nav-badge {
  margin-left: auto;
  background: var(--ge-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--ge-radius-full);
  line-height: 18px;
  min-width: 18px;
  text-align: center;
}

/* ── Sidebar support card ─────────────────────────────────────────────────── */
.shell-sidebar-bottom {
  border-top: 1px solid var(--ge-border);
  padding: 8px 12px 0;
  margin-top: auto;
}

.shell-sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.shell-user-display-name {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-nav-action {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
}

.shell-nav-item.danger,
.shell-nav-action.danger {
  color: var(--ge-danger);
}

.shell-nav-item.danger:hover,
.shell-nav-action.danger:hover {
  background: #fef2f2;
  color: var(--ge-danger);
}

.shell-sidebar-support {
  padding: 16px 12px;
}

.shell-sidebar-support-icon {
  width: 40px;
  height: 40px;
  background: var(--ge-bg-sidebar);
  border-radius: var(--ge-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--ge-text-muted);
}

.shell-sidebar-support-icon svg {
  width: 20px;
  height: 20px;
}

.shell-sidebar-support-title {
  font-weight: 600;
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  margin-bottom: 4px;
}

.shell-sidebar-support-link {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
  text-decoration: none;
}

.shell-sidebar-support-link:hover {
  color: var(--ge-primary);
}

/* ── Main area ────────────────────────────────────────────────────────────── */
.shell-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100vw - var(--shell-sidebar-w));
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.shell-content {
  flex: 1;
  padding: 28px 32px 32px;
}

/* ── User avatar ──────────────────────────────────────────────────────────── */
.shell-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ge-primary-light);
  color: var(--ge-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.shell-content {
  flex: 1;
  padding: 28px 32px 32px;
}

/* ── Page header pattern ──────────────────────────────────────────────────── */
.shell-page-header {
  margin-bottom: 24px;
}

.shell-page-title {
  font-size: var(--ge-font-size-2xl);
  font-weight: 700;
  color: var(--ge-text);
  margin: 0 0 4px;
  letter-spacing: -0.025em;
}

.shell-page-subtitle {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  margin: 0;
}

/* ── Mobile header ────────────────────────────────────────────────────────── */
.shell-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--ge-bg-card);
  border-bottom: 1px solid var(--ge-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.shell-mobile-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.shell-mobile-toggle {
  background: none;
  border: none;
  color: var(--ge-text);
  cursor: pointer;
  padding: 4px;
}

.shell-mobile-toggle svg {
  width: 24px;
  height: 24px;
}

.shell-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.shell-sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-shell {
    flex-direction: column;
  }

  .shell-mobile-header {
    display: flex;
  }

  .shell-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    z-index: 300;
    transition: left 0.3s ease;
  }

  .shell-sidebar.open {
    left: 0;
  }

  .shell-main {
    max-width: 100vw;
  }

  .shell-content {
    padding: 20px 16px 24px;
  }
}

/* ── Reusable page components ─────────────────────────────────────────────── */

/* Section header with title + action */
.ge-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ge-section-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.ge-section-link {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-primary);
  text-decoration: none;
  font-weight: 500;
}

.ge-section-link:hover {
  text-decoration: underline;
}

/* Empty state */
.ge-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.ge-empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.ge-empty-state-title {
  font-size: var(--ge-font-size-base);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 4px;
}

.ge-empty-state-text {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  margin: 0 0 16px;
  max-width: 320px;
}

/* Standardized button */
.ge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  padding: 8px 16px;
  line-height: 1.5;
}

.ge-btn-primary {
  background: var(--ge-primary);
  color: #fff;
}

.ge-btn-primary:hover {
  background: var(--ge-primary-hover);
  color: #fff;
}

.ge-btn-secondary {
  background: transparent;
  color: var(--ge-text);
  border: 1px solid var(--ge-border);
}

.ge-btn-secondary:hover {
  background: var(--ge-bg-sidebar);
}

.ge-btn-ghost {
  background: transparent;
  color: var(--ge-text-muted);
}

.ge-btn-ghost:hover {
  background: var(--ge-bg-sidebar);
  color: var(--ge-text);
}

.ge-btn-sm {
  padding: 5px 12px;
  font-size: var(--ge-font-size-xs);
}

.ge-btn-lg {
  padding: 12px 24px;
  font-size: var(--ge-font-size-base);
}

/* Loading spinner */
.ge-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}

.ge-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ge-border);
  border-top-color: var(--ge-primary);
  border-radius: 50%;
  animation: ge-spin 0.7s linear infinite;
}

@keyframes ge-spin {
  to { transform: rotate(360deg); }
}

/* Content grid for dashboard-style pages */
.ge-content-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.ge-content-main {
  min-width: 0;
}

.ge-content-aside {
  min-width: 0;
}

@media (max-width: 1024px) {
  .ge-content-grid {
    grid-template-columns: 1fr;
  }
}

/* Card grid */
.ge-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Notification item */
.ge-notif-item {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.15s ease;
}

.ge-notif-item.unread {
  border-left: 3px solid var(--ge-primary);
  background: #f8f9ff;
}

.ge-notif-item.clickable {
  cursor: pointer;
}

.ge-notif-item.clickable:hover {
  border-color: var(--ge-primary-light);
}

.ge-notif-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.ge-notif-body {
  flex: 1;
  min-width: 0;
}

.ge-notif-title {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 2px;
}

.ge-notif-message {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  margin: 0 0 6px;
  line-height: 1.5;
}

.ge-notif-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ge-notif-time {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
}

/* Stats row */
.ge-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ge-stat-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 20px;
  text-align: center;
}

.ge-stat-value {
  font-size: var(--ge-font-size-2xl);
  font-weight: 700;
  color: var(--ge-text);
  line-height: 1;
}

.ge-stat-label {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* ============================================================================
 * Auth Pages — Academic Auth Card UI
 * Matches marketplace visual system: navy primary, light bg, academic calm.
 * All classes prefixed with `auth-` to avoid collisions.
 * ============================================================================ */

/* ── Auth page shell ──────────────────────────────────────────────────────── */
.auth-page-shell {
  background: var(--ge-bg-muted);
  min-height: 100vh;
  padding: 24px 16px 48px;
  font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.auth-page-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

/* ── Auth card ────────────────────────────────────────────────────────────── */
.auth-card {
  width: 440px;
  max-width: 100%;
  border-radius: 16px;
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  box-shadow: 0 4px 16px rgba(20, 33, 61, 0.06);
  padding: 32px;
}

.auth-card--wide {
  width: 520px;
}

/* ── Brand block ──────────────────────────────────────────────────────────── */
.auth-brand {
  text-align: center;
  margin-bottom: 24px;
}

.auth-brand-logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--ge-primary);
  letter-spacing: -0.02em;
}

.auth-brand-logo .auth-brand-accent {
  color: var(--ge-accent);
}

.auth-brand-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #5E718F;
  margin-top: 2px;
}

/* ── Auth title ───────────────────────────────────────────────────────────── */
.auth-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ge-primary);
  text-align: center;
  margin: 0 0 8px;
}

.auth-helper-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ge-text-body);
  text-align: center;
  margin: 0 0 24px;
}

/* ── Form controls ────────────────────────────────────────────────────────── */
.auth-form-group {
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-heading);
  margin-bottom: 6px;
  line-height: 20px;
}

.auth-input {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-card);
  padding: 0 14px;
  font-size: 14px;
  color: var(--ge-text-heading);
  outline: none;
  transition: border-color 0.15s;
}

.auth-input::placeholder {
  color: var(--ge-search-placeholder);
}

.auth-input:hover {
  border-color: #B8C8DC;
}

.auth-input:focus {
  border-color: #4B6FAE;
  box-shadow: 0 0 0 2px rgba(75, 111, 174, 0.15);
}

.auth-input--error {
  border-color: #C4533A;
}

.auth-input--error:focus {
  box-shadow: 0 0 0 2px rgba(196, 83, 58, 0.12);
}

/* ── Password field with toggle ───────────────────────────────────────────── */
.auth-password-wrapper {
  position: relative;
}

.auth-password-wrapper .auth-input {
  padding-right: 48px;
}

.auth-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 500;
  color: var(--ge-text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

.auth-password-toggle:hover {
  color: var(--ge-primary);
}

/* ── Error message ────────────────────────────────────────────────────────── */
.auth-field-error {
  font-size: 12px;
  color: #C4533A;
  margin-top: 4px;
  line-height: 16px;
}

/* ── Forgot password link ─────────────────────────────────────────────────── */
.auth-forgot-password {
  text-align: right;
  margin-bottom: 20px;
}

.auth-forgot-password a,
.auth-forgot-password button {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ge-text-link);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.auth-forgot-password a:hover,
.auth-forgot-password button:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}

/* ── Primary auth button ──────────────────────────────────────────────────── */
.auth-btn-primary {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  background: var(--ge-primary);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-btn-primary:hover {
  background: #122D5A;
}

.auth-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-btn-primary:focus-visible {
  outline: 2px solid rgba(75, 111, 174, 0.25);
  outline-offset: 2px;
}

/* Spinner inside button */
.auth-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.auth-divider {
  height: 1px;
  background: #E3EAF2;
  margin: 20px 0;
}

/* ── Footer prompt ────────────────────────────────────────────────────────── */
.auth-footer-prompt {
  text-align: center;
  font-size: 14px;
  color: var(--ge-text-body);
  margin-top: 24px;
}

.auth-footer-prompt a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-link);
  text-decoration: none;
}

.auth-footer-prompt a:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}

/* ── Checkbox row ─────────────────────────────────────────────────────────── */
.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ge-primary);
}

.auth-checkbox-row label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ge-text-secondary);
}

.auth-checkbox-row a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ge-text-link);
  text-decoration: none;
}

.auth-checkbox-row a:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}

/* ── Two-column name row ──────────────────────────────────────────────────── */
.auth-name-row {
  display: flex;
  gap: 16px;
}

.auth-name-row > .auth-form-group {
  flex: 1;
}

/* ── Alert/error banner ───────────────────────────────────────────────────── */
.auth-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 18px;
}

.auth-alert--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.auth-alert--success {
  background: #F0FFF4;
  border: 1px solid #C6F6D5;
  color: #22543D;
}

/* ── Focus states ─────────────────────────────────────────────────────────── */
.auth-input:focus-visible,
.auth-password-toggle:focus-visible {
  outline: 2px solid rgba(75, 111, 174, 0.25);
  outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .auth-card {
    width: 400px;
  }

  .auth-card--wide {
    width: 460px;
  }
}

@media (max-width: 576px) {
  .auth-page-content {
    padding-top: 20px;
  }

  .auth-card,
  .auth-card--wide {
    width: calc(100% - 32px);
    max-width: 520px;
    padding: 24px;
    min-height: auto;
  }

  .auth-name-row {
    flex-direction: column;
    gap: 0;
  }
}

.ui-scalpel-host {
  position: relative;
  display: inline-block;
}

.ui-scalpel-host--block {
  display: block;
}

.ui-scalpel-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  font: 9px/1.2 monospace;
  background: rgba(0, 0, 0, 0.82);
  color: #0ff;
  padding: 2px 5px;
  border-bottom-left-radius: 3px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}


/* Common Button Styles */
.btn {
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--ge-primary-color, #163B7A);
  outline-offset: 2px;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Sizes */
.btn--sm {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.4;
}

.btn--md {
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
}

.btn--lg {
  padding: 12px 20px;
  font-size: 16px;
  line-height: 1.5;
}

/* Variants */
.btn--primary {
  background: var(--ge-primary-color, #163B7A);
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background: var(--ge-primary-dark, #132B52);
}

.btn--secondary {
  background: var(--ge-surface-color, #F3F7FC);
  color: var(--ge-text-primary, #1D3150);
  border: 1px solid var(--ge-border-color, #D8E2EE);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--ge-surface-hover, #E8EDF5);
}

.btn--danger {
  background: var(--ge-danger-muted);
  color: white;
}

.btn--danger:hover:not(:disabled) {
  background: #9A4545;
}

.btn--ghost {
  background: transparent;
  color: var(--ge-primary-color, #163B7A);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--ge-surface-color, #F3F7FC);
}

/* Modifiers */
.btn--full-width {
  width: 100%;
}

.btn--loading {
  color: transparent;
}

/* Loading spinner */
.btn__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Input Field Styles */
.input-field {
  display: flex;
  flex-direction: column;
}

.input-field--full-width {
  width: 100%;
}

.input-field__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-primary, #1D3150);
  margin-bottom: 6px;
}

.input-field__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-field__input {
  width: 100%;
  border: 1px solid var(--ge-border-color, #D8E2EE);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ge-text-primary, #1D3150);
  background: white;
  transition: all 0.2s ease;
  outline: none;
}

.input-field__input:focus {
  border-color: var(--ge-primary-color, #163B7A);
  box-shadow: 0 0 0 3px rgba(22, 59, 122, 0.1);
}

.input-field__input::placeholder {
  color: var(--ge-text-muted, #7D8BA4);
}

.input-field__input:disabled {
  background: var(--ge-surface-color, #F3F7FC);
  cursor: not-allowed;
}

/* Sizes */
.input-field--sm .input-field__input {
  padding: 6px 10px;
  font-size: 13px;
}

.input-field--md .input-field__input {
  padding: 10px 12px;
  font-size: 14px;
}

.input-field--lg .input-field__input {
  padding: 12px 16px;
  font-size: 16px;
}

/* Icon support */
.input-field--has-left-icon .input-field__input {
  padding-left: 36px;
}

.input-field--has-right-icon .input-field__input {
  padding-right: 36px;
}

.input-field__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ge-text-secondary, #556A8D);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.input-field__icon--left {
  left: 12px;
}

.input-field__icon--right {
  right: 12px;
}

/* Error state */
.input-field--error .input-field__input {
  border-color: var(--ge-danger-muted);
}

.input-field--error .input-field__input:focus {
  border-color: var(--ge-danger-muted);
  box-shadow: 0 0 0 3px rgba(180, 83, 83, 0.1);
}

/* Helper text */
.input-field__helper {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.input-field--error .input-field__helper {
  color: var(--ge-danger-muted);
}

.input-field:not(.input-field--error) .input-field__helper {
  color: var(--ge-text-muted, #7D8BA4);
}

/* Checkbox Field Styles */
.checkbox-field {
  display: flex;
  flex-direction: column;
}

.checkbox-field__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.checkbox-field__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-field__checkmark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ge-border-color, #D8E2EE);
  border-radius: 4px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.checkbox-field__icon {
  width: 12px;
  height: 12px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkbox-field__label {
  font-size: 14px;
  color: var(--ge-text-primary, #1D3150);
  cursor: pointer;
  line-height: 1.4;
  user-select: none;
}

/* Sizes */
.checkbox-field--sm .checkbox-field__checkmark {
  width: 14px;
  height: 14px;
}

.checkbox-field--sm .checkbox-field__icon {
  width: 10px;
  height: 10px;
}

.checkbox-field--sm .checkbox-field__label {
  font-size: 13px;
}

.checkbox-field--lg .checkbox-field__checkmark {
  width: 18px;
  height: 18px;
}

.checkbox-field--lg .checkbox-field__icon {
  width: 14px;
  height: 14px;
}

.checkbox-field--lg .checkbox-field__label {
  font-size: 16px;
}

/* States */
.checkbox-field__input:checked + .checkbox-field__checkmark {
  background: var(--ge-primary-color, #163B7A);
  border-color: var(--ge-primary-color, #163B7A);
}

.checkbox-field__input:checked + .checkbox-field__checkmark .checkbox-field__icon {
  opacity: 1;
}

.checkbox-field__input:focus + .checkbox-field__checkmark {
  box-shadow: 0 0 0 3px rgba(22, 59, 122, 0.1);
}

.checkbox-field__input:disabled + .checkbox-field__checkmark {
  background: var(--ge-surface-color, #F3F7FC);
  border-color: var(--ge-border-light, #E6EDF5);
  cursor: not-allowed;
}

.checkbox-field__input:disabled ~ .checkbox-field__label {
  color: var(--ge-text-muted, #7D8BA4);
  cursor: not-allowed;
}

/* Error state */
.checkbox-field--error .checkbox-field__checkmark {
  border-color: var(--ge-danger-muted);
}

.checkbox-field--error .checkbox-field__input:focus + .checkbox-field__checkmark {
  box-shadow: 0 0 0 3px rgba(180, 83, 83, 0.1);
}

.checkbox-field__error {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ge-danger-muted);
  line-height: 1.4;
}

/* Alert Component Styles */
.alert {
  border-radius: 8px;
  padding: 12px;
  border: 1px solid;
}

.alert__content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert__icon-wrapper {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert__icon {
  width: 16px;
  height: 16px;
}

.alert__body {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.alert__message {
  font-size: 14px;
  line-height: 1.4;
}

.alert__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  margin: -2px;
  cursor: pointer;
  border-radius: 4px;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.alert__dismiss:hover {
  opacity: 1;
}

.alert__dismiss svg {
  width: 14px;
  height: 14px;
}

/* Variants */
.alert--success {
  background: #E7F4EA;
  border-color: #B8E5C1;
  color: #3F8A5D;
}

.alert--error {
  background: #FFEBEB;
  border-color: #F5C2C2;
  color: var(--ge-danger-muted);
}

.alert--warning {
  background: #FFF1E3;
  border-color: #F5D5A8;
  color: #C57A22;
}

.alert--info {
  background: #EEF4FF;
  border-color: #C7D9F5;
  color: #4D70AA;
}

/* Loading Spinner Styles */
.loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ge-primary-color, #163B7A);
}

.loading-spinner__circle {
  border: 2px solid currentColor;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

/* Sizes */
.loading-spinner--sm {
  width: 16px;
  height: 16px;
}

.loading-spinner--sm .loading-spinner__circle {
  width: 16px;
  height: 16px;
}

.loading-spinner--md {
  width: 24px;
  height: 24px;
}

.loading-spinner--md .loading-spinner__circle {
  width: 24px;
  height: 24px;
}

.loading-spinner--lg {
  width: 32px;
  height: 32px;
}

.loading-spinner--lg .loading-spinner__circle {
  width: 32px;
  height: 32px;
  border-width: 3px;
  border-top-width: 3px;
}

@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================================
 * Course Browse Page — Academic Marketplace UI
 * Spec-driven design with navy/blue palette, Inter typography, 8px grid.
 * All classes prefixed with `cb-` to avoid collisions with global theme.
 * ============================================================================ */

/* ── Page background ──────────────────────────────────────────────────────── */
.cb-page-bg {
  background: var(--ge-bg-muted);
  min-height: 100vh;
  padding: 24px 0;
  font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.cb-shell {
  max-width: 1320px;
  min-height: 920px;
  margin: 0 auto;
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(20, 33, 61, 0.06);
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.cb-header {
  height: 84px;
  padding: 16px 28px;
  border-bottom: 1px solid #E6EDF5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cb-logo {
  height: 52px;
  display: flex;
  align-items: center;
}

.cb-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--ge-primary);
  letter-spacing: -0.02em;
  line-height: 52px;
}

.cb-logo-text .cb-logo-accent {
  color: var(--ge-accent);
}

.cb-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cb-sign-in {
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 24px;
  text-decoration: none;
}
.cb-sign-in:hover {
  text-decoration: underline;
  color: #14284B;
}

.cb-sign-up {
  height: 40px;
  min-width: 116px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1px solid #C8D4E3;
  background: var(--ge-bg-card);
  color: var(--ge-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cb-sign-up:hover {
  border-color: #B8C8DC;
  background: #F6FAFF;
  color: var(--ge-primary);
}

.cb-lang-toggle {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid #C8D4E3;
  border-radius: 6px;
  background: var(--ge-bg-card);
  overflow: hidden;
}
.cb-lang-btn {
  padding: 0 14px;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: #5E718F;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cb-lang-btn:hover {
  background: var(--ge-bg-hover);
}
.cb-lang-btn--active {
  background: var(--ge-primary);
  color: #FFFFFF;
}
.cb-lang-btn--active:hover {
  background: #14284B;
}
.cb-lang-sep {
  width: 1px;
  height: 20px;
  background: var(--ge-border-accent);
  flex-shrink: 0;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.cb-filter-bar {
  padding: 18px 28px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cb-filter-input {
  height: 42px;
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border-accent);
  border-radius: 6px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--ge-text-heading);
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.cb-filter-input::placeholder {
  color: var(--ge-search-placeholder);
}
.cb-filter-input:hover {
  border-color: #B8C8DC;
}
.cb-filter-input:focus {
  border-color: #4B6FAE;
  box-shadow: 0 0 0 2px rgba(75, 111, 174, 0.15);
}

.cb-filter-select {
  composes: cb-filter-input;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3 5l3 3 3-3%27 stroke=%27%235E718F%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #5E718F;
}
/* separate select rule since composes only works in CSS Modules */
select.cb-filter-input {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M3 5l3 3 3-3%27 stroke=%27%235E718F%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #5E718F;
  cursor: pointer;
}

.cb-filter-country  { width: 116px; flex-shrink: 0; }
.cb-filter-city     { width: 108px; flex-shrink: 0; }
.cb-filter-district { width: 118px; flex-shrink: 0; }
.cb-filter-type     { width: 108px; flex-shrink: 0; }
.cb-filter-category { width: 150px; flex-shrink: 0; }
.cb-filter-remote   { width: 130px; flex-shrink: 0; }
.cb-filter-search   { flex: 1; min-width: 200px; }

/* ── Main content area ────────────────────────────────────────────────────── */
.cb-main {
  flex: 1;
  padding: 8px 28px 0;
  display: flex;
  flex-direction: column;
}

.cb-main-content {
  flex: 1;
  padding: 8px 28px 16px;
}

.cb-content-grid {
  display: flex;
  gap: 24px;
  flex: 1;
}

/* ── Section titles ───────────────────────────────────────────────────────── */
.cb-section-titles {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}

.cb-section-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ge-primary);
  margin: 0;
}

.cb-section-title--left {
  flex: 7;
}

.cb-section-title--right {
  flex: 5;
}

/* ── Left column ──────────────────────────────────────────────────────────── */
.cb-left-col {
  flex: 7;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cb-course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Course card ──────────────────────────────────────────────────────────── */
.cb-course-card {
  width: 100%;
  height: 84px;
  border-radius: 10px;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-card);
  box-shadow: 0 2px 10px rgba(20, 49, 80, 0.04);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
}
.cb-course-card:hover {
  border-color: #C8D4E3;
  box-shadow: 0 3px 12px rgba(20, 49, 80, 0.07);
}

/* Selected state */
.cb-course-card--selected {
  background: #F6FAFF;
  border-color: #BDD0E8;
  box-shadow: 0 4px 14px rgba(22, 59, 122, 0.08);
}

/* Left selection rail */
.cb-course-card--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--ge-primary);
}

/* Media zone */
.cb-card-media {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--ge-bg-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-card-media-placeholder {
  font-size: 22px;
  color: var(--ge-text-tertiary);
}

/* Content zone */
.cb-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.cb-card-institution {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ge-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ge-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-course-card--selected .cb-card-title {
  color: #122D5A;
}

.cb-card-tutor {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ge-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-card-location {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--ge-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-card-location-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ge-text-body);
}

/* Course type chip */
.cb-type-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #5A78A8;
  background: var(--ge-bg-light);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 16px;
  flex-shrink: 0;
}

/* Action zone */
.cb-card-action {
  width: 140px;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cb-action-text {
  font-size: 14px;
  font-weight: 500;
  color: #5574AA;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.cb-action-text:hover {
  text-decoration: underline;
  color: var(--ge-primary);
}

/* ── School vs Open course card variants ──────────────────────────────────── */

/* School course card — warm accent border */
.cb-course-card--school {
  border-left: 3px solid var(--ge-primary);
}
.cb-course-card--school:hover {
  border-color: var(--ge-primary);
  border-left-color: var(--ge-primary);
}

/* Open course card — subtle sky accent */
.cb-course-card--open {
  border-left: 3px solid var(--ge-secondary);
}
.cb-course-card--open:hover {
  border-color: var(--ge-secondary);
  border-left-color: var(--ge-secondary);
}

/* Media zone variants */
.cb-card-media--school {
  background: var(--ge-primary-light);
}
.cb-card-media--open {
  background: #e0f2fe;
}

/* School course institution name — bold navy with dot */
.cb-card-institution--school {
  color: var(--ge-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cb-school-dot {
  color: var(--ge-primary);
  font-size: 8px;
  line-height: 1;
}

/* School course location — darker tint */
.cb-card-location--school {
  color: var(--ge-primary);
  font-weight: 500;
}

/* Type chip — school variant (navy) */
.cb-type-chip--school {
  color: var(--ge-primary);
  background: var(--ge-primary-light);
  font-weight: 600;
  border: 1px solid #c8d8ec;
}

/* Type chip — open variant (sky blue) */
.cb-type-chip--open {
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}

/* Details panel school variant */
.cb-details-card--school {
  border-top: 3px solid var(--ge-primary);
}
.cb-details-card--open {
  border-top: 3px solid var(--ge-secondary);
}

/* Institution strip — school variant */
.cb-institution-strip--school {
  background: var(--ge-primary-light);
  border: 1px solid #c8d8ec;
}

.cb-institution-icon--school {
  background: var(--ge-primary);
  color: #fff;
}

/* Enrolled card indicator */
.cb-course-card--enrolled {
  border-left: 3px solid #28a745;
}

/* Enrolled badge */
.cb-enrolled-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1a7431;
  background: #e6f4ea;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 18px;
  white-space: nowrap;
}
.cb-enrolled-badge--lg {
  font-size: 14px;
  padding: 6px 14px;
}

/* Pending enrollment badge */
.cb-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #856404;
  background: #fff3cd;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 18px;
  white-space: nowrap;
}
.cb-pending-badge--lg {
  font-size: 14px;
  padding: 6px 14px;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.cb-pagination {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E1E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.cb-pagination-info {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.cb-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cb-page-link {
  font-size: 14px;
  color: var(--ge-text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
  transition: color 0.15s;
}
.cb-page-link:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}
.cb-page-link:disabled {
  color: #B8C5D6;
  cursor: default;
  text-decoration: none;
}

.cb-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ge-text-link);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cb-page-num:hover {
  background: var(--ge-bg-hover);
}
.cb-page-num--active {
  background: var(--ge-bg-light);
  border-color: #C8D4E3;
  color: var(--ge-primary);
  font-weight: 600;
}

/* ── Right column ─────────────────────────────────────────────────────────── */
.cb-right-col {
  flex: 5;
  min-width: 0;
}

/* ── Details card ─────────────────────────────────────────────────────────── */
.cb-details-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border-accent);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20, 49, 80, 0.05);
}

.cb-details-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ge-text-tertiary);
  font-size: 14px;
}

/* Institution strip */
.cb-institution-strip {
  height: 54px;
  background: #F0F4FA;
  border-radius: 8px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cb-institution-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--ge-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--ge-primary);
  border: 1px solid var(--ge-border-accent);
}

.cb-institution-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ge-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Details title row */
.cb-details-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

.cb-gold-star {
  width: 10px;
  height: 10px;
  color: var(--ge-accent);
  flex-shrink: 0;
  margin-top: 7px;
}

.cb-details-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ge-primary);
  line-height: 24px;
  margin: 0;
}

/* Tutor block */
.cb-tutor-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.cb-tutor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cb-tutor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-tutor-avatar-placeholder {
  font-size: 22px;
  color: var(--ge-text-tertiary);
}

.cb-tutor-text {
  display: flex;
  flex-direction: column;
}
.cb-tutor-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ge-text-heading);
  line-height: 22px;
}
.cb-tutor-role {
  font-size: 13px;
  font-weight: 400;
  color: var(--ge-text-tertiary);
  line-height: 18px;
}

/* Status row */
.cb-status-row {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
}
.cb-status-label {
  font-weight: 500;
  color: var(--ge-text-heading);
}
.cb-status-value {
  font-weight: 500;
}
.cb-status-value--open    { color: #3E8C63; }
.cb-status-value--waiting { color: #C28A2C; }
.cb-status-value--closed  { color: #8B95A7; }

/* Divider */
.cb-divider {
  height: 1px;
  background: #E3EAF2;
  margin: 10px 0;
}

/* Info rows (schedule, location) */
.cb-info-row {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}
.cb-info-label {
  font-weight: 500;
  color: var(--ge-text-heading);
}
.cb-info-value {
  font-weight: 400;
  color: var(--ge-text-body);
}

/* Minimap */
.cb-minimap {
  width: 100%;
  height: 220px;
  border-radius: 8px;
  border: 1px solid var(--ge-border-accent);
  overflow: hidden;
  background: #EEF3F8;
  margin-top: 10px;
}

/* Details action */
.cb-details-action {
  margin-top: 14px;
  text-align: center;
}
.cb-details-action-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--ge-text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s;
}
.cb-details-action-link:hover {
  text-decoration: underline;
  color: var(--ge-primary);
}

/* ── Footer strip ─────────────────────────────────────────────────────────── */
.cb-footer {
  height: 48px;
  border-top: 1px solid #E3EAF2;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-top: auto;
}
.cb-footer-text {
  font-size: 13px;
  color: var(--ge-text-secondary);
}
.cb-footer-link {
  font-size: 13px;
  color: var(--ge-text-secondary);
  text-decoration: none;
  cursor: pointer;
}
.cb-footer-link:hover {
  color: var(--ge-text-heading);
  text-decoration: underline;
}

/* ── Loading / Error states ───────────────────────────────────────────────── */
.cb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--ge-text-tertiary);
}

.cb-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ge-border);
  border-top-color: var(--ge-primary);
  border-radius: 50%;
  animation: cb-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes cb-spin {
  to { transform: rotate(360deg); }
}

.cb-error {
  padding: 16px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: var(--ge-danger-dark);
  font-size: 14px;
  margin: 20px 28px;
}

/* ── Focus states for accessibility ───────────────────────────────────────── */
.cb-course-card:focus-visible,
.cb-sign-up:focus-visible,
.cb-sign-in:focus-visible,
.cb-lang-btn:focus-visible,
.cb-filter-input:focus-visible,
.cb-action-text:focus-visible,
.cb-page-num:focus-visible,
.cb-page-link:focus-visible,
.cb-details-action-link:focus-visible {
  outline: 2px solid rgba(75, 111, 174, 0.25);
  outline-offset: 2px;
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .cb-shell {
    max-width: calc(100% - 40px);
    margin: 0 20px;
  }
}

@media (max-width: 1024px) {
  .cb-content-grid {
    flex-direction: column;
  }
  .cb-left-col,
  .cb-right-col {
    flex: none;
    width: 100%;
  }
  .cb-section-titles {
    flex-direction: column;
    gap: 8px;
  }
  .cb-section-title--left,
  .cb-section-title--right {
    flex: none;
  }
  .cb-filter-bar {
    flex-wrap: wrap;
  }
  .cb-filter-country,
  .cb-filter-city,
  .cb-filter-district,
  .cb-filter-type,
  .cb-filter-category,
  .cb-filter-remote {
    width: calc(50% - 4px);
  }
  .cb-filter-search {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .cb-page-bg {
    padding: 12px 0;
  }
  .cb-shell {
    border-radius: 12px;
    min-height: auto;
  }
  .cb-header {
    padding: 12px 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
  }
  .cb-filter-bar {
    padding: 12px 16px;
  }
  .cb-main {
    padding: 8px 16px 0;
  }
  .cb-course-card {
    height: auto;
    min-height: 84px;
  }
  .cb-card-action {
    width: auto;
  }
  .cb-footer {
    padding: 0 16px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
}

/* Ask about course action */
.cb-ask-course-action {
  margin-bottom: 8px;
}
.cb-ask-course-link {
  color: var(--ge-primary, #3b82f6);
}
.cb-ask-course-link:hover {
  color: #2563eb;
}

/* ============================================================================
 * Student Dashboard — Redesigned modern layout
 * Uses --ge-* tokens + shared classes from AppShell.css
 * Layout: top dynamic section | center + right sidebar | bottom marketplace
 * ============================================================================ */

 /* ── Home-only colorful background shell ─────────────────────────────────── */
.sd-home-bg {
  position: relative;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(1100px 520px at 5% -10%, rgba(59, 130, 246, 0.2), transparent 55%),
    radial-gradient(900px 460px at 100% 0%, rgba(14, 165, 233, 0.18), transparent 62%),
    radial-gradient(800px 420px at 50% 100%, rgba(215, 175, 74, 0.14), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, #f1f7ff 50%, #eef5ff 100%);
}

.sd-home-bg .sd-week-cal,
.sd-home-bg .sd-main-section,
.sd-home-bg .sd-widget,
.sd-home-bg .sd-filter-row,
.sd-home-bg .sd-browse-search,
.sd-home-bg .sd-marketplace-scroll,
.sd-home-bg .sd-inst-card {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
  .sd-home-bg {
    padding: 14px;
    border-radius: 18px;
  }
}

/* ── Main layout grid ─────────────────────────────────────────────────────── */
.sd-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
  gap: 24px;
  grid-template-areas:
    "top-center  right-sidebar"
    "main-center right-sidebar";
}

.sd-top-center    { grid-area: top-center; }
.sd-main-center   { grid-area: main-center; }
.sd-right-sidebar { grid-area: right-sidebar; }

@media (max-width: 1200px) {
  .sd-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top-center"
      "main-center"
      "right-sidebar";
  }
}

/* ── Explore section (below grid) ─────────────────────────────────────────── */
.sd-explore {
  margin-top: 32px;
}

/* ── Institution filter strip ─────────────────────────────────────────────── */
.sd-inst-strip {
  margin-bottom: 16px;
}

.sd-inst-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sd-inst-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ge-bg-card);
  border: 2px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  min-width: 200px;
  max-width: 320px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.sd-inst-card.clickable {
  cursor: pointer;
}

.sd-inst-card.clickable:hover {
  border-color: var(--ge-primary-light);
  box-shadow: var(--ge-shadow-sm);
}

.sd-inst-card.active {
  border-color: var(--ge-primary);
  background: #f0f5ff;
  box-shadow: 0 0 0 1px var(--ge-primary-light);
}

.sd-inst-card-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ge-bg-sidebar);
}

.sd-inst-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-inst-card-logo-fallback {
  font-size: var(--ge-font-size-lg);
  font-weight: 700;
  color: var(--ge-primary);
}

.sd-inst-card-info {
  flex: 1;
  min-width: 0;
}

.sd-inst-card-name {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-inst-card-city {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
  margin-top: 2px;
}

.sd-inst-card-check {
  font-size: 14px;
  color: var(--ge-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.sd-inst-reset-btn {
  margin-top: 8px;
  padding: 4px 14px;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
  color: var(--ge-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sd-inst-reset-btn:hover {
  background: var(--ge-bg-sidebar);
  color: var(--ge-text);
}

/* ── Hero section (no courses state) ──────────────────────────────────────── */
.sd-hero {
  background: linear-gradient(135deg, var(--ge-primary) 0%, #1e4fa0 100%);
  border-radius: var(--ge-radius-xl);
  padding: 40px 32px;
  color: #fff;
  text-align: center;
}

.sd-hero-title {
  font-size: var(--ge-font-size-3xl);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
}

.sd-hero-subtitle {
  font-size: var(--ge-font-size-base);
  opacity: 0.85;
  margin: 0 0 24px;
}

.sd-hero-search {
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto 24px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ge-radius-full);
  padding: 4px 4px 4px 20px;
  gap: 8px;
  transition: background 0.2s ease;
}

.sd-hero-search:focus-within {
  background: rgba(255, 255, 255, 0.25);
}

.sd-hero-search svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sd-hero-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: var(--ge-font-size-sm);
  color: #fff;
  min-width: 0;
}

.sd-hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.sd-hero-search-btn {
  background: #fff;
  color: var(--ge-primary);
  border: none;
  border-radius: var(--ge-radius-full);
  padding: 8px 20px;
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sd-hero-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sd-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sd-hero-chip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--ge-radius-full);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  user-select: none;
}

.sd-hero-chip:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.sd-hero-chip.active {
  background: #fff;
  color: var(--ge-primary);
  border-color: #fff;
  font-weight: 600;
}

/* ── Weekly calendar (has courses state) ──────────────────────────────────── */
.sd-week-cal {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-xl);
  overflow: hidden;
}

.sd-week-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ge-border);
}

.sd-week-cal-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0;
}

.sd-week-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sd-week-cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  border-radius: var(--ge-radius-md);
  cursor: pointer;
  color: var(--ge-text-muted);
  font-size: 14px;
  transition: all 0.15s ease;
}

.sd-week-cal-nav-btn:hover {
  background: var(--ge-bg-sidebar);
  color: var(--ge-text);
}

.sd-week-cal-today-btn {
  padding: 4px 12px;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  border-radius: var(--ge-radius-md);
  cursor: pointer;
  color: var(--ge-primary);
  font-size: var(--ge-font-size-xs);
  font-weight: 600;
  transition: all 0.15s ease;
}

.sd-week-cal-today-btn:hover {
  background: var(--ge-primary-light);
}

.sd-week-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.sd-week-day {
  border-right: 1px solid var(--ge-border);
  min-height: 140px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sd-week-day:last-child {
  border-right: none;
}

.sd-week-day-header {
  padding: 10px 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--ge-border);
}

.sd-week-day-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-text-muted);
}

.sd-week-day-num {
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
  line-height: 1.3;
}

.sd-week-day.today .sd-week-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ge-primary);
  color: #fff;
  border-radius: 50%;
}

.sd-week-day-events {
  flex: 1;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Calendar events ──────────────────────────────────────────────────────── */
.sd-cal-event {
  padding: 4px 8px;
  border-radius: var(--ge-radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-cal-event:hover {
  transform: translateX(2px);
}

.sd-cal-event.color-0 { background: #dbeafe; border-left-color: #3b82f6; color: #1e40af; }
.sd-cal-event.color-1 { background: #dcfce7; border-left-color: #22c55e; color: #166534; }
.sd-cal-event.color-2 { background: #fef3c7; border-left-color: #f59e0b; color: #92400e; }
.sd-cal-event.color-3 { background: #fce7f3; border-left-color: #ec4899; color: #9d174d; }
.sd-cal-event.color-4 { background: #e0e7ff; border-left-color: #6366f1; color: #3730a3; }
.sd-cal-event.color-5 { background: #ccfbf1; border-left-color: #14b8a6; color: #115e59; }

.sd-cal-event-time {
  font-size: 10px;
  opacity: 0.75;
}

/* Ghost/preview events */
.sd-cal-event.preview {
  border-style: dashed;
  opacity: 0.7;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.03) 4px,
    rgba(0, 0, 0, 0.03) 8px
  );
}

.sd-cal-event.conflict {
  border-left-color: var(--ge-danger);
  background: #fef2f2;
  color: var(--ge-danger);
  border-style: dashed;
}

/* ── Conflict warning ─────────────────────────────────────────────────────── */
.sd-conflict-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--ge-radius-lg);
  margin-top: 12px;
}

.sd-conflict-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sd-conflict-text {
  font-size: var(--ge-font-size-sm);
  color: #991b1b;
  margin: 0;
  font-weight: 500;
}

/* ── Main interaction area ────────────────────────────────────────────────── */
.sd-main-section {
  margin-bottom: 8px;
}

.sd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sd-section-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0;
}

.sd-section-link {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-primary);
  text-decoration: none;
  font-weight: 500;
}

.sd-section-link:hover {
  text-decoration: underline;
}

/* ── Bottom marketplace ───────────────────────────────────────────────────── */
.sd-marketplace-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.sd-mp-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sd-mp-card:hover {
  box-shadow: var(--ge-shadow-md);
  transform: translateY(-2px);
  border-color: var(--ge-primary-light);
}

.sd-mp-card.selected {
  border-color: var(--ge-primary);
  box-shadow: 0 0 0 2px var(--ge-primary-light);
}

.sd-mp-card-img {
  height: 120px;
  background: linear-gradient(135deg, var(--ge-primary-light) 0%, #c7d2e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.sd-mp-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sd-mp-card-title {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sd-mp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.sd-mp-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
}

.sd-mp-card-price {
  font-weight: 700;
  color: var(--ge-primary);
  font-size: var(--ge-font-size-sm);
}

.sd-mp-card-seats {
  font-weight: 500;
}

.sd-mp-card-seats.low {
  color: var(--ge-warning);
}

/* ── Right sidebar ────────────────────────────────────────────────────────── */
.sd-widget {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.sd-widget-title {
  font-size: var(--ge-font-size-base);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 16px;
}

.sd-widget-empty {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

/* ── Upcoming classes list ────────────────────────────────────────────────── */
.sd-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sd-upcoming-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ge-radius-md);
  transition: background 0.15s ease;
}

.sd-upcoming-item:hover {
  background: var(--ge-bg-sidebar);
}

.sd-upcoming-time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 0;
  flex-shrink: 0;
}

.sd-upcoming-time-val {
  font-size: var(--ge-font-size-xs);
  font-weight: 700;
  color: var(--ge-text);
  line-height: 1.2;
}

.sd-upcoming-time-period {
  font-size: 10px;
  color: var(--ge-text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.sd-upcoming-info {
  flex: 1;
  min-width: 0;
}

.sd-upcoming-title {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-upcoming-location {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
}

.sd-upcoming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── Course detail panel ──────────────────────────────────────────────────── */
.sd-detail-panel {
  animation: sd-slide-in 0.25s ease;
}

@keyframes sd-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sd-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-text-muted);
  margin: 12px 0 4px;
}

.sd-detail-label:first-child {
  margin-top: 0;
}

.sd-detail-value {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  line-height: 1.5;
  margin: 0;
}

.sd-detail-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 700;
  color: var(--ge-text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.sd-detail-desc {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sd-detail-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.sd-detail-schedule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
}

.sd-detail-schedule-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ge-primary);
  flex-shrink: 0;
}

.sd-detail-cta {
  width: 100%;
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--ge-primary);
  color: #fff;
  border: none;
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: block;
}

.sd-detail-cta:hover {
  background: var(--ge-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ge-shadow-md);
}

.sd-detail-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Status badge ─────────────────────────────────────────────────────────── */
.sd-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--ge-radius-full);
}

.sd-status-badge.active {
  background: #dbeafe;
  color: #1d4ed8;
}

.sd-status-badge.upcoming {
  background: #fef3c7;
  color: #92400e;
}

.sd-status-badge.open {
  background: #dcfce7;
  color: #166534;
}

.sd-status-badge.full {
  background: #fef3c7;
  color: #92400e;
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
.sd-skeleton {
  background: linear-gradient(90deg, var(--ge-bg-sidebar) 25%, var(--ge-bg) 50%, var(--ge-bg-sidebar) 75%);
  background-size: 200% 100%;
  animation: sd-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ge-radius-md);
}

@keyframes sd-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Calendar controls row ────────────────────────────────────────────────── */
.sd-cal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── View toggle ──────────────────────────────────────────────────────────── */
.sd-view-toggle {
  display: flex;
  background: var(--ge-bg-sidebar);
  border-radius: var(--ge-radius-md);
  padding: 2px;
  gap: 2px;
}

.sd-view-toggle-btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: var(--ge-radius-sm);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
  color: var(--ge-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sd-view-toggle-btn:hover {
  color: var(--ge-text);
}

.sd-view-toggle-btn.active {
  background: var(--ge-bg-card);
  color: var(--ge-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Day view ─────────────────────────────────────────────────────────────── */
.sd-day-view {
  max-height: 460px;
  overflow-y: auto;
}

.sd-day-hour-row {
  display: flex;
  min-height: 52px;
  border-bottom: 1px solid var(--ge-border);
}

.sd-day-hour-row:last-child {
  border-bottom: none;
}

.sd-day-hour-label {
  width: 64px;
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ge-text-muted);
  text-align: right;
  border-right: 1px solid var(--ge-border);
}

.sd-day-hour-content {
  flex: 1;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sd-cal-event.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.sd-cal-event-loc {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

.sd-cal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}

.sd-cal-empty p {
  margin: 0;
}

/* ── Month view ───────────────────────────────────────────────────────────── */
.sd-month-view {
  padding: 0;
}

.sd-month-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--ge-border);
}

.sd-month-header-cell {
  padding: 10px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-text-muted);
}

.sd-month-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.sd-month-cell {
  min-height: 80px;
  padding: 4px 6px;
  border-right: 1px solid var(--ge-border);
  border-bottom: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
}

.sd-month-cell:nth-child(7n) {
  border-right: none;
}

.sd-month-cell.outside {
  background: var(--ge-bg-sidebar);
}

.sd-month-cell.today {
  background: #f0f7ff;
}

.sd-month-cell-num {
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  color: var(--ge-text-muted);
  margin-bottom: 4px;
}

.sd-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ge-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.sd-month-cell-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sd-month-event {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 3px solid;
  transition: transform 0.15s ease;
}

.sd-month-event:hover {
  transform: translateX(2px);
}

.sd-month-event.color-0 { background: #dbeafe; border-left-color: #3b82f6; color: #1e40af; }
.sd-month-event.color-1 { background: #dcfce7; border-left-color: #22c55e; color: #166534; }
.sd-month-event.color-2 { background: #fef3c7; border-left-color: #f59e0b; color: #92400e; }
.sd-month-event.color-3 { background: #fce7f3; border-left-color: #ec4899; color: #9d174d; }
.sd-month-event.color-4 { background: #e0e7ff; border-left-color: #6366f1; color: #3730a3; }
.sd-month-event.color-5 { background: #ccfbf1; border-left-color: #14b8a6; color: #115e59; }

.sd-month-event.cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.sd-month-event-more {
  font-size: 10px;
  color: var(--ge-text-muted);
  font-weight: 600;
  padding: 1px 6px;
}

/* ── Bottom category chips ────────────────────────────────────────────────── */

/* ── Filter row (city / district / distance) ──────────────────────────────── */
.sd-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-end;
}

.sd-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.sd-filter-group--geo {
  align-self: flex-end;
}

.sd-filter-label {
  font-size: var(--ge-font-size-xs);
  font-weight: 600;
  color: var(--ge-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sd-filter-input,
.sd-filter-select {
  padding: 7px 12px;
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  background: var(--ge-bg-card);
  transition: border-color 0.15s ease;
  min-width: 0;
}

.sd-filter-input:focus,
.sd-filter-select:focus {
  border-color: var(--ge-primary);
  outline: none;
}

.sd-city-combo {
  position: relative;
}

.sd-filter-hint {
  font-size: var(--ge-font-size-xs);
  color: var(--ge-text-muted);
  margin-top: 2px;
}

.sd-filter-hint--error {
  color: var(--ge-danger);
}

.sd-geo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  background: var(--ge-bg-card);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
  color: var(--ge-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sd-geo-toggle svg {
  width: 14px;
  height: 14px;
}

.sd-geo-toggle:hover {
  border-color: var(--ge-primary-light);
  color: var(--ge-text);
}

.sd-geo-toggle.active {
  background: var(--ge-primary);
  color: #fff;
  border-color: var(--ge-primary);
}

@media (max-width: 768px) {
  .sd-filter-row {
    flex-direction: column;
  }

  .sd-filter-group {
    width: 100%;
  }
}

/* ── Bottom search + chips ────────────────────────────────────────────────── */
.sd-browse-search {
  display: flex;
  align-items: center;
  max-width: 520px;
  margin-bottom: 16px;
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-full);
  padding: 4px 4px 4px 16px;
  gap: 8px;
  transition: border-color 0.2s ease;
}

.sd-browse-search:focus-within {
  border-color: var(--ge-primary);
}

.sd-browse-search svg {
  width: 16px;
  height: 16px;
  color: var(--ge-text-muted);
  flex-shrink: 0;
}

.sd-browse-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  min-width: 0;
}

.sd-browse-search input::placeholder {
  color: var(--ge-text-muted);
}

.sd-browse-search-btn {
  background: var(--ge-primary);
  color: #fff;
  border: none;
  border-radius: var(--ge-radius-full);
  padding: 7px 18px;
  font-size: var(--ge-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.sd-browse-search-btn:hover {
  background: var(--ge-primary-hover);
}

.sd-bottom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.sd-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--ge-radius-full);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  color: var(--ge-text-muted);
  user-select: none;
}

.sd-chip:hover {
  background: var(--ge-bg-sidebar);
  border-color: var(--ge-primary-light);
  color: var(--ge-text);
}

.sd-chip.active {
  background: var(--ge-primary);
  color: #fff;
  border-color: var(--ge-primary);
  font-weight: 600;
}

/* ── Session detail modal ─────────────────────────────────────────────────── */
.sd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  animation: sd-fade-in 0.15s ease;
}

@keyframes sd-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sd-modal {
  background: var(--ge-bg-card);
  border-radius: var(--ge-radius-xl);
  box-shadow: var(--ge-shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.15));
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: sd-slide-in 0.2s ease;
}

.sd-modal.sd-modal-lg {
  max-width: 560px;
}

.sd-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ge-border);
}

.sd-modal-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sd-modal-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--ge-radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.sd-modal-title {
  font-size: var(--ge-font-size-lg);
  font-weight: 700;
  color: var(--ge-text);
  margin: 0;
}

.sd-modal-subtitle {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  font-weight: 500;
  margin-top: 2px;
  display: block;
}

.sd-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--ge-bg-sidebar);
  border-radius: 50%;
  font-size: 20px;
  color: var(--ge-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.sd-modal-close:hover {
  background: var(--ge-border);
}

.sd-modal-body {
  padding: 20px 24px;
}

.sd-modal-alert {
  padding: 10px 14px;
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  margin-bottom: 16px;
}

.sd-modal-alert.danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.sd-modal-alert.warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.sd-modal-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--ge-border);
}

.sd-modal-field:last-child {
  border-bottom: none;
}

.sd-modal-label {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  font-weight: 500;
}

.sd-modal-value {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
  font-weight: 600;
  text-align: right;
}

.sd-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--ge-border);
}

.sd-modal-close-btn {
  padding: 10px 20px;
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  border-radius: var(--ge-radius-md);
  font-size: var(--ge-font-size-sm);
  font-weight: 500;
  color: var(--ge-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sd-modal-close-btn:hover {
  background: var(--ge-bg-sidebar);
}

.sd-modal-map {
  margin-top: 12px;
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  border: 1px solid var(--ge-border);
}

.sd-modal-section {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ge-border);
}

.sd-modal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.sd-modal-section-title {
  font-size: var(--ge-font-size-sm);
  font-weight: 700;
  color: var(--ge-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
}

.sd-modal-teacher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ge-bg-sidebar, #f8f9fa);
  border-radius: var(--ge-radius-md);
}

.sd-modal-teacher-avatar {
  font-size: 24px;
  line-height: 1;
}

.sd-modal-teacher-name {
  font-size: var(--ge-font-size-sm);
  font-weight: 600;
  color: var(--ge-text);
}

.sd-modal-description {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.sd-modal-notes {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--ge-radius-md);
}

.sd-modal-notes-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.sd-modal-price {
  color: var(--ge-primary, #3b82f6);
  font-weight: 700;
}

/* ── Responsive additions ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sd-hero {
    padding: 28px 20px;
  }

  .sd-hero-title {
    font-size: var(--ge-font-size-2xl);
  }

  .sd-week-cal-grid {
    overflow-x: auto;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
  }

  .sd-marketplace-scroll {
    grid-template-columns: 1fr;
  }

  .sd-cal-controls {
    flex-direction: column;
    gap: 8px;
  }

  .sd-week-cal-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .sd-month-cell {
    min-height: 60px;
  }

  .sd-month-event {
    font-size: 9px;
  }

  .sd-day-hour-label {
    width: 50px;
    font-size: 11px;
  }
}

/* ── ImageUpload ──────────────────────────────────────────────────────────── */

.iu-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── PhotoGallery ─────────────────────────────────────────────────────────── */

.pg-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  position: relative;
  padding-bottom: 100%;
}

.pg-photo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(220, 53, 69, 0.85);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  padding: 0;
}

.pg-add-btn {
  padding-bottom: 100%;
  position: relative;
  border-radius: 8px;
  border: 2px dashed #adb5bd;
  cursor: pointer;
  background-color: #f8f9fa;
}

.pg-add-btn--uploading {
  cursor: wait;
}

.pg-add-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #6c757d;
  font-size: 0.8rem;
}

.pg-add-icon {
  font-size: 1.5rem;
}

/* ============================================================================
 * Student My Courses Page — Academic Design System
 * Spec-driven design matching the marketplace/browse pages.
 * All classes prefixed with `sc-` to avoid collisions with global theme.
 * ============================================================================ */

/* ── Page background ──────────────────────────────────────────────────────── */
.sc-page-bg {
  background: var(--ge-bg-muted);
  min-height: 100vh;
  padding: 16px 36px;
  font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.sc-shell {
  max-width: 1368px;
  min-height: 960px;
  margin: 0 auto;
  background: var(--ge-bg-card);
  border: 1px solid #DCE5EF;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(20, 49, 80, 0.06);
  display: flex;
  flex-direction: column;
}

/* ── Page title block ─────────────────────────────────────────────────────── */
.sc-page-title {
  padding: 18px 28px 16px;
}

.sc-page-title h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #132B52;
  margin: 0 0 4px;
}

.sc-page-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ge-text-secondary);
  margin: 0;
}

/* ── Tabs + search/view controls row ──────────────────────────────────────── */
.sc-controls-row {
  height: 56px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

/* ── Status tabs ──────────────────────────────────────────────────────────── */
.sc-tabs {
  display: flex;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ge-border-accent);
}

.sc-tab {
  height: 100%;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: #314A74;
  background: var(--ge-bg-card);
  border: none;
  border-right: 1px solid var(--ge-border-accent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.sc-tab:last-child {
  border-right: none;
}

.sc-tab:hover {
  background: var(--ge-bg-hover);
}

.sc-tab--active {
  background: var(--ge-primary);
  color: var(--ge-bg-card);
  border-color: var(--ge-primary);
}

.sc-tab--active:hover {
  background: #14315E;
}

/* ── Search + view toggle ─────────────────────────────────────────────────── */
.sc-search-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sc-search-wrapper {
  position: relative;
  width: 356px;
}

.sc-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ge-search-placeholder);
  pointer-events: none;
}

.sc-search-input {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-card);
  padding: 0 14px 0 44px;
  font-size: 14px;
  color: var(--ge-text-heading);
  outline: none;
  transition: border-color 0.15s;
}

.sc-search-input::placeholder {
  color: var(--ge-search-placeholder);
}

.sc-search-input:hover {
  border-color: #B8C8DC;
}

.sc-search-input:focus {
  border-color: #4B6FAE;
  box-shadow: 0 0 0 2px rgba(75, 111, 174, 0.15);
}

/* View toggle */
.sc-view-toggle {
  display: flex;
  height: 42px;
  width: 116px;
  border-radius: 8px;
  border: 1px solid var(--ge-border-accent);
  overflow: hidden;
}

.sc-view-btn {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: var(--ge-bg-card);
  color: #314A74;
  transition: background 0.15s, color 0.15s;
}

.sc-view-btn--active {
  background: var(--ge-primary);
  color: var(--ge-bg-card);
}

.sc-view-btn svg {
  width: 18px;
  height: 18px;
}

/* ── Main content area ────────────────────────────────────────────────────── */
.sc-main {
  flex: 1;
  padding: 16px 28px 0;
  display: flex;
  flex-direction: column;
}

.sc-content-grid {
  display: flex;
  gap: 24px;
  flex: 1;
}

/* ── Left column ──────────────────────────────────────────────────────────── */
.sc-left-col {
  flex: 7;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sc-course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-course-list--card .sc-course-card {
  height: 108px;
}

.sc-course-list--list .sc-course-card {
  height: auto;
  min-height: 78px;
  padding: 12px 14px;
  gap: 12px;
}

.sc-course-list--list .sc-card-media {
  width: 72px;
  height: 54px;
}

.sc-course-list--list .sc-card-title {
  font-size: 15px;
  line-height: 20px;
}

.sc-course-list--list .sc-card-institution,
.sc-course-list--list .sc-card-meta-item,
.sc-course-list--list .sc-card-date {
  font-size: 12px;
}

.sc-course-list--list .sc-card-right {
  width: 140px;
  gap: 4px;
}

/* ── Course card ──────────────────────────────────────────────────────────── */
.sc-course-card {
  width: 100%;
  height: 108px;
  border-radius: 10px;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-card);
  box-shadow: 0 2px 10px rgba(20, 49, 80, 0.04);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
}

.sc-course-card:hover {
  border-color: #C8D4E3;
  box-shadow: 0 3px 12px rgba(20, 49, 80, 0.07);
}

/* Selected state */
.sc-course-card--selected {
  background: #F5FAFF;
  border-color: #BFD1E8;
  box-shadow: 0 4px 14px rgba(22, 59, 122, 0.08);
}

/* Left selection rail */
.sc-course-card--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: #1E4A8E;
}

/* Media zone */
.sc-card-media {
  width: 98px;
  height: 72px;
  border-radius: 8px;
  background: var(--ge-bg-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-card-media-placeholder {
  font-size: 28px;
  color: var(--ge-text-tertiary);
}

/* Content zone */
.sc-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.sc-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ge-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-card-institution {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ge-text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-card-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 2px;
}

.sc-card-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ge-text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-card-meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ge-text-meta);
}

/* Right zone (status + date + chevron) */
.sc-card-right {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

/* Status chip */
.sc-status-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.sc-status-chip--enrolled {
  background: #E7F4EA;
  color: #3F8A5D;
}

.sc-status-chip--requested {
  background: #FFF1E3;
  color: #C57A22;
}

.sc-status-chip--waitlisted {
  background: #EEF2F7;
  color: #667085;
}

.sc-status-chip--completed {
  background: #EAF1FF;
  color: #3F68A8;
}

.sc-status-chip--saved {
  background: #F5F6F8;
  color: #6C7482;
}

.sc-status-chip--denied {
  background: #FEF2F2;
  color: #B45353;
}

.sc-status-chip--cancelled {
  background: #F5F6F8;
  color: #6C7482;
}

.sc-card-date {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.sc-card-chevron {
  width: 18px;
  height: 18px;
  color: var(--ge-text-link);
}

/* ── Right column: details ────────────────────────────────────────────────── */
.sc-right-col {
  flex: 5;
  min-width: 0;
}

/* Details card */
.sc-details-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border-accent);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(20, 49, 80, 0.05);
}

.sc-details-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ge-text-tertiary);
  font-size: 14px;
}

/* Details title */
.sc-details-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--ge-primary);
  margin: 0 0 14px;
}

/* Institution strip */
.sc-institution-strip {
  height: 88px;
  border: 1px solid var(--ge-border-accent);
  border-radius: 10px;
  background: var(--ge-bg-institution);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.sc-institution-logo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--ge-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
  color: var(--ge-primary);
  border: 1px solid var(--ge-border-accent);
  overflow: hidden;
}

.sc-institution-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-institution-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sc-institution-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ge-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-institution-type {
  font-size: 14px;
  font-weight: 400;
  color: var(--ge-text-secondary);
}

/* Instructor + student status row */
.sc-instructor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sc-instructor-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sc-instructor-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sc-instructor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-instructor-avatar-placeholder {
  font-size: 22px;
  color: var(--ge-text-tertiary);
}

.sc-instructor-text {
  display: flex;
  flex-direction: column;
}

.sc-instructor-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ge-primary);
  line-height: 22px;
}

.sc-instructor-role {
  font-size: 13px;
  font-weight: 400;
  color: var(--ge-text-secondary);
}

/* Divider */
.sc-divider {
  height: 1px;
  background: #E3EAF2;
  margin: 12px 0;
}

/* Info rows */
.sc-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sc-info-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ge-text-meta);
}

.sc-info-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ge-text-heading);
  white-space: nowrap;
}

.sc-info-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--ge-text-body);
}

/* Minimap */
.sc-minimap {
  width: 100%;
  height: 108px;
  border-radius: 10px;
  border: 1px solid var(--ge-border-accent);
  overflow: hidden;
  background: #EEF3F8;
  margin-top: 4px;
}

/* Online placeholder */
.sc-online-placeholder {
  width: 100%;
  height: 108px;
  border-radius: 10px;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-institution);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ge-text-meta);
  margin-top: 4px;
}

.sc-online-placeholder svg {
  width: 20px;
  height: 20px;
}

/* ── Progress section ─────────────────────────────────────────────────────── */
.sc-progress-section {
  margin-top: 16px;
}

.sc-progress-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ge-primary);
  margin: 0 0 10px;
}

.sc-progress-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sc-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #E7EDF5;
  overflow: hidden;
}

.sc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #2C66BD;
  transition: width 0.3s ease;
}

.sc-progress-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ge-primary);
  white-space: nowrap;
}

/* Progress stat cards */
.sc-stat-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.sc-stat-card {
  flex: 1;
  height: 58px;
  border: 1px solid var(--ge-border-accent);
  border-radius: 8px;
  background: #F9FBFE;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sc-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ge-primary);
  line-height: 22px;
}

.sc-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ge-text-secondary);
  line-height: 16px;
}

/* ── Action links row ─────────────────────────────────────────────────────── */
.sc-action-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

.sc-action-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.15s;
}

.sc-action-link:hover {
  text-decoration: underline;
  color: var(--ge-primary);
}

.sc-action-link svg {
  width: 16px;
  height: 16px;
}

/* ── Withdraw strip ───────────────────────────────────────────────────────── */
.sc-withdraw-strip {
  width: 100%;
  height: 42px;
  border: 1px solid #E2B7B7;
  border-radius: 8px;
  background: #FFFDFC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sc-withdraw-strip:hover {
  background: #FEF6F6;
  border-color: #D4A0A0;
}

.sc-withdraw-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--ge-danger-muted);
}

.sc-withdraw-strip:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.sc-pagination {
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.sc-pagination-info {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.sc-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sc-page-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: none;
  transition: color 0.15s;
}

.sc-page-link:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}

.sc-page-link:disabled {
  color: #B8C5D6;
  cursor: default;
  text-decoration: none;
}

.sc-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--ge-border-accent);
  background: var(--ge-bg-card);
  color: var(--ge-text-link);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sc-page-num:hover {
  background: var(--ge-bg-hover);
}

.sc-page-num--active {
  background: var(--ge-bg-light);
  border-color: #AFC3DF;
  color: var(--ge-primary);
  font-weight: 600;
}

/* ── Footer strip ─────────────────────────────────────────────────────────── */
.sc-footer {
  height: 48px;
  border-top: 1px solid #E6EDF5;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: auto;
}

.sc-footer-left {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.sc-footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sc-footer-link {
  font-size: 13px;
  color: var(--ge-text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.sc-footer-link:hover {
  color: var(--ge-text-heading);
  text-decoration: underline;
}

/* ── Loading / Error states ───────────────────────────────────────────────── */
.sc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--ge-text-tertiary);
}

.sc-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ge-border);
  border-top-color: var(--ge-primary);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes sc-spin {
  to { transform: rotate(360deg); }
}

.sc-error {
  padding: 16px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #991B1B;
  font-size: 14px;
  margin: 20px 28px;
}

/* ── Focus states for accessibility ───────────────────────────────────────── */
.sc-course-card:focus-visible,
.sc-tab:focus-visible,
.sc-search-input:focus-visible,
.sc-view-btn:focus-visible,
.sc-action-link:focus-visible,
.sc-page-num:focus-visible,
.sc-page-link:focus-visible,
.sc-withdraw-strip:focus-visible,
.sc-footer-link:focus-visible {
  outline: 2px solid rgba(75, 111, 174, 0.25);
  outline-offset: 2px;
}

/* ── Responsive adjustments ───────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .sc-page-bg {
    padding: 16px 20px;
  }
  .sc-shell {
    max-width: 100%;
  }
}

@media (max-width: 1199px) {
  .sc-content-grid {
    flex-direction: column;
  }
  .sc-left-col,
  .sc-right-col {
    flex: none;
    width: 100%;
  }
  .sc-controls-row {
    height: auto;
    flex-wrap: wrap;
    padding: 12px 28px;
    gap: 12px;
  }
  .sc-search-wrapper {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .sc-page-bg {
    padding: 12px 0;
  }
  .sc-shell {
    border-radius: 12px;
    min-height: auto;
  }
  .sc-page-title {
    padding: 16px 16px 12px;
  }
  .sc-controls-row {
    padding: 8px 16px;
  }
  .sc-tabs {
    overflow-x: auto;
    max-width: 100%;
  }
  .sc-main {
    padding: 8px 16px 0;
  }
  .sc-course-card {
    height: auto;
    min-height: 84px;
    flex-wrap: wrap;
  }
  .sc-card-media {
    width: 72px;
    height: 56px;
  }
  .sc-card-right {
    width: auto;
    flex-direction: row;
    gap: 12px;
  }
  .sc-stat-cards {
    flex-wrap: wrap;
  }
  .sc-stat-card {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }
  .sc-action-links {
    flex-wrap: wrap;
  }
  .sc-footer {
    padding: 12px 16px;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── TeacherOfferingsPage ─────────────────────────────────────────────────── */

.to-page-subtitle {
  font-size: 14px;
  color: var(--ge-text-secondary);
}

.to-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ge-text-heading);
}

.to-card-subtitle {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.to-card-badge {
  font-size: 11px;
}

.to-card-meta {
  font-size: 12px;
  color: var(--ge-text-secondary);
}

.to-card-actions {
  min-width: 80px;
}

.to-card-status {
  min-width: 120px;
}

.to-detail-title {
  font-weight: 700;
  color: var(--ge-text-heading);
  font-size: 18px;
}

.to-detail-hint {
  font-size: 12px;
  color: var(--ge-text-tertiary);
}

.to-session-row {
  background: var(--ge-bg);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  padding: 12px 16px;
  cursor: pointer;
}

.to-session-row.cancelled {
  opacity: 0.6;
  background: #fff5f5;
}

.to-session-row.past {
  background: var(--ge-bg-sidebar);
}

.to-session-title {
  font-weight: 600;
  font-size: 14px;
}

.to-session-badge {
  font-size: 10px;
}

.to-session-cancel-btn {
  font-size: 11px;
  padding: 2px 8px;
}

.to-session-detail {
  font-size: 13px;
  color: var(--ge-text-secondary);
}

.to-empty-roster {
  color: var(--ge-text-tertiary);
}

.to-empty-hint {
  font-size: 12px;
}

.to-manage-btn {
  font-size: 14px;
  font-weight: 500;
  color: var(--ge-text-link);
}

.to-form-hint {
  font-size: 13px;
}

.to-generated-info {
  font-size: 13px;
  color: var(--ge-primary);
  font-weight: 500;
}

.to-session-card-title {
  font-size: 13px;
}

.to-session-card-close {
  top: 8px;
  right: 12px;
  font-size: 12px;
}

.to-publish-list {
  font-size: 13px;
  color: var(--ge-text-body);
}

.to-validation-error {
  font-size: 13px;
}

.to-material-row {
  background: var(--ge-bg);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  padding: 10px 12px;
}

.to-material-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ge-text-heading);
}

.to-material-desc {
  font-size: 12px;
  color: var(--ge-text-secondary);
}

.to-material-meta {
  font-size: 12px;
}

.to-material-link {
  color: var(--ge-text-link);
  text-decoration: none;
}

.to-material-link:hover {
  text-decoration: underline;
}

.to-material-upload {
  border-top: 1px solid var(--ge-border);
  padding-top: 12px;
}


/* ── Course Picker Bar ── */
.ts-course-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ts-course-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border: 2px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-lg, 12px);
  background: var(--ge-bg-card, #fff);
  cursor: pointer;
  text-align: left;
  min-width: 180px;
  max-width: 260px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ts-course-card:hover {
  border-color: var(--ge-primary, #6c63ff);
  background: rgba(108, 99, 255, 0.03);
}

.ts-course-card--selected {
  border-color: var(--ge-primary, #6c63ff);
  background: rgba(108, 99, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.ts-course-card__title {
  font-size: var(--ge-font-size-sm, 0.875rem);
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
  line-height: 1.3;
}

.ts-course-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ts-course-card__date {
  font-size: 11px;
  color: var(--ge-text-secondary, #64748b);
}

.ts-course-card__count {
  font-size: 11px;
  color: var(--ge-text-secondary, #64748b);
}

/* Status pills inside course cards */
.ts-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ts-pill-open      { background: #dcfce7; color: #166534; }
.ts-pill-active    { background: #dbeafe; color: #1e40af; }
.ts-pill-done      { background: #e0e7ff; color: #3730a3; }
.ts-pill-cancelled { background: #fee2e2; color: #991b1b; }
.ts-pill-draft     { background: #f1f5f9; color: #64748b; }

/* ── Session Pill Row ── */
.ts-session-picker {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ts-session-picker__label {
  font-size: var(--ge-font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--ge-text-secondary, #64748b);
  padding-top: 8px;
  white-space: nowrap;
}

.ts-session-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ts-session-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-card, #fff);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 52px;
}

.ts-session-pill:hover {
  border-color: var(--ge-primary, #6c63ff);
  background: rgba(108, 99, 255, 0.03);
}

.ts-session-pill--selected {
  border-color: var(--ge-primary, #6c63ff);
  background: rgba(108, 99, 255, 0.08);
}

.ts-session-pill--cancelled {
  opacity: 0.5;
  text-decoration: line-through;
}

.ts-session-pill__num {
  font-size: 12px;
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
}

.ts-session-pill--selected .ts-session-pill__num {
  color: var(--ge-primary, #6c63ff);
}

.ts-session-pill__date {
  font-size: 10px;
  color: var(--ge-text-secondary, #64748b);
  margin-top: 1px;
}

/* ── Course conductors info ── */
.ts-conductors-panel {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-sidebar, #f8fafc);
}

.ts-conductors-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
  margin-bottom: 8px;
}

.ts-conductors-empty {
  font-size: 12px;
  color: var(--ge-text-secondary, #64748b);
}

.ts-conductors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ts-conductor-chip {
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-card, #fff);
}

.ts-conductor-main {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.ts-conductor-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ge-text-primary, #1a1a2e);
}

.ts-conductor-owner {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
}

.ts-conductor-meta {
  font-size: 11px;
  color: var(--ge-text-secondary, #64748b);
}

/* ── Page ── */
.ts-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

.ts-title {
  font-size: var(--ge-font-size-2xl, 1.75rem);
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
  margin-bottom: 24px;
}

/* ── Institution tabs + scope context ── */
.ts-inst-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.ts-inst-tab {
  padding: 8px 14px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-card, #fff);
  color: var(--ge-text-secondary, #64748b);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ts-inst-tab.active {
  border-color: var(--ge-primary, #163B7A);
  color: var(--ge-primary, #163B7A);
  background: rgba(22, 59, 122, 0.06);
}

.ts-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ts-context-label {
  font-size: 13px;
  color: var(--ge-text-secondary, #64748b);
}

.ts-scope-tabs {
  display: inline-flex;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  overflow: hidden;
}

.ts-scope-tab {
  padding: 6px 12px;
  border: none;
  background: var(--ge-bg-card, #fff);
  color: var(--ge-text-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ts-scope-tab + .ts-scope-tab {
  border-left: 1px solid var(--ge-border, #e2e8f0);
}

.ts-scope-tab.active {
  background: rgba(22, 59, 122, 0.08);
  color: var(--ge-primary, #163B7A);
}

/* ── Tabs ── */
.ts-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--ge-border, #e2e8f0);
  margin-bottom: 24px;
}

.ts-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: var(--ge-font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--ge-text-secondary, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-tab:hover {
  color: var(--ge-primary, #6c63ff);
}

.ts-tab.active {
  color: var(--ge-primary, #6c63ff);
  border-bottom-color: var(--ge-primary, #6c63ff);
}

.ts-badge {
  background: var(--ge-danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* ── Panel ── */
.ts-panel {
  background: var(--ge-bg-card, #fff);
  border-radius: var(--ge-radius-lg, 12px);
  border: 1px solid var(--ge-border, #e2e8f0);
  padding: 24px;
}

/* ── Select ── */
.ts-select {
  padding: 8px 12px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  font-size: var(--ge-font-size-sm, 0.875rem);
  background: var(--ge-bg-card, #fff);
  color: var(--ge-text-primary, #1a1a2e);
  min-width: 250px;
  margin-bottom: 16px;
}

.ts-select-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ── Table ── */
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ge-font-size-sm, 0.875rem);
}

.ts-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ge-text-secondary, #64748b);
  border-bottom: 2px solid var(--ge-border, #e2e8f0);
  white-space: nowrap;
}

.ts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ge-border-light, #f1f5f9);
  color: var(--ge-text-primary, #1a1a2e);
}

.ts-table tbody tr:hover {
  background: var(--ge-bg-sidebar, #f8fafc);
}

/* ── Status badges ── */
.ts-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ts-status-confirmed { background: #dcfce7; color: #166534; }
.ts-status-pending { background: #fef3c7; color: #92400e; }
.ts-status-cancelled { background: #fee2e2; color: #991b1b; }
.ts-status-denied { background: #fee2e2; color: #991b1b; }
.ts-status-waitlisted { background: #dbeafe; color: #1e40af; }
.ts-status-completed { background: #e0e7ff; color: #3730a3; }

/* ── Offering group ── */
.ts-offering-group {
  margin-bottom: 24px;
}

.ts-offering-group:last-child {
  margin-bottom: 0;
}

.ts-offering-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ge-border-light, #f1f5f9);
}

.ts-offering-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-offering-student-count {
  font-size: 12px;
  color: var(--ge-text-secondary, #64748b);
  white-space: nowrap;
}

.ts-toggle-btn {
  padding: 4px 10px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-card, #fff);
  color: var(--ge-primary, #163B7A);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ts-toggle-btn:hover {
  background: var(--ge-bg-sidebar, #f8fafc);
  border-color: var(--ge-primary, #163B7A);
}

.ts-offering-title {
  font-size: var(--ge-font-size-base, 1rem);
  font-weight: 600;
  color: var(--ge-text-primary, #1a1a2e);
  margin: 0;
}

/* ── Buttons ── */
.ts-btn {
  padding: 6px 14px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ge-bg-card, #fff);
  color: var(--ge-text-primary, #1a1a2e);
  transition: background 0.15s;
}

.ts-btn:hover {
  background: var(--ge-bg-sidebar, #f8fafc);
}

.ts-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ts-btn-approve {
  background: var(--ge-success, #22c55e);
  color: #fff;
  border-color: var(--ge-success, #22c55e);
}

.ts-btn-approve:hover {
  background: #16a34a;
}

.ts-btn-deny {
  background: var(--ge-danger, #ef4444);
  color: #fff;
  border-color: var(--ge-danger, #ef4444);
}

.ts-btn-deny:hover {
  background: #dc2626;
}

.ts-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

/* ── Attendance buttons ── */
.ts-attendance-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ts-att-btn {
  padding: 4px 10px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ge-bg-card, #fff);
  color: var(--ge-text-secondary, #64748b);
  transition: all 0.15s;
}

.ts-att-btn:hover {
  background: var(--ge-bg-sidebar, #f8fafc);
}

.ts-att-btn.active.ts-att-present { background: #dcfce7; color: #166534; border-color: #86efac; }
.ts-att-btn.active.ts-att-absent { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ts-att-btn.active.ts-att-late { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ts-att-btn.active.ts-att-excused { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }

/* ── Inputs ── */
.ts-input {
  padding: 6px 10px;
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  font-size: 13px;
  width: 100%;
  color: var(--ge-text-primary, #1a1a2e);
}

.ts-input-sm {
  width: 80px;
}

.ts-input-md {
  width: 150px;
}

.ts-select-inline {
  min-width: 180px;
  margin-bottom: 0;
}

/* ── Student grade block ── */
.ts-student-grade-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--ge-border-light, #f1f5f9);
}

.ts-student-grade-block:last-child {
  border-bottom: none;
}

.ts-student-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ts-student-email {
  font-size: 13px;
  color: var(--ge-text-secondary, #64748b);
}

.ts-btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.ts-btn-add {
  margin-top: 8px;
  border-style: dashed;
  color: var(--ge-primary, #6c63ff);
  border-color: var(--ge-primary, #6c63ff);
}

.ts-btn-add:hover {
  background: rgba(108, 99, 255, 0.05);
}

.ts-table-compact {
  margin-bottom: 8px;
}

.ts-table-compact th,
.ts-table-compact td {
  padding: 6px 8px;
  font-size: 12px;
}

/* ── New grade form ── */
.ts-new-grade-form {
  margin-top: 8px;
  padding: 12px;
  background: var(--ge-bg-sidebar, #f8fafc);
  border-radius: var(--ge-radius-md, 8px);
  border: 1px dashed var(--ge-border, #e2e8f0);
}

.ts-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

/* ── Modal ── */
.ts-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ts-modal {
  background: var(--ge-bg-card, #fff);
  border-radius: var(--ge-radius-lg, 12px);
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.ts-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ge-border, #e2e8f0);
}

.ts-modal-header h3 {
  font-size: var(--ge-font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
  margin: 0;
}

.ts-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--ge-text-secondary, #64748b);
  padding: 0;
  line-height: 1;
}

.ts-modal-body {
  padding: 24px;
}

.ts-modal-body h4 {
  font-size: var(--ge-font-size-base, 1rem);
  font-weight: 600;
  color: var(--ge-text-primary, #1a1a2e);
  margin-bottom: 12px;
}

/* ── Misc ── */
.ts-loading {
  text-align: center;
  padding: 24px;
  color: var(--ge-text-secondary, #64748b);
}

.ts-empty {
  text-align: center;
  padding: 32px;
  color: var(--ge-text-secondary, #64748b);
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ts-page {
    padding: 16px 12px;
  }
  .ts-tabs {
    overflow-x: auto;
  }
  .ts-table {
    font-size: 12px;
  }
  .ts-select {
    min-width: 100%;
  }
}


/* OfferingScheduleCalendar — compact readonly schedule view used on /browse and OfferingDetailPage */

.osc-card {
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  background: var(--ge-bg-card);
  padding: var(--ge-space-md);
  margin: var(--ge-space-md) 0;
}

.osc-loading,
.osc-error {
  padding: var(--ge-space-lg);
  text-align: center;
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm);
}
.osc-error { color: var(--ge-danger, #c62828); }

.osc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}
.osc-title {
  margin: 0;
  font-size: var(--ge-font-size-md);
  font-weight: 600;
  color: var(--ge-text);
}

.osc-controls { display: flex; align-items: center; gap: 6px; }

.osc-view-toggle {
  display: inline-flex;
  background: var(--ge-bg-subtle);
  border-radius: 999px;
  padding: 2px;
}
.osc-toggle-btn {
  border: 0;
  background: transparent;
  color: var(--ge-text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.osc-toggle-btn.active {
  background: var(--ge-bg-card);
  color: var(--ge-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.osc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.osc-nav-btn,
.osc-today-btn {
  border: 1px solid var(--ge-border);
  background: var(--ge-bg-card);
  color: var(--ge-text);
  border-radius: var(--ge-radius-sm);
  padding: 2px 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.osc-nav-btn { min-width: 26px; }
.osc-today-btn { font-size: 12px; padding: 2px 8px; margin-left: 4px; }
.osc-nav-btn:hover,
.osc-today-btn:hover { background: var(--ge-bg-subtle); }
.osc-nav-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--ge-text);
  min-width: 110px;
  text-align: center;
}

.osc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}
.osc-weekday {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ge-text-muted);
  padding: 2px 0;
}

.osc-grid {
  display: grid;
  gap: 2px;
}
.osc-grid--month { grid-template-columns: repeat(7, 1fr); grid-auto-rows: 40px; }
.osc-grid--week { grid-template-columns: repeat(7, 1fr); grid-auto-rows: 64px; }

.osc-day {
  position: relative;
  border: 1px solid var(--ge-border-light);
  border-radius: var(--ge-radius-sm);
  background: var(--ge-bg-card);
  padding: 2px 3px;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--ge-text);
  overflow: hidden;
}
.osc-day--outside { color: var(--ge-text-muted); background: var(--ge-bg-subtle); opacity: 0.6; }
.osc-day--today { border-color: var(--ge-primary, #4763E4); }
.osc-day--has-events { background: var(--ge-bg-card); }

.osc-day-num { font-weight: 500; line-height: 1; }
.osc-day--today .osc-day-num { color: var(--ge-primary, #4763E4); font-weight: 700; }

.osc-day-events {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
  align-items: center;
}

.osc-dot-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.osc-dot-btn:focus-visible {
  outline: 2px solid var(--ge-primary, #4763E4);
  outline-offset: 1px;
}
.osc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ge-text-muted);
}
.osc-dot--primary { background: var(--ge-primary, #4763E4); }
.osc-dot--override { background: var(--ge-warning, #d97706); }
.osc-dot--cancelled {
  background: var(--ge-danger, #c62828);
  position: relative;
}
.osc-dot--cancelled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  right: -1px;
  height: 1px;
  background: var(--ge-danger, #c62828);
  transform: rotate(-20deg);
}
.osc-dot--past { background: var(--ge-text-muted); opacity: 0.5; }

.osc-more {
  font-size: 10px;
  color: var(--ge-text-muted);
}

.osc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--ge-space-sm);
  font-size: 11px;
  color: var(--ge-text-muted);
}
.osc-legend-item { display: inline-flex; align-items: center; gap: 4px; }

.osc-tip {
  font-size: 12px;
  text-align: left;
  line-height: 1.45;
}
.osc-tip-line { margin: 0; }
.osc-tip-line + .osc-tip-line { margin-top: 2px; }
.osc-tip-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.15);
}
.osc-tip-badge--danger { background: rgba(220, 38, 38, 0.6); }

.osc-see-all {
  display: inline-block;
  margin-top: var(--ge-space-sm);
  font-size: 12px;
  color: var(--ge-primary, #4763E4);
  text-decoration: none;
}
.osc-see-all:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .osc-grid--month { grid-auto-rows: 36px; }
}

/* ── DirectorDashboardPage ────────────────────────────────────────────────── */

.dd-loading {
  min-height: 300px;
}

.dd-error-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--ge-radius-md);
  padding: 16px;
  color: #b91c1c;
  font-size: var(--ge-font-size-sm);
}

.dd-section-title {
  margin-bottom: 16px;
}

.dd-empty-text {
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text-muted);
  margin: 0;
  text-align: center;
  padding: 12px 0;
}

.dd-feed-item-name {
  font-weight: 500;
  color: var(--ge-text);
}

.dd-feed-item-time {
  color: var(--ge-text-muted);
  margin-left: 4px;
}

.dd-completion-bar {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ge-radius-full);
  font-size: var(--ge-font-size-xs);
  font-weight: 500;
}

.dd-upcoming-title {
  font-weight: 500;
  font-size: var(--ge-font-size-sm);
  color: var(--ge-text);
}

.dd-feed-text {
  font-size: var(--ge-font-size-sm);
}

.dd-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ge-radius-full);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.onboarding-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ge-primary, #163B7A) 0%, #1e4e9e 100%);
  padding: 24px;
}

.onboarding-card {
  background: var(--ge-bg-card);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-width: 560px;
  width: 100%;
  padding: 40px;
}

.onboarding-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ge-primary, #163B7A);
  margin-bottom: 8px;
  text-align: center;
}

.onboarding-subtitle {
  color: #6c757d;
  text-align: center;
  margin-bottom: 32px;
  font-size: 0.95rem;
}

.onboarding-field-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 6px;
}

.onboarding-section-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 12px;
}

.onboarding-section-hint {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 12px;
}

.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 24px;
  border: 2px solid #dee2e6;
  background: var(--ge-bg-card);
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.interest-chip:hover {
  border-color: var(--ge-primary, #163B7A);
  background: #f0f4ff;
}

.interest-chip.selected {
  border-color: var(--ge-primary, #163B7A);
  background: var(--ge-primary, #163B7A);
  color: #fff;
}

.interest-chip .chip-icon {
  font-size: 1.1rem;
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 12px;
}

.onboarding-skip {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.2s;
}

.onboarding-skip:hover {
  background: #f8f9fa;
  color: #333;
}

.onboarding-submit {
  background: var(--ge-primary, #163B7A);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.onboarding-submit:hover {
  background: #122f63;
}

.onboarding-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── My Institutions Page ──────────────────────────────────────────────────── */

.mi-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Institution Card ─────────────────────────────────────────────────────── */

.mi-card {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 24px;
  box-shadow: var(--ge-shadow-sm);
}

.mi-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.mi-card-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ge-bg-muted, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mi-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mi-card-logo-fallback {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ge-primary);
}

.mi-card-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mi-card-name {
  font-size: var(--ge-font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--ge-text);
  margin: 0;
}

.mi-card-description {
  color: var(--ge-text-muted);
  font-size: var(--ge-font-size-sm, 0.875rem);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* ── Details ──────────────────────────────────────────────────────────────── */

.mi-card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.mi-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--ge-font-size-sm, 0.875rem);
  color: var(--ge-text);
}

.mi-detail-row a {
  color: var(--ge-primary);
  text-decoration: none;
}

.mi-detail-row a:hover {
  text-decoration: underline;
}

.mi-detail-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* ── Photos ───────────────────────────────────────────────────────────────── */

.mi-card-photos {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.mi-card-photo {
  height: 160px;
  border-radius: var(--ge-radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

/* ── Map ──────────────────────────────────────────────────────────────────── */

.mi-card-map {
  height: 200px;
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

/* ── Contacts ─────────────────────────────────────────────────────────────── */

.mi-card-contacts {
  border-top: 1px solid var(--ge-border);
  padding-top: 16px;
}

.mi-contacts-title {
  font-size: var(--ge-font-size-base, 1rem);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0 0 12px;
}

.mi-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.mi-contact-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--ge-bg-muted, #f8fafc);
  border-radius: var(--ge-radius-md);
  border: 1px solid var(--ge-border);
}

.mi-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ge-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.mi-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mi-contact-name {
  font-weight: 600;
  font-size: var(--ge-font-size-sm, 0.875rem);
  color: var(--ge-text);
}

.mi-contact-detail {
  font-size: var(--ge-font-size-xs, 0.75rem);
  color: var(--ge-text-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-contact-detail:hover {
  color: var(--ge-primary);
  text-decoration: underline;
}

.mi-contact-actions {
  margin-top: 8px;
}

.mi-contact-message-btn {
  width: fit-content;
}

/* ── Role badges ──────────────────────────────────────────────────────────── */

.mi-badge {
  display: inline-block;
  font-size: var(--ge-font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}

.mi-badge.director {
  background: #fef3c7;
  color: #92400e;
}

.mi-badge.admin {
  background: #ede9fe;
  color: #5b21b6;
}

.mi-badge.teacher {
  background: #dbeafe;
  color: #1e40af;
}

.mi-badge.student {
  background: #d1fae5;
  color: #065f46;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .mi-card {
    padding: 16px;
  }

  .mi-contacts-grid {
    grid-template-columns: 1fr;
  }

  .mi-card-photos {
    flex-direction: column;
  }

  .mi-card-photo {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
}

/* ── Consents Page ─────────────────────────────────────────────────────────── */

.cn-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Info banner (non-minor) ──────────────────────────────────────────────── */

.cn-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ge-bg-muted, #f0f9ff);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  color: var(--ge-text);
  font-size: var(--ge-font-size-sm, 0.875rem);
  line-height: 1.6;
}

.cn-info-banner p {
  margin: 0;
}

.cn-info-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Consent card ─────────────────────────────────────────────────────────── */

.cn-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  box-shadow: var(--ge-shadow-sm);
}

.cn-card-left {
  flex-shrink: 0;
  padding-top: 2px;
}

.cn-checkbox {
  width: 22px;
  height: 22px;
  color: var(--ge-text-muted);
  opacity: 0.5;
}

.cn-checkbox svg {
  width: 100%;
  height: 100%;
}

.cn-card-body {
  flex: 1;
  min-width: 0;
}

.cn-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.cn-card-title {
  font-size: var(--ge-font-size-base, 1rem);
  font-weight: 600;
  color: var(--ge-text);
  margin: 0;
}

.cn-badge-soon {
  display: inline-block;
  font-size: var(--ge-font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}

.cn-card-description {
  font-size: var(--ge-font-size-sm, 0.875rem);
  color: var(--ge-text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.cn-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cn-meta-tag {
  font-size: var(--ge-font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
}

.cn-meta-status {
  font-size: var(--ge-font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
}

/* ── Footer note ──────────────────────────────────────────────────────────── */

.cn-footer-note {
  font-size: var(--ge-font-size-xs, 0.75rem);
  color: var(--ge-text-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cn-card {
    padding: 16px;
  }
}


/* Messages page layout */
.msg-container {
  max-width: 1200px;
  margin: 0 auto;
}

.msg-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--ge-radius-md, 8px);
  padding: 12px 16px;
  color: #b91c1c;
  margin-bottom: 16px;
  font-size: var(--ge-font-size-sm, 14px);
}

/* Search bar */
.msg-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.msg-search-input {
  flex: 1;
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  padding: 8px 14px;
  font-size: var(--ge-font-size-sm, 14px);
  outline: none;
  transition: border-color 0.15s;
}

.msg-search-input:focus {
  border-color: var(--ge-primary, #3b82f6);
}

/* Search results */
.msg-search-results {
  background: var(--ge-bg-card);
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-lg, 12px);
  padding: 16px;
  margin-bottom: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.msg-search-results-title {
  font-size: var(--ge-font-size-sm, 14px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ge-text-primary, #1e293b);
}

.msg-search-empty {
  color: var(--ge-text-muted, #94a3b8);
  font-size: var(--ge-font-size-sm, 14px);
}

.msg-search-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-search-item {
  padding: 10px 14px;
  border-radius: var(--ge-radius-md, 8px);
  background: var(--ge-bg-hover, #f8fafc);
  cursor: pointer;
  transition: background 0.15s;
}

.msg-search-item:hover {
  background: var(--ge-bg-selected, #eff6ff);
}

.msg-search-item-sender {
  font-weight: 600;
  font-size: 13px;
  color: var(--ge-text-primary, #1e293b);
}

.msg-search-item-content {
  font-size: 13px;
  color: var(--ge-text-secondary, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-search-item-time {
  font-size: 11px;
  color: var(--ge-text-muted, #94a3b8);
  margin-top: 2px;
}

/* Layout */
.msg-layout {
  display: flex;
  gap: 0;
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-lg, 12px);
  overflow: hidden;
  min-height: 600px;
  background: var(--ge-bg-card);
}

/* Sidebar */
.msg-sidebar {
  width: 340px;
  min-width: 340px;
  border-right: 1px solid var(--ge-border-color, #e2e8f0);
  display: flex;
  flex-direction: column;
}

.msg-sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msg-sidebar-title {
  font-size: var(--ge-font-size-base, 16px);
  font-weight: 600;
  margin: 0;
  color: var(--ge-text-primary, #1e293b);
}

.msg-view-toggle {
  display: flex;
  gap: 4px;
}

.msg-view-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-sm, 6px);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s;
}

.msg-view-btn:hover {
  background: var(--ge-bg-hover, #f8fafc);
}

.msg-view-btn--active {
  background: var(--ge-primary, #3b82f6);
  border-color: var(--ge-primary, #3b82f6);
  color: #fff;
}

/* Filter */
.msg-filter {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
}

.msg-filter-input {
  width: 100%;
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-sm, 6px);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.msg-filter-input:focus {
  border-color: var(--ge-primary, #3b82f6);
}

/* Course group headers */
.msg-course-group-header {
  padding: 8px 20px;
  background: var(--ge-bg-hover, #f8fafc);
  font-size: 12px;
  font-weight: 700;
  color: var(--ge-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
}

.msg-conv-list {
  flex: 1;
  overflow-y: auto;
}

.msg-conv-item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
  cursor: pointer;
  transition: background 0.15s;
}

.msg-conv-item:hover {
  background: var(--ge-bg-hover, #f8fafc);
}

.msg-conv-item--active {
  background: var(--ge-bg-selected, #eff6ff);
  border-left: 3px solid var(--ge-primary, #3b82f6);
}

.msg-conv-item--unread {
  background: #fefce8;
}

.msg-conv-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.msg-conv-subject {
  font-weight: 600;
  font-size: var(--ge-font-size-sm, 14px);
  color: var(--ge-text-primary, #1e293b);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.msg-conv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ge-primary, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.msg-conv-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.msg-conv-participants {
  font-size: 12px;
  color: var(--ge-text-muted, #64748b);
}

.msg-conv-offering {
  font-size: 11px;
  color: var(--ge-text-muted, #64748b);
}

.msg-conv-preview {
  font-size: 13px;
  color: var(--ge-text-secondary, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-conv-time {
  font-size: 11px;
  color: var(--ge-text-muted, #94a3b8);
  margin-top: 4px;
}

/* Thread */
.msg-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-thread-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-thread-subject {
  font-size: var(--ge-font-size-base, 16px);
  font-weight: 600;
  margin: 0;
  color: var(--ge-text-primary, #1e293b);
}

.msg-thread-participants {
  font-size: 13px;
  color: var(--ge-text-muted, #64748b);
}

.msg-thread-offering {
  font-size: 12px;
  color: var(--ge-text-muted, #64748b);
}

/* Messages */
.msg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Date separator */
.msg-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.msg-date-separator span {
  background: var(--ge-bg-hover, #f1f5f9);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ge-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Load more buttons */
.msg-load-more {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.msg-bubble {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: var(--ge-font-size-sm, 14px);
  line-height: 1.5;
}

.msg-bubble--own {
  align-self: flex-end;
  background: var(--ge-primary, #3b82f6);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-bubble--other {
  align-self: flex-start;
  background: var(--ge-bg-hover, #f1f5f9);
  color: var(--ge-text-primary, #1e293b);
  border-bottom-left-radius: 4px;
}

.msg-bubble-sender {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--ge-text-muted, #64748b);
}

.msg-bubble--own .msg-bubble-sender {
  color: rgba(255, 255, 255, 0.8);
}

.msg-bubble-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-bubble-time {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.7;
}

/* Compose */
.msg-compose {
  padding: 16px 24px;
  border-top: 1px solid var(--ge-border-color, #e2e8f0);
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.msg-compose-input {
  flex: 1;
  border: 1px solid var(--ge-border-color, #e2e8f0);
  border-radius: var(--ge-radius-md, 8px);
  padding: 10px 14px;
  font-size: var(--ge-font-size-sm, 14px);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
}

.msg-compose-input:focus {
  border-color: var(--ge-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.msg-compose-btn {
  min-width: 80px;
  height: 40px;
}

/* Empty states */
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ge-text-muted, #94a3b8);
  text-align: center;
}

.msg-empty--full {
  flex: 1;
}

.msg-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* External contact indicators */
.msg-conv-external-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}

.msg-thread-external-notice {
  display: inline-block;
  font-size: var(--ge-font-size-xs, 12px);
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--ge-radius-sm, 4px);
  padding: 2px 8px;
  margin-left: 8px;
}

.msg-external-tag {
  font-size: 11px;
  color: #b45309;
  margin-left: 6px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .msg-layout {
    flex-direction: column;
    min-height: auto;
  }

  .msg-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ge-border-color, #e2e8f0);
    max-height: 300px;
  }

  .msg-bubble {
    max-width: 85%;
  }

  .msg-search-bar {
    flex-wrap: wrap;
  }
}

.sg-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Stats ── */
.sg-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sg-stat-card {
  background: var(--ge-bg-card, #fff);
  border: 1px solid var(--ge-border, #e2e8f0);
  border-radius: var(--ge-radius-lg, 12px);
  padding: 16px 24px;
  text-align: center;
  min-width: 120px;
  flex: 1;
}

.sg-stat-value {
  font-size: var(--ge-font-size-xl, 1.5rem);
  font-weight: 700;
  color: var(--ge-text-primary, #1a1a2e);
}

.sg-stat-label {
  font-size: var(--ge-font-size-xs, 0.75rem);
  color: var(--ge-text-secondary, #64748b);
  margin-top: 4px;
}

.sg-stat-present { border-left: 3px solid var(--ge-success); }
.sg-stat-absent { border-left: 3px solid var(--ge-danger); }

/* ── Panel ── */
.sg-panel {
  background: var(--ge-bg-card, #fff);
  border-radius: var(--ge-radius-lg, 12px);
  border: 1px solid var(--ge-border, #e2e8f0);
  padding: 24px;
}

/* ── Offering group ── */
.sg-offering-group {
  margin-bottom: 24px;
}

.sg-offering-group:last-child {
  margin-bottom: 0;
}

.sg-offering-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.sg-offering-title {
  font-size: var(--ge-font-size-base, 1rem);
  font-weight: 600;
  color: var(--ge-text-primary, #1a1a2e);
  margin: 0;
}

.sg-average {
  font-size: var(--ge-font-size-sm, 0.875rem);
  color: var(--ge-text-secondary, #64748b);
  background: var(--ge-bg-sidebar, #f8fafc);
  padding: 4px 12px;
  border-radius: 8px;
}

/* ── Table ── */
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ge-font-size-sm, 0.875rem);
}

.sg-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--ge-text-secondary, #64748b);
  border-bottom: 2px solid var(--ge-border, #e2e8f0);
  white-space: nowrap;
}

.sg-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ge-border-light, #f1f5f9);
  color: var(--ge-text-primary, #1a1a2e);
}

.sg-table tbody tr:hover {
  background: var(--ge-bg-sidebar, #f8fafc);
}

/* ── Status badges ── */
.sg-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sg-status-present { background: #dcfce7; color: #166534; }
.sg-status-absent { background: #fee2e2; color: #991b1b; }
.sg-status-late { background: #fef3c7; color: #92400e; }
.sg-status-excused { background: #dbeafe; color: #1e40af; }

/* ── Discuss button ── */
.sg-btn-discuss {
  padding: 4px 12px;
  border: 1px solid var(--ge-primary, #6c63ff);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--ge-primary, #6c63ff);
  transition: all 0.15s;
  white-space: nowrap;
}

.sg-btn-discuss:hover {
  background: rgba(108, 99, 255, 0.08);
}

.sg-btn-discuss:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Misc ── */
.sg-loading {
  text-align: center;
  padding: 24px;
  color: var(--ge-text-secondary, #64748b);
}

.sg-empty {
  text-align: center;
  padding: 32px;
  color: var(--ge-text-secondary, #64748b);
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sg-page {
    padding: 16px 12px;
  }
  .sg-stats {
    flex-direction: column;
  }
  .sg-table {
    font-size: 12px;
  }
  .sg-tabs {
    overflow-x: auto;
  }
}


/*# sourceMappingURL=main.f7aeb62658a9c4f5598f.css.map*/