/*
 * main.css — CSS entry point
 *
 * Import order: base → legacy flat files (preserved during migration)
 *
 * As each legacy file is migrated to styles/{layout,components,modules,utilities}/,
 * its @import line below is replaced with the new layered import.
 */

/* ── Foundation ── */

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

a {
  color: inherit;
}

:root {
  /* ── LessonPen Design Tokens ── */

  /* Surface */
  --paper:       #f5f2ea;
  --ivory:       #fbf9f3;
  --sand:        #ebe7da;
  --sand-2:      #e2ddca;
  --cream:       #ece8db;
  --warm:        #dcd7c5;
  --ring:        #cfc9b3;

  /* Ink */
  --ink:         #1a1814;
  --charcoal:    #3d3b35;
  --olive:       #5c594f;
  --stone:       #8a877b;

  /* Dark sidebar */
  --night:       #1d1c18;
  --night-2:     #28261f;
  --night-3:     #34322a;

  /* Accent — terracotta */
  --accent:      #c96442;
  --accent-2:    #d97757;
  --accent-soft: #f1d9cc;

  /* Fonts */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;
  --mono:  'Geist Mono', monospace;

  /* ── Semantic Remapping ── */
  --color-primary:       var(--accent);
  --color-primary-dark:  #b85438;
  --color-secondary:     var(--stone);
  --color-success:       #4a7c59;
  --color-danger:        #b5392a;
  --color-warning:       #c4862a;
  --color-info:          #4a7a8a;

  /* ── Lesson Status Colors ── */
  --color-status-scheduled:    #4a7a8a;
  --color-status-completed:    #4a7c59;
  --color-status-rescheduled:  #8a6d3b;
  --color-status-canceled:     #b5392a;
  --color-status-unconfirmed:  #c4862a;

  /* ── Availability Segment Colors ── */
  --color-segment-teacher:     #e8d5a3;
  --color-segment-student:     #a8c4d4;
  --color-segment-booked:      #7aad8a;
  --color-segment-unavailable: #f0d5d0;

  /* ── Neutral / Surface ── */
  --color-body-bg:       var(--paper);
  --color-surface:       var(--ivory);
  --color-white:         #ffffff;
  --color-border:        var(--cream);
  --color-text-primary:  var(--ink);
  --color-text-muted:    var(--stone);

  /* ── Dark Surfaces ── */
  --color-sidebar-bg:    var(--night);
  --color-table-header:  var(--night-2);
  --color-tooltip-bg:    var(--charcoal);

  /* ── Typography ── */
  --font-family-brand:   var(--serif);
  --font-family-base:    var(--sans);
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-lg:        1.125rem;
  --font-size-xl:        1.25rem;
  --font-size-page-title: 2rem;

  /* ── Spacing Scale ── */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 50%;

  /* ── Shadows ── */
  --shadow-card: 0 2px 12px rgba(26, 24, 20, 0.07);
  --shadow-sm:   0 1px 3px rgba(26, 24, 20, 0.1);

  /* ── Layout ── */
  --sidebar-width:            200px;
  --sidebar-width-collapsed:  60px;
  --sidebar-width-mobile-overlay: 250px;
  --unscheduled-sidebar-width: 240px;
  --mobile-bottom-nav-height: 0px;

  /* ── Transitions ── */
  --transition-sidebar: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@font-face {
  font-family: 'Stolzl Display';
  src: url('/fonts/Stolzl_Display_Medium.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.page-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--font-size-page-title);
  letter-spacing: -0.03em;
}

/* @font-face defined in base/typography.css */

.error-modal-stack {
  max-height: 300px;
  overflow-y: auto;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-family-base);
    background: var(--color-body-bg);
}

/* form { 
    max-width: 400px; 
    margin: auto; 
    } */

label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
    }

input { 
    width: 100%; 
    padding: 10px;
    /* margin-bottom: 15px;  */
    border: 1px solid #ccc; 
    border-radius: 5px; 
    }

button { 
    /* width: 100%;  */
    padding: 10px; 
    background: var(--color-primary); 
    color: white; 
    border: none; 
    border-radius: var(--radius-sm); 
    cursor: pointer; 
    }

button:hover {
        background: var(--color-primary-dark); 
    }

table {
     width: 100%;
     border-collapse: collapse;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    }

th {
    padding: 10px; 
    text-align: left;
    background-color: var(--color-table-header) !important;
    color: #fff !important;
    font-family: var(--font-family-brand);
    }

td { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left;
    }

.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Global Bootstrap Nav Tabs Customization */

.nav-tabs,
.nav-tabs .nav-link,
.nav-tabs .nav-item {
    font-family: var(--font-family-brand);
    }

/* ── Layout ── */

.app-flex-wrapper {
    display: flex;
    flex-direction: column;
    /* take remaining vertical space so footer sits after content */
    flex: 1 1 auto;
    width: 100%;
    background: var(--paper);
    transition: background 0.2s;
}

/* The content-row holds sidebar + main-content horizontally and grows to fill available space */

.content-row {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.main-content {
    flex: 1 1 auto;
    padding: 32px 32px 32px 32px;
    min-width: 0;
    margin-left: var(--main-content-margin-left);
    margin-right: 75px;
}

.main-content.transition-margin {
    transition: margin-left 0.4s cubic-bezier(.4,0,.2,1);
}

.page-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 48px;
}

.page-container--content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 0 48px;
}

/* Form-heavy pages (settings wizards, enroll forms) — narrower than main app pages */

.page-container--form {
    max-width: 1040px;
    margin: 0 auto;
    padding: 8px 0 48px;
}

/* Opt-in modifier for d-flex justify-content-between page headers (title + CTA
   button row). Bootstrap's space-between leaves a lone wrapped item at the
   start edge, so the CTA needs an explicit auto margin to stay right-aligned
   once it drops to its own row on mobile. */

@media (max-width: 576px) {
    .page-head-row { flex-wrap: wrap; }
    .page-head-row > .btn,
    .page-head-row > .btn-group { margin-left: auto; white-space: nowrap; }
}

.back-nav-btn.transition-margin {
    transition: margin-left 0.4s cubic-bezier(.4,0,.2,1);
}

/* Ensure the custom nav button wrapper also animates when margin-left changes */

.custom-nav-btn-wrapper.transition-margin {
    transition: margin-left 0.4s cubic-bezier(.4,0,.2,1);
}

/* Remove margins when sidebar is hidden */

.main-content.no-sidebar {
    margin-left: var(--main-content-margin-left);
    margin-right: 0;
}

@media (max-width: 991.98px) {
    /* On small screens the content-row stacks vertically (sidebar above main) */
    .content-row {
        flex-direction: column;
    }

    .main-content {
        padding: 16px 8px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Reserve space for fixed mobile bottom nav so footer can be scrolled above it */

@media (max-width: 576px) {
    :root { --mobile-bottom-nav-height: 0px; }

    /* when detector added class, apply the padding to the wrapper */
    .has-bottom-nav.app-flex-wrapper,
    .app-flex-wrapper.has-bottom-nav {
        padding-bottom: var(--mobile-bottom-nav-height) !important;
    }

    /* protect main-content so last content row isn't hidden under the nav */
    .has-bottom-nav .main-content {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 8px) !important;
    }
}

/* Student portal mobile bottom nav — students are the most mobile-heavy
   audience; a persistent tab bar beats hamburger-only nav for the 5 pages
   they touch most. Detected + padded automatically by app.js's generic
   .pages-bottom-nav handling (same mechanism as the teacher/school variants). */

.student-bottom-nav { display: none; }

@media (max-width: 576px) {
    .student-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1050;
        height: 64px;
        background: var(--ivory);
        border-top: 1px solid var(--cream);
        box-shadow: 0 -4px 14px rgba(20, 18, 12, 0.06);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .student-bottom-nav-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        border-bottom: 0;
        color: var(--olive);
        height: 64px;
    }
    .student-bottom-nav-link i { font-size: 1.2rem; }
    .student-bottom-nav-link span { font-size: 0.66rem; letter-spacing: 0.02em; }
    .student-bottom-nav-link.active,
    .student-bottom-nav-link:hover,
    .student-bottom-nav-link:focus { color: var(--accent); }
}

.sidebar-link-grid {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 8px;
}

.sidebar-link-grid i {
    font-size: 1.3em;
    text-align: center;
    width: 32px;
}

.sidebar-settings-dropdown .dropdown-menu {
    left: 20px !important;
    min-width: 170px;
    font-size: 0.92em;
    padding: 0.25rem 0.5rem;
}

.sidebar-settings-dropdown .dropdown-item {
    font-size: 0.95em;
    padding: 0.25rem 0.75rem;
    }

/* Sidebar and settings sidebar styles */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width-collapsed);
  max-width: 250px;
  height: 100vh;
  height: 100svh;
  background: var(--color-sidebar-bg);
  color: #e8e4d2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  transition: width .4s !important;
  border-right: 1px solid var(--night-3);
  box-shadow: none;
  z-index: 1001;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
  max-width: var(--sidebar-width-collapsed);
}

/* Brand row at the top: wordmark + collapse toggle */

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 14px 16px;
  border-bottom: 1px solid var(--night-3);
  margin-bottom: 12px;
}

.sidebar-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f5f2ea;
  text-decoration: none;
  border-bottom: 0;
  min-width: 0;
}

.sidebar-wordmark:hover {
  color: #fff;
  border-bottom: 0;
}

.sidebar-wordmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.sidebar-wordmark-text {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f2ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  transition: opacity 0.25s, transform 0.25s;
}

.sidebar.collapsed .sidebar-wordmark { display: none; }

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 4px 0 16px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: #9d998b;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, color 0.12s;
}

.sidebar-toggle svg { display: block; }

.sidebar-toggle:hover { background: var(--night-2); }

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sidebar-nav {
  flex: 1 1 auto;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }

.sidebar-nav::-webkit-scrollbar-thumb { background: var(--night-3); border-radius: 6px; }

.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav-list li {
  margin-bottom: 6px;
}

.sidebar-nav-list a {
  display: flex;
  align-items: center;
  gap: 11px;
  height: auto;
  color: #9d998b;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 12px;
  margin: 0 8px;
  border-radius: 10px;
  transition: background 0.12s, color 0.12s;
  min-width: 0;
  position: relative;
}

.sidebar-nav-list a:hover, .sidebar-nav-list a:focus {
  background: var(--night-2);
  color: #e8e4d2;
}

.sidebar-nav-list a.active {
  background: var(--night-2);
  color: #e8e4d2;
}

.sidebar-nav-list a.active::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--accent);
}

.sidebar-nav-list i {
  font-size: 1rem;
  min-width: 20px;
  text-align: center;
  color: inherit;
}

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

.sidebar-icon svg {
  width: 100%;
  height: 100%;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.sidebar-nav-list a:hover .sidebar-icon svg,
.sidebar-nav-list a:focus .sidebar-icon svg {
  transform: scale(1.12);
}

.sidebar-nav-list a.active .sidebar-icon svg {
  animation: sidebar-icon-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sidebar-icon-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Today: the whole sun rotates like before, while the rays additionally
   stretch outward from the circle and snap back on their own. */

.sidebar-nav-list a:hover [data-icon="today"] svg { transform: rotate(20deg); }

[data-icon="today"] svg line { transform-box: fill-box; }

[data-icon="today"] svg .ray-top    { transform-origin: 50% 100%; }

[data-icon="today"] svg .ray-bottom { transform-origin: 50% 0%; }

[data-icon="today"] svg .ray-w      { transform-origin: 100% 50%; }

[data-icon="today"] svg .ray-e      { transform-origin: 0% 50%; }

[data-icon="today"] svg .ray-nw     { transform-origin: 100% 100%; }

[data-icon="today"] svg .ray-se     { transform-origin: 0% 0%; }

[data-icon="today"] svg .ray-sw     { transform-origin: 100% 0%; }

[data-icon="today"] svg .ray-ne     { transform-origin: 0% 100%; }

.sidebar-nav-list a:hover [data-icon="today"] svg line {
  animation: sidebar-ray-pulse .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sidebar-ray-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.sidebar-nav-list a:hover [data-icon="settings"] svg { transform: scale(1.12) rotate(45deg); }

.sidebar-nav-list a:hover [data-icon="messages"] svg { transform: scale(1.08) translate(1px, -2px) rotate(8deg); }

/* Schedule: the rest of the icon holds still while the marked day pops and
   pings outward, like tapping a date on the calendar. */

.sidebar-nav-list a:hover [data-icon="schedule"] svg { transform: none; }

[data-icon="schedule"] svg .sched-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

[data-icon="schedule"] svg .sched-ping {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}

.sidebar-nav-list a:hover [data-icon="schedule"] svg .sched-dot {
  transform: scale(1.5);
}

.sidebar-nav-list a:hover [data-icon="schedule"] svg .sched-ping {
  animation: sidebar-schedule-ping .6s ease-out;
}

@keyframes sidebar-schedule-ping {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Plan Offerings: the three stacked layers pull apart on hover instead of
   the icon scaling as a whole — base layer is the anchor, the two above it lift. */

[data-icon="offerings"] svg .layer-top,
[data-icon="offerings"] svg .layer-mid,
[data-icon="offerings"] svg .layer-base {
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.sidebar-nav-list a:hover [data-icon="offerings"] svg {
  transform: none;
}

.sidebar-nav-list a:hover [data-icon="offerings"] svg .layer-top {
  transform: translateY(-1.8px);
}

.sidebar-nav-list a:hover [data-icon="offerings"] svg .layer-mid {
  transform: translateY(-0.9px);
}

/* Students: the cap's tassel swings from its anchor point, like it would
   when the cap gets tossed — pivoting at the top so only the cord swings. */

[data-icon="students"] svg .tassel { transform-box: fill-box; transform-origin: 50% 0%; }

.sidebar-nav-list a:hover [data-icon="students"] svg .tassel {
  animation: sidebar-tassel-swing .6s ease-in-out;
}

@keyframes sidebar-tassel-swing {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(18deg); }
  60%  { transform: rotate(-11deg); }
  100% { transform: rotate(0deg); }
}

/* Notes: the right page turns over the spine onto the left page and stays
   there while hovering — the left page is the anchor and never moves. The
   page is split top/bottom so the turn isn't a perfectly rigid line sweep:
   the bottom half leads the rotation and the top half follows a beat later,
   giving the fold a slight natural tilt instead of a flat collapse. */

[data-icon="notes"] svg .page-right-top,
[data-icon="notes"] svg .page-right-bottom {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .7s ease;
}

[data-icon="notes"] svg .page-right-top {
  transition-delay: .12s;
}

.sidebar-nav-list a:hover [data-icon="notes"] svg .page-right-top,
.sidebar-nav-list a:hover [data-icon="notes"] svg .page-right-bottom {
  transform: rotateY(175deg);
  opacity: 0.5;
}

/* Finance: the euro sign's curve spins once like a flipped coin, while the
   two strike-through lines stay put. */

[data-icon="finance"] svg .coin { transform-box: fill-box; transform-origin: 59% 50%; }

.sidebar-nav-list a:hover [data-icon="finance"] svg .coin {
  animation: sidebar-coin-spin 0.8s ease-in-out;
}

@keyframes sidebar-coin-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-icon svg { transition: none; animation: none; }
  [data-icon="offerings"] svg .layer-top,
  [data-icon="offerings"] svg .layer-mid,
  [data-icon="offerings"] svg .layer-base,
  [data-icon="schedule"] svg .sched-dot,
  [data-icon="notes"] svg .page-right-top,
  [data-icon="notes"] svg .page-right-bottom {
    transition: none;
  }
  .sidebar-nav-list a:hover [data-icon="today"] svg line,
  .sidebar-nav-list a:hover [data-icon="students"] svg .tassel,
  .sidebar-nav-list a:hover [data-icon="schedule"] svg .sched-ping,
  .sidebar-nav-list a:hover [data-icon="finance"] svg .coin {
    animation: none;
  }
  .sidebar-nav-list a:hover .sidebar-icon svg,
  .sidebar-nav-list a.active .sidebar-icon svg,
  .sidebar-nav-list a:hover [data-icon="today"] svg,
  .sidebar-nav-list a:hover [data-icon="settings"] svg,
  .sidebar-nav-list a:hover [data-icon="messages"] svg,
  .sidebar-nav-list a:hover [data-icon="offerings"] svg .layer-top,
  .sidebar-nav-list a:hover [data-icon="offerings"] svg .layer-mid,
  .sidebar-nav-list a:hover [data-icon="schedule"] svg .sched-dot,
  .sidebar-nav-list a:hover [data-icon="notes"] svg .page-right-top,
  .sidebar-nav-list a:hover [data-icon="notes"] svg .page-right-bottom {
    transform: none;
  }
}

.sidebar-link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
  transform: translateX(0);
}

.sidebar-section-label {
  padding: 0 20px;
  margin: 18px 0 6px;
  pointer-events: none;
}

.sidebar-section-label span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9d998b;
  font-family: var(--sans);
  font-weight: 500;
}

/* Hide the active-dot when a numeric badge is shown so they don't overlap */

.sidebar-nav-list a.active:has(.sidebar-badge)::after {
  display: none;
}

.sidebar-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
}

.sidebar-nav-list a.active .sidebar-badge {
  background: rgba(255,255,255,0.25);
}

.sidebar.collapsed .sidebar-badge {
  display: none;
}

.sidebar.collapsed .sidebar-link-text {
  display: none;
}

.sidebar.collapsed .sidebar-nav-list a {
  justify-content: center;
  padding: 9px 0;
  margin: 0 6px;
}

.sidebar.collapsed .sidebar-nav-list a.active::after { display: none; }

.sidebar.collapsed .sidebar-section-label { display: none; }

/* ── User card at sidebar bottom ── */

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--night-2);
  border: 1px solid var(--night-3);
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #7c3a1d;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.org-avatar--img {
  overflow: hidden;
  padding: 0;
  background: var(--paper, #fff);
}

.org-avatar--img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-user-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #e8e4d2;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-family: var(--sans);
  font-size: 11px;
  color: #9d998b;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: opacity 0.12s;
}

.sidebar-user-main:hover { opacity: 0.8; color: inherit; text-decoration: none; }

.sidebar-user-logout-form { margin: 0; flex-shrink: 0; }

.sidebar-user-logout {
  background: none;
  border: none;
  color: #9d998b;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.sidebar-user-logout:hover { background: var(--night-3); color: #e8e4d2; }

.sidebar.collapsed .sidebar-user-card {
  justify-content: center;
  padding: 8px;
  margin: 12px 8px 0;
}

.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user-logout-form { display: none; }

/* Settings sidebar styles */

.settings-sidebar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  width: 200px;
  min-height: 80px;
  height: auto;
  max-height: calc(100vh - 40px);
  background: var(--night-2);
  border-right: 1px solid var(--night-3);
  border-top: 1px solid var(--night-3);
  border-bottom: 1px solid var(--night-3);
  border-radius: 0 14px 14px 0;
  color: #e8e4d2;
  z-index: 900;
  display: none;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
  transform: translateX(-110%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease, left 0.3s, width 0.3s;
  will-change: transform, left, width;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 4px 0 12px;
}

.settings-sidebar.is-open {
  transform: translateX(0);
  opacity: 1;
}

.settings-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px 18px;
  border-bottom: 1px solid var(--night-3);
}

.settings-sidebar-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #f5f2ea;
}

.settings-sidebar-close {
  background: none;
  border: none;
  color: #9d998b;
  font-size: 0.95em;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.2s;
}

.settings-sidebar-close:hover {
  background: var(--night-3);
  color: var(--accent-soft);
}

.settings-sidebar-list {
  list-style: none;
  padding: 10px 8px 0;
  margin: 0;
}

.settings-sidebar-list li {
  margin-bottom: 2px;
}

.settings-sidebar-list a {
  color: #9d998b;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  display: block;
  border-radius: 10px;
  transition: background 0.12s, color 0.12s;
  border-bottom: 0;
}

.settings-sidebar-list a:hover, .settings-sidebar-list a:focus {
  background: var(--night-3);
  color: #e8e4d2;
}

@media (max-width: 991.98px) {
  /* On mobile the sidebar is an off-canvas overlay; shown only when .mobile-open */
  .sidebar,
  .sidebar.collapsed {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    height: 100vh;
    height: 100svh;
    align-items: stretch;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease !important;
    z-index: 1050;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  /* Always show link text when sidebar is visible on mobile */
  .sidebar .sidebar-link-text {
    display: inline-block !important;
    opacity: 1;
    transform: none;
  }
  .sidebar .sidebar-nav-list a {
    justify-content: flex-start !important;
    padding: 10px 18px !important;
  }
  /* Dark overlay behind the open sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
  }
  .sidebar-overlay.active {
    display: block;
  }
  .settings-sidebar {
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    z-index: 1060;
    border-radius: 0;
  }
}

/* Sticky positioning extracted from navbar.ejs */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* LessonPen warm-dark navbar (overrides Bootstrap bg-dark cold gray) */

.navbar.bg-dark {
  background-color: var(--night) !important;
  border-bottom: 1px solid var(--night-3);
  box-shadow: none;
}

.navbar.bg-dark .container-fluid {
  padding-top: 6px;
  padding-bottom: 6px;
}

.navbar.bg-dark .page-title,
.navbar.navbar-dark .page-title {
  color: #f5f2ea !important;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Auth/util nav links: muted parchment text */

.navbar.bg-dark .navbar-nav .nav-link,
.navbar.bg-dark .navbar-nav .btn-link {
  color: #c8c4b3 !important;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}

.navbar.bg-dark .navbar-nav .nav-link:hover,
.navbar.bg-dark .navbar-nav .btn-link:hover {
  color: #f5f2ea !important;
  background: var(--night-2);
}

/* Mobile hamburger button — muted, hover surfaces */

.mobile-sidebar-toggle {
  color: #c8c4b3 !important;
  transition: color 0.12s;
}

.mobile-sidebar-toggle:hover {
  color: #f5f2ea !important;
}

/* Ensure nav buttons/links are visible on dark navbar */

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .btn-link,
.navbar-dark button.btn-link.nav-link {
  color: rgba(255,255,255,0.92) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .btn-link:hover,
.navbar-dark button.btn-link.nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .btn-link:focus,
.navbar-dark button.btn-link.nav-link:focus {
  color: #ffffff !important;
  text-decoration: none;
}

/* Invisible spacer for mobile layout alignment */

.nav-spacer {
  width: 1px;
  height: 1px;
  visibility: hidden;
}

/* Custom styles for navbar back button (LessonPen parchment ghost) */

.back-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.back-nav-btn:hover, .back-nav-btn:focus {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
  box-shadow: none;
}

/* Fix mobile navbar height */

@media (max-width: 576px) {
  .navbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* CustomNavBtn mobile positioning */
  .custom-nav-btn-wrapper {
    padding-top: 8px;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Page title is no longer rendered in the navbar on any screen — the page-head
   carries the heading, and desktop shows the breadcrumb below instead. */

.navbar-text.page-title {
  display: none;
}

/* ── Desktop breadcrumb ── */

/* Default hidden — must come before the lg+ media query so the override wins */

.navbar-breadcrumb {
  display: none;
}

.navbar-breadcrumb-current {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: #c8c4b3;
  white-space: nowrap;
}

/* lg+: show breadcrumb right of sidebar */

@media (min-width: 992px) {
  .navbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 50%;
    left: calc(var(--sidebar-current-width, 200px) + 12px);
    transform: translateY(-50%);
    transition: left 0.4s cubic-bezier(.4, 0, .2, 1);
  }
}

/* xs top row (hamburger + logout) and back-button row */

.mobile-back-row {
  padding: 4px 0 2px;
}

/* ── User avatar pill in navbar ── */

.navbar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #7c3a1d;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.12);
  transition: border-color 0.12s, opacity 0.12s;
  cursor: pointer;
}

.navbar-user-avatar:hover { border-color: var(--accent); opacity: 0.9; }

/* ── Notifications dropdown (navbar bell) ── */

.notif-dropdown-menu {
  width: 340px;
  max-width: calc(100vw - 24px);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cream);
  background: var(--ivory);
}

.notif-dropdown-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.notif-dropdown-count {
  font-size: 12px;
  color: var(--olive);
}

.notif-dropdown-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  color: var(--stone);
  font-size: 13px;
}

.notif-dropdown-empty i { font-size: 16px; opacity: 0.6; }

.notif-dropdown-form { margin: 0; }

.notif-dropdown-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cream);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.12s;
}

.notif-dropdown-form:first-of-type .notif-dropdown-row { border-top: 0; }

.notif-dropdown-row:hover { background: var(--sand); }

.notif-dropdown-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.notif-dropdown-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 8px;
}

/* Inbox unread indicator — Gmail-style inline dot in the accent color. */

.notif-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 8px;
}

.notif-dropdown-main { flex: 1; min-width: 0; }

.notif-dropdown-row-title {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-dropdown-row-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--olive);
  margin-top: 2px;
  line-height: 1.35;
}

.notif-dropdown-more {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  background: var(--ivory);
}

.notif-dropdown-more:hover { color: var(--color-primary-dark); background: var(--sand); }

.notif-dropdown-footer-wrap {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--cream);
  background: var(--ivory);
}

.notif-dropdown-footer-settings {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--olive);
  text-decoration: none;
  border-right: 1px solid var(--cream);
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}

.notif-dropdown-footer-settings:hover { color: var(--ink); background: var(--sand); }

.notif-dropdown-footer-settings i { font-size: 11px; opacity: 0.7; }

.notif-dropdown-footer {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--olive);
  text-decoration: none;
  background: var(--ivory);
  transition: color 0.12s, background 0.12s;
}

.notif-dropdown-footer:hover { color: var(--ink); background: var(--sand); }

.notif-dropdown-footer i { font-size: 10px; opacity: 0.7; }

/* ── Mobile/tablet: anchor navbar dropdowns under the icon cluster ──
   Below lg the navbar wraps to multiple rows. Bootstrap puts navbar
   dropdowns in "static" mode (Popper disabled), so a wide/edge menu either
   disturbed the wrapped bar or overflowed. Make the icon list the
   positioning context and float each menu just below it, right-aligned and
   clamped to the viewport — so it drops right under the buttons and overlays
   the page instead of pushing anything around. */

@media (max-width: 991.98px) {
  .navbar .navbar-nav { position: relative; }
  .navbar .nav-item.dropdown { position: static; }
  .navbar .dropdown-menu.show {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 6px !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--lp-navbar-h, 56px) - 24px);
    overflow-y: auto;
    z-index: 1001;
  }
  .navbar .notif-dropdown-menu.show {
    width: 340px;
    overflow: hidden;
  }
}

/* Responsive footer: on small screens break after site name and remove the trailing separator */

.footer-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
      }

.footer-inner span { line-height: 1; }

.footer-inner .sep { color: #6c757d; }

/* Mobile: force rights text onto its own line and hide the separator between site name and rights */

@media (max-width: 576px) {
        .footer-inner .rights {
          flex-basis: 100%;
          width: 100%;
          margin-top: 0.25rem;
        }
        .footer-inner .sep-2 { display: none; }
      }

/* ── Components ── */

#toast-container {
  position: fixed;
  top: calc(var(--lp-navbar-h, 56px) + 12px);
  right: 1.5rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

@media (max-width: 576px) {
  #toast-container {
    left: 12px;
    right: 12px;
  }
  .custom-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.custom-toast {
  min-width: 280px;
  max-width: 450px;
  background: #fff;
  color: #333;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.4s, transform 0.4s;
}

.custom-toast.hide {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.custom-toast-success {
  background: #f0fdf4;
  border-left: 4px solid var(--color-success);
  color: #1a3d28;
}

.custom-toast-error {
  background: #fef2f2;
  border-left: 4px solid var(--color-danger);
  color: #4a1010;
}

.custom-toast-warning {
  background: #fffbeb;
  border-left: 4px solid var(--color-warning);
  color: #422a04;
}

.custom-toast-icon {
  margin-right: 0.75rem;
  font-size: 1.3em;
}

.custom-toast-success .custom-toast-icon { color: var(--color-success); }

.custom-toast-error   .custom-toast-icon { color: var(--color-danger); }

.custom-toast-warning .custom-toast-icon { color: var(--color-warning); }

.custom-toast-message {
  flex: 1;
}

.custom-toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.45;
  font-size: 1.3em;
  margin-left: 0.5rem;
  cursor: pointer;
  pointer-events: auto;
}

.custom-toast-close:hover {
  background: none;
  opacity: 0.8;
}

.custom-toast-close:focus {
  outline: none;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  cursor: default;
  overflow: visible; /* allow tooltip to escape parent bounds */
}

.tooltip-content {
  visibility: hidden;
  opacity: 0;
  width: auto;
  max-width: 320px;
  background-color: var(--color-tooltip-bg);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  position: absolute;
  bottom: calc(100% + 6px); /* show above the trigger by default */
  left: 50%;
  transform: translateX(-50%);
  white-space: normal; /* allow wrapping */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
  z-index: 1000; /* sit above other UI elements */
  pointer-events: auto;
  box-sizing: border-box;
  /* Prefer wrapping long words when needed, but don't force breaks inside normal words */
  /* do not break inside normal words; allow normal wrapping */
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  display: inline-block;
  /* ensure tooltip has a sensible minimum width so short words don't stack */
  min-width: 140px;
}

.tooltip-content strong {
  display: inline; /* ensure strong stays inline */
}

.tooltip-table-content {
  max-width: none;
  width: auto;
  background: var(--color-tooltip-bg);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.5rem;
}

.tooltip-table {
  min-width: 0;
  white-space: nowrap;
  background: var(--color-tooltip-bg);
  color: #fff;
  border-collapse: separate;
  border-spacing: 0;
}

.tooltip-table th {
  background: var(--color-tooltip-bg);
  color: #fff;
  font-weight: 600;
  border: none;
}

.tooltip-table td {
  background: var(--color-tooltip-bg);
  color: #fff;
  border: none;
}

.tooltip-table tr {
  border: none;
}

.tooltip-table {
  min-width: 0;
  white-space: nowrap;
}

.tooltip-right .tooltip-content {
  /* Right-aligned tooltip: center vertically and place to the right */
  top: 50%;
  left: 100%;
  bottom: auto;
  transform: translateY(-50%) translateX(12px);
}

.tooltip-wrapper:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* Ensure table cells and common containers don't clip overflowed tooltips */

.table, .table td, .table th, .tab-pane, .modal-body, .container {
  overflow: visible !important;
}

/* Icon + label tab layout — shared between student and teacher profile pages */

.nav-tabs .nav-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.1rem !important;
  padding: 0.5rem 0.8rem !important;
  min-width: 70px !important;
  font-size: 0.92rem !important;
  color: #2C3E50 !important;
}

.nav-tabs .nav-link i {
  font-size: 2.1rem !important;
  margin-bottom: 0.1rem !important;
  display: block !important;
}

.nav-tabs .nav-link .tab-label {
  font-size: 1.1rem !important;
  line-height: 1.1 !important;
  margin-top: 0.1rem !important;
  display: block !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--bs-info) !important;
}

.nav-tabs .nav-link i,
.nav-tabs .nav-link .tab-label {
  color: inherit !important;
}

@media (max-width: 576px) {
  .nav-tabs {
    font-size: 0.95rem !important;
  }

  .nav-tabs .nav-link {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.95rem !important;
    min-width: 60px !important;
    border-radius: 0.3rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Shared scroll/animation behavior for horizontally-scrollable
   Bootstrap nav-tabs strips (.finance-tabs, .std-tabs, ...).
   Structural elements are injected at runtime by
   public/js/tabsEnhance.js — this file only styles them. It
   intentionally carries no per-page skin; color/sizing for the
   tabs themselves stays in each page's own module CSS.
   ──────────────────────────────────────────────────────────── */

.tabs-scroll { position: relative; }

.tabs-scroll-wrap { position: relative; }

.tabs-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), width 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: transform, width;
}

.tabs-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 1;
}

.tabs-fade.is-visible { opacity: 1; }

.tabs-fade--left { left: 0; background: linear-gradient(to right, var(--paper) 0%, transparent 100%); }

