/* /premium/assets/css/design-system.css
   SimpL OS Design System v1
   Extracted from premium.css and normalised into reusable classes.

   Purpose:
   - Use this file as the shared styling foundation.
   - Migrate pages gradually from old page-specific classes to .ui-* classes.
   - Keep page-specific files small and only for unique layouts.
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Brand */
  --simpl-blue: #2f7bff;
  --simpl-blue-dark: #245ddb;
  --simpl-blue-light: #75b3ff;
  --simpl-accent: #5cc8ff;
  --simpl-red: #e02424;
  --simpl-gradient: linear-gradient(135deg, #2f7bff, #5cc8ff);

  /* Semantic colours */
  --bg: #eef2ff;
  --bg-elevated: #f8fbff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;
  --border: #e5e7eb;
  --border-strong: #dbe4ff;

  --primary: #2f7bff;
  --primary-strong: #245ddb;
  --primary-soft: rgba(47, 123, 255, .10);
  --success: #16a34a;
  --success-soft: #e7f5e9;
  --warning: #f59e0b;
  --warning-soft: #fff7df;
  --danger: #ef4444;
  --danger-soft: #fff1f2;
  --info: #2563eb;
  --info-soft: #eef2ff;

  /* Shadows */
  --shadow: 0 10px 28px rgba(0, 40, 160, .08);
  --shadow-soft: 0 8px 20px rgba(15, 23, 42, .05);
  --shadow-strong: 0 18px 44px rgba(15, 23, 42, .14);

  /* Layout */
  --page-max: 980px;
  --page-max-wide: 1080px;
  --page-pad-x: 1rem;
  --page-gap: 1rem;
  --page-gap-lg: 1.25rem;
  --bottom-nav-h: 72px;

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Components */
  --card-radius: var(--radius-md);
  --card-border: 1px solid var(--border-strong);
  --card-shadow: var(--shadow);
  --card-shadow-soft: var(--shadow-soft);
  --card-header-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(47, 123, 255, .22);
}

html[data-theme="dark"] {
  --bg: #08111f;
  --bg-elevated: #0f1728;
  --surface: #121b2e;
  --surface-2: #172338;
  --surface-3: #1d2b43;
  --text: #eef4ff;
  --text-muted: #a8b8d2;
  --text-soft: #7f91af;
  --border: rgba(168, 184, 210, .12);
  --border-strong: rgba(168, 184, 210, .20);
  --primary: #68a9ff;
  --primary-strong: #3f84ff;
  --primary-soft: rgba(104, 169, 255, .16);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .12);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --info: #93c5fd;
  --info-soft: rgba(147, 197, 253, .14);
  --shadow: 0 14px 34px rgba(0, 0, 0, .48);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, .34);
  --shadow-strong: 0 20px 50px rgba(0, 0, 0, .55);
  --card-header-bg: linear-gradient(180deg, rgba(18,27,46,.98), rgba(23,35,56,.96));
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

img,
svg {
  max-width: 100%;
}

img {
  display: block;
}

a {
  color: inherit;
}

.premium-body,
.app-body {
  color: var(--text);
  background:
    radial-gradient(at 20% 10%, rgba(117,179,255,.35), transparent 55%),
    radial-gradient(at 80% 30%, rgba(94,234,212,.28), transparent 60%),
    radial-gradient(at 60% 90%, rgba(147,197,253,.32), transparent 55%),
    var(--bg);
}

html[data-theme="dark"] .premium-body,
html[data-theme="dark"] .app-body {
  background:
    radial-gradient(at 20% 10%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(at 80% 30%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(at 60% 90%, rgba(96,165,250,.10), transparent 55%),
    var(--bg);
}

/* ============================================================
   3. PAGE LAYOUT
   ============================================================ */
.page-shell,
.ui-page,
.premium-main {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto 2.5rem;
  padding: 16px var(--page-pad-x) 0;
}

.page-shell--narrow,
.ui-page--narrow {
  max-width: 640px;
}

.page-shell--wide,
.ui-page--wide {
  max-width: var(--page-max-wide);
}

.page-stack > * + * {
  margin-top: var(--page-gap);
}

.page-stack--lg > * + * {
  margin-top: var(--page-gap-lg);
}

.page-grid,
.ui-grid {
  display: grid;
  gap: var(--page-gap);
}

.page-grid--2,
.ui-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-grid--3,
.ui-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-grid--sidebar,
.ui-grid--sidebar {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

.page-actions,
.ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.page-actions--right,
.ui-actions--right {
  justify-content: flex-end;
}

.page-cluster,
.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* ============================================================
   4. PAGE INTRO / HEADER
   ============================================================ */
.page-intro,
.ui-intro {
  margin-bottom: var(--page-gap);
}

.page-intro-head,
.ui-intro-head,
.page-header,
.ui-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.page-header,
.ui-page-header {
  margin: 0 0 1.25rem;
  padding: .95rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid #e3e8ff;
  background:
    radial-gradient(circle at top left, rgba(47,123,255,.10), transparent 60%),
    radial-gradient(circle at bottom right, rgba(92,200,255,.06), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.page-intro-title,
.ui-title,
.page-title {
  margin: 0 0 .2rem;
  font-size: 1.55rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}

.page-intro-meta,
.ui-subtitle,
.page-meta,
.muted {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.ui-kicker {
  margin: 0 0 .35rem;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   5. CARDS
   ============================================================ */
.ui-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  color: var(--text);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-soft);
  overflow: hidden;
}

.ui-card--padded {
  padding: 1rem;
}

.ui-card--flat {
  box-shadow: none;
}

.ui-card--strong {
  box-shadow: var(--card-shadow);
}

.ui-card--glass {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .ui-card--glass {
  background: rgba(18,27,46,.88);
}

.ui-card + .ui-card {
  margin-top: var(--page-gap);
}

.ui-card-header {
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-header-bg);
}

.ui-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.ui-card-subtitle {
  margin: .2rem 0 0;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.ui-card-body {
  padding: 1rem;
}

.ui-card-footer {
  padding: .9rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.ui-section-title {
  margin: 0 0 .75rem;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Temporary aliases while migrating. Remove when all pages use .ui-card. */
.section-card,
.card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  color: var(--text);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-soft);
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .55rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.ui-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.ui-btn:active {
  transform: translateY(0) scale(.99);
}

.ui-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ui-btn--primary {
  border-color: var(--primary-strong);
  background: var(--primary-strong);
  color: #fff;
}

.ui-btn--secondary {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

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

.ui-btn--soft {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.ui-btn--success {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.ui-btn--warning {
  border-color: var(--warning);
  background: var(--warning);
  color: #111827;
}

.ui-btn--danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.ui-btn--sm {
  min-height: 30px;
  padding: .35rem .65rem;
  border-radius: var(--radius-xs);
  font-size: .78rem;
}

.ui-btn--lg {
  min-height: 46px;
  padding: .75rem 1.05rem;
  border-radius: var(--radius-md);
  font-size: .95rem;
}

.ui-btn--block {
  width: 100%;
}

.ui-btn--pill {
  border-radius: var(--radius-pill);
}

/* Temporary button aliases while migrating. */
.btn,
.btn-primary,
.btn-ghost,
.btn-soft,
.btn-green,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .55rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

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

.btn-ghost,
.btn-soft {
  background: var(--surface-2);
  color: var(--text);
}

.btn-green {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.btn-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}
/* ============================================================
   SimpL OS action buttons
   ============================================================ */

.btn-simpl-blue{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#2f7bff,#245ddb);
    color:#fff;
    font-weight:800;
    font-size:.9rem;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(47,123,255,.25);
    transition:.15s ease;
}

.btn-simpl-blue:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,#3b82ff,#2563eb);
}

.btn-simpl-green{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#7ed321,#47b30f);
    color:#fff;
    font-weight:800;
    font-size:.9rem;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(126,211,33,.25);
    transition:.15s ease;
}

.btn-simpl-green:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg,#8be63a,#5fc91f);
}

/* ============================================================
   7. FORMS
   ============================================================ */
.ui-form {
  display: grid;
  gap: 1rem;
}

.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.ui-field {
  display: grid;
  gap: .35rem;
}

.ui-label,
.ui-field label {
  font-size: .83rem;
  font-weight: 750;
  color: var(--text);
}

.ui-help {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.ui-input,
.ui-select,
.ui-textarea,
.ui-field input,
.ui-field select,
.ui-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  padding: .65rem .75rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ui-textarea,
.ui-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.ui-check-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  color: var(--text-muted);
}

/* Temporary payment/form aliases while migrating. */
.pay-input,
.form-control {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  padding: .65rem .75rem;
  outline: none;
}

/* ============================================================
   8. BADGES / CHIPS
   ============================================================ */
.ui-badge,
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.ui-badge--success,
.ui-chip--success {
  border-color: rgba(22, 163, 74, .22);
  background: var(--success-soft);
  color: var(--success);
}

.ui-badge--warning,
.ui-chip--warning {
  border-color: rgba(245, 158, 11, .30);
  background: var(--warning-soft);
  color: #92400e;
}

.ui-badge--danger,
.ui-chip--danger {
  border-color: rgba(239, 68, 68, .25);
  background: var(--danger-soft);
  color: var(--danger);
}

.ui-badge--info,
.ui-chip--info {
  border-color: rgba(37, 99, 235, .20);
  background: var(--info-soft);
  color: var(--info);
}

.ui-badge--neutral,
.ui-chip--neutral {
  border-color: var(--border);
  background: var(--surface-3);
  color: var(--text-muted);
}

.ui-dot {
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* Temporary aliases while migrating. */
.status-badge,
.status-badge--ok,
.status-badge--warning,
.status-badge--muted,
.status-badge--neutral {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.1;
}

.status-badge--ok { background: var(--success-soft); color: var(--success); }
.status-badge--warning { background: var(--warning-soft); color: #92400e; }
.status-badge--neutral { background: var(--info-soft); color: var(--info); }

/* ============================================================
   9. STATS
   ============================================================ */
.ui-stat {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.ui-stat-value {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}

.ui-stat-label {
  font-size: .8rem;
  font-weight: 750;
  color: var(--text-muted);
}

.ui-stat-meta {
  font-size: .76rem;
  color: var(--text-soft);
}

.ui-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

/* ============================================================
   10. TABLES
   ============================================================ */
.ui-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.ui-table th,
.ui-table td {
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.ui-table th {
  font-size: .74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: var(--surface-2);
}

.ui-table tbody tr:hover {
  background: var(--surface-2);
}

/* ============================================================
   11. ALERTS / TOASTS
   ============================================================ */
.ui-alert {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  font-size: .9rem;
  line-height: 1.4;
}

.ui-alert--success {
  border-color: rgba(22, 163, 74, .22);
  background: var(--success-soft);
  color: #166534;
}

.ui-alert--warning {
  border-color: rgba(245, 158, 11, .30);
  background: var(--warning-soft);
  color: #92400e;
}

.ui-alert--danger {
  border-color: rgba(239, 68, 68, .25);
  background: var(--danger-soft);
  color: #991b1b;
}

.ui-alert--info {
  border-color: rgba(37, 99, 235, .20);
  background: var(--info-soft);
  color: #1e3a8a;
}

.ui-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: .7rem .9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-strong);
  font-size: .86rem;
  font-weight: 800;
}

/* ============================================================
   12. HERO / FEATURE CARD
   ============================================================ */
.ui-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at top left, rgba(92,200,255,.26), transparent 38%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 48%, #2563eb 100%);
  color: #fff;
  box-shadow: var(--shadow-strong);
  padding: 1.1rem;
}

.ui-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 35%;
  height: 160px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transform: rotate(-8deg);
  pointer-events: none;
}

.ui-hero-card > * {
  position: relative;
  z-index: 1;
}

.ui-hero-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.ui-hero-meta {
  margin: .35rem 0 0;
  color: rgba(255,255,255,.76);
  font-size: .9rem;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .page-grid--2,
  .page-grid--3,
  .page-grid--sidebar,
  .ui-grid--2,
  .ui-grid--3,
  .ui-grid--sidebar,
  .ui-form-grid,
  .ui-stat-grid {
    grid-template-columns: 1fr;
  }

  .page-header,
  .ui-page-header,
  .page-intro-head,
  .ui-intro-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-actions,
  .ui-actions,
  .page-actions--right,
  .ui-actions--right {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .page-shell,
  .ui-page,
  .premium-main {
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .page-intro-title,
  .ui-title,
  .page-title {
    font-size: 1.35rem;
  }

  .ui-card-header,
  .ui-card-body,
  .ui-card-footer,
  .ui-card--padded {
    padding: .85rem;
  }

  .ui-btn {
    width: 100%;
  }
}


/* ============================================================
   SimpL OS Design System v2
   Themeable tokens + compatibility layer
   ============================================================ */

:root,
html[data-ui-theme="cloudy-blue"] {
  color-scheme: light;

  --bg: #eef6ff;
  --bg-elevated: #f8fbff;
  --surface: rgba(255,255,255,.94);
  --surface-2: #f8fbff;
  --surface-3: #eef4ff;
  --card-bg: rgba(255,255,255,.92);
  --card-header-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.94));

  --text: #0f172a;
  --text-muted: #64748b;
  --text-soft: #94a3b8;

  --primary: #2f7bff;
  --primary-strong: #245ddb;
  --primary-soft: rgba(47,123,255,.12);

  --success: #18a558;
  --success-soft: rgba(24,165,88,.12);
  --warning: #f59e0b;
  --warning-soft: rgba(245,158,11,.15);
  --danger: #ef4444;
  --danger-soft: rgba(239,68,68,.13);

  --border: rgba(47,123,255,.12);
  --border-strong: rgba(47,123,255,.18);
  --shadow: 0 16px 42px rgba(47,123,255,.10);
  --shadow-soft: 0 8px 22px rgba(15,23,42,.06);
  --shadow-strong: 0 22px 52px rgba(15,23,42,.16);

  --body-bg-art:
    radial-gradient(at 18% 8%, rgba(117,179,255,.34), transparent 56%),
    radial-gradient(at 82% 26%, rgba(94,234,212,.24), transparent 58%),
    radial-gradient(at 62% 92%, rgba(147,197,253,.30), transparent 56%),
    var(--bg);

  --brand-gradient: linear-gradient(135deg, #1a2e78 0%, #2563eb 58%, #60a5fa 100%);
  --focus-ring: 0 0 0 3px rgba(47,123,255,.22);
}

html[data-ui-theme="graphite-night"] {
  color-scheme: dark;

  --bg: #080d14;
  --bg-elevated: #0e1623;
  --surface: rgba(18,27,42,.94);
  --surface-2: #131f31;
  --surface-3: #1b2a40;
  --card-bg: rgba(18,27,42,.92);
  --card-header-bg: linear-gradient(180deg, rgba(25,36,55,.98), rgba(15,23,36,.96));

  --text: #eef4ff;
  --text-muted: #a8b8d2;
  --text-soft: #7f91af;

  --primary: #7db5ff;
  --primary-strong: #4f8cff;
  --primary-soft: rgba(125,181,255,.16);

  --success: #35d07f;
  --success-soft: rgba(53,208,127,.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251,191,36,.15);
  --danger: #fb7185;
  --danger-soft: rgba(251,113,133,.15);

  --border: rgba(168,184,210,.14);
  --border-strong: rgba(168,184,210,.22);
  --shadow: 0 18px 46px rgba(0,0,0,.46);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.32);
  --shadow-strong: 0 24px 60px rgba(0,0,0,.56);

  --body-bg-art:
    radial-gradient(at 18% 8%, rgba(79,140,255,.18), transparent 56%),
    radial-gradient(at 82% 26%, rgba(34,211,238,.10), transparent 58%),
    radial-gradient(at 62% 92%, rgba(15,23,42,.85), transparent 56%),
    var(--bg);

  --brand-gradient: linear-gradient(135deg, #05070d 0%, #172033 52%, #334155 100%);
  --focus-ring: 0 0 0 3px rgba(125,181,255,.24);
}

html[data-ui-theme="fresh-green"] {
  color-scheme: light;

  --bg: #edf9f0;
  --bg-elevated: #f7fdf8;
  --surface: rgba(255,255,255,.94);
  --surface-2: #f6fbf7;
  --surface-3: #eaf7ee;
  --card-bg: rgba(255,255,255,.92);
  --card-header-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,248,242,.95));

  --text: #102018;
  --text-muted: #5f7468;
  --text-soft: #8ca096;

  --primary: #159957;
  --primary-strong: #0f7f47;
  --primary-soft: rgba(21,153,87,.12);

  --success: #16a34a;
  --success-soft: rgba(22,163,74,.13);
  --warning: #d97706;
  --warning-soft: rgba(217,119,6,.14);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.12);

  --border: rgba(21,153,87,.14);
  --border-strong: rgba(21,153,87,.22);
  --shadow: 0 16px 42px rgba(21,153,87,.10);
  --shadow-soft: 0 8px 22px rgba(15,23,42,.055);
  --shadow-strong: 0 22px 52px rgba(15,23,42,.14);

  --body-bg-art:
    radial-gradient(at 18% 8%, rgba(34,197,94,.24), transparent 56%),
    radial-gradient(at 82% 26%, rgba(125,211,252,.18), transparent 58%),
    radial-gradient(at 62% 92%, rgba(187,247,208,.34), transparent 56%),
    var(--bg);

  --brand-gradient: linear-gradient(135deg, #064e3b 0%, #159957 58%, #86efac 100%);
  --focus-ring: 0 0 0 3px rgba(21,153,87,.22);
}

.premium-body,
.app-body {
  background: var(--body-bg-art);
}

/* Shared component aliases */
.ui-card,
.card,
.section-card {
  background: var(--card-bg, var(--surface));
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--card-radius, 16px);
  box-shadow: var(--shadow-soft);
}

.ui-card-header,
.card-header {
  background: var(--card-header-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

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

.ui-pill,
.ui-chip,
.meta-chip,
.dashboard-pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ui-pill--success,
.ui-chip--success,
.meta-chip.green,
.status-badge--ok {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success), transparent 70%);
  color: var(--success);
}

.ui-pill--warning,
.ui-chip--warning,
.meta-chip.amber,
.status-badge--warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning), transparent 68%);
  color: var(--warning);
}

.ui-pill--danger,
.ui-chip--danger,
.meta-chip.red,
.status-badge--danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger), transparent 68%);
  color: var(--danger);
}

