/* ─── TTP Design Tokens ─────────────────────────────────────────────────── */
:root {
  --brand-50:  #fff0f2;
  --brand-100: #ffe0e3;
  --brand-200: #ffb3bc;
  --brand-500: #e8011c;
  --brand-600: #d40119;
  --brand-700: #c20116;
  --brand-800: #9e0113;
  --brand-900: #6e000d;

  --accent-50:  #f0fdf9;
  --accent-100: #ccfbef;
  --accent-500: #14b8a6;
  --accent-600: #0d9488;

  --ink-50:  #f8fafc;
  --ink-100: #f1f5f9;
  --ink-200: #e2e8f0;
  --ink-400: #94a3b8;
  --ink-500: #64748b;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1e293b;
  --ink-900: #0f172a;

  --paper:   #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;

  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
body { font-family: var(--font-body); color: var(--ink-800); background: var(--ink-50); }

/* ─── Appbar ────────────────────────────────────────────────────────────── */
.ttp-appbar {
  background: var(--paper);
  border-bottom: 1px solid var(--ink-200);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.ttp-logo { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--brand-800); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.ttp-logo-mark { width: 28px; height: 28px; background: var(--brand-800); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; position: relative; }
.ttp-logo-mark::after { content: ''; position: absolute; bottom: 4px; right: 4px; width: 7px; height: 7px; background: var(--accent-500); border-radius: 50%; }

/* ─── Nav ────────────────────────────────────────────────────────────────── */
.ttp-nav { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ttp-nav a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; color: var(--ink-600); text-decoration: none; transition: background .15s, color .15s; }
.ttp-nav a:hover, .ttp-nav a.active { background: var(--brand-100); color: var(--brand-800); }

/* ─── Shell ─────────────────────────────────────────────────────────────── */
.ttp-shell { min-height: calc(100vh - 60px); }

/* ─── Page chrome ───────────────────────────────────────────────────────── */
.ttp-page-header { background: var(--paper); border-bottom: 1px solid var(--ink-200); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; }
.ttp-page-body   { padding: 24px 28px; }

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.ttp-card { background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.ttp-card-flat { background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius-md); }

/* ─── Typography ─────────────────────────────────────────────────────────── */
.ttp-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--ink-900); }
.ttp-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--ink-800); }
.ttp-h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--ink-800); }
.ttp-muted { color: var(--ink-500); font-size: .75rem; }
.ttp-label { font-family: var(--font-heading); font-size: .75rem; font-weight: 500; color: var(--ink-600); display: block; margin-bottom: 4px; }