.tabs-fade--right { right: 0; background: linear-gradient(to left, var(--paper) 0%, transparent 100%); }

.tabs-chevron {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  border: none;
  background: var(--paper);
  color: var(--olive);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, color 150ms ease;
  z-index: 2;
}

.tabs-chevron:hover { color: var(--ink); }

.tabs-chevron.is-visible { opacity: 1; pointer-events: auto; }

.tabs-chevron--prev { left: 0; }

.tabs-chevron--next { right: 0; }

.tabs-scroll-wrap.no-overflow .tabs-fade,
.tabs-scroll-wrap.no-overflow .tabs-chevron { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .tabs-chevron { display: flex; }
}

.tabs-content-scroll { transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1); }

.tabs-content-scroll.is-animating-height { overflow: hidden; }

.tabs-content-scroll .tab-pane.fade { transition: opacity 120ms ease-in; }

.tabs-content-scroll .tab-pane.fade.show { transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1) 80ms; }

@media (prefers-reduced-motion: reduce) {
  .tabs-indicator,
  .tabs-fade,
  .tabs-chevron,
  .tabs-content-scroll,
  .tabs-content-scroll .tab-pane.fade,
  .tabs-content-scroll .tab-pane.fade.show {
    transition: none !important;
  }
}

.upload-icon {
  cursor: pointer;
  color: #fff;
  background: rgba(33, 37, 41, 1);
  border-radius: 50%;
  padding: 10px;
  margin-left: 10px;
  font-size: 1.0em;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.upload-icon:hover {
  background: rgba(33, 37, 41, 0.8);
  color: #0dcaf0;
}

.profile-photo,
.action-photo {
  position: relative;
}

/* Role badges: 2-column grid so badges keep natural size and wrap into two rows */

.role-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  align-items: center;
  align-content: start;
}

.role-badge {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.status-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
}

.status-dot.on  { background-color: var(--color-success); }

.status-dot.off { background-color: var(--color-danger); }

/* Fix for radio button transitions and states */

.form-check-input[type="radio"] {
  transition: none !important;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input[type="radio"]:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: var(--bs-primary);
}

.form-check-input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Prevent layout shifts */

#invoiceTermContainer {
  transition: none !important;
  min-height: 70px;
}

/* ────────────────────────────────────────────────────────────
   Step rail — Instagram-style segmented progress indicator.
   One block per step; done + current = primary, upcoming = muted.
   Used by every multi-step flow (onboarding wizard, register).
   ──────────────────────────────────────────────────────────── */

.step-rail {
  display: flex;
  gap: 4px;
  width: 100%;
  align-items: stretch;
}

.step-rail-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: 99px;
  background: var(--warm);
  transition: background-color 240ms ease;
}

.step-rail-seg.is-done,
.step-rail-seg.is-active {
  background: var(--color-primary);
}

/* icon-close — shared square icon-only close button (custom modals, sidebars, panels) */

.icon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background 0.12s, color 0.12s;
}

.icon-close i { font-size: 13px; }

.icon-close:hover { background: var(--sand); color: var(--ink); }

.icon-close--bordered {
  border: 1px solid var(--cream);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.icon-close--bordered:hover { border-color: var(--warm); }

/* Shared page header — today, students, notes, offerings, messages, finance */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.page-head-main {
  min-width: 0;
  flex: 1 1 380px;
}

.page-head .eyebrow {
  margin-bottom: 8px;
  display: block;
}

.page-head-title {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.page-head-sub {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--olive);
  max-width: 620px;
  line-height: 1.5;
}

.page-head-sub strong {
  color: var(--ink);
  font-weight: 600;
}

.page-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

@media (max-width: 576px) {
  .page-head-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .page-head-actions .settings-btn,
  .page-head-actions .btn {
    white-space: nowrap;
  }
}

/* ── Bootstrap-compatible components (same-name swap layer) ── */

/* Bootstrap-compatible button components — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes.
   Colors match Bootstrap 5 defaults. */

/* base reset */

.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: button;
}

.btn:hover { color: #212529; }

.btn:focus-visible,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(201, 100, 66, 0.25);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) { cursor: pointer; }

.btn + .btn { margin-left: 0.25rem; }

/* sizes */

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* btn-primary */

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

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

.btn-primary:focus-visible,
.btn-primary.focus {
  color: #fff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 0.25rem rgba(201, 100, 66, 0.35);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* btn-secondary */

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}

.btn-secondary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}

.btn-secondary:active,
.btn-secondary.active {
  color: #fff;
  background-color: #565e64;
  border-color: #51585e;
}

/* btn-success */

.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}

.btn-success:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}

.btn-success:active,
.btn-success.active {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}

/* btn-danger */

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.btn-danger:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}

.btn-danger:active,
.btn-danger.active {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
}

/* btn-warning */

.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
}

.btn-warning:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}

.btn-warning:active,
.btn-warning.active {
  color: #000;
  background-color: #ffcd39;
  border-color: #ffc720;
}

/* btn-info */

.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-info:hover {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
}

.btn-info:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}

.btn-info:active,
.btn-info.active {
  color: #000;
  background-color: #3dd5f3;
  border-color: #25cff2;
}

/* btn-light */

.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

.btn-light:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}

.btn-light:active,
.btn-light.active {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}

/* btn-dark */

.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1e21;
}

.btn-dark:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}

.btn-dark:active,
.btn-dark.active {
  color: #fff;
  background-color: #1a1e21;
  border-color: #191c1f;
}

/* btn-outline-primary */

.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}

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

.btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(201, 100, 66, 0.35);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent);
}

/* btn-outline-secondary */

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* btn-outline-success */