.ui-btn,
.btn,
.btn-primary,
.btn-outline,
.btn-soft,
.btn-edit,
.edit-pill {
  border-radius: 12px;
  font-weight: 800;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

.ui-btn:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ui-btn--primary,
.btn-primary,
.dashboard-start-btn {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: #fff;
}

.ui-btn--soft,
.btn,
.btn-soft,
.btn-edit,
.edit-pill {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}

.ui-table,
table {
  color: var(--text);
}

.ui-table th,
th {
  color: var(--text-muted);
}

.ui-table td,
td {
  border-bottom-color: var(--border);
}

.ui-input,
.ui-select,
.ui-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

/* Dashboard compatibility: keep current markup working while using v2 tokens. */
.dashboard-page-shell,
.dashboard-main,
.dashboard-main--hero {
  color: var(--text);
}

.dashboard-page .page-intro-title,
.dashboard-page .dashboard-section-title,
.dashboard-page .lesson-row-name,
.dashboard-page .list-row-title,
.dashboard-page .nl-learner,
.dashboard-page .nl-time {
  color: var(--text);
}

.dashboard-page .muted,
.dashboard-page .page-intro-meta,
.dashboard-page .dashboard-summary-text,
.dashboard-page .lesson-row-meta,
.dashboard-page .list-row-meta,
.dashboard-page .nl-kicker,
.dashboard-page .sub {
  color: var(--text-muted);
}

.dashboard-page .nl-card,
.dashboard-page .dashboard-lesson-row,
.dashboard-page .attnRow,
.dashboard-page .list-row,
.dashboard-page .aqAcc,
.dashboard-page .needsSummary,
.dashboard-page .dashboard-section-flat {
  background: var(--card-bg, var(--surface));
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.dashboard-page .dashboard-summary-bar,
.dashboard-page .dashboard-today,
.dashboard-page .aqBody,
.dashboard-page .needsBody {
  background: var(--surface-2);
  border-color: var(--border);
}

.dashboard-page .premium-header--instructor .premium-header-inner,
.premium-header--instructor .premium-header-inner {
  background: var(--brand-gradient);
}

html[data-ui-theme="graphite-night"] .dashboard-page .nl-card,
html[data-ui-theme="graphite-night"] .dashboard-page .dashboard-lesson-row,
html[data-ui-theme="graphite-night"] .dashboard-page .attnRow,
html[data-ui-theme="graphite-night"] .dashboard-page .list-row,
html[data-ui-theme="graphite-night"] .dashboard-page .aqAcc,
html[data-ui-theme="graphite-night"] .dashboard-page .needsSummary,
html[data-ui-theme="graphite-night"] .dashboard-page .section-card {
  background: linear-gradient(180deg, rgba(22,32,49,.96), rgba(13,20,32,.94));
}

@supports not (color: color-mix(in srgb, red, white)) {
  .ui-pill--success,
  .ui-chip--success,
  .meta-chip.green,
  .status-badge--ok { border-color: rgba(22,163,74,.28); }

  .ui-pill--warning,
  .ui-chip--warning,
  .meta-chip.amber,
  .status-badge--warning { border-color: rgba(245,158,11,.32); }

  .ui-pill--danger,
  .ui-chip--danger,
  .meta-chip.red,
  .status-badge--danger { border-color: rgba(239,68,68,.30); }
}

/* ============================================================
   SimpL OS Design System v2.1
   Dashboard hard-code replacement layer
   Loaded after premium.css. Do not remove until dashboard styles
   are fully migrated from premium.css into .ui-* components.
   ============================================================ */

/* Dashboard shell */
.dashboard-core .premium-main,
.dashboard-page-shell {
  color: var(--text) !important;
  background: transparent !important;
}

.dashboard-core .page-intro-title,
.dashboard-core .dashboard-section-title,
.dashboard-core .empty-hero-title,
.dashboard-core .list-row-title,
.dashboard-core .lesson-row-name,
.dashboard-core .nl-learner,
.dashboard-core .nl-time,
.dashboard-core .dashboard-priority-title,
.dashboard-core .list-row-right {
  color: var(--text) !important;
}

.dashboard-core .page-intro-meta,
.dashboard-core .muted,
.dashboard-core .dashboard-summary-text,
.dashboard-core .empty-hero-meta,
.dashboard-core .list-row-meta,
.dashboard-core .lesson-row-meta,
.dashboard-core .nl-kicker,
.dashboard-core .nl-meta,
.dashboard-core .sub,
.dashboard-core .aqMeta,
.dashboard-core .dashboard-priority-meta {
  color: var(--text-muted) !important;
}

/* Dashboard cards and rows */
.dashboard-core .section-card,
.dashboard-core .nl-card,
.dashboard-core .needsSummary,
.dashboard-core .aqAcc details,
.dashboard-core .list-row,
.dashboard-core .attnRow,
.dashboard-core .dashboard-priority-card {
  background: var(--card-bg, var(--surface)) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
}

.dashboard-core .dashboard-today,
.dashboard-core .dashboard-summary-bar,
.dashboard-core .aqBody,
.dashboard-core .needsBody,
.dashboard-core .dashboard-sub-actions .btn,
.dashboard-core .dashboard-row-actions .btn:not(.btn-primary) {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.dashboard-core .needsBody {
  border-top-color: var(--border) !important;
}

/* Keep timetable flat but theme the separator */
.dashboard-core .lessons-timetable > .list-row.dashboard-lesson-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-core .lessons-timetable > .list-row.dashboard-lesson-row + .list-row.dashboard-lesson-row::before {
  background: var(--border) !important;
}

/* Dashboard buttons */
.dashboard-core .btn,
.dashboard-core .btn-soft,
.dashboard-core .btn-edit,
.dashboard-core .edit-pill {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.dashboard-core .btn:hover,
.dashboard-core .btn-soft:hover,
.dashboard-core .btn-edit:hover,
.dashboard-core .edit-pill:hover {
  background: var(--surface-3) !important;
}

.dashboard-core .btn-primary,
.dashboard-core .dashboard-start-btn,
.dashboard-core .dashboard-row-actions .btn.btn-primary {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary)) !important;
  border-color: color-mix(in srgb, var(--primary), transparent 45%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary), transparent 72%) !important;
}

/* Dashboard badges/chips */
.dashboard-core .status-badge,
.dashboard-core .aqCount,
.dashboard-core .meta-chip,
.dashboard-core .dashboard-pill {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
  border-radius: 12px !important;
}

.dashboard-core .status-badge--ok,
.dashboard-core .meta-chip.green {
  background: var(--success-soft) !important;
  border-color: color-mix(in srgb, var(--success), transparent 70%) !important;
  color: var(--success) !important;
}

.dashboard-core .status-badge--warning,
.dashboard-core .meta-chip.amber {
  background: var(--warning-soft) !important;
  border-color: color-mix(in srgb, var(--warning), transparent 68%) !important;
  color: var(--warning) !important;
}

.dashboard-core .status-badge--danger,
.dashboard-core .meta-chip.red {
  background: var(--danger-soft) !important;
  border-color: color-mix(in srgb, var(--danger), transparent 68%) !important;
  color: var(--danger) !important;
}

/* Legacy dashboard/list cards outside dashboard-core */
.stat-card,
.priority-item,
.tile,
.list-row {
  background: var(--card-bg, var(--surface));
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.stat-label,
.stat-meta,
.priority-meta,
.tile-desc,
.tile-sub,
.tile-meta,
.list-row-meta {
  color: var(--text-muted);
}

.stat-value,
.priority-title,
.tile-title,
.list-row-title,
.list-row-right {
  color: var(--text);
}

.priority-icon,
.tile-icon {
  background: var(--primary-soft);
  border-color: var(--border-strong);
  color: var(--primary-strong);
}

.tile-badge {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

/* Header brand gradient now follows selected theme */
.premium-header--instructor .premium-header-inner,
.dashboard-core .premium-header--instructor .premium-header-inner {
  background: var(--brand-gradient) !important;
}

/* Graphite polish: use darker elevated surfaces but keep text readable */
html[data-ui-theme="graphite-night"] .dashboard-core .section-card,
html[data-ui-theme="graphite-night"] .dashboard-core .nl-card,
html[data-ui-theme="graphite-night"] .dashboard-core .needsSummary,
html[data-ui-theme="graphite-night"] .dashboard-core .aqAcc details,
html[data-ui-theme="graphite-night"] .dashboard-core .list-row,
html[data-ui-theme="graphite-night"] .dashboard-core .attnRow,
html[data-ui-theme="graphite-night"] .dashboard-core .dashboard-priority-card,
html[data-ui-theme="graphite-night"] .stat-card,
html[data-ui-theme="graphite-night"] .priority-item,
html[data-ui-theme="graphite-night"] .tile {
  background: linear-gradient(180deg, rgba(22,32,49,.96), rgba(13,20,32,.94)) !important;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .dashboard-core .btn-primary,
  .dashboard-core .dashboard-start-btn,
  .dashboard-core .dashboard-row-actions .btn.btn-primary {
    border-color: rgba(47,123,255,.45) !important;
    box-shadow: 0 12px 28px rgba(47,123,255,.28) !important;
  }

  .dashboard-core .status-badge--ok,
  .dashboard-core .meta-chip.green { border-color: rgba(22,163,74,.30) !important; }

  .dashboard-core .status-badge--warning,
  .dashboard-core .meta-chip.amber { border-color: rgba(245,158,11,.32) !important; }

  .dashboard-core .status-badge--danger,
  .dashboard-core .meta-chip.red { border-color: rgba(239,68,68,.30) !important; }
}


/* ============================================================
   SimpL OS Design System v2.2
   Dashboard Standardisation Pass 1
   Canonical dashboard components. Safe compatibility layer.
   ============================================================ */

/* Make the dashboard use the canonical app canvas. */
html[data-ui-theme] body.dashboard-page,
html[data-ui-theme] body.dashboard-core {
  background: var(--body-bg-art) !important;
  color: var(--text) !important;
}

.dashboard-page .premium-main,
.dashboard-core .premium-main,
.dashboard-page-shell,
.ui-page.dashboard-page-shell {
  max-width: var(--page-max-wide, 1080px) !important;
  background: transparent !important;
  color: var(--text) !important;
}

/* Canonical dashboard card */
.ui-card,
.dashboard-page .section-card,
.dashboard-page .nl-card,
.dashboard-page .empty-hero,
.dashboard-page .needsSummary,
.dashboard-page .aqAcc details,
.dashboard-page .list-row,
.dashboard-page .attnRow,
.dashboard-page .dashboard-priority-card {
  background: var(--card-bg, var(--surface)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--card-radius, 16px) !important;
  box-shadow: var(--shadow-soft) !important;
}

.dashboard-page .dashboard-section-flat,
.dashboard-page .section-card.dashboard-section-flat {
  padding: 1rem !important;
}

.dashboard-page .dashboard-section-head,
.dashboard-page .ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--text) !important;
}

/* Canonical dashboard typography */
.dashboard-page .page-intro-title,
.dashboard-page .dashboard-section-title,
.dashboard-page .empty-hero-title,
.dashboard-page .list-row-title,
.dashboard-page .lesson-row-name,
.dashboard-page .nl-learner,
.dashboard-page .t,
.dashboard-page .dashboard-priority-title,
.dashboard-page .aqItemTitle,
.dashboard-page .aqGroupTitle,
.dashboard-page .list-row-right {
  color: var(--text) !important;
}

.dashboard-page .page-intro-meta,
.dashboard-page .muted,
.dashboard-page .dashboard-summary-text,
.dashboard-page .empty-hero-meta,
.dashboard-page .list-row-meta,
.dashboard-page .lesson-row-meta,
.dashboard-page .nl-kicker,
.dashboard-page .sub,
.dashboard-page .aqMeta,
.dashboard-page .aqItemMeta,
.dashboard-page .dashboard-priority-meta {
  color: var(--text-muted) !important;
}

/* Canonical dashboard pill */
.ui-pill,
.dashboard-page .status-badge,
.dashboard-page .aqCount,
.dashboard-page .meta-chip,
.dashboard-page .dashboard-pill {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.dashboard-page .dashboard-summary-pill {
  min-height:32px;
  padding:2px 12px;
  gap:8px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.dashboard-page .summary-count,
.dashboard-page .summary-icon {
  color: var(--primary-strong) !important;
}

.dashboard-page .dashboard-summary-pill--credit .summary-count,
.dashboard-page .dashboard-summary-pill--credit .summary-icon {
  color: var(--warning) !important;
}

.dashboard-page .dashboard-summary-pill--lessons .summary-count,
.dashboard-page .dashboard-summary-pill--lessons .summary-icon {
  color: var(--primary-strong) !important;
}

.dashboard-page .status-badge--ok,
.dashboard-page .ui-pill--success {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success), transparent 70%) !important;
}

.dashboard-page .status-badge--warning,
.dashboard-page .ui-pill--warning {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border-color: color-mix(in srgb, var(--warning), transparent 68%) !important;
}

.dashboard-page .status-badge--danger,
.dashboard-page .ui-pill--danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger), transparent 68%) !important;
}

/* Canonical dashboard buttons */
.ui-btn,
.dashboard-page .btn,
.dashboard-page button.btn:not(.btn-primary):not(.ui-btn--primary),
.dashboard-page a.btn:not(.btn-primary):not(.ui-btn--primary) {
  min-height: 38px !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}

.dashboard-page .btn-sm,
.dashboard-page .btn-small {
  min-height: 32px !important;
  padding: .32rem .65rem !important;
  font-size: .76rem !important;
}

.dashboard-page .btn-primary,
.dashboard-page .dashboard-start-btn,
.dashboard-page .ui-btn--primary {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary)) !important;
  border-color: color-mix(in srgb, var(--primary), transparent 45%) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary), transparent 72%) !important;
}

