/* =============================================
   PassTrack — Commercial UI
   Palette: Deep Navy + Amber Gold + Clean White
   Type: Syne (display) + DM Sans (body)
   ============================================= */

:root {
  /* Brand */
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #1A3461;
  --ds-navy-light:  #2A4A82;
  --ds-amber:       #F59E0B;
  --ds-amber-light: #FCD34D;
  --ds-amber-dark:  #D97706;

  /* Semantic aliases (keep old names for compatibility) */
  --ds-primary:       var(--ds-navy-mid);
  --ds-primary-light: var(--ds-navy-light);
  --ds-primary-dark:  var(--ds-navy);
  --ds-success:       #059669;
  --ds-success-light: #10B981;
  --ds-warning:       #D97706;
  --ds-warning-light: #F59E0B;
  --ds-danger:        #DC2626;
  --ds-danger-light:  #EF4444;

  /* Surface */
  --ds-bg:           #EEF2F9;
  --ds-surface:      #FFFFFF;
  --ds-surface-hover:#F5F8FC;
  --ds-border:       #E2EAF4;
  --ds-border-mid:   #C8D5E8;

  /* Text */
  --ds-text:        #0C1E3D;
  --ds-text-muted:  #566582;
  --ds-text-subtle: #94A3B8;

  /* Shape */
  --ds-radius:    14px;
  --ds-radius-sm: 9px;
  --ds-radius-xs: 6px;

  /* Shadow */
  --ds-shadow:    0 1px 3px rgba(12,30,61,.05), 0 4px 14px rgba(12,30,61,.07);
  --ds-shadow-md: 0 2px 8px rgba(12,30,61,.08), 0 8px 24px rgba(12,30,61,.09);
  --ds-shadow-lg: 0 8px 32px rgba(12,30,61,.15), 0 2px 8px rgba(12,30,61,.06);

  --ds-header-h: 68px;
  --ds-font-display: 'Syne', system-ui, sans-serif;
  --ds-font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── DARK MODE ──────────────────────────────── */
[data-ds-theme="dark"] {
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #2A4A82;
  --ds-navy-light:  #3B5FA0;
  --ds-bg:          #0f172a;
  --ds-surface:     #1e293b;
  --ds-surface-hover:#263347;
  --ds-border:      #2d3f5a;
  --ds-border-mid:  #3a5070;
  --ds-text:        #e2e8f0;
  --ds-text-muted:  #94a3b8;
  --ds-text-subtle: #64748b;
  --ds-shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4);
  --ds-shadow-md:   0 2px 8px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
}
[data-ds-theme="dark"] .ds-header          { background: #0c1628; border-bottom-color: #1e3052; }
[data-ds-theme="dark"] .ds-auth-card       { background: #1e293b; border-color: #2d3f5a; }
[data-ds-theme="dark"] .ds-btn-outline      { background: transparent; border-color: var(--ds-border-mid); color: var(--ds-text); }
[data-ds-theme="dark"] .ds-btn-outline:hover{ background: var(--ds-surface-hover); }
[data-ds-theme="dark"] input, [data-ds-theme="dark"] select, [data-ds-theme="dark"] textarea {
  background: #263347; border-color: #2d3f5a; color: var(--ds-text);
}
[data-ds-theme="dark"] .ds-card            { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-timeline-content { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-timeline-header  { background: #263347; }
[data-ds-theme="dark"] .ds-skill-group-title { background: #263347; }
[data-ds-theme="dark"] .ds-pupil-hero       { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-hero-stat        { background: #263347; }
[data-ds-theme="dark"] .ds-comment-pupil    { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-comment-header   { background: #263347; }
[data-ds-theme="dark"] .ds-mock-card        { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-mock-card-header { background: #263347; }
[data-ds-theme="dark"] .ds-sidebar-nav a    { color: var(--ds-text-muted); }
[data-ds-theme="dark"] .ds-sidebar-nav a:hover, [data-ds-theme="dark"] .ds-sidebar-nav a.active { background: #263347; color: var(--ds-text); }

/* Dark mode toggle button */
.ds-dark-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--ds-text-muted); padding: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ds-dark-toggle:hover { background: rgba(255,255,255,.1); color: var(--ds-text); }
.ds-dark-toggle svg   { display: block; }

/* ── MOBILE BOTTOM NAV (pupil only) ─────────── */
.ds-pupil-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: 0; margin: 0;
  box-shadow: 0 -2px 12px rgba(12,30,61,.12);
  grid-template-columns: repeat(4, 1fr);
}
.ds-pupil-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px 10px;
  font-size: .65rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ds-text-muted); text-decoration: none;
  gap: 3px; transition: color .15s;
}
.ds-pupil-bottom-nav a svg { flex-shrink: 0; }
.ds-pupil-bottom-nav a.active,
.ds-pupil-bottom-nav a:hover { color: var(--ds-amber); }
@media (max-width: 680px) {
  .ds-pupil-bottom-nav { display: grid; }
  .ds-pupil-wrap       { padding-bottom: 68px; }
}

/* ── CANCEL LESSON ──────────────────────────── */
.ds-upcoming-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-cancel-lesson-btn {
  background: none; border: 1px solid #fca5a5; color: #dc2626;
  border-radius: var(--ds-radius-xs); padding: 4px 10px;
  font-size: .78rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.ds-cancel-lesson-btn:hover { background: #fef2f2; }

/* Cancel confirm modal */
.ds-cancel-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ds-cancel-modal {
  background: var(--ds-surface); border-radius: var(--ds-radius);
  padding: 24px; max-width: 420px; width: 100%;
  box-shadow: var(--ds-shadow-lg);
}
.ds-cancel-modal h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ds-text); }
.ds-cancel-modal p  { margin: 0 0 16px; font-size: .88rem; color: var(--ds-text-muted); }
.ds-cancel-policy-notice {
  background: #fef9c3; border-left: 3px solid #fcd34d;
  padding: 8px 12px; font-size: .82rem; color: #92400e;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0;
  margin-bottom: 14px;
}
.ds-cancel-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── READ RECEIPTS ──────────────────────────── */
.ds-msg-read-tick {
  display: inline-block; margin-left: 5px;
  font-size: .72rem; color: var(--ds-amber);
  transition: opacity .2s;
}
.ds-msg-read-tick.unread { color: var(--ds-text-subtle); }


*, *::before, *::after { box-sizing: border-box; }

.ds-wrap {
  min-height: 100vh;
  padding-bottom: 80px;
  background: var(--ds-bg);
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER ───────────────────────────────────── */
.ds-header {
  background: var(--ds-navy);
  height: var(--ds-header-h);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.3);
}
.ds-header-inner {
  max-width: 1400px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; gap: 16px;
}
.ds-header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.ds-logo-icon {
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; max-width: 40px !important;
  background: linear-gradient(135deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
  border-radius: 10px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.15rem;
  box-shadow: 0 2px 10px rgba(245,158,11,.45);
  flex-shrink: 0;
  overflow: hidden;
}
.ds-brand-name {
  font-family: var(--ds-font-display);
  font-size: 1.05rem; font-weight: 700;
  color: #fff; letter-spacing: -.01em;
}
.ds-brand-role { font-size: .7rem; color: rgba(255,255,255,.4); font-weight: 400; margin-top: 1px; }
.ds-header-actions { display: flex; align-items: center; gap: 10px; }
.ds-user-greeting { color: rgba(255,255,255,.5); font-size: .8rem; white-space: nowrap; }

/* Avatar in header */
.ds-header-avatar-label { position: relative; cursor: pointer; flex-shrink: 0; }
.ds-header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  object-fit: cover; display: block; transition: border-color .2s;
}
.ds-header-avatar-label:hover .ds-header-avatar { border-color: var(--ds-amber); }
.ds-avatar-camera {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  background: var(--ds-amber); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: white;
  border: 1.5px solid var(--ds-navy); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.ds-header-avatar-label:hover .ds-avatar-camera { opacity: 1; }
.ds-header-avatar-label:hover .ds-header-avatar { border-color: var(--ds-amber); }
.ds-avatar-file-input { display: none !important; }
.ds-avatar-remove-btn {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: #ef4444;
  border: 1.5px solid var(--ds-navy);
  border-radius: 50%;
  color: white;
  font-size: .5rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 5;
  opacity: 0; transition: opacity .2s;
}
.ds-header-avatar-wrap:hover .ds-avatar-remove-btn { opacity: 1; }
.ds-avatar-status { font-size: .7rem; color: rgba(255,255,255,.6); white-space: nowrap; }

/* ── NAV TABS ─────────────────────────────────── */
.ds-nav-tabs {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  display: flex; padding: 0 28px;
  overflow-x: auto; scrollbar-width: none; gap: 2px;
}
.ds-nav-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 52px;
  font-size: .82rem; font-weight: 500;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap; transition: color .18s, border-color .18s;
}
.ds-tab:hover { color: var(--ds-navy-mid); }
.ds-tab.active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); font-weight: 600; }
.ds-tab svg { opacity: .6; }
.ds-tab.active svg { opacity: 1; }

/* ── CARDS ────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  border: 1px solid var(--ds-border);
  overflow: visible; margin-bottom: 20px;
  transition: box-shadow .2s, transform .2s;
}
.ds-card-full { width: 100%; }
.ds-card-header {
  padding: 14px 20px;
  font-family: var(--ds-font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; gap: 8px;
  color: var(--ds-navy);
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
}
.ds-card-header button, .ds-card-header .ds-btn { margin-left: auto; }
.ds-card-subtitle {
  margin-left: auto; font-size: .74rem; color: var(--ds-text-muted);
  font-weight: 400; font-family: var(--ds-font-body);
  text-transform: none; letter-spacing: 0;
}

/* ── LAYOUT ───────────────────────────────────── */
.ds-content {
  max-width: 1400px; margin: 0 auto; padding: 28px;
  display: grid; grid-template-columns: 300px 1fr;
  gap: 24px; align-items: start;
}
.ds-content-sidebar, .ds-content-main { min-width: 0; }

/* ── BUTTONS ──────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: .84rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .18s; line-height: 1.2;
  letter-spacing: -.01em; white-space: nowrap;
}
.ds-btn-primary {
  background: var(--ds-navy-mid); color: white;
  box-shadow: 0 2px 8px rgba(26,52,97,.28);
}
.ds-btn-primary:hover {
  background: var(--ds-navy); color: white;
  box-shadow: 0 4px 14px rgba(12,30,61,.35);
  transform: translateY(-1px);
}
.ds-btn-outline {
  background: transparent; color: var(--ds-navy-mid);
  border: 1.5px solid var(--ds-border-mid);
}
.ds-btn-outline:hover { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy-mid); }
.ds-btn-danger {
  background: var(--ds-danger-light); color: white;
  box-shadow: 0 2px 6px rgba(239,68,68,.22);
}
.ds-btn-danger:hover { background: var(--ds-danger); }
.ds-btn-sm  { padding: 5px 12px; font-size: .78rem; border-radius: var(--ds-radius-xs); }
.ds-btn-xs  { padding: 3px 9px;  font-size: .72rem; border-radius: 5px; }
.ds-btn-full { width: 100%; justify-content: center; }
.ds-btn-link { background: none; border: none; cursor: pointer; font-size: .8rem; color: var(--ds-navy-mid); padding: 0 4px; font-weight: 500; }
.ds-btn-link.ds-danger { color: var(--ds-danger); }
.ds-logout-btn {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14); font-size: .79rem; padding: 7px 14px;
}
.ds-logout-btn:hover { background: rgba(255,255,255,.16); color: white; transform: none; box-shadow: none; }

/* ── FORMS ────────────────────────────────────── */
.ds-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ds-form-group { display: flex; flex-direction: column; gap: 5px; }
.ds-form-group label {
  font-size: .74rem; font-weight: 700; color: var(--ds-text-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.ds-form-group input, .ds-form-group textarea, .ds-form-group select {
  padding: 10px 14px; border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body); font-size: .875rem;
  color: var(--ds-text); outline: none;
  transition: border-color .18s, box-shadow .18s;
  background: var(--ds-surface); width: 100%;
}
.ds-form-group input:focus, .ds-form-group textarea:focus, .ds-form-group select:focus {
  border-color: var(--ds-navy-light);
  box-shadow: 0 0 0 3px rgba(42,74,130,.1);
}
.ds-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ds-form-actions { display: flex; gap: 12px; padding-top: 4px; }

/* ── AUTH ─────────────────────────────────────── */
.ds-auth-wrap {
  min-height: 100vh;
  background: linear-gradient(150deg, #080F1E 0%, #0C1E3D 50%, #122040 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
}
.ds-auth-wrap::before {
  content: ''; position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 65%);
  top: -150px; right: -100px; pointer-events: none;
}
.ds-auth-wrap::after {
  content: ''; position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,74,130,.25) 0%, transparent 65%);
  bottom: -100px; left: -100px; pointer-events: none;
}
.ds-auth-card {
  background: white; border-radius: 22px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  overflow: hidden; position: relative; z-index: 1;
}
.ds-auth-logo {
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  padding: 40px 32px 32px; text-align: center; color: white;
  position: relative; overflow: hidden;
}
.ds-auth-logo::after {
  content: ''; position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(245,158,11,.08); bottom: -90px; right: -70px;
}
.ds-auth-wordmark {
  font-family: 'Syne', Georgia, serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.ds-auth-word-pass  { color: #ffffff; }
.ds-auth-word-track { color: #F59E0B; }
.ds-auth-logo p {
  margin: 0; font-size: .875rem; color: rgba(255,255,255,.6);
  position: relative; z-index: 1;
}
.ds-form-links { text-align: center; font-size: .85rem; }
.ds-form-links a { color: var(--ds-navy-mid); text-decoration: none; font-weight: 600; }
.ds-form-links a:hover { text-decoration: underline; }

/* ── NOTICES ──────────────────────────────────── */
.ds-notice { padding: 12px 16px; border-radius: var(--ds-radius-sm); font-size: .875rem; margin-bottom: 16px; }
.ds-notice-success { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.ds-notice-error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* ── PUPIL LIST ───────────────────────────────── */
.ds-pupil-list { padding: 4px 0; }
.ds-pupil-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; text-decoration: none; color: var(--ds-text);
  transition: background .15s; border-left: 3px solid transparent;
}
.ds-pupil-item:hover { background: var(--ds-surface-hover); }
.ds-pupil-item.active {
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  border-left-color: var(--ds-amber);
}
.ds-pupil-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--ds-navy-mid) 0%, var(--ds-navy-light) 100%);
  color: white; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-weight: 700; font-size: .85rem;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-pupil-name { font-weight: 600; font-size: .86rem; }
.ds-pupil-meta { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── TRAFFIC LIGHTS ───────────────────────────── */
.ds-traffic-light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-green { background: var(--ds-success-light); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.tl-amber { background: var(--ds-warning-light);  box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.tl-red   { background: var(--ds-danger-light);   box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.tl-grey  { background: var(--ds-text-subtle); }

/* ── PUPIL DETAIL PANEL ───────────────────────── */
.ds-pupil-detail-header {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
  border-bottom: 1px solid var(--ds-border);
}
.ds-pupil-detail-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  color: white; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-size: 1.35rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ds-pupil-detail-info { flex: 1; min-width: 180px; }
.ds-pupil-detail-info h2 {
  font-family: var(--ds-font-display); margin: 0 0 5px;
  font-size: 1.15rem; letter-spacing: -.02em;
}
.ds-pupil-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--ds-text-muted); }
.ds-pupil-detail-badges { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ds-pupil-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ds-badge {
  display: inline-flex; align-items: center;
  background: var(--ds-surface-hover); color: var(--ds-text-muted);
  border: 1px solid var(--ds-border); padding: 3px 10px;
  border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.ds-badge-blue { background: rgba(42,74,130,.08); color: var(--ds-navy-mid); border-color: rgba(42,74,130,.2); }

/* ══════════════════════════════════════════════════════════════
   PUPIL DETAIL PANEL — unified layout
   ══════════════════════════════════════════════════════════════ */

/* ── Main 2-col grid (sidebar | lessons) ─────── */
.ds-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-left,
.ds-detail-right { min-width: 0; }

/* Sidebar cards stack with uniform gap */
.ds-detail-left { display: flex; flex-direction: column; gap: 16px; }

/* Lessons card stretches to fill right column */
.ds-detail-right .ds-card { height: 100%; }

/* ── Bottom 3-col strip (charts | notes | messages) */
.ds-detail-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-bottom > .ds-card { min-width: 0; }

/* ── Mock tests full-width card ──────────────── */
.ds-mock-card-full {
  margin-top: 16px;
}
.ds-mock-outer {
  padding: 0;
}

/* ── Pending requests banner ─────────────────── */
.ds-pending-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--ds-radius);
  padding: 12px 18px;
  margin-top: 16px;
}
.ds-pending-banner-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.ds-pending-rows { display: flex; flex-direction: column; gap: 8px; }
.ds-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--ds-radius-sm);
  border: 1px solid #fde68a;
}
.ds-req-info { font-size: .83rem; color: var(--ds-navy); flex: 1; }
.ds-req-note { display: block; color: var(--ds-text-muted); font-size: .78rem; margin-top: 2px; }
.ds-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Messages card ───────────────────────────── */
.ds-messages-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-msg-header-name {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 500;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
}
.ds-msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  max-height: 320px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-msg-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-top: none;
}
.ds-msg-compose-input {
  flex: 1;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: .875rem;
  font-family: var(--ds-font-body);
  resize: none;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s;
  background: var(--ds-surface-hover);
}
.ds-msg-compose-input:focus { border-color: var(--ds-navy); background: #fff; }
.ds-msg-send-btn {
  width: 36px; height: 36px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Notes card ──────────────────────────────── */
.ds-notes-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-notes-private-badge {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 7px;
}
.ds-notes-log {
  flex: 1;
  overflow-y: auto;
  max-height: 260px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-note-entry {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .4s;
}
.ds-note-entry:last-child { border-bottom: none; }
.ds-note-entry.ds-note-new { background: #f0fdf4; }
.ds-note-text {
  font-size: .875rem;
  color: var(--ds-text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.ds-note-ts {
  font-size: .7rem;
  color: var(--ds-text-muted);
  margin-top: 4px;
}
.ds-notes-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-notes-compose {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-notes-input {
  width: 100%;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  resize: none;
  box-sizing: border-box;
}
.ds-notes-add-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Responsive breakpoints ──────────────────── */
@media (max-width: 1100px) {
  .ds-detail-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ds-detail-grid   { grid-template-columns: 1fr; }
  .ds-detail-bottom { grid-template-columns: 1fr; }
}



/* ── LESSONS ──────────────────────────────────── */
.ds-lesson-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--ds-border);
  transition: background .15s;
}
.ds-lesson-row:last-child { border-bottom: none; }
.ds-lesson-row:hover { background: var(--ds-surface-hover); }
.ds-lesson-date { text-align: center; min-width: 46px; }
.ds-lesson-day { font-family: var(--ds-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--ds-navy); }
.ds-lesson-month { font-size: .65rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ds-lesson-info { flex: 1; min-width: 0; }
.ds-lesson-title { font-weight: 600; font-size: .875rem; }
.ds-lesson-preview { font-size: .75rem; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; margin-top: 2px; }
.ds-lesson-grade { font-size: .875rem; font-weight: 700; color: var(--ds-navy-mid); min-width: 40px; }
.ds-lesson-actions { display: flex; gap: 6px; }

.ds-status-badge { padding: 3px 10px; border-radius: 20px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-scheduled { background: rgba(42,74,130,.1);  color: var(--ds-navy-mid); }
.status-completed  { background: rgba(5,150,105,.1);  color: var(--ds-success); }
.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* ── COACHING ─────────────────────────────────── */
.ds-coaching-card .ds-card-header { color: #6D28D9; }
.ds-suggestion { padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.ds-suggestion:last-child { border-bottom: none; }
.ds-suggestion-skill { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ds-suggestion-skill strong { font-size: .875rem; font-weight: 600; }
.ds-suggestion p { margin: 0; font-size: .8rem; color: var(--ds-text-muted); line-height: 1.5; }
.ds-coaching-inline { background: #F5F3FF; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.ds-coaching-inline .ds-suggestion-inline { margin-bottom: 8px; font-size: .8rem; }

.ds-grade-mini { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 700; }
.grade-0 { background: #F1F5F9; color: #64748B; }
.grade-1 { background: #FEF2F2; color: #DC2626; }
.grade-2 { background: #FEF9C3; color: #854D0E; }
.grade-3 { background: #FFF7ED; color: #C2410C; }
.grade-4 { background: #F0FDF4; color: #16A34A; }
.grade-5 { background: #DCFCE7; color: #15803D; }

/* ── READINESS ────────────────────────────────── */
.ds-readiness-card .ds-card-header { color: #0891B2; }
.ds-readiness-body { padding: 16px; }
.ds-readiness-ready { display: flex; align-items: flex-start; gap: 12px; }
.ds-readiness-icon { width: 40px; height: 40px; background: var(--ds-success-light); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ds-readiness-label { font-size: .7rem; text-transform: uppercase; color: var(--ds-text-muted); font-weight: 700; letter-spacing: .06em; }
.ds-readiness-dates { font-family: var(--ds-font-display); font-size: 1rem; font-weight: 700; color: var(--ds-navy); margin: 4px 0; }
.ds-readiness-weeks { font-size: .8rem; color: var(--ds-text-muted); margin-bottom: 10px; }
.ds-readiness-bar-track { background: #E5E7EB; border-radius: 20px; height: 7px; overflow: hidden; }
.ds-readiness-bar { background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-success-light)); height: 100%; border-radius: 20px; transition: width 1s ease; }
.ds-readiness-bar-hours { background: linear-gradient(90deg, var(--ds-amber), var(--ds-success-light)); }
.ds-readiness-basis { font-size: .72rem; color: var(--ds-text-muted); margin-top: 10px; font-style: italic; }
.ds-readiness-unknown { font-size: .875rem; color: var(--ds-text-muted); padding: 4px 0; }
.ds-readiness-disclaimer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-border); font-size: .72rem; color: var(--ds-text-subtle); line-height: 1.5; }

/* ── SKILLS ───────────────────────────────────── */
.ds-skills-section { padding: 0 20px 16px; }
.ds-skills-section h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ds-text-muted); margin: 0 0 12px; display: flex; align-items: center; font-weight: 700; }
.ds-skill-category { margin-bottom: 16px; }
.ds-skill-cat-header {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-navy-mid);
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  padding: 7px 8px 7px 12px; margin-bottom: 8px;
  border-left: 3px solid var(--ds-amber); border-radius: 0 4px 4px 0;
}
.ds-skill-grid { display: flex; flex-direction: column; gap: 8px; }
.ds-skill-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-skill-name { font-size: .8rem; min-width: 200px; flex: 1; }
.ds-grade-selector { display: flex; gap: 4px; flex-wrap: wrap; }
.ds-grade-opt { cursor: pointer; }
.ds-grade-opt input { display: none; }
.ds-grade-opt span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--ds-radius-xs);
  background: #F1F5F9; color: var(--ds-text-muted);
  font-size: .78rem; font-weight: 700; transition: all .15s; border: 2px solid transparent;
}
.ds-grade-opt input:checked + span { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy); box-shadow: 0 2px 6px rgba(26,52,97,.3); }
.ds-grade-opt:hover span { background: #E2E8F0; }
.ds-grade-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  border: 1.5px solid transparent;
}
.ds-grade-badge.grade-0 { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.ds-grade-badge.grade-1 { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ds-grade-badge.grade-2 { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.ds-grade-badge.grade-3 { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.ds-grade-badge.grade-4 { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.ds-grade-badge.grade-5 { background:#ecfdf5; color:#065f46; border-color:#6ee7b7; }

/* ── SKILL MANAGEMENT ─────────────────────────── */
.ds-skills-manage { max-width: 1400px; margin: 0 auto; padding: 28px; }
.ds-skill-cat-section { padding: 0 0 16px; }
.ds-skill-cat-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(26,52,97,.06) 0%, transparent 100%);
  border-left: 3px solid var(--ds-amber);
  font-family: var(--ds-font-display); font-weight: 700; font-size: .88rem;
}
.ds-skill-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--ds-border); transition: background .15s; }
.ds-skill-row:hover { background: var(--ds-surface-hover); }
.ds-skill-row:last-child { border-bottom: none; }
.ds-skill-row-name { flex: 1; font-size: .875rem; font-weight: 500; }
.ds-skill-row-desc { font-size: .78rem; color: var(--ds-text-muted); }
.ds-skill-row-actions { display: flex; gap: 6px; }
.ds-meta { font-size: .78rem; color: var(--ds-text-muted); }

/* ── WELCOME CARD ─────────────────────────────── */
.ds-welcome-card { padding: 48px 40px; text-align: center; }
.ds-welcome-icon { font-size: 3rem; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.ds-welcome-icon svg { color: var(--ds-navy-mid); opacity: .7; }
.ds-welcome-card h2 { font-family: var(--ds-font-display); font-size: 1.5rem; color: var(--ds-navy); margin: 0 0 8px; letter-spacing: -.02em; }
.ds-welcome-card p { color: var(--ds-text-muted); font-size: .9rem; }
.ds-stats-row { display: flex; justify-content: center; gap: 48px; margin-top: 28px; }
.ds-stat-item { text-align: center; }
.ds-stat-num { font-family: var(--ds-font-display); font-size: 2.6rem; font-weight: 800; color: var(--ds-navy-mid); line-height: 1; }
.ds-stat-label { font-size: .75rem; color: var(--ds-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* ── PUPIL HERO ───────────────────────────────── */

/* ── PUPIL HERO (merged identity + stats) ─────── */
.ds-pupil-hero {
  background: linear-gradient(135deg, var(--ds-navy) 0%, #183566 55%, #1E3F78 100%);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.ds-pupil-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ds-hero-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.ds-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ds-hero-avatar-label {
  display: block !important;
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  cursor: pointer;
  position: relative;
  overflow: hidden !important;
  border: 3px solid rgba(245,158,11,.55) !important;
  transition: border-color .2s;
  flex-shrink: 0 !important;
}
.ds-hero-avatar-label:hover { border-color: var(--ds-amber) !important; }
.ds-hero-avatar-img {
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
.ds-hero-avatar-initial {
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--ds-amber) !important;
  font-family: var(--ds-font-display);
  font-size: 1.5rem !important; font-weight: 700 !important; color: white !important;
}
.ds-hero-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.ds-hero-avatar-label:hover .ds-hero-avatar-overlay { opacity: 1; }
.ds-hero-avatar-remove {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #ef4444;
  border: 2px solid #0C1E3D;
  border-radius: 50%;
  color: white;
  font-size: .55rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 10;
}
.ds-hero-avatar-status {
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  white-space: nowrap;
  color: rgba(255,255,255,.8);
}
.ds-hero-identity-text { position: relative; z-index: 1; }
.ds-hero-name {
  font-family: var(--ds-font-display);
  font-size: 1.45rem; font-weight: 700;
  color: white;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ds-hero-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px;
  font-size: .82rem; color: rgba(255,255,255,.65);
}
.ds-hero-badge {
  background: rgba(245,158,11,.2);
  border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 100px;
}
.ds-hero-meta-sep { opacity: .35; }
/* ds-hero-remove-photo removed */
.ds-hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.ds-stat-card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  min-width: 88px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2) !important;
  transition: box-shadow .2s, transform .15s;
}
.ds-stat-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
  transform: translateY(-1px);
}
.ds-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.65rem !important; font-weight: 800 !important;
  line-height: 1 !important;
  color: #0C1E3D !important;
  opacity: 1 !important;
}
.ds-stat-label {
  font-size: .66rem !important;
  color: #566582 !important;
  margin-top: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.ds-stat-progress { min-width: 110px; }
.ds-stat-progress-bar-track {
  height: 4px;
  background: #E2EAF4;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.ds-stat-progress-bar {
  height: 100%;
  background: var(--ds-amber);
  border-radius: 2px;
  transition: width .6s ease;
}
@media (max-width: 768px) {
  .ds-pupil-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .ds-hero-stats { width: 100%; }
  .ds-stat-card { flex: 1; min-width: 70px; padding: 12px 10px; }
  .ds-stat-value { font-size: 1.3rem; }
}


.ds-pupil-identity-banner { display: flex !important; align-items: center !important; }

/* Fix: theme p margin inside cards */
.ds-card p { margin: 0 !important; }
.ds-card h2, .ds-card h3, .ds-card h4 { margin: 0 !important; padding: 0 !important; }

/* Fix: delete/danger button */
.ds-wrap button[style*="color:#dc2626"],
.ds-wrap button[style*="color:var(--ds-danger)"] {
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--ds-danger) !important;
  padding: 4px 8px !important;
}
.ds-wrap button[style*="margin-left:auto"] {
  margin-left: auto !important;
}

/* Fix: the lesson status text (not using status-badge class) */
.ds-lesson-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-lesson-status.status-scheduled { background: rgba(42,74,130,.1); color: var(--ds-navy-mid); }
.ds-lesson-status.status-completed  { background: rgba(5,150,105,.1); color: var(--ds-success); }
.ds-lesson-status.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* Fix: test card purple header */
.ds-card-header-purple { color: var(--ds-navy-mid) !important; }

/* Fix: text-subtle class */
.ds-text-subtle { color: var(--ds-text-subtle) !important; font-size: .875rem !important; }

/* Responsive layout fixes with !important */
@media (max-width: 1024px) {
  .ds-content      { grid-template-columns: 260px 1fr !important; }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-grid   { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
}
@media (max-width: 900px) {
  .ds-content      { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ds-content      { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-grid       { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-hero   { flex-direction: column !important; padding: 16px !important; }
  .ds-hero-stats   { width: 100% !important; justify-content: space-between !important; }
  .ds-stat-card    { flex: 1 !important; min-width: 0 !important; padding: 12px 10px !important; }
}

/* ── FIX: WordPress themes set svg/img { max-width: 100% }
   which blows up our header icon to full width.
   Pin every SVG inside our wrap to its intrinsic size. ── */
.ds-wrap svg {
  max-width: none !important;
  flex-shrink: 0;
}
.ds-logo-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.ds-header-logo-img {
  max-height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* ── FIX: Break .ds-wrap out of the theme's narrow content
   column so it fills the full viewport width. ── */


/* ── CONSISTENT TAB LAYOUT ─────────────────────
   Every tab now uses ds-tab-content as its outer
   wrapper — same max-width, padding, and margin
   as ds-content and ds-calendar-wrap.
   ─────────────────────────────────────────────── */
.ds-tab-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;
}
.ds-tab-content-narrow {
  max-width: 860px;
}
.ds-tab-content-pupil {
  padding: 0;          /* pupil grid has its own padding via ds-pupil-grid */
}

/* Ensure ds-content, ds-calendar-wrap, ds-pupil-grid all share the same rhythm */
.ds-content,
.ds-calendar-wrap,
.ds-skills-manage {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
}
.ds-pupil-grid {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ── PUPIL LOWER GRID (Request + Gaps / Messages) ── */
.ds-pupil-lower-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 28px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ds-pupil-lower-left,
.ds-pupil-lower-right { display: flex; flex-direction: column; gap: 16px; }

.ds-pupil-messages-card { display: flex; flex-direction: column; }
.ds-pupil-msg-thread   { max-height: 340px; overflow-y: auto; min-height: 80px; }
.ds-pupil-msg-compose  { padding: 12px 16px; display: flex; gap: 8px; border-top: 1px solid var(--ds-border); }

.ds-pupil-mock-card    { max-width: 1400px; margin: 0 auto 28px; width: calc(100% - 56px); }
.ds-pupil-mock-list    { padding: 4px 0; }

.ds-gap-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-gap-datetime { font-weight: 600; font-size: .95rem; color: #111; }
.ds-gap-meta     { font-size: .84rem; color: var(--ds-text-muted); margin-top: 2px; }

.ds-mock-expand-btn { margin-left: auto; flex-shrink: 0; }
.ds-mock-detail-panel { padding: 0 16px 12px; }

.ds-input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .9em; box-sizing: border-box;
}
.ds-section-label {
  font-size: .78em; font-weight: 700;
  letter-spacing: .05em; color: #9ca3af;
}


/* ── MESSAGING LAYOUT ──────────────────────────
   Replace the inline grid style.
   ─────────────────────────────────────────────── */
.ds-msg-layout {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 16px !important;
  height: 580px !important;
  align-items: stretch;
}
.ds-msg-sidebar {
  overflow-y: auto;
  min-width: 0;
  height: 100%;
}
/* Chat panel card must be flex column so inner flex:1 works */
.ds-msg-layout > .ds-card:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ── CARD CONSISTENCY ──────────────────────────
   Cards should never stretch beyond their grid
   cell. Remove any rogue margin-tops.
   ─────────────────────────────────────────────── */
.ds-tab-content > .ds-card,
.ds-tab-content-narrow > .ds-card {
  margin-bottom: 20px;
}
.ds-tab-content > .ds-card:last-child,
.ds-tab-content-narrow > .ds-card:last-child {
  margin-bottom: 0;
}

/* Remove stray margin-top from inline style="margin-top:16px" cards */
.ds-card[style*="margin-top"] {
  margin-top: 20px !important;
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-tab-content,
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 18px !important; }
  .ds-msg-layout      { grid-template-columns: 200px minmax(0,1fr) !important; }
}
@media (max-width: 768px) {
  .ds-tab-content,
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 14px !important; }
  .ds-msg-layout      { grid-template-columns: 1fr !important; height: auto !important; }
  .ds-msg-sidebar     { height: 200px !important; }
  .ds-pupil-grid      { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
}

/* ── BULK SCHEDULE MODAL ───────────────────────── */
.ds-day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ds-day-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--ds-border);
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.ds-day-option:has(input:checked) {
  border-color: var(--ds-navy-mid);
  background: rgba(26,52,97,.08);
  color: var(--ds-navy-mid);
}
.ds-day-option input { width: 0; height: 0; opacity: 0; position: absolute; }
.ds-bulk-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .9rem;
}
.ds-bulk-dates-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-bulk-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .84rem;
  cursor: pointer;
  transition: background .1s;
}
.ds-bulk-date-row:hover { background: var(--ds-surface-hover); }
.ds-bulk-date-row:has(input:checked) { color: var(--ds-text); }
.ds-bulk-date-row:has(input:not(:checked)) { color: var(--ds-text-subtle); text-decoration: line-through; }
.ds-bulk-date-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--ds-navy-mid); }

/* ── PROGRESS CHARTS ──────────────────────────── */
.ds-progress-chart-card {}

/* ── Chart stats strip ───────────────────────────── */
.ds-chart-stats-wrap { min-height: 0; }
.ds-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  background: var(--ds-surface-hover);
  border-radius: var(--ds-radius-sm);
  margin-bottom: 4px;
}
.ds-chart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.ds-chart-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ds-navy);
  font-family: var(--ds-font-head);
  line-height: 1.2;
}
.ds-chart-stat-lbl {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-muted);
  font-weight: 600;
  margin-top: 1px;
}
.ds-chart-stat-best { min-width: 0; }
.ds-chart-stat-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-badge-green { background: #d1fae5; color: #065f46; }
.ds-badge-red   { background: #fee2e2; color: #991b1b; }

.ds-chart-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-text-muted);
  margin-bottom: 8px;
}
.ds-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ds-chart-col {}
.ds-btn-ghost {
  background: none;
  border: none;
  color: var(--ds-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: .75rem;
}
.ds-btn-ghost:hover { color: var(--ds-navy-mid); }

@media (max-width: 768px) {
  .ds-chart-row { grid-template-columns: 1fr; }
  .ds-day-picker { gap: 4px; }
}

/* ── TEST BOOKED SIDEBAR CARD ─────────────────── */
.ds-test-booked-body {
  padding: 14px 18px;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-navy);
  line-height: 1.3;
}
.ds-test-booked-centre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 5px;
}
.ds-test-countdown {
  margin-top: 10px;
  display: inline-block;
  background: var(--ds-surface-hover);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .82rem;
  color: var(--ds-text);
}
.ds-test-countdown.ds-test-soon {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* ── CARD CONSISTENCY POLISH ──────────────────── */
.ds-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  margin-bottom: 20px;
}
.ds-card-header {
  padding: 13px 18px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--ds-surface) !important;
}

/* Upcoming lessons */
.ds-upcoming-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-upcoming-item:last-child { border-bottom: none !important; }
.ds-upcoming-date-block {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1 !important;
}
.ds-upcoming-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-upcoming-time {
  font-weight: 600 !important;
  font-size: .92rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-meta {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* Focus areas card */
.ds-improve-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-improve-item:last-child { border-bottom: none !important; }
.ds-improve-rank {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-improve-name {
  flex: 1 !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
}
.ds-improve-score {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Lesson timeline */
/* ══════════════════════════════════════════════════════════════
   PUPIL TIMELINE — redesigned v2.1
   ══════════════════════════════════════════════════════════════ */

.ds-timeline {
  padding: 4px 0 0 !important;
  position: relative !important;
}

/* Vertical connecting line */
.ds-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--ds-border-mid) 0%, var(--ds-border) 100%) !important;
  z-index: 0 !important;
}

.ds-timeline-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 18px 18px 46px !important;
  position: relative !important;
  border-bottom: none !important;
}
.ds-timeline-item:last-child { padding-bottom: 8px !important; }

/* Circle dot on the line */
.ds-timeline-dot {
  position: absolute !important;
  left: 11px !important;
  top: 14px !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: white !important;
  border: 3px solid var(--ds-border-mid) !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px var(--ds-bg) !important;
}
.ds-timeline-item.status-completed .ds-timeline-dot {
  background: #22c55e !important; border-color: #16a34a !important;
}
.ds-timeline-item.status-cancelled .ds-timeline-dot {
  background: #ef4444 !important; border-color: #dc2626 !important;
}
.ds-timeline-item.status-scheduled .ds-timeline-dot {
  background: var(--ds-amber) !important; border-color: #d97706 !important;
}

/* The lesson card */
.ds-timeline-content {
  flex: 1 !important;
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  overflow: hidden !important;
}

/* Card header row */
.ds-timeline-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  background: #f8fafd !important;
}

.ds-timeline-date {
  font-family: var(--ds-font-display) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Status badge */
.ds-status-badge {
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  flex-shrink: 0 !important;
}
.ds-status-badge.status-completed { background:#dcfce7; color:#166534; }
.ds-status-badge.status-cancelled { background:#fee2e2; color:#991b1b; }
.ds-status-badge.status-scheduled { background:#fef3c7; color:#92400e; }

/* Overall grade chip */
.ds-grade-overall {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  background: var(--ds-navy) !important;
  color: white !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}

/* Instructor note callout */
.ds-lesson-notes {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 16px 4px !important;
  padding: 10px 14px !important;
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  font-size: .83rem !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}
.ds-lesson-notes::before {
  content: '📝' !important;
  flex-shrink: 0 !important;
  font-size: .9rem !important;
  margin-top: 1px !important;
}
.ds-lesson-notes strong { display:none !important; } /* hide "Lesson notes:" label, icon replaces it */

/* Instructor comments */
.ds-instr-comments { padding: 12px 16px 4px !important; }
.ds-comment { font-size: .83rem !important; line-height: 1.5 !important; }
.ds-comment-instructor {
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 3px !important;
}

/* "Skills & Scores" expand button */
.ds-more-info-btn {
  margin: 10px 16px 12px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* ── Skills & Scores expandable panel ──────────────── */
.ds-lesson-detail {
  border-top: 1px solid var(--ds-border) !important;
  padding: 0 !important;
  background: #fafbfd !important;
  animation: ds-expand .18s ease !important;
}
@keyframes ds-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Category block */
.ds-skill-group {
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-group:last-child { border-bottom: none !important; }

.ds-skill-group-title {
  padding: 7px 16px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  background: #f0f4fb !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ds-skill-group-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important; height: 14px !important;
  background: var(--ds-amber) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Individual skill row */
.ds-skill-score-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .12s !important;
}
.ds-skill-score-row:last-child { border-bottom: none !important; }
.ds-skill-score-row:hover { background: #f0f4fb !important; }

.ds-skill-score-name {
  font-size: .83rem !important;
  color: #374151 !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-weight: 500 !important;
}

/* Grade pip track (5 dots) — injected via PHP helper */
.ds-skill-score-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.ds-grade-pips {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--ds-border) !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip.filled-1 { background: #ef4444 !important; }
.ds-grade-pip.filled-2 { background: #f97316 !important; }
.ds-grade-pip.filled-3 { background: #f59e0b !important; }
.ds-grade-pip.filled-4 { background: #22c55e !important; }
.ds-grade-pip.filled-5 { background: #10b981 !important; }

/* No skills recorded */
.ds-lesson-detail .ds-meta { padding: 14px 16px !important; }

/* Pupil add-note area below skills */
.ds-pupil-comments { padding: 0 16px 14px !important; }

/* Pupil own notes on a lesson */
.ds-comment-pupil {
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  margin-top: 4px !important;
}
.ds-comment-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: #f8fafd !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  flex: 1 !important;
}
.ds-comment-time {
  font-size: .7rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}
.ds-comment-body {
  padding: 9px 12px !important;
  font-size: .84rem !important;
  color: #374151 !important;
  line-height: 1.55 !important;
}

.ds-add-comment { margin-top: 10px !important; }

.ds-comment-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-xs) !important;
  font-size: .83rem !important;
  font-family: var(--ds-font-body) !important;
  resize: vertical !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}
.ds-comment-input:focus {
  outline: 2px solid var(--ds-navy-light, #3b5a8f) !important;
  border-color: var(--ds-navy-light, #3b5a8f) !important;
}



/* ── INSTRUCTOR DASHBOARD CARD POLISH ─────────── */

/* Card header gets top-radius to match parent card without overflow:hidden */
.ds-card > .ds-card-header:first-child {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}
/* First non-header child gets no extra top rounding needed */
.ds-card > *:last-child:not(.ds-card-header) {
  border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}

/* Instructor welcome card stats */
.ds-stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 48px !important;
  margin-top: 28px !important;
}
.ds-stat-item { text-align: center !important; }
.ds-stat-num {
  font-family: var(--ds-font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
  line-height: 1 !important;
}

/* Lesson rows in instructor panel */
.ds-lesson-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .15s !important;
  cursor: pointer !important;
}
.ds-lesson-row:last-child { border-bottom: none !important; }
.ds-lesson-row:hover { background: var(--ds-surface-hover) !important; }
.ds-lesson-date {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-lesson-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: white !important;
}
.ds-lesson-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-lesson-info { flex: 1 !important; min-width: 0 !important; }
.ds-lesson-title { font-weight: 600 !important; font-size: .88rem !important; color: var(--ds-navy) !important; }
.ds-lesson-preview {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

/* Pupil detail header */
.ds-pupil-detail-header {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important;
  overflow: hidden !important;
}

/* Pupil list in sidebar */
.ds-pupil-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-pupil-item:last-child { border-bottom: none !important; }
.ds-pupil-item:hover { background: var(--ds-surface-hover) !important; }
.ds-pupil-item.active { background: rgba(12,30,61,.06) !important; }
.ds-pupil-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-pupil-name { font-size: .88rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-pupil-meta { font-size: .72rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* Instruction sidebar card - pupils list */
.ds-pupil-list { padding: 0 !important; }
.ds-content-sidebar .ds-card { margin-bottom: 0 !important; }

/* Suggestion card items */
.ds-suggestion {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-suggestion:last-child { border-bottom: none !important; }
.ds-suggestion-skill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
  font-size: .88rem !important;
}
.ds-suggestion p { font-size: .8rem !important; color: var(--ds-text-muted) !important; margin: 0 !important; }

/* Curriculum card */
.ds-curriculum-picker { padding: 14px 18px !important; }
.ds-curriculum-current {
  font-size: .85rem !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.ds-curriculum-change {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}


/* ══════════════════════════════════════════════
   UPCOMING TESTS CARD (instructor dashboard)
   ══════════════════════════════════════════════ */
.ds-upcoming-test-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-upcoming-test-row:last-child { border-bottom: none !important; }
.ds-upcoming-test-row:hover { background: var(--ds-surface-hover) !important; }
.ds-upcoming-test-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-info { flex: 1 !important; min-width: 0 !important; }
.ds-upcoming-test-name {
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-test-detail {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}
.ds-upcoming-test-days {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-days.ds-test-soon {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* ══════════════════════════════════════════════
   CARD BODY PADDING — universal inner padding
   so cards don't need inline styles
   ══════════════════════════════════════════════ */
.ds-card-body {
  padding: 16px 18px;
}
/* Standardise test booking body (already defined earlier but add safety) */
.ds-test-booking-body { padding: 14px 18px !important; }

/* ══════════════════════════════════════════════
   iMESSAGE-STYLE CHAT BUBBLES
   ══════════════════════════════════════════════ */

/* Chat panel background */
#ds-chat-messages,
div[id^="msg-thread-"] {
  background: #F0F4FB !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Bubble wrapper — controls alignment */
.ds-msg-bubble {
  display: flex !important;
  flex-direction: column !important;
  max-width: 72% !important;
}
.ds-msg-bubble.ds-msg-out {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.ds-msg-bubble.ds-msg-in {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

/* The actual bubble */
.ds-msg-text {
  padding: 10px 14px !important;
  border-radius: 18px !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
}
.ds-msg-out .ds-msg-text {
  background: var(--ds-navy) !important;
  color: white !important;
  border-bottom-right-radius: 4px !important;
}
.ds-msg-in .ds-msg-text {
  background: white !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border-mid) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
}

/* Sender name + timestamp beneath bubble */
.ds-msg-meta {
  font-size: .68rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 3px !important;
  padding: 0 4px !important;
}

/* Empty/loading state */
.ds-msg-empty {
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
  padding: 24px !important;
  align-self: center !important;
}

/* Pupil conversation list items */
.ds-conv-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-size: .88rem !important;
  transition: background .15s !important;
  color: var(--ds-navy) !important;
  font-weight: 500 !important;
}
.ds-conv-item:last-child { border-bottom: none !important; }
.ds-conv-item:hover { background: var(--ds-surface-hover) !important; }
.ds-conv-item.active {
  background: rgba(12,30,61,.07) !important;
  font-weight: 700 !important;
}

/* Input area */
#ds-chat-input {
  padding: 12px 16px !important;
  border-top: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}



/* ══════════════════════════════════════════════
   MISSING COMPONENT STYLES
   ══════════════════════════════════════════════ */

/* Empty states */
.ds-empty-state {
  padding: 24px 18px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-empty-state-sm {
  padding: 12px 18px !important;
  color: var(--ds-text-muted) !important;
  font-size: .82rem !important;
}

/* Parent items */
.ds-parent-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-parent-item:last-child { border-bottom: none !important; }
.ds-parent-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Skill overview in pupil sidebar */
.ds-skill-overview-cat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-overview-cat:last-child { border-bottom: none !important; }
.ds-skill-overview-cat-name {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
  width: 110px !important;
  flex-shrink: 0 !important;
}
.ds-skill-overview-bar {
  flex: 1 !important;
  height: 6px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-skill-overview-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width .4s ease !important;
}
.ds-skill-overview-score {
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  width: 24px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* Mini bar (focus areas) */
.ds-mini-bar {
  width: 60px !important;
  height: 5px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-mini-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy)) !important;
  border-radius: 3px !important;
}

/* Test booking body */
.ds-test-booking-body {
  padding: 14px 18px !important;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-test-booked-centre {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 4px !important;
}

/* ds-card-header with purple accent */
.ds-card-header-purple {
  color: #7C3AED !important;
  border-left: 3px solid #7C3AED !important;
}

/* Weak skills card (priority) */
.ds-card.ds-card-danger {
  border-left: 4px solid #ef4444 !important;
}

/* Meta text */
.ds-meta, .ds-text-subtle {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════
   MOCK TEST — FORM
   ══════════════════════════════════════════════════════════════ */
.ds-mock-form {
  background: var(--ds-surface-hover);
  border: 1px solid #c7d2fe;
  border-radius: var(--ds-radius-sm);
  padding: 18px;
  margin-bottom: 14px;
}
.ds-mock-form-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 560px) { .ds-mock-form-header-row { grid-template-columns: 1fr; } }
.ds-form-field { display: flex; flex-direction: column; gap: 4px; }
.ds-form-label { font-size: .8rem; font-weight: 600; color: #374151; }
.ds-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .88rem;
  box-sizing: border-box;
  font-family: var(--ds-font-body);
}
.ds-input:focus { outline: 2px solid var(--ds-navy-light); border-color: var(--ds-navy-light); }
.ds-textarea { resize: vertical; min-height: 64px; }

/* Pass / fail toggle labels */
.ds-mock-result-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 7px 14px;
  border: 2px solid var(--ds-border-mid);
  border-radius: 8px;
  font-weight: 600; font-size: .85rem;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.ds-mock-result-btn input[type="radio"] { display: none; }
.ds-mock-result-btn.pass-active { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-mock-result-btn.fail-active { border-color: #ef4444; background: #fef2f2; color: #991b1b; }

/* Fault grid label */
.ds-mock-form-fault-label {
  font-size: .8rem; font-weight: 600; color: #374151;
  margin-bottom: 8px;
}
.ds-mock-form-fault-hint {
  font-weight: 400; color: #9ca3af; font-size: .73rem; display: block; margin-top: 2px;
}

/* Scrollable fault grid */
.ds-mock-fault-grid {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  background: white;
}

/* Category header rows inside grid */
.ds-mock-cat-header {
  padding: 6px 10px;
  background: var(--ds-navy);
  color: rgba(255,255,255,.9);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Individual fault area rows */
.ds-mock-area-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .12s;
}
.ds-mock-area-row:last-child { border-bottom: none; }
.ds-mock-area-name {
  flex: 1; min-width: 0;
  font-size: .8rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-mock-note-input {
  flex: 1.2; min-width: 80px; max-width: 160px;
  padding: 3px 6px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  font-size: .72rem;
  color: #374151;
  font-family: var(--ds-font-body);
}
.ds-mock-note-input:focus { outline: 1px solid var(--ds-navy-light); }

/* Counter +/- buttons */
.ds-mock-counter-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  cursor: pointer;
  font-size: .8rem;
  padding: 0; line-height: 1;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-mock-counter-btn:hover { background: var(--ds-border); }
.mf-count {
  font-size: .82rem; font-weight: 700;
  min-width: 18px; text-align: center;
  color: #374151;
  flex-shrink: 0;
}

/* S / D severity buttons */
.ds-mock-sev-btn {
  padding: 2px 7px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  color: var(--ds-text-muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.ds-mock-sev-btn:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ds-mock-sev-btn.active { background: #ef4444; color: white; border-color: #ef4444; }

/* Row highlight states */
.ds-area-has-minor { background: #fffbeb !important; }
.ds-area-has-minor .mf-count { color: #d97706; }
.ds-area-serious   { background: #fef2f2 !important; }
.ds-area-dangerous { background: #fdf2f8 !important; }

/* ══════════════════════════════════════════════════════════════
   MOCK TEST — RESULTS CARD (shared instructor + pupil)
   ══════════════════════════════════════════════════════════════ */
.ds-mock-card {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  margin: 0 18px 14px;
  overflow: hidden;
}
.ds-mock-card:first-child { margin-top: 14px; }
.ds-mock-card.ds-mock-pass { border-left: 4px solid #10b981; }
.ds-mock-card.ds-mock-fail { border-left: 4px solid #ef4444; }

/* Card header */
.ds-mock-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ds-surface-hover);
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-card-date {
  font-family: var(--ds-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-mock-card-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Badges */
.ds-mock-badge {
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-badge-pass      { background: #d1fae5; color: #065f46; }
.ds-badge-fail      { background: #fee2e2; color: #991b1b; }
.ds-badge-minor     { background: #fef3c7; color: #92400e; }
.ds-badge-serious   { background: #fee2e2; color: #991b1b; }
.ds-badge-dangerous { background: #7f1d1d; color: #fff; }

/* Minor fault progress bar */
.ds-mock-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-score-track {
  flex: 1;
  height: 7px;
  background: var(--ds-border);
  border-radius: 4px;
  overflow: hidden;
}
.ds-mock-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.ds-mock-score-minor     { background: #f59e0b; }
.ds-mock-score-serious   { background: #ef4444; }
.ds-mock-score-dangerous { background: #7f1d1d; }
.ds-mock-score-clean     { background: #10b981; }
.ds-mock-score-label {
  font-size: .72rem;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

/* Fault table */
.ds-mock-fault-table { padding: 0; }
.ds-mock-fault-cat {
  padding: 5px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
}
.ds-mock-fault-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-fault-row:last-child { border-bottom: none; }
.ds-mock-fault-item {
  flex: 1;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ds-navy);
  min-width: 120px;
}
.ds-mock-fault-sev {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-fault-minor     { background: #fef3c7; color: #92400e; }
.ds-fault-serious   { background: #fee2e2; color: #991b1b; }
.ds-fault-dangerous { background: #7f1d1d; color: #fff; }
.ds-mock-fault-note {
  font-size: .76rem;
  color: var(--ds-text-muted);
  font-style: italic;
  width: 100%;
  padding-left: 2px;
}

/* Notes */
.ds-mock-notes {
  padding: 10px 14px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  border-top: 1px solid var(--ds-border);
  background: #fafbfd;
}

/* Actions row */
.ds-mock-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-hover);
}
.ds-btn-ghost {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: var(--ds-radius-xs);
}
.ds-btn-ghost:hover { color: #ef4444; background: #fef2f2; }

/* Empty state */
.ds-mock-empty {
  padding: 16px 18px;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-mock-no-faults-note {
  padding: 10px 14px;
  font-size: .78rem;
  color: var(--ds-text-muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   TEST RECORDS CARD
   ══════════════════════════════════════════════════════════════ */
.ds-test-records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 640px) {
  .ds-test-records-grid { grid-template-columns: 1fr; }
}
.ds-test-records-grid .ds-test-record-item:first-child {
  border-right: 1px solid var(--ds-border);
}
@media (max-width: 640px) {
  .ds-test-records-grid .ds-test-record-item:first-child {
    border-right: none;
    border-bottom: 1px solid var(--ds-border);
  }
}

.ds-test-record-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  transition: background .15s;
}

.ds-test-record-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-border);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.ds-test-record-done .ds-test-record-icon {
  background: #d1fae5;
  color: #059669;
}
.ds-test-record-failed .ds-test-record-icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-test-record-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-test-record-title {
  font-family: var(--ds-font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ds-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-test-record-status { min-height: 22px; }

.ds-test-status-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-test-passed  { background: #d1fae5; color: #065f46; }
.ds-test-failed  { background: #fee2e2; color: #991b1b; }
.ds-test-pending { background: var(--ds-border); color: var(--ds-text-muted); }

/* Edit controls (date input + outcome buttons) */
.ds-test-record-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ds-test-date-input {
  padding: 6px 9px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .82rem;
  font-family: var(--ds-font-body);
  color: var(--ds-navy);
  width: 100%;
  box-sizing: border-box;
}
.ds-test-date-input:focus {
  outline: 2px solid var(--ds-navy-light);
  border-color: var(--ds-navy-light);
}

/* Pass / fail / not-taken toggle buttons */
.ds-test-outcome-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-test-outcome-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--ds-border-mid);
  border-radius: 7px;
  background: var(--ds-surface);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ds-text-muted);
  transition: border-color .15s, background .15s, color .15s;
  font-family: var(--ds-font-body);
}
.ds-test-outcome-btn:hover { border-color: var(--ds-border-mid); background: var(--ds-surface-hover); }
.ds-outcome-pass.active  { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-outcome-fail.active  { border-color: #ef4444; background: #fef2f2; color: #991b1b; }
.ds-outcome-none.active  { border-color: var(--ds-navy-light); background: #eff3ff; color: var(--ds-navy); }

/* ══════════════════════════════════════════════════════════════
   MODALS — base rules (restored)
   ══════════════════════════════════════════════════════════════ */
.ds-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  box-sizing: border-box;
}
.ds-modal-content {
  background: #fff;
  border-radius: var(--ds-radius);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  position: relative;
}
.ds-modal-lg  { max-width: 800px !important; }
.ds-modal-sm  { max-width: 440px !important; }
.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ds-text-muted);
  padding: 0 0 0 12px;
  transition: color .15s;
}
.ds-modal-close:hover { color: var(--ds-navy); }

/* ── Toast ────────────────────────────────────────────────── */
.ds-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: white;
  padding: 10px 18px;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 320px;
}
.ds-toast.ds-toast-show   { opacity: 1; transform: translateY(0); }
.ds-toast.ds-toast-error  { background: #dc2626; }
.ds-toast.ds-toast-success{ background: #16a34a; }

/* ── Misc ─────────────────────────────────────────────────── */
.ds-loading {
  padding: 24px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .9rem;
}
.ds-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

/* ══════════════════════════════════════════════════════════════
   HOME TAB
   ══════════════════════════════════════════════════════════════ */
.ds-home-tab { padding: 0; }

/* ── Greeting ─────────────────────────────────────────────── */
.ds-home-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.ds-home-greeting-name {
  font-family: var(--ds-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-home-greeting-date {
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 2px;
}

/* ── Stat row ─────────────────────────────────────────────── */
.ds-home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 700px) { .ds-home-stats { grid-template-columns: repeat(2,1fr); } }
.ds-home-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.ds-home-stat-alert { border-color: #fcd34d; background: #fffbeb; }
.ds-home-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1;
}
.ds-home-stat-label {
  font-size: .68rem;
  color: var(--ds-text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── 2×2 Card grid ────────────────────────────────────────── */
.ds-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .ds-home-grid { grid-template-columns: 1fr; } }

/* Cards: fixed height, internal scroll */
.ds-home-grid .ds-card {
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: visible;
  margin-bottom: 0;
}
.ds-home-card-body,
.ds-today-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Card header extras ───────────────────────────────────── */
.ds-card-header-sub {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 400;
  color: var(--ds-text-muted);
}
.ds-card-header-link {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ds-navy-light, #3B5A8F);
  text-decoration: none;
  white-space: nowrap;
}
.ds-card-header-link:hover { text-decoration: underline; }

/* ── Empty states ─────────────────────────────────────────── */
.ds-home-empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ds-home-empty svg { opacity: .25; }

/* ── Today's schedule ─────────────────────────────────────── */
.ds-today-list { padding: 2px 0; }
.ds-today-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-today-row:last-child { border-bottom: none; }
.ds-today-done   { opacity: .5; }
.ds-today-active { background: #eff6ff; }
.ds-today-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 48px;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ds-navy);
  padding-top: 1px;
}
.ds-today-dur { font-size: .68rem; font-weight: 400; color: var(--ds-text-muted); }
.ds-today-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--ds-border);
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-today-upcoming .ds-today-bar { background: #3b82f6; }
.ds-today-active   .ds-today-bar { background: var(--ds-amber); }
.ds-today-done     .ds-today-bar { background: #22c55e; }
.ds-today-info { flex: 1; min-width: 0; }
.ds-today-name { font-size: .84rem; font-weight: 600; color: var(--ds-navy); }
.ds-today-note { font-size: .73rem; color: var(--ds-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-today-live {
  font-size: .62rem; font-weight: 800;
  background: var(--ds-amber); color: white;
  padding: 2px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  flex-shrink: 0; align-self: center;
}

/* ── This week ────────────────────────────────────────────── */
.ds-week-day-header {
  padding: 5px 16px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid, #2a4a82);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
}
.ds-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--ds-border);
  font-size: .82rem;
}
.ds-week-row:last-child { border-bottom: none; }
.ds-week-time { color: var(--ds-navy); font-weight: 600; min-width: 50px; flex-shrink: 0; font-size: .78rem; }
.ds-week-name { flex: 1; color: var(--ds-text); font-size: .82rem; }
.ds-week-dur  { color: var(--ds-text-muted); font-size: .72rem; flex-shrink: 0; }

/* ── Requests preview ─────────────────────────────────────── */
.ds-home-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-home-req-row:last-child { border-bottom: none; }
.ds-home-req-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-navy), var(--ds-navy-mid, #2a4a82));
  color: white;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-home-req-info { flex: 1; min-width: 0; }
.ds-home-req-name { font-size: .82rem; font-weight: 600; color: var(--ds-navy); }
.ds-home-req-date { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── Modal sizing ─────────────────────────────────────────── */
.ds-modal-md { max-width: 520px !important; }
.ds-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ds-form-row-2 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   CALENDAR ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */
/* Legend */
.ds-cal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--ds-text-muted);
}
.ds-cal-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Event content */
.ds-fc-event {
  padding: 2px 5px;
  overflow: hidden;
  line-height: 1.3;
}
.ds-fc-event-name {
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-fc-event-time {
  font-size: .7rem;
  opacity: .85;
}

/* Calendar container */
#ds-calendar {
  padding: 0 4px 8px;
}
.fc-timegrid-slot { cursor: pointer; }
.fc-timegrid-slot:hover { background: rgba(42,74,130,.04) !important; }

/* Tighten FullCalendar toolbar to match plugin style */
.fc .fc-toolbar-title { font-family: var(--ds-font-display) !important; font-size: 1rem !important; }
.fc .fc-button {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-mid) !important;
  color: var(--ds-navy) !important;
  font-size: .8rem !important;
  font-family: var(--ds-font-body) !important;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: var(--ds-surface-hover) !important; }
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--ds-navy) !important;
  border-color: var(--ds-navy) !important;
  color: white !important;
}
.fc .fc-today-button { opacity: 1 !important; }

/* ── MANAGER DASHBOARD ──────────────────────── */
.ds-manager-wrap         { max-width:1400px; margin:0 auto; padding:28px; box-sizing:border-box; }

.ds-manager-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ds-mstat-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px 20px;
  box-shadow: var(--ds-shadow);
}
.ds-mstat-value         { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:700; color:var(--ds-navy); }
.ds-mstat-label         { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.ds-mstat-money .ds-mstat-value { color:#059669; }
.ds-mstat-warn  .ds-mstat-value { color:#dc2626; }

[data-ds-theme="dark"] .ds-mstat-value { color: var(--ds-text); }

.ds-manager-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.ds-manager-main    { display:flex; flex-direction:column; gap:16px; }
.ds-manager-sidebar { display:flex; flex-direction:column; gap:16px; }

.ds-manager-table-wrap  { overflow-x:auto; }
.ds-manager-table       { width:100%; border-collapse:collapse; font-size:.88rem; }
.ds-manager-table th    { padding:10px 12px; text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-text-muted); border-bottom:2px solid var(--ds-border); }
.ds-manager-table td    { padding:10px 12px; border-bottom:1px solid var(--ds-border); vertical-align:middle; }
.ds-manager-table tr:hover td { background:var(--ds-surface-hover); }
.ds-manager-pupil-name  { font-weight:600; color:var(--ds-text); }
.ds-manager-pupil-email { font-size:.78rem; color:var(--ds-text-muted); }

.ds-manager-alert-card .ds-card-header { border-bottom:1px solid #fecaca; background:#fef2f2; }
.ds-manager-assign-row  { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ds-border); gap:12px; flex-wrap:wrap; }

.ds-manager-instr-row   { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--ds-border); }
.ds-manager-instr-avatar { width:36px; height:36px; border-radius:50%; background:var(--ds-navy-mid); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.ds-manager-instr-name  { font-weight:600; font-size:.9rem; }
.ds-manager-instr-meta  { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; }

@media (max-width:1100px) {
  .ds-manager-stats { grid-template-columns: repeat(3,1fr); }
  .ds-manager-grid  { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .ds-manager-stats { grid-template-columns: repeat(2,1fr); }
  .ds-manager-wrap  { padding:14px; }
}

/* ── MANAGER TABS ───────────────────────────── */
.ds-manager-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ds-border); padding-bottom: 0;
}
.ds-manager-tab {
  padding: 10px 20px; font-size: .88rem; font-weight: 600;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0;
  transition: color .15s, border-color .15s;
}
.ds-manager-tab:hover { color: var(--ds-text); }
.ds-manager-tab.active { color: var(--ds-navy-mid); border-bottom-color: var(--ds-navy-mid); }
[data-ds-theme="dark"] .ds-manager-tab.active { color: var(--ds-amber); border-bottom-color: var(--ds-amber); }

/* ── MANAGER SETTINGS ───────────────────────── */
.ds-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 16px;
}
.ds-settings-body  { padding: 16px 20px 20px; }
.ds-settings-body .ds-form-group { margin-bottom: 14px; }
.ds-settings-body .ds-form-group label { display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.ds-settings-toggle { display:flex; align-items:center; gap:10px; font-size:.9rem; cursor:pointer; }
.ds-settings-toggle input[type=checkbox] { width:16px; height:16px; }

.ds-manager-settings-wrap { max-width: 860px; }

@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
  .ds-manager-tabs  { overflow-x: auto; }
}

/* ── MANAGER SETTINGS PANEL ─────────────────── */
.ds-manager-settings-wrap { max-width: 900px; }
.ds-settings-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ds-settings-body         { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ds-field-hint            { font-size: .79rem; color: var(--ds-text-muted); display: block; margin-top: 3px; }
.ds-settings-toggle       { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; line-height: 1.5; }
.ds-settings-toggle input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--ds-navy-mid); }
@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
}

/* ── HELP TOOLTIPS ──────────────────────────── */
.ds-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--ds-text-muted);
  font-size: .65rem; font-weight: 700; font-family: Arial, sans-serif;
  cursor: help; flex-shrink: 0; margin-left: 6px;
  border: 1px solid var(--ds-border-mid);
  transition: background .15s, color .15s;
  position: relative; vertical-align: middle;
}
.ds-help-icon:hover { background: var(--ds-amber); color: #fff; border-color: var(--ds-amber); }

/* Tooltip via JS-positioned div — not ::after, so it escapes overflow:hidden */
.ds-tooltip-bubble {
  position: fixed;
  background: #1e293b; color: #f1f5f9;
  font-size: .8rem; font-weight: 400; font-family: 'DM Sans', sans-serif;
  line-height: 1.55; max-width: 260px; min-width: 160px;
  padding: 9px 13px; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  pointer-events: none; z-index: 99999;
  opacity: 0; transition: opacity .12s;
}
.ds-tooltip-bubble.visible { opacity: 1; }
.ds-tooltip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1e293b;
}

/* Tour button */
.ds-tour-btn {
  background: none; border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; color: rgba(255,255,255,.8);
  font-size: .78rem; font-weight: 600; padding: 4px 12px;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s; white-space: nowrap;
}
.ds-tour-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Tour overlay + spotlight */
.ds-tour-overlay {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
}
.ds-tour-overlay-dark {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9997;
  pointer-events: all;
}
.ds-tour-spotlight {
  position: fixed; z-index: 9998; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  pointer-events: none; transition: all .25s ease;
}
.ds-tour-card {
  position: fixed; z-index: 9999;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(12,30,61,.25);
  width: 320px; padding: 20px 22px;
  font-family: 'DM Sans', Arial, sans-serif;
  transition: top .25s ease, left .25s ease;
}
.ds-tour-card-title {
  font-family: 'Syne', Arial, sans-serif;
  font-size: 1rem; font-weight: 700; color: #0C1E3D;
  margin: 0 0 8px;
}
.ds-tour-card-desc  { font-size: .875rem; color: #475569; line-height: 1.55; margin: 0 0 16px; }
.ds-tour-card-foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-tour-progress   { font-size: .75rem; color: #94A3B8; }
.ds-tour-card-btns  { display: flex; gap: 8px; }
.ds-tour-prev-btn   { padding: 6px 14px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; color: #475569; }
.ds-tour-next-btn   { padding: 6px 14px; background: #0C1E3D; color: #fff; border: none; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ds-tour-close-btn  { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #94A3B8; line-height: 1; }
.ds-tour-prev-btn:hover { background: #f8fafc; }
.ds-tour-next-btn:hover { background: #1a3461; }
[data-ds-theme="dark"] .ds-tour-card { background: #1e293b; }
[data-ds-theme="dark"] .ds-tour-card-title { color: #e2e8f0; }
[data-ds-theme="dark"] .ds-tour-card-desc  { color: #94a3b8; }
[data-ds-theme="dark"] .ds-tour-prev-btn   { background: #263347; border-color: #2d3f5a; color: #94a3b8; }


/* ── MANAGER CURRICULUM EDITOR ─────────────────────────── */
.ds-manager-curr-editor { max-width: 760px; }
.ds-mgr-cat-card { margin-bottom: 12px; }
.ds-mgr-skill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--ds-border);
}
.ds-mgr-skill-row:last-of-type { border-bottom: none; }
.ds-mgr-skill-name { font-size: .88rem; color: var(--ds-text); flex: 1; }
.ds-mgr-skill-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ds-mgr-add-skill-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 0 8px;
}
.ds-mgr-add-skill-row .ds-input { flex: 1; font-size: .85rem; padding: 5px 10px; }

/* ── FORCED PASSWORD CHANGE ─────────────────────────────── */
.ds-auth-force-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 14px;
  font-size: .84rem; color: #92400e; line-height: 1.5;
  margin: 0 0 16px;
}
.ds-auth-force-notice svg { flex-shrink: 0; margin-top: 1px; color: #d97706; }

/* ════════════════════════════════════════════════════════════
   PASSTRACK UI REFRESH — appended overrides
   ════════════════════════════════════════════════════════════ */

/* ── GLOBAL ─────────────────────────────────────────────────── */
.ds-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}
.ds-wrap { background: #F0F4FA !important; }

.ds-card {
  border: none !important;
  box-shadow: 0 1px 3px rgba(12,30,61,.04), 0 6px 20px rgba(12,30,61,.06) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}
.ds-card-header {
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
}

/* ── HERO ────────────────────────────────────────────────────── */
.ds-pupil-hero {
  padding: 32px 32px 28px !important;
  background: linear-gradient(140deg, #0A1830 0%, #0C1E3D 45%, #172D58 100%) !important;
}
.ds-hero-name { font-size: 1.6rem !important; letter-spacing: -.03em !important; }

.ds-stat-card {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-width: 76px !important;
}
.ds-stat-card:hover { background: rgba(255,255,255,.16) !important; transform: translateY(-1px); }
.ds-stat-value { color: #FFFFFF !important; font-size: 1.5rem !important; }
.ds-stat-label { color: rgba(255,255,255,.55) !important; font-size: .62rem !important; }
.ds-stat-progress-bar-track { background: rgba(255,255,255,.2) !important; }

/* ── TAB NAV ─────────────────────────────────────────────────── */
.dsp-tab-nav {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-bottom: 2px solid var(--ds-border);
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 0; z-index: 50;
}
.dsp-tab-nav::-webkit-scrollbar { display: none; }
.dsp-tab-link {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 20px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ds-text-muted); text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dsp-tab-link:hover { color: var(--ds-navy); text-decoration: none; }
.dsp-tab-link.dsp-tab-active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); }
.dsp-tab-link svg { flex-shrink: 0; opacity: .6; }
.dsp-tab-link.dsp-tab-active svg { opacity: 1; }

@media (max-width: 480px) {
  .dsp-tab-link { padding: 12px 14px; font-size: .7rem; gap: 4px; }
  .dsp-tab-link svg { width: 13px; height: 13px; }
}

/* ── UPCOMING LESSONS ────────────────────────────────────────── */
.ds-upcoming-item { padding: 14px 20px !important; transition: background .15s; }
.ds-upcoming-item:hover { background: var(--ds-surface-hover); }
.ds-upcoming-day {
  font-size: 1.1rem !important; font-weight: 800 !important;
  line-height: 1 !important; color: #FFFFFF !important;
  font-family: var(--ds-font-display) !important;
}
.ds-upcoming-month { font-size: .58rem !important; letter-spacing: .08em !important; color: rgba(255,255,255,.75) !important; }
.ds-upcoming-time { font-size: .95rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-upcoming-meta { font-size: .78rem !important; color: var(--ds-text-muted) !important; margin-top: 2px !important; }
.ds-cancel-lesson-btn { font-size: .72rem !important; padding: 5px 12px !important; border-radius: 20px !important; opacity: .7; transition: opacity .15s; }
.ds-cancel-lesson-btn:hover { opacity: 1; }

/* ── LAST LESSON CARD ────────────────────────────────────────── */
.dsp-last-lesson-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dsp-last-lesson-date { font-size: .82rem; color: var(--ds-text-muted); font-weight: 500; }
.dsp-last-lesson-grade { display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
.dsp-grade-num { font-family: var(--ds-font-display); font-size: 2.4rem; line-height: 1; font-weight: 800; }
.dsp-grade-label { font-size: .9rem; color: var(--ds-text-muted); font-weight: 400; }
.dsp-last-lesson-no-grade { font-size: .85rem; color: var(--ds-text-subtle); font-style: italic; }
.dsp-last-lesson-note {
  font-size: .83rem; color: var(--ds-text-muted); line-height: 1.5;
  border-left: 3px solid var(--ds-amber); padding-left: 10px; margin-top: 4px;
}

/* ── INPUTS & BUTTONS ────────────────────────────────────────── */
.ds-input {
  border-radius: 10px !important; border: 1.5px solid var(--ds-border) !important;
  padding: 10px 14px !important; font-size: .9rem !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ds-input:focus { border-color: var(--ds-navy-mid) !important; box-shadow: 0 0 0 3px rgba(26,52,97,.1) !important; outline: none !important; }
.ds-btn-primary { border-radius: 10px !important; font-weight: 700 !important; transition: all .15s !important; }
.ds-btn-primary:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.ds-btn-outline { border-radius: 10px !important; font-weight: 600 !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-pupil-grid, .ds-pupil-lower-grid { padding: 12px !important; gap: 12px !important; }
  .ds-pupil-hero { padding: 20px 16px 18px !important; }
  .ds-hero-name { font-size: 1.3rem !important; }
  .ds-stat-card { padding: 10px 12px !important; min-width: 0 !important; }
  .ds-stat-value { font-size: 1.25rem !important; }
  .ds-card { border-radius: 14px !important; }
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────── */
.ds-pupil-bottom-nav {
  background: var(--ds-navy) !important; border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.25) !important;
  padding: 0 !important; height: 60px !important;
}
.ds-pupil-bottom-nav a {
  color: rgba(255,255,255,.45) !important; font-size: .6rem !important;
  font-weight: 700 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; gap: 4px !important;
  padding: 8px 4px !important; transition: color .15s !important;
}
.ds-pupil-bottom-nav a:hover, .ds-pupil-bottom-nav a.active { color: var(--ds-amber) !important; }


/* ════════════════════════════════════════════════════════════
   BOTTOM NAV — ALL SCREEN SIZES (primary navigation)
   ════════════════════════════════════════════════════════════ */

/* Show on all screens — override the mobile-only rule */
.ds-pupil-bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: var(--ds-navy) !important;
  border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.3) !important;
  padding: 0 !important;
  height: 64px !important;
  z-index: 100 !important;
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.4) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  transition: color .15s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a:hover,
.ds-pupil-bottom-nav a.active {
  color: var(--ds-amber) !important;
}
/* Active indicator — amber dot above icon */
.ds-pupil-bottom-nav a.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Give the page body padding so content isn't hidden behind the nav */
.ds-pupil-wrap {
  padding-bottom: 80px !important;
}

/* On desktop: constrain nav width and center it */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* Hide the old top tab nav (replaced by bottom nav) */
.dsp-tab-nav { display: none !important; }


/* ════════════════════════════════════════════════════════════
   LAYOUT FIXES — v2.5.16
   ════════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV — larger, more professional ─────────────────── */
.ds-pupil-bottom-nav {
  height: 72px !important;
}
.ds-pupil-bottom-nav a {
  font-size: .62rem !important;
  gap: 5px !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
}
/* Desktop — wider, floating panel */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 560px !important;
    height: 76px !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(12,30,61,.35) !important;
  }
  .ds-pupil-bottom-nav a {
    font-size: .68rem !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
  .ds-pupil-bottom-nav a svg {
    width: 24px !important;
    height: 24px !important;
  }
  /* More padding for content so it clears the nav */
  .ds-pupil-wrap { padding-bottom: 96px !important; }
}

/* ── LESSONS TAB — request card full width ──────────────────── */
/* When only the left col is shown, make it span full width */
.ds-pupil-lower-left {
  grid-column: 1 / -1;
}
.ds-pupil-lower-grid {
  grid-template-columns: 1fr !important;
}

/* ── MESSAGES TAB — full width ──────────────────────────────── */
.ds-pupil-lower-right {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.ds-pupil-messages-card {
  flex: 1;
  min-height: 480px;
}
.ds-pupil-msg-thread {
  min-height: 320px !important;
  max-height: 60vh !important;
}


/* ════════════════════════════════════════════════════════════
   PUPIL DASHBOARD — COMPLETE LAYOUT OVERHAUL v2.5.17
   Single source of truth. All earlier conflicting rules below
   are intentionally overridden here.
   ════════════════════════════════════════════════════════════ */

/* ── CONTENT CONTAINER ──────────────────────────────────────── */
/* Unified container for all tab content — single column, centred */
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 20px 20px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Sidebar stacks as a normal block inside the grid */
.ds-pupil-wrap .ds-pupil-sidebar {
  display: block !important;
  width: 100% !important;
}

/* ── CARD UNIFORMITY ─────────────────────────────────────────── */
/* Every card: same width, same radius, same shadow, same margin */
.ds-pupil-wrap .ds-card {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  margin-bottom: 16px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.ds-pupil-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── MESSAGES CARD — full width, proper height ───────────────── */
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
}
.ds-pupil-wrap .ds-pupil-lower-left,
.ds-pupil-wrap .ds-pupil-lower-right {
  display: block !important;
  width: 100% !important;
}
.ds-pupil-wrap .ds-pupil-messages-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px !important;
}
.ds-pupil-wrap .ds-pupil-msg-thread {
  flex: 1 !important;
  min-height: 300px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* ── BOTTOM NAV — polished, app-quality ─────────────────────── */
.ds-pupil-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;  /* matches content width */
  height: 68px !important;
  background: rgba(10, 18, 40, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  border-radius: 0 !important;
  z-index: 200 !important;
}
/* Rounded top corners on desktop */
@media (min-width: 480px) {
  .ds-pupil-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-pupil-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; }
.ds-pupil-bottom-nav a.active {
  color: #FFFFFF !important;
}
.ds-pupil-bottom-nav a.active svg {
  transform: translateY(-1px) !important;
}
/* Amber active dot at top of each active tab */
.ds-pupil-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}
/* Content padding to clear nav */
.ds-pupil-wrap { padding-bottom: 84px !important; }

/* ── MOBILE FINE-TUNING ──────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-grid,
  .ds-pupil-wrap .ds-pupil-lower-grid {
    padding: 14px 14px 8px !important;
  }
  .ds-pupil-bottom-nav { height: 62px !important; }
  .ds-pupil-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-pupil-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR DASHBOARD POLISH — v2.5.19
   CSS only — no PHP changes
   ════════════════════════════════════════════════════════════ */

/* ── TOP TAB NAV ─────────────────────────────────────────────── */
.ds-instructor-wrap .ds-nav-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  gap: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.ds-instructor-wrap .ds-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s !important;
}
.ds-instructor-wrap .ds-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-instructor-wrap .ds-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
  font-weight: 700 !important;
}
.ds-instructor-wrap .ds-tab svg { opacity: .5 !important; }
.ds-instructor-wrap .ds-tab.active svg { opacity: 1 !important; }
.ds-instructor-wrap .ds-badge {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
}

/* ── CONTENT WIDTH ───────────────────────────────────────────── */
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  padding: 24px 20px !important;
}

/* ── STAT PILLS ──────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-stats {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-home-stat {
  flex: 1 !important;
  min-width: 100px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 14px 16px !important;
  text-align: center !important;
}
.ds-instructor-wrap .ds-home-stat-alert {
  background: #fffbeb !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.15) !important;
}
.ds-instructor-wrap .ds-home-stat-value {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
}
.ds-instructor-wrap .ds-home-stat-alert .ds-home-stat-value {
  color: var(--ds-amber-dark) !important;
}

/* ── HOME GRID ───────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-home-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CARDS ───────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;  /* grid gap handles spacing */
}
.ds-instructor-wrap .ds-home-grid .ds-card {
  height: 100% !important;
}
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
}

/* ── TODAY SCHEDULE ──────────────────────────────────────────── */
.ds-today-row {
  padding: 11px 16px !important;
  gap: 12px !important;
}
.ds-today-time span:first-child {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-today-dur {
  font-size: .72rem !important;
  color: var(--ds-text-muted) !important;
}
.ds-today-name {
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--ds-navy) !important;
}
.ds-today-live {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  letter-spacing: .05em !important;
}

/* ── WEEK ROWS ───────────────────────────────────────────────── */
.ds-week-day-header {
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-subtle) !important;
  padding: 8px 16px 4px !important;
  background: #f8fafc !important;
}
.ds-week-row { padding: 8px 16px !important; font-size: .85rem !important; }
.ds-week-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-week-time { color: var(--ds-text-muted) !important; min-width: 56px !important; }
.ds-week-dur  { color: var(--ds-text-subtle) !important; font-size: .78rem !important; }

/* ── UPCOMING TESTS ──────────────────────────────────────────── */
.ds-upcoming-test-row { padding: 10px 16px !important; }
.ds-upcoming-test-avatar {
  background: var(--ds-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .82rem !important; flex-shrink: 0 !important;
}
.ds-upcoming-test-name  { font-size: .88rem !important; font-weight: 600 !important; }
.ds-upcoming-test-detail{ font-size: .75rem !important; color: var(--ds-text-muted) !important; }
.ds-upcoming-test-days  {
  font-size: .72rem !important; font-weight: 700 !important;
  background: #f1f5f9 !important; color: var(--ds-text-muted) !important;
  padding: 3px 10px !important; border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.ds-test-soon {
  background: #fff1f2 !important; color: #dc2626 !important;
}

/* ── LESSON REQUESTS ─────────────────────────────────────────── */
.ds-home-req-row { padding: 10px 16px !important; }
.ds-home-req-avatar {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  font-weight: 800 !important; font-size: .8rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-home-req-name { font-size: .88rem !important; font-weight: 600 !important; }
.ds-home-req-date { font-size: .75rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* ── GREETING ────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-greeting {
  background: linear-gradient(135deg, var(--ds-navy) 0%, #172d58 100%) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  color: white !important;
}
.ds-home-greeting-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
.ds-home-greeting-date {
  color: rgba(255,255,255,.55) !important;
  font-size: .8rem !important;
}
.ds-instructor-wrap .ds-home-greeting .ds-btn-primary {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  border: none !important;
}

/* ── EMPTY STATES ────────────────────────────────────────────── */
.ds-home-empty {
  padding: 24px 16px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-home-empty svg { opacity: .3 !important; margin-bottom: 8px !important; }
.ds-home-empty p { margin: 0 0 12px !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
  .ds-instructor-wrap .ds-nav-tabs { padding: 0 8px !important; }
  .ds-instructor-wrap .ds-tab { padding: 0 10px !important; font-size: .65rem !important; }
}


/* ════════════════════════════════════════════════════════════
   PUPIL MOBILE FIXES — v2.5.20
   Hero overflow, timeline date squashing, request form mobile
   ════════════════════════════════════════════════════════════ */

/* ── HERO — compact and contained on all screens ────────────── */
.ds-pupil-hero {
  padding: 20px !important;
  flex-wrap: nowrap !important;   /* keep identity + stats on one row */
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;    /* clip anything that would bleed right */
}
.ds-hero-identity {
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.ds-hero-identity-text {
  min-width: 0 !important;
}
.ds-hero-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}
.ds-hero-stats {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-stat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;        /* allow shrinking below content width */
  padding: 10px 8px !important;
}
.ds-stat-value {
  font-size: 1.2rem !important;
}
.ds-stat-label {
  font-size: .55rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hide progress bar on narrow screens to save space */
@media (max-width: 420px) {
  .ds-stat-progress-bar-track { display: none !important; }
  .ds-hero-name { max-width: 120px !important; }
}

/* ── TIMELINE HEADER — clean hierarchy, no squashing ─────────── */
.ds-timeline-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* date left, badges right */
  align-items: start !important;
  gap: 6px 10px !important;
  padding: 12px 16px !important;
  flex-wrap: unset !important;   /* remove old flex-wrap */
}
.ds-timeline-date {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: unset !important;        /* remove old flex:1 */
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: normal !important;   /* allow wrapping on its own line */
  grid-column: 1 !important;
  grid-row: 2 !important;
}
/* Badges (status + grade) sit on the right, rows 1-2 */
.ds-timeline-header .ds-status-badge,
.ds-timeline-header .ds-grade-overall {
  grid-column: 2 !important;
  align-self: center !important;
}
.ds-timeline-header .ds-status-badge { grid-row: 1 !important; }
.ds-timeline-header .ds-grade-overall { grid-row: 2 !important; }

/* Grade pill — more readable */
.ds-grade-overall {
  font-size: .72rem !important;
  padding: 2px 8px !important;
  background: var(--ds-navy) !important;
  color: white !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ── REQUEST A LESSON — stack vertically on mobile ───────────── */
/* Override the inline-style flex row */
.ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
    grid-template-columns: 1fr !important;  /* full stack on small screens */
  }
}
/* Form inputs — full width, no overflow */
.ds-pupil-wrap .ds-form-group {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}
.ds-pupil-wrap .ds-form-group .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Submit button — full width on mobile */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-btn-primary { width: 100% !important; }
}

/* Recent requests list — prevent overflow */
.ds-pupil-wrap div[style*="display:flex"][style*="justify-content:space-between"] {
  gap: 8px !important;
  flex-wrap: wrap !important;
}


/* ════════════════════════════════════════════════════════════
   DASHBOARD UNIFORMITY — v2.5.21
   Manager + Instructor aligned to pupil dashboard style
   ════════════════════════════════════════════════════════════ */

/* ── SHARED: all dashboard wraps ───────────────────────────── */
.ds-manager-wrap,
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
}

/* ── SHARED: card uniformity ────────────────────────────────── */
.ds-manager-wrap .ds-card,
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}
.ds-manager-wrap .ds-card-header,
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  background: transparent !important;
}

/* ── MANAGER: stats strip ───────────────────────────────────── */
.ds-manager-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  grid-template-columns: unset !important;
}
.ds-mstat-card {
  flex: 1 1 140px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 16px 18px !important;
}
.ds-mstat-value {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--ds-navy) !important;
}
.ds-mstat-label {
  font-size: .65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ds-text-muted) !important;
  margin-top: 5px !important;
}
.ds-mstat-money .ds-mstat-value { color: #059669 !important; }
.ds-mstat-warn  .ds-mstat-value { color: #dc2626 !important; }

/* ── MANAGER: tab nav — navy matching instructor ────────────── */
.ds-manager-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  padding: 0 16px !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.ds-manager-tabs::-webkit-scrollbar { display: none !important; }
.ds-manager-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: color .15s, border-color .15s !important;
  white-space: nowrap !important;
}
.ds-manager-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-manager-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
}

/* ── MANAGER: grid layout ───────────────────────────────────── */
.ds-manager-grid {
  display: block !important;    /* single column like pupil dashboard */
}
.ds-manager-main,
.ds-manager-sidebar {
  display: block !important;
  width: 100% !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 16px !important;
}

/* ── MANAGER: table polish ──────────────────────────────────── */
.ds-manager-table th {
  font-size: .68rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(12,30,61,.08) !important;
  background: #f8fafc !important;
}
.ds-manager-table td {
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(12,30,61,.05) !important;
  font-size: .88rem !important;
}
.ds-manager-table tr:last-child td { border-bottom: none !important; }
.ds-manager-table tr:hover td { background: #f8fafc !important; }
.ds-manager-pupil-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-manager-pupil-email { font-size: .75rem !important; color: var(--ds-text-muted) !important; }

/* ── MANAGER: mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-manager-wrap { padding: 14px !important; }
  .ds-manager-tabs { padding: 0 8px !important; border-radius: 10px 10px 0 0 !important; }
  .ds-manager-tab  { padding: 0 10px !important; font-size: .65rem !important; }
  .ds-mstat-card   { flex: 1 1 100px !important; padding: 12px 14px !important; }
  .ds-mstat-value  { font-size: 1.4rem !important; }
}

/* ── INSTRUCTOR: verify content width consistency ───────────── */
.ds-instructor-wrap .ds-tab-content {
  padding: 24px 20px !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR BOTTOM NAV + CARD SPACING + PUPIL DETAIL — v2.5.22
   ════════════════════════════════════════════════════════════ */

/* ── INSTRUCTOR BOTTOM NAV — identical to pupil ─────────────── */
.ds-instr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 68px !important;
  background: rgba(10,18,40,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  z-index: 200 !important;
}
@media (min-width: 480px) {
  .ds-instr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-instr-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-instr-bottom-nav a svg {
  width: 22px !important; height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-instr-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.ds-instr-bottom-nav a.active { color: #FFFFFF !important; }
.ds-instr-bottom-nav a.active svg { transform: translateY(-1px) !important; }
.ds-instr-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}
.ds-instr-bottom-nav .ds-badge {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  font-size: .5rem !important;
  padding: 1px 5px !important;
  border-radius: 20px !important;
  margin-left: 2px !important;
}

/* Give instructor wrap padding to clear the nav */
.ds-instructor-wrap { padding-bottom: 84px !important; }

/* Hide old top nav styles on instructor (nav is now bottom) */
.ds-instructor-wrap .ds-nav-tabs { display: none !important; }

/* ── CARD SPACING — fix cards being too close ───────────────── */
/* Instructor tab content: consistent gap between all cards */
.ds-instructor-wrap .ds-tab-content .ds-card {
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-tab-content .ds-card:last-child {
  margin-bottom: 0 !important;
}
/* Home grid: gap between the two columns */
.ds-instructor-wrap .ds-home-grid {
  gap: 20px !important;
}

/* ── PUPIL DETAIL PANEL — visual organisation ───────────────── */
/* Single column, max width, consistent spacing */
.ds-pupil-detail {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 20px 20px !important;
}
.ds-pupil-detail .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}

/* Force single column — remove sidebar layout */
.ds-detail-grid {
  display: block !important;
}
.ds-detail-left,
.ds-detail-right {
  display: block !important;
  width: 100% !important;
}
.ds-detail-bottom {
  display: block !important;
}
.ds-detail-bottom .ds-card {
  margin-bottom: 20px !important;
}

/* Section dividers — visual breathing room between groups */
/* Group 1: test booking + curriculum (admin info) */
.ds-test-booking-card,
.ds-curriculum-card {
  border-left: 3px solid var(--ds-amber) !important;
}

/* Group 2: lessons card gets a slightly stronger header */
.ds-detail-right .ds-card > .ds-card-header,
.ds-pupil-detail [id^="lessons-header"] {
  background: #f8fafc !important;
  font-size: .72rem !important;
}

/* Section break between groups — visual space */
.ds-detail-bottom {
  padding-top: 4px !important;
}

/* Charts, notes, messages — consistent card height */
.ds-detail-bottom .ds-card {
  min-height: 200px !important;
}
.ds-notes-log {
  max-height: 280px !important;
  overflow-y: auto !important;
}
.ds-messages-card .ds-msg-thread {
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Pupil detail header card — cleaner */
.ds-pupil-detail-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-left: none !important;
}
.ds-pupil-detail-avatar {
  width: 48px !important; height: 48px !important;
  font-size: 1.2rem !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ds-pupil-detail-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-pupil-detail-meta {
  font-size: .8rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-instr-bottom-nav { height: 62px !important; }
  .ds-instr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-instr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
  .ds-pupil-detail { padding: 14px !important; }
}


/* ── CALENDAR TAB: card spacing ─────────────────────────────── */
.ds-calendar-wrap {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px 100px !important;
  box-sizing: border-box !important;
}
.ds-calendar-wrap .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}
@media (max-width: 640px) {
  .ds-calendar-wrap { padding: 14px 14px 100px !important; }
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — v2.5.24
   Header, lesson rows, calendar, diary gaps
   ════════════════════════════════════════════════════════════ */

/* ── HEADER — prevent right overflow on mobile ───────────────── */
.ds-header-inner {
  padding: 0 16px !important;
  gap: 8px !important;
  overflow: hidden !important;
}
/* Brand: allow shrinking, clip long school names */
.ds-header-brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .9rem !important;
}
.ds-brand-role {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .65rem !important;
}
/* Actions: shrink but don't wrap */
.ds-header-actions {
  flex-shrink: 0 !important;
  gap: 6px !important;
}
/* Tour button: hide label on very small screens */
@media (max-width: 400px) {
  .ds-tour-btn { padding: 4px 8px !important; font-size: 0 !important; }
  .ds-tour-btn svg { display: block !important; }
}
/* Logout button: keep visible, just tighter */
.ds-header-actions .ds-btn-outline,
.ds-header-actions a[href*="logout"] {
  padding: 5px 10px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

/* ── INSTRUCTOR LESSON ROWS — fix date/actions overflow ──────── */
.ds-lesson-row {
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  padding: 12px 14px !important;
  align-items: flex-start !important;
}
/* Date block: fixed size, never wraps */
.ds-lesson-date {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
/* Info: takes remaining space, clips overflow */
.ds-lesson-info {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-lesson-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ds-lesson-preview {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .75rem !important;
}
/* Grade + status + actions: go to second row on narrow screens */
.ds-lesson-grade,
.ds-lesson-status,
.ds-lesson-actions {
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  /* Push grade/status/actions to their own row under info */
  .ds-lesson-grade  { order: 3 !important; }
  .ds-lesson-status { order: 4 !important; }
  .ds-lesson-actions {
    order: 5 !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* ── DIARY GAPS GRID — single column on mobile ───────────────── */
/* The inline style uses grid-template-columns:1fr 1fr — override it */
.ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
.ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
  .ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Inputs inside gap form: full width */
.ds-calendar-wrap .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Submit button: full width on mobile */
@media (max-width: 480px) {
  .ds-calendar-wrap .ds-btn-primary { width: 100% !important; }
}

/* ── FULLCALENDAR — prevent dot/event bleed ──────────────────── */
/* Contain the calendar within its card */
.ds-calendar-wrap #ds-calendar {
  overflow: hidden !important;
}
/* Make event dots and titles clip instead of overflow */
.fc-event-title,
.fc-daygrid-event-dot {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* On very small screens reduce cell font size */
@media (max-width: 480px) {
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: .7rem !important;
    padding: 2px 4px !important;
  }
  .fc-toolbar-title { font-size: 1rem !important; }
  .fc-toolbar-chunk .fc-button { padding: 4px 8px !important; font-size: .72rem !important; }
}


/* ════════════════════════════════════════════════════════════
   DIARY GAP + CALENDAR MOBILE FIX — v2.5.25
   ════════════════════════════════════════════════════════════ */

/* ── Outer gaps grid: two cols on desktop, one on mobile ─────── */
.ds-gaps-outer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inner date/time row: two cols on desktop, one on mobile ─── */
.ds-gap-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 400px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── FullCalendar: prevent any overflow outside card ─────────── */
.ds-card-full {
  overflow: hidden !important;
}
#ds-calendar {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Force all FC content to stay within bounds */
.fc {
  max-width: 100% !important;
  overflow: hidden !important;
}
.fc-view-harness {
  overflow: hidden !important;
}
/* Event titles: clip, don't overflow */
.fc-event {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-event-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Dot events in month view: clip within cell */
.fc-daygrid-day-events {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-daygrid-event-harness {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Toolbar: prevent overflow */
.fc-toolbar {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.fc-toolbar-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 180px !important;
}
@media (max-width: 480px) {
  .fc-toolbar { gap: 4px !important; }
  .fc-toolbar-title { font-size: .9rem !important; max-width: 130px !important; }
  .fc .fc-button { padding: 3px 7px !important; font-size: .7rem !important; }
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: .68rem !important;
    padding: 2px 3px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TARGETED FIXES — v2.5.26
   Calendar legend, diary gap form, header logo
   ════════════════════════════════════════════════════════════ */

/* ── 1. CALENDAR CARD HEADER — legend + button ───────────────── */
/* Wrap the right side so legend drops below button on mobile */
.ds-card-header[style*="justify-content:space-between"] > div,
.ds-card-header > div[style*="display:flex"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.ds-cal-legend {
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  font-size: .72rem !important;
}
/* On mobile: stack legend below the Add Lesson button */
@media (max-width: 560px) {
  .ds-card-header[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .ds-cal-legend {
    width: 100% !important;
    order: 2 !important;
  }
}

/* ── 2. DIARY GAP FORM — collapse to 1 col below 560px ──────── */
.ds-gap-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
@media (max-width: 560px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. HEADER LOGO — shrink on mobile, never push actions ──── */
.ds-header-brand {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
}
.ds-header-logo-img {
  max-width: 100px !important;
  max-height: 36px !important;
}
@media (max-width: 380px) {
  .ds-header-logo-img { max-width: 70px !important; }
  .ds-brand-name { font-size: .8rem !important; }
  .ds-brand-role { display: none !important; }
}
/* Actions: always stay fully visible, never shrink */
.ds-header-actions {
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
}


/* ════════════════════════════════════════════════════════════
   CALENDAR + GAP CARD FIXES — v2.5.27
   ════════════════════════════════════════════════════════════ */

/* ── Gap card inner padding div — fix bleed ─────────────────── */
/* The div[style="padding:18px"] adds to total width without box-sizing */
.ds-gaps-outer-grid .ds-card,
.ds-gaps-outer-grid .ds-card * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.ds-gaps-outer-grid .ds-card > div {
  padding: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ── FullCalendar toolbar — compact on mobile ────────────────── */
/* Keep all 4 view buttons, just make them smaller */
@media (max-width: 560px) {
  .fc-toolbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  /* Left: prev/next/today */
  .fc-toolbar-chunk:first-child .fc-button {
    padding: 3px 6px !important;
    font-size: .65rem !important;
  }
  /* Centre: title — shrink and truncate */
  .fc-toolbar-title {
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
  }
  /* Right: view buttons — icon only via font-size trick */
  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button,
  .fc-listWeek-button {
    padding: 3px 5px !important;
    font-size: .6rem !important;
  }
}
@media (max-width: 400px) {
  .fc-toolbar-title { max-width: 70px !important; font-size: .7rem !important; }
  .fc-dayGridMonth-button { display: none !important; } /* drop month view on very small */
}


/* ── HEADER: definitive mobile fix ──────────────────────────── */
/* Single authoritative rule block — overrides all earlier attempts */
.ds-header-inner {
  padding: 0 12px !important;
  gap: 6px !important;
  overflow: visible !important;
}
.ds-header-brand {
  flex: 0 1 auto !important;   /* shrink freely, don't grow past content */
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  gap: 8px !important;
}
.ds-header-logo-img {
  max-width: 80px !important;
  max-height: 32px !important;
  flex-shrink: 0 !important;
}
.ds-logo-icon { flex-shrink: 0 !important; }
.ds-header-brand > div {
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .85rem !important;
}
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .62rem !important;
}
.ds-header-actions {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  margin-left: auto !important;   /* push actions to the right always */
}
/* On mobile: hide brand text entirely to give actions full room */
@media (max-width: 460px) {
  .ds-brand-role { display: none !important; }
  .ds-brand-name { font-size: .78rem !important; }
  .ds-header-logo-img { max-width: 64px !important; }
}
@media (max-width: 360px) {
  .ds-brand-name { display: none !important; }
}


/* ── HEADER: fix brand text clip — definitive ────────────────── */
.ds-brand-name {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.ds-brand-role {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* The text wrapper div must constrain — flex child needs min-width:0 */
.ds-header-brand > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 0 !important;  /* force flex to actually shrink this child */
}

/* ── GAP FORM: fix date/time input overflow ──────────────────── */
/* Definitive single-column on mobile — highest specificity */
@media (max-width: 640px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Grid children must allow shrinking — critical for date inputs */
  .ds-gap-form-row > div {
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  /* Date/time inputs: force full width override of browser minimum */
  .ds-gap-form-row input[type="date"],
  .ds-gap-form-row input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ── DEFINITIVE FIX v2.5.28 ─────────────────────────────────── */

/* 1. Header: clip brand text, never let it bleed into actions */
.ds-header-inner {
  overflow: hidden !important;
  padding: 0 12px !important;
  gap: 6px !important;
}
.ds-header-brand {
  overflow: hidden !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  flex: 0 1 auto !important;
}
.ds-header-brand > div {
  overflow: hidden !important;
  min-width: 0 !important;
}
.ds-brand-name,
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* 2. Gap form: outer grid always 1 col on mobile,
      inner date/time always 1 col on mobile.
      date/time inputs have browser-enforced min-width so
      they MUST have a full-width column to sit in. */
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Ensure inputs don't overflow their cell */
  .ds-gap-form-row > div,
  .ds-gap-form-row input,
  .ds-gap-form-row select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── GAP FORM DATE/TIME — v2.5.29 ───────────────────────────── */
.ds-gap-dt-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.ds-gap-dt-field {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.ds-gap-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* On narrow screens stack vertically */
@media (max-width: 480px) {
  .ds-gap-dt-row {
    flex-direction: column !important;
  }
  .ds-gap-dt-field {
    width: 100% !important;
  }
}


/* ── GAP FORM FIX v2.5.30 — restore visible inputs ─────────── */
.ds-gap-dt-row {
  display: flex !important;
  flex-wrap: wrap !important;   /* wrap instead of overflow */
  gap: 10px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gap-dt-field {
  flex: 1 1 140px !important;  /* grow/shrink but never below 140px */
  min-width: 140px !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* never clip the input */
}
.ds-gap-input {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP CARD + CALENDAR OVERFLOW FIX v2.5.33 ───────────────── */

/* Prevent instructor wrap cards from overflowing their container */
.ds-instructor-wrap .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Calendar wrap: clip horizontal overflow on all screen sizes */
.ds-calendar-wrap {
  overflow-x: hidden !important;
}

/* The gap form card specifically: ensure all children are contained */
.ds-gaps-outer-grid .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gaps-outer-grid .ds-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Date + time inputs: must not exceed their cell */
#gap-date,
#gap-time {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP FORM INPUT CLIP FIX v2.5.34 ────────────────────────── */
/* overflow:hidden on cards was clipping inputs on the right.
   Remove it specifically for the gap form card. */
.ds-gaps-outer-grid .ds-card {
  overflow: visible !important;
}
.ds-gaps-outer-grid .ds-card .ds-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── iOS DATE/TIME INPUT FIX v2.5.35 ────────────────────────── */
/* iOS Safari ignores width:100% on date/time inputs with default
   -webkit-appearance. Resetting it forces width to be respected. */
#gap-date,
#gap-time,
input[type="date"].ds-input,
input[type="time"].ds-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ════════════════════════════════════════════════════════════
   MANAGER BOTTOM NAV + CARD SPACING — v2.5.37
   ════════════════════════════════════════════════════════════ */

/* Bottom nav — identical style to instructor */
.ds-mgr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 68px !important;
  background: rgba(10,18,40,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  z-index: 200 !important;
}
@media (min-width: 480px) {
  .ds-mgr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-mgr-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-mgr-bottom-nav a svg {
  width: 22px !important; height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-mgr-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.ds-mgr-bottom-nav a.active { color: #FFFFFF !important; }
.ds-mgr-bottom-nav a.active svg { transform: translateY(-1px) !important; }
.ds-mgr-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Hide old top nav */
.ds-manager-wrap .ds-manager-tabs { display: none !important; }

/* Padding to clear nav */
.ds-manager-wrap { padding-bottom: 84px !important; }

/* Card spacing — consistent 20px gaps */
.ds-manager-wrap .ds-card {
  margin-bottom: 20px !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 480px) {
  .ds-mgr-bottom-nav { height: 62px !important; }
  .ds-mgr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-mgr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}

/* Grade badge colour in timeline */
.ds-grade-overall {
  border-radius: 20px !important;
  padding: 2px 9px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: white !important;
  white-space: nowrap !important;
}


/* ── Table scroll shadow (v2.6.5) ────────────────────────────── */
.ds-tbl-scroll {
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  #ffffff 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0%   50%, rgba(12,30,61,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(12,30,61,.10), transparent);
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
}