.btn-outline-success {
  color: #198754;
  border-color: #198754;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-outline-success:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}

.btn-outline-success:active,
.btn-outline-success.active {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

/* btn-outline-danger */

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger:active,
.btn-outline-danger.active {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

/* btn-outline-warning */

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning:active,
.btn-outline-warning.active {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

/* btn-outline-info */

.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-info:hover {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-info:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}

.btn-outline-info:active,
.btn-outline-info.active {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

/* btn-outline-dark */

.btn-outline-dark {
  color: #212529;
  border-color: #212529;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.btn-outline-dark:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}

.btn-outline-dark:active,
.btn-outline-dark.active {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

/* btn-outline-light */

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

/* button group */

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Bootstrap-compatible card component — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  word-wrap: break-word;
  background-color: var(--ivory);
  background-clip: border-box;
  border: 1px solid var(--cream);
  border-radius: var(--radius-lg);
}

.card > hr {
  margin-right: 0;
  margin-left: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.card-title {
  margin-bottom: 0.5rem;
}

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: 1rem;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: var(--sand);
  border-bottom: 1px solid var(--cream);
}

.card-header:first-child {
  border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

.card-footer {
  padding: 0.5rem 1rem;
  background-color: var(--sand);
  border-top: 1px solid var(--cream);
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.375rem - 1px) calc(0.375rem - 1px);
}

/* colored card headers — bg-* on card-header */

.card-header.bg-primary   { background-color: var(--accent) !important; color: #fff; border-color: var(--accent); }

.card-header.bg-secondary { background-color: #6c757d !important; color: #fff; border-color: #6c757d; }

.card-header.bg-success   { background-color: #198754 !important; color: #fff; border-color: #198754; }

.card-header.bg-danger    { background-color: #dc3545 !important; color: #fff; border-color: #dc3545; }

.card-header.bg-warning   { background-color: #ffc107 !important; color: #000; border-color: #ffc107; }

.card-header.bg-info      { background-color: #0dcaf0 !important; color: #000; border-color: #0dcaf0; }

.card-header.bg-dark      { background-color: #212529 !important; color: #fff; border-color: #212529; }

.card-header.bg-light     { background-color: #f8f9fa !important; color: #000; border-color: #f8f9fa; }

.card-header-tabs {
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.375rem - 1px);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.375rem - 1px);
  border-bottom-left-radius: calc(0.375rem - 1px);
}

.card-group > .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* LessonPen-style table overrides.
   Applies to every Bootstrap .table in the app, matching the minimal
   .tbl style from the lessonpen reference: uppercase thead label,
   cream hairline row dividers, subtle hover, no zebra stripes. */

.table {
  width: 100%;
  margin-bottom: 0;
  color: var(--charcoal);
  vertical-align: middle;
  border-color: var(--cream);
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.table > :not(caption) > * > * {
  padding: 14px 14px;
  background-color: transparent;
  border-bottom: 1px solid var(--cream);
  box-shadow: none;
}

.table > thead {
  background: transparent;
}

.table > thead > tr > th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cream);
  background: transparent;
  vertical-align: middle;
}

.table > tbody > tr > td {
  color: var(--charcoal);
  vertical-align: middle;
}

.table > tbody > tr:hover > td {
  background: rgba(0, 0, 0, 0.015);
}

.table > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Defang Bootstrap's harsh stripe + dark header overrides. */

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: transparent;
  color: var(--charcoal);
  --bs-table-accent-bg: transparent;
}

.table-striped > tbody > tr:hover > * {
  background-color: rgba(0, 0, 0, 0.015);
}

.table-dark,
.table > thead.table-dark > tr > th,
.table > thead > tr.bg-dark > th,
.table tr.bg-dark > th {
  background: transparent !important;
  color: var(--stone) !important;
  border-color: var(--cream) !important;
  font-weight: 500;
}

/* Drop the legacy "blue dark header" rule that some tables relied on. */

.table thead.table-dark th,
.table thead tr.bg-dark th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

/* Tables inside .card lose their own background; the card already supplies it. */

.card > .table,
.card .table {
  background: transparent;
}

/* Bootstrap-compatible alert + badge components + bg-* color utilities.
   Purpose: allow Bootstrap CSS CDN removal without any template changes. */

/* ── ALERTS ── */

.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.alert-heading { color: inherit; }

.alert-link { font-weight: 700; }

.alert-dismissible {
  padding-right: 3rem;
}

.alert-primary {
  color: #7a2e15;
  background-color: var(--accent-soft);
  border-color: #e8bfae;
}

.alert-primary .alert-link { color: #5a2010; }

.alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
}

.alert-secondary .alert-link { color: #34383c; }

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.alert-success .alert-link { color: #0c4128; }

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.alert-danger .alert-link { color: #6a1a21; }

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.alert-warning .alert-link { color: #523e02; }

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}

.alert-info .alert-link { color: #04414d; }

.alert-light {
  color: #636464;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light .alert-link { color: #4f5050; }

.alert-dark {
  color: #141619;
  background-color: #d3d3d4;
  border-color: #bcbebf;
}

.alert-dark .alert-link { color: #101214; }

/* ── BADGES (LessonPen pill style) ── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--charcoal);
  background: var(--sand);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 1px solid transparent;
  border-radius: 999px;
}

.badge:empty { display: none; }

/* Map Bootstrap badge color modifiers to LessonPen semantic pill tones. */

.badge.bg-primary   { background: var(--accent-soft) !important; color: #7c3a1d !important; }

.badge.bg-secondary { background: var(--sand) !important; color: var(--charcoal) !important; }

.badge.bg-success   { background: #e3e8cf !important; color: #3f5824 !important; }

.badge.bg-danger    { background: #efd2cd !important; color: #7b2222 !important; }

.badge.bg-warning   { background: #f1e3c8 !important; color: #6a4313 !important; }

.badge.bg-info      { background: #d6e5ea !important; color: #22515f !important; }

.badge.bg-light     { background: var(--sand) !important; color: var(--charcoal) !important; }

.badge.bg-dark      { background: var(--night) !important; color: #f5f2ea !important; }

/* Bootstrap's "text-dark on badge" combo: keep readable on warm bg */

.badge.text-dark { color: var(--charcoal) !important; }

/* ── Pill (LessonPen primitive) ── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 12px/1.4 var(--sans);
  background: var(--sand);
  color: var(--charcoal);
  border: 1px solid transparent;
}

.pill.good    { background: #e3e8cf; color: #3f5824; }

.pill.warn    { background: #f1e3c8; color: #6a4313; }

.pill.bad     { background: #efd2cd; color: #7b2222; }

.pill.info    { background: #d6e5ea; color: #22515f; }

.pill.brand   { background: var(--accent-soft); color: #7c3a1d; }

.pill.outline { background: transparent; border-color: var(--warm); color: var(--olive); }

.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }

/* ── Eyebrow (LessonPen overline label) ── */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

/* ── BACKGROUND COLORS ── */

/* Used standalone and inside cards, badges, nav, buttons, etc. */

.bg-primary   { background-color: var(--accent)  !important; }

.bg-secondary { background-color: var(--stone)   !important; }

.bg-success   { background-color: var(--color-success) !important; }

.bg-danger    { background-color: var(--color-danger)  !important; }

.bg-warning   { background-color: var(--color-warning) !important; }

.bg-info      { background-color: var(--color-info)    !important; }

.bg-light     { background-color: var(--sand)   !important; }

.bg-dark      { background-color: var(--night)  !important; }

.bg-white     { background-color: #fff !important; }

.bg-transparent { background-color: transparent !important; }

.bg-body      { background-color: var(--paper)  !important; }

/* bg-opacity variants (Bootstrap 5.1+) */

.bg-opacity-10  { --bs-bg-opacity: 0.1; }

.bg-opacity-25  { --bs-bg-opacity: 0.25; }

.bg-opacity-50  { --bs-bg-opacity: 0.5; }

.bg-opacity-75  { --bs-bg-opacity: 0.75; }

.bg-opacity-100 { --bs-bg-opacity: 1; }

/* gradient utility */

.bg-gradient {
  background-image: var(--bs-gradient, linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))) !important;
}

/* ── SPINNERS ── */

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  background-color: currentcolor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

@keyframes spinner-grow {
  0%  { transform: scale(0); }
  50% { opacity: 1; transform: none; }
}

/* Bootstrap-compatible form components — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes.
   NOTE: form-control/form-select provide critical cross-browser normalization.
         Test on Safari after any changes to this file. */

/* ── FORM LABELS ── */

.form-label {
  margin-bottom: 0.5rem;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}

/* ── FORM CONTROL (text inputs, textareas) ── */

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: var(--ivory);
  background-clip: padding-box;
  border: 1px solid var(--cream);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control[type='file'] {
  overflow: hidden;
}

.form-control[type='file']:not(:disabled):not([readonly]) {
  cursor: pointer;
}

.form-control:focus {
  color: var(--ink);
  background-color: var(--ivory);
  border-color: var(--accent-2);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(201, 100, 66, 0.18);
}

.form-control::-webkit-date-and-time-value {
  height: 1.5em;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext:focus {
  outline: 0;
}

.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
}

textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}

textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
}

/* ── FORM SELECT ── */

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--ivory);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c594f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--cream);
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.form-select:focus {
  border-color: var(--accent-2);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(201, 100, 66, 0.18);
}

.form-select[multiple],
.form-select[size]:not([size='1']) {
  padding-right: 0.75rem;
  background-image: none;
}

.form-select:disabled {
  background-color: #e9ecef;
}

.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* ── FORM CHECK (checkbox, radio) ── */

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}

.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-check-input[type='checkbox'] {
  border-radius: 0.25em;
}

.form-check-input[type='radio'] {
  border-radius: 50%;
}

.form-check-input:active {
  filter: brightness(90%);
}

.form-check-input:focus {
  border-color: var(--accent-2);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(201, 100, 66, 0.18);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:checked[type='checkbox'] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type='radio'] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-check-label { cursor: pointer; }

.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}

.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

/* ── INPUT GROUP ── */

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}

.input-group .btn { position: relative; z-index: 2; }

.input-group .btn:focus { z-index: 3; }

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ── VALIDATION STATES ── */

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #198754;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(25, 135, 84, 0.9);
  border-radius: 0.375rem;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #198754;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.375rem;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* ── FORM FLOATING ── */

.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control {
  padding: 1rem 0.75rem;
}

.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}

.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > .form-control:not(:-moz-placeholder) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* ── RANGE ── */

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.form-range:focus { outline: 0; }

.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }

.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
       appearance: none;
}

.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.form-range:disabled { pointer-events: none; }

.form-range:disabled::-webkit-slider-thumb { background-color: #adb5bd; }

.form-range:disabled::-moz-range-thumb { background-color: #adb5bd; }

/* Bootstrap JS compatibility CSS — minimal rules Bootstrap JS needs to function.
   Purpose: when Bootstrap CSS CDN is removed but Bootstrap JS bundle is kept,
   these rules ensure modal/tab/collapse/tooltip JS components animate correctly.
   Bootstrap JS adds/removes these classes via JavaScript — the CSS must exist. */

/* ── TRANSITIONS ── */

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

/* ── COLLAPSE ── */

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* horizontal collapse variant */

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

/* ── MODAL ── */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translateY(-50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal-dialog-scrollable {
  height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: rgba(26, 24, 20, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.5rem - 1px);
  border-bottom-left-radius: calc(0.5rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

/* modal sizes */

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-sm { max-width: 300px; }
}

@media (min-width: 992px) {
  .modal-lg, .modal-xl { max-width: 800px; }
}

@media (min-width: 1200px) {
  .modal-xl { max-width: 1140px; }
}

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

/* ── TABS (Bootstrap JS tab panel toggling) ── */

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

/* fade variant for tabs */

.tab-content > .tab-pane.fade:not(.show) {
  opacity: 0;
}

/* ── ACCORDION ── */

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  cursor: pointer;
}

.accordion-button:not(.collapsed) {
  color: #0c63e4;
  background-color: #e7f1ff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:focus {
  z-index: 3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.accordion { --bs-accordion-color: #212529; }

.accordion-item {
  color: #212529;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion-item:first-of-type { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }

.accordion-item:first-of-type .accordion-button { border-top-left-radius: calc(0.375rem - 1px); border-top-right-radius: calc(0.375rem - 1px); }

.accordion-item:not(:first-of-type) { border-top: 0; }

.accordion-item:last-of-type { border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }

.accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: calc(0.375rem - 1px); border-bottom-left-radius: calc(0.375rem - 1px); }

.accordion-item:last-of-type .accordion-collapse { border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }

.accordion-body {
  padding: 1rem 1.25rem;
}

.accordion-flush .accordion-collapse { border-width: 0; }

.accordion-flush .accordion-item { border-right: 0; border-left: 0; border-radius: 0; }

.accordion-flush .accordion-item:first-child { border-top: 0; }

.accordion-flush .accordion-item:last-child { border-bottom: 0; }

.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed { border-radius: 0; }

/* ── OFFCANVAS ── */

.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-color: #fff;
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(26, 24, 20, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.offcanvas-backdrop.fade { opacity: 0; }

.offcanvas-backdrop.show { opacity: 1; }

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.offcanvas-title { margin-bottom: 0; line-height: 1.5; }

.offcanvas-body { flex-grow: 1; padding: 1rem; overflow-y: auto; }

.offcanvas-start {
  top: 0;
  left: 0;
  width: 400px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
}

.offcanvas-end {
  top: 0;
  right: 0;
  width: 400px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
}

.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);
}

.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
}

.offcanvas.showing,
.offcanvas.show:not(.hiding),
.offcanvas-sm.showing,
.offcanvas-sm.show:not(.hiding) {
  visibility: visible;
}

.offcanvas.hiding,
.offcanvas.show,
.offcanvas-sm.hiding,
.offcanvas-sm.show {
  transform: none;
}

/* ── TOOLTIP (Bootstrap JS manages show/hide) ── */

.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  margin: 0;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
  /* show state set by Bootstrap JS via .show class */
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow {
  bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^='top'] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.375rem;
}

/* ── POPOVER (Bootstrap JS manages show/hide) ── */

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1070;
  display: block;
  max-width: 276px;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
}

.popover.fade { opacity: 0; }

.popover.show  { opacity: 1; }

.popover-arrow { position: absolute; display: block; width: 1rem; height: 0.5rem; }

.popover-arrow::before,
.popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.popover-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f0f0f0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}

.popover-header:empty { display: none; }

.popover-body {
  padding: 1rem;
  color: #212529;
}

/* ── ACTIVE STATE helpers ── */

/* .active used by Bootstrap JS on nav-links and list-group items */

.nav-link.active {
  color: #0d6efd;
}

/* ensure Bootstrap JS dropdown toggle .show works */

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
}

.dropdown-menu.show {
  display: block;
}

/* ── Utilities ── */

.u-mt-xs  { margin-top:    var(--spacing-xs)  !important; }

.u-mt-sm  { margin-top:    var(--spacing-sm)  !important; }

.u-mt-md  { margin-top:    var(--spacing-md)  !important; }

.u-mt-lg  { margin-top:    var(--spacing-lg)  !important; }

.u-mt-xl  { margin-top:    var(--spacing-xl)  !important; }

.u-mt-0   { margin-top:    0                  !important; }

.u-mb-xs  { margin-bottom: var(--spacing-xs)  !important; }

.u-mb-sm  { margin-bottom: var(--spacing-sm)  !important; }

.u-mb-md  { margin-bottom: var(--spacing-md)  !important; }

.u-mb-lg  { margin-bottom: var(--spacing-lg)  !important; }

.u-mb-xl  { margin-bottom: var(--spacing-xl)  !important; }

.u-mb-0   { margin-bottom: 0                  !important; }

.u-ml-sm  { margin-left:   var(--spacing-sm)  !important; }

.u-ml-md  { margin-left:   var(--spacing-md)  !important; }

.u-ml-0   { margin-left:   0                  !important; }

.u-mr-sm  { margin-right:  var(--spacing-sm)  !important; }

.u-mr-md  { margin-right:  var(--spacing-md)  !important; }

.u-mr-0   { margin-right:  0                  !important; }

.u-pt-sm  { padding-top:    var(--spacing-sm)  !important; }

.u-pt-md  { padding-top:    var(--spacing-md)  !important; }

.u-pb-sm  { padding-bottom: var(--spacing-sm)  !important; }

.u-pb-md  { padding-bottom: var(--spacing-md)  !important; }

.u-p-sm   { padding:        var(--spacing-sm)  !important; }

.u-p-md   { padding:        var(--spacing-md)  !important; }

.u-flex        { display: flex !important; }

.u-flex-col    { flex-direction: column !important; }

.u-flex-row    { flex-direction: row !important; }

.u-flex-wrap   { flex-wrap: wrap !important; }

.u-flex-nowrap { flex-wrap: nowrap !important; }

.u-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }

.u-items-center  { align-items: center !important; }

.u-items-start   { align-items: flex-start !important; }

.u-items-end     { align-items: flex-end !important; }

.u-justify-center  { justify-content: center !important; }

.u-justify-between { justify-content: space-between !important; }

.u-justify-end     { justify-content: flex-end !important; }

.u-d-none   { display: none !important; }

.u-d-block  { display: block !important; }

.u-d-inline { display: inline !important; }

.u-w-full   { width: 100% !important; }

.u-h-full   { height: 100% !important; }

@media (max-width: 576px) {
  .u-hidden-mobile { display: none !important; }
}

@media (min-width: 577px) {
  .u-hidden-desktop { display: none !important; }
}

.u-text-left    { text-align: left   !important; }

.u-text-center  { text-align: center !important; }

.u-text-right   { text-align: right  !important; }

.u-text-sm      { font-size: var(--font-size-sm)   !important; }

.u-text-base    { font-size: var(--font-size-base)  !important; }

.u-text-lg      { font-size: var(--font-size-lg)    !important; }

.u-font-bold    { font-weight: bold !important; }

.u-font-normal  { font-weight: normal !important; }

.u-text-muted   { color: var(--color-text-muted) !important; }

.u-text-primary { color: var(--color-primary)    !important; }

.u-text-danger  { color: var(--color-danger)     !important; }

.u-text-success { color: var(--color-success)    !important; }

.u-nowrap       { white-space: nowrap   !important; }

.u-pre-line     { white-space: pre-line !important; }

.u-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Bootstrap-compatible utilities (same-name swap layer) ── */

/* Bootstrap-compatible spacing utilities — exact same names, same scale.
   Purpose: allow Bootstrap CSS CDN removal without any template changes.
   Scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem */

/* margin */

.m-0  { margin: 0 !important; }

.m-1  { margin: 0.25rem !important; }

.m-2  { margin: 0.5rem !important; }

.m-3  { margin: 1rem !important; }

.m-4  { margin: 1.5rem !important; }

.m-5  { margin: 3rem !important; }

.m-auto { margin: auto !important; }

/* margin-top */

.mt-0  { margin-top: 0 !important; }

.mt-1  { margin-top: 0.25rem !important; }

.mt-2  { margin-top: 0.5rem !important; }

.mt-3  { margin-top: 1rem !important; }

.mt-4  { margin-top: 1.5rem !important; }

.mt-5  { margin-top: 3rem !important; }

.mt-auto { margin-top: auto !important; }

/* margin-bottom */

.mb-0  { margin-bottom: 0 !important; }

.mb-1  { margin-bottom: 0.25rem !important; }

.mb-2  { margin-bottom: 0.5rem !important; }

.mb-3  { margin-bottom: 1rem !important; }

.mb-4  { margin-bottom: 1.5rem !important; }

.mb-5  { margin-bottom: 3rem !important; }

.mb-auto { margin-bottom: auto !important; }

/* margin-start (left in ltr) */

.ms-0  { margin-left: 0 !important; }

.ms-1  { margin-left: 0.25rem !important; }

.ms-2  { margin-left: 0.5rem !important; }

.ms-3  { margin-left: 1rem !important; }

.ms-4  { margin-left: 1.5rem !important; }

.ms-5  { margin-left: 3rem !important; }

.ms-auto { margin-left: auto !important; }

/* margin-end (right in ltr) */

.me-0  { margin-right: 0 !important; }

.me-1  { margin-right: 0.25rem !important; }

.me-2  { margin-right: 0.5rem !important; }

.me-3  { margin-right: 1rem !important; }

.me-4  { margin-right: 1.5rem !important; }

.me-5  { margin-right: 3rem !important; }

.me-auto { margin-right: auto !important; }

/* margin-x (horizontal) */

.mx-0  { margin-left: 0 !important; margin-right: 0 !important; }

.mx-1  { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }

.mx-2  { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }

.mx-3  { margin-left: 1rem !important; margin-right: 1rem !important; }

.mx-4  { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }

.mx-5  { margin-left: 3rem !important; margin-right: 3rem !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* margin-y (vertical) */

.my-0  { margin-top: 0 !important; margin-bottom: 0 !important; }

.my-1  { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }

.my-2  { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

.my-3  { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.my-4  { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.my-5  { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* padding */

.p-0  { padding: 0 !important; }

.p-1  { padding: 0.25rem !important; }

.p-2  { padding: 0.5rem !important; }

.p-3  { padding: 1rem !important; }

.p-4  { padding: 1.5rem !important; }

.p-5  { padding: 3rem !important; }

/* padding-top */

.pt-0  { padding-top: 0 !important; }

.pt-1  { padding-top: 0.25rem !important; }

.pt-2  { padding-top: 0.5rem !important; }

.pt-3  { padding-top: 1rem !important; }

.pt-4  { padding-top: 1.5rem !important; }

.pt-5  { padding-top: 3rem !important; }

/* padding-bottom */

.pb-0  { padding-bottom: 0 !important; }

.pb-1  { padding-bottom: 0.25rem !important; }

.pb-2  { padding-bottom: 0.5rem !important; }

.pb-3  { padding-bottom: 1rem !important; }

.pb-4  { padding-bottom: 1.5rem !important; }

.pb-5  { padding-bottom: 3rem !important; }

/* padding-start (left in ltr) */

.ps-0  { padding-left: 0 !important; }

.ps-1  { padding-left: 0.25rem !important; }

.ps-2  { padding-left: 0.5rem !important; }

.ps-3  { padding-left: 1rem !important; }

.ps-4  { padding-left: 1.5rem !important; }

.ps-5  { padding-left: 3rem !important; }

/* padding-end (right in ltr) */

.pe-0  { padding-right: 0 !important; }

.pe-1  { padding-right: 0.25rem !important; }

.pe-2  { padding-right: 0.5rem !important; }

.pe-3  { padding-right: 1rem !important; }

.pe-4  { padding-right: 1.5rem !important; }

.pe-5  { padding-right: 3rem !important; }

/* padding-x (horizontal) */

.px-0  { padding-left: 0 !important; padding-right: 0 !important; }

.px-1  { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

.px-2  { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

.px-3  { padding-left: 1rem !important; padding-right: 1rem !important; }

.px-4  { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

.px-5  { padding-left: 3rem !important; padding-right: 3rem !important; }

/* padding-y (vertical) */

.py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }

.py-1  { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

.py-2  { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.py-3  { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.py-4  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.py-5  { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* gap */

.gap-0 { gap: 0 !important; }

.gap-1 { gap: 0.25rem !important; }

.gap-2 { gap: 0.5rem !important; }

.gap-3 { gap: 1rem !important; }

.gap-4 { gap: 1.5rem !important; }

.gap-5 { gap: 3rem !important; }

.gap-x-1 { -moz-column-gap: 0.25rem !important; column-gap: 0.25rem !important; }

.gap-x-2 { -moz-column-gap: 0.5rem !important; column-gap: 0.5rem !important; }

.gap-x-3 { -moz-column-gap: 1rem !important; column-gap: 1rem !important; }

.gap-x-4 { -moz-column-gap: 1.5rem !important; column-gap: 1.5rem !important; }

.gap-y-1 { row-gap: 0.25rem !important; }

.gap-y-2 { row-gap: 0.5rem !important; }

.gap-y-3 { row-gap: 1rem !important; }

.gap-y-4 { row-gap: 1.5rem !important; }

/* Bootstrap-compatible flex/display utilities — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes. */

/* display */

.d-none         { display: none !important; }

.d-inline       { display: inline !important; }

.d-inline-block { display: inline-block !important; }

.d-block        { display: block !important; }

.d-flex         { display: flex !important; }

.d-inline-flex  { display: inline-flex !important; }

.d-grid         { display: grid !important; }

.d-table        { display: table !important; }

.d-table-cell   { display: table-cell !important; }

/* responsive display — sm (≥576px) */

@media (min-width: 576px) {
  .d-sm-none         { display: none !important; }
  .d-sm-inline       { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-block        { display: block !important; }
  .d-sm-flex         { display: flex !important; }
  .d-sm-inline-flex  { display: inline-flex !important; }
  .d-sm-grid         { display: grid !important; }
}

/* responsive display — md (≥768px) */

@media (min-width: 768px) {
  .d-md-none         { display: none !important; }
  .d-md-inline       { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-block        { display: block !important; }
  .d-md-flex         { display: flex !important; }
  .d-md-inline-flex  { display: inline-flex !important; }
  .d-md-grid         { display: grid !important; }
}

/* responsive display — lg (≥992px) */

@media (min-width: 992px) {
  .d-lg-none         { display: none !important; }
  .d-lg-inline       { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block        { display: block !important; }
  .d-lg-flex         { display: flex !important; }
  .d-lg-inline-flex  { display: inline-flex !important; }
  .d-lg-grid         { display: grid !important; }
}

/* responsive display — xl (≥1200px) */

@media (min-width: 1200px) {
  .d-xl-none         { display: none !important; }
  .d-xl-block        { display: block !important; }
  .d-xl-flex         { display: flex !important; }
}

/* flex direction */

.flex-row         { flex-direction: row !important; }

.flex-column      { flex-direction: column !important; }

.flex-row-reverse { flex-direction: row-reverse !important; }

.flex-column-reverse { flex-direction: column-reverse !important; }

/* responsive flex direction — sm */

@media (min-width: 576px) {
  .flex-sm-row    { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
}

/* responsive flex direction — md */

@media (min-width: 768px) {
  .flex-md-row    { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
}

/* flex wrap */

.flex-wrap        { flex-wrap: wrap !important; }

.flex-nowrap      { flex-wrap: nowrap !important; }

.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* flex grow/shrink */

.flex-fill        { flex: 1 1 auto !important; }

.flex-grow-0      { flex-grow: 0 !important; }

.flex-grow-1      { flex-grow: 1 !important; }

.flex-shrink-0    { flex-shrink: 0 !important; }

.flex-shrink-1    { flex-shrink: 1 !important; }

/* justify-content */

.justify-content-start   { justify-content: flex-start !important; }

.justify-content-end     { justify-content: flex-end !important; }

.justify-content-center  { justify-content: center !important; }

.justify-content-between { justify-content: space-between !important; }

.justify-content-around  { justify-content: space-around !important; }

.justify-content-evenly  { justify-content: space-evenly !important; }

/* responsive justify-content — md */

@media (min-width: 768px) {
  .justify-content-md-start   { justify-content: flex-start !important; }
  .justify-content-md-end     { justify-content: flex-end !important; }
  .justify-content-md-center  { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
}

/* align-items */

.align-items-start    { align-items: flex-start !important; }

.align-items-end      { align-items: flex-end !important; }

.align-items-center   { align-items: center !important; }

.align-items-baseline { align-items: baseline !important; }

.align-items-stretch  { align-items: stretch !important; }

/* align-self */

.align-self-start    { align-self: flex-start !important; }

.align-self-end      { align-self: flex-end !important; }

.align-self-center   { align-self: center !important; }

.align-self-baseline { align-self: baseline !important; }

.align-self-stretch  { align-self: stretch !important; }

.align-self-auto     { align-self: auto !important; }

/* align-content */

.align-content-start   { align-content: flex-start !important; }

.align-content-end     { align-content: flex-end !important; }

.align-content-center  { align-content: center !important; }

.align-content-between { align-content: space-between !important; }

.align-content-around  { align-content: space-around !important; }

.align-content-stretch { align-content: stretch !important; }

/* order */

.order-0     { order: 0 !important; }

.order-1     { order: 1 !important; }

.order-2     { order: 2 !important; }

.order-3     { order: 3 !important; }

.order-4     { order: 4 !important; }

.order-5     { order: 5 !important; }

.order-first { order: -1 !important; }

.order-last  { order: 6 !important; }

/* Bootstrap-compatible typography utilities — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes. */

/* font-weight */

.fw-lighter  { font-weight: lighter !important; }

.fw-light    { font-weight: 300 !important; }

.fw-normal   { font-weight: 400 !important; }

.fw-medium   { font-weight: 500 !important; }

.fw-semibold { font-weight: 600 !important; }

.fw-bold     { font-weight: 700 !important; }

.fw-bolder   { font-weight: bolder !important; }

/* font-style */

.fst-italic  { font-style: italic !important; }

.fst-normal  { font-style: normal !important; }

/* font-size */

.fs-1 { font-size: 2.5rem !important; }

.fs-2 { font-size: 2rem !important; }

.fs-3 { font-size: 1.75rem !important; }

.fs-4 { font-size: 1.5rem !important; }

.fs-5 { font-size: 1.25rem !important; }

.fs-6 { font-size: 1rem !important; }

/* text-align */

.text-start  { text-align: left !important; }

.text-end    { text-align: right !important; }

.text-center { text-align: center !important; }

/* responsive text-align — sm */

@media (min-width: 576px) {
  .text-sm-start  { text-align: left !important; }
  .text-sm-end    { text-align: right !important; }
  .text-sm-center { text-align: center !important; }
}

/* responsive text-align — md */

@media (min-width: 768px) {
  .text-md-start  { text-align: left !important; }
  .text-md-end    { text-align: right !important; }
  .text-md-center { text-align: center !important; }
}

/* text-transform */

.text-lowercase  { text-transform: lowercase !important; }

.text-uppercase  { text-transform: uppercase !important; }

.text-capitalize { text-transform: capitalize !important; }

/* text-decoration */

.text-decoration-none      { text-decoration: none !important; }

.text-decoration-underline { text-decoration: underline !important; }

.text-decoration-line-through { text-decoration: line-through !important; }

/* text wrapping */

.text-wrap    { white-space: normal !important; }

.text-nowrap  { white-space: nowrap !important; }

.text-break   { word-wrap: break-word !important; word-break: break-word !important; }

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* line-height */

.lh-1   { line-height: 1 !important; }

.lh-sm  { line-height: 1.25 !important; }

.lh-base { line-height: 1.5 !important; }

.lh-lg  { line-height: 2 !important; }

/* small inline element */

.small { font-size: 0.875em !important; }

/* text color */

.text-primary   { color: var(--bs-primary, #0d6efd) !important; }

.text-secondary { color: var(--bs-secondary, #6c757d) !important; }

.text-success   { color: var(--bs-success, #198754) !important; }

.text-info      { color: var(--bs-info, #0dcaf0) !important; }

.text-warning   { color: var(--bs-warning, #ffc107) !important; }

.text-danger    { color: var(--bs-danger, #dc3545) !important; }

.text-light     { color: var(--bs-light, #f8f9fa) !important; }

.text-dark      { color: var(--bs-dark, #212529) !important; }

.text-white     { color: #fff !important; }

.text-muted     { color: #6c757d !important; }

.text-black-50  { color: rgba(0, 0, 0, 0.5) !important; }

.text-white-50  { color: rgba(255, 255, 255, 0.5) !important; }

.text-body      { color: #212529 !important; }

.text-reset     { color: inherit !important; }

/* list utilities */

.list-unstyled {
  padding-left: 0 !important;
  list-style: none !important;
}

.list-inline { padding-left: 0 !important; list-style: none !important; }

.list-inline-item { display: inline-block !important; }

.list-inline-item:not(:last-child) { margin-right: 0.5rem !important; }

/* link color */

.link-primary   { color: #0d6efd !important; }

.link-secondary { color: #6c757d !important; }

.link-success   { color: #198754 !important; }

.link-danger    { color: #dc3545 !important; }

.link-warning   { color: #ffc107 !important; }

.link-info      { color: #0dcaf0 !important; }

.link-dark      { color: #212529 !important; }

/* Bootstrap-compatible position/sizing/border/shadow utilities — exact same names.
   Purpose: allow Bootstrap CSS CDN removal without any template changes. */

/* position */

.position-static   { position: static !important; }

.position-relative { position: relative !important; }

.position-absolute { position: absolute !important; }

.position-fixed    { position: fixed !important; }

.position-sticky   { position: sticky !important; }

/* inset helpers */

.top-0    { top: 0 !important; }

.top-50   { top: 50% !important; }

.top-100  { top: 100% !important; }

.bottom-0 { bottom: 0 !important; }

.bottom-50 { bottom: 50% !important; }

.bottom-100 { bottom: 100% !important; }

.start-0  { left: 0 !important; }

.start-50 { left: 50% !important; }

.start-100 { left: 100% !important; }

.end-0    { right: 0 !important; }

.end-50   { right: 50% !important; }

.end-100  { right: 100% !important; }

.translate-middle   { transform: translate(-50%, -50%) !important; }

.translate-middle-x { transform: translateX(-50%) !important; }

.translate-middle-y { transform: translateY(-50%) !important; }

/* sizing */

.w-25  { width: 25% !important; }

.w-50  { width: 50% !important; }

.w-75  { width: 75% !important; }

.w-100 { width: 100% !important; }

.w-auto { width: auto !important; }

.h-25  { height: 25% !important; }

.h-50  { height: 50% !important; }

.h-75  { height: 75% !important; }

.h-100 { height: 100% !important; }

.h-auto { height: auto !important; }

.mw-100 { max-width: 100% !important; }

.mh-100 { max-height: 100% !important; }

.min-vw-100 { min-width: 100vw !important; }

.min-vh-100 { min-height: 100vh !important; }

.vw-100     { width: 100vw !important; }

.vh-100     { height: 100vh !important; }

/* overflow */

.overflow-auto    { overflow: auto !important; }

.overflow-hidden  { overflow: hidden !important; }

.overflow-visible { overflow: visible !important; }

.overflow-scroll  { overflow: scroll !important; }

.overflow-x-auto    { overflow-x: auto !important; }

.overflow-x-hidden  { overflow-x: hidden !important; }

.overflow-y-auto    { overflow-y: auto !important; }

.overflow-y-hidden  { overflow-y: hidden !important; }

.overflow-y-scroll  { overflow-y: scroll !important; }

/* border */

.border        { border: 1px solid #dee2e6 !important; }

.border-0      { border: 0 !important; }

.border-top    { border-top: 1px solid #dee2e6 !important; }

.border-top-0  { border-top: 0 !important; }

.border-end    { border-right: 1px solid #dee2e6 !important; }

.border-end-0  { border-right: 0 !important; }

.border-bottom { border-bottom: 1px solid #dee2e6 !important; }

.border-bottom-0 { border-bottom: 0 !important; }

.border-start  { border-left: 1px solid #dee2e6 !important; }

.border-start-0 { border-left: 0 !important; }

.border-primary   { border-color: #0d6efd !important; }

.border-secondary { border-color: #6c757d !important; }

.border-success   { border-color: #198754 !important; }

.border-danger    { border-color: #dc3545 !important; }

.border-warning   { border-color: #ffc107 !important; }

.border-info      { border-color: #0dcaf0 !important; }

.border-dark      { border-color: #212529 !important; }

.border-light     { border-color: #f8f9fa !important; }

.border-white     { border-color: #fff !important; }

.border-1 { border-width: 1px !important; }

.border-2 { border-width: 2px !important; }

.border-3 { border-width: 3px !important; }

.border-4 { border-width: 4px !important; }

.border-5 { border-width: 5px !important; }

/* border-radius */

.rounded         { border-radius: 0.375rem !important; }

.rounded-0       { border-radius: 0 !important; }

.rounded-1       { border-radius: 0.25rem !important; }

.rounded-2       { border-radius: 0.375rem !important; }

.rounded-3       { border-radius: 0.5rem !important; }

.rounded-4       { border-radius: 1rem !important; }

.rounded-5       { border-radius: 2rem !important; }

.rounded-circle  { border-radius: 50% !important; }

.rounded-pill    { border-radius: 50rem !important; }

.rounded-top     { border-top-left-radius: 0.375rem !important; border-top-right-radius: 0.375rem !important; }

.rounded-bottom  { border-bottom-left-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }

.rounded-start   { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; }

.rounded-end     { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }

/* shadow */

.shadow-none { box-shadow: none !important; }

.shadow-sm   { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

.shadow      { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }

.shadow-lg   { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

/* visibility */

.visible   { visibility: visible !important; }

.invisible { visibility: hidden !important; }

/* cursor */

.pe-none   { pointer-events: none !important; }

.pe-auto   { pointer-events: auto !important; }

/* user-select */

.user-select-all  { -webkit-user-select: all !important; -moz-user-select: all !important; user-select: all !important; }

.user-select-auto { -webkit-user-select: auto !important; -moz-user-select: auto !important; user-select: auto !important; }

.user-select-none { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; }

/* z-index */

.z-0  { z-index: 0 !important; }

.z-1  { z-index: 1 !important; }

.z-2  { z-index: 2 !important; }

.z-3  { z-index: 3 !important; }

.z-n1 { z-index: -1 !important; }

/* ── Modules ── */

/* ────────────────────────────────────────────────────────────
   Today dashboard — LessonPen solo-teacher landing page.
   ──────────────────────────────────────────────────────────── */

.page-container--today {}

/* ── Greeting row ── */

.today-greet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.today-greet-text { min-width: 0; flex: 1 1 380px; }

.today-greet-date { margin-bottom: 10px; display: block; }

.today-greet-title {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.today-greet-sub {
  margin-top: 12px;
  font-size: 16px;
  color: var(--olive);
  max-width: 560px;
  line-height: 1.5;
}

.today-greet-sub strong { color: var(--ink); font-weight: 600; }

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

.today-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.today-btn:hover {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
}

.today-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
}

.today-btn-brand:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #faf7ee;
}

.today-btn-ghost {
  background: transparent;
  border-color: var(--cream);
  color: var(--olive);
}

.today-btn-ghost:hover {
  background: var(--sand);
  color: var(--ink);
}

/* ── Onboarding hero card ── */

.today-onb-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.today-onb-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
}

.today-onb-body {
  flex: 1;
  min-width: 0;
}

.today-onb-eyebrow {
  font-size: 0.75rem;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.today-onb-progress { font-weight: 500; }

.today-onb-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.today-onb-desc {
  font-size: 0.8125rem;
  color: var(--olive);
}

.today-onb-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Plain accent text-link used in onboarding card + subscription banner CTAs */

.lp-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s;
}

.lp-text-link:hover { color: var(--accent-2); }

.lp-text-link i { font-size: 11px; }

@media (max-width: 640px) {
  .today-onb-card {
    flex-wrap: wrap;
    gap: 12px;
  }
  .today-onb-cta { width: 100%; justify-content: center; }
}

/* ── Stat row ── */

.today-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.today-stat {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.today-stat .eyebrow { margin: 0; }

.today-stat--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.today-stat--link:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.today-stat--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Offset the sticky navbar when the "To confirm" stat jumps to #attendanceCard. */

.attendance-card { scroll-margin-top: 90px; }

.today-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.today-stat-value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.today-stat-sub {
  font-size: 12px;
  color: var(--stone);
}

.today-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font: 500 11px/1.3 var(--sans);
  background: #f1e3c8;
  color: #6a4313;
}

.today-stat-pill.warn { background: #f1e3c8; color: #6a4313; }

.today-stat-pill.bad  { background: #efd2cd; color: #7b2222; }

.today-stat-pill.good { background: #dfe4d8; color: #3f5824; }

/* ── Two-column body ── */

.today-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.today-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.today-side .today-card { flex: 1; }

.today-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}

.today-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--cream);
}

.today-card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.today-card-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--stone);
}

.today-card-meta { font-size: 12px; color: var(--stone); }

.today-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--olive);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 0;
  transition: color 0.12s, background 0.12s;
}

.today-link:hover { color: var(--ink); background: var(--sand); }

.today-link i { font-size: 11px; opacity: 0.7; }

/* Inline cards' simple notes/invoices rows live with padding around them */

.today-card .today-side-row,
.today-card .today-side-empty {
  padding: 12px 22px;
  border-top: 1px solid var(--cream);
}

.today-card .today-side-row:first-of-type,
.today-card .today-side-empty:first-of-type { border-top: 0; }

/* Invoice content layout */

.today-invoice-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-top: 1px solid var(--cream);
}

.today-invoice-text {
  font-size: 14px;
  color: var(--ink);
  flex: 1;
}

.today-invoice-text strong {
  color: #b3261e;
  font-weight: 600;
}

/* ── Today's lessons (left column) ── */

.today-lesson-list { display: flex; flex-direction: column; }

.today-lesson-row {
  display: grid;
  grid-template-columns: 92px 38px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--cream);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s;
}

.today-lesson-row:first-child { border-top: 0; }

.today-lesson-row:hover { background: rgba(0, 0, 0, 0.015); }

.today-lesson-row-now { background: rgba(201, 100, 66, 0.045); }

.today-lesson-row-now:hover { background: rgba(201, 100, 66, 0.07); }

.today-lesson-time {
  font-variant-numeric: tabular-nums;
}

.today-lesson-time-start {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.today-lesson-row-now .today-lesson-time-start { color: var(--accent); }

.today-lesson-time-end {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--stone);
  margin-top: 1px;
}

.today-lesson-main { min-width: 0; }

.today-lesson-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-lesson-meta {
  font-size: 13px;
  color: var(--olive);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-lesson-tail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Avatars (small + xs) ── */

.today-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--av-bg, var(--accent-soft));
  color: var(--av-ink, #7c3a1d);
  border: 1px solid var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.today-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.today-avatar-group {
  background: #d6e5ea;
  color: #22515f;
  font-size: 13px;
}

.today-lesson-row-group { cursor: default; }

.today-lesson-row-group:hover { background: transparent; }

/* ── Group roster popover (today-lessons card) ──
   Positioned via JS as position:fixed (see todayGroupRoster.js) so it can
   escape .today-card's overflow:hidden instead of being clipped by it. */

.today-group-roster {
  position: relative;
  display: inline-block;
}

.today-group-roster-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 0;
  margin-top: 1px;
  font: inherit;
  cursor: pointer;
}

.today-group-roster-toggle:hover,
.today-group-roster-toggle[aria-expanded="true"] {
  background: none;
  color: var(--ink);
}

.today-group-roster-pop {
  position: fixed;
  z-index: 1050;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 6px;
}

.today-group-roster-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.today-group-roster-name {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.today-group-roster-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--stone);
}

.today-group-roster-status.is-confirmed { color: #3f5824; }

/* ── Pills (LessonPen tones) ── */

.today-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 11px/1.3 var(--sans);
  background: var(--sand);
  color: var(--charcoal);
  border: 1px solid transparent;
  white-space: nowrap;
}

.today-pill.brand { background: var(--accent-soft); color: #7c3a1d; }

.today-pill.good  { background: #dfe4d8; color: #3f5824; }

.today-pill.warn  { background: #f1e3c8; color: #6a4313; }

.today-pill.bad   { background: #efd2cd; color: #7b2222; }

.today-pill.info  { background: #d6e5ea; color: #22515f; }

.today-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* ── Side rows (notes + invoices) ── */

.today-side-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.today-side-main { flex: 1; min-width: 0; }

.today-side-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-side-meta {
  font-size: 12px;
  color: var(--stone);
  margin-top: 1px;
}

.today-side-amount {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.today-side-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--olive);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.today-side-action:hover {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--ring);
}

.today-side-action i { font-size: 10px; }

.today-side-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--stone);
  font-size: 13px;
}

.today-side-empty i { font-size: 16px; color: var(--stone); opacity: 0.6; }

/* Attendance all-caught-up: centred hero matching today-empty proportions */

.att-empty.today-side-empty {
  flex-direction: column;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 10px;
  border-top: 0 !important;
}

.att-empty.today-side-empty i {
  font-size: 36px;
  color: #3f5824;
  opacity: 1;
}

/* ── Empty state inside main card ── */

.today-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--stone);
}

.today-empty-icon {
  font-size: 28px;
  color: var(--ring);
  margin-bottom: 12px;
}

.today-empty-text {
  font-size: 14px;
  color: var(--olive);
}

/* ── Subscription nudge card ── */

.sub-nudge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-left: 3px solid var(--color-warning);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.sub-nudge--danger { border-left-color: var(--color-danger); }

.sub-nudge-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warning);
  font-size: 1rem;
}

.sub-nudge--danger .sub-nudge-icon {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

.sub-nudge-body { flex: 1; min-width: 0; }

.sub-nudge-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.sub-nudge-sub {
  font-size: 0.8125rem;
  color: var(--stone);
}

.sub-nudge-cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
  .sub-nudge { flex-wrap: wrap; }
  .sub-nudge-cta { width: 100%; text-align: center; justify-content: center; }
}

/* ── Responsive ── */

@media (max-width: 992px) {
  .today-stats { grid-template-columns: repeat(2, 1fr); }
  .today-body { grid-template-columns: minmax(0, 1fr); }
  .today-side { order: -1; }
}

@media (max-width: 576px) {
  .today-greet-actions { width: 100%; justify-content: flex-end; }
  .today-greet-actions .today-btn { white-space: nowrap; }
  .today-greet-title { font-size: var(--font-size-page-title); }
  .today-greet-sub   { font-size: 14px; }
  .today-stats       { grid-template-columns: 1fr 1fr; gap: 12px; }
  .today-stat-value  { font-size: 28px; }
  .today-lesson-row  { grid-template-columns: 70px 32px 1fr; padding: 12px 16px; gap: 10px; }
  .today-lesson-tail { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
  .today-card-head   { padding: 14px 16px 10px; }
  .today-card .today-side-row,
  .today-card .today-side-empty { padding: 12px 16px; }
}

/* ── Attendance card ── */

.att-list { padding: 4px 0 6px; }

.att-day + .att-day { border-top: 1px solid var(--cream); }

.att-day-label {
  padding: 12px 22px 4px;
  font: 600 11px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stone);
}

.att-item { border-top: 1px solid transparent; }

/* Coalesced group-lesson card — header row matches a flat attendance row
   exactly (time/avatar/name/actions via .att-row, same as renderAttRow in
   today.ejs) so group and individual lessons read identically. Its
   confirm/cancel act on the session as a whole; the per-student rows below
   stay hidden (.att-group-students[hidden]) until the session is confirmed,
   see todayAttendance.js#resolveGroupSession. */

.att-group-card {
  margin: 4px 0;
  border-top: 1px solid var(--cream);
  border-bottom: 1px solid var(--cream);
  background: var(--paper);
  overflow: hidden;
}

.att-group-session-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.att-group-students { border-top: 1px solid var(--cream); }

.att-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
}

.att-time { width: 56px; flex-shrink: 0; }

.att-time-val {
  display: block;
  font: 600 14px/1.2 var(--sans);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.att-time-sub { display: block; font-size: 11px; color: var(--stone); margin-top: 1px; }

.att-main { flex: 1; min-width: 0; }

.att-name {
  font: 500 14px/1.3 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-meta { font-size: 12px; color: var(--stone); margin-top: 1px; }

.att-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.att-note-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cream);
  border-radius: 8px;
  background: transparent;
  color: var(--olive);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.att-note-toggle:hover { background: var(--sand); color: var(--ink); }

.att-note-toggle.is-active { background: var(--sand); color: var(--ink); border-color: var(--ring); }

.att-att-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--ivory);
}

.att-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #c8d2bd;
  background: #dfe4d8;
  color: #3f5824;
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.att-confirm:hover { background: #cfd9c4; border-color: #c8d2bd; }

.att-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--cream);
  background: transparent;
  color: var(--olive);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.att-cancel:hover { background: #efd2cd; color: #7b2222; border-color: #e0bdb6; }

.att-cancel i:first-child { font-size: 12px; }

.att-cancel i:last-child { font-size: 9px; opacity: 0.7; }

.att-cancel-menu { min-width: 230px; padding: 6px; }

.att-cancel-menu .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  white-space: normal;
}

.att-cancel-title { font: 500 13px/1.3 var(--sans); color: var(--ink); }

.att-cancel-sub { font-size: 11px; color: var(--stone); margin-top: 1px; }

.att-expand { padding: 0 22px 14px 70px; }

.att-note-textarea {
  width: 100%;
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  resize: vertical;
  outline: none;
}

.att-note-textarea:focus { border-color: var(--ring); }

.att-attach { margin-top: 8px; }

/* Attendance list clamp + gradient fade */

.att-list-wrap {
  position: relative;
  max-height: 308px; /* ~5 rows at ~52px each + one day label */
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.att-list-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.att-list-wrap--short,
.att-list-wrap.is-expanded {
  max-height: none;
}

.att-list-wrap--short::after,
.att-list-wrap.is-expanded::after {
  display: none;
}

/* View more button */

.att-view-more-row {
  padding: 10px 22px 12px;
  border-top: 1px solid var(--cream);
}

.att-view-more-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--cream);
  background: transparent;
  color: var(--olive);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.att-view-more-btn:hover {
  background: var(--sand);
  color: var(--ink);
  border-color: var(--ring);
}

.att-view-more-btn i {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.att-view-more-btn.is-expanded i {
  transform: rotate(180deg);
}

/* Instant-commit fade */

.att-item.att-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (max-width: 576px) {
  .att-row { padding: 10px 16px; gap: 10px; }
  .att-day-label { padding: 12px 16px 4px; }
  .att-confirm-label { display: none; }
  .att-cancel-label { display: none; }
  .att-expand { padding: 0 16px 14px 16px; }
}

/* ─────────────────────────────────────────────────────────────────
   Schedule page — LessonPen styling for the FullCalendar instance.
   ───────────────────────────────────────────────────────────────── */

/* ── Top bar (Google-Calendar-style unified header) ───────────────── */

.lp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--cream);
  flex-wrap: wrap;
  position: sticky;
  top: calc(var(--lp-navbar-h, 56px) + 32px);
  z-index: 100;
  background: var(--paper);
}

.lp-toolbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -32px;
  height: 32px;
  background: var(--paper);
  pointer-events: none;
}

.lp-toolbar-left,
.lp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-tb-title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  white-space: nowrap;
}

.lp-tb-title--inline {
  margin: 0;
  font-size: 22px;
  flex: 1;
  text-align: center;
  pointer-events: none;
}

.lp-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ivory);
  border: 1px solid var(--cream);
  color: var(--ink);
  padding: 8px 14px;
  font: 500 14px/1 var(--sans);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.lp-tb-btn:hover {
  background: var(--sand);
  border-color: var(--ring);
}

.lp-tb-nav {
  display: inline-flex;
  border: 1px solid var(--cream);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ivory);
}

.lp-tb-icon {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  width: 36px;
  height: 36px;
  font-size: 14px;
  color: var(--olive);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lp-tb-icon + .lp-tb-icon { border-left: 1px solid var(--cream); }

.lp-tb-icon:hover { background: var(--sand); color: var(--ink); }

.lp-tb-view-dd { position: relative; }

.lp-tb-view-trigger {
  min-width: 100px;
  justify-content: space-between;
}

.lp-tb-view-trigger i { font-size: 13px; color: var(--olive); margin-left: 6px; }

.lp-tb-view-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  min-width: 170px;
  list-style: none;
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lp-tb-view-opt {
  padding: 10px 14px;
  font: 500 15px/1.2 var(--sans);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.lp-tb-view-opt:hover { background: var(--sand); }

.lp-tb-view-opt.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.lp-tb-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 8px 16px;
  font: 600 14px/1 var(--sans);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

.lp-tb-create:hover {
  background: #b95637;
  box-shadow: 0 1px 4px rgba(201, 100, 66, 0.35);
}

.lp-tb-create i { font-size: 15px; }

.lp-tb-gcal i.fab { font-size: 14px; color: var(--olive); }

/* More (···) button — desktop hidden, shown on mobile via media query */

.lp-tb-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lp-tb-more-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  border: 1px solid var(--cream);
  color: var(--olive);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}

.lp-tb-more-btn:hover { background: var(--sand); color: var(--ink); }

.lp-tb-more-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.lp-tb-more-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transition: background-color 0.12s ease;
}

.lp-tb-more-btn.has-pending .lp-tb-more-dot.is-lit {
  background: var(--accent);
}

/* FAB (+) — desktop hidden, shown on mobile via media query */

.lp-tb-fab { display: none; }

/* Filters — secondary row directly under the top bar */

.lp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 0;
}

.lp-filter-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--ivory) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23998c75' d='M0 0l5 6 5-6z'/></svg>") right 14px center / 10px no-repeat;
  border: 1px solid var(--cream);
  border-radius: 999px;
  padding: 8px 32px 8px 16px;
  font: 500 14.5px/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
  min-width: 160px;
}

.lp-filter-select:hover { border-color: var(--ring); }

.lp-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
  outline: 0;
}

/* Hybrid combobox (search input + dropdown list) — used for the student
   filter. The hidden <input id="studentFilter"> still drives client-side
   visibility toggling via applyClientFilters. */

.lp-combo {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 180px;
}

.lp-combo-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--ivory) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23998c75' stroke-width='1.6' stroke-linecap='round' d='M7 12.5A5.5 5.5 0 1 1 7 1.5a5.5 5.5 0 0 1 0 11zM11 11l3.5 3.5'/></svg>") 12px center / 15px no-repeat;
  border: 1px solid var(--cream);
  border-radius: 999px;
  padding: 11px 38px 11px 38px;
  font: 500 17px/1.2 var(--sans);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.lp-combo-input::-moz-placeholder { color: var(--olive); }

.lp-combo-input::placeholder { color: var(--olive); }

.lp-combo-input:hover { border-color: var(--ring); }

.lp-combo-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
  outline: 0;
}

.lp-combo-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
  cursor: pointer;
  font-size: 12px;
}

.lp-combo-clear:hover { background: var(--sand); color: var(--ink); }

.lp-combo-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
}

.lp-combo-option {
  padding: 10px 14px;
  font: 500 14.5px/1.2 var(--sans);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.lp-combo-option:hover { background: var(--sand); }

.lp-combo-option[data-id=""] {
  color: var(--olive);
  font-style: italic;
}

.lp-combo-option[data-id=""]:hover { color: var(--ink); }

@media (max-width: 991.98px) {
  .lp-toolbar { top: calc(var(--lp-navbar-h, 56px) + 16px); }
  .lp-toolbar::before { top: -16px; height: 16px; }
}

@media (max-width: 720px) {
  .lp-tb-title { font-size: 28px; white-space: normal; }
}

@media (max-width: 576px) {
  /* ── Single-row toolbar ── */
  .lp-toolbar {
    flex-wrap: nowrap;
    position: relative;
    top: 0; /* reset the sticky top offset inherited from the 991px rule */
    overflow: visible;
    padding: 6px 0 8px;
    gap: 6px;
  }
  .lp-toolbar-left { flex-wrap: nowrap; gap: 6px; }

  /* Date title hidden from toolbar row — column headers make the week obvious */
  .lp-tb-title--inline { display: none; }

  /* Compact the nav buttons slightly */
  .lp-tb-btn,
  .lp-tb-create { padding: 6px 10px; font-size: 13px; gap: 4px; }
  .lp-tb-icon { width: 30px; height: 30px; font-size: 12px; }
  .lp-tb-view-trigger { min-width: 0; }

  /* ── Right panel: hidden by default, drops down as overlay when .is-open ── */
  /* School layout — full-width drop-down */
  .lp-toolbar > .lp-toolbar-right {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    gap: 8px;
    background: var(--ivory);
    border: 1px solid var(--cream);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
  .lp-toolbar > .lp-toolbar-right.is-open { display: flex; }

  /* Freelance ··· menu — compact inline popover below the button */
  .lp-tb-more-wrap { margin-left: auto; }
  .lp-tb-more-btn { display: inline-flex; }
  .lp-tb-more-wrap .lp-toolbar-right {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: auto;
    min-width: 168px;
    z-index: 50;
    flex-direction: column;
    gap: 4px;
    background: var(--ivory);
    border: 1px solid var(--cream);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
  .lp-tb-more-wrap .lp-toolbar-right.is-open { display: flex; }
  .lp-tb-more-wrap .lp-toolbar-right .lp-tb-btn {
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .lp-tb-more-wrap .lp-toolbar-right .lp-tb-btn:hover {
    background: var(--sand);
    border-color: transparent;
  }

  /* In the overflow panel: combo stretches full width; Create hidden (FAB handles it) */
  .lp-toolbar-right .lp-combo { min-width: 0; width: 100%; }
  .lp-toolbar-right .lp-combo-input { font-size: 14px; }
  .lp-toolbar-right #lpTbCreate { display: none; }

  /* ── Lesson search — lives outside #lpTbRight, stays visible in the
     single-row toolbar, sized to fill the space left of the more button. ── */
  #lessonSearch { flex: 1 1 auto; min-width: 0; }
  #lessonSearch .lp-combo-input { font-size: 13px; padding: 8px 28px 8px 28px; }

  /* ── More (···) button — visible on mobile (wrap handles margin-left: auto) ── */

  /* ── FAB ── */
  .lp-tb-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 22px;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(201, 100, 66, 0.4);
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .lp-tb-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(201, 100, 66, 0.5);
  }
  .lp-tb-fab:active { transform: scale(0.97); }
}

/* ── Page header (legacy — kept for any non-schedule reuse) ── */

.schedule-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 18px;
}

.schedule-head-titles { min-width: 0; }

.schedule-head-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

.schedule-head-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--olive);
}

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

.schedule-unscheduled-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
}

.schedule-unscheduled-btn:hover {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
}

/* ── Filters row ── */

.schedule-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.schedule-filter { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }

.schedule-filter-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

.schedule-filter-select {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 7px 28px 7px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}

.schedule-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
  outline: 0;
}

/* ── Calendar shell card ── */

.schedule-card {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}

/* Status legend — compact row below FullCalendar, inside the card shell. */

.schedule-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--cream);
}

.schedule-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--stone);
  line-height: 1;
  white-space: nowrap;
}

.schedule-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.schedule-legend-swatch[data-status="scheduled"] {
  background: #dce4ef;
  box-shadow: inset 2px 0 0 0 #2563eb;
}

.schedule-legend-swatch[data-status="completed"] {
  background: #dce4d2;
  box-shadow: inset 2px 0 0 0 #5a7d3a;
}

.schedule-legend-swatch[data-status="rescheduled"] {
  background: #d6e5ea;
  box-shadow: inset 2px 0 0 0 #3a6b7d;
}

.schedule-legend-swatch[data-status="canceled"] {
  background: #efd2cd;
  box-shadow: inset 2px 0 0 0 #b53333;
}

.schedule-legend-swatch[data-status="unconfirmed"] {
  background: #f1e3c8;
  box-shadow: inset 2px 0 0 0 #a76a1f;
}

#calendar {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  margin: 0;
  background: transparent;
  font-family: var(--sans);
}

/* ── Fill-viewport layout (tablet/desktop) ───────────────────────────
   The page itself must never scroll — only FullCalendar's own time-grid
   body should (its internal .fc-scroller). The toolbar/filters keep their
   natural height; the calendar wrapper chain absorbs whatever vertical
   space is left via flex, so the page's total height never exceeds the
   viewport and there's nothing left below the card to scroll into.
   Mobile (<=576px) is tuned separately further down to deliberately let
   the grid run taller than the viewport instead — left untouched here. */

@media (min-width: 577px) {
  body.schedule-page .page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--lp-navbar-h, 56px) - 32px);
    padding-bottom: 0;
  }
  body.schedule-page .schedule-fill,
  body.schedule-page .calendar-container,
  body.schedule-page .schedule-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.schedule-page #calendar {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (min-width: 992px) {
  body.schedule-page .page-container {
    height: calc(100vh - var(--lp-navbar-h, 56px) - 64px);
  }
}

/* ── FullCalendar toolbar (header) ── */

.fc {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  --fc-border-color: var(--cream);
  --fc-page-bg-color: var(--ivory);
  --fc-neutral-bg-color: var(--ivory);
  --fc-today-bg-color: rgba(201, 100, 66, 0.05);
  --fc-now-indicator-color: var(--accent);
  --fc-event-bg-color: var(--accent-soft);
  --fc-event-border-color: var(--accent);
  --fc-event-text-color: var(--ink);
}

.fc .fc-toolbar.fc-header-toolbar {
  padding: 16px 18px 12px;
  margin: 0;
  border-bottom: 1px solid var(--cream);
  background: var(--ivory);
}

.fc .fc-toolbar-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.fc .fc-button,
.fc .fc-button-primary {
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fc .fc-button-primary:not(:disabled):hover {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
}

.fc .fc-button-primary:disabled { opacity: 0.5; background: var(--sand); color: var(--stone); }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
  box-shadow: none;
}

.fc .fc-button:focus,
.fc .fc-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.2);
  outline: 0;
}

.fc .fc-button-group .fc-button {
  border-radius: 0;
}

.fc .fc-button-group .fc-button:first-child { border-radius: 8px 0 0 8px; }

.fc .fc-button-group .fc-button:last-child  { border-radius: 0 8px 8px 0; }

.fc .fc-button-group { gap: 0; }

/* ── Column / day headers ── */

/* A global `th { background-color: var(--color-table-header) !important }` in
 * base/globals.css paints every <th> dark navy. FullCalendar's day headers and
 * the time-axis spacer column are <th>s, so they pick up that dark color
 * unless we explicitly override. Reset them here. */

.fc th {
  background-color: var(--ivory) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
}

.fc .fc-col-header {
  background: var(--ivory);
  margin-bottom: 0;
}

.fc .fc-timegrid-axis {
  background: var(--ivory) !important;
}

.fc .fc-col-header-cell {
  background: var(--ivory);
  border-color: var(--cream);
  padding: 12px 8px;
}

.fc .fc-col-header-cell-cushion {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 0;
}

.fc .fc-day-today .fc-col-header-cell-cushion { color: var(--accent); }

.fc-day-header-custom {
  background: var(--ivory) !important;
  color: var(--ink) !important;
  border-color: var(--cream) !important;
}

.fc-day-header-custom a,
.fc-day-header-custom span { color: var(--ink) !important; }

/* Day number in month view */

.fc .fc-daygrid-day-number {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink) !important;
  padding: 8px;
  text-decoration: none !important;
  border-bottom: 0;
}

.fc .fc-daygrid-day-top { justify-content: flex-end; }

.fc-day-today .fc-daygrid-day-number {
  color: var(--accent) !important;
  font-weight: 700;
}

/* ── Time grid ── */

.fc .fc-timegrid-slot-label {
  border-color: var(--cream);
}

.fc .fc-timegrid-slot-label-cushion {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}

.fc .fc-timegrid-axis-cushion {
  font-size: 11px;
  color: var(--stone);
}

.fc .fc-timegrid-slot { border-color: var(--cream); }

.fc .fc-timegrid-slot-minor { border-top-style: dotted; }

.fc-theme-standard td,
.fc-theme-standard th { border-color: var(--cream); }

/* Today column tint */

.fc .fc-day-today { background: var(--fc-today-bg-color) !important; }

/* Now indicator — LessonPen: a 2px terracotta line across today's column
   with a small circular dot anchored to the line's left edge (inside today). */

.fc .fc-timegrid-now-indicator-line {
  border-color: var(--accent);
  border-width: 2px 0 0;
  z-index: 4;
  pointer-events: none;
  position: relative;
}

.fc .fc-timegrid-now-indicator-line::before {
  content: '';
  position: absolute;
  /* Line is 0-height with a 2px top border; center a 10px dot on that border. */
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Hide FullCalendar's default arrow on the time-axis column — the dot above
   replaces it and lives next to the line inside today's day column. */

.fc .fc-timegrid-now-indicator-arrow {
  display: none;
}

/* ── Events (timegrid + daygrid) ── */

.fc-event {
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: inset 3px 0 0 0 var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.04s;
  overflow: hidden;
}

.fc-event:hover {
  box-shadow: inset 3px 0 0 0 var(--accent), 0 6px 18px -8px rgba(20, 18, 12, 0.22);
}

.fc-event:active { transform: translateY(0.5px); }

.fc-event .fc-event-main {
  padding: 6px 8px 6px 10px;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
}

.fc-event .fc-event-title,
.fc-event .fc-event-time {
  font-family: var(--sans);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-event .fc-event-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  font-size: 11px;
  margin-bottom: 2px;
}

/* Status-based tinting (soft LessonPen palette) */

.fc-event[data-status="scheduled"],
.fc-event[data-status="scheduled"] .fc-event-main {
  background: #dce4ef !important;
  color: #1e3a8a !important;
  box-shadow: inset 3px 0 0 0 #2563eb;
}

.fc-event[data-status="completed"],
.fc-event[data-status="completed"] .fc-event-main {
  background: #dce4d2 !important;
  color: #3a5424 !important;
  box-shadow: inset 3px 0 0 0 #5a7d3a;
}

.fc-event[data-status="rescheduled"],
.fc-event[data-status="rescheduled"] .fc-event-main {
  background: #d6e5ea !important;
  color: #1d3f4a !important;
  box-shadow: inset 3px 0 0 0 #3a6b7d;
}

.fc-event[data-status="canceled"],
.fc-event[data-status="canceled"] .fc-event-main {
  background: #efd2cd !important;
  color: #7b2222 !important;
  box-shadow: inset 3px 0 0 0 #b53333;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.fc-event[data-status="unconfirmed"],
.fc-event[data-status="unconfirmed"] .fc-event-main {
  background: #f1e3c8 !important;
  color: #6a4313 !important;
}

.fc-event[data-status="unconfirmed"] {
  animation: lp-unconfirmed-glow 2.4s ease-in-out infinite;
}

@keyframes lp-unconfirmed-glow {
  0%, 100% { box-shadow: inset 3px 0 0 0 #a76a1f; }
  50%       { box-shadow: inset 3px 0 0 0 #a76a1f, 0 0 10px 3px rgba(167, 106, 31, 0.30); }
}

/* Group lessons — one coalesced event per slot. Color comes from the same
   data-status rules individual lessons use (server aggregates the group's
   per-student statuses down to one — see aggregateGroupStatus() in
   lessonApiController.js); data-group="1" only marks up the icon/count chip
   below, it no longer forces a color. */

.fc-event[data-group="1"] .fc-event-main > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lp-group-icon {
  font-size: 10px;
  opacity: 0.85;
  flex-shrink: 0;
}

.lp-group-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 1px 6px;
}

/* Student search results (listSearch view) — left-align the "Weekday, Month
   Day" heading instead of FC's centered default, and drop the row hover
   background tint so rows only change on click, not on mouseover. */

.fc-list-day-cushion {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.fc-list-event:hover td {
  background-color: transparent !important;
}

/* Month-view daygrid events — keep them compact */

.fc-daygrid-event { padding: 2px 6px !important; }

.fc-daygrid-day-events { padding: 0 4px; }

.fc-daygrid-event-harness .fc-event,
.fc-daygrid-event { width: 100%; }

.fc-event-title,
.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-title a,
.fc-daygrid-event-title {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc .fc-event-main-frame { min-width: 0 !important; }

.fc .fc-daygrid-event { overflow: hidden; white-space: nowrap; }

.fc .fc-daygrid-event .fc-event-title,
.fc .fc-daygrid-event .ellipsis { width: 100%; min-width: 0; }

/* Legacy 6-column slot lane override (kept from previous CSS for drag-drop snap) */

.fc-timegrid-slot-lane {
  display: grid;
  grid-template-columns: repeat(6, 1fr) !important;
}

/* ── Unscheduled sidebar (freelance flex lessons) ── */

.unscheduled-sidebar {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  height: 100vh;
  z-index: 1050;
  background: var(--ivory);
  border-left: 1px solid var(--cream);
  box-shadow: -12px 0 32px -16px rgba(20, 18, 12, 0.16);
  transition: right 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.unscheduled-sidebar.open { right: 0; }

.calendar-container.shifted { margin-right: 400px; }

@media (max-width: 991.98px) {
  .unscheduled-sidebar {
    width: 300px;
    right: -300px;
  }
  .unscheduled-sidebar.open { right: 0; }
  .calendar-container.shifted { margin-right: 0; }
}

.unscheduled-sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cream);
  background: var(--ivory);
}

.unscheduled-sidebar-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.unscheduled-sidebar-hint {
  margin: 0;
  padding: 12px 18px;
  font-size: 12px;
  color: var(--stone);
  border-bottom: 1px solid var(--cream);
}

.unscheduled-sidebar-body { padding: 16px 18px; flex: 1; }

.unscheduled-loading { text-align: center; padding: 12px 0; color: var(--stone); font-size: 13px; }

/* Style any draggable lesson cards rendered inside the body */

.unscheduled-sidebar-body .external-event,
.unscheduled-sidebar-body .fc-event,
.unscheduled-sidebar-body [data-event] {
  display: block;
  background: var(--accent-soft);
  color: #5a2a14;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  cursor: grab;
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.unscheduled-sidebar-body .external-event:hover { background: #efc8b3; }

.calendar-container { margin-right: 0; transition: margin-right 0.3s; }

/* Hide the duplicate first chunk on small screens to give the title room */

@media (max-width: 576px) {
  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    max-width: 110px;
    flex: 0 1 110px;
    overflow: hidden;
  }
  .schedule-head-title { font-size: 26px; }
  .unscheduled-sidebar { width: 100%; }

  /* Schedule page only — give the calendar all the vertical room it can get. */
  body.schedule-page .page-container { padding-bottom: 0; }

  .schedule-legend {
    gap: 3px 8px;
    padding: 5px 8px 6px;
  }
  .schedule-legend-item { font-size: 9px; gap: 3px; }
  .schedule-legend-swatch { width: 9px; height: 9px; border-radius: 2px; }

  /* Keep the time-axis (hours column) visible, but narrow — Google Calendar
     style. The slot-label cushion already caps at 60px via FC's own CSS. */
  .fc .fc-timegrid-axis-cushion,
  .fc .fc-timegrid-slot-label-cushion { padding: 0 4px; font-size: 10px; }

  /* Tighter day-header row so more of the time grid fits above the fold. */
  .fc .fc-col-header-cell { padding: 6px 4px; }
  .fc .fc-timegrid .fc-col-header-cell-cushion { padding: 2px 6px; }
  .lp-day-header { gap: 2px; }
  .lp-day-header-num { font-size: 18px; }

  /* Taller slot rows — more breathing room per lesson, matching Google
     Calendar's mobile week view. This pushes total grid height past the
     container so only the time grid itself scrolls, not the page. */
  .fc .fc-timegrid-slot { height: 2.6em; }

  /* Compact event blocks — allow titles to wrap to two lines */
  .fc-event .fc-event-main { padding: 3px 5px 3px 6px; }
  .fc-event .fc-event-title,
  .fc-event .fc-event-time { font-size: 11px; line-height: 1.3; }

  .fc-timegrid-event .fc-event-title,
  .fc-timegrid-event .ellipsis {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
  }

  /* Group lessons — title only on mobile (no icon or student count) */
  .fc-event[data-group="1"] .lp-group-icon,
  .fc-event[data-group="1"] .lp-group-count {
    display: none;
  }
  .fc-event[data-group="1"] .fc-event-main > div {
    align-items: flex-start;
  }
}

/* ────────────────────────────────────────────────────────────
   Schedule-a-lesson modal — centered Bootstrap modal.
   ──────────────────────────────────────────────────────────── */

.sched-modal {
  font-family: var(--sans);
  color: var(--ink);
  border: 1px solid var(--cream);
  border-radius: 14px;
  overflow: hidden;
}

/* Header */

.sched-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--cream);
  background: var(--ivory);
}

.sched-modal-head-inner { flex: 1; min-width: 0; }

.sched-modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 6px;
}

.sched-modal-head-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sched-modal-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sched-modal-time-input {
  font: 500 15px/1 var(--sans);
  color: var(--ink);
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 7px 10px;
  background: #fff;
  outline: none;
  width: 112px;
  flex-shrink: 0;
}

.sched-modal-time-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

/* Body */

.sched-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--ivory);
}

/* 3-way recurrence toggle */

.sched-modal-recur-group {
  display: flex;
  border: 1px solid var(--cream);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}

.sched-modal-recur-btn {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cream);
  font: 500 13.5px/1 var(--sans);
  color: var(--olive);
  cursor: pointer;
  transition: background .12s, color .12s;
  text-align: center;
}

.sched-modal-recur-btn:last-child { border-right: 0; }

.sched-modal-recur-btn:hover:not(.is-active) { background: var(--sand); color: var(--ink); }

.sched-modal-recur-btn.is-active {
  background: var(--accent);
  color: #faf7ee;
  font-weight: 600;
}

/* Fields */

.sched-modal-field { display: flex; flex-direction: column; gap: 5px; }

.sched-modal-field-toggle { justify-content: flex-end; }

.sched-modal-field label {
  font-size: 11.5px;
  color: var(--charcoal);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.sched-modal-field select {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  width: 100%;
  outline: none;
}

.sched-modal-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

/* Plan-offering custom dropdown (native <select> can't render the group badge) */

.sched-plan-select { position: relative; }

.sched-plan-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  width: 100%;
  outline: none;
  text-align: left;
  cursor: pointer;
}

.sched-plan-trigger:hover {
  background: #fff;
}

.sched-plan-trigger:focus,
.sched-plan-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.sched-plan-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-plan-trigger-label.is-placeholder { color: var(--stone); }

.sched-plan-trigger-caret { font-size: 11px; color: var(--stone); flex-shrink: 0; }

.sched-plan-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  box-shadow: 0 12px 28px -8px rgba(20, 18, 12, 0.24);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1075;
  padding: 4px;
}

.sched-plan-menu[hidden] { display: none; }

.sched-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.sched-plan-option:hover {
  background: transparent;
}

.sched-plan-option.is-active {
  background: var(--sand);
}

.sched-plan-option-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visual treatment matches the existing "Group" badge on the Plan Offerings
   page — the .sched-plan-option uses the same .badge.bg-info.text-dark classes. */

.sched-plan-badge { flex-shrink: 0; }

.sched-modal-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.sched-modal-field-head label { margin: 0; }

.sched-modal-sub-field { padding-left: 4px; }

/* + Add new chip */

.sched-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}

.sched-modal-chip:hover { background: var(--sand); }

.sched-modal-chip i { font-size: 9px; }

/* Advanced collapse */

.sched-modal-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  font: 500 12.5px/1 var(--sans);
  color: var(--olive);
  cursor: pointer;
}

.sched-modal-advanced-toggle:hover { color: var(--ink); }

.sched-modal-advanced-caret {
  font-size: 10px;
  transition: transform .15s;
}

.sched-modal-advanced-toggle[aria-expanded="true"] .sched-modal-advanced-caret {
  transform: rotate(90deg);
}

#schedModalAdvancedBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.sched-modal-toggle-row .form-check.form-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}

.sched-modal-toggle-row .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.sched-modal-toggle-row .form-check-label {
  font-size: 13px;
  color: var(--charcoal);
  cursor: pointer;
  margin: 0;
}

.sched-modal-info-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--stone);
  font-size: 12px;
  cursor: help;
  transition: color 0.1s;
}

.sched-modal-info-icon:hover,
.sched-modal-info-icon:focus-visible {
  color: var(--charcoal);
  outline: none;
}

.sched-modal-info-icon .tooltip-content {
  width: 240px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.45;
}

/* Preview */

.sched-modal-preview { padding-top: 4px; }

.sched-modal-divider {
  border-top: 1px solid var(--cream);
  margin-bottom: 8px;
}

.sched-modal-preview-text {
  font-size: 12.5px;
  color: var(--olive);
  line-height: 1.5;
}

.sched-modal-preview-text strong { color: var(--ink); font-weight: 500; }

/* Conflict callout */

.sched-modal-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.4;
}

.sched-modal-callout i { margin-top: 1px; font-size: 11px; }

.sched-modal-callout-bad { background: #efd2cd; color: #7b2222; }

/* Footer */

.sched-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--cream);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Two-row day header (timeGrid views) ──
   Replaces the FullCalendar default "Mon 11" with an editorial layout: small
   uppercase weekday on top, large serif day number below. */

.lp-day-header {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
  padding: 2px 0;
}

.lp-day-header-dow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.lp-day-header-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.fc .fc-day-today .lp-day-header-dow,
.fc .fc-day-today .lp-day-header-num { color: var(--accent); }

/* Cushion text alignment for the new header — push to the left edge instead
   of FC's default center, to match the design's editorial feel. */

.fc .fc-timegrid .fc-col-header-cell-cushion {
  padding: 8px 14px;
}

.fc .fc-timegrid .fc-col-header-cell {
  text-align: left;
}

/* ────────────────────────────────────────────────────────────
   Google Calendar sync button + popup (schedule header).
   Plan: memory/schedule_slot_click.md (PR 2 of Google FreeBusy MVP).
   ──────────────────────────────────────────────────────────── */

.gcal-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ivory);
  border: 1px solid var(--cream);
  color: var(--charcoal);
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.gcal-sync-btn:hover { background: var(--sand); border-color: var(--warm); color: var(--ink); }

.gcal-sync-btn i.fab { font-size: 12px; color: var(--olive); }

.gcal-sync-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--silver, #b0aea1);
  flex-shrink: 0;
}

.gcal-sync-dot[data-tone="on"]   { background: var(--good, #5a7d3a); box-shadow: 0 0 0 2px rgba(90,125,58,0.18); }

.gcal-sync-dot[data-tone="warn"] { background: var(--warn, #a76a1f); box-shadow: 0 0 0 2px rgba(167,106,31,0.18); }

.gcal-sync-dot[data-tone="off"]  { background: var(--silver, #b0aea1); }

/* ── Inline popover anchored under the button ── */

.gcal-sync-popover {
  position: fixed;
  inset: 0;
  z-index: 1075;
  pointer-events: none;
}

.gcal-sync-popover[hidden] { display: none; }

.gcal-sync-card {
  position: absolute;
  pointer-events: auto;
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 20px 48px -16px rgba(20, 18, 12, .32),
    0 8px 18px -8px rgba(20, 18, 12, .16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gcal-sync-head {
  position: relative;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--cream);
}

.gcal-sync-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gcal-sync-title i.fab { color: var(--accent); font-size: 15px; }

#gcalSyncClose {
  position: absolute;
  top: 10px;
  right: 10px;
}

.gcal-sync-body {
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gcal-sync-sub {
  margin: 0;
  font-size: 13px;
  color: var(--olive);
  line-height: 1.5;
}

.gcal-sync-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.gcal-sync-row .eyebrow { margin: 0; }

.gcal-sync-value {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.gcal-sync-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--warn-soft, #f1e3c8);
  color: #6a4313;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}

.gcal-sync-alert i { margin-top: 1px; font-size: 11px; }

.gcal-sync-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cream);
}

.gcal-sync-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #faf7ee;
  border: 1px solid var(--accent);
  padding: 9px 14px;
  border-radius: 9px;
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  text-decoration: none;
}

.gcal-sync-btn-primary:hover { background: var(--accent-2, #d97757); color: #faf7ee; border-color: var(--accent-2, #d97757); }

.gcal-sync-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  color: var(--charcoal);
  border: 1px solid var(--ring);
  padding: 7px 12px;
  border-radius: 8px;
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
  text-decoration: none;
}

.gcal-sync-btn-secondary:hover { background: var(--sand-2); border-color: var(--warm); color: var(--ink); }

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

.gcal-sync-disconnect-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gcal-sync-disconnect-form { margin: 0; }

.gcal-sync-btn-link {
  background: transparent;
  border: 0;
  color: var(--olive);
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
  padding: 6px 4px;
}

.gcal-sync-btn-link:hover { color: var(--ink); text-decoration: underline; }

.gcal-sync-btn-link-danger { color: var(--bad, #b53333); }

.gcal-sync-btn-link-danger:hover { color: #7b2222; }

@media (max-width: 600px) {
  .gcal-sync-card {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
  }
}

/* ── Academic-year view ─────────────────────────────────────────────
   School-year ranges tint the full day cell in JS. Lesson events render only
   as FullCalendar's "+ N" link in this compact overview. */

.fc-multimonth-daygrid .fc-daygrid-day-frame {
  position: relative;
  min-height: 32px;
  padding-top: 14px;
}

.fc-multimonth-daygrid .fc-daygrid-day-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  justify-content: flex-start;
}

.fc-multimonth-daygrid .fc-daygrid-day-number {
  padding: 2px 4px 0;
  font-size: 11px;
  line-height: 1.2;
}

.fc-multimonth-daygrid .fc-daygrid-day-bottom {
  position: absolute;
  top: 14px;
  left: 4px;
  z-index: 4;
  margin: 0 !important;
  padding: 0;
  line-height: 1;
}

.fc-multimonth-daygrid .fc-more-link,
.fc-multimonth-daygrid a.fc-more-link,
.fc-multimonth-daygrid .fc-daygrid-more-link {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  padding: 0;
  margin: 0;
  font: 600 10px/1.2 var(--sans);
  color: var(--stone);
  cursor: pointer;
  text-decoration: none;
}

.fc-multimonth-daygrid .fc-more-link:hover,
.fc-multimonth-daygrid a.fc-more-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.fc-multimonth .fc-bg-event,
.fc-multimonth .fc-daygrid-event,
.fc-multimonth .fc-event {
  border: none !important;
  box-shadow: none !important;
}

.fc-multimonth .fc-daygrid-day-events .fc-daygrid-event {
  width: auto;
  background: transparent !important;
  color: var(--stone) !important;
  cursor: pointer;
}

.fc-multimonth .fc-event .fc-event-main,
.fc-multimonth .fc-event[data-status] .fc-event-main {
  display: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.3;
  border-radius: 4px !important;
}

.fc-multimonth .fc-daygrid-day-events .fc-daygrid-event::after {
  content: '+ 1';
  display: inline-block;
  font: 600 10px/1.2 var(--sans);
  color: var(--stone);
}

.fc-multimonth .fc-daygrid-day-events .fc-daygrid-event:hover::after {
  color: var(--ink);
  text-decoration: underline;
}

.fc-multimonth-daygrid .fc-bg-event {
  pointer-events: none;
}

.fc-multimonth-daygrid .fc-daygrid-day[data-lp-hol-tip] {
  cursor: default;
}

.fc-multimonth-daygrid-table th {
  padding: 4px 0;
  font: 600 11px/1 var(--sans);
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ivory);
  border-bottom: 1px solid var(--cream);
}

.fc-multimonth-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 4px;
}

/* Year grid — scroll inside the card; popover is portaled to <body> */

body.schedule-view-year .fc .fc-view-harness {
  overflow: auto !important;
  min-height: 0;
  flex: 1 1 auto;
}

body.schedule-view-year .fc-popover {
  z-index: 10060;
  background: var(--ivory) !important;
  border: 1px solid var(--ring) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(20, 18, 12, 0.20) !important;
  overflow: hidden;
  min-width: 220px;
}

body.schedule-view-year .fc-popover .fc-popover-header {
  background: var(--ivory) !important;
  border-bottom: 1px solid var(--cream);
  padding: 10px 14px;
  color: var(--ink);
  font: 600 14px/1.25 var(--serif);
}

body.schedule-view-year .fc-popover .fc-popover-close {
  color: var(--stone);
  opacity: 1;
}

body.schedule-view-year .fc-popover .fc-popover-body {
  background: var(--ivory) !important;
  padding: 10px 12px 12px;
}

/* Popover is portaled to <body>, so it misses .fc-multimonth scoping — reset
   lesson-event chrome (inset left bar) to simple flat chips. */

body.schedule-view-year .fc-popover .fc-event,
body.schedule-view-year .fc-popover .fc-event[data-status],
body.schedule-view-year .fc-popover .fc-event[data-status] .fc-event-main,
body.schedule-view-year .fc-popover .fc-event .fc-event-main {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
  border-radius: 0 !important;
}

body.schedule-view-year .fc-popover .fc-event .fc-event-main {
  display: block;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px !important;
  background: var(--sand) !important;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

body.schedule-view-year .fc-popover .fc-event[data-status="scheduled"] .fc-event-main {
  background: #dce4ef !important;
  color: #1e3a8a !important;
}

body.schedule-view-year .fc-popover .fc-event[data-status="completed"] .fc-event-main {
  background: #dce4d2 !important;
  color: #3a5424 !important;
}

body.schedule-view-year .fc-popover .fc-event[data-status="rescheduled"] .fc-event-main {
  background: #d6e5ea !important;
  color: #1d3f4a !important;
}

body.schedule-view-year .fc-popover .fc-event[data-status="canceled"] .fc-event-main {
  background: #efd2cd !important;
  color: #7b2222 !important;
}

body.schedule-view-year .fc-popover .fc-event[data-status="unconfirmed"] .fc-event-main {
  background: #f1e3c8 !important;
  color: #6a4313 !important;
}

body.schedule-view-year .fc-popover .fc-event:hover,
body.schedule-view-year .fc-popover .fc-event:hover .fc-event-main {
  box-shadow: none !important;
  transform: none;
}

body.schedule-view-year .fc-popover .fc-event[data-status="unconfirmed"] {
  animation: none;
}

/* Cursor-following holiday label in the academic-year grid */

.lp-holiday-cursor-tip {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  max-width: 260px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 500 13px/1.35 var(--sans);
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(26, 22, 18, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────────
   Lesson reviews — LessonPen attendance/confirmation workflow.
   ──────────────────────────────────────────────────────────── */

.page-container--reviews {}

/* ── Header ── */

.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.reviews-head-titles { min-width: 0; flex: 1 1 420px; }

.reviews-title {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 8px;
  line-height: 1.1;
}

.reviews-sub {
  font-size: 15px;
  color: var(--olive);
  max-width: 640px;
  line-height: 1.5;
  margin: 0;
}

.reviews-sub strong { color: var(--ink); font-weight: 600; }

.reviews-head-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.reviews-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cream);
  background: var(--ivory);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.reviews-mark-all:hover { background: var(--sand); color: var(--ink); border-color: var(--ring); }

.reviews-mark-all input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

/* ── Buttons ── */

.reviews-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.reviews-btn:hover {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
}

.reviews-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
}

.reviews-btn-brand:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #faf7ee;
}

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

/* ── Stat strip ── */

.reviews-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.reviews-stat {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reviews-stat-value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.reviews-stat-value-mini {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}

.reviews-stat-sub {
  font-size: 12px;
  color: var(--stone);
}

.reviews-stat-sub em { color: var(--charcoal); font-style: italic; }

/* ── Body layout ── */

.reviews-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: flex-start;
}

.reviews-main { min-width: 0; }

.reviews-side { display: flex; flex-direction: column; gap: 16px; }

/* ── Plan accordion (Bootstrap structure preserved) ── */

.reviews-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-radius: 14px;
  --bs-accordion-active-bg: var(--ivory);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reviews-plan-card.accordion-item {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px !important;
  overflow: hidden;
}

.reviews-plan-head-wrap.accordion-header { margin: 0; }

.reviews-plan-head.accordion-button {
  background: var(--ivory) !important;
  color: var(--ink) !important;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  box-shadow: none !important;
  border-radius: 14px !important;
  font-family: var(--sans);
  font-weight: 500;
  border: 0;
  cursor: pointer;
}

.reviews-plan-head.accordion-button:not(.collapsed) {
  background: var(--sand) !important;
  border-bottom: 1px solid var(--cream);
  border-radius: 14px 14px 0 0 !important;
}

.reviews-plan-head.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18) !important;
}

.reviews-plan-head.accordion-button::after {
  margin-left: 0;
  background-size: 1rem;
  flex-shrink: 0;
}

.reviews-plan-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--av-bg, var(--accent-soft));
  color: var(--av-ink, #7c3a1d);
  border: 1px solid var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.reviews-plan-info { flex: 1; min-width: 0; text-align: left; }

.reviews-plan-name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.reviews-plan-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--stone);
  margin-top: 2px;
  font-weight: 400;
}

/* Hide the legacy numeric badge — only the JS reads it for syncing */

.reviews-plan-count {
  display: none;
}

/* Joker chip / flex chip */

.reviews-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 500 12px/1.3 var(--sans);
  background: var(--sand);
  color: var(--charcoal);
  border: 1px solid var(--cream);
  white-space: nowrap;
  flex-shrink: 0;
}

.reviews-pill.outline { background: transparent; border-color: var(--warm); color: var(--olive); }

.reviews-pill.joker-badge { background: var(--accent-soft); color: #7c3a1d; border-color: #e8c1ab; }

.reviews-pill.joker-badge i { font-size: 11px; opacity: 0.85; }

.reviews-pill.reviews-pill-empty {
  background: var(--sand);
  color: var(--stone);
  border-color: var(--cream);
}

/* ── Lesson list inside an opened plan card ── */

.accordion-body.reviews-lesson-list { padding: 0; background: var(--ivory); }

.reviews-lesson-table { background: transparent; margin: 0; }

.reviews-lesson-table > tbody > tr > td {
  border-bottom: 1px solid var(--cream);
  padding: 14px 20px;
  vertical-align: middle;
  background: transparent;
}

.reviews-lesson-table > tbody > tr:last-child > td { border-bottom: 0; }

.reviews-lesson-table > tbody > tr.pending-action { background: rgba(201, 100, 66, 0.04); }

.reviews-lesson-when {
  width: 220px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.reviews-lesson-dow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  min-width: 32px;
}

.reviews-lesson-date {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.reviews-lesson-time {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}

.reviews-lesson-spacer { padding: 0 !important; width: 0; }

.reviews-lesson-actions {
  text-align: right;
  white-space: nowrap;
}

.reviews-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  margin-left: 6px;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}

.reviews-action:first-child { margin-left: 0; }

.reviews-action.confirm {
  background: #dfe4d8;
  color: #3f5824;
  border-color: #c8d2bd;
}

.reviews-action.confirm:hover { background: #cfd9c4; }

.reviews-action.cancel {
  background: transparent;
  color: var(--olive);
  border-color: var(--cream);
}

.reviews-action.cancel:hover {
  background: #efd2cd;
  color: #7b2222;
  border-color: #e0bdb6;
}

.reviews-action:disabled { opacity: 0.55; cursor: not-allowed; }

.reviews-action i { font-size: 11px; }

.reviews-lesson-state {
  width: 160px;
  text-align: right;
}

.reviews-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 11px/1.2 var(--sans);
  background: var(--accent-soft);
  color: #7c3a1d;
  border: 1px solid #e8c1ab;
}

/* ── Sidebar cards ── */

.reviews-side-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 18px 20px;
}

.reviews-side-card-soft { background: var(--paper); }

.reviews-side-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--olive);
}

.reviews-side-card-head i { font-size: 13px; }

.reviews-side-card-head h3 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.reviews-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reviews-side-list li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.reviews-side-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.reviews-side-list li strong,
.reviews-side-list li em { color: var(--ink); font-style: normal; font-weight: 600; }

.reviews-side-card p {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  line-height: 1.5;
  margin: 0;
}

/* ── Empty state ── */

.reviews-empty {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 56px 28px;
  text-align: center;
  color: var(--stone);
}

.reviews-empty-icon {
  font-size: 36px;
  color: #5a7d3a;
  margin-bottom: 14px;
  opacity: 0.7;
}

.reviews-empty h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.reviews-empty p {
  font-size: 14px;
  color: var(--olive);
  margin: 0;
}

/* ── Cancel modal ── */

.reviews-modal {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
}

.reviews-modal-head {
  background: transparent;
  border-bottom: 1px solid var(--cream);
  padding: 18px 20px;
}

.reviews-modal-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}

.reviews-modal-foot {
  background: transparent;
  border-top: 1px solid var(--cream);
  padding: 14px 20px;
}

.reviews-cancel-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reviews-cancel-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--cream);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.reviews-cancel-option:hover { border-color: var(--warm); }

.reviews-cancel-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.reviews-cancel-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(201, 100, 66, 0.045);
}

.reviews-cancel-option-body { flex: 1; min-width: 0; }

.reviews-cancel-option-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.reviews-cancel-option-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--olive);
  line-height: 1.4;
}

/* ── Lesson-notes layout (date sections with per-day card) ── */

.reviews-notes-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Date heading sits OUTSIDE the card */

.reviews-day-section { display: flex; flex-direction: column; gap: 12px; }

.reviews-day-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-left: 4px;
}

.reviews-day-dow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--accent);
}

.reviews-day-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}

.reviews-day-count {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--stone);
}

.reviews-day-spacer { flex: 1; }

.reviews-day-status {
  background: #f1e3c8;
  color: #6a4313;
  border-color: #e1cf99;
}

.reviews-day-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #c4862a;
  display: inline-block;
}

/* Day card */

.reviews-day-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 16px;
  overflow: hidden;
}

/* Item wrapper (row + collapsible note panel) */

.reviews-note-item {
  border-top: 1px solid var(--cream);
  background: transparent;
  transition: background 0.12s;
}

.reviews-note-item.is-first { border-top: 0; }

.reviews-note-item.pending-action { background: rgba(201, 100, 66, 0.04); }

/* Clickable header row */

.reviews-note-row {
  display: grid;
  grid-template-columns: 72px 38px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  outline: none;
}

.reviews-note-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Time column */

.reviews-note-time {
  font-family: var(--serif);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.reviews-note-time-val {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}

.reviews-note-time-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--stone);
  margin-top: 2px;
}

/* Avatar override — matches design's 34px square-ish circle */

.reviews-note-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

/* Body */

.reviews-note-body { min-width: 0; }

.reviews-note-body-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.reviews-note-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

.reviews-note-sep { color: var(--stone); font-size: 12.5px; }

.reviews-note-subject {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--stone);
}

.reviews-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Actions */

.reviews-note-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.reviews-note-state {
  min-width: 0;
  text-align: right;
}

/* End cell: optional attachment count + chevron */

.reviews-note-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.reviews-note-att-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/1 var(--sans);
  color: var(--stone);
}

.reviews-note-att-count[hidden] { display: none !important; }

.reviews-note-att-count i { font-size: 11px; }

/* Chevron */

.reviews-note-chev {
  color: var(--stone);
  font-size: 12px;
  transition: transform 0.18s ease, color 0.12s;
  padding: 4px;
}

.reviews-note-item.is-expanded .reviews-note-chev {
  transform: rotate(180deg);
  color: var(--ink);
}

/* Expandable notes panel */

.reviews-note-expand {
  background: rgba(20, 18, 12, 0.012);
  border-top: 1px solid var(--cream);
  overflow: hidden;
}

.reviews-note-expand[hidden] { display: none; }

.reviews-note-expand-inner {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 22px 20px;
}

.reviews-note-expand-inner::before {
  content: '';
  display: block;
}

.reviews-note-expand-eyebrow {
  grid-column: 2;
  margin-bottom: 4px;
}

.reviews-note-textarea {
  grid-column: 2;
  width: 100%;
  border: 1px solid var(--cream);
  background: var(--ivory);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
  resize: vertical;
  outline: none;
  min-height: 78px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.reviews-note-textarea:focus {
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.12);
}

.reviews-note-textarea::-moz-placeholder {
  color: var(--stone);
  font-style: italic;
}

.reviews-note-textarea::placeholder {
  color: var(--stone);
  font-style: italic;
}

.reviews-note-attach {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.reviews-attach-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px dashed var(--warm);
  background: transparent;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: 500 12.5px/1 var(--sans);
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.reviews-attach-btn:hover {
  background: var(--ivory);
  border-color: var(--ring);
  color: var(--ink);
}

.reviews-attach-btn i { font-size: 11px; }

/* ── Responsive ── */

@media (max-width: 992px) {
  .reviews-stats { grid-template-columns: 1fr 1fr; }
  .reviews-stats .reviews-stat:nth-child(3) { grid-column: 1 / -1; }
  .reviews-body { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .reviews-head-actions { width: 100%; justify-content: flex-end; }
  .reviews-head-actions .reviews-btn { white-space: nowrap; }
  .reviews-title { font-size: var(--font-size-page-title); }
  .reviews-stats { grid-template-columns: 1fr; }
  .reviews-stats .reviews-stat:nth-child(3) { grid-column: auto; }
  .reviews-plan-avatar { width: 36px; height: 36px; font-size: 12px; }
  .reviews-note-avatar { width: 30px; height: 30px; font-size: 11px; }

  .reviews-day-header { flex-wrap: wrap; gap: 8px; }
  .reviews-day-title { font-size: 18px; }
  .reviews-day-status { order: 3; }

  .reviews-note-row {
    grid-template-columns: 56px 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "time avatar body chev"
      "actions actions actions actions"
      "state state state state";
    padding: 14px 16px;
    gap: 10px;
  }
  .reviews-note-time { grid-area: time; }
  .reviews-note-avatar { grid-area: avatar; }
  .reviews-note-body { grid-area: body; }
  .reviews-note-chev { grid-area: chev; align-self: center; }
  .reviews-note-end { grid-area: chev; align-self: center; }
  .reviews-note-actions {
    grid-area: actions;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .reviews-note-state {
    grid-area: state;
    text-align: left;
  }
  .reviews-note-time-val { font-size: 14px; }
  .reviews-action { padding: 5px 10px; font-size: 12px; }

  .reviews-note-expand-inner {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }
  .reviews-note-expand-inner::before { display: none; }
  .reviews-note-expand-eyebrow,
  .reviews-note-textarea,
  .reviews-note-attach,
  .reviews-note-attachments { grid-column: 1; }
}

/* ────────────────────────────────────────────────────────────
   Freelance variant — instant commit + undo toast.
   ──────────────────────────────────────────────────────────── */

.org--freelance .reviews-body-single { grid-template-columns: 1fr; }

.org--freelance .reviews-main { max-width: 880px; margin: 0 auto; width: 100%; }

.reviews-help-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: var(--olive);
  padding: 0 0 0 8px;
  font-size: 20px;
  vertical-align: middle;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s;
}

.reviews-help-btn:hover,
.reviews-help-btn:focus { opacity: 1; outline: none; }

.reviews-cancel-dropdown { display: inline-block; }

.reviews-cancel-dropdown .reviews-action-cancel { display: inline-flex; align-items: center; }

.reviews-cancel-menu {
  min-width: 260px;
  border: 1px solid var(--cream);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 6px;
  background: var(--ivory);
}

.reviews-cancel-menu .dropdown-item {
  border-radius: 8px;
  padding: 10px 12px;
  white-space: normal;
  cursor: pointer;
}

.reviews-cancel-menu .dropdown-item:hover,
.reviews-cancel-menu .dropdown-item:focus { background: var(--sand); }

.reviews-cancel-item-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.2;
}

.reviews-cancel-item-sub {
  font-size: 12px;
  color: var(--olive);
  margin-top: 2px;
  line-height: 1.35;
}

.reviews-row-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

/* ── Undo toast region ── */

.reviews-toast-region {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.reviews-toast {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 320px;
  max-width: 520px;
  padding: 10px 12px 10px 16px;
  background: var(--ink, #222);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
  animation: reviews-toast-in .18s ease-out both;
}

.reviews-toast-leaving {
  animation: reviews-toast-out .18s ease-in both;
}

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

@keyframes reviews-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

.reviews-toast-msg { flex: 1 1 auto; }

.reviews-toast-undo {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  transition: background .12s;
}

.reviews-toast-undo:hover { background: rgba(255,255,255,.22); }

.reviews-toast-undo[disabled] { opacity: .5; cursor: default; }

.reviews-toast-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: #fff;
  opacity: .6;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 12px;
}

.reviews-toast-close:hover { opacity: 1; }

.reviews-toast-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,.55);
  transform-origin: left center;
  animation-name: reviews-toast-bar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes reviews-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.reviews-empty .reviews-empty-hint {
  max-width: 480px;
  margin: 4px auto 0;
  color: var(--olive);
  font-size: 14px;
  line-height: 1.55;
}

/* ── Attachment row-cards ── */

.reviews-note-attachments {
  grid-column: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--warm);
}

.reviews-note-attachments:empty {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.reviews-att-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--sans);
  transition: background .12s, border-color .12s;
}

.reviews-att-chip:hover { background: var(--ivory); border-color: var(--warm); }

.reviews-att-chip-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.reviews-att-chip-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  background: var(--sand-2);
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.reviews-att-chip-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.reviews-att-chip-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-att-chip-sub {
  font-size: 11.5px;
  color: var(--stone);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviews-att-chip-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  color: var(--stone);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 6px;
  flex-shrink: 0;
}

.reviews-att-chip-remove:hover { color: var(--accent-2, #c96442); background: rgba(0,0,0,.04); }

.reviews-att-chip.is-readonly .reviews-att-chip-remove { display: none; }

/* ────────────────────────────────────────────────────────────
   Settings — profile, plan offerings, payments.
   ──────────────────────────────────────────────────────────── */

.page-container--settings {}

/* ── Page head + sub-nav ── */

.settings-head { margin-bottom: 14px; }

.settings-title {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 8px;
  line-height: 1.1;
}

.settings-sub {
  font-size: 15px;
  color: var(--olive);
  max-width: 620px;
  margin: 0;
}

.settings-subnav {
  border-bottom: 1px solid var(--cream);
  margin-bottom: 24px;
}

.settings-subnav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.settings-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--olive);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}

.settings-subnav-link:hover { color: var(--ink); }

.settings-subnav-link.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.settings-subnav-link i { font-size: 12px; opacity: 0.85; }

/* ── Section head (with right-aligned action) ── */

.settings-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.settings-section-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.settings-section-sub {
  font-size: 14px;
  color: var(--olive);
  margin: 4px 0 0;
  max-width: 620px;
}

@media (max-width: 576px) {
  .settings-section-head > .settings-btn { margin-left: auto; white-space: nowrap; }
}

/* ── Generic cards ── */

.settings-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 22px;
}

.settings-card-wide { margin-bottom: 18px; }

.settings-card-soft { background: var(--paper); }

.settings-card--danger {
  border-color: #efd2cd;
  background: #fdf6f5;
}

.settings-card-title--danger { color: #7b2222; }

.settings-title--danger { color: #7b2222; }

.settings-input--danger { border-color: #d8b4ac; }

.settings-list { padding-left: 1.2rem; margin: 0.5rem 0 1rem; }

.settings-list li { margin-bottom: 0.4rem; font-size: 14px; color: var(--text); }

.settings-form-actions--danger { justify-content: space-between; }

.settings-card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.settings-card-sub {
  font-size: 13px;
  color: var(--olive);
  margin: 0 0 16px;
}

.settings-card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.settings-card-head-row .settings-card-title { margin: 0 0 2px; }

.settings-card-head-row .settings-card-sub { margin: 0; }

.settings-divider {
  border: none;
  border-top: 1px solid var(--cream);
  margin: 22px 0 20px;
}

/* ── Buttons ── */

.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.settings-btn:hover {
  background: var(--sand-2);
  border-color: var(--warm);
  color: var(--ink);
}

.settings-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
}

.settings-btn-brand:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #faf7ee;
}

.settings-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

.settings-btn-danger {
  background: transparent;
  border-color: #efd2cd;
  color: #7b2222;
}

.settings-btn-danger:hover {
  background: #efd2cd;
  border-color: #d8b4ac;
  color: #5a1818;
}

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

.settings-btn i { font-size: 11px; }

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

.settings-btn-ghost:hover { background: var(--paper); color: var(--text); }

.settings-btn-danger-confirm {
  background: #7b2222;
  border-color: #7b2222;
  color: #fff;
}

.settings-btn-danger-confirm:hover { background: #5a1818; border-color: #5a1818; }

/* ── Pills ── */

.settings-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 12px/1.3 var(--sans);
  background: var(--sand);
  color: var(--charcoal);
  border: 1px solid transparent;
  white-space: nowrap;
}

.settings-pill.good { background: #dfe4d8; color: #3f5824; }

.settings-pill.warn { background: #f1e3c8; color: #6a4313; }

.settings-pill.bad  { background: #efd2cd; color: #7b2222; }

.settings-pill.info { background: #d6e5ea; color: #22515f; }

.settings-pill.outline { background: transparent; border-color: var(--warm); color: var(--olive); }

.settings-pill.muted  { background: #ebebeb; color: #666; }

.settings-pill.danger { background: #efd2cd; color: #7b2222; }

.settings-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.settings-pill i { font-size: 10px; }

/* ── Profile page ── */

.settings-form { margin: 0; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.settings-grid--profile {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}

.settings-grid--profile .settings-card > .settings-card-title {
  margin-bottom: 18px;
}

.settings-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.settings-profile-head .settings-card-title { margin: 0; }

.settings-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card-avatar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 22px;
}

.settings-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--av-bg, var(--accent-soft));
  color: var(--av-ink, #7c3a1d);
  border: 1px solid var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.settings-avatar--inline {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.settings-avatar--photo {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.settings-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--cream);
  display: block;
}

.settings-profile-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-profile-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings-profile-photo-preview {
  flex-shrink: 0;
}

.settings-photo-upload {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 14px;
  border: 1.5px dashed var(--warm);
  border-radius: 12px;
  background: var(--paper);
  color: var(--olive);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.settings-photo-upload:hover {
  border-color: var(--accent);
  background: var(--ivory);
  color: var(--ink);
}

.settings-photo-upload i {
  font-size: 16px;
  color: var(--stone);
}

.settings-photo-upload:hover i { color: var(--accent); }

.settings-photo-upload-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.settings-photo-upload-hint {
  font-size: 11px;
  color: var(--stone);
}

.settings-org-logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-org-logo-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.settings-org-logo-preview {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1px solid var(--cream);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.settings-org-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  padding: 8px;
  box-sizing: border-box;
}

.settings-org-logo-placeholder {
  color: var(--stone);
  font-size: 24px;
}

.settings-org-logo .settings-photo-upload {
  align-self: stretch;
}

.settings-avatar-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.settings-avatar-region { margin: 2px 0 4px; }

.settings-avatar-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-avatar-meta i { font-size: 11px; color: var(--stone); }

/* ── Form fields ── */

.settings-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.settings-field-full { grid-column: 1 / -1; }

.settings-field-wide { grid-column: span 2; }

.settings-field .eyebrow { margin: 0; }

.settings-input,
.settings-select {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
  outline: none;
}

.settings-input::-moz-placeholder { color: var(--stone); }

.settings-input::placeholder { color: var(--stone); }

.settings-input:focus,
.settings-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.settings-input:disabled,
.settings-input[disabled] {
  background: var(--paper);
  color: var(--olive);
  cursor: not-allowed;
}

.settings-input-mono { font-family: var(--mono, 'Geist Mono', monospace); font-size: 13px; letter-spacing: 0.02em; }

.settings-input-inset { position: relative; }

.settings-input-inset .settings-input--has-action { padding-right: 100px; }

.settings-input-inset-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--accent);
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.settings-input-inset-btn:hover { background: var(--paper); color: var(--text); }

.settings-select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a877b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}

.settings-help {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--stone);
  margin-top: 4px;
}

.settings-help-good { color: #3f5824; }

.settings-help-warn { color: #7b2222; }

.settings-help-error { color: #c0392b; }

/* ── Municipality combobox ── */

.city-combobox { position: relative; }

.city-combobox-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--cream, #e0d5c8);
  border-radius: 8px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  list-style: none;
  margin: 0; padding: 4px 0;
  display: none;
}

.city-combobox-dropdown li {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink, #2a2118);
}

.city-combobox-dropdown li:hover,
.city-combobox-dropdown li.cbc-active {
  background: var(--surface-2, #f5f0ea);
}

.city-combobox-dropdown li.cbc-empty {
  color: #999;
  cursor: default;
  font-style: italic;
}

.city-combobox-input--error {
  border-color: #c0392b !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.12) !important;
}

.settings-help-inline {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--stone);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.settings-checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--cream);
  background: var(--paper);
  transition: background 0.12s, border-color 0.12s;
}

.settings-checkbox-row:hover { background: var(--sand); border-color: var(--ring); }

.settings-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.settings-checkbox-row strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.settings-checkbox-row .settings-help { margin-top: 0; font-size: 12px; }

.settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

/* ── Detail list (read-only key/value pairs) ── */

.settings-detail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cream);
}

.settings-detail-list > div:last-child { border-bottom: 0; }

.settings-detail-list dt {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  font-weight: 500;
  flex-shrink: 0;
}

.settings-detail-list dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}

/* ── Invoices table ── */

.settings-invoice-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }

.settings-invoice-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  font-weight: 500;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--cream);
}

.settings-invoice-table td { padding: 10px 0; border-bottom: 1px solid var(--cream); color: var(--ink); vertical-align: middle; }

.settings-invoice-table tr:last-child td { border-bottom: 0; }

.settings-invoice-table th:last-child, .settings-invoice-table td:last-child { text-align: right; }

.settings-invoice-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--stone);
  margin-left: 4px;
  transition: background 0.12s, color 0.12s;
}