.dashboard-page .btn:hover,
.dashboard-page .ui-btn:hover {
  transform: translateY(-1px);
  background: var(--surface-3) !important;
}

.dashboard-page .btn-primary:hover,
.dashboard-page .dashboard-start-btn:hover,
.dashboard-page .ui-btn--primary:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong)) !important;
}

/* Canonical list rows */
.dashboard-page .list-stack {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.dashboard-page .list-row,
.dashboard-page .aqItemRow {
  border-radius: 14px !important;
}

.dashboard-page .list-row-side,
.dashboard-page .aqItemRight {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
}

/* Today timetable keeps its compact, row-like layout. */
.dashboard-page .lessons-timetable > .dashboard-lesson-row-link,
.dashboard-page .lessons-timetable > .list-row.dashboard-lesson-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.dashboard-page .dashboard-lesson-row-link:hover,
.dashboard-page .lessons-timetable > .list-row.dashboard-lesson-row:hover {
  background: var(--surface-2) !important;
}

.dashboard-page .lesson-row-time {
  background: var(--primary-soft) !important;
  color: var(--primary-strong) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
}

/* Need attention accordion */
.dashboard-page .needsSummary,
.dashboard-page .aqGroupSummary {
  color: var(--text) !important;
}

.dashboard-page .needsBody,
.dashboard-page .aqBody {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

.dashboard-page .attnDismiss {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
}

.dashboard-page .attnDismiss:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger), transparent 68%) !important;
}

/* Next lesson hero */
.dashboard-page .nl-card {
  overflow: hidden;
}

.dashboard-page .nl-ring-watermark {
  display: block;
  position: absolute;
  top: -38px;
  right: -46px;
  width: 250px;
  height: 250px;
  max-width: none;
  object-fit: contain;
  opacity: .12 !important;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.dashboard-page .nl-card > *:not(.nl-ring-watermark) {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .dashboard-page .nl-ring-watermark {
    top: -30px;
    right: -38px;
    width: 205px;
    height: 205px;
    opacity: .10 !important;
  }
}


.dashboard-page .dashboard-sub-actions {
  background: transparent !important;
  border: 0 !important;
}

/* Graphite Night polish */
html[data-ui-theme="graphite-night"] .dashboard-page .section-card,
html[data-ui-theme="graphite-night"] .dashboard-page .nl-card,
html[data-ui-theme="graphite-night"] .dashboard-page .empty-hero,
html[data-ui-theme="graphite-night"] .dashboard-page .needsSummary,
html[data-ui-theme="graphite-night"] .dashboard-page .aqAcc details,
html[data-ui-theme="graphite-night"] .dashboard-page .list-row,
html[data-ui-theme="graphite-night"] .dashboard-page .attnRow,
html[data-ui-theme="graphite-night"] .dashboard-page .dashboard-priority-card {
  background: linear-gradient(180deg, rgba(22,32,49,.96), rgba(13,20,32,.94)) !important;
}

html[data-ui-theme="graphite-night"] .dashboard-page .needsBody,
html[data-ui-theme="graphite-night"] .dashboard-page .aqBody {
  background: rgba(8,13,20,.52) !important;
}

/* Fresh Green polish */
html[data-ui-theme="fresh-green"] .dashboard-page .summary-count,
html[data-ui-theme="fresh-green"] .dashboard-page .summary-icon,
html[data-ui-theme="fresh-green"] .dashboard-page .lesson-row-time {
  color: var(--primary-strong) !important;
}

@supports not (color: color-mix(in srgb, red, white)) {
  .dashboard-page .btn-primary,
  .dashboard-page .dashboard-start-btn,
  .dashboard-page .ui-btn--primary {
    border-color: rgba(47,123,255,.45) !important;
    box-shadow: 0 12px 28px rgba(47,123,255,.22) !important;
  }
  .dashboard-page .status-badge--ok,
  .dashboard-page .ui-pill--success { border-color: rgba(22,163,74,.30) !important; }
  .dashboard-page .status-badge--warning,
  .dashboard-page .ui-pill--warning { border-color: rgba(245,158,11,.32) !important; }
  .dashboard-page .status-badge--danger,
  .dashboard-page .ui-pill--danger { border-color: rgba(239,68,68,.30) !important; }
}

/* ============================================================
   SimpL OS Design System v2.4
   Dashboard Need Attention true compact collapsed state
   Purpose: remove the large blank card/body area when Need Attention is closed.
   This belongs in design-system.css so premium.css can be retired gradually.
   ============================================================ */

/* Keep the wrapper from adding its own empty vertical space. */
.dashboard-page .deck.stack-lg,
.dashboard-core .deck.stack-lg{
  gap: 0 !important;
  margin-bottom: 0 !important;
}

/* Closed card = one compact header row only. */
body.dashboard-page .deckColQueue.needs-card.is-collapsed,
.dashboard-page .deckColQueue.needs-card.is-collapsed,
.dashboard-core .deckColQueue.needs-card.is-collapsed,
.dashboard-page .section-card.dashboard-section-flat.needs-card.is-collapsed{
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

.dashboard-page .needs-card.is-collapsed .needsDetails,
.dashboard-core .needs-card.is-collapsed .needsDetails{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.dashboard-page .needs-card.is-collapsed .needsSummary,
.dashboard-core .needs-card.is-collapsed .needsSummary,
body.dashboard-page .needs-card.is-collapsed .needsSummary{
  display: block !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
}

.dashboard-page .needs-card.is-collapsed .needsSummary::-webkit-details-marker,
.dashboard-core .needs-card.is-collapsed .needsSummary::-webkit-details-marker{
  display: none !important;
}

.dashboard-page .needs-card.is-collapsed .needsSummary .dashboard-section-head,
.dashboard-core .needs-card.is-collapsed .needsSummary .dashboard-section-head,
body.dashboard-page .needs-card.is-collapsed .needsSummary .dashboard-section-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

.dashboard-page .needs-card.is-collapsed .dashboard-section-title,
.dashboard-core .needs-card.is-collapsed .dashboard-section-title{
  margin: 0 !important;
  line-height: 1.15 !important;
}

.dashboard-page .needs-card.is-collapsed .needsBody,
.dashboard-page .needs-card.is-collapsed .aqAcc,
.dashboard-page .needs-card.is-collapsed .aqGroupStatic,
.dashboard-core .needs-card.is-collapsed .needsBody,
.dashboard-core .needs-card.is-collapsed .aqAcc,
.dashboard-core .needs-card.is-collapsed .aqGroupStatic,
body.dashboard-page .needs-card.is-collapsed .needsBody{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* Arrow behaviour. */
.dashboard-page .needs-arrow,
.dashboard-core .needs-arrow{
  display: inline-block !important;
  margin-left: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform .18s ease !important;
}

.dashboard-page .needsDetails[open] .needs-arrow,
.dashboard-core .needsDetails[open] .needs-arrow{
  transform: rotate(90deg) !important;
}

/* Open card returns to normal roomy card layout. */
.dashboard-page .needs-card:not(.is-collapsed),
.dashboard-core .needs-card:not(.is-collapsed){
  padding: 1rem !important;
}

.dashboard-page .needs-card:not(.is-collapsed) .needsBody,
.dashboard-core .needs-card:not(.is-collapsed) .needsBody{
  display: block !important;
  margin-top: 14px !important;
}

/* Do not add a large artificial tail after the final dashboard card. */
.dashboard-page .premium-main,
.dashboard-core .premium-main,
.dashboard-page-shell{
  margin-bottom: 0 !important;
}

@media (max-width: 520px){
  body.dashboard-page .deckColQueue.needs-card.is-collapsed,
  .dashboard-page .deckColQueue.needs-card.is-collapsed,
  .dashboard-core .deckColQueue.needs-card.is-collapsed{
    padding: 0 !important;
  }

  .dashboard-page .needs-card.is-collapsed .needsSummary,
  .dashboard-core .needs-card.is-collapsed .needsSummary,
  body.dashboard-page .needs-card.is-collapsed .needsSummary{
    padding: 18px 20px !important;
  }
}


/* ============================================================
   Need Attention - dropdown open fix
   The compact card uses .is-collapsed only while the <details> is closed.
   When opened, body content must always become visible.
   ============================================================ */

.dashboard-page .needs-card:not(.is-collapsed),
.dashboard-core .needs-card:not(.is-collapsed){
  padding: 1rem !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.dashboard-page .needs-card:not(.is-collapsed) .needsBody,
.dashboard-page .needs-card:not(.is-collapsed) .aqAcc,
.dashboard-page .needs-card:not(.is-collapsed) .aqGroupStatic,
.dashboard-core .needs-card:not(.is-collapsed) .needsBody,
.dashboard-core .needs-card:not(.is-collapsed) .aqAcc,
.dashboard-core .needs-card:not(.is-collapsed) .aqGroupStatic{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.dashboard-page .needs-card:not(.is-collapsed) .needsBody,
.dashboard-core .needs-card:not(.is-collapsed) .needsBody{
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}

.dashboard-page .needs-card:not(.is-collapsed) .needsSummary,
.dashboard-core .needs-card:not(.is-collapsed) .needsSummary{
  padding: 0 !important;
  margin: 0 !important;
}

.dashboard-page .needsDetails[open] .needs-arrow,
.dashboard-core .needsDetails[open] .needs-arrow{
  transform: rotate(90deg) !important;
}

/* ============================================================
   14. SHEETS / MODALS
   Shared bottom-sheet modal used for invite flows and actions.
   Backwards-compatible aliases keep old .sheet* markup working.
   ============================================================ */

.ds-sheet-overlay,
.ds-ds-sheet-overlay,
.sheetOverlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

.ds-sheet-overlay.open,
.ds-ds-sheet-overlay.open,
.sheetOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.ds-sheet,
.sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  transform:translateY(105%);
  transition:transform .24s ease;
  padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  pointer-events:none;
}

.ds-sheet.open,
.sheet.open{
  transform:translateY(0);
  pointer-events:auto;
}

.ds-sheet-card,
.sheetCard{
  width:100%;
  max-width:640px;
  margin:0 auto;
  overflow:hidden;
  border-radius:24px 24px 18px 18px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-strong);
}

.ds-sheet-handle,
.sheetHandle{
  width:48px;
  height:5px;
  margin:12px auto 10px;
  border-radius:999px;
  background:var(--border-strong);
}

.ds-sheet-head,
.sheetHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:2px 20px 16px;
}

.ds-sheet-title,
.sheetTitle{
  margin:0;
  color:var(--text);
  font-size:20px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
}

.ds-sheet-sub,
.sheetSub{
  margin-top:5px;
  color:var(--text-muted);
  font-size:14px;
  font-weight:650;
  line-height:1.35;
}

.ds-sheet-close,
.sheetClose{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text);
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.ds-sheet-body,
.sheetBody{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 20px 18px;
}

.ds-sheet-action,
.sheetAction{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:70px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none !important;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.ds-sheet-action:hover,
.sheetAction:hover{
  transform:translateY(-1px);
  background:var(--surface-3);
  box-shadow:var(--shadow-soft);
}

.ds-sheet-icon,
.sheetIcon{
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border-strong);
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-size:22px;
  line-height:1;
}

.ds-sheet-txt,
.sheetTxt{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.ds-sheet-txt b,
.sheetTxt b{
  color:var(--text);
  font-size:15px;
  font-weight:900;
  line-height:1.15;
}

.ds-sheet-txt span,
.sheetTxt span{
  color:var(--text-muted);
  font-size:13px;
  font-weight:650;
  line-height:1.3;
}

.ds-sheet-note,
.sheetNote{
  margin-top:2px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}

.ds-sheet-footer,
.sheetFooter{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 20px 20px;
}

.ds-sheet-cancel,
.sheetCancel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
}

.ds-sheet-hidden-form,
.vcf-hidden-form{
  display:none;
}

@media (max-width:520px){
  .ds-sheet,
  .sheet{
    padding-left:8px;
    padding-right:8px;
  }

  .ds-sheet-card,
  .sheetCard{
    border-radius:22px 22px 14px 14px;
  }

  .ds-sheet-head,
  .sheetHead{
    padding-left:16px;
    padding-right:16px;
  }

  .ds-sheet-body,
  .sheetBody{
    padding-left:16px;
    padding-right:16px;
  }

  .ds-sheet-footer,
  .sheetFooter{
    padding-left:16px;
    padding-right:16px;
  }
}

/* ============================================================
   SIMPLOS DASHBOARD POLISH - HEADER / KPI / SETTINGS CLEANUP
   ============================================================ */

/* Give the polished header more brand weight, but keep it compact. */
.premium-header--instructor .premium-header-top{
  min-height:82px;
  padding:13px 18px;
}

.premium-header--instructor .premium-brand img{
  height:42px;
  max-width:min(340px, 62vw);
}

.premium-header--instructor .premium-brand-subtitle{
  margin-left:82px;
  font-size:.88rem;
}

.premium-header--instructor .premium-header-btn,
.premium-header--instructor .premium-header-back{
  min-height:42px;
  padding:0 14px;
  border-radius:16px;
  font-size:.92rem;
  font-weight:780;
}

/* Remove the floating settings/admin gear from the dashboard hero area.
   Settings should live under the More tab in the bottom navigation. */
.dashboard-core .dashboard-section-head--hero,
.dashboard-core .dashboard-main--hero .dashboard-section-head,
.dashboard-core .dashboard-admin-btn,
.dashboard-core a[href*="settings"].dashboard-admin-btn,
.dashboard-core a[href*="premium-settings"].dashboard-admin-btn{
  display:none !important;
}

/* Pull the KPI strip up now that the floating gear has gone. */
.dashboard-core .premium-main{
  padding-top:10px;
}

.dashboard-core .dashboard-priority-strip{
  margin-top:0 !important;
  margin-bottom:18px;
}

.dashboard-core .dashboard-priority-grid{
  margin-top:0;
}

/* Keep KPI pills tighter and more aligned below the header. */
.dashboard-core .dashboard-priority-card,
.dashboard-core .meta-chip{
  min-height:58px;
  border-radius:18px;
}

@media (max-width:560px){
  .premium-header--instructor .premium-header-shell{
    width:calc(100% - 20px);
    padding-top:10px;
  }

  .premium-header--instructor .premium-header-top{
    min-height:76px;
    padding:12px 14px;
    gap:10px;
  }

  .premium-header--instructor .premium-brand img{
    height:36px;
    max-width:min(205px, 50vw);
  }

  .premium-header--instructor .premium-brand-subtitle{
    margin-left:64px;
    font-size:.72rem;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .premium-header--instructor .premium-header-btn,
  .premium-header--instructor .premium-header-back{
    min-height:38px;
    padding:0 11px;
    border-radius:14px;
    font-size:.86rem;
  }

  .dashboard-core .premium-main{
    padding-top:8px;
  }
}

/* ============================================================
   SIMPLOS SHARED PAGE WIDTH + MIGRATED PAGE COMPONENTS
   Source of truth for learner-split and instructor-dashboard.
   These styles were moved out of page-specific <style> blocks.
   ============================================================ */
:root {
  --simplos-page-max: 1200px;
  --simplos-page-gap: 14px;
  --simplos-card-radius: 18px;
}

.simplos-page,
.simplos-page-inner,
.learner-page,
.page-inner {
  width: 100%;
  max-width: var(--simplos-page-max);
  margin: 0 auto;
}

.premium-main.simplos-page,
.dashboard-page-shell.simplos-page {
  width: 100%;
  max-width: var(--simplos-page-max);
  margin: 0 auto 2.5rem;
  padding-left: var(--page-pad-x, 1rem);
  padding-right: var(--page-pad-x, 1rem);
  background: transparent;
}

/* Universal aliases. Keep using the old classes while migration is in progress. */
.simplos-content-card,
.ui-content-card {
  width: 100%;
  border-radius: var(--simplos-card-radius);
  overflow: hidden;
}

/* ---- learner-split migrated CSS ---- */
.learner-page{
  max-width: 1200px;
  margin: 0 auto;
}

/* New icon-matched learner screen polish */
.learner-page .card{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(47,123,255,.14);
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
  backdrop-filter: blur(14px);
}

.learner-page .card-body{
  background:
    radial-gradient(circle at 8% 0%, rgba(47,123,255,.08), transparent 34%),
    radial-gradient(circle at 95% 18%, rgba(183,230,78,.08), transparent 32%),
    rgba(255,255,255,.72);
}

.learner-page .card-header{
  background:
    linear-gradient(180deg, rgba(248,252,255,.96), rgba(238,247,255,.90));
  border-bottom: 1px solid rgba(47,123,255,.12);
}

.page-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.learner-overview-top{
  padding: 16px 14px 0;
}

.learner-overview-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.learner-overview-title-row h1{
  margin:0;
  font-size:clamp(1.45rem, 4vw, 2rem);
  line-height:1.1;
  color:#0f172a;
}

.learner-overview-sub{
  margin:6px 0 0;
  color:#64748b;
  font-size:.9rem;
}

.actions-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  width:100%;
  align-items:start;
}

.action-icon-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
  text-decoration:none;
  color:#475569;
  font-size:12px;
  font-weight:700;
  text-align:center;
  line-height:1.15;
  transition:transform .18s ease, opacity .18s ease;
}

.action-icon-link:hover{
  transform:translateY(-2px);
  opacity:.92;
}

.action-icon-link:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:4px;
  border-radius:14px;
}

.action-icon-link img{
  width:84px;
  height:84px;
  object-fit:contain;
  display:block;
}

.action-icon-link span{
  display:block;
  max-width:96px;
}

.learner-overview-divider{
  width:100%;
  border-top:1px dashed rgba(47,123,255,.16);
  margin:14px 0;
}

.learner-overview-status{
  width:100%;
}

.status-toast{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  color:#166534;
  padding:10px 12px;
  border-radius:12px;
  margin:12px 0 0 0;
  font-size:13px;
}

.status-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.status-label{
  font-size:13px;
  font-weight:700;
  color:#475569;
}

.status-select{
  min-width:140px;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}

.status-save-btn{
  white-space:nowrap;
}

.credit-notice{
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  padding:10px 12px;
  border-radius:12px;
  margin:12px 0 0 0;
  font-size:13px;
  line-height:1.35;
}

.credit-notice strong{
  font-weight:600;
}

.credit-notice.red{
  border-color:#ef4444;
  background:#fee2e2;
  color:#991b1b;
}

.credit-notice.amber{
  border-color:#f59e0b;
  background:#fef3c7;
  color:#92400e;
}

.credit-notice .meta{
  display:block;
  margin-top:4px;
  font-size:12px;
  opacity:.85;
}

.briefing-wrap{
  margin: 14px 0 16px;
  border: 1px solid rgba(47,123,255,.12);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  overflow: hidden;
}

.briefing-head{
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(47,123,255,.12), rgba(92,200,255,.12));
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.briefing-head h2{
  margin:0;
  font-size: 0.92rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #0f172a;
}

.briefing-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.briefing-card{
  border: 1px solid rgba(47,123,255,.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,248,255,.92));
  padding: 12px;
}