/* ─── Chips ──────────────────────────────────────────────────────────────── */
.ttp-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.ttp-chip-brand   { background: var(--brand-100);  color: var(--brand-800); }
.ttp-chip-accent  { background: var(--accent-100); color: var(--accent-600); }
.ttp-chip-success { background: #dcfce7; color: var(--success); }
.ttp-chip-warning { background: #fef3c7; color: var(--warning); }
.ttp-chip-danger  { background: #fee2e2; color: var(--danger); }
.ttp-chip-muted   { background: var(--ink-100); color: var(--ink-600); }

/* ─── Avatar ─────────────────────────────────────────────────────────────── */
.ttp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-100); color: var(--brand-800); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: .875rem; flex-shrink: 0; }
.ttp-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* ─── Form ───────────────────────────────────────────────────────────────── */
.ttp-input { width: 100%; padding: 10px 14px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); font-size: .9375rem; font-family: var(--font-body); color: var(--ink-800); background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.ttp-input:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(194,1,22,.12); }
.ttp-input-compact { font-size: .875rem !important; padding: 4px 8px !important; }
.pwd-wrap { position: relative; }
.pwd-wrap .ttp-input { padding-right: 2.75rem; }
.pwd-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; color: var(--ink-400); opacity: 0.5; cursor: pointer; line-height: 1; font-size: .9rem; }
.pwd-toggle:hover { opacity: 0.85; color: var(--ink-600); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-ttp-primary { background: var(--brand-700); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .15s; }
.btn-ttp-primary:hover { background: var(--brand-800); color: #fff; }
.btn-ttp-outline { background: var(--paper); color: var(--ink-700); border: 1px solid var(--ink-200); padding: 9px 20px; border-radius: var(--radius-md); font-weight: 500; font-size: .875rem; cursor: pointer; }
.btn-ttp-outline:hover { background: var(--ink-50); }
.btn-ttp-outline-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
.btn-ttp-ghost { background: transparent; color: var(--ink-700); border: none; padding: 9px 16px; border-radius: var(--radius-md); font-weight: 500; font-size: .875rem; cursor: pointer; }
.btn-ttp-ghost:hover { background: var(--ink-100); }
.btn-ttp-danger { background: var(--danger); color: #fff; border: none; padding: 9px 20px; border-radius: var(--radius-md); font-weight: 600; font-size: .875rem; cursor: pointer; }
.btn-ttp-primary:disabled, .btn-ttp-outline:disabled, .btn-ttp-ghost:disabled, .btn-ttp-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Auth shell ─────────────────────────────────────────────────────────── */
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-left  { background: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.auth-right { background: linear-gradient(155deg, #3d0008 0%, #c20116 60%, #e8011c 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 768px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-right { display: none; }
}
.auth-form-wrap      { max-width: 420px; width: 100%; }
.auth-subtitle       { font-size: .9375rem; }
.auth-alert-sm       { font-size: .875rem; }
.auth-field-error    { font-size: .8rem; }
.auth-forgot-link    { font-size: .8125rem; color: var(--brand-700); }
.auth-remember-label { font-size: .875rem; color: var(--ink-600); }
.auth-footer-text    { font-size: .875rem; color: var(--ink-500); }
.auth-link           { color: var(--brand-700); }
.auth-right-badge    { background: rgba(255,255,255,.15); color: #fff; }
.auth-quote          { font-size: 1.25rem; font-family: var(--font-heading); font-weight: 500; line-height: 1.5; }
.auth-attribution    { opacity: .8; font-size: .875rem; }
.auth-stat-value     { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; }
.auth-stat-label     { opacity: .7; font-size: .8rem; }

/* ─── Table ──────────────────────────────────────────────────────────────── */
.ttp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ttp-table thead th { background: var(--ink-50); color: var(--ink-600); font-family: var(--font-heading); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px; border-bottom: 1px solid var(--ink-200); text-align: left; }
.ttp-table tbody tr { border-bottom: 1px solid var(--ink-100); transition: background .1s; }
.ttp-table tbody tr:hover { background: var(--ink-50); }
.ttp-table tbody td { padding: 12px 16px; color: var(--ink-700); vertical-align: middle; }

/* ─── Progress ───────────────────────────────────────────────────────────── */
.ttp-progress { height: 5px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.ttp-progress-bar { height: 100%; background: var(--brand-700); border-radius: 999px; transition: width .4s; }

/* ─── Toggle switch ──────────────────────────────────────────────────────── */
.ttp-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.ttp-toggle input { opacity: 0; width: 0; height: 0; }
.ttp-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--ink-200); border-radius: 999px; transition: background .2s; }
.ttp-toggle-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .2s; }
.ttp-toggle input:checked + .ttp-toggle-slider { background: var(--brand-700); }
.ttp-toggle input:checked + .ttp-toggle-slider::before { transform: translateX(18px); }

/* ─── Message bubbles ────────────────────────────────────────────────────── */
.msg-bubble { padding: 10px 14px; border-radius: var(--radius-lg); max-width: 70%; font-size: .9375rem; line-height: 1.5; }
.msg-bubble-sent { background: var(--brand-800); color: #fff; border-bottom-right-radius: var(--radius-sm); align-self: flex-end; }
.msg-bubble-recv { background: var(--ink-100); color: var(--ink-800); border-bottom-left-radius: var(--radius-sm); align-self: flex-start; }

/* ─── Lesson stripe ──────────────────────────────────────────────────────── */
.lesson-stripe { width: 4px; border-radius: 2px; background: var(--brand-700); flex-shrink: 0; }
.lesson-stripe-accent { background: var(--accent-500); }

/* ─── Role chip ──────────────────────────────────────────────────────────── */
.role-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.role-chip-admin  { background: #ede9fe; color: #6d28d9; }
.role-chip-tutor  { background: var(--brand-100); color: var(--brand-800); }
.role-chip-parent { background: var(--accent-100); color: var(--accent-600); }

/* ─── Booking suspension banner ─────────────────────────────────────────── */
.booking-suspended-banner { background: #fef2f2; border-bottom: 2px solid #fca5a5; padding: 12px 28px; display: flex; align-items: center; gap: 12px; }
.booking-suspended-banner i { color: #dc2626; font-size: 1.1rem; flex-shrink: 0; }
.booking-suspended-banner-text { font-size: .875rem; color: #991b1b; font-weight: 500; }
.booking-suspended-banner-text span { font-weight: 400; color: #b91c1c; }
.booking-suspended-overlay { position: relative; }
.booking-suspended-overlay::after { content: ''; position: absolute; inset: 0; background: rgba(248,250,252,.75); border-radius: var(--radius-lg); z-index: 1; pointer-events: none; }

/* ─── Parent/Tutor 5-day Calendar ───────────────────────────────────────── */
.cal-5-hdr     { display: grid; grid-template-columns: 60px repeat(5, 1fr); width: 100%; border-bottom: 1px solid var(--ink-200); }
.cal-5-row     { display: grid; grid-template-columns: 60px repeat(5, 1fr); min-height: 48px; border-bottom: 1px solid var(--ink-200); width: 100%; }
.cal-5-hdr-cell { border-left: 1px solid var(--ink-200); padding: 8px; text-align: center; font-family: var(--font-heading); font-weight: 600; color: var(--ink-700); }
.cal-5-num-today { color: var(--brand-700); font-size: 1rem; }
.cal-5-num      { color: var(--ink-900); font-size: 1rem; }
.ev-lesson-pending { background: var(--ink-100); border: 1px solid var(--warning); }

/* ─── Shared Messages shell ──────────────────────────────────────────────── */
.msg-shell-outer { display: flex; height: calc(100vh - 120px); overflow: hidden; }
.msg-sidebar-pane { width: 320px; flex-shrink: 0; border-right: 1px solid var(--ink-200); overflow-y: auto; }
.msg-convo-pane   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msg-convo-msgs   { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg-convo-empty  { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--ink-400); }

/* ─── Admin Calendar ─────────────────────────────────────────────────────── */
/* Month grid */
.cal-month-grid   { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; }
.cal-month-hdr    { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; border-bottom: 1px solid var(--ink-200); }
.cal-month-hdr-cell { padding: 8px; text-align: center; border-right: 1px solid var(--ink-200); font-family: var(--font-heading); font-weight: 600; font-size: .75rem; color: var(--ink-600); text-transform: uppercase; letter-spacing: .04em; }
.cal-month-week   { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 110px; width: 100%; }
.cal-month-cell   { border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); padding: 5px; font-size: .6875rem; min-width: 0; }
.cal-month-cell-off { background: var(--ink-50); }
/* Week grid */
.cal-week-hdr     { display: grid; grid-template-columns: 52px repeat(7, 1fr); width: 100%; border-bottom: 1px solid var(--ink-200); }
.cal-week-row     { display: grid; grid-template-columns: 52px repeat(7, 1fr); min-height: 52px; width: 100%; border-bottom: 1px solid var(--ink-100); }
.cal-week-hdr-day { border-left: 1px solid var(--ink-200); padding: 8px; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: .75rem; color: var(--ink-600); text-transform: uppercase; letter-spacing: .04em; }
.cal-week-slot    { border-left: 1px solid var(--ink-200); padding: 4px; min-width: 0; }
.cal-week-num     { font-size: .9375rem; font-weight: 600; color: var(--ink-900); margin-top: 2px; }
.cal-week-num-today { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-700); color: #fff; font-weight: 700; margin-top: 2px; }
/* Day grid */
.cal-day-row      { display: flex; min-height: 52px; border-bottom: 1px solid var(--ink-100); }
.cal-day-time     { width: 52px; flex-shrink: 0; padding: 4px 8px 0 0; text-align: right; font-size: .75rem; color: var(--ink-500); }
.cal-day-content  { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--ink-200); padding: 4px; }
/* Day-view event card */
.cal-day-card     { display: flex; gap: 12px; text-decoration: none; border-radius: 6px; padding: 8px 12px; margin-bottom: 4px; color: var(--ink-900); }
.cal-day-card:hover { filter: brightness(.96); }
.cal-day-card-time { min-width: 44px; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
/* Week/month event pill */
.cal-event        { display: block; text-decoration: none; border-radius: 4px; padding: 3px 5px; margin-bottom: 3px; font-size: .75rem; color: var(--ink-900); line-height: 1.3; }
.cal-event:hover  { filter: brightness(.94); }
/* Event colours */
.ev-inperson  { background: var(--brand-100); }
.ev-online    { background: var(--accent-100); }
.ev-completed { background: var(--ink-200); color: var(--ink-600); }
.ev-cancelled { background: var(--ink-100); color: var(--ink-400); }
.ev-booking   { background: #fef3c7; border: 1px solid var(--warning); }
/* Misc */
.cal-time-label   { font-size: .75rem; padding: 4px 8px 0 0; text-align: right; color: var(--ink-500); }
.cal-day-num-today { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-700); color: #fff; font-weight: 700; font-size: .75rem; }
.cal-day-num-off  { color: var(--ink-400); }
.cal-legend       { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 16px; font-size: .75rem; border-top: 1px solid var(--ink-100); }
.cal-legend-item  { display: flex; align-items: center; gap: 6px; }
.cal-legend-dot   { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.cal-buffer       { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 6px; border-radius: 4px; font-size: .65rem; font-weight: 500; background: var(--ink-100); color: var(--ink-600); border: 1px dashed var(--ink-300); }
.cal-tutor-filter { min-width: 180px; }

/* ─── Bootstrap overrides — ensure no blue leaks through ────────────────── */
.btn-primary, .btn-primary:focus { background-color: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-primary:hover, .btn-primary:active { background-color: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.btn-outline-primary { color: var(--brand-700); border-color: var(--brand-700); }
.btn-outline-primary:hover { background-color: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.alert-info, .alert-primary { background-color: var(--brand-100); border-color: var(--brand-200); color: var(--brand-800); }
.alert-brand  { background-color: var(--brand-100); border-color: var(--brand-200); color: var(--brand-800); }
.text-primary { color: var(--brand-700) !important; }
.bg-primary   { background-color: var(--brand-700) !important; }
.border-primary { border-color: var(--brand-700) !important; }
.link-primary { color: var(--brand-700); }
.link-primary:hover { color: var(--brand-800); }

/* ─── Admin Messages ─────────────────────────────────────────────────────── */
.msg-shell        { display: flex; height: calc(100vh - 120px); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: #fff; margin-top: 1rem; }
.msg-sidebar      { width: 320px; flex-shrink: 0; border-right: 1px solid var(--ink-200); overflow-y: auto; }
.msg-pane         { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msg-pane-hdr     { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink-200); flex-shrink: 0; }
.msg-body         { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg-compose-bar  { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ink-200); flex-shrink: 0; }
.msg-empty-pane   { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--ink-400); }
.msg-thread       { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink-200); text-decoration: none; color: inherit; }
.msg-thread:hover { background: var(--ink-50); }
.msg-thread.active { background: var(--brand-50); border-left: 3px solid var(--brand-700); }
.msg-row          { display: flex; }
.msg-row-sent     { justify-content: flex-end; }
.msg-row-recv     { justify-content: flex-start; }

/* ─── Utility ────────────────────────────────────────────────────────────── */
/* JS show/hide toggle — applied by CSS classes only, never by inline style (CSP). */
.ttp-hidden { display: none !important; }

.ttp-section-label { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); margin-bottom: .75rem; }
.ttp-label-caps    { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.ttp-dl-sm  { font-size: .9rem; }
.ttp-text-sm { font-size: .8125rem; }
.ttp-body-text { font-size: .9375rem; color: var(--ink-600); }
.ttp-validation-msg { font-size: .8rem; color: var(--danger); }
.ttp-link { color: var(--brand-700); text-decoration: none; }
.ttp-link:hover { color: var(--brand-800); text-decoration: underline; }
.ttp-h6 { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--ink-700); }
.ttp-pre-wrap { white-space: pre-wrap; }
.ttp-pointer  { cursor: pointer; }

/* Session type radio cards — selected state toggled by session-type.js */
.ttp-session-type-card { cursor: pointer; }
.ttp-session-type-card.selected { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }

/* ─── Utility — typography ───────────────────────────────────────────────── */
.ttp-text-7    { font-size: .7rem; }
.ttp-text-8    { font-size: .8rem; }
.ttp-text-9    { font-size: .9rem; }
.ttp-text-875  { font-size: .875rem; }
.ttp-text-9375 { font-size: .9375rem; }
.ttp-text-xs   { font-size: .75rem; }
.ttp-transition-color { transition: color .15s; }
.ttp-lh-18 { line-height: 1.8; }

/* ─── Utility — colour ───────────────────────────────────────────────────── */
.ttp-ink-400   { color: var(--ink-400); }
.ttp-ink-500   { color: var(--ink-500); }
.ttp-ink-600   { color: var(--ink-600); }
.ttp-ink-700   { color: var(--ink-700); }
.ttp-ink-800   { color: var(--ink-800); }
.ttp-ink-900   { color: var(--ink-900); }
.ttp-brand-500 { color: var(--brand-500); }
.ttp-brand-600 { color: var(--brand-600); }
.ttp-brand-700 { color: var(--brand-700); }
.ttp-accent-600 { color: var(--accent-600); }
.ttp-danger     { color: var(--danger); }
.ttp-ink-300    { color: var(--ink-300); }
.ttp-warning    { color: var(--warning); }
.ttp-bg-brand-50 { background: var(--brand-50); }

/* ─── Utility — sizing ───────────────────────────────────────────────────── */
.ttp-min-w-0   { min-width: 0; }
.ttp-min-w-110 { min-width: 110px; }
.ttp-mw-160   { max-width: 160px; }
.ttp-mw-200   { max-width: 200px; }
.ttp-mw-220   { max-width: 220px; }
.ttp-mw-300   { max-width: 300px; }
.ttp-mw-340   { max-width: 340px; }
.ttp-mw-360   { max-width: 360px; }
.ttp-mw-560   { max-width: 560px; }
.ttp-w-260    { width: 260px; }
.ttp-min-h-60vh { min-height: 60vh; }

/* ─── Utility — icons ────────────────────────────────────────────────────── */
.ttp-icon-md  { font-size: 1.1rem;  flex-shrink: 0; }
.ttp-icon-lg  { font-size: 1.25rem; flex-shrink: 0; }
.ttp-icon-xl  { font-size: 1.5rem; }
.ttp-icon-2xl { font-size: 2rem; }

/* ─── KPI / stat numbers ─────────────────────────────────────────────────── */
.ttp-stat-num    { font-family: var(--font-heading); font-size: 2rem;   font-weight: 700; }
.ttp-stat-num-sm { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }

/* ─── Step indicator line ────────────────────────────────────────────────── */
.ttp-step-line { height: 1px; width: 24px; background: var(--ink-200); }

/* ─── Notice / callout boxes ─────────────────────────────────────────────── */
.ttp-notice-accent { background: var(--accent-50); border: 1px solid var(--accent-100); color: var(--accent-600); }
.ttp-notice-ink    { background: var(--ink-50);    border: 1px solid var(--ink-200); }
.ttp-upload-drop   { border: 1.5px dashed var(--ink-300); }
.ttp-col-50        { width: 50px; }
.ttp-col-80        { width: 80px; }
.ttp-col-110       { width: 110px; }
.ttp-col-160       { width: 160px; }
.btn-ttp-compact   { font-size: .8rem !important; padding: .25rem .6rem !important; }
.ttp-notice-amber  { background: #fffbeb; border: 1px solid #fbbf24; color: #92400e; }
.ttp-notice-green  { background: #f0f9f6; border: 1px solid #16a085; color: #065f46; }
.ttp-popia-rights  { background: #f0f9f6; border-radius: 6px; }
.ttp-consent-scroll { max-height: 100px; overflow-y: auto; font-size: .75rem; color: #4a4a6a; background: #f8f8f5; border: 1px solid #e0e0d8; border-radius: 4px; padding: 8px; margin-bottom: 12px; }
.ttp-profile-banner { height: 100px; background: linear-gradient(135deg, var(--brand-800), var(--accent-500)); border-radius: var(--radius-md) var(--radius-md) 0 0; margin: -20px -20px 0 -20px; }

/* ─── Card variants ──────────────────────────────────────────────────────── */
.ttp-card-border-danger  { border-left: 4px solid var(--danger); }
.ttp-card-border-success { border-left: 4px solid var(--success); background: #f0fdf4; }
.ttp-card-border-accent  { border-left: 4px solid var(--accent-500); }
.ttp-card-danger         { border-color: var(--danger) !important; }

/* ─── Password strength ──────────────────────────────────────────────────── */
.ttp-pwd-seg           { height: 4px; background: var(--ink-200); }
.ttp-pwd-strength-bar  { height: 4px; border-radius: 2px; background: #e0e0d8; margin-top: 6px; overflow: hidden; }
.ttp-pwd-strength-fill { height: 100%; width: 0; transition: width .3s, background .3s; }

/* ─── Avatar overrides ───────────────────────────────────────────────────── */
.ttp-avatar-sm      { width: 32px !important; height: 32px !important; font-size: .75rem !important; }
.ttp-avatar-xl      { width: 80px; height: 80px; font-size: 2rem; }
.ttp-avatar-profile { width: 96px; height: 96px; font-size: 2.5rem; border: 4px solid var(--paper); }

/* ─── Import result row colours ─────────────────────────────────────────── */
.ttp-row-imported { background: #f0fdf4; }
.ttp-row-skipped  { background: #fffbeb; }
.ttp-row-failed   { background: #fef2f2; }

/* ─── Audit log code snippet ─────────────────────────────────────────────── */
.ttp-code { font-size: .8rem; background: var(--ink-50); padding: 1px 4px; border-radius: 3px; }

/* ─── Master admin indicator ─────────────────────────────────────────────── */
.ttp-master-star { color: var(--brand-700); margin-right: .35rem; }

/* ─── Radio label chip ───────────────────────────────────────────────────── */
.ttp-radio-chip { cursor: pointer; padding: 8px 16px; }

/* ─── Disabled card overlay ──────────────────────────────────────────────── */
.ttp-disabled-card { opacity: .45; cursor: not-allowed; }

/* ─── Dismiss button ─────────────────────────────────────────────────────── */
.ttp-dismiss-btn { padding: 0 4px; line-height: 1; color: var(--ink-400); }

/* ─── Lesson time column ─────────────────────────────────────────────────── */
.ttp-lesson-row      { min-height: 64px; }
.ttp-lesson-time     { min-width: 90px; color: var(--ink-500); font-size: .8125rem; }
.ttp-lesson-time-col { min-width: 80px; text-align: right; color: var(--ink-500); font-size: .8125rem; }
.ttp-lesson-current  { background: var(--brand-50); }

/* ─── Next lesson preview ────────────────────────────────────────────────── */
.ttp-next-lesson-col { min-width: 120px; }

/* ─── Tutor profile banner ───────────────────────────────────────────────── */
.ttp-profile-banner        { height: 100px; background: linear-gradient(135deg, var(--brand-800), var(--accent-500)); border-radius: var(--radius-md) var(--radius-md) 0 0; margin: -20px -20px 0 -20px; }
.ttp-profile-avatar-offset { margin-top: -48px; }
.ttp-profile-subject-input { max-width: 160px; }

/* ─── POPIA consent scroll (app pages) ──────────────────────────────────── */
.ttp-consent-scroll { max-height: 100px; overflow-y: auto; font-size: .75rem; color: #4a4a6a; background: #f8f8f5; border: 1px solid #e0e0d8; border-radius: 4px; padding: 8px; margin-bottom: 12px; }
.ttp-popia-rights   { background: #f0f9f6; border-radius: 6px; font-size: .8rem; }

/* ─── Full-page centred layouts (Index, AccessDenied) ────────────────────── */
.ttp-center-page  { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 40px; }
.ttp-logo-mark-lg { width: 64px; height: 64px; }
.ttp-h1-xl        { font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem; color: var(--ink-900); }
.btn-ttp-primary-xl { background: var(--brand-700); color: #fff; border: none; padding: 14px 32px; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .15s; }
.btn-ttp-primary-xl:hover { background: var(--brand-800); color: #fff; }

/* ─── Auth page extras ───────────────────────────────────────────────────── */
.auth-left-scroll    { overflow-y: auto; }
.auth-form-wide      { max-width: 480px; width: 100%; }
.auth-input-readonly { background: #f8f8f5; color: #6b6b8a; }
.auth-otp-input      { font-size: 1.5rem; letter-spacing: 8px; font-family: monospace; }
.auth-popia-box      { background: #f0f9f6; border: 1px solid #a7f3d0; border-radius: 8px; }
.auth-popia-hdr      { font-size: .8125rem; font-weight: 600; color: #065f46; }
.auth-popia-scroll   { max-height: 120px; overflow-y: auto; font-size: .8rem; color: #374151; line-height: 1.5; margin-bottom: 12px; padding: 8px; background: #fff; border-radius: 4px; }
.auth-right-h2       { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; }
.auth-right-body     { opacity: .8; margin-top: 12px; }
.auth-help-text      { font-size: .8125rem; color: var(--ink-400); }
.auth-icon-circle    { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-50); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.auth-icon-accent    { color: var(--accent-600); }
.auth-quote-sm       { font-size: 1.125rem; font-family: var(--font-heading); font-weight: 500; line-height: 1.5; }

/* ─── Unread message badge ───────────────────────────────────────────────── */
.msg-unread-badge { font-size: .65rem; }