.settings-invoice-actions a:hover { background: var(--sand); color: var(--ink); }

.settings-iban-toggle {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  padding: 0;
  margin-left: 6px;
  border-bottom: 1px solid transparent;
}

.settings-iban-toggle:hover { border-bottom-color: var(--accent); }

/* ── Google calendar block ── */

.settings-google-meta {
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-google-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
}

.settings-google-row .eyebrow { margin: 0; }

.settings-google-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.settings-google-actions form { margin: 0; }

.settings-info-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--olive);
  margin: 0 0 14px;
}

.settings-info-line i { color: var(--stone); margin-top: 2px; }

.settings-info-more-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  border-radius: 999px;
  background: var(--cream);
  color: var(--olive);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  margin-left: 4px;
}

.settings-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 12px 0 0;
}

.settings-alert-warn {
  background: #f1e3c8;
  border: 1px solid #e0cfa8;
  color: #6a4313;
}

.settings-alert-warn i { color: #a76a1f; margin-top: 2px; }

/* ── Plan offerings — card grid ── */

.settings-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.settings-plan-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}

.settings-plan-card:hover { border-color: var(--warm); }

.settings-plan-stripe { height: 4px; opacity: 0.9; }

.settings-plan-body { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 14px; }

.settings-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-plan-head-titles { min-width: 0; flex: 1; }