.briefing-title{
  font-weight:800;
  font-size:.92rem;
  margin:0 0 6px;
  color:#0f172a;
}

.briefing-sub{
  font-size: .86rem;
  color:#475569;
  margin: 0 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.briefing-text,
.briefing-mini{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
  font-size:.92rem;
  color:#0f172a;
}

.briefing-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.briefing-quick{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding: 14px;
}

.briefing-quick-left{
  min-width: 220px;
  flex: 1;
}

.briefing-quick-title{
  margin:0 0 6px;
  font-weight:900;
  color:#0f172a;
  font-size:.95rem;
}

.briefing-quick-sub{
  margin:0;
  font-size:.86rem;
  color:#64748b;
}

.briefing-quick-right{
  display:grid;
  grid-template-columns:repeat(3,minmax(130px,1fr));
  gap:10px;
  width:100%;
}

.briefing-quick-right .meta-chip{
  justify-content:center;
  min-height:38px;
}

.briefing-details{
  border-top: 1px dashed #e5e7eb;
  padding: 10px 14px 14px;
}

.briefing-summary{
  cursor:pointer;
  user-select:none;
  font-weight:900;
  font-size:13px;
  color:#0f172a;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background:#fff;
}

.briefing-summary::-webkit-details-marker{
  display:none;
}

.briefing-summary .hint{
  font-weight:700;
  color:#64748b;
  font-size:12px;
}

.briefing-summary::before{
  content:"▸";
  display:inline-block;
  margin-right:8px;
  transform: translateY(-1px);
  opacity:.85;
}

.briefing-details[open] .briefing-summary::before{
  content:"▾";
}

.briefing-details-inner{
  margin-top:12px;
}

.source-note{
  font-size: 12px;
  color:#64748b;
}

.meta-chip{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:64px;
  padding:14px 18px;

  border-radius:12px;

  border:1px solid rgba(47,123,255,.15);

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    rgba(244,248,255,.92)
  );

  box-shadow:0 2px 8px rgba(15,23,42,.04);

  color:#334155;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

.meta-chip.green{
  background:linear-gradient(
    180deg,
    rgba(239,255,246,.96),
    rgba(245,255,249,.94)
  );

  border-color:rgba(111,207,151,.30);
  color:#047857;
}

.meta-chip.amber{
  background:linear-gradient(
    180deg,
    rgba(255,250,235,.96),
    rgba(255,247,237,.94)
  );

  border-color:rgba(245,158,11,.28);
  color:#b45309;
}

.meta-chip.red{
  background:linear-gradient(
    180deg,
    rgba(255,245,245,.96),
    rgba(254,242,242,.94)
  );

  border-color:rgba(239,68,68,.25);
  color:#b91c1c;
}

.meta-chip.blue{
  background:linear-gradient(
    180deg,
    rgba(248,252,255,.96),
    rgba(239,246,255,.94)
  );

  border-color:rgba(47,123,255,.18);
  color:#1d4ed8;
}

.ledger-wrap{
  margin: 12px 0 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
  overflow-x:auto;
}

.ledger-head{
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(59,130,246,.10));
  border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.ledger-head h2{
  margin:0;
  font-size: 0.92rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:#0f172a;
}

.ledger-head .right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.ledger-body{
  padding: 12px 14px;
}

.ledger-note{
  margin:0 0 10px;
  color:#64748b;
  font-size:0.9rem;
}

.ledger-table{
  width:100%;
  border-collapse:collapse;
}

.ledger-table th,
.ledger-table td{
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align:left;
  font-size: 13px;
  vertical-align: top;
}

.ledger-table th{
  font-weight:800;
  color:#0f172a;
  background:#f8fafc;
}

.ledger-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.ledger-pill.in{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}

.ledger-pill.out{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#9f1239;
}

.ledger-muted{
  color:#6b7280;
}

.ledger-balance{
  font-weight:900;
  white-space:nowrap;
}

.ledger-balance.low{
  color:#b45309;
}

.ledger-balance.bad{
  color:#b91c1c;
}

.ledger-details{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed #e5e7eb;
}

.ledger-summary{
  cursor:pointer;
  user-select:none;
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  list-style:none;
}

.ledger-summary::-webkit-details-marker{
  display:none;
}

.ledger-summary::before{
  content:"▸";
  display:inline-block;
  margin-right:8px;
  transform: translateY(-1px);
  opacity:.8;
}

.ledger-details[open] .ledger-summary::before{
  content:"▾";
}

.ledger-compact-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ledger-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
}

.ledger-row.in{
  border-left:4px solid #10b981;
}

.ledger-row.out{
  border-left:4px solid #ef4444;
}

.ledger-left{
  flex:1;
  min-width:0;
}

.ledger-date{
  font-weight:800;
  font-size:14px;
  color:#0f172a;
}