.settings-plan-head-titles .eyebrow { margin: 0 0 4px; text-transform: capitalize; letter-spacing: 0.08em; }

.settings-plan-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.settings-plan-label-suffix {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--stone);
  font-weight: 400;
  margin-left: 4px;
}

.settings-plan-tags { display: flex; gap: 6px; flex-shrink: 0; }

.settings-plan-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-plan-price-group {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.settings-plan-price {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.settings-plan-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  text-transform: capitalize;
}

.settings-plan-spacer { flex: 1; }

.settings-plan-extra {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-plan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--cream);
  margin-top: 4px;
  padding-top: 14px;
}

.settings-plan-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--stone);
}

.settings-plan-locked i { font-size: 10px; }

/* Plan overview modal — group offering session chooser (public/js/planOverviewModal.js) */

.settings-session-list { display: flex; flex-direction: column; }

.settings-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--cream);
  background: transparent;
  font: 500 13px/1.3 var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.settings-session-row:last-child { border-bottom: 0; }

.settings-session-row:hover { background: var(--cream); }

.settings-session-meta { display: flex; align-items: center; gap: 8px; }

.settings-session-meta i.fa-chevron-right { color: var(--stone); font-size: 11px; }

/* Plan overview modal — card-styled banner (mirrors .settings-plan-card),
   inline edit section, footer */

.pov-banner { position: relative; }

.pov-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}

.pov-edit-section { margin-top: 14px; }

.pov-type-locked-pill { margin-top: 4px; }

.pov-settings-err { margin: 10px 0 0; font: 400 12px/1.4 var(--sans); color: #7b2222; display: none; }

.pov-settings-err.show { display: block; }

.pov-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cream);
}

.pov-settings-foot-spacer { flex: 1; }

/* Type pill sits inline next to the title (hugs the text instead of being
   pushed to the row's far edge, which is where the close (x) button sits). */

.pov-subject-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Count pill pinned to the top of the read row instead of baseline-aligned
   with the (much larger) price text below it. */

.pov-count-pill { align-self: flex-start; }

/* Plan overview modal — roster body (avatar + schedule chip rows), scoped
   to this modal rather than reusing .glm-* (that's the group-lesson-modal's). */

.pov-section + .pov-section { border-top: 1px solid var(--cream); padding-top: 14px; }

.pov-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.pov-section-title { font: 600 13px/1.3 var(--sans); color: var(--ink); }

.pov-roster-list { list-style: none; margin: 0; padding: 0; }

.pov-roster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cream);
}

.pov-roster-row:last-child { border-bottom: 0; }

.pov-roster-info { min-width: 0; flex: 1; }

.pov-roster-name { font: 500 13.5px/1.3 var(--sans); color: var(--ink); text-decoration: none; }

.pov-roster-name:hover { text-decoration: underline; }

.pov-roster-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--olive);
  margin-top: 2px;
}

.pov-roster-chip i { font-size: 10px; flex-shrink: 0; }

.pov-roster-chip--muted { color: var(--stone); }

.pov-roster-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--stone);
  font-size: 13px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.pov-roster-row:hover .pov-roster-remove,
.pov-roster-remove:focus-visible { opacity: 1; }

.pov-roster-remove:hover { background: #efd2cd; color: #7b2222; opacity: 1; }

.pov-roster-empty { font: 400 13px/1.4 var(--sans); color: var(--stone); padding: 6px 0; }

.pov-enroll-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font: 500 13px/1 var(--sans);
  color: var(--accent);
  text-decoration: none;
}

.pov-enroll-link:hover { text-decoration: underline; }

.pov-enroll-link i { font-size: 11px; }

.settings-avatar--xs { width: 30px; height: 30px; font-size: 11.5px; font-weight: 600; }

.settings-plan-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--warm);
  border-radius: 14px;
  color: var(--olive);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 160px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.settings-plan-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 100, 66, 0.04);
}

/* ── Empty state ── */

.settings-empty {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 56px 28px;
  text-align: center;
  color: var(--stone);
}

.settings-empty-icon { font-size: 36px; color: var(--ring); margin-bottom: 14px; opacity: 0.7; }

.settings-empty h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.settings-empty p {
  font-size: 14px;
  color: var(--olive);
  max-width: 440px;
  margin: 0 auto;
}

.settings-empty .settings-btn { margin-top: 18px; }

/* ── Provider cards grid ── */

.provider-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 16px;
  margin-bottom: 24px;
}

.provider-card {
  background: var(--ivory);
  border: 1.5px solid var(--cream);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.provider-card--active { border-color: var(--accent); }

.provider-card-body {
  padding: 20px 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.provider-card-logo {
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.provider-logo-wordmark {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.5px;
  font-family: var(--sans);
  line-height: 1;
  color: var(--ink);
}

.provider-card-status {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--stone);
}

.provider-card-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.provider-card-account {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
}

.provider-card-connect {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.provider-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--cream);
  margin-top: auto;
}

.provider-card-test-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
}

.provider-card-test-result.good { background: #dfe4d8; color: #3f5824; }

.provider-card-test-result.bad  { background: #efd2cd; color: #7b2222; }

.settings-checkbox-row--sm {
  padding: 7px 10px;
  margin: 0;
}

.settings-checkbox-row--sm strong { font-size: 13px; }

.settings-iban-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.settings-iban-row .settings-input { flex: 1; }

.settings-iban-row .settings-btn { flex-shrink: 0; padding: 9px 12px; }

.settings-test-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
}

.settings-test-result.good { background: #dfe4d8; color: #3f5824; }

.settings-test-result.bad  { background: #efd2cd; color: #7b2222; }

.settings-test-result i { font-size: 13px; }

.settings-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-help-list li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.settings-help-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.settings-help-list li strong { color: var(--ink); font-weight: 600; }

.settings-help-list li a {
  color: var(--ink);
  border-bottom: 1px solid var(--warm);
  text-decoration: none;
}

.settings-help-list li a:hover { border-color: var(--ink); }

/* ── Shared modal (offerings + banking) ── */

.settings-modal {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
}

.settings-modal-head {
  background: transparent;
  border-bottom: 1px solid var(--cream);
  padding: 18px 22px;
  align-items: flex-start;
  gap: 12px 14px;
}

.settings-modal-head-titles {
  flex: 1;
  min-width: 0;
}

.settings-modal-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}

.settings-modal-foot {
  background: transparent;
  border-top: 1px solid var(--cream);
  padding: 14px 22px;
}

.settings-modal-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ── Add student modal accordions ── */

.ob-acc {
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 12px;
  overflow: hidden;
}

.ob-acc-head {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.12s;
}

.ob-acc:not(.is-open) .ob-acc-head:hover {
  background: var(--sand);
}

.ob-acc-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font: 500 13px/1 var(--sans);
  color: var(--charcoal);
  cursor: pointer;
  text-align: left;
}

.ob-acc-toggle:hover,
.ob-acc-toggle:focus {
  background: transparent;
  color: var(--charcoal);
  box-shadow: none;
  outline: none;
}

.ob-acc-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.ob-acc.is-open .ob-acc-head {
  background: var(--sand);
  border-bottom: 1px solid var(--cream);
}

.ob-acc.is-open .ob-acc-head:hover {
  background: var(--sand);
}

.ob-acc.is-open .ob-acc-toggle {
  background: transparent;
  border-bottom: none;
}

.ob-acc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: var(--olive);
  flex-shrink: 0;
}

.ob-acc-icon--section { display: none; }

.ob-acc.is-open .ob-acc-icon--plus { display: none; }

.ob-acc.is-open .ob-acc-icon--section { display: inline-flex; }

.ob-acc-remove {
  flex-shrink: 0;
  margin-right: 12px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  font: 500 12px/1 var(--sans);
  color: #7b2222;
  cursor: pointer;
  border-radius: 6px;
}

.ob-acc-remove:hover { color: #5a1818; }

.ob-acc-remove[hidden] { display: none !important; }

.ob-acc-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-acc-body[hidden] { display: none !important; }

.ob-parent-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 4px;
}

.ob-parent-mode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--charcoal);
  cursor: pointer;
  margin: 0;
}

/* ── Invite modal (shared partial + legacy qi- aliases) ── */

.inv-modal-actions,
.qi-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-modal-actions .settings-btn,
.qi-modal-actions .settings-btn {
  width: 100%;
  justify-content: center;
}

.qi-email-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.qi-email-row .po-input { flex: 1; min-width: 0; }

.qi-email-row .settings-btn { flex-shrink: 0; }

.qi-status {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cream);
  background: var(--sand);
  color: var(--charcoal);
}

.qi-status.is-success {
  background: #e8f2ea;
  border-color: #c5dcc9;
  color: #2a6b3c;
}

.qi-status.is-error {
  background: #f8ecea;
  border-color: #efd2cd;
  color: #7b2222;
}

.qi-manage-link {
  font-size: 13px;
  color: var(--olive);
  text-decoration: none;
}

.qi-manage-link:hover { color: var(--ink); }

/* ── Plan offering form (shared by school + freelance) ── */

.po-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; }

.po-fieldset {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.po-fieldset-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 500;
}

.po-fieldset-head i { font-size: 12px; color: var(--olive); }

.po-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.po-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

@media (max-width: 576px) {
  .po-row-2, .po-row-3 { grid-template-columns: 1fr; }
}

.po-field { display: flex; flex-direction: column; gap: 6px; }

.po-field label {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--charcoal);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

.po-field .req { color: var(--accent); margin-left: 2px; }

.po-field .muted { color: var(--stone); font-weight: 400; }

.po-field .po-hint { font-size: 11px; color: var(--stone); }

.po-field-err {
  font-size: 11.5px;
  color: #7b2222;
  display: none;
}

.po-field-err.show { display: block; }

.po-input,
.po-select {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  outline: none;
}

.po-input::-moz-placeholder { color: var(--stone); }

.po-input::placeholder { color: var(--stone); }

.po-input:focus,
.po-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.po-input.is-locked,
.po-input:disabled,
.po-stepper-input.is-locked,
.po-stepper-input:disabled {
  background: var(--paper);
  color: var(--olive);
  cursor: not-allowed;
}

.po-stepper:has(.po-stepper-input:disabled) .po-stepper-btn {
  pointer-events: none;
  opacity: 0.45;
}

.po-select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a877b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 32px;
  text-transform: capitalize;
}

/* Input group (currency + suffix) */

.po-input-grp { position: relative; }

.po-input-grp .po-addon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}

.po-input-grp .po-addon.lead { left: 12px; }

.po-input-grp .po-addon.trail { right: 12px; }

.po-input-grp.has-lead input { padding-left: 28px; }

.po-input-grp.has-trail input { padding-right: 38px; }

/* Number stepper (− label/value + ) — apply .po-stepper globally on number inputs */

.po-stepper {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.po-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.po-stepper-btn {
  flex-shrink: 0;
  width: 34px;
  border: 0;
  background: var(--paper);
  color: var(--olive);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.po-stepper-btn:hover { background: var(--sand); color: var(--ink); }

.po-stepper-btn:active { background: var(--cream); }

.po-stepper-dec { border-right: 1px solid var(--cream); }

.po-stepper-inc { border-left:  1px solid var(--cream); }

.po-stepper-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  text-align: center;
  padding: 9px 4px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
}

.po-stepper-input::-moz-placeholder { color: var(--stone); }

.po-stepper-input::placeholder { color: var(--stone); }

.po-stepper-input::-webkit-outer-spin-button,
.po-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.po-stepper-input[type=number] { -moz-appearance: textfield; }

.po-stepper-label {
  display: flex;
  align-items: center;
  padding: 0 7px;
  color: var(--stone);
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  flex-shrink: 0;
}

/* Segmented Individual / Group */

.po-seg {
  display: flex;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.po-seg label {
  flex: 1;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 7px;
  font: 500 13px/1 var(--sans);
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s;
  margin: 0;
}

.po-seg label i { font-size: 12px; }

.po-seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.po-seg input[type="radio"]:checked + label {
  background: var(--ink);
  color: #f5f2ea;
  box-shadow: 0 0 0 1px var(--ink);
}

/* Custom dropdown (subject) */

.po-dd { position: relative; }

.po-dd-trigger {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.po-dd-trigger.placeholder { color: var(--stone); }

.po-dd-trigger:hover { background: #fff; }

.po-dd-trigger:focus,
.po-dd[data-open="true"] .po-dd-trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.po-dd-trigger .po-dd-caret {
  margin-left: auto;
  color: var(--stone);
  font-size: 11px;
  transition: transform 0.15s;
}

.po-dd[data-open="true"] .po-dd-trigger .po-dd-caret { transform: rotate(180deg); }

.po-dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  box-shadow: 0 12px 28px -10px rgba(20, 18, 12, 0.18);
  z-index: 5;
  overflow: hidden;
  display: none;
}

.po-dd[data-open="true"] .po-dd-menu { display: block; }

.po-dd-list { max-height: 220px; overflow-y: auto; }

.po-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
}

.po-dd-item:hover { background: var(--paper); }

.po-dd-item.selected { background: var(--accent-soft); color: #7c3a1d; }

.po-dd-item .po-dd-check {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  opacity: 0;
}

.po-dd-item.selected .po-dd-check { opacity: 1; }

.po-dd-empty {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--stone);
  text-align: center;
  font-style: italic;
}

.po-dd-add {
  border: 0;
  border-top: 1px solid var(--cream);
  background: var(--paper);
  color: var(--accent);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
}

.po-dd-add:hover { background: var(--sand); }

.po-dd-add i { font-size: 11px; }

/* Inline add subject form */

.po-dd-form { padding: 14px; display: none; flex-direction: column; gap: 10px; }

.po-dd[data-mode="add"] .po-dd-form { display: flex; }

.po-dd[data-mode="add"] .po-dd-list,
.po-dd[data-mode="add"] .po-dd-empty,
.po-dd[data-mode="add"] .po-dd-add { display: none; }

.po-dd-form-eb {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.po-dd-form input {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  width: 100%;
  outline: none;
}

.po-dd-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.po-dd-form-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.po-dd-form-err {
  font-size: 11.5px;
  color: #7b2222;
  margin: 0;
  display: none;
}

.po-dd-form-err.show { display: block; }

/* Billing-mode radio-card grid (locked options for MVP) */

.po-billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 576px) {
  .po-billing-grid { grid-template-columns: 1fr; }
}

.po-billing-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.po-billing-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--cream);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  margin: 0;
  min-height: 56px;
  justify-content: center;
}

.po-billing-card:hover { border-color: var(--warm); }

.po-billing-input:checked + .po-billing-card {
  border-color: var(--ink);
  background: var(--ivory);
}

.po-billing-input:focus-visible + .po-billing-card {
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.po-billing-name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.po-billing-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.02em;
}

.po-billing-lock i { font-size: 9px; }

.po-billing-card.is-locked {
  cursor: not-allowed;
  background: var(--paper);
  border-style: dashed;
  opacity: 0.72;
}

.po-billing-card.is-locked:hover { border-color: var(--cream); }

.po-billing-card.is-locked .po-billing-name { color: var(--olive); }

/* ────────────────────────────────────────────────────────────
   Settings panel modal  (.smod-*)
   Full-screen overlay with left nav (--ivory) + content (--paper)
   ──────────────────────────────────────────────────────────── */

/* Bootstrap tooltips (z-index: 1080) must clear the smod overlay (z-index: 1100) */

.tooltip { z-index: 1200 !important; }

.smod {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  pointer-events: none;
}

.smod.is-open {
  pointer-events: all;
}

.smod-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.42);
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
}

.smod.is-open .smod-backdrop {
  opacity: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.smod-window {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(980px, 100%);
  height: min(700px, 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px -16px rgba(26, 24, 20, 0.32), 0 0 0 1px rgba(26, 24, 20, 0.1);
  background: var(--paper);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.smod.is-open .smod-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Left nav ── */

.smod-nav {
  width: 210px;
  min-width: 210px;
  flex-shrink: 0;
  background: var(--ivory);
  border-right: 1px solid var(--cream);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 0 16px;
}

.smod-nav-heading {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--cream);
  margin-bottom: 6px;
}

.smod-nav-section { padding: 0 8px; margin-top: 10px; }

.smod-nav-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-family: var(--sans);
  font-weight: 500;
  padding: 0 8px;
  margin: 0 0 3px;
}

.smod-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--olive);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  position: relative;
  margin-bottom: 1px;
  border-bottom: 0;
  cursor: pointer;
}

.smod-nav-link i { font-size: 12.5px; min-width: 16px; text-align: center; }

.smod-nav-link:hover { background: var(--sand); color: var(--ink); border-bottom: 0; text-decoration: none; }

.smod-nav-link.active { background: var(--sand); color: var(--ink); }

.smod-nav-link.active::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--accent);
}

.smod-nav-user {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid var(--cream);
}

.smod-nav-user-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--cream);
}

.smod-nav-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #7c3a1d;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.smod-nav-user-info { flex: 1; min-width: 0; }

.smod-nav-user-name {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smod-nav-user-role {
  font-size: 11px;
  color: var(--stone);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Content area ── */

.smod-content {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
  min-width: 0;
  position: relative;
}

.smod-content-body {
  padding: 32px 40px 52px;
  position: relative;
}

.smod-content-body .page-container--form {
  max-width: none;
  padding: 0;
  margin: 0;
}

.smod-content-body.is-loading { pointer-events: none; }

.smod-content-body.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 242, 234, 0.65);
}

/* Remove the full-page header from settings pages when inside the modal */

.smod-content-body .settings-head.mb-4 { margin-bottom: 6px !important; }

/* ── Mobile drill-down header bar (back button) ──
   Lives inside the .smod-content scroll container, not the AJAX-replaced
   body, so it survives content swaps and can stick above the scrolling page. */

.smod-mobile-bar { display: none; }

/* ── Close button ── */

#smodClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
}

/* ────────────────────────────────────────────────────────────
   Change-email dialog  (.cem-*)
   Layered in front of the settings modal (z above .smod)
   ──────────────────────────────────────────────────────────── */

.cem-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.cem-modal.is-open {
  opacity: 1;
  pointer-events: all;
}

.cem-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cem-window {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--cream);
  box-shadow: 0 28px 64px -16px rgba(26, 24, 20, 0.38), 0 0 0 1px rgba(26, 24, 20, 0.08);
  padding: 26px 26px 22px;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.16s ease;
}

.cem-window--lg { width: min(600px, 100%); }

.cem-modal.is-open .cem-window {
  transform: translateY(0) scale(1);
}

/* .cem-window has no header row — the close button is a bare sibling before
   the form, so it needs its own top-right placement rather than relying on
   (nonexistent) flex ordering. */

.cem-window > .icon-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .smod { padding: 0; }
  .smod-window { width: 100%; height: 100%; border-radius: 0; }
  .smod-content-body { padding: 20px 16px 40px; }

  /* Drill-down: nav (section list) and content slide past each other like adjacent panels,
     rather than snapping via display:none */
  .smod-nav,
  .smod-content {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    border-right: 0;
    transition: transform 0.28s ease;
  }
  .smod-window.smod-show-nav .smod-nav { transform: translateX(0); }
  .smod-window.smod-show-nav .smod-content { transform: translateX(100%); }
  .smod-window:not(.smod-show-nav) .smod-nav { transform: translateX(-100%); }
  .smod-window:not(.smod-show-nav) .smod-content { transform: translateX(0); }

  /* Sticky back row above the content — pinned while the page scrolls behind it.
     Always rendered (not toggled by .smod-show-nav): the parent .smod-content
     already slides fully off-screen via transform, so this row leaves with it
     instead of popping out of flow mid-transition and shifting the content above it. */
  .smod-mobile-bar {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--paper);
    padding: 10px 16px;
    border-bottom: 1px solid var(--cream);
  }
}

/* ── Responsive ── */

@media (max-width: 992px) {
  .settings-grid,
  .settings-grid--profile { grid-template-columns: 1fr; }
  .settings-plan-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .provider-cards { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .settings-title { font-size: var(--font-size-page-title); }
  .settings-fields-grid { grid-template-columns: 1fr; }
  .settings-field-wide { grid-column: span 1; }
  .settings-card { padding: 18px; }
  .settings-card-avatar { padding: 22px 18px; }
  .settings-avatar { width: 80px; height: 80px; font-size: 26px; }
  .settings-detail-list > div { flex-direction: column; gap: 2px; align-items: flex-start; }
  .settings-detail-list dd { text-align: left; }
}

/* Styles for FullCalendar mobile toolbar layout moved from calendar partial
   Place any future calendar-specific styles here. */

@media (max-width: 576px) {
  .fc-toolbar, .fc-header-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }
  /* Force the center chunk (which contains .fc-toolbar-title) to appear first */
  .fc-toolbar > div:nth-child(2), .fc-header-toolbar > div:nth-child(2) {
    order: -1;
    width: 100%;
    text-align: center;
  }
  /* Make sure the real title is visible and centered */
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    display: block !important;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 auto;
    color: white;
  }
  /* Reduce spacing of the other chunks so layout fits on small screens */
  .fc-toolbar > div, .fc-header-toolbar > div {
    flex: 0 0 auto;
  }

  /* Mobile rows used by JS relocation helper */
  .fc-toolbar .mobile-fc-row,
  .fc-header-toolbar .mobile-fc-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0.25rem;
  }

  /* Row-specific tweaks */
  .fc-toolbar .mobile-fc-row1 { gap: 0.5rem; }
  .fc-toolbar .mobile-fc-row2 { gap: 0.5rem; }
  .fc-toolbar .mobile-fc-row3 { gap: 0.25rem; }

  /* Ensure toolbar title keeps visual priority in row2 center */
  .mobile-fc-row2 .fc-toolbar-title {
    flex: 1 1 auto;
    text-align: center;
    margin: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* CSS-only mobile toolbar: chunk-aware 3-row layout using CSS Grid.
     The FullCalendar toolbar uses three .fc-toolbar-chunk elements which
     contain the prev/next group, the title, and the view buttons. We keep
     those chunks but use grid placement to present the desired rows:
     Row1: today (left)   |        | unscheduled (right)
     Row2: prev (left)    | title  | next (right)
     Row3: view buttons (centered, full width)
  */
  .fc-toolbar, .fc-header-toolbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0.25rem;
    align-items: center;
  }

  /* Place the three toolbar chunks into the grid rows/columns. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
    /* span full width so internal children can be arranged inside this chunk */
    grid-column: 1 / -1;
    grid-row: 1 / 3; /* occupies first two rows vertically */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem;
  }

  /* Title chunk -> center of row 2 */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(2),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Mobile-only: decorative bar between prev and next (row 2) */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1)::after,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1)::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    align-self: center;
    width: calc(100% - 0.5rem);
    margin: 0 0.25rem;
    height: 2.4rem; /* matches typical toolbar height */
    background:  #616E7C; /* subtle grey */
    border-radius: 0.375rem;
    z-index: 1; /* sit below buttons/title */
    pointer-events: none;
  }
  /* Views chunk -> full width row 3 */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* Make the view buttons occupy full width on mobile and grow evenly. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group {
    display: flex !important;
    width: 100% !important;
    gap: 0.25rem;
    align-items: stretch;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group .fc-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button-group .fc-button {
    flex: 1 1 0 !important; /* grow evenly */
    width: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* If FullCalendar outputs buttons without a grouping element, target them directly */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(3) .fc-button {
    flex: 1 1 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  /* Inside first chunk: position its children into the small internal grid.
     DOM inside chunk1 is typically: .fc-button-group (prev/next), .fc-today-button, .fc-unscheduledToggle-button
     We'll allow the prev/next buttons to participate directly in the chunk1 grid
     by using display:contents on the group, and then place prev at column 1
     and next at column 3 of row 2. This keeps the title centered in column 2. */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem;
    align-items: center;
  }


  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group {
    display: contents !important; /* let the buttons become grid children */
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    z-index: 3;
  }

  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    z-index: 3;
  }

  /* Ensure title styling inside title chunk */
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Align individual buttons nicely */
  .fc-toolbar .fc-button, .fc-header-toolbar .fc-button,
  .fc-toolbar .fc-button-group, .fc-header-toolbar .fc-button-group {
    align-self: center;
  }

  /* Ensure prev/next buttons are visible above the title */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-prev-button,
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-next-button {
    position: relative;
    z-index: 3;
  }

  /* Ensure title sits below buttons so they remain visible */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(2),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(2) {
    position: relative;
    z-index: 2;
  }

  /* Prevent clipping of buttons by parents */
  .fc-toolbar, .fc-header-toolbar,
  .fc-toolbar > .fc-toolbar-chunk, .fc-header-toolbar > .fc-toolbar-chunk {
    overflow: visible !important;
  }

  /* Extra safeguard: keep other button groups horizontal and prevent wrapping */
  .fc-toolbar .fc-button-group, .fc-header-toolbar .fc-button-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    align-items: center;
  }

  /* Avoid buttons expanding to full width inside the grid and keep them inline */
  .fc-toolbar .fc-button, .fc-header-toolbar .fc-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
  }

  /* Ensure the first toolbar chunk can expand so its internal grid has room
     for the today/unscheduled and prev/next placements. Removing the
     restrictive max-width that caused right-side buttons to be squeezed. */
  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child,
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) {
    max-width: none !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

 
  /* Make unscheduled sidebar narrower on mobile and ensure hidden position matches width. */
  /* Make unscheduled sidebar overlay the calendar on mobile (fixed, slides in)
     so opening it does NOT push or shift the calendar content. */
  .unscheduled-sidebar {
    position: fixed !important;
    top: 0;
    /* leave room for any fixed mobile bottom nav (JS sets --mobile-bottom-nav-height) */
    bottom: var(--mobile-bottom-nav-height, 0);
    width: 240px !important;
    right: -240px !important;
    height: auto;
    z-index: 1075 !important;
    transition: right 0.28s cubic-bezier(.4,0,.2,1) !important;
    will-change: right;
  }

  /* Open state -> slide over the calendar without affecting layout */
  .unscheduled-sidebar.open {
    right: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }

  /* Ensure the calendar does NOT shift when 'shifted' class is toggled by JS. */
  .calendar-container.shifted {
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* Capitalize the Today button label across all viewports */

.fc-toolbar .fc-today-button, .fc-header-toolbar .fc-today-button {
  text-transform: capitalize !important;
  margin-left: 0 !important;
}

/* Make toolbar title more prominent and move it slightly upwards so it sits
   higher in the toolbar. Scoped globally but with stronger desktop sizing. */

.fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
  font-size: 1.15rem !important;
  line-height: 2 !important;
  font-weight: 700 !important;
  margin-top: -0.45rem !important; /* lift the title up */
  transform: translateY(-0.08rem) !important;
  letter-spacing: 0.2px !important;
}

@media (min-width: 577px) {
  .fc-toolbar .fc-toolbar-title, .fc-header-toolbar .fc-toolbar-title {
    font-size: 1.6rem !important;
  }
}

/* Desktop (default) toolbar ordering: put Unscheduled first, then Today,
   then Next, then Previous (left-to-right) inside the first toolbar chunk. */

@media (min-width: 577px) {
  /* Ensure chunk1 lays out its direct children in a row so we can reorder them */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1),
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }

  /* Make the unscheduled button appear first */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-unscheduledToggle-button {
    order: 0;
  }

  /* Make the today button appear after unscheduled */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-today-button {
    order: 1;
  }

  /* Place the prev/next group after today but show Next before Previous */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group {
    order: 2;
    display: inline-flex !important;
    gap: 0.25rem;
    align-items: center;
  }

  /* Within the group, show Next before Prev */
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-next-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-next-button {
    order: 1;
  }
  .fc-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-prev-button,
  .fc-header-toolbar > .fc-toolbar-chunk:nth-child(1) .fc-button-group .fc-prev-button {
    order: 0;
  }

  /* Position the Unscheduled button above the views buttons on desktop by
     absolutely placing it near the right edge and reserving toolbar top padding
     so it doesn't overlap the rest of the toolbar content. This only applies
     at desktop widths to avoid impacting mobile layout. */
  .fc-toolbar {
    position: relative;
    padding-top: 2.4rem; /* reserve space for the stacked unscheduled button */
  }

  .fc-toolbar .fc-unscheduledToggle-button {
    /* TODO: rule was truncated — complete when refactoring calendar module */
  }
}

.fc-header-toolbar .fc-unscheduledToggle-button {
    position: absolute !important;
    right: 0 !important; /* align close to the views area (right side) */
    /* Nudge the button higher: smaller top and a small negative translateY */
    top: 0.0rem !important; /* slightly higher */
    transform: translateY(-0.3rem) !important;
  }

/* Ensure toolbar buttons sit above the decorative background */

.fc-toolbar .fc-button,
  .fc-header-toolbar .fc-button {
    position: relative;
    z-index: 3;
  }

/* Icon styling for the unscheduled button: keeps icon aligned and inherits color */

.fc-unscheduledToggle-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
}

.fc-unscheduledToggle-button .unscheduled-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Increase icon size (em-based so it scales with button font-size). */
  width: 1.4em;
  height: 1.4em;
  line-height: 0;
  vertical-align: middle;
}

.fc-unscheduledToggle-button .unscheduled-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* Slightly reduce icon spacing on very small screens */

@media (max-width: 420px) {
  .fc-unscheduledToggle-button .unscheduled-icon { margin-right: 0.25rem; }
}

.dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
  }

@media (max-width: 900px) {
    .dashboard-widgets {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

.widget {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    background-color: var(--color-surface);
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.widget:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

.widget-icon {
    font-size: 40px;
    color: var(--color-primary);
    margin-bottom: 10px;
  }

.widget-info {
    flex: 1 1 auto;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
  }

.widget-info h3 {
    font-size: 18px;
    margin: 0;
    color: #333;
  }

.widget-info p {
    font-size: 24px;
    font-weight: bold;
    margin: 5px 0 0;
    color: var(--color-primary);
  }

/* .d-flex, .flex-column, .justify-content-end, .h-100 removed — use Bootstrap classes directly */

/* Styles migrated from teachersShow.ejs */

.upload-form {
  display: none;
}

.pending-action { background: #fff3cd !important; }

.unscheduled-sidebar {
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
  right: -400px;
  left: auto !important;
  border-left: 1px solid #dee2e6;
  border-right: none;
}

.unscheduled-sidebar.open {
  right: 0 !important;
  left: auto !important;
}

.calendar-container.shifted {
  margin-right: 400px !important;
  margin-left: 0 !important;
}

.unscheduled-sidebar.sidebar-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Mobile overrides: prevent the sidebar from shifting calendar content on small screens
   and make the sidebar overlay instead. These rules are scoped to mobile so they
   don't affect the desktop layout where a larger persistent sidebar is desired. */

@media (max-width: 576px) {
  .unscheduled-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: var(--mobile-bottom-nav-height, 0) !important;
    right: -240px !important;
    width: 240px !important;
    left: auto !important;
    z-index: 1075 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    transition: right 0.28s cubic-bezier(.4,0,.2,1) !important;
  }
  .unscheduled-sidebar.open {
    right: 0 !important;
  }

  /* Neutralize desktop 'shifted' behavior on mobile so opening sidebar does not push content */
  .calendar-container.shifted {
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* teacherShow.css - Tab header and mobile bottom navigation styles for teacher dashboard */

/* Small tweak: reduce font/icon size for the Unscheduled Lessons toggle button
   This overrides the inline width/font where necessary and keeps spacing tidy. */

/* #toggleUnscheduledSidebarBtn {
  font-size: 0.85rem !important;
  line-height: 1 !important;
  padding: 0.15rem 0.35rem !important;
} */

/* Simplified styling for the Unscheduled Lessons toggle: bigger label font, no
   icon-specific columns (we don't render an icon). Keep the button centered. */

#toggleUnscheduledSidebarBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important; /* larger label font */
  line-height: 1 !important;
  padding: 0.35rem !important;
}

#toggleUnscheduledSidebarBtn .toggle-label {
  display: inline-block !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 600 !important;
}

/* Preserve newlines entered into biography textarea when displaying on profile */

.preserve-whitespace {
  white-space: pre-line; /* preserves newlines -> line breaks, but still wraps long lines */
}

@media (max-width: 576px) {
  .teacher-show-container {
    font-size: 0.95rem !important;
  }
  /* Mobile Bottom Navigation Bar Customization */
  .teachershow-bottom-nav {
    height: 80px !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }
  .teachershow-bottom-nav .d-flex {
    height: 100% !important;
  }
  .teachershow-bottom-nav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-table-header);
    font-size: 0.8rem;
    height: 100%;
    padding: 0;
    transition: color 0.2s;
  }
  .teachershow-bottom-nav-link i {
    font-size: 2.1rem !important;
    margin-bottom: 0.1rem;
    display: block;
  }
  .teachershow-bottom-nav-link span {
    font-size: 0.68rem !important;
    line-height: 1.1;
    margin-top: 0.1rem;
    display: block;
    text-align: center;
    letter-spacing: 0.01em;
  }
  .teachershow-bottom-nav-link.active,
  .teachershow-bottom-nav-link:focus,
  .teachershow-bottom-nav-link:hover {
    color: var(--bs-info) !important;
  }
  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    max-width: 100px;
    flex: 0 1 100px; /* don’t grow, allow shrink up to 100px basis */
    overflow: hidden; /* prevent spillover */
  }

  /* Make the alert under header full-width on small screens */
  .teacher-show-container .mobile-alert {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    margin-top: 0.6rem;
  }

  /* Center the profile card horizontally on small screens.
     The card has an inline width of 320px; on mobile we let it be
     responsive (width:100%) but cap it to 320px and center with auto margins. */
  .tab-pane#profile .col-md-4 > .card.position-relative {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  /* Stack the header elements (profile + alert) only on small screens.
     We avoid using the global .flex-column utility because it may be overridden
     elsewhere; this class targets the header specifically. */
  .teacher-show-container .mobile-stack-header {
    flex-direction: column !important;
  }

  /* (Moved calendar/toolbar/sidebar rules to `calendar.css`) */

  /* Align unscheduled sidebar header to the right on small screens so it sits
     next to the close button instead of centered. Overrides the .mx-auto. */
  .unscheduled-sidebar .unscheduled-message-header {
    margin-left: auto !important;
    margin-right: 0.8rem !important;
    text-align: right !important;
  }

  /* Unscheduled flex lessons' header message slightly smaller */
  .unscheduled-message-header {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
  }
}

/* StudentShow specific styles */

/* Header Card */

.std-back-link {
  color: var(--olive);
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.std-back-link:hover { color: var(--ink); }

.std-header-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: var(--radius-lg, 12px);
  padding: 24px 28px;
}

.std-header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: flex-start;
}

.std-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--avatar-bg, var(--accent-soft));
  color: var(--avatar-ink, #7c3a1d);
  border: 1px solid var(--cream);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 72px;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.std-header-name {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}

.std-contact-row { display: flex; gap: 16px; flex-wrap: wrap; }

.std-contact-chip {
  color: var(--olive);
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.std-contact-chip:hover { color: var(--ink); }

.std-context-line { font-size: 14px; color: var(--charcoal); }

.std-context-sep { color: var(--warm); margin: 0 2px; }

.std-header-actions { display: flex; gap: 8px; align-items: flex-start; }

.std-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font: 500 12px/1 var(--sans);
}

.std-status-active { background: #dfe4d8; color: #3f5824; border: 1px solid #c8d2bd; }

.std-status-inactive { background: var(--sand); color: var(--stone); border: 1px solid var(--cream); }

.std-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #5a7d3a; flex-shrink: 0; }

/* Invitation status pills */

.std-status-invite {
  background: var(--ivory);
  color: var(--stone);
  border: 1px dashed var(--warm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.std-status-invite:hover { background: var(--sand); color: var(--olive); }

.std-status-invite-pending {
  background: #fef3cd;
  color: #7a5500;
  border: 1px solid #f0d890;
  cursor: pointer;
  transition: background 0.15s;
}

.std-status-invite-pending:hover { background: #fde9a4; }

.std-status-invite-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4a017; flex-shrink: 0; }

.std-status-invite-accepted { background: #dfe4d8; color: #3f5824; border: 1px solid #c8d2bd; cursor: default; }

.std-divider { border: none; border-top: 1px solid var(--cream); margin: 20px 0; }

.std-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.std-meta-label {
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
  margin-bottom: 4px;
}

.std-meta-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.std-meta-value-warn { color: #b3261e; }

.std-meta-sub { color: var(--stone); font-weight: 400; font-size: 13px; }

/* ── Underline Tabs ── */

.std-tabs {
  border-bottom: 1px solid var(--cream) !important;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.std-tabs::-webkit-scrollbar { display: none; }

.std-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--olive);
  font: 500 14px/1 var(--sans);
  padding: 11px 16px;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  border-radius: 0 !important;
  white-space: nowrap;
}

.std-tabs .nav-link:hover { color: var(--ink); }

.std-tabs .nav-link.active {
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
}

.std-tabs .nav-link.disabled { color: var(--ring); }

/* ── Overview Tab ── */

.std-contact-detail { display: flex; flex-direction: column; gap: 10px; }

.std-cd-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid var(--cream);
}

.std-cd-row:last-child { border-bottom: none; }

.std-cd-key {
  color: var(--stone);
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 1px;
}

.std-upcoming-list { display: flex; flex-direction: column; }

.std-upcoming-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.std-upcoming-sep { border-top: 1px solid var(--cream); }

.std-upcoming-left { width: 68px; flex-shrink: 0; }

.std-upcoming-dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); }

.std-upcoming-mday { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }

.std-upcoming-mid { flex: 1; }

.std-hist-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

.std-hist-good { background: #5a7d3a; }

.std-hist-bad { background: #b3261e; }

.std-hist-info { background: #22515f; }

.std-hist-muted { background: var(--stone); }

.std-pill-warn {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: #fff8e1;
  color: #b36b00;
  border: 1px solid #f0d080;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .std-header-main { grid-template-columns: auto 1fr; }
  .std-header-actions { display: none; }
  .std-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .std-avatar-lg { width: 52px; height: 52px; font-size: 20px; line-height: 52px; }
  .std-header-name { font-size: var(--font-size-page-title); }
}

/* ────────────────────────────────────────────────────────────
  Lessons tab - LessonPen meta-card grid + accordion polish
   ──────────────────────────────────────────────────────────── */

/* Lesson plan accordion */

#lessonPlanAccordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--cream);
  --bs-accordion-border-radius: 14px;
  --bs-accordion-active-bg: var(--ivory);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

#lessonPlanAccordion .accordion-item {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px !important;
  margin-bottom: 14px;
  overflow: hidden;
}

#lessonPlanAccordion .accordion-button {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  padding: 16px 20px;
  box-shadow: none;
  border-radius: 14px !important;
}

#lessonPlanAccordion .accordion-button:not(.collapsed) {
  background: var(--sand);
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid var(--cream);
  border-radius: 14px 14px 0 0 !important;
}

#lessonPlanAccordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

#lessonPlanAccordion .accordion-body {
  padding: 22px 22px 20px;
  background: var(--ivory);
}

/* LessonPen-style icon "chips" inside the accordion header */

.lessonplan-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand) !important;
  color: var(--charcoal) !important;
  border: 1px solid var(--cream) !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.lessonplan-header-badge strong { font-weight: 600; }

.lessonplan-header-btn:not([aria-expanded="true"]):hover .lessonplan-header-badge {
  background: var(--sand-2) !important;
  border-color: var(--warm) !important;
  color: var(--ink) !important;
}

.lessonplan-header-btn[aria-expanded="true"] .lessonplan-header-badge {
  background: var(--ivory) !important;
  border-color: var(--ring) !important;
}

/* Meta-card grid (3 columns of plan info) */

.lp-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .lp-meta-grid { grid-template-columns: 1fr; gap: 12px; }
}

.lp-meta-card {
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 12px;
  padding: 16px 18px;
}

.lp-meta-card-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 6px;
}

.lp-meta-card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.lp-meta-card-title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
}

.lp-meta-card-title a:hover { border-color: var(--ink); }

.lp-meta-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-meta-list > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  border-top: 1px dashed var(--cream);
  padding-top: 6px;
}

.lp-meta-list > div:first-child { border-top: 0; padding-top: 0; }

.lp-meta-list dt {
  color: var(--stone);
  font-weight: 500;
  flex-shrink: 0;
}

.lp-meta-list dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.lp-meta-list dd a {
  color: var(--ink);
  border-bottom: 1px solid var(--warm);
  text-decoration: none;
}

.lp-meta-list dd a:hover { border-color: var(--ink); }

/* Section title inside accordion */

.lp-section-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 12px 0 10px;
}

/* Rescheduling-period subsection */

.lp-subsection {
  margin-top: 22px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 12px;
  overflow: hidden;
}

.lp-subsection-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--cream);
}

.lp-subsection-body { padding: 0; }

.lp-subsection-body .table { margin: 0; }

/* Cash summary banner */

.lp-cash-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 4px 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--charcoal);
}

.lp-cash-summary .fw-semibold {
  color: var(--stone);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.lp-cash-summary strong { color: var(--ink); font-weight: 600; }

/* School Contact tab - soften list-group items */

#contact .list-group-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cream);
  padding: 12px 4px;
  font-size: 14px;
  color: var(--charcoal);
}

#contact .list-group-item:last-child { border-bottom: 0; }

#contact .list-group-item strong {
  display: inline-block;
  min-width: 130px;
  color: var(--stone);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

#contact .card {
  padding: 8px 16px;
  margin-bottom: 16px;
}

#contact .card .list-group-flush > .list-group-item { padding-left: 0; padding-right: 0; }

@media (max-width: 576px) {
  .lessonplan-header-btn {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  .lessonplan-header-badge {
    margin-bottom: 0.5rem !important;
  }
  .lessonplan-header-badge:last-child {
    margin-bottom: 0 !important;
  }
  .lesson-col-teacher,
  .lesson-col-price,
  .lesson-col-payment,
  .lesson-col-original-date {
    display: none;
  }

  /* Mobile bottom nav (school only) */
  .studentshow-bottom-nav {
    height: 76px !important;
    background: var(--ivory) !important;
    border-top: 1px solid var(--cream) !important;
    box-shadow: 0 -4px 14px rgba(20, 18, 12, 0.06) !important;
  }
  .studentshow-bottom-nav .d-flex { height: 100% !important; }
  .studentshow-bottom-nav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--olive);
    font-size: 0.75rem;
    height: 100%;
    padding: 0;
    transition: color 0.12s;
    border-bottom: 0;
  }
  .studentshow-bottom-nav-link i {
    font-size: 1.4rem !important;
    margin-bottom: 2px;
    display: block;
  }
  .studentshow-bottom-nav-link span {
    font-size: 0.66rem !important;
    line-height: 1.1;
    margin-top: 1px;
    display: block;
    text-align: center;
    letter-spacing: 0.02em;
  }
  .studentshow-bottom-nav-link.active,
  .studentshow-bottom-nav-link:focus,
  .studentshow-bottom-nav-link:hover {
    color: var(--accent) !important;
  }

  .fc .fc-header-toolbar .fc-toolbar-chunk:first-child {
    max-width: 100px;
    flex: 0 1 100px;
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────────────────────
   Lessons — segmented plan selector + list-cards
   ───────────────────────────────────────────────────────────── */

.lp-wrap { margin-top: 4px; }

.lp-plan-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.lp-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ivory);
  border: 1px solid var(--cream);
  color: var(--olive);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}

.lp-plan-pill:hover { border-color: var(--warm); color: var(--ink); }

.lp-plan-pill.active { background: var(--sand); border-color: var(--ring); color: var(--ink); }

.lp-plan-pill-sub { color: var(--stone); font-weight: 400; }

.lp-plan-pill.active .lp-plan-pill-sub { color: var(--olive); }

.lp-pane { display: none; }

.lp-pane.active { display: block; }

.lp-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-plan-head-item { display: flex; flex-direction: column; gap: 3px; }

.lp-plan-head-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  font-weight: 500;
}

.lp-plan-head-val { font-size: 14px; color: var(--ink); font-weight: 500; }

.lp-plan-head-val a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--warm); }

.lp-plan-head-val a:hover { border-color: var(--ink); }

.lp-plan-head-spacer { flex: 1 1 auto; }

.lp-plan-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.lp-progress { min-width: 150px; }

.lp-progress-bar { height: 5px; background: var(--cream); border-radius: 99px; overflow: hidden; }

.lp-progress-fill { height: 100%; background: var(--accent); border-radius: 99px; }

.lp-toolbar { display: flex; gap: 10px; margin-bottom: 10px; }