.ledger-note-mini{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ledger-middle{
  text-align:right;
  min-width:70px;
}

.ledger-paid{
  font-weight:700;
  font-size:13px;
  color:#0f172a;
}

.ledger-units{
  font-weight:900;
  font-size:13px;
}

.ledger-row.in .ledger-units{
  color:#065f46;
}

.ledger-row.out .ledger-units{
  color:#9f1239;
}

.ledger-right{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  min-width:70px;
  text-align:right;
}

@media (max-width: 900px){
  .briefing-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  .ledger-hide-sm{
    display:none;
  }
}

@media (max-width: 720px){
  .learner-overview-top{
    padding:14px 12px 0;
  }

  .learner-overview-sub{
    font-size:13px;
    line-height:1.25;
  }

  .briefing-quick{
    padding:12px;
  }

  .briefing-quick-right{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .briefing-quick-right .meta-chip{
    min-height:42px;
    padding:8px 8px;
    font-size:12px;
    text-align:center;
  }

  .learner-overview-divider{
    margin:12px 0;
  }

  .actions-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }

  .action-icon-link{
    gap:5px;
    font-size:11px;
  }

  .action-icon-link img{
    width:72px;
    height:72px;
  }

  .action-icon-link span{
    max-width:82px;
  }

  .status-form{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:stretch;
  }

  .status-select,
  .status-save-btn{
    width:100%;
  }
}

/* ---- instructor-dashboard migrated CSS ---- */
.nl-meta-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
  }

  .nl-payment-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    padding:5px 9px;
    border-radius:10px;
    border:1px solid rgba(15,23,42,.08);
    font-size:12px;
    font-weight:800;
    line-height:1;
    box-shadow:0 3px 10px rgba(15,23,42,.05);
  }

  .nl-payment-pill.is-paid{
    color:#166534;
    border-color:rgba(22,101,52,.16);
    background:linear-gradient(180deg, rgba(240,253,244,.96), rgba(220,252,231,.92));
  }

  .nl-payment-pill.is-low{
    color:#92400e;
    border-color:rgba(146,64,14,.16);
    background:linear-gradient(180deg, rgba(255,251,235,.96), rgba(254,243,199,.92));
  }

  .nl-payment-pill.is-test{
    color:#1d4ed8;
    border-color:rgba(37,99,235,.18);
    background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(219,234,254,.92));
  }



  .nl-card-finished{
    position:relative;
    overflow:hidden;
    min-height:0;
  }

  .nl-card-finished .nl-top{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .nl-card-finished .nl-lesson-head{
    display:block;
  }

  .nl-card-finished .nl-finished-icon{
    min-width:0;
    max-width:100%;
  }

  .nl-card-finished .nl-finished-icon .t{
    display:flex;
    align-items:center;
    gap:10px;
    max-width:520px;
    color:#0f172a;
    font-size:clamp(30px, 5vw, 46px);
    font-weight:950;
    line-height:1.02;
    letter-spacing:-.045em;
    white-space:normal;
  }

  .nl-card-finished .nl-finished-icon .sub{
    margin-top:8px;
    color:#64748b;
    font-size:14px;
    font-weight:850;
  }

  .nl-card-finished .nl-main{
    width:100%;
  }

  .nl-card-finished .nl-finished-next{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 10px;
    max-width:100%;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(47,123,255,.16);
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(239,246,255,.88));
    color:#334155;
    box-shadow:0 8px 18px rgba(15,23,42,.05);
    font-size:13px;
    font-weight:850;
    line-height:1.15;
  }

  .nl-card-finished .nl-finished-next-label{
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .nl-card-finished .nl-finished-next strong{
    color:#0f172a;
    font-size:14px;
    font-weight:950;
  }

  .nl-card-finished .nl-finished-next span:not(.nl-finished-next-label){
    color:#475569;
  }

  .nl-card-finished .dashboard-lesson-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(160px,.45fr);
    gap:12px;
    width:100%;
  }

  .nl-card-finished .nl-ring-watermark{
    opacity:.12;
  }

  @media (max-width: 560px){
    .nl-card-finished{
      padding:18px 18px 20px;
    }

    .nl-card-finished .nl-top{
      gap:16px;
    }

    .nl-card-finished .nl-finished-icon .t{
      font-size:clamp(28px, 9vw, 36px);
      line-height:1.04;
    }

    .nl-card-finished .nl-finished-icon .sub{
      font-size:13px;
    }

    .nl-card-finished .nl-finished-next{
      display:none;
    }

    .nl-card-finished .dashboard-lesson-actions{
      grid-template-columns:1fr;
      gap:10px;
    }
  }

  .nl-next-pill{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    max-width:100%;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(37,99,235,.16);
    background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(219,234,254,.82));
    color:#1d4ed8;
    font-size:13px;
    font-weight:900;
    line-height:1.15;
    box-shadow:0 4px 14px rgba(37,99,235,.07);
  }

  .nl-next-pill .label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#64748b;
  }

  .nl-next-pill .date,
  .nl-next-pill .name{
    display:block;
  }

  .today-complete-row{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    padding:28px 8px 18px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .today-complete-row::before{
    content:"✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    width:28px;
    height:28px;
    margin-top:1px;
    border-radius:999px;
    background:#22c55e;
    color:#fff;
    font-size:1rem;
    font-weight:950;
    line-height:1;
    box-shadow:0 6px 14px rgba(34,197,94,.20);
  }

  .today-complete-row .list-row-title{
    margin:0;
    color:#0f172a;
    font-weight:950;
  }

  .today-complete-row .list-row-meta{
    margin:4px 0 0;
    color:#64748b;
  }



/* ============================================================
   UNIVERSAL APP LAYOUT / ACTION CARDS
   Used first on admin.php. Use the same class names across:
   dashboard, learner-split, payments, calendar, settings.
   ============================================================ */
:root {
  --app-page-max: 1200px;
  --app-page-pad-x: 12px;
  --app-card-radius: 18px;
  --app-card-border: 1px solid rgba(15, 23, 42, .06);
  --app-card-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  --app-card-shadow-hover: 0 10px 26px rgba(15, 23, 42, .10);
}

/* Wider, cleaner page rhythm for the app screens. */
.ui-page--app,
.simplos-page,
.premium-main {
  width: 100%;
  max-width: var(--app-page-max);
  margin-left: auto;
  margin-right: auto;
}

.ui-card--flush {
  padding: 0;
}

.ui-card-body--flush {
  padding: 0;
}

.simplos-card {
  width: 100%;
  border-radius: var(--app-card-radius);
  border: var(--app-card-border);
  box-shadow: var(--app-card-shadow);
  overflow: hidden;
}

/* Universal launcher grid. */
.ui-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

@media (max-width: 820px) {
  .ui-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.ui-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px;
  border-radius: 16px;
  border: var(--app-card-border);
  background: #ffffff;
  box-shadow: var(--app-card-shadow);
  color: #0f172a !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

button.ui-action-card,
.ui-action-card[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {
  .ui-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-card-shadow-hover);
  }
}

.ui-action-card:active {
  transform: scale(.99);
}

.ui-action-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-action-title {
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-action-sub {
  margin-top: 2px;
  font-size: .78rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-action-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color: #2563eb;
}

.ui-action-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.ui-action-icon svg * {
  stroke: currentColor;
}

/* Colour accents for universal action cards. */
.iw-calendar { color:#2563eb; background:rgba(37,99,235,.12); border-color:rgba(37,99,235,.25); }
.iw-message  { color:#4f46e5; background:rgba(79,70,229,.12); border-color:rgba(79,70,229,.25); }
.iw-announce { color:#d97706; background:rgba(217,119,6,.14); border-color:rgba(217,119,6,.25); }
.iw-learner  { color:#16a34a; background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.25); }
.iw-staff    { color:#0d9488; background:rgba(13,148,136,.12); border-color:rgba(13,148,136,.25); }
.iw-slots    { color:#0891b2; background:rgba(8,145,178,.12); border-color:rgba(8,145,178,.25); }
.iw-dash     { color:#1d4ed8; background:rgba(29,78,216,.12); border-color:rgba(29,78,216,.25); }

@media (prefers-reduced-motion: reduce) {
  .ui-action-card {
    transition: none !important;
  }
}


/* ============================================================
   DASHBOARD HERO FOCUS + READABLE LEARNER DETAILS
   Keep this at the bottom so it wins over older dashboard rules.
   ============================================================ */
body.dashboard-page .nl-card.is-current{
  border-color:rgba(34,197,94,.62) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.22),
    0 0 34px rgba(34,197,94,.36),
    0 18px 52px rgba(34,197,94,.18),
    0 12px 34px rgba(2,8,23,.08) !important;
}

body.dashboard-page .nl-card.is-current .nl-kicker{
  color:#15803d !important;
}

body.dashboard-page .nl-card.is-upcoming{
  border-color:rgba(47,123,255,.56) !important;
  box-shadow:
    0 0 0 1px rgba(47,123,255,.20),
    0 0 34px rgba(47,123,255,.30),
    0 18px 52px rgba(47,123,255,.15),
    0 12px 34px rgba(2,8,23,.08) !important;
}

body.dashboard-page .nl-card.is-upcoming .nl-kicker{
  color:#1d4ed8 !important;
}

body.dashboard-page .needs-card.is-empty{
  padding-bottom:16px !important;
}

body.dashboard-page .needs-card.is-empty .needsBody{
  padding-top:0 !important;
}

body.dashboard-page .needs-card.is-empty .aqItemRow--empty{
  min-height:0 !important;
  padding:10px 0 2px !important;
  border:0 !important;
  background:transparent !important;
}

body.dashboard-page .needs-card.is-empty .aqItemTitle{
  color:#166534 !important;
  font-weight:900 !important;
}

/* ============================================================
   LESSON SESSION — DASHBOARD MATCH
   ============================================================ */
body.lesson-session-screen.dashboard-core .lesson-session-main,
body.lesson-session-page.dashboard-core .lesson-session-main{
  max-width: min(1080px, calc(100% - 24px)) !important;
  margin: 0 auto 2.5rem !important;
  padding: 16px 0 calc(var(--bottomNavH) + 34px) !important;
  background: transparent !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-hero,
body.lesson-session-page.dashboard-core .lesson-session-hero{
  position: relative !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 24px 34px 26px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(47,123,255,.18) !important;
  background:
    radial-gradient(circle at 88% 52%, rgba(92,200,255,.20), transparent 34%),
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.72), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,252,255,.82)) !important;
  box-shadow: 0 18px 44px rgba(47,123,255,.10) !important;
  color: #0f172a !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-hero--live,
body.lesson-session-page.dashboard-core .lesson-session-hero--live{
  border-color: rgba(34,197,94,.46) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.26),
    0 0 44px rgba(34,197,94,.26),
    0 18px 44px rgba(47,123,255,.10) !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-hero--not_started,
body.lesson-session-page.dashboard-core .lesson-session-hero--not_started{
  border-color: rgba(47,123,255,.38) !important;
  box-shadow:
    0 0 0 1px rgba(47,123,255,.22),
    0 0 42px rgba(47,123,255,.20),
    0 18px 44px rgba(47,123,255,.10) !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-hero-bg-ring,
body.lesson-session-page.dashboard-core .lesson-session-hero-bg-ring{
  position: absolute !important;
  right: 54px !important;
  top: 58% !important;
  width: 150px !important;
  height: 150px !important;
  transform: translateY(-50%) rotate(12deg) !important;
  border-radius: 999px !important;
  background: conic-gradient(from 12deg, rgba(47,123,255,.18), rgba(92,200,255,.10), rgba(132,204,22,.16), rgba(47,123,255,.18)) !important;
  opacity: .44 !important;
  pointer-events: none !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-hero-bg-ring::after,
body.lesson-session-page.dashboard-core .lesson-session-hero-bg-ring::after{
  content:"";
  position:absolute;
  inset:27px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
}

body.lesson-session-screen.dashboard-core .lesson-session-hero > *,
body.lesson-session-page.dashboard-core .lesson-session-hero > *{
  position: relative !important;
  z-index: 1 !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-hero-head,
body.lesson-session-page.dashboard-core .lesson-session-hero-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:14px !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-kicker,
body.lesson-session-page.dashboard-core .lesson-session-kicker{
  margin:0 !important;
  color:#1f7a43 !important;
  font-size:.82rem !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-subline,
body.lesson-session-page.dashboard-core .lesson-session-subline{
  margin:4px 0 0 !important;
  color:#64748b !important;
  font-size:1rem !important;
  font-weight:800 !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-state-pill,
body.lesson-session-page.dashboard-core .lesson-session-state-pill,
body.lesson-session-screen.dashboard-core .lesson-session-info-pill,
body.lesson-session-page.dashboard-core .lesson-session-info-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:32px !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:rgba(255,255,255,.82) !important;
  color:#0f172a !important;
  font-size:.85rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.05) !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-state-pill--live,
body.lesson-session-page.dashboard-core .lesson-session-state-pill--live,
body.lesson-session-screen.dashboard-core .lesson-session-info-pill.is-success,
body.lesson-session-page.dashboard-core .lesson-session-info-pill.is-success{
  border-color:rgba(22,163,74,.25) !important;
  background:rgba(220,252,231,.78) !important;
  color:#166534 !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-state-pill--not_started,
body.lesson-session-page.dashboard-core .lesson-session-state-pill--not_started,
body.lesson-session-screen.dashboard-core .lesson-session-info-pill.is-test,
body.lesson-session-page.dashboard-core .lesson-session-info-pill.is-test{
  border-color:rgba(47,123,255,.18) !important;
  background:rgba(239,246,255,.86) !important;
  color:#1d4ed8 !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-info-pill.is-warning,
body.lesson-session-page.dashboard-core .lesson-session-info-pill.is-warning{
  border-color:rgba(245,158,11,.34) !important;
  background:rgba(254,243,199,.86) !important;
  color:#92400e !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-info-pill.is-danger,
body.lesson-session-page.dashboard-core .lesson-session-info-pill.is-danger{
  border-color:rgba(239,68,68,.30) !important;
  background:rgba(254,226,226,.86) !important;
  color:#991b1b !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-info-pill.is-muted,
body.lesson-session-page.dashboard-core .lesson-session-info-pill.is-muted{
  color:#64748b !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-appointment,
body.lesson-session-page.dashboard-core .lesson-session-appointment{
  display:grid !important;
  grid-template-columns: 170px minmax(0,1fr) !important;
  gap:30px !important;
  align-items:start !important;
  margin: 4px 0 14px !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-time,
body.lesson-session-page.dashboard-core .lesson-session-time{
  color:#1f2937 !important;
  font-size:3rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-person h1,
body.lesson-session-page.dashboard-core .lesson-session-person h1{
  margin:0 !important;
  color:#071226 !important;
  font-size:2.8rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.06em !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-person p,
body.lesson-session-page.dashboard-core .lesson-session-person p{
  margin:8px 0 0 !important;
  color:#475569 !important;
  font-size:1rem !important;
  font-weight:850 !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-pill-row,
body.lesson-session-page.dashboard-core .lesson-session-pill-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:2px !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-work-card,
body.lesson-session-page.dashboard-core .lesson-session-work-card{
  background:rgba(255,255,255,.96) !important;
}
body.lesson-session-screen.dashboard-core .lesson-session-work-card .editor-title,
body.lesson-session-page.dashboard-core .lesson-session-work-card .editor-title,
body.lesson-session-screen.dashboard-core .lesson-focus-card .dashboard-section-title,
body.lesson-session-page.dashboard-core .lesson-focus-card .dashboard-section-title{
  color:#1a2e78 !important;
}
body.lesson-session-screen.dashboard-core .lesson-focus-card .session-focus-text,
body.lesson-session-page.dashboard-core .lesson-focus-card .session-focus-text{
  margin:0 0 12px !important;
  color:#334155 !important;
  font-weight:650 !important;
  line-height:1.5 !important;
}

@media (min-width: 992px){
  body.lesson-session-screen.dashboard-core .deck,
  body.lesson-session-page.dashboard-core .deck{
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr) !important;
  }
}

@media (max-width: 700px){
  body.lesson-session-screen.dashboard-core .lesson-session-main,
  body.lesson-session-page.dashboard-core .lesson-session-main{
    width: min(100% - 24px, 1080px) !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-hero,
  body.lesson-session-page.dashboard-core .lesson-session-hero{
    padding:18px 18px 20px !important;
    border-radius:28px !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-hero-head,
  body.lesson-session-page.dashboard-core .lesson-session-hero-head{
    flex-direction:column !important;
    gap:12px !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-appointment,
  body.lesson-session-page.dashboard-core .lesson-session-appointment{
    grid-template-columns:92px minmax(0,1fr) !important;
    gap:16px !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-time,
  body.lesson-session-page.dashboard-core .lesson-session-time{
    font-size:2.45rem !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-person h1,
  body.lesson-session-page.dashboard-core .lesson-session-person h1{
    font-size:2.15rem !important;
  }
  body.lesson-session-screen.dashboard-core .lesson-session-hero-bg-ring,
  body.lesson-session-page.dashboard-core .lesson-session-hero-bg-ring{
    right:-36px !important;
    width:118px !important;
    height:118px !important;
    opacity:.30 !important;
  }
}

/* ============================================================
   LESSON SESSION — WORKSPACE V3
   Session briefing + plan and live notes cockpit layout.
   ============================================================ */
body.lesson-session-screen.dashboard-core .lesson-session-main,
body.lesson-session-page.dashboard-core .lesson-session-main{
  max-width:min(1180px, calc(100% - 24px)) !important;
}

body.lesson-session-screen.dashboard-core .lesson-session-work-card,
body.lesson-session-page.dashboard-core .lesson-session-work-card{
  padding:18px !important;
  border-radius:24px !important;
}

body.lesson-session-screen.dashboard-core .session-workspace-grid,
body.lesson-session-page.dashboard-core .session-workspace-grid{
  display:grid !important;
  gap:16px !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-column,
body.lesson-session-page.dashboard-core .session-briefing-column,
body.lesson-session-screen.dashboard-core .session-notes-column,
body.lesson-session-page.dashboard-core .session-notes-column{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head,
body.lesson-session-page.dashboard-core .session-briefing-head{
  position:relative !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:20px !important;
  border:1px solid rgba(47,123,255,.18) !important;
  background:
    radial-gradient(circle at top left, rgba(47,123,255,.11), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,252,255,.88)) !important;
  box-shadow:0 10px 26px rgba(47,123,255,.08) !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head.lesson-session-hero--live,
body.lesson-session-page.dashboard-core .session-briefing-head.lesson-session-hero--live{
  border-color:rgba(34,197,94,.40) !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.18),
    0 0 26px rgba(34,197,94,.16),
    0 10px 26px rgba(47,123,255,.08) !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head.lesson-session-hero--not_started,
body.lesson-session-page.dashboard-core .session-briefing-head.lesson-session-hero--not_started{
  border-color:rgba(47,123,255,.34) !important;
  box-shadow:
    0 0 0 1px rgba(47,123,255,.16),
    0 0 24px rgba(47,123,255,.14),
    0 10px 26px rgba(47,123,255,.08) !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-appointment,
body.lesson-session-page.dashboard-core .session-briefing-appointment{
  grid-template-columns:104px minmax(0,1fr) !important;
  gap:18px !important;
  margin:0 0 12px !important;
  align-items:start !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-time,
body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-time{
  font-size:2.25rem !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-person h1,
body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-person h1{
  font-size:2rem !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-person p,
body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-person p{
  margin-top:5px !important;
  font-size:.9rem !important;
}

body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-pill-row,
body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-pill-row{
  margin-top:8px !important;
}

body.lesson-session-screen.dashboard-core .continue-last-lesson-card,
body.lesson-session-page.dashboard-core .continue-last-lesson-card{
  margin:0 !important;
  padding:16px !important;
  border:1px solid rgba(47,123,255,.12) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,252,255,.82)) !important;
}

body.lesson-session-screen.dashboard-core .continue-last-lesson-card .dashboard-section-head,
body.lesson-session-page.dashboard-core .continue-last-lesson-card .dashboard-section-head{
  padding-bottom:10px !important;
  margin-bottom:12px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

body.lesson-session-screen.dashboard-core .continue-last-lesson-card .dashboard-section-title,
body.lesson-session-page.dashboard-core .continue-last-lesson-card .dashboard-section-title{
  color:#1a2e78 !important;
}

body.lesson-session-screen.dashboard-core .continue-last-lesson-card .session-focus-text,
body.lesson-session-page.dashboard-core .continue-last-lesson-card .session-focus-text{
  margin:0 0 10px !important;
  color:#334155 !important;
  font-weight:650 !important;
  line-height:1.5 !important;
}

body.lesson-session-screen.dashboard-core .quick-note-toolbar,
body.lesson-session-page.dashboard-core .quick-note-toolbar{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:0 0 12px !important;
}

body.lesson-session-screen.dashboard-core .quick-note-btn,
body.lesson-session-page.dashboard-core .quick-note-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:7px 11px !important;
  border-radius:12px !important;
  border:1px solid rgba(47,123,255,.16) !important;
  background:rgba(239,246,255,.86) !important;
  color:#1d4ed8 !important;
  font:inherit !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 6px 14px rgba(15,23,42,.04) !important;
}

body.lesson-session-screen.dashboard-core .quick-note-btn:hover,
body.lesson-session-page.dashboard-core .quick-note-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 20px rgba(47,123,255,.10) !important;
}

body.lesson-session-screen.dashboard-core .quick-note-btn:disabled,
body.lesson-session-page.dashboard-core .quick-note-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

body.lesson-session-screen.dashboard-core .session-live-notes-section .sessionTextarea,
body.lesson-session-page.dashboard-core .session-live-notes-section .sessionTextarea{
  min-height:360px !important;
}

body.lesson-session-screen.dashboard-core .session-plan-section .sessionTextarea,
body.lesson-session-page.dashboard-core .session-plan-section .sessionTextarea{
  min-height:220px !important;
}

body.lesson-session-screen.dashboard-core .session-mic-section,
body.lesson-session-page.dashboard-core .session-mic-section{
  margin-top:0 !important;
}

@media (min-width:900px){
  body.lesson-session-screen.dashboard-core .deck,
  body.lesson-session-page.dashboard-core .deck{
    grid-template-columns:1fr !important;
  }

  body.lesson-session-screen.dashboard-core .session-workspace-grid,
  body.lesson-session-page.dashboard-core .session-workspace-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) !important;
    align-items:start !important;
  }

  body.lesson-session-screen.dashboard-core .session-side-stack,
  body.lesson-session-page.dashboard-core .session-side-stack{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
}

@media (max-width:700px){
  body.lesson-session-screen.dashboard-core .lesson-session-work-card,
  body.lesson-session-page.dashboard-core .lesson-session-work-card{
    padding:14px !important;
    border-radius:22px !important;
  }

  body.lesson-session-screen.dashboard-core .session-briefing-head,
  body.lesson-session-page.dashboard-core .session-briefing-head{
    padding:15px !important;
    border-radius:18px !important;
  }

  body.lesson-session-screen.dashboard-core .session-briefing-appointment,
  body.lesson-session-page.dashboard-core .session-briefing-appointment{
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:14px !important;
  }

  body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-time,
  body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-time{
    font-size:2rem !important;
  }

  body.lesson-session-screen.dashboard-core .session-briefing-head .lesson-session-person h1,
  body.lesson-session-page.dashboard-core .session-briefing-head .lesson-session-person h1{
    font-size:1.7rem !important;
  }

  body.lesson-session-screen.dashboard-core .session-live-notes-section .sessionTextarea,
  body.lesson-session-page.dashboard-core .session-live-notes-section .sessionTextarea{
    min-height:260px !important;
  }

  body.lesson-session-screen.dashboard-core .session-plan-section .sessionTextarea,
  body.lesson-session-page.dashboard-core .session-plan-section .sessionTextarea{
    min-height:180px !important;
  }
}

/* Lesson Session: separate plan goals from focus/watch point */
body.lesson-session-screen.dashboard-core .session-plan-section .sessionTextarea.sessionTextarea--plan,
body.lesson-session-page.dashboard-core .session-plan-section .sessionTextarea.sessionTextarea--plan{
  min-height:140px !important;
}

body.lesson-session-screen.dashboard-core .today-focus-grid,
body.lesson-session-page.dashboard-core .today-focus-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:12px !important;
}

body.lesson-session-screen.dashboard-core .today-focus-box,
body.lesson-session-page.dashboard-core .today-focus-box{
  display:block !important;
  padding:13px 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(47,123,255,.14) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,252,255,.82)) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}

body.lesson-session-screen.dashboard-core .today-focus-box--focus,
body.lesson-session-page.dashboard-core .today-focus-box--focus{
  border-color:rgba(47,123,255,.18) !important;
  background:linear-gradient(180deg, rgba(239,246,255,.95), rgba(255,255,255,.88)) !important;
}

body.lesson-session-screen.dashboard-core .today-focus-box--watch,
body.lesson-session-page.dashboard-core .today-focus-box--watch{
  border-color:rgba(245,158,11,.22) !important;
  background:linear-gradient(180deg, rgba(255,247,223,.92), rgba(255,255,255,.88)) !important;
}

body.lesson-session-screen.dashboard-core .today-focus-kicker,
body.lesson-session-page.dashboard-core .today-focus-kicker{
  display:block !important;
  margin:0 0 7px !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:#1a2e78 !important;
}

body.lesson-session-screen.dashboard-core .today-focus-input,
body.lesson-session-page.dashboard-core .today-focus-input{
  display:block !important;
  width:100% !important;
  min-height:58px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  resize:vertical !important;
  background:transparent !important;
  color:#0f172a !important;
  font:inherit !important;
  font-size:.94rem !important;
  font-weight:650 !important;
  line-height:1.42 !important;
}

body.lesson-session-screen.dashboard-core .today-focus-input::placeholder,
body.lesson-session-page.dashboard-core .today-focus-input::placeholder{
  color:#94a3b8 !important;
  font-weight:600 !important;
}

@media (max-width:700px){
  body.lesson-session-screen.dashboard-core .today-focus-grid,
  body.lesson-session-page.dashboard-core .today-focus-grid{
    grid-template-columns:1fr !important;
  }

  body.lesson-session-screen.dashboard-core .session-plan-section .sessionTextarea.sessionTextarea--plan,
  body.lesson-session-page.dashboard-core .session-plan-section .sessionTextarea.sessionTextarea--plan{
    min-height:120px !important;
  }
}


/* ============================================================
   SimpL OS: Next Lesson card no-glow override
   Keeps the coloured border but removes coloured outer glow.
   ============================================================ */
body.dashboard-page .nl-card,
body.dashboard-page .dashboard-main--hero .nl-card,
body.dashboard-page .dashboard-main--hero .section-card,
body.dashboard-page .next-lesson-hero,
body.dashboard-page .hero-next-lesson{
  box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

body.dashboard-page .nl-card.is-current,
body.dashboard-page .nl-card.is-upcoming,
body.dashboard-page .nl-card.is-automatic-card,
body.dashboard-page .nl-card.is-current.is-automatic-card,
body.dashboard-page .nl-card.is-upcoming.is-automatic-card,
body.dashboard-page .nl-card.is-adapted-card,
body.dashboard-page .nl-card.is-current.is-adapted-card,
body.dashboard-page .nl-card.is-upcoming.is-adapted-card,
body.dashboard-page .nl-card.is-driving-test-card,
body.dashboard-page .nl-card.is-current.is-driving-test-card,
body.dashboard-page .nl-card.is-upcoming.is-driving-test-card{
  box-shadow: 0 12px 28px rgba(15,23,42,.08) !important;
}

/* Remove the coloured wash that can look like a glow inside/around the card. */
body.dashboard-page .nl-card::before{
  background: none !important;
  opacity: 0 !important;
}

/* Keep subtle card tint for lesson type, but no radial glow. */
body.dashboard-page .nl-card.is-automatic-card,
body.dashboard-page .nl-card.is-current.is-automatic-card,
body.dashboard-page .nl-card.is-upcoming.is-automatic-card{
  background: linear-gradient(180deg, rgba(250,255,252,.98), rgba(255,255,255,.96)) !important;
}

body.dashboard-page .nl-card.is-adapted-card,
body.dashboard-page .nl-card.is-current.is-adapted-card,
body.dashboard-page .nl-card.is-upcoming.is-adapted-card{
  background: linear-gradient(180deg, rgba(253,250,255,.98), rgba(255,255,255,.96)) !important;
}

body.dashboard-page .nl-card.is-driving-test-card,
body.dashboard-page .nl-card.is-current.is-driving-test-card,
body.dashboard-page .nl-card.is-upcoming.is-driving-test-card{
  background: linear-gradient(180deg, rgba(255,252,242,.98), rgba(255,255,255,.96)) !important;
}


/* No-show status */
.ui-pill--no-show,
.no-show-pill{
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #991b1b !important;
}


/* SimpL OS calendar framed row override */


  /* ============================================================
     SimpL OS calendar — professional framed rows
     This deliberately removes the heavy block colours/gradients.
     Status is now shown by border, dot and icon only.
     ============================================================ */
body.dashboard-core .fc .fc-list-table{
    border-collapse:separate !important;
    border-spacing:0 7px !important;
  }

body.dashboard-core .fc .fc-list-event{
    background:transparent !important;
  }

body.dashboard-core .fc .fc-list-event td{
    background:#ffffff !important;
    color:#0f172a !important;
    border-top:1px solid rgba(226,232,240,.95) !important;
    border-bottom:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 6px 16px rgba(15,23,42,.045) !important;
    vertical-align:middle !important;
  }

body.dashboard-core .fc .fc-list-event td:first-child{
    border-left:5px solid var(--cal-accent, #2f7bff) !important;
    border-radius:13px 0 0 13px !important;
  }

body.dashboard-core .fc .fc-list-event td:last-child{
    border-right:1px solid rgba(226,232,240,.95) !important;
    border-radius:0 13px 13px 0 !important;
  }

body.dashboard-core .fc .fc-list-event:hover td{
    background:#f8fbff !important;
    box-shadow:0 8px 20px rgba(15,23,42,.07) !important;
  }

body.dashboard-core .fc .fc-list-event-time{
    color:#64748b !important;
    font-weight:850 !important;
    font-size:.82rem !important;
    letter-spacing:-.01em !important;
    white-space:nowrap !important;
  }

body.dashboard-core .fc .fc-list-event-title,
body.dashboard-core .fc .fc-list-event-title a,
body.dashboard-core .fc .fc-simpl-title,
body.dashboard-core .fc .fc-simpl-name{
    color:#0f172a !important;
    text-shadow:none !important;
    font-weight:900 !important;
    line-height:1.18 !important;
  }

body.dashboard-core .fc .fc-list-event-dot{
    border-color:var(--cal-accent, #2f7bff) !important;
    background:var(--cal-accent, #2f7bff) !important;
    box-shadow:0 0 0 3px var(--cal-soft, rgba(47,123,255,.14)) !important;
  }

body.dashboard-core .fc .fc-simpl-title{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }

body.dashboard-core .fc .fc-simpl-icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:var(--cal-soft, rgba(47,123,255,.12)) !important;
    color:var(--cal-accent, #2f7bff) !important;
    font-size:.82rem !important;
    font-weight:950 !important;
  }

body.dashboard-core .fc .fc-simpl-name{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Manual / standard lesson */
body.dashboard-core .fc .event-scheduled,
body.dashboard-core .fc .simpl-vehicle-manual{
    --cal-accent:#2f7bff;
    --cal-soft:rgba(47,123,255,.13);
  }

  /* Automatic lesson */
body.dashboard-core .fc .simpl-vehicle-automatic{
    --cal-accent:#16a34a;
    --cal-soft:rgba(22,163,74,.13);
  }

  /* Adapted lesson */
body.dashboard-core .fc .simpl-vehicle-adapted{
    --cal-accent:#8b5cf6;
    --cal-soft:rgba(139,92,246,.14);
  }

  /* Available slot */
body.dashboard-core .fc .simpl-available,
body.dashboard-core .fc .simpl-vehicle-any{
    --cal-accent:#0ea5e9;
    --cal-soft:rgba(14,165,233,.14);
  }

  /* Driving test */
body.dashboard-core .fc .simpl-driving-test{
    --cal-accent:#d97706;
    --cal-soft:rgba(217,119,6,.15);
  }

  /* Unavailable / holiday */
body.dashboard-core .fc .simpl-unavailable{
    --cal-accent:#f59e0b;
    --cal-soft:rgba(245,158,11,.14);
  }

  /* Completed, cancelled, no-show states keep the same framed language. */
body.dashboard-core .fc .event-completed{
    --cal-accent:#16a34a;
    --cal-soft:rgba(22,163,74,.13);
  }

body.dashboard-core .fc .event-cancelled{
    --cal-accent:#94a3b8;
    --cal-soft:rgba(148,163,184,.16);
    opacity:.82;
  }

body.dashboard-core .fc .event-no-show{
    --cal-accent:#ef4444;
    --cal-soft:rgba(239,68,68,.14);
  }

body.dashboard-core .fc .event-cancelled .fc-simpl-name,
body.dashboard-core .fc .event-no-show .fc-simpl-name{
    color:#475569 !important;
  }

  /* Kill older heavy fills no matter which selector wins earlier. */
body.dashboard-core .fc .event-completed td,
body.dashboard-core .fc .event-no-show td,
body.dashboard-core .fc .simpl-available td,
body.dashboard-core .fc .simpl-driving-test td,
body.dashboard-core .fc .simpl-unavailable td,
body.dashboard-core .fc .simpl-vehicle-automatic td,
body.dashboard-core .fc .simpl-vehicle-adapted td,
body.dashboard-core .fc .simpl-vehicle-any td{
    background:#ffffff !important;
    color:#0f172a !important;
    border-color:rgba(226,232,240,.95) !important;
  }

body.dashboard-core .fc .fc-list-day-cushion{
    border-radius:14px !important;
    background:#1f2937 !important;
    padding:8px 14px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.10) !important;
  }

body.dashboard-core .fc .fc-list-day{
    background:transparent !important;
  }

body.dashboard-core .fc .fc-list-day th{
    border:0 !important;
    padding:10px 0 4px !important;
    background:transparent !important;
  }

  @media (max-width:720px){
  body.dashboard-core .fc .fc-list-table{
      border-spacing:0 6px !important;
    }

  body.dashboard-core .fc .fc-list-event td{
      padding-top:10px !important;
      padding-bottom:10px !important;
    }

  body.dashboard-core .fc .fc-list-event-time{
      width:112px !important;
      min-width:112px !important;
      font-size:.78rem !important;
    }

  body.dashboard-core .fc .fc-simpl-title{
      gap:6px !important;
    }
  }





/* ============================================================
   FINAL CALENDAR POLISH - true outline cards, no colour fills
   ============================================================ */
body.dashboard-core .fc .fc-list-table{
  border-collapse:separate !important;
  border-spacing:0 8px !important;
}

body.dashboard-core .fc .fc-list-event,
body.dashboard-core .fc .fc-list-event.simpl-available,
body.dashboard-core .fc .fc-list-event.simpl-driving-test,
body.dashboard-core .fc .fc-list-event.simpl-unavailable,
body.dashboard-core .fc .fc-list-event.event-completed,
body.dashboard-core .fc .fc-list-event.event-no-show,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-automatic,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-adapted,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-any,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-manual{
  background:transparent !important;
  background-image:none !important;
  color:#0f172a !important;
  box-shadow:none !important;
}

body.dashboard-core .fc .fc-list-event > td,
body.dashboard-core .fc .fc-list-event > th,
body.dashboard-core .fc .fc-list-event.simpl-available > td,
body.dashboard-core .fc .fc-list-event.simpl-driving-test > td,
body.dashboard-core .fc .fc-list-event.simpl-unavailable > td,
body.dashboard-core .fc .fc-list-event.event-completed > td,
body.dashboard-core .fc .fc-list-event.event-no-show > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-automatic > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-adapted > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-any > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-manual > td{
  background:#ffffff !important;
  background-image:none !important;
  color:#0f172a !important;
  border-top:1px solid var(--cal-accent, rgba(47,123,255,.55)) !important;
  border-bottom:1px solid var(--cal-accent, rgba(47,123,255,.55)) !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.045) !important;
  text-shadow:none !important;
}

body.dashboard-core .fc .fc-list-event > td:first-child{
  border-left:1px solid var(--cal-accent, rgba(47,123,255,.55)) !important;
  border-radius:14px 0 0 14px !important;
}

body.dashboard-core .fc .fc-list-event > td:last-child{
  border-right:1px solid var(--cal-accent, rgba(47,123,255,.55)) !important;
  border-radius:0 14px 14px 0 !important;
}

body.dashboard-core .fc .fc-list-event:hover > td{
  background:#fbfdff !important;
  background-image:none !important;
  box-shadow:0 7px 18px rgba(15,23,42,.07) !important;
}

body.dashboard-core .fc .fc-list-event-time,
body.dashboard-core .fc .fc-list-event-title,
body.dashboard-core .fc .fc-list-event-title a,
body.dashboard-core .fc .fc-simpl-title,
body.dashboard-core .fc .fc-simpl-name,
body.dashboard-core .fc .simpl-available .fc-simpl-title,
body.dashboard-core .fc .simpl-driving-test .fc-simpl-title,
body.dashboard-core .fc .simpl-unavailable .fc-simpl-title,
body.dashboard-core .fc .event-completed .fc-simpl-title,
body.dashboard-core .fc .event-no-show .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-automatic .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-adapted .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-any .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-manual .fc-simpl-title,
body.dashboard-core .fc .simpl-available a,
body.dashboard-core .fc .simpl-driving-test a,
body.dashboard-core .fc .simpl-unavailable a,
body.dashboard-core .fc .event-completed a,
body.dashboard-core .fc .event-no-show a{
  color:#0f172a !important;
  text-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
}

body.dashboard-core .fc .fc-list-event-time{
  color:#475569 !important;
  font-weight:850 !important;
}

body.dashboard-core .fc .fc-simpl-title{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

body.dashboard-core .fc .fc-simpl-icon{
  background:var(--cal-soft, rgba(47,123,255,.11)) !important;
  background-image:none !important;
  color:var(--cal-accent, #2f7bff) !important;
  border:1px solid var(--cal-soft, rgba(47,123,255,.18)) !important;
  box-shadow:none !important;
}

body.dashboard-core .fc .fc-list-event-dot{
  border-color:var(--cal-accent, #2f7bff) !important;
  background:var(--cal-accent, #2f7bff) !important;
  box-shadow:0 0 0 3px var(--cal-soft, rgba(47,123,255,.14)) !important;
}

body.dashboard-core .fc .simpl-vehicle-manual{ --cal-accent:#2f7bff; --cal-soft:rgba(47,123,255,.12); }
body.dashboard-core .fc .simpl-vehicle-automatic{ --cal-accent:#16a34a; --cal-soft:rgba(22,163,74,.12); }
body.dashboard-core .fc .simpl-vehicle-adapted{ --cal-accent:#8b5cf6; --cal-soft:rgba(139,92,246,.13); }
body.dashboard-core .fc .simpl-vehicle-any,
body.dashboard-core .fc .simpl-available{ --cal-accent:#0ea5e9; --cal-soft:rgba(14,165,233,.13); }
body.dashboard-core .fc .simpl-driving-test{ --cal-accent:#d97706; --cal-soft:rgba(217,119,6,.14); }
body.dashboard-core .fc .simpl-unavailable{ --cal-accent:#f59e0b; --cal-soft:rgba(245,158,11,.14); }
body.dashboard-core .fc .event-completed{ --cal-accent:#16a34a; --cal-soft:rgba(22,163,74,.12); }
body.dashboard-core .fc .event-cancelled{ --cal-accent:#94a3b8; --cal-soft:rgba(148,163,184,.15); opacity:.84; }
body.dashboard-core .fc .event-no-show{ --cal-accent:#ef4444; --cal-soft:rgba(239,68,68,.13); }

/* Driving tests and availability are important, but should still stay white. */
body.dashboard-core .fc .fc-list-event.simpl-driving-test > td,
body.dashboard-core .fc .fc-list-event.simpl-available > td,
body.dashboard-core .fc .fc-list-event.simpl-unavailable > td{
  background:#ffffff !important;
  background-image:none !important;
}

body.dashboard-core .fc .fc-list-day-cushion{
  border-radius:14px !important;
  background:#1f2937 !important;
  color:#ffffff !important;
  padding:8px 14px !important;
  box-shadow:0 5px 14px rgba(15,23,42,.10) !important;
}

@media (max-width:720px){
  body.dashboard-core .fc .fc-list-table{ border-spacing:0 7px !important; }
  body.dashboard-core .fc .fc-list-event > td{ padding-top:10px !important; padding-bottom:10px !important; }
  body.dashboard-core .fc .fc-list-event-time{ color:#334155 !important; }
}


/* ============================================================
   CALENDAR FINAL POLISH V4
   - Neutral white cards
   - 3px coloured left stripe only
   - No full coloured fills or coloured outlines
   - Better time/name hierarchy
   ============================================================ */
body.dashboard-core .fc .fc-list-table{
  border-collapse:separate !important;
  border-spacing:0 8px !important;
}

body.dashboard-core .fc .fc-list-event,
body.dashboard-core .fc .fc-list-event.simpl-available,
body.dashboard-core .fc .fc-list-event.simpl-driving-test,
body.dashboard-core .fc .fc-list-event.simpl-unavailable,
body.dashboard-core .fc .fc-list-event.event-completed,
body.dashboard-core .fc .fc-list-event.event-no-show,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-manual,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-automatic,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-adapted,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-any{
  --cal-line:#e7edf3;
  --cal-accent:#2f7bff;
  --cal-soft:rgba(47,123,255,.10);
  background:transparent !important;
  background-image:none !important;
  color:#0f172a !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:translateZ(0);
}

body.dashboard-core .fc .simpl-vehicle-manual{ --cal-accent:#2f7bff; --cal-soft:rgba(47,123,255,.10); }
body.dashboard-core .fc .simpl-vehicle-automatic{ --cal-accent:#16a34a; --cal-soft:rgba(22,163,74,.10); }
body.dashboard-core .fc .simpl-vehicle-adapted{ --cal-accent:#8b5cf6; --cal-soft:rgba(139,92,246,.11); }
body.dashboard-core .fc .simpl-vehicle-any,
body.dashboard-core .fc .simpl-available{ --cal-accent:#0ea5e9; --cal-soft:rgba(14,165,233,.10); }
body.dashboard-core .fc .simpl-driving-test{ --cal-accent:#d97706; --cal-soft:rgba(217,119,6,.11); }
body.dashboard-core .fc .simpl-unavailable{ --cal-accent:#f59e0b; --cal-soft:rgba(245,158,11,.11); }
body.dashboard-core .fc .event-completed{ --cal-accent:#16a34a; --cal-soft:rgba(22,163,74,.10); }
body.dashboard-core .fc .event-cancelled{ --cal-accent:#94a3b8; --cal-soft:rgba(148,163,184,.12); opacity:.82; }
body.dashboard-core .fc .event-no-show{ --cal-accent:#ef4444; --cal-soft:rgba(239,68,68,.10); }

body.dashboard-core .fc .fc-list-event > td,
body.dashboard-core .fc .fc-list-event > th,
body.dashboard-core .fc .fc-list-event.simpl-available > td,
body.dashboard-core .fc .fc-list-event.simpl-driving-test > td,
body.dashboard-core .fc .fc-list-event.simpl-unavailable > td,
body.dashboard-core .fc .fc-list-event.event-completed > td,
body.dashboard-core .fc .fc-list-event.event-no-show > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-manual > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-automatic > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-adapted > td,
body.dashboard-core .fc .fc-list-event.simpl-vehicle-any > td{
  background:#ffffff !important;
  background-image:none !important;
  color:#0f172a !important;
  border-top:1px solid var(--cal-line) !important;
  border-bottom:1px solid var(--cal-line) !important;
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:0 3px 10px rgba(15,23,42,.045) !important;
  text-shadow:none !important;
}

body.dashboard-core .fc .fc-list-event > td:first-child{
  border-left:3px solid var(--cal-accent) !important;
  border-radius:14px 0 0 14px !important;
  padding-left:12px !important;
}

body.dashboard-core .fc .fc-list-event > td:last-child{
  border-right:1px solid var(--cal-line) !important;
  border-radius:0 14px 14px 0 !important;
}

body.dashboard-core .fc .fc-list-event:hover > td,
body.dashboard-core .fc .fc-list-event:active > td{
  background:#ffffff !important;
  background-image:none !important;
  box-shadow:0 8px 20px rgba(15,23,42,.075) !important;
}

body.dashboard-core .fc .fc-list-event:active{
  transform:scale(.985);
}

body.dashboard-core .fc .fc-list-event-time,
body.dashboard-core .fc .fc-list-event-title,
body.dashboard-core .fc .fc-list-event-title a,
body.dashboard-core .fc .fc-simpl-title,
body.dashboard-core .fc .fc-simpl-name,
body.dashboard-core .fc .simpl-available .fc-simpl-title,
body.dashboard-core .fc .simpl-driving-test .fc-simpl-title,
body.dashboard-core .fc .simpl-unavailable .fc-simpl-title,
body.dashboard-core .fc .event-completed .fc-simpl-title,
body.dashboard-core .fc .event-no-show .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-manual .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-automatic .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-adapted .fc-simpl-title,
body.dashboard-core .fc .simpl-vehicle-any .fc-simpl-title,
body.dashboard-core .fc .simpl-available a,
body.dashboard-core .fc .simpl-driving-test a,
body.dashboard-core .fc .simpl-unavailable a,
body.dashboard-core .fc .event-completed a,
body.dashboard-core .fc .event-no-show a{
  color:#0f172a !important;
  text-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
}

body.dashboard-core .fc .fc-list-event-time{
  color:#64748b !important;
  font-weight:650 !important;
  letter-spacing:-.01em !important;
}

body.dashboard-core .fc .fc-simpl-title{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  line-height:1.12 !important;
}

body.dashboard-core .fc .fc-simpl-name{
  color:#0f172a !important;
  font-weight:850 !important;
  letter-spacing:-.015em !important;
}

body.dashboard-core .fc .fc-simpl-icon{
  width:19px !important;
  height:19px !important;
  min-width:19px !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--cal-soft) !important;
  background-image:none !important;
  color:var(--cal-accent) !important;
  border:1px solid color-mix(in srgb, var(--cal-accent) 20%, transparent) !important;
  box-shadow:none !important;
  font-size:12px !important;
  line-height:1 !important;
}

body.dashboard-core .fc .fc-list-event-dot{
  border-color:var(--cal-accent) !important;
  background:var(--cal-accent) !important;
  box-shadow:0 0 0 3px var(--cal-soft) !important;
}

/* Available slots get clearer wording without becoming a blue block. */
body.dashboard-core .fc .simpl-available .fc-simpl-name{
  color:#0f172a !important;
  font-weight:900 !important;
}

/* Driving tests: white card, gold accents only. */
body.dashboard-core .fc .simpl-driving-test .fc-list-event-time{
  color:#b45309 !important;
  font-weight:800 !important;
}
body.dashboard-core .fc .simpl-driving-test .fc-simpl-icon{
  background:rgba(217,119,6,.10) !important;
  border-color:rgba(217,119,6,.20) !important;
}

/* Day headers stay strong but slightly less bulky. */
body.dashboard-core .fc .fc-list-day-cushion{
  border-radius:13px !important;
  background:#1f2937 !important;
  color:#ffffff !important;
  padding:7px 13px !important;
  box-shadow:0 4px 12px rgba(15,23,42,.09) !important;
}

@media (max-width:720px){
  body.dashboard-core .fc .fc-list-table{ border-spacing:0 7px !important; }
  body.dashboard-core .fc .fc-list-event > td{ padding-top:10px !important; padding-bottom:10px !important; }
  body.dashboard-core .fc .fc-list-event-time{
    color:#64748b !important;
    font-weight:650 !important;
    width:112px !important;
    min-width:112px !important;
    font-size:.78rem !important;
  }
  body.dashboard-core .fc .fc-simpl-title{ gap:5px !important; }
  body.dashboard-core .fc .fc-simpl-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    font-size:11px !important;
  }
}

/* Calendar v5 note: status stripe + vehicle dot colours are defined in premium-calendar-framed-v5.css. */



  /* ============================================================
     V6 CALENDAR ACCENTS - coloured stripe/dot per type, neutral cards
     ============================================================ */
body.dashboard-core .fc .fc-list-event > td{
    background:#ffffff !important;
    background-image:none !important;
    color:#0f172a !important;
    border-top:1px solid #e7edf3 !important;
    border-bottom:1px solid #e7edf3 !important;
    box-shadow:0 3px 10px rgba(15,23,42,.045) !important;
  }

body.dashboard-core .fc .fc-list-event > td:first-child{
    border-left:3px solid var(--cal-type-color, #2f7bff) !important;
    border-radius:14px 0 0 14px !important;
  }

body.dashboard-core .fc .fc-list-event > td:last-child{
    border-right:1px solid #e7edf3 !important;
    border-radius:0 14px 14px 0 !important;
  }

body.dashboard-core .fc .cal-type-manual{ --cal-type-color:#2f7bff; --cal-type-soft:rgba(47,123,255,.12); }
body.dashboard-core .fc .cal-type-automatic{ --cal-type-color:#16a34a; --cal-type-soft:rgba(22,163,74,.13); }
body.dashboard-core .fc .cal-type-adapted{ --cal-type-color:#8b5cf6; --cal-type-soft:rgba(139,92,246,.14); }
body.dashboard-core .fc .cal-type-available{ --cal-type-color:#0ea5e9; --cal-type-soft:rgba(14,165,233,.13); }
body.dashboard-core .fc .cal-type-test{ --cal-type-color:#d97706; --cal-type-soft:rgba(217,119,6,.15); }
body.dashboard-core .fc .cal-type-unavailable{ --cal-type-color:#f59e0b; --cal-type-soft:rgba(245,158,11,.14); }
body.dashboard-core .fc .event-cancelled{ --cal-type-color:#94a3b8; --cal-type-soft:rgba(148,163,184,.16); }
body.dashboard-core .fc .event-no-show{ --cal-type-color:#ef4444; --cal-type-soft:rgba(239,68,68,.14); }

body.dashboard-core .fc .fc-list-event-dot{
    border-color:var(--cal-type-color, #2f7bff) !important;
    background:var(--cal-type-color, #2f7bff) !important;
    box-shadow:0 0 0 3px var(--cal-type-soft, rgba(47,123,255,.12)) !important;
  }

body.dashboard-core .fc .fc-simpl-icon{
    color:var(--cal-type-color, #2f7bff) !important;
    background:var(--cal-type-soft, rgba(47,123,255,.12)) !important;
    border-color:var(--cal-type-soft, rgba(47,123,255,.18)) !important;
  }

body.dashboard-core .fc .fc-list-event-time{
    color:#64748b !important;
    font-weight:650 !important;
  }

body.dashboard-core .fc .fc-simpl-name{
    color:#0f172a !important;
    font-weight:800 !important;
  }

body.dashboard-core .fc .fc-list-event.cal-type-test .fc-list-event-time,
body.dashboard-core .fc .fc-list-event.cal-type-test .fc-simpl-icon{
    color:#d97706 !important;
  }

body.dashboard-core .fc .fc-list-event:hover > td{
    background:#fbfdff !important;
    box-shadow:0 7px 18px rgba(15,23,42,.07) !important;
  }


/* ============================================================
   SimpL OS calendar mock-up v7
   M/A/wheelchair badges replace dots; completed clearly finished.
   ============================================================ */
body.dashboard-core .fc .fc-list-table{
  border-collapse:separate !important;
  border-spacing:0 7px !important;
}
body.dashboard-core .fc .fc-list-event,
body.dashboard-core .fc .fc-list-event:hover{
  background:transparent !important;
}
body.dashboard-core .fc .fc-list-event > td{
  background:#ffffff !important;
  background-image:none !important;
  color:#0f172a !important;
  border-top:1px solid #e7edf3 !important;
  border-bottom:1px solid #e7edf3 !important;
  box-shadow:0 4px 13px rgba(15,23,42,.055) !important;
  vertical-align:middle !important;
}
body.dashboard-core .fc .fc-list-event > td:first-child{
  border-left:4px solid var(--cal-type-color, #2f7bff) !important;
  border-radius:14px 0 0 14px !important;
}
body.dashboard-core .fc .fc-list-event > td:last-child{
  border-right:1px solid #e7edf3 !important;
  border-radius:0 14px 14px 0 !important;
}
body.dashboard-core .fc .fc-list-event:hover > td{
  background:#fbfdff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.075) !important;
  transform:translateY(-1px);
}
body.dashboard-core .fc .fc-list-event-time{
  color:#1f2a44 !important;
  font-weight:850 !important;
  font-size:.82rem !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
}
body.dashboard-core .fc .fc-list-event-dot{ display:none !important; }
body.dashboard-core .fc .fc-list-event-graphic{
  width:18px !important;
  min-width:18px !important;
  padding-left:4px !important;
  padding-right:4px !important;
}
body.dashboard-core .fc .fc-simpl-title{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}
body.dashboard-core .fc .fc-simpl-icon{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:var(--cal-type-color, #2f7bff) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.70) !important;
  box-shadow:0 3px 9px var(--cal-type-soft, rgba(47,123,255,.18)) !important;
  font-size:.76rem !important;
  font-weight:950 !important;
  line-height:1 !important;
}
body.dashboard-core .fc .fc-simpl-name-wrap{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
body.dashboard-core .fc .fc-simpl-name{
  color:#0f172a !important;
  font-weight:900 !important;
  line-height:1.14 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.dashboard-core .fc .fc-simpl-status{
  color:#15803d !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  line-height:1.05 !important;
}
body.dashboard-core .fc .cal-type-manual{ --cal-type-color:#2f7bff; --cal-type-soft:rgba(47,123,255,.16); }
body.dashboard-core .fc .cal-type-automatic{ --cal-type-color:#16a34a; --cal-type-soft:rgba(22,163,74,.17); }
body.dashboard-core .fc .cal-type-adapted{ --cal-type-color:#8b5cf6; --cal-type-soft:rgba(139,92,246,.18); }
body.dashboard-core .fc .cal-type-available{ --cal-type-color:#0ea5e9; --cal-type-soft:rgba(14,165,233,.17); }
body.dashboard-core .fc .cal-type-test{ --cal-type-color:#d97706; --cal-type-soft:rgba(217,119,6,.18); }
body.dashboard-core .fc .cal-type-unavailable{ --cal-type-color:#f59e0b; --cal-type-soft:rgba(245,158,11,.16); }
body.dashboard-core .fc .event-cancelled{ --cal-type-color:#94a3b8; --cal-type-soft:rgba(148,163,184,.16); opacity:.82; }
body.dashboard-core .fc .event-no-show{ --cal-type-color:#ef4444; --cal-type-soft:rgba(239,68,68,.18); }
body.dashboard-core .fc .fc-list-event.cal-type-available .fc-simpl-name{ color:#1d4ed8 !important; }
body.dashboard-core .fc .fc-list-event.cal-type-available .fc-simpl-icon{
  background:#ffffff !important;
  color:#2f7bff !important;
  border:2px solid rgba(47,123,255,.35) !important;
  box-shadow:0 3px 10px rgba(47,123,255,.12) !important;
  font-size:1rem !important;
}
body.dashboard-core .fc .fc-list-event.cal-type-test .fc-list-event-time{ color:#d97706 !important; }
body.dashboard-core .fc .fc-list-event.cal-type-test .fc-simpl-icon{
  background:#fff7ed !important;
  color:#d97706 !important;
  border:1px solid rgba(217,119,6,.22) !important;
  box-shadow:0 3px 10px rgba(217,119,6,.11) !important;
  font-size:.9rem !important;
}
body.dashboard-core .fc .fc-list-event.event-completed{ --cal-type-color:#16a34a; --cal-type-soft:rgba(22,163,74,.18); }
body.dashboard-core .fc .fc-list-event.event-completed > td{
  background:linear-gradient(90deg, rgba(22,163,74,.075), #ffffff 44%) !important;
  border-top-color:rgba(22,163,74,.18) !important;
  border-bottom-color:rgba(22,163,74,.18) !important;
}
body.dashboard-core .fc .fc-list-event.event-completed > td:last-child{ border-right-color:rgba(22,163,74,.18) !important; }
body.dashboard-core .fc .fc-list-event.event-completed .fc-list-event-time{ color:#15803d !important; }
body.dashboard-core .fc .fc-list-event.event-completed .fc-simpl-icon{
  background:#ffffff !important;
  color:#16a34a !important;
  border:2px solid rgba(22,163,74,.48) !important;
  box-shadow:0 3px 10px rgba(22,163,74,.12) !important;
  font-size:.95rem !important;
}
body.dashboard-core .fc .fc-list-event.event-completed .fc-simpl-name{ color:#0f172a !important; }
@media (max-width:720px){
  body.dashboard-core .fc .fc-list-table{ border-spacing:0 7px !important; }
  body.dashboard-core .fc .fc-list-event > td{ padding-top:10px !important; padding-bottom:10px !important; }
  body.dashboard-core .fc .fc-list-event-time{ width:112px !important; min-width:112px !important; font-size:.78rem !important; }
  body.dashboard-core .fc .fc-list-event-graphic{ width:12px !important; min-width:12px !important; padding-left:2px !important; padding-right:2px !important; }
  body.dashboard-core .fc .fc-simpl-title{ gap:8px !important; }
  body.dashboard-core .fc .fc-simpl-icon{ width:22px !important; height:22px !important; flex-basis:22px !important; font-size:.72rem !important; }
}


/* ============================================================
   CALENDAR CONTROL CARD — FINAL POLISH
   Consistent filters + scheduling actions
   ============================================================ */
.lessons-calendar-page .calendar-control-card{
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(219,228,255,.92);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
  overflow: hidden;
}

.lessons-calendar-page .calendar-control-card .lessons-calendar-head{
  display: none;
}

.lessons-calendar-page .calendar-filter-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.lessons-calendar-page .calendar-filter-pill{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
  color: #334155;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 850;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 3px 10px rgba(15,23,42,.035);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.lessons-calendar-page .calendar-filter-pill:hover,
.lessons-calendar-page .calendar-filter-pill:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(47,123,255,.26);
  box-shadow: 0 8px 18px rgba(15,23,42,.07);
}

.lessons-calendar-page .calendar-filter-pill.is-active{
  justify-content: center;
  border-color: rgba(37,99,235,.94);
  background: linear-gradient(135deg, #2f7bff 0%, #245ddb 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37,99,235,.24);
}

.lessons-calendar-page .calendar-filter-pill.is-active .calendar-filter-icon{
  color: #ffffff;
  background: rgba(255,255,255,.18);
}

.lessons-calendar-page .calendar-filter-icon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2f7bff;
  background: rgba(47,123,255,.08);
  font-size: .88rem;
  line-height: 1;
}

.lessons-calendar-page .calendar-main-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px !important;
}

.lessons-calendar-page .calendar-action-btn{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.lessons-calendar-page .calendar-action-btn:hover,
.lessons-calendar-page .calendar-action-btn:focus-visible,
.lessons-calendar-page .calendar-unavailable-summary:hover{
  transform: translateY(-1px);
}

.lessons-calendar-page .calendar-action-btn--primary{
  border: 1px solid rgba(37,99,235,.94);
  background: linear-gradient(135deg, #2f7bff 0%, #245ddb 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(37,99,235,.22);
}

.lessons-calendar-page .calendar-action-btn--secondary{
  border: 1px solid rgba(47,123,255,.46);
  background: rgba(255,255,255,.94);
  color: #1d4ed8;
  box-shadow: 0 6px 16px rgba(15,23,42,.045);
}

.lessons-calendar-page .calendar-action-btn--secondary:hover,
.lessons-calendar-page .calendar-action-btn--secondary:focus-visible{
  border-color: rgba(37,99,235,.72);
  background: rgba(239,246,255,.92);
}

.lessons-calendar-page .calendar-action-icon{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}

.lessons-calendar-page .calendar-action-btn--primary .calendar-action-icon{
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
}

.lessons-calendar-page .calendar-action-btn--secondary .calendar-action-icon{
  background: rgba(47,123,255,.10);
  color: #1d4ed8;
}

.lessons-calendar-page .calendar-unavailable-accordion{
  margin-top: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.lessons-calendar-page .calendar-unavailable-accordion[open]{
  padding-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(245,158,11,.28);
  background: linear-gradient(180deg, rgba(255,251,235,.72), rgba(255,255,255,.92));
}

.lessons-calendar-page .calendar-unavailable-summary{
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(245,158,11,.32);
  background: linear-gradient(180deg, rgba(255,251,235,.78), rgba(255,255,255,.92));
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.lessons-calendar-page .calendar-unavailable-summary::-webkit-details-marker{
  display: none;
}

.lessons-calendar-page .calendar-unavailable-summary strong{
  flex: 1 1 auto;
  min-width: 0;
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.18;
}

.lessons-calendar-page .calendar-unavailable-icon{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.28);
  background: rgba(255,255,255,.78);
  color: #b45309;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.lessons-calendar-page .calendar-unavailable-chevron{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
  font-size: 1.35rem;
  font-weight: 900;
  transition: transform .15s ease;
}

.lessons-calendar-page .calendar-unavailable-accordion[open] .calendar-unavailable-chevron{
  transform: rotate(180deg);
}

.lessons-calendar-page .calendar-unavailable-accordion .calendar-unavailability-note,
.lessons-calendar-page .calendar-unavailable-accordion form,
.lessons-calendar-page .calendar-unavailable-accordion .calendar-unavailability-feedback{
  margin-left: 14px;
  margin-right: 14px;
}

@media (min-width: 721px){
  .lessons-calendar-page .calendar-filter-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lessons-calendar-page .calendar-filter-pill{
    justify-content: center;
  }
}

@media (max-width: 520px){
  .lessons-calendar-page .calendar-control-card{
    padding: 14px;
    border-radius: 24px;
  }

  .lessons-calendar-page .calendar-filter-grid{
    gap: 8px;
  }

  .lessons-calendar-page .calendar-filter-pill{
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 15px;
    font-size: .86rem;
  }

  .lessons-calendar-page .calendar-filter-icon{
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: .78rem;
  }

  .lessons-calendar-page .calendar-main-actions{
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 16px !important;
  }

  .lessons-calendar-page .calendar-action-btn{
    min-height: 46px;
    border-radius: 15px;
  }

  .lessons-calendar-page .calendar-unavailable-summary{
    min-height: 48px;
    padding: 11px 12px;
    border-radius: 16px;
  }
}

/* Calendar page final polish helpers — V11 */
.calendar-filter-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.calendar-filter-pill{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  color:#334155;
  text-decoration:none;
  font-weight:900;
}
.calendar-filter-pill.is-active{
  color:#fff;
  border-color:rgba(37,99,235,.82);
  background:linear-gradient(135deg, #2f7bff, #245ddb);
}
.calendar-action-btn{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  padding:0 16px;
  text-decoration:none;
  font-weight:950;
}
.calendar-action-btn--primary{
  background:linear-gradient(135deg, #2f7bff, #245ddb);
  border:1px solid rgba(37,99,235,.82);
  color:#fff;
}
.calendar-action-btn--secondary{
  background:#fff;
  border:1px solid rgba(47,123,255,.38);
  color:#245ddb;
}
.calendar-unavailable-accordion{
  border:1px solid rgba(245,158,11,.28);
  background:rgba(255,253,247,.92);
  border-radius:18px;
}
.calendar-unavailable-summary{
  min-height:52px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.fc-simpl-status{ display:none; }
.fc-simpl-completed-check{
  position:absolute;
  left:-6px;
  top:-5px;
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:#16a34a;
  border:1px solid rgba(22,163,74,.32);
  font-size:.58rem;
}
.simpl-today-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg, #2f7bff, #245ddb);
  color:#fff;
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.08em;
}


/* ============================================================
   Learner overview polish
   - Compact overview header and learner details.
   - Slightly smaller DVSA progress hero.
   - Smaller learner action icons.
   - Tighter stat cards.
   Safe scoped selectors so this does not disturb the calendar/list screens.
   ============================================================ */

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page) 
:where(.learner-overview-title, .overview-kicker, .learner-overview-kicker){
  min-height: 0 !important;
  padding: 12px 18px !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: .14em !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.learner-overview-header, .learner-hero-header, .profile-overview-header){
  padding: 14px 18px 10px !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.learner-name, .learner-title, .profile-name){
  font-size: clamp(30px, 7.8vw, 34px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.learner-email, .learner-meta, .profile-meta){
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.progress-card, .dvsa-card, .learner-progress-card, .overview-progress-card){
  padding: 20px 18px 18px !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overall-progress-circle, .dvsa-progress-ring, .progress-ring, .learner-progress-ring){
  width: 126px !important;
  height: 126px !important;
  margin-inline: auto !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overall-progress-inner, .dvsa-progress-inner, .progress-ring-inner){
  width: 96px !important;
  height: 96px !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overall-progress-number, .progress-percent, .dvsa-progress-percent){
  font-size: 32px !important;
  line-height: 1 !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overview-stat-grid, .learner-stat-grid, .stats-grid, .overview-pills-grid){
  gap: 10px !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overview-stat, .learner-stat, .stat-card, .overview-pill){
  padding: 12px 14px !important;
  min-height: 78px !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.overview-stat-icon, .learner-stat-icon, .stat-icon){
  font-size: 22px !important;
  width: 30px !important;
  min-width: 30px !important;
}

/* Middle action icons: 25% smaller and visually balanced */
:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.quick-actions, .learner-actions, .learner-action-grid, .overview-action-grid, .learner-tools-grid){
  gap: 12px !important;
  align-items: start !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.quick-action, .learner-action, .overview-action, .learner-tool){
  gap: 6px !important;
  text-align: center !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.quick-action img, .learner-action img, .overview-action img, .learner-tool img,
       .quick-action-icon, .learner-action-icon, .overview-action-icon, .learner-tool-icon){
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

:where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
:where(.quick-action-label, .learner-action-label, .overview-action-label, .learner-tool-label,
       .quick-action span, .learner-action span, .overview-action span, .learner-tool span){
  margin-top: 3px !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
}

@media (max-width: 480px){
  :where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
  :where(.quick-action img, .learner-action img, .overview-action img, .learner-tool img,
         .quick-action-icon, .learner-action-icon, .overview-action-icon, .learner-tool-icon){
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }

  :where(.learner-split-page, .learner-split, .learner-profile-page, .learner-overview-page, .learner-dashboard, .learner-detail-page)
  :where(.quick-action-label, .learner-action-label, .overview-action-label, .learner-tool-label,
         .quick-action span, .learner-action span, .overview-action span, .learner-tool span){
    font-size: 13px !important;
  }
}

/* ============================================================
   DRIVING TEST / RESULT PAGES READABILITY HARD FIX
   Keeps test screens light even when the app header/dashboard theme
   has white text rules loaded.
   ============================================================ */
body:not(.dashboard-page) .premium-main,
body:not(.dashboard-page) .page,
body:not(.dashboard-page) .page-shell,
body:not(.dashboard-page) .ui-page,
body:not(.dashboard-page) .driving-test-page,
body:not(.dashboard-page) .test-page,
body:not(.dashboard-page) .test-mode-page,
body:not(.dashboard-page) .test-result-page,
body:not(.dashboard-page) .driving-test-mode-page,
body:not(.dashboard-page) .driving-test-result-page,
body:not(.dashboard-page) .driving-test-pass-page {
  color: #0f172a !important;
}

body:not(.dashboard-page) .premium-main .card,
body:not(.dashboard-page) .premium-main .ui-card,
body:not(.dashboard-page) .page .card,
body:not(.dashboard-page) .page .ui-card,
body:not(.dashboard-page) .page-shell .card,
body:not(.dashboard-page) .page-shell .ui-card,
body:not(.dashboard-page) .test-card,
body:not(.dashboard-page) .pass-card,
body:not(.dashboard-page) .certificate-card,
body:not(.dashboard-page) .protocol-card,
body:not(.dashboard-page) .summary-card,
body:not(.dashboard-page) .review-card {
  background: rgba(255, 255, 255, .96) !important;
  color: #0f172a !important;
}

body:not(.dashboard-page) .premium-main :where(h1,h2,h3,h4,h5,h6,label,legend,.page-title,.ui-title,.ui-card-title,.section-title,.card-title),
body:not(.dashboard-page) .page :where(h1,h2,h3,h4,h5,h6,label,legend,.page-title,.ui-title,.ui-card-title,.section-title,.card-title),
body:not(.dashboard-page) .page-shell :where(h1,h2,h3,h4,h5,h6,label,legend,.page-title,.ui-title,.ui-card-title,.section-title,.card-title),
body:not(.dashboard-page) .driving-test-page :where(h1,h2,h3,h4,h5,h6,label,legend,.page-title,.ui-title,.ui-card-title,.section-title,.card-title),
body:not(.dashboard-page) .test-page :where(h1,h2,h3,h4,h5,h6,label,legend,.page-title,.ui-title,.ui-card-title,.section-title,.card-title) {
  color: #0f172a !important;
  opacity: 1 !important;
}

body:not(.dashboard-page) .premium-main :where(p,small,span,div,.muted,.page-meta,.ui-subtitle,.ui-card-subtitle,.section-meta,.card-meta),
body:not(.dashboard-page) .page :where(p,small,.muted,.page-meta,.ui-subtitle,.ui-card-subtitle,.section-meta,.card-meta),
body:not(.dashboard-page) .page-shell :where(p,small,.muted,.page-meta,.ui-subtitle,.ui-card-subtitle,.section-meta,.card-meta),
body:not(.dashboard-page) .driving-test-page :where(p,small,.muted,.page-meta,.ui-subtitle,.ui-card-subtitle,.section-meta,.card-meta),
body:not(.dashboard-page) .test-page :where(p,small,.muted,.page-meta,.ui-subtitle,.ui-card-subtitle,.section-meta,.card-meta) {
  color: #475569 !important;
  opacity: 1 !important;
}

body:not(.dashboard-page) .premium-main :where(input,select,textarea),
body:not(.dashboard-page) .page :where(input,select,textarea),
body:not(.dashboard-page) .page-shell :where(input,select,textarea),
body:not(.dashboard-page) .driving-test-page :where(input,select,textarea),
body:not(.dashboard-page) .test-page :where(input,select,textarea) {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe4ff !important;
  opacity: 1 !important;
}

body:not(.dashboard-page) .premium-main :where(input::placeholder,textarea::placeholder),
body:not(.dashboard-page) .page :where(input::placeholder,textarea::placeholder),
body:not(.dashboard-page) .page-shell :where(input::placeholder,textarea::placeholder) {
  color: #64748b !important;
  opacity: 1 !important;
}

body:not(.dashboard-page) .premium-main :where(.fault-row,.fault-item,.protocol-row,.check-row),
body:not(.dashboard-page) .page :where(.fault-row,.fault-item,.protocol-row,.check-row),
body:not(.dashboard-page) .page-shell :where(.fault-row,.fault-item,.protocol-row,.check-row) {
  color: #0f172a !important;
}

/* Standalone primary action buttons.
   Allows class="btn-primary" without also requiring class="btn". */
button.btn-primary,
a.btn-primary,
.btn-primary,
button.ui-btn--primary,
a.ui-btn--primary,
.ui-btn--primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-height:38px;
  padding:.55rem .9rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--primary-strong);
  background:linear-gradient(135deg, var(--primary-strong), var(--primary));
  color:#fff;
  font:inherit;
  font-size:.86rem;
  font-weight:750;
  line-height:1.1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}


/* Source-of-truth: primary action buttons must be blue, even without the legacy .btn base class. */
button.btn-primary,
a.btn-primary,
.btn-primary,
button.ui-btn--primary,
a.ui-btn--primary,
.ui-btn--primary{
  background:linear-gradient(135deg, var(--primary-strong, #245ddb), var(--primary, #2f7bff)) !important;
  border-color:var(--primary-strong, #245ddb) !important;
  color:#ffffff !important;
}