.lp-toolbar select {
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--ivory);
  color: var(--ink);
}

/* ── Lesson list cards ── */

.lp-lesson-list { display: flex; flex-direction: column; gap: 6px; }

.lp-lc {
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
  border-left-width: 3px;
  overflow: hidden;
}

/* Status accent colours on left border */

.lp-accent-done      { border-left-color: #5a7d3a; }

.lp-accent-scheduled { border-left-color: var(--accent); }

.lp-accent-info      { border-left-color: #22515f; }

.lp-accent-danger    { border-left-color: #b3261e; }

.lp-accent-muted     { border-left-color: var(--stone); }

.lp-lc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 14px;
}

.lp-lc-has-detail > .lp-lc-row { cursor: pointer; }

.lp-lc-has-detail > .lp-lc-row:hover { background: var(--ivory); }

.lp-lc-date { width: 60px; flex-shrink: 0; text-align: center; }

.lp-lc-dow  { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); }

.lp-lc-day  { display: block; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.2; }

.lp-lc-main { flex: 1; min-width: 0; }

.lp-lc-time { font-size: 14px; color: var(--ink); font-weight: 500; }

.lp-lc-dur  { color: var(--stone); font-weight: 400; }

.lp-lc-note-snip { font-size: 12px; color: var(--stone); font-style: italic; margin-top: 3px; }

.lp-lc-tail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.lp-lc-price { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Payment badges */

.lp-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.lp-pay-paid     { background: #dfe4d8; color: #3f5824; }

.lp-pay-open     { background: #fff3cd; color: #7a5800; }

.lp-pay-pending  { background: var(--cream); color: var(--stone); }

.lp-pay-refunded { background: #d6e5ea; color: #22515f; }

/* Status badges */

.lp-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.lp-status-done      { background: #dfe4d8; color: #3f5824; }

.lp-status-scheduled { background: #eae5f8; color: #4a2d9c; border-color: #d8d0f0; }

.lp-status-info      { background: #d6e5ea; color: #22515f; }

.lp-status-canceled  { background: #fde8e8; color: #b3261e; }

.lp-status-muted     { background: var(--cream); color: var(--stone); }

.lp-lc-toggle {
  background: none;
  border: 0;
  color: var(--stone);
  padding: 2px 4px;
  cursor: pointer;
  transition: transform .15s;
  flex-shrink: 0;
}

.lp-lc.expanded .lp-lc-toggle { transform: rotate(180deg); }

.lp-lc-detail { display: none; padding: 0 16px 14px 90px; border-top: 1px solid var(--cream); }

.lp-lc.expanded .lp-lc-detail { display: block; padding-top: 12px; }

.lp-lc-note {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 10px;
}

.lp-lc-detail-meta { font-size: 13px; color: var(--stone); line-height: 1.6; }

.lp-lc-detail-meta strong { color: var(--ink); font-weight: 600; }

@media (max-width: 576px) {
  .lp-lc-price { display: none; }
  .lp-lc-detail { padding-left: 14px; }
  .lp-plan-head-spacer { display: none; }
  .lp-lc-tail { gap: 5px; }
}

/* enrollForm.css: Styles for enrollForm.ejs */

@media (max-width: 576px) {
  .enroll-bottom-btn-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    z-index: 1100;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    padding: 0.75rem 1rem 1.1rem 1rem;
    display: flex;
    justify-content: center;
  }
  .enroll-bottom-btn {
    width: 100%;
    font-size: 1.15rem;
    padding: 0.85rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(13,110,253,0.08);
  }

  /* Add margin-bottom to availability table card on mobile */
  .card.shadow-sm.mb-4 {
    margin-bottom: 100px !important;
  }
}

/* Optional polish for button-radios */

.btn-choice-group .btn { min-width: 96px; }

.btn-check:checked + .btn-outline-primary {
  color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary);
}

.btn-check:focus + .btn,
.btn:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb,13,110,253), .25); }

/* ──────────────────────────────────────────────────────────────────────
   Availability grid — LessonPen reskin.
   Classes (.day-col, .day-availability, .available-segment, .booked-segment, …)
   stay identical so availability.js continues to drive layout/position.
   Only the visual styling has changed: parchment surfaces, green for
   available, red for booked, both using the LessonPen design tokens.
   ────────────────────────────────────────────────────────────────────── */

/* Local tokens for booked/available — derived from existing design vars */

.availability-grid {
  --av-good:        #5a7d3a;
  --av-good-soft:   #e3e8cf;
  --av-good-ink:    #3f5824;
  --av-danger:      #b5392a;
  --av-danger-soft: #f1d3cc;
  --av-danger-ink:  #7a1f15;
  --av-empty-stripe: repeating-linear-gradient(45deg, transparent 0 6px, rgba(20,18,12,.035) 6px 7px), var(--ivory);
}

/* ── Card framing ─────────────────────────────────────────────────── */

.availability-grid {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}

/* ── Hour labels column (left rail) ──────────────────────────────── */

.hour-labels-global,
.hour-labels-mobile {
  background: var(--paper);
  border-right: 1px solid var(--cream);
}

.hour-label {
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace) !important;
  color: var(--stone) !important;
  border-bottom: 1px solid var(--cream) !important;
  font-size: 11px !important;
  letter-spacing: 0;
}

/* ── Day column ──────────────────────────────────────────────────── */

.day-col {
  min-width: 72px;
  border-left: 1px solid var(--cream);
  border-right: 0;
  background: var(--ivory);
  transition: background 0.12s;
}

.day-col:first-of-type { border-left: 0; }

.day-col:hover { background: var(--paper); }

/* ── Day header ──────────────────────────────────────────────────── */

.day-header {
  border-bottom: 1px solid var(--cream);
  background: var(--paper);
  color: var(--stone);
  font-family: var(--sans, 'Geist', ui-sans-serif, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 6px;
}

.day-header-full { display: inline; }

.day-header-short { display: none; }

/* ── Availability canvas (empty/unavailable background) ──────────── */

.day-availability {
  border-left: 0;
  border-right: 0;
  background: transparent;
}

.unavailable-bg {
  background: var(--av-empty-stripe);
  z-index: 1;
  opacity: 1;
}

.available-segments { z-index: 1; }

/* ── Available segment (GREEN) ───────────────────────────────────── */

.available-segment {
  position: absolute;
  left: 3px;
  right: 3px;
  background: var(--av-good-soft);
  box-shadow: inset 3px 0 0 0 var(--av-good);
  border-radius: 6px;
  z-index: 2;
  min-height: 18px;
  overflow: hidden;
  transition: box-shadow 0.18s, transform 0.12s;
}

.available-segment:hover {
  box-shadow:
    inset 3px 0 0 0 var(--av-good),
    0 2px 8px rgba(90, 125, 58, 0.18);
  cursor: pointer;
  z-index: 3;
}

.available-segment.hovered {
  box-shadow:
    inset 3px 0 0 0 var(--av-good),
    0 2px 8px rgba(90, 125, 58, 0.22) !important;
  z-index: 3 !important;
}

.read-only .available-segment:hover {
  cursor: default !important;
  box-shadow: inset 3px 0 0 0 var(--av-good) !important;
  z-index: 2 !important;
}

.available-segment .segment-time {
  font-size: 0.85em;
  color: var(--av-good-ink);
  font-weight: 600;
  padding: 0 8px;
  text-shadow: none;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
}

.available-segment .edit-icon {
  float: right;
  margin-left: 8px;
  color: var(--av-good-ink);
  opacity: 0.6;
  font-size: 0.95em;
}

.available-segment .edit-icon:hover { opacity: 1; }

/* Segment label */

.available-segment-label {
  position: absolute;
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  color: var(--av-good-ink);
  font-weight: 600;
  font-size: 0.85em;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  z-index: 2;
  text-align: left;
  padding: 0 6px;
  pointer-events: none;
  transition: color 0.12s ease;
  letter-spacing: 0.01em;
  overflow: hidden;
}

/* Per-segment label color variants */

.available-segment-label.match    { color: var(--av-good-ink); }

.available-segment-label.teacher  { color: #6a4313; }

.available-segment-label.student  { color: #22515f; }

.available-segment-label.booked {
  color: var(--av-danger-ink);
  font-weight: 700;
  text-shadow: none;
  z-index: 5;
  pointer-events: none;
}

/* Comparison segment variants (teacher/student match views) */

.match-segment {
  background: var(--av-good-soft) !important;
  box-shadow: inset 3px 0 0 0 var(--av-good) !important;
  opacity: 1;
}

.teacher-segment {
  background: #f1e3c8 !important;
  box-shadow: inset 3px 0 0 0 #c4862a !important;
  opacity: 1;
}

.student-segment {
  background: #d6e5ea !important;
  box-shadow: inset 3px 0 0 0 #4a7a8a !important;
  opacity: 1;
}

.teacher-segment:hover,
.student-segment:hover {
  box-shadow: inherit !important;
  opacity: 1 !important;
  cursor: default !important;
  z-index: 2 !important;
}

/* ── Booked segment (RED) ────────────────────────────────────────── */

.booked-segment {
  position: absolute;
  left: 3px;
  right: 3px;
  background: var(--av-danger-soft);
  box-shadow: inset 3px 0 0 0 var(--av-danger);
  border-radius: 6px;
  z-index: 4;
  opacity: 1;
  transition: box-shadow 0.18s;
}

.booked-segment.hovered,
.booked-segment:hover {
  box-shadow:
    inset 3px 0 0 0 var(--av-danger),
    0 2px 8px rgba(181, 57, 42, 0.22) !important;
  cursor: pointer;
  z-index: 5;
}

/* ── Wheel picker (legacy — kept for any non-LessonPen callsites) ── */

.wheel-container { width: 60px; }

.wheel-select {
  height: 96px;
  font-size: 1.3em;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--cream);
  background: var(--ivory);
  cursor: pointer;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
}

#rangeError { min-height: 18px; }

/* ── Mobile wrapper toggle ───────────────────────────────────────── */

.day-mobile-wrapper { display: none !important; }

@media (max-width: 576px) {
  .hour-labels-global { display: none !important; }

  .availability-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .availability-grid > .day-col {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    background: var(--ivory);
    border: 1px solid var(--cream);
    border-radius: 12px;
    overflow: hidden;
  }
  .availability-grid { min-width: 0 !important; }

  .day-mobile-wrapper {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    padding: 0 8px 8px;
  }

  .day-header { text-align: center; }
  .day-header-full { display: none; }
  .day-header-short { display: inline; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
  .hour-label {
    min-width: 35px !important;
    font-size: 10px !important;
  }
  .hour-label-col {
    width: 36px !important;
    flex: 0 0 36px !important;
  }
  .hour-labels-mobile .hour-label {
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    background: transparent;
    border-right: 0;
  }
  .day-mobile-content { flex: 1 1 auto; }

  .available-segment-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    white-space: nowrap;
    overflow: hidden;
    font-size: 0.85em;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    pointer-events: none;
  }
  .available-segment-label.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 6s linear infinite;
  }
  @keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
}

@media (max-width: 900px) {
  .day-col { min-width: 56px; }
  .hour-label { min-width: 40px; font-size: 10px; }
}

@media (max-width: 576px) {
  .day-col {
    min-width: 0 !important;
    max-width: 100% !important;
    border-left: 1px solid var(--cream);
    border-right: 1px solid var(--cream);
  }
}

@media (max-width: 376px) {
  .day-col { min-width: 45px; max-width: 45px; }
  .hour-label {
    min-width: 30px !important;
    font-size: 9px !important;
  }
  .hour-label-col {
    width: 32px !important;
    flex: 0 0 32px !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   Availability modals — LessonPen "A · Add availability" and
   "B · Time picker wheel". Used in studentsShow.ejs.
   ──────────────────────────────────────────────────────────────── */

/* ── Modal shell ────────────────────────────────────────────────── */

/* Also opened from inside the settings panel (.smod, z-index:1100) — must
   clear that stacking context or it renders behind the panel. Backdrop is
   bumped to match via JS in _availabilityModals.ejs (Bootstrap creates it
   generically, so it can't be targeted by a class selector here). */

.lp-avail-modal { z-index: 1150; }

.lp-avail-modal .modal-dialog {
  max-width: 420px;
  /* Skip the slide — opacity-only fade is compositor-only, no repaint. */
  transform: none !important;
  transition: none !important;
}

.lp-avail-modal.lp-avail-modal .modal-content.lp-amod-wheel { max-width: 340px; margin: 0 auto; }

.lp-amod {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 28px 60px -20px rgba(20, 18, 12, 0.45),
    0 8px 24px -8px rgba(20, 18, 12, 0.25);
}

/* The time-picker dialog sits visually centered and slightly narrower */

.lp-avail-modal:has(.lp-amod-wheel) .modal-dialog { max-width: 340px; }

/* ── Header ─────────────────────────────────────────────────────── */

.lp-amod-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--cream);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lp-amod-head-titles { flex: 1; min-width: 0; }

.lp-amod-head-titles .eyebrow { margin: 0 0 6px; }

.lp-amod-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.lp-amod-sub {
  margin: 4px 0 0;
  color: var(--olive);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Body ───────────────────────────────────────────────────────── */

.lp-amod-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-amod-body-wheel { padding: 24px 22px 8px; }

/* ── Fields ─────────────────────────────────────────────────────── */

.lp-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }

.lp-field > label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 0;
}

.lp-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lp-input {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.lp-input:focus,
.lp-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

/* Day select with leading calendar icon + trailing chevron */

.lp-select-wrap { position: relative; }

.lp-select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-left: 36px;
  padding-right: 36px;
  cursor: pointer;
}

.lp-select-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  font-size: 13px;
  pointer-events: none;
}

.lp-select-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  font-size: 11px;
  pointer-events: none;
}

/* Time button (Starts / Ends triggers — open the wheel picker) */

.lp-time-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 9px 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.lp-time-button:hover { border-color: var(--ring); }

.lp-time-button:focus-visible {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.lp-time-icon { color: var(--stone); font-size: 13px; flex-shrink: 0; }

.lp-time-value {
  flex: 1;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.lp-time-chev { color: var(--stone); font-size: 10px; flex-shrink: 0; }

/* Total available time strip */

.lp-amod-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--cream);
}

.lp-amod-total-label {
  font-size: 12.5px;
  color: var(--olive);
}

.lp-amod-total-value {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Inline error */

.lp-amod-error {
  font-size: 12.5px;
  color: #7b2222;
  min-height: 0;
}

.lp-amod-error:empty { display: none; }

/* ── Footer ─────────────────────────────────────────────────────── */

.lp-amod-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--cream);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-amod-foot-spacer { flex: 1; min-width: 0; }

/* Buttons */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  border: 1px solid var(--ring);
  background: var(--sand);
  color: var(--charcoal);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lp-btn:hover { background: var(--sand-2); border-color: var(--warm); color: var(--ink); }

.lp-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
}

.lp-btn-brand:hover { background: var(--accent-2); border-color: var(--accent-2); color: #faf7ee; }

.lp-btn-danger {
  background: transparent;
  border-color: #efd2cd;
  color: #7b2222;
}

.lp-btn-danger:hover { background: #efd2cd; border-color: #d8b4ac; color: #5a1818; }

.lp-btn i { font-size: 11px; }

/* ════════════════════════════════════════════════════════════════
   B · Time picker wheel
   ════════════════════════════════════════════════════════════════ */

.lp-amod-foot-wheel {
  padding: 8px 18px 18px;
}

/* Push the confirm button to the right even when the presets wrap onto
   their own line — justify-content: space-between has no effect once
   the button is alone on a wrapped line. */

.lp-amod-foot-wheel .lp-btn-brand {
  margin-left: auto;
}

.lp-wheel-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  /* Top/bottom padding must match — the band below is centered via
     top:50% + translateY(-50%), which only lines up with the actual
     centered row when this padding is symmetric. */
  padding: 8px 0;
}

/* Center highlight band, spans both wheels */

.lp-wheel-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 42px;
  background: var(--sand-2);
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ring);
  z-index: 0;
  pointer-events: none;
}

.lp-wheel-col {
  position: relative;
  z-index: 1;
  padding: 0 14px;
}

.lp-wheel-sep {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--charcoal);
  padding: 0 6px 0 12px;
  text-align: center;
}

/* ── Scroll-snap wheel ────────────────────────────────────────── */

/* Container is exactly 5 rows tall. Top + bottom padding (2 rows each
   side) make it possible to snap the first/last options to center. */

.lp-wheel-scroll {
  height: 190px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: 0;
  text-align: center;
  position: relative;
  z-index: 1;
  /* Smooth scrolling on Firefox; -webkit-overflow-scrolling for older iOS */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  /* Suppress vertical scrollbar */
  background: transparent;
}

.lp-wheel-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.lp-wheel-scroll:focus,
.lp-wheel-scroll:focus-visible {
  outline: 0;
  box-shadow: none;
}

.lp-wheel-padding {
  height: 38px;
  pointer-events: none;
  scroll-snap-align: none;
}

.lp-wheel-option {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--stone);
  font-size: 17px;
  line-height: 1;
  opacity: 0.55;
  /* color + opacity transition only — font-size jumps instantly so
     fast scrolls feel responsive (no animation queue building up). */
  transition: color 0.1s, opacity 0.1s;
}

.lp-wheel-option.is-selected {
  color: #000;
  font-size: 26px;
  font-weight: 500;
  opacity: 1;
}

/* Rows adjacent to the selected one fade in a touch more so the
   wheel reads as a smooth gradient from selected → muted. */

.lp-wheel-option.is-selected + .lp-wheel-option,
.lp-wheel-option:has(+ .lp-wheel-option.is-selected) {
  color: var(--olive);
  opacity: 0.8;
}

/* Preset chips */

.lp-wheel-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lp-preset-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--olive);
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lp-preset-chip:hover {
  background: var(--sand);
  border-color: var(--ring);
  color: var(--ink);
}

.lp-preset-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: #7c3a1d;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .lp-amod-head { padding: 16px 18px 12px; }
  .lp-amod-title { font-size: 19px; }
  .lp-amod-body { padding: 16px 18px; gap: 12px; }
  .lp-amod-body-wheel { padding: 20px 18px 6px; }
  .lp-amod-foot { padding: 12px 16px; }
  .lp-amod-foot-wheel { padding: 6px 16px 16px; }
  .lp-field-grid { grid-template-columns: 1fr; gap: 10px; }
  .lp-wheel-option.is-selected { font-size: 22px; }
  .lp-wheel-presets { gap: 4px; }
  .lp-preset-chip { padding: 4px 8px; font-size: 11px; }
}

/* ────────────────────────────────────────────────────────────────
   Lesson edit modal — LessonPen "Solo edit" variant.
   Triggered from the schedule when a teacher clicks a lesson event.
   Scoped under `.lesson-edit-modal` so it never bleeds into other
   Bootstrap modals on the same page.
   ──────────────────────────────────────────────────────────────── */

.lesson-edit-modal .modal-dialog { max-width: 580px; }

.lesson-edit-modal .modal-content.lem {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 28px 60px -20px rgba(20, 18, 12, 0.45),
    0 8px 24px -8px rgba(20, 18, 12, 0.25);
}

/* Terracotta accent stripe at the very top */

.lem-stripe { height: 4px; background: var(--accent); }

/* ── Header ── */

.lem-head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--cream);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lem-head-titles { flex: 1; min-width: 0; }

.lem-head-titles .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 6px;
}

.lem-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* Status row in header: badge + pencil edit + dropdown */

.lem-head-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  position: relative;
}

.lem-head-status:empty { display: none; }

.lem-head-status .badge { margin: 0; }

.lem-badge-scheduled { background: #dce4ef; color: #1e3a8a; }

.lem-status-edit-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--stone);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.lem-status-edit-btn:hover { background: var(--sand); color: var(--ink); }

.lem-status-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  box-shadow: 0 8px 28px -8px rgba(20, 18, 12, 0.22);
  min-width: 170px;
  z-index: 100;
  padding: 4px;
}

.lem-status-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  font: 400 13px/1.3 var(--sans);
  color: var(--charcoal);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.1s;
}

.lem-status-opt:hover { background: var(--sand); color: var(--ink); }

.lem-status-opt.is-current { font-weight: 600; color: var(--ink); }

/* ── Body ── */

.lem-body {
  margin: 0;
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow: auto;
  max-height: 64vh;
}

/* Read-only context rows (student / teacher / lesson plan) */

.lem-row-card {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.lem-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ivory);
  border: 1px solid var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
  flex-shrink: 0;
}

.lem-row-icon i { font-size: 13px; }

.lem-row-body { flex: 1; min-width: 0; }

.lem-row-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 2px;
}

.lem-row-value {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}

.lem-row-value:empty::before { content: '—'; color: var(--stone); }

.lem-row-value a {
  color: var(--ink);
  border-bottom: 1px solid var(--warm);
  text-decoration: none;
}

.lem-row-value a:hover { border-color: var(--ink); }

/* ── Form fields ── */

.lem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Trigger button that opens the time-wheel picker modal */

.lem-time-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.lem-time-trigger:hover,
.lem-time-trigger:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
  outline: none;
}

.lem-time-trigger span { flex: 1; }

.lem-time-trigger i { color: var(--stone); font-size: 12px; }

/* Date trigger — mirrors .lem-time-trigger but wraps a flatpickr input */

.lem-date-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
  cursor: pointer;
}

.lem-date-trigger:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.lem-date-trigger i { color: var(--stone); font-size: 12px; flex-shrink: 0; }

.lem-date-trigger .flatpickr-wrapper { flex: 1; min-width: 0; }

.lem-date-trigger .lp-date-input {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  font-size: 13.5px;
  outline: none;
  cursor: pointer;
}

.lem-date-trigger .lp-date-input:focus { box-shadow: none; }

.lem-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.lem-field > label {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--olive);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

.lem-add-notes-btn {
  align-self: flex-start;
  border: 1px dashed var(--ring);
  border-radius: 999px;
  background: var(--sand);
  color: var(--accent);
  padding: 7px 11px;
  font: 600 12.5px/1 var(--sans);
  cursor: pointer;
}

.lem-add-notes-btn:hover,
.lem-add-notes-btn:focus {
  background: #fff;
  border-color: var(--accent);
  outline: none;
}

.lem-notes-content:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lem-field input,
.lem-field select {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.lem-field input:focus,
.lem-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.lem-field select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a877b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  padding-right: 30px;
}

/* Inline time-conflict error */

.lem-error {
  font-family: var(--sans);
  font-size: 12.5px;
  color: #7b2222;
  min-height: 0;
}

.lem-error:empty { display: none; }

/* ── Footer ── */

.lem-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--cream);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lem-foot-spacer { flex: 1; min-width: 0; }

/* Buttons */

.lem-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  font: 500 13px/1 var(--sans);
  cursor: pointer;
  border: 1px solid var(--ring);
  background: var(--sand);
  color: var(--charcoal);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lem-btn:hover { background: var(--sand-2); border-color: var(--warm); color: var(--ink); }

.lem-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
  box-shadow: 0 0 0 1px var(--accent);
}

.lem-btn-brand:hover { background: var(--accent-2); border-color: var(--accent-2); color: #faf7ee; }

.lem-btn-danger {
  background: transparent;
  border-color: #efd2cd;
  color: #7b2222;
}

.lem-btn-danger:hover { background: #efd2cd; border-color: #d8b4ac; color: #5a1818; }

.lem-btn i { font-size: 11px; }

/* ── Compact context row (freelance: student + lesson# + subject) ── */

.lem-context-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 10px;
}

.lem-ctx-student {
  font: 500 14px/1.3 var(--sans);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lem-ctx-student:hover { border-color: var(--ink); color: var(--ink); }

.lem-ctx-meta {
  font: 400 13px/1.3 var(--sans);
  color: var(--stone);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Attendance in header (freelance) ── */

.lem-att-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Staged-state banner (replaces the undo button) ── */

.lem-att-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border-radius: 20px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
}

.lem-att-banner[data-variant="confirmed"] {
  background: rgba(34, 137, 86, 0.13);
  color: #1a6b41;
}

.lem-att-banner[data-variant="canceled"] {
  background: rgba(190, 70, 40, 0.11);
  color: #963318;
}

.lem-att-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  font-size: 10px;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 0.12s, background 0.12s;
}

.lem-att-banner-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* ── Responsive ── */

@media (max-width: 576px) {
  .lesson-edit-modal .modal-dialog { max-width: calc(100% - 16px); margin: 8px auto; }
  .lem-head { padding: 18px 18px 12px; }
  .lem-title { font-size: 20px; }
  .lem-body { padding: 14px 18px; }
  .lem-grid { grid-template-columns: 1fr; }
  .lem-foot { padding: 12px 14px; }
}

/* ── Group lesson modal ("glm") — calendar group-block roster + attendance ── */

.glm-stripe { background: #6f42c1; }

.glm-name-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  font: 500 24px/1.18 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  width: 100%;
}

.glm-name-input:hover,
.glm-name-input:focus { background: var(--sand); border-color: var(--ring); outline: none; }

.glm-meta {
  font: 400 13px/1.4 var(--sans);
  color: var(--stone);
}

.glm-meta:empty { display: none; }

.glm-section + .glm-section {
  border-top: 1px solid var(--cream);
  padding-top: 14px;
}

.glm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.glm-section-title {
  font: 600 13px/1.3 var(--sans);
  color: var(--ink);
}

/* Session / Group tab strip — deliberately not the shared .nav-tabs component
   (that one is sized for the icon-over-label student/teacher profile tabs and
   would look oversized in this modal); just enough to look like tabs. */

.glm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cream);
  margin: 0;
  padding: 0;
}

.glm-tabs .nav-link {
  padding: 8px 4px 10px;
  font: 600 13px/1.3 var(--sans);
  color: var(--stone);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}

.glm-tabs .nav-link:hover { color: var(--ink); }

.glm-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }

/* .lem-body's own flex gap only reaches its direct children (.glm-meta,
   .glm-tabs, .glm-tab-content) — each pane needs the same column+gap rhythm
   to keep the spacing between its .glm-sections consistent with pre-tabs. */

.glm-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.glm-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.glm-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font: 600 12px/1.3 var(--sans);
}

/* Same palette as .fc-event[data-status] (schedule.css) — one occurrence
   status, one consistent color language across the calendar and this modal. */

.glm-status-pill[data-status="scheduled"]   { background: #dce4ef; color: #1e3a8a; }

.glm-status-pill[data-status="completed"]   { background: #dce4d2; color: #3a5424; }

.glm-status-pill[data-status="canceled"]    { background: #efd2cd; color: #7b2222; }

.glm-status-pill[data-status="unconfirmed"] { background: #f1e3c8; color: #6a4313; }

.glm-status-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.glm-att-list .att-row { padding: 8px 0; }

.glm-att-list .att-time { width: 0; }

.glm-roster-list .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cream);
}

.glm-roster-list .list-group-item:last-child { border-bottom: 0; }

.glm-roster-name { font: 500 13px/1.3 var(--sans); color: var(--ink); }

.glm-roster-sub { font-size: 11px; color: var(--stone); }

.glm-roster-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--stone);
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.glm-roster-remove:hover { background: #efd2cd; color: #7b2222; }

.glm-roster-empty { font: 400 13px/1.4 var(--sans); color: var(--stone); padding: 6px 0; }

.glm-add-student {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.glm-select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ring);
  border-radius: 9px;
  padding: 7px 10px;
  font: 400 13px/1.3 var(--sans);
  background: #fff;
  color: var(--charcoal);
}

.glm-extend-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ── Requests modal ("pr") — readiness checklist ──────────────────────────
   Rows reuse .onb-widget-list/.onb-widget-item/.onb-widget-check (see
   onboardingWidget.css) so the "setup checklist" visual language matches
   the dashboard onboarding widget everywhere it appears. */

.pr-readiness {
  padding: 0;
  border-bottom: 1px solid var(--cream);
  padding-bottom: 6px;
}

.pr-readiness .onb-widget-item { padding: 6px 0; }

.pr-readiness-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.pr-readiness-cta:hover { text-decoration: underline; }

.pr-readiness-divider {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
}

.pr-readiness-empty,
.pr-readiness-ready {
  text-align: center;
  padding: 8px 4px 4px;
}

.pie-chart {
    width: 400px !important;
    height: 400px !important;
    max-width: 400px !important;
    max-height: 400px !important;
  }

@media (max-width: 576px) {
  .pie-chart {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
  }
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.month-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  /* Remove background and color from here */
}

.month-header {
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
  background: #212529;
  color: #fff;
  border-radius: 4px;
  padding: 0.25rem 0;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 0.75rem;
  gap: 0.25rem;
}

.day-name {
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: rgba(33,37,41,0.7); /* bg-dark with opacity */
  border-radius: 3px;
  padding: 2px 0;
}

.day {
  text-align: center;
  padding: 0.25rem;
}

.empty {
  visibility: hidden;
}

.faded-year {
  color: #888;
  opacity: 0.5;
  font-size: 1.1rem;
}

/* ────────────────────────────────────────────────────────────
   Login — LessonPen "B · Split editorial".
   Left: light parchment form. Right: dark warm-night panel with a rotating "tip" (category + typewriter detail).
   ──────────────────────────────────────────────────────────── */

/* Full-bleed body (no navbar, no sidebar, no app-shell padding). */

body.auth-fullbleed { margin: 0; padding: 0; background: var(--paper); }

body.auth-fullbleed .app-flex-wrapper { background: var(--paper); }

body.auth-fullbleed .content-row { min-height: 100vh; }

body.auth-fullbleed .main-content,
body.auth-fullbleed .main-content.no-sidebar {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  display: flex;
}

body.auth-fullbleed #app-flex-wrapper { padding-bottom: 0 !important; }

/* ── Split container ── */

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* ════════════════════════════════════════════════════════════
   Left — editorial dark panel
   ════════════════════════════════════════════════════════════ */

.auth-editorial {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: #f5f2ea;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-editorial-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(201, 100, 66, 0.18), transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(201, 100, 66, 0.10), transparent 60%);
}

/* Wordmark anchored top */

.auth-wordmark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #f5f2ea;
  border-bottom: 0;
  align-self: flex-start;
}

.auth-wordmark:hover { color: #fff; border-bottom: 0; }

.auth-wordmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f2ea;
}

.auth-wordmark-text {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #f5f2ea;
}

/* Wordmark on the light form panel */

.auth-wordmark--form {
  margin-bottom: 36px;
  color: var(--ink);
}

.auth-wordmark--form:hover { color: var(--ink); }

.auth-wordmark--form .auth-wordmark-icon { color: var(--accent); }

.auth-wordmark--form .auth-wordmark-text { color: var(--ink); }

/* Body: brand line + typewriter benefits, vertically centered */

.auth-editorial-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 56px 0;
}

.auth-tip-eyebrow {
  margin: 0;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-tip-category {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #f5f2ea;
  max-width: 460px;
  opacity: 1;
  transition: opacity 260ms ease;
}

.auth-typewriter {
  margin-top: 10px;
  min-height: 1.6em;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #d4cfc0;
  max-width: 420px;
  opacity: 1;
  transition: opacity 260ms ease;
}

/* Also used by loginTypewriter.js on .auth-tip-category — the 260ms
   here must match FADE_MS in that script, so the "wait for it to fade"
   timer lines up with the transition actually finishing. */

.auth-tip-category.is-hidden,
.auth-typewriter.is-hidden { opacity: 0; }

.auth-typewriter-text { color: #c9c4b6; }

.auth-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  opacity: 0;
}

.auth-typewriter.is-active .auth-typewriter-cursor {
  opacity: 1;
  animation: auth-typewriter-blink 1s step-end infinite;
}

@keyframes auth-typewriter-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-typewriter-cursor { display: none; }
  .auth-tip-category,
  .auth-typewriter { transition: none; }
}

/* Footer row */

.auth-editorial-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: #a8a596;
}

.auth-est {
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  letter-spacing: 0.06em;
}

.auth-spacer { flex: 1; }

.auth-editorial-footer a {
  color: #a8a596;
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.12s;
}

.auth-editorial-footer a:hover { color: #f5f2ea; border-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   Right — form panel
   ════════════════════════════════════════════════════════════ */

.auth-form-panel {
  position: relative;
  background: var(--paper);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.auth-form-wrap {
  width: 100%;
  max-width: 380px;
  align-self: center;
  margin: 0 auto;
}

.auth-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 26px;
}

.auth-form { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.auth-signup-hint {
  margin: -2px 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.auth-signup-hint a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 0;
}

.auth-signup-hint a:hover { text-decoration: underline; }

/* Social */

.auth-social-stack { display: flex; flex-direction: column; gap: 8px; }

/* Divider with "or with email" */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--stone);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 6px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cream);
}

.auth-divider span { white-space: nowrap; }

/* Fields */

.auth-field { display: flex; flex-direction: column; gap: 6px; }

.auth-field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 0;
}

.auth-field label.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.auth-field .req { color: var(--accent); margin-left: 2px; }

.auth-field .muted { color: var(--stone); font-weight: 400; }

.auth-field input {
  background: #fff;
  border: 1px solid var(--cream);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.auth-field input::-moz-placeholder { color: var(--stone); }

.auth-field input::placeholder { color: var(--stone); }

.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}

.auth-forgot {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 0;
}

.auth-forgot:hover { text-decoration: underline; border-bottom: 0; }

/* Two-column field row (first/last name) */

.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Password field with show/hide toggle + strength meter */

.auth-pw { position: relative; }

.auth-pw input { padding-right: 38px; }

.auth-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--stone);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.auth-pw-toggle:hover { color: var(--charcoal); background: transparent; }

.auth-pw-toggle:focus { outline: none; color: var(--accent); background: transparent; }

.auth-pw-bar { height: 5px; background: var(--cream); border-radius: 4px; overflow: hidden; }

.auth-pw-fill { width: 0; height: 100%; background: #dc3545; transition: width 200ms ease, background-color 200ms ease; }

.auth-pw-hint { font-size: 11px; color: var(--stone); }

.auth-err { font-size: 11.5px; color: var(--accent); }

/* Terms consent checkbox */

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 0;
}

.auth-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-consent label {
  font-size: 11.5px;
  color: var(--stone);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.auth-consent a { color: var(--olive); }

/* Buttons */

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
  background: var(--sand);
  color: var(--charcoal);
  box-shadow: 0 0 0 1px var(--ring);
  text-decoration: none;
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}

.auth-btn:hover { background: var(--sand-2); color: var(--ink); }

.auth-btn-brand {
  background: var(--accent);
  color: #faf7ee;
  box-shadow: 0 0 0 1px var(--accent);
  margin-top: 4px;
}

.auth-btn-brand:hover { background: var(--accent-2); color: #faf7ee; box-shadow: 0 0 0 1px var(--accent-2); }

.auth-btn-white {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--warm);
}

.auth-btn-white:hover { background: #fbf9f3; color: var(--ink); box-shadow: 0 0 0 1px var(--warm); }

.auth-btn-fb {
  background: #1877F2;
  color: #fff;
  box-shadow: 0 0 0 1px #1877F2;
}

.auth-btn-fb:hover { background: #166fe2; color: #fff; box-shadow: 0 0 0 1px #166fe2; }

.auth-btn-ghost {
  background: transparent;
  color: var(--charcoal);
  box-shadow: none;
  border: 0;
  padding: 8px;
  font-size: 13px;
}

.auth-btn-ghost:hover { background: var(--sand); color: var(--ink); box-shadow: none; }

/* Locale switcher — bottom-left of the form panel (navbar dropdown pattern) */

.auth-locale {
  position: absolute;
  left: 56px;
  bottom: 40px;
  z-index: 2;
}

.auth-locale .nav-link {
  color: var(--olive);
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  border-bottom: 0;
}

.auth-locale .nav-link:hover,
.auth-locale .nav-link:focus,
.auth-locale .show > .nav-link {
  color: var(--ink);
}

.auth-locale .dropdown-menu {
  min-width: 9rem;
}

/* ════════════════════════════════════════════════════════════
   Responsive — collapse to single column on tablet/mobile
   ════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-editorial { min-height: auto; padding: 36px 36px 28px; }
  .auth-editorial-body { margin: 28px 0; }
  .auth-tip-category { font-size: 24px; max-width: 100%; }
  .auth-typewriter { font-size: 13px; max-width: 100%; }
  .auth-form-panel { min-height: auto; padding: 40px 32px 72px; }
  .auth-locale { left: 32px; bottom: 28px; }
  .auth-row-2 { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .auth-editorial { padding: 28px 24px 24px; }
  .auth-tip-category { font-size: 20px; }
  .auth-typewriter { font-size: 12.5px; }
  .auth-editorial-footer { font-size: 11px; gap: 12px; flex-wrap: wrap; }
  .auth-form-panel { padding: 32px 24px 68px; }
  .auth-locale { left: 24px; bottom: 24px; }
  .auth-headline { font-size: 30px; }
}

/* ────────────────────────────────────────────────────────────
   Finance — LessonPen ledger view for freelance + school.
   ──────────────────────────────────────────────────────────── */

/* Legacy elements still used elsewhere */

.trigger-item { transition: background .15s, box-shadow .15s; }

.trigger-item:hover { background: var(--sand); box-shadow: 0 1px 4px rgba(0,0,0,.04); }

.trigger-icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }

.btn-text { white-space: nowrap; }

/* ── Page wrapper ── */

.page-container--finance {}

/* ── Header ── */

.finance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.finance-head-titles { min-width: 0; flex: 1 1 420px; }

.finance-title {
  font-family: var(--serif);
  font-size: var(--font-size-page-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 8px;
  line-height: 1.1;
}

.finance-sub {
  font-size: 15px;
  color: var(--olive);
  max-width: 640px;
  line-height: 1.5;
  margin: 0;
}

/* ── Stat strip ── */

.finance-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.finance-stat {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finance-stat .eyebrow { margin: 0; }

.finance-stat-value {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.finance-stat-sub {
  font-size: 12px;
  color: var(--stone);
}

.finance-stat-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.finance-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font: 500 11px/1.3 var(--sans);
  background: var(--sand);
  color: var(--charcoal);
}

.finance-stat-pill.warn { background: #f1e3c8; color: #6a4313; }

.finance-stat-pill.bad  { background: #efd2cd; color: #7b2222; }

.finance-stat-pill.good { background: #dfe4d8; color: #3f5824; }

/* ── Pie chart row (school only) ── */

.finance-charts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 22px;
}

/* ── Tabs ── */

.finance-tabs {
  border-bottom: 1px solid var(--cream) !important;
  margin-bottom: 22px;
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.finance-tabs::-webkit-scrollbar { display: none; }

.finance-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: var(--olive) !important;
  font: 500 14px/1 var(--sans) !important;
  padding: 11px 16px !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  border-radius: 0 !important;
  white-space: nowrap;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: auto !important;
  font-size: 14px !important;
}

.finance-tabs .nav-link:hover { color: var(--ink) !important; }

.finance-tabs .nav-link.active {
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
}

.finance-tabs .nav-link i {
  font-size: 14px !important;
  margin: 0 !important;
  display: inline !important;
}

.finance-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--olive);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.finance-tabs .nav-link.active .finance-tab-count {
  background: var(--accent-soft);
  color: #7c3a1d;
}

.finance-tab-content { padding-top: 4px; }

/* Sliding underline / scroll edge-fade / chevrons / height-matched cross-fade
   for .finance-tabs live in components/tabs-scroll.css (shared with .std-tabs) —
   classes are injected at runtime by public/js/tabsEnhance.js. */

/* ── Pane grid (Invoices tab: optional 2-col with right sidebar) ── */

.finance-pane-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: flex-start;
}

.finance-pane-grid.with-side {
  grid-template-columns: 1.7fr 1fr;
}

.finance-pane-main { min-width: 0; }

.finance-pane-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Generic card ── */

.finance-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  overflow: hidden;
}

.finance-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--cream);
  flex-wrap: wrap;
}

.finance-card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.finance-card-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--stone);
}

.finance-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--olive);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 0;
  transition: color 0.12s, background 0.12s;
}

.finance-link:hover { color: var(--ink); background: var(--sand); }

.finance-link i { font-size: 11px; opacity: 0.7; }

/* ── Section head (used in Payment Triggers tab) ── */

.finance-section-head { margin-bottom: 18px; }

.finance-section-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 6px 0 6px;
}

.finance-section-sub {
  font-size: 14px;
  color: var(--olive);
  margin: 0;
  max-width: 620px;
}

/* ── Buttons ── */

.finance-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sand);
  border: 1px solid var(--ring);
  color: var(--charcoal);
  padding: 7px 13px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.finance-btn:hover { background: var(--sand-2); border-color: var(--warm); color: var(--ink); }

.finance-btn-brand {
  background: var(--accent);
  border-color: var(--accent);
  color: #faf7ee;
}

.finance-btn-brand:hover { background: var(--accent-2); border-color: var(--accent-2); color: #faf7ee; }

.finance-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

/* ── Filter row (search + selects) ── */

.finance-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.finance-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.finance-search i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--stone);
  font-size: 12px;
  pointer-events: none;
}

.finance-search-input {
  background: var(--ivory) !important;
  border: 1px solid var(--cream) !important;
  border-radius: 8px !important;
  padding: 7px 12px 7px 32px !important;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  min-width: 220px;
  height: auto !important;
}

.finance-search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18) !important;
  outline: 0;
}

.finance-filter-select {
  background: var(--ivory) !important;
  border: 1px solid var(--cream) !important;
  border-radius: 8px !important;
  padding: 7px 28px 7px 12px !important;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  width: auto !important;
  min-width: 140px;
  height: auto !important;
}

.finance-filter-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18) !important;
  outline: 0;
}

/* ── Finance table ── */

.finance-table {
  background: transparent;
  margin: 0;
}

.finance-table > thead > tr > th {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 12px 22px;
  border-bottom: 1px solid var(--cream);
  background: transparent;
}

.finance-table > tbody > tr > td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--cream);
  color: var(--charcoal);
  vertical-align: middle;
}

.finance-table > tbody > tr:last-child > td { border-bottom: 0; }

.finance-table > tbody > tr:hover > td { background: rgba(0, 0, 0, 0.012); }

.finance-col-id {
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.finance-col-id a {
  color: var(--ink);
  border-bottom: 1px solid var(--warm);
  text-decoration: none;
}

.finance-col-id a:hover { border-color: var(--ink); }

.finance-col-second { color: var(--olive); font-size: 13px; white-space: nowrap; }

.finance-col-num { text-align: right; white-space: nowrap; }

.finance-amount {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.finance-amount-sub {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
  font-weight: 400;
}

/* Avatar + name cells */

.finance-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 0;
  font-weight: 500;
}

.finance-cell-link:hover { color: var(--accent); border-bottom: 0; }

.finance-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--av-bg, var(--accent-soft));
  color: var(--av-ink, #7c3a1d);
  border: 1px solid var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.finance-avatar-sm { width: 28px; height: 28px; font-size: 11px; }

.finance-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--stone);
  font-size: 14px;
}

/* ── By-student sidebar (freelance) ── */

.finance-by-student {
  padding: 8px 0;
}

.finance-bs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--cream);
  transition: background 0.12s;
}

.finance-bs-row:hover { background: rgba(0, 0, 0, 0.015); }

.finance-bs-row:last-child { border-bottom: 0; }

.finance-bs-info { flex: 1; min-width: 0; }

.finance-bs-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.finance-bs-bar {
  height: 5px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
}

.finance-bs-bar-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.75;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.finance-bs-amount {
  text-align: right;
  min-width: 70px;
  flex-shrink: 0;
}

.finance-bs-total {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.finance-bs-open {
  font-size: 11px;
  color: #b85438;
  margin-top: 1px;
}

/* ── Earnings · 6 months bar chart (freelance) ── */

.finance-earnings-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
  padding: 14px 0 2px;
}

.finance-earn-col {
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: flex-end;
}

.finance-earn-val {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--olive);
  text-align: center;
  margin-bottom: 6px;
}

.finance-earn-track {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.finance-earn-bar {
  width: 100%;
  min-height: 2px;
  background: var(--sand-2);
  border-radius: 6px 6px 2px 2px;
  transition: height 0.3s ease;
}

.finance-earn-bar.is-last { background: var(--accent); }

.finance-earn-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  margin-top: 8px;
  color: var(--stone);
}

.finance-earn-label.is-last { color: var(--ink); font-weight: 500; }

/* ── Recent payouts sidebar ── */

.finance-payout-list { padding: 4px 0; }

.finance-payout-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--cream);
}

.finance-payout-row:last-child { border-bottom: 0; }

.finance-payout-month {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  flex: 1;
}

.finance-payout-amount {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* ── Payment triggers cards ── */

.finance-triggers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.finance-trigger-card {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.12s, transform 0.12s;
}

.finance-trigger-card:hover { border-color: var(--warm); }

.finance-trigger-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: #7c3a1d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.finance-trigger-icon svg { width: 20px; height: 20px; }

.finance-trigger-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.finance-trigger-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--olive);
  margin: 0;
  line-height: 1.4;
}

.finance-trigger-card .finance-btn { align-self: flex-start; margin-top: 2px; }

/* ── Legacy: summary bar (kept for any old EJS that still references it) ── */

.finance-summary-bar {
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--cream);
  margin-bottom: 16px !important;
}

.finance-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  border-right: 1px solid var(--cream);
}

.finance-summary-item:last-child { border-right: none; }

.finance-summary-value {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.finance-summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone);
}

/* ── Overview tab grid (chart left, top students right) ── */

.fin-overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: flex-start;
}

/* ── Attention card (overdue highlight) ── */

.fin-attention-card {
  border-left: 3px solid #b3261e;
}

/* ── Invoice row actions (inline, compact) ── */

.fin-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: center;
}

/* ── Responsive ── */

@media (max-width: 992px) {
  .fin-overview-grid { grid-template-columns: 1fr; }

  .finance-stats { grid-template-columns: 1fr 1fr; }
  .finance-pane-grid.with-side { grid-template-columns: 1fr; }
  .finance-triggers { grid-template-columns: 1fr; }
}

/* ── Clickable stat (overdue → invoices tab) ────────────────────────────── */

button.finance-stat {
  text-align: left;
  font: inherit;
}

.finance-stat-clickable {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.finance-stat-clickable:hover {
  border-color: var(--warm);
  background: var(--ivory);
}

/* ── Ready-to-bill student rows ─────────────────────────────────────────── */

.fin-rtb-card .finance-card-head:has(+ .fin-rtb-empty) {
  border-bottom: none;
}

.fin-rtb-empty.settings-empty {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 28px 28px 44px;
}

.fin-rtb-list-wrap {
  position: relative;
  max-height: 320px; /* ~5 rows at ~64px each */
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.fin-rtb-list-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.fin-rtb-list-wrap--short,
.fin-rtb-list-wrap.is-expanded {
  max-height: none;
}

.fin-rtb-list-wrap--short::after,
.fin-rtb-list-wrap.is-expanded::after {
  display: none;
}

.fin-rtb-list {
  padding: 0 22px;
}

.fin-rtb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cream);
}

.fin-rtb-row:last-child { border-bottom: none; }

.fin-rtb-info {
  flex: 1;
  min-width: 0;
}

.fin-rtb-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.fin-rtb-meta {
  font-size: 12.5px;
  color: var(--stone);
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.fin-rtb-review-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.fin-rtb-footer {
  padding: 14px 22px 16px;
  border-top: 1px solid var(--cream);
  display: flex;
  justify-content: flex-end;
}

.fin-rtb-send-all {
  font-size: 12.5px;
  color: var(--stone);
}

/* ── Billing settings modal options ─────────────────────────────────────── */

.fin-billing-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Billing default picker ─────────────────────────────────────────────── */

.finance-billing-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--cream);
  border-radius: 10px;
  cursor: pointer;
  min-width: 130px;
  transition: border-color 0.12s, background 0.12s;
}

.finance-billing-option:hover { border-color: var(--warm); }

.finance-billing-option.is-selected {
  border-color: var(--ink);
  background: var(--ivory);
}

.finance-billing-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.finance-billing-sub {
  font-size: 11.5px;
  color: var(--stone);
}

@media (max-width: 576px) {
  .finance-title { font-size: var(--font-size-page-title); }
  .finance-stats { grid-template-columns: 1fr 1fr; }
  .finance-stat-value { font-size: 26px; }
  .finance-table > thead > tr > th,
  .finance-table > tbody > tr > td { padding: 10px 14px; }
  .finance-bs-row { padding: 10px 14px; }
  .finance-card-head { padding: 14px 16px 12px; }
  .finance-payout-row { padding: 10px 14px; }
  .finance-search-input { min-width: 0; width: 100%; }
}

/* ────────────────────────────────────────────────────────────
   Error & 404 pages — LessonPen editorial.
   Centered card on warm paper, serif status numeral, accent CTA.
   Shared by views/error.ejs and views/not-found.ejs.
   ──────────────────────────────────────────────────────────── */

.error-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--paper);
}

/* Paywall: no navbar, so fill the whole viewport. */

.error-page--full { min-height: 100vh; }

.error-card {
  width: 100%;
  max-width: 560px;
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 56px 48px;
  text-align: center;
  color: var(--ink);
  font-family: var(--sans);
}

.error-status {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0 0 8px;
}

.error-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 14px;
}

.error-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}

.error-message {
  font-size: 15px;
  line-height: 1.6;
  color: var(--olive);
  margin: 0 auto 28px;
  max-width: 420px;
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.error-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}

.error-btn-brand {
  background: var(--accent);
  color: #faf7ee;
  box-shadow: 0 0 0 1px var(--accent);
}

.error-btn-brand:hover { background: var(--accent-2); color: #faf7ee; box-shadow: 0 0 0 1px var(--accent-2); }

.error-btn-ghost {
  background: transparent;
  color: var(--charcoal);
  box-shadow: 0 0 0 1px var(--ring);
}

.error-btn-ghost:hover { background: var(--sand); color: var(--ink); }

/* Stack trace block — only shown in dev/staging. */

.error-trace {
  margin-top: 32px;
  text-align: left;
  background: var(--night);
  color: #e8e4d6;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-family: var(--mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 320px;
}

.error-trace-label {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a596;
  margin-bottom: 8px;
}

.error-trace pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: inherit;
  font: inherit;
}

/* ────────────────────────────────────────────────────────────
   Verify Email page — enhanced with icon, animation, decoration.
   ──────────────────────────────────────────────────────────── */

.verify-page {
  background: linear-gradient(135deg, var(--paper) 0%, #faf8f5 100%);
  position: relative;
  overflow: hidden;
}

.verify-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(251, 243, 224, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 237, 220, 0.4) 0%, transparent 50%);
}

.verify-card {
  position: relative;
  z-index: 1;
}

.verify-icon-wrapper {
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

.verify-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5ede0 0%, #faf7ee 100%);
  border-radius: 50%;
  border: 2px solid var(--cream);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-size: 48px;
  color: var(--accent);
  animation: float 3s ease-in-out infinite;
}

.verify-icon i {
  position: relative;
  z-index: 2;
}

.verify-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  animation: pulse-ring 2s ease-out infinite;
  opacity: 0;
}

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

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

@media (max-width: 576px) {
  .error-card { padding: 40px 24px; }
  .error-status { font-size: 72px; }
  .error-headline { font-size: 24px; }
  .error-message { font-size: 14px; }

  .verify-icon-wrapper { width: 80px; height: 80px; margin-bottom: 20px; }
  .verify-icon { font-size: 36px; }
}

.notif-pref-card {
  border: 1px solid var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.notif-pref-card .card-header {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.notif-pref-category-label {
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.notif-pref-row {
  background: var(--ivory);
  border-top: 1px solid var(--cream) !important;
  transition: background 0.1s;
}

.notif-pref-row:first-child {
  border-top: none !important;
}

.notif-pref-channels {
  align-items: center;
}

.notif-pref-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}

.notif-pref-channel-label {
  font-size: 11px;
  color: var(--stone);
  white-space: nowrap;
}

.notif-pref-sticky-save {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--cream);
  padding: 12px 0;
  margin-top: 8px;
  z-index: 10;
}

@media (max-width: 576px) {
  .notif-pref-channels {
    gap: 1rem !important;
  }

  .notif-pref-channel {
    min-width: 48px;
  }
}

/* ── Notes page ──────────────────────────────────────────────────────────── */

/* Tabs */

.notes-tabs {
  border-bottom: 1px solid var(--border, #e8e4df);
  gap: 4px;
  margin-bottom: 20px;
}

.notes-tabs .nav-link {
  border: none;
  background: none;
  color: var(--stone, #888);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.notes-tabs .nav-link:hover { color: var(--charcoal, #444); }

.notes-tabs .nav-link.active {
  color: var(--ink, #1a1a1a);
  border-bottom-color: var(--accent, #6b8f71);
  background: none;
}

/* Student filter */

.notes-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.notes-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--stone, #888);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0;
}

.notes-filter-select {
  border: 1px solid var(--border, #e8e4df);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--charcoal, #444);
  background: #fff;
  min-width: 180px;
}

/* Feed */

.notes-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notes-entry-student {
  font-size: 12px;
  font-weight: 600;
  color: var(--olive, #6b8f71);
  text-decoration: none;
}

.notes-entry-student:hover { text-decoration: underline; }

/* ── Media tab ───────────────────────────────────────────────────────────── */

.media-storage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.media-storage-bar-wrap {
  flex: 1;
  max-width: 320px;
  height: 6px;
  background: var(--sand, #f4f1ec);
  border-radius: 6px;
  overflow: hidden;
}

.media-storage-bar {
  height: 100%;
  border-radius: 6px;
  background: var(--accent, #6b8f71);
  transition: width .4s ease, background .3s;
}

.media-storage-bar.warn { background: #e8a838; }

.media-storage-bar.full { background: var(--color-danger, #c0392b); }

.media-storage-label {
  font-size: 12px;
  color: var(--stone, #888);
  white-space: nowrap;
}

.media-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.ml-filter-btn {
  border: none;
  background: var(--sand, #f4f1ec);
  color: var(--charcoal, #444);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ml-filter-btn:hover { background: var(--stone-light, #e6e1da); }

.ml-filter-btn.active { background: var(--ink, #1a1a1a); color: #fff; }

.media-loading {
  text-align: center;
  padding: 48px 0;
  color: var(--stone, #aaa);
  font-size: 24px;
}

.media-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--stone, #aaa);
  font-size: 14px;
}

.ml-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--stone, #888);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 18px 0 8px;
}

.ml-section-label:first-child { margin-top: 0; }

/* Image grid */

.ml-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.ml-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand, #f4f1ec);
}

.ml-image-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform .2s;
}

.ml-image-item:hover img { transform: scale(1.04); }

.ml-image-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* File / link rows */

.ml-row-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ml-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  min-width: 0;
}

.ml-row:hover { background: var(--sand, #f4f1ec); }

.ml-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--sand, #f4f1ec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--charcoal, #444);
}

.ml-row-body { flex: 1; min-width: 0; }

.ml-row-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink, #1a1a1a);
}

.ml-row-sub {
  display: block;
  font-size: 12px;
  color: var(--stone, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Teacher private note (student profile Notes tab) ────────────────────── */

.teacher-note-block {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin-bottom: 20px;
}

.teacher-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}

.teacher-note-status {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #92400e;
  opacity: 0;
  transition: opacity .3s;
}

.teacher-note-status.visible { opacity: 1; }

.teacher-note-textarea {
  width: 100%;
  min-height: 90px;
  border: none;
  background: transparent;
  resize: vertical;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal, #444);
  outline: none;
  padding: 0;
}

.teacher-note-textarea::-moz-placeholder { color: #b45309; opacity: .55; }

.teacher-note-textarea::placeholder { color: #b45309; opacity: .55; }

.teacher-note-meta {
  font-size: 11px;
  color: #b45309;
  margin-top: 6px;
  opacity: .7;
}

.teacher-note-collapsed {
  font-size: 13px;
  color: #b45309;
  opacity: .65;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 2px 0;
  transition: opacity .15s;
}

.teacher-note-collapsed:hover { opacity: 1; }

/* ── Media Sidebar  (.msb-*)
   Reusable panel used on Notes page (embedded) and Today/Schedule (drawer).
   ──────────────────────────────────────────────────────────────────────── */

/* ── Notes page layout (sidebar is drawer, not part of layout) ── */

.notes-page-body {
  display: block;
}

.notes-journal {
  max-width: 100%;
}

/* Empty journal reuses .settings-empty (ivory panel) from settings.css */

/* ── Note entry cards ── */

.notes-entry {
  background: var(--ivory);
  border: 1px solid var(--cream);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.notes-entry.is-editing { cursor: default; }

/* Drag a media-library item over a note to attach it */

.notes-entry.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  background: var(--accent-soft);
}

.notes-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.notes-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notes-entry-date {
  font-size: 12px;
  color: var(--stone);
  font-weight: 500;
}

.notes-entry-subject {
  font-size: 11px;
  background: var(--sand);
  color: var(--charcoal);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 500;
}

.notes-entry-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
  white-space: pre-wrap;
}

.notes-entry-body.is-empty {
  color: var(--stone);
  font-style: italic;
}

.notes-entry-atts { margin-top: 10px; }

/* ── Inline edit mode ── */

.notes-entry-textarea,
.notes-entry-attach,
.notes-entry-edit-actions {
  display: none;
}

.notes-entry.is-editing .notes-entry-body[data-note-display] { display: none; }

.notes-entry.is-editing .notes-entry-textarea { display: block; }

.notes-entry.is-editing .notes-entry-attach { display: flex; }

.notes-entry.is-editing .notes-entry-edit-actions { display: flex; }

.notes-entry:not(.is-editing) .reviews-att-chip-remove { display: none; }

.notes-entry-edit-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── Embedded mode (Notes page sidebar column) ── */

.msb--embedded {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--lp-navbar-h, 56px) + 16px);
  height: calc(100vh - var(--lp-navbar-h, 56px) - 32px);
  display: flex;
  flex-direction: column;
}

/* ── Drawer mode (Today / Schedule) ── */

.msb--drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1070;
  width: 340px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.msb--drawer.is-open {
  pointer-events: all;
  transform: translateX(0);
}

/* ── Backdrop (drawer only) ── */

.msb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.msb--drawer.is-open .msb-backdrop {
  opacity: 1;
  pointer-events: all;
}

/* Non-modal drawer (Notes page): docked side panel with no backdrop, so the
   journal feed behind it stays visible, scrollable, and a drag-drop target. */

.msb--drawer.msb--nonmodal .msb-backdrop { display: none; }

/* ── Panel ── */

.msb-panel {
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.msb--drawer .msb-panel {
  border-left: 1px solid var(--cream);
  box-shadow: -4px 0 24px rgba(26, 24, 20, 0.1);
}

.msb--embedded .msb-panel {
  border: 1px solid var(--cream);
  border-radius: var(--radius-lg);
}

/* ── Header ── */

.msb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--cream);
  flex-shrink: 0;
}

.msb-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.msb-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.msb-link-btn {
  border: none;
  background: none;
  padding: 5px 8px;
  color: var(--stone);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.msb-link-btn:hover { background: var(--sand); color: var(--charcoal); }

.msb-upload-trigger {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.12s;
}

.msb-upload-trigger:hover { background: var(--color-primary-dark); }

.msb-close-btn {
  border: none;
  background: none;
  padding: 5px 8px;
  color: var(--stone);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}

.msb-close-btn:hover { background: var(--sand); color: var(--ink); }

/* Embedded mode has no close affordance on desktop — the panel is always visible */

.msb--embedded .msb-close-btn { display: none; }

/* ── Drop zone ── */

.msb-dropzone {
  margin: 12px 14px 0;
  padding: 14px 12px;
  border: 1.5px dashed var(--ring);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--stone);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.msb-dropzone i { font-size: 20px; }

.msb-dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--charcoal);
}

.msb-panel.msb-drag-over .msb-dropzone {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Upload error banner ── */

.msb-upload-err {
  margin: 8px 14px 0;
  padding: 8px 12px;
  background: #fde8e8;
  border: 1px solid #f5c6c6;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-danger);
  flex-shrink: 0;
}

/* ── Inline add-link form ── */

.msb-link-form {
  margin: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.msb-link-input {
  width: 100%;
  border: 1px solid var(--cream);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--charcoal);
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.msb-link-input:focus { border-color: var(--accent); }

.msb-link-form-actions {
  display: flex;
  gap: 6px;
}

.msb-link-submit {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.msb-link-submit:hover { background: var(--color-primary-dark); }

.msb-link-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.msb-link-cancel {
  border: 1px solid var(--cream);
  background: none;
  color: var(--stone);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.msb-link-cancel:hover { background: var(--sand); }

.msb-link-err {
  font-size: 12px;
  color: var(--color-danger);
  padding: 2px 0;
}

/* ── Filter buttons ── */

.msb-filters {
  display: flex;
  gap: 4px;
  padding: 10px 14px 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.msb-filter {
  border: none;
  background: var(--sand);
  color: var(--charcoal);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.msb-filter:hover { background: var(--warm); }

.msb-filter.active { background: var(--ink); color: #fff; }

/* ── Scrollable content area ── */

.msb-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  overscroll-behavior: contain;
}

.msb-loading {
  text-align: center;
  padding: 36px 0;
  color: var(--stone);
  font-size: 22px;
}

.msb-empty {
  text-align: center;
  padding: 36px 12px;
  color: var(--stone);
  font-size: 13px;
}

.msb-uploading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--sand);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--charcoal);
  margin-bottom: 8px;
}

/* ── Image grid ── */

.msb-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.msb-img-item { position: relative; cursor: grab; }

.msb-img-item:active { cursor: grabbing; }

.msb-img-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sand);
}

.msb-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.2s;
}

.msb-img-item:hover .msb-img-wrap img { transform: scale(1.04); }

.msb-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 20, 0.52);
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
}

.msb-img-item:hover .msb-img-overlay { opacity: 1; }

.msb-img-overlay .msb-attach-btn,
.msb-img-overlay .msb-open-btn,
.msb-img-overlay .msb-delete-btn {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}

.msb-img-overlay .msb-attach-btn:hover,
.msb-img-overlay .msb-open-btn:hover { background: rgba(255, 255, 255, 0.38); }

.msb-img-overlay .msb-delete-btn:hover { background: rgba(181, 57, 42, 0.75); }

.msb-img-overlay .msb-attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.msb-img-label {
  font-size: 10px;
  color: var(--stone);
  text-align: center;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Row list (files / links) ── */

.msb-row-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
  min-width: 0;
  cursor: grab;
}

.msb-row:active { cursor: grabbing; }

.msb-row:hover { background: var(--sand); }

.msb-row-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--charcoal);
}

.msb-row-icon--link { color: var(--accent); }

.msb-row-body {
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.msb-row-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msb-row-sub {
  display: block;
  font-size: 11px;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msb-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.msb-row-actions .msb-attach-btn,
.msb-row-actions .msb-delete-btn {
  border: none;
  background: none;
  color: var(--stone);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.msb-row-actions .msb-attach-btn:hover { background: var(--accent-soft); color: var(--accent); }

.msb-row-actions .msb-delete-btn:hover { background: #fde8e8; color: var(--color-danger); }

.msb-row-actions .msb-attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Storage bar ── */

.msb-storage {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--cream);
  flex-shrink: 0;
}

.msb-storage-track {
  flex: 1;
  height: 4px;
  background: var(--sand);
  border-radius: 4px;
  overflow: hidden;
}

.msb-storage-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.4s ease, background 0.3s;
}

.msb-storage-fill.warn { background: var(--color-warning); }

.msb-storage-fill.full { background: var(--color-danger); }

.msb-storage-label {
  font-size: 11px;
  color: var(--stone);
  white-space: nowrap;
}

/* ── Body lock when drawer is open ── */

body.msb-drawer-open { overflow: hidden; }

/* ── Notes page header (Library button always visible with drawer mode) ── */

.notes-page .page-head-actions--notes-library { display: flex; }

/* ── Responsive ── */

@media (max-width: 768px) {
  .msb--drawer { width: 100vw; }
}