/* ═══════════════════════════════════════════════════════════
   MCschool — main.css
   Single source of truth for all styles.
   Organized: tokens → reset → layout → components → utilities
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Primary (Indigo) */
  --c-primary:        #4F46E5;
  --c-primary-hover:  #4338CA;
  --c-primary-light:  #EEF2FF;
  --c-primary-text:   #4338CA;

  /* Semantic */
  --c-success:        #059669;
  --c-success-light:  #D1FAE5;
  --c-danger:         #DC2626;
  --c-danger-light:   #FEE2E2;
  --c-warning:        #D97706;
  --c-warning-light:  #FEF3C7;

  /* Lesson status (teacher grid) */
  --c-conducted:          #4F46E5;
  --c-conducted-hover:    #4338CA;
  --c-rescheduled:        #D97706;
  --c-rescheduled-hover:  #B45309;
  --c-cancelled:          #9CA3AF;
  --c-cancelled-hover:    #6B7280;
  --c-scheduled:          #F3F4F6;   /* planned — neutral fill */
  --c-scheduled-hover:    #E5E7EB;
  --c-scheduled-border:   #9CA3AF;   /* dashed border */

  /* Text */
  --c-text:   #111827;
  --c-muted:  #6B7280;
  --c-faint:  #9CA3AF;

  /* Surfaces */
  --c-bg:           #F9FAFB;
  --c-surface:      #FFFFFF;
  --c-border:       #E5E7EB;
  --c-border-light: #F3F4F6;

  /* Sidebar (dark indigo) */
  --c-sidebar-bg:     #1E1B4B;
  --c-sidebar-text:   #C7D2FE;
  --c-sidebar-muted:  #818CF8;
  --c-sidebar-hover:  rgba(255,255,255,.07);
  --c-sidebar-active: rgba(99,102,241,.35);

  /* Layout */
  --sidebar-w:  220px;
  --topnav-h:   56px;

  /* Radii */
  --r:    8px;
  --r-sm: 6px;
  --r-xs: 4px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: .82em;
  background: var(--c-border-light);
  padding: .1em .35em;
  border-radius: 3px;
  color: var(--c-text);
}

/* ── 3. Flash Messages ────────────────────────────────────── */
.flash {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  border-left: 3px solid transparent;
}
.flash.success { background: var(--c-success-light); color: #065F46; border-color: var(--c-success); }
.flash.error   { background: var(--c-danger-light);  color: #991B1B; border-color: var(--c-danger); }

/* ── 4. App Root & Layout Wrapper ────────────────────────── */
.app-root {
  display: flex;
  min-height: 100vh;
}

/* Wrapper that shifts right for sidebar, or centers for guest */
.layout-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
}

.layout-wrap--sidebar {
  margin-left: var(--sidebar-w);
}

/* ── 4a. Sidebar (manager) ───────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--c-sidebar-bg);
  color: var(--c-sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: var(--c-primary);
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -.02em;
}

.sidebar-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

.sidebar-nav {
  flex: 1;
  padding: .6rem .65rem 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-sidebar-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .1s, color .1s;
}
.sidebar-link:hover {
  background: var(--c-sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.sidebar-link.active {
  background: var(--c-sidebar-active);
  color: #fff;
  border-left-color: var(--c-sidebar-muted);
}

.sidebar-footer {
  padding: .85rem .75rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-user {
  font-size: .8rem;
  color: var(--c-sidebar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .25rem;
}
.sidebar-logout {
  font-size: .8rem;
  color: var(--c-sidebar-text);
  text-decoration: none;
}
.sidebar-logout:hover { color: #fff; text-decoration: underline; }

/* Logout is a POST form (Django 6 requires POST); button styled as a link. */
.logout-form { display: inline; margin: 0; }
.logout-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* ── 5. Top Nav (teacher / parent) ──────────────────────── */
.topnav {
  height: var(--topnav-h);
  background: var(--c-sidebar-bg);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
  flex-shrink: 0;
}

.topnav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  letter-spacing: -.02em;
  text-decoration: none;
  margin-right: .25rem;
}
.topnav-brand:hover { text-decoration: none; }

.topnav-links { display: flex; gap: .15rem; }
.topnav-links a {
  padding: .35rem .75rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-sidebar-text);
  text-decoration: none;
  transition: background .1s, color .1s;
}
.topnav-links a:hover { background: var(--c-sidebar-hover); color: #fff; text-decoration: none; }
.topnav-links a.active { background: var(--c-sidebar-active); color: #fff; }

.topnav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
}
.topnav-user .topnav-username { color: var(--c-sidebar-muted); }
.topnav-user a, .topnav-user .logout-btn { color: var(--c-sidebar-text); }
.topnav-user a:hover, .topnav-user .logout-btn:hover { color: #fff; text-decoration: underline; }

/* ── 7. Page Content & Header ─────────────────────────────── */
.page-content {
  padding: 1.75rem 2rem;
}

.page-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
}

/* ── 8. Cards ─────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.card-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-primary-text);
  margin-bottom: 1rem;
}

.card--dashed {
  border: 2px dashed #A5B4FC;
  background: var(--c-primary-light);
  box-shadow: none;
}
.card--dashed .card-title { color: var(--c-primary); }

/* ── 9. Stat Cards ────────────────────────────────────────── */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  flex: 1 1 10rem;
  padding: 1rem 1.25rem;
  background: var(--c-surface);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  border-top: 2px solid transparent;
}
.stat-card .stat-label {
  font-size: .7rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 500;
  margin-bottom: .3rem;
}
.stat-card .stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-card.stat--primary { border-top-color: var(--c-primary); }
.stat-card.stat--primary .stat-value { color: var(--c-primary); }
.stat-card.stat--danger  { border-top-color: var(--c-danger); }
.stat-card.stat--danger  .stat-value { color: var(--c-danger); }
.stat-card.stat--success { border-top-color: var(--c-success); }
.stat-card.stat--success .stat-value { color: var(--c-success); }

/* ── 10. Month Navigation ─────────────────────────────────── */
.month-nav {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem;
}
.month-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-sm);
  color: var(--c-primary);
  font-size: 1.05rem;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: background .1s, border-color .1s;
  flex-shrink: 0;
}
.month-nav__arrow:hover {
  background: var(--c-primary-light);
  border-color: #A5B4FC;
  text-decoration: none;
}
.month-nav__label {
  font-size: .975rem;
  font-weight: 600;
  min-width: 9.5rem;
  text-align: center;
  color: var(--c-text);
}

/* ── 11. Tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.data-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  border-radius: var(--r);
  overflow: hidden;
  font-size: .875rem;
}
.data-table thead th {
  background: var(--c-sidebar-bg);
  color: #A5B4FC;
  padding: .6rem .85rem;
  font-size: .7rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.data-table thead th.col-r { text-align: right; }
.data-table tbody tr:nth-child(even) { background: var(--c-bg); }
.data-table tbody tr:hover { background: var(--c-primary-light); }
.data-table td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--c-border-light);
  vertical-align: middle;
}
.data-table td.col-r {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table td.col-actions {
  white-space: nowrap;
  text-align: right;
}
.data-table tfoot td {
  padding: .65rem .85rem;
  font-weight: 600;
  font-size: .9rem;
  border-top: 2px solid var(--c-border);
  background: var(--c-surface);
}

/* Planned (not-yet-conducted) rows: prospective charge, dashed/muted accent. */
.data-table tbody tr.row-planned td {
  color: var(--c-muted);
  border-bottom: 1px dashed #C7D2FE;
}
.data-table tbody tr.row-planned td:first-child {
  box-shadow: inset 3px 0 0 #A5B4FC;
}

/* Control screen section headings */
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 2rem 0 .75rem;
}
.subsection-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 1.25rem 0 .5rem;
}

/* Attention rows (e.g. Control screen: no plan / unmarked lessons). */
.data-table tbody tr.row-warn td { background: var(--c-warning-light); }
.data-table tbody tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--c-warning); }
.flag-ok  { color: var(--c-success); font-weight: 700; }
.flag-bad { color: var(--c-danger);  font-weight: 700; }

/* Amount colouring */
.amt-pos  { color: var(--c-success); font-weight: 600; }
.amt-neg  { color: var(--c-danger);  font-weight: 600; }
.amt-zero { color: var(--c-muted); }

/* ── 12. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .1s, box-shadow .1s, border-color .1s;
}
.btn:hover { text-decoration: none; }

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

.btn-success   { background: var(--c-success);       color: #fff; }
.btn-success:hover   { background: #047857; }

.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-secondary:hover { background: var(--c-bg); }

.btn-danger    { background: var(--c-danger-light); color: var(--c-danger); border-color: #FECACA; }
.btn-danger:hover    { background: #FECACA; }

.btn-sm { padding: .3rem .65rem; font-size: .8rem; }

.btn[disabled], .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 13. Forms ────────────────────────────────────────────── */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}

.field-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 12rem;
}

.field-group label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field-group input,
.field-group select,
.field-group textarea {
  padding: .5rem .7rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color .12s, box-shadow .12s;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.field-group .errorlist {
  margin: .3rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-danger);
  font-size: .78rem;
}
.field-group .helptext {
  font-size: .75rem;
  color: var(--c-faint);
  margin-top: .2rem;
}

.form-hint {
  font-size: .82rem;
  color: var(--c-muted);
  margin: -.25rem 0 .75rem;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

/* ── 14. Enrollment Cards ─────────────────────────────────── */
.enr-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  background: var(--c-bg);
}
.enr-card-title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--c-text);
  margin-bottom: .6rem;
}
.enr-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .6rem;
}

.enr-slot {
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  margin-bottom: .5rem;
}
.enr-slot.required { border-color: #A5B4FC; }
.enr-slot-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

/* ── 15. Member Cards (groups) ────────────────────────────── */
.member-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: .6rem 1rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--c-bg);
}
.member-name { flex: 1; font-size: .875rem; }

/* ── 16. Subject List Rows ────────────────────────────────── */
.subject-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--c-border-light);
}
.subject-row:last-child { border-bottom: none; }
/* subject-row input may not have an explicit class (rendered by Django widget) */
.subj-name-input,
.subject-row input[type=text] {
  padding: .4rem .65rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  font-size: .875rem;
  font-family: inherit;
  flex: 1;
  min-width: 0;
  background: var(--c-surface);
  color: var(--c-text);
}
.subj-name-input:focus,
.subject-row input[type=text]:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.enr-badge {
  font-size: .75rem;
  color: var(--c-faint);
  white-space: nowrap;
  min-width: 5rem;
  text-align: right;
}

/* ── 17. Balance Card (parent) ────────────────────────────── */
.balance-card {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.balance-card.positive { background: var(--c-success-light); color: #065F46; }
.balance-card.negative { background: var(--c-danger-light);  color: #991B1B; }
.balance-card.zero     { background: var(--c-border-light);  color: var(--c-muted); }

/* Two parent cards: real balance "now" + forecast "to pay for next month". */
.parent-cards {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.money-card {
  flex: 1 1 14rem;
  padding: 1rem 1.25rem;
  background: var(--c-surface);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  border-top: 3px solid var(--c-border);
}
.money-card__label {
  font-size: .7rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 500;
  margin-bottom: .35rem;
}
.money-card__value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.money-card__note { font-size: .85rem; color: var(--c-muted); margin-top: .15rem; }
/* Real-balance card colours by sign. */
.money-card.positive { border-top-color: var(--c-success); }
.money-card.positive .money-card__value { color: var(--c-success); }
.money-card.negative { border-top-color: var(--c-danger); }
.money-card.negative .money-card__value { color: var(--c-danger); }
.money-card.zero .money-card__value { color: var(--c-muted); }
/* Forecast card: prospective, dashed accent + primary figure. */
.money-card.forecast { border-top-style: dashed; border-top-color: #A5B4FC; }
.money-card.forecast .money-card__value { color: var(--c-primary); }
.money-card.forecast .btn { margin-top: .6rem; }

/* ── 18. Child Tabs (parent) ──────────────────────────────── */
.child-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.child-tabs a {
  padding: .4rem 1rem;
  border-radius: 20px;
  font-size: .875rem;
  font-weight: 500;
  background: var(--c-border-light);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  text-decoration: none;
  transition: background .1s;
}
.child-tabs a:hover:not(.active) { background: var(--c-border); text-decoration: none; }
.child-tabs a.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ── 19. Login ────────────────────────────────────────────── */
.login-wrap {
  width: 100%;
  max-width: 380px;
  background: var(--c-surface);
  padding: 2.5rem 2.25rem;
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.login-wrap h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  color: var(--c-text);
}
.login-wrap .login-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.login-wrap input[type=text],
.login-wrap input[type=password] {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
  margin-bottom: 1.1rem;
  transition: border-color .12s, box-shadow .12s;
}
.login-wrap input:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
.login-wrap .btn-submit {
  display: block;
  width: 100%;
  padding: .65rem;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: .5rem;
  transition: background .1s;
}
.login-wrap .btn-submit:hover { background: var(--c-primary-hover); }
.login-error {
  color: var(--c-danger);
  font-size: .85rem;
  margin-bottom: .85rem;
  padding: 0;
  list-style: none;
}

/* ── 20. Teacher Grid ─────────────────────────────────────── */

/* Mode switch (fact / plan) */
.mode-switch {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  background: var(--c-border-light);
  border-radius: 20px;
  padding: .25rem;
  margin-bottom: .9rem;
}
.mode-option {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 16px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}
.mode-option input[type=radio] { display: none; }
.mode-option--active {
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: var(--sh-xs);
}

/* Section header rows (Індивідуальні / Group name) */
.section-header-row { background: var(--c-border-light) !important; }
.section-header-row:hover { background: var(--c-border-light) !important; }
.section-header {
  padding: .35rem .85rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.group-header { color: var(--c-primary-text); }
.group-header .miro-link { margin-left: .5rem; font-size: .75rem; font-weight: 600; }

.grid-wrap { overflow-x: auto; }

.attendance-table {
  border-collapse: collapse;
  min-width: 100%;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  border-radius: var(--r);
  overflow: hidden;
}
.attendance-table thead th {
  background: var(--c-sidebar-bg);
  color: #A5B4FC;
  padding: .45rem .35rem;
  font-size: .68rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.attendance-table thead th.name-col {
  text-align: left;
  padding-left: .85rem;
  min-width: 170px;
}
.attendance-table thead th.total-col { min-width: 3.5rem; }

.attendance-table tbody tr:nth-child(even) { background: var(--c-bg); }
.attendance-table tbody tr:hover { background: var(--c-primary-light); }

td.name-cell {
  padding: .5rem .85rem;
  font-size: .875rem;
  white-space: nowrap;
}
td.name-cell small {
  display: block;
  font-size: .75rem;
  color: var(--c-muted);
  margin-top: .05rem;
}

/* Miro board link + inline editor inside the teacher grid name cell */
.miro-cell {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
  font-size: .72rem;
}
.miro-link {
  text-decoration: none;
  color: var(--c-primary, #2563EB);
  font-weight: 600;
}
.miro-link:hover { text-decoration: underline; }
.miro-add-btn,
.miro-edit-btn,
.miro-save-btn,
.miro-cancel-btn {
  cursor: pointer;
  border: 1px solid var(--c-border-light);
  background: #fff;
  border-radius: 4px;
  padding: 0 .3rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--c-muted);
}
.miro-add-btn:hover,
.miro-edit-btn:hover,
.miro-save-btn:hover,
.miro-cancel-btn:hover { background: var(--c-bg); }
.miro-form {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.miro-form .miro-input {
  width: 11rem;
  font-size: .72rem;
  padding: .1rem .3rem;
}

td.day-cell {
  width: 2.2rem;
  height: 2.2rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--c-border-light);
  transition: background .08s;
}
td.day-cell:hover { background: #BFDBFE; }

td.day-cell.conducted       { background: var(--c-conducted);       border-color: var(--c-conducted); }
td.day-cell.conducted:hover { background: var(--c-conducted-hover); }

td.day-cell.rescheduled       { background: var(--c-rescheduled);       border-color: var(--c-rescheduled); }
td.day-cell.rescheduled:hover { background: var(--c-rescheduled-hover); }

td.day-cell.cancelled       { background: var(--c-cancelled);       border-color: var(--c-cancelled); }
td.day-cell.cancelled:hover { background: var(--c-cancelled-hover); }

/* Substituted away — this teacher's slot, now taught by someone else. Locked. */
td.day-cell.substituted_away {
  background: repeating-linear-gradient(
    45deg, #E5E7EB, #E5E7EB 4px, #F3F4F6 4px, #F3F4F6 8px
  );
  border-color: var(--c-faint);
  cursor: not-allowed;
}
td.day-cell.substituted_away:hover { background: repeating-linear-gradient(
    45deg, #E5E7EB, #E5E7EB 4px, #F3F4F6 4px, #F3F4F6 8px
  ); }
td.day-cell.substituted_away .status-icon { color: var(--c-muted); }

/* Substitution labels + rows */
.sub-tag {
  display: inline-block;
  padding: 0 .35rem;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 600;
  background: var(--c-warning-light);
  color: var(--c-warning);
}
.section-header-row--sub { background: var(--c-warning-light) !important; }
.section-header--sub { color: var(--c-warning) !important; }
tr.sub-grid-row td.name-cell { box-shadow: inset 3px 0 0 var(--c-warning); }

/* Planned — neutral, dashed border + clock icon */
td.day-cell.planned {
  background: var(--c-scheduled);
  border: 1px dashed var(--c-scheduled-border);
}
td.day-cell.planned:hover { background: var(--c-scheduled-hover); }

/* Legacy alias (kept for compatibility) */
td.day-cell.scheduled {
  background: var(--c-scheduled);
  border: 1px dashed var(--c-scheduled-border);
}
td.day-cell.scheduled:hover { background: var(--c-scheduled-hover); }

.status-icon {
  display: block;
  font-size: .75rem;
  line-height: 1;
  color: var(--c-muted);
}
td.day-cell.planned .status-icon { color: var(--c-scheduled-border); }
td.day-cell.conducted .status-icon { color: #fff; }
td.day-cell.cancelled .status-icon { color: #fff; }
td.day-cell.rescheduled .status-icon { color: #fff; }

/* Hover menu — shown on td:hover, hidden otherwise.
   Positioned by JS as position:fixed (see grid.html) so it can escape the
   .grid-wrap scroll container's clipping. The CSS here is the fallback. */
.day-cell { position: relative; }

.cell-menu {
  display: none;
  position: absolute;
  top: 100%;           /* flush with the cell — no dead gap to traverse */
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  box-shadow: var(--sh);
  padding: .3rem .35rem;
  flex-direction: column;
  gap: .2rem;
  min-width: 5.5rem;
}
/* Transparent bridge so moving the cursor from the cell into the menu never
   crosses a non-hovered dead zone (otherwise the menu would hide mid-travel). */
.cell-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
/* When JS flips the menu above the cell, the bridge belongs on the bottom edge. */
.cell-menu--above::before { top: auto; bottom: -8px; }
.day-cell:hover .cell-menu,
.cell-menu:hover { display: flex; }

.cell-menu__units {
  display: flex;
  gap: .15rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: .1rem;
}
.cell-menu__actions {
  display: flex;
  gap: .15rem;
}

.cell-menu__btn {
  padding: .18rem .3rem;
  font-size: .72rem;
  font-family: inherit;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: background .08s;
  white-space: nowrap;
}
.cell-menu__btn:hover { background: var(--c-bg); }
.cell-menu__btn.active {
  background: var(--c-primary-light);
  border-color: #A5B4FC;
  color: var(--c-primary);
  font-weight: 600;
}
.cell-menu__btn--danger { color: var(--c-danger); border-color: #FECACA; }
.cell-menu__btn--danger:hover { background: var(--c-danger-light); }
.cell-menu__btn--warn { color: var(--c-warning); border-color: #FDE68A; }
.cell-menu__btn--warn:hover { background: var(--c-warning-light); }
.cell-menu__btn--del { color: var(--c-muted); }
.cell-menu__btn--del:hover { background: var(--c-danger-light); color: var(--c-danger); }
.cell-menu__att {
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: .1rem;
}
.cell-menu__btn--att { width: 100%; color: var(--c-primary); }
.cell-menu__btn--att:hover { background: var(--c-primary-light); }

/* Group attendance panel (expandable, stats only) */
.group-att-row td { padding: 0 !important; border-bottom: none; }
.group-att-row:hover { background: transparent !important; }
.group-att-cell { background: var(--c-bg); }
.group-att-cell:empty, .group-att-cell > div:empty { padding: 0; }

.group-att-panel {
  padding: .85rem 1rem;
  background: var(--c-primary-light);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm);
  margin: .25rem .5rem .5rem;
}
.group-att-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}
.group-att-title { font-size: .82rem; font-weight: 600; color: var(--c-primary-text); }
.group-att-saved { font-size: .78rem; color: var(--c-success); font-weight: 600; }
.group-att-close {
  margin-left: auto;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--c-muted);
  font-size: .9rem;
  line-height: 1;
}
.group-att-close:hover { color: var(--c-danger); }

.group-att-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .25rem .75rem;
  margin: 0 0 .65rem;
  padding: 0;
}
.group-att-item label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  cursor: pointer;
}
.group-att-actions { display: flex; }

.units-badge {
  display: block;
  font-size: .58rem;
  color: #fff;
  line-height: 1;
  margin-top: .1rem;
  opacity: .9;
}

td.total-cell {
  text-align: center;
  font-weight: 600;
  font-size: .875rem;
  padding: 0 .5rem;
  color: var(--c-primary);
}

.no-students { color: var(--c-muted); padding: 2rem 0; font-size: .9rem; }

/* htmx loading: dim the toggling row */
tr.htmx-request td.day-cell { opacity: .45; pointer-events: none; }

/* ── 20b. Manager substitution (schedule) ─────────────────── */
.col-nowrap { white-space: nowrap; }
.sub-form {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.sub-select {
  padding: .3rem .5rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  font-size: .82rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
  max-width: 12rem;
}
.sub-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--c-warning-light);
  color: var(--c-warning);
}

/* Neutral inline label, e.g. "Група" marker in the parent lesson list. */
.tag {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
  background: var(--c-primary-light);
  color: var(--c-primary-text);
}

/* Finance charts */
.chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chart-presets { display: flex; gap: .4rem; }
.chart-range-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--c-muted);
}
.chart-range-form input[type="month"] { padding: .3rem .45rem; }
.chart-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  max-width: 980px;
}

/* Salary screen: per-teacher adjustments detail row */
.salary-detail-row td {
  padding: 0 .9rem .5rem;
  background: var(--c-bg);
}
.salary-adj summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--c-muted);
  padding: .25rem 0;
}
.salary-adj__body { padding: .35rem 0 .5rem; }
.salary-adj__list {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  font-size: .85rem;
}
.salary-adj__list li { padding: .15rem 0; }
.salary-adj__form {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}
.salary-total-row td {
  border-top: 2px solid var(--c-border);
  background: var(--c-surface);
}

/* Weekday checkbox picker (group month-plan builder).
   Django's CheckboxSelectMultiple renders an outer <div> of per-option <div>s. */
.weekday-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
}
.weekday-picker label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 500;
  cursor: pointer;
}

/* ── 21. Utilities ─────────────────────────────────────────── */
.text-muted   { color: var(--c-muted) !important; }
.text-faint   { color: var(--c-faint) !important; }
.text-danger  { color: var(--c-danger) !important; }
.text-success { color: var(--c-success) !important; }
.text-sm      { font-size: .82rem; }

.empty-state {
  color: var(--c-muted);
  padding: 1.5rem 0;
  font-size: .9rem;
}

.mt-sm   { margin-top: .5rem; }
.mb-sm   { margin-bottom: .5rem; }
.mb-md   { margin-bottom: 1rem; }
.mb-lg   { margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   22. Teacher grid — redesign (scoped under .ds, design-system tokens)

   PURELY VISUAL. All HTMX hooks (hx-*, endpoints), element ids, the day-cell
   status classes, .cell-menu mechanics (display/position/bridge) and the
   mode-switch JS toggles are untouched — those live on the legacy section-20
   rules above, which still apply. These .ds-scoped rules only override colour,
   radius, shadow and spacing, winning by specificity on the teacher page (which
   is wrapped in .ds). Parent screens (no .ds) keep the legacy look.
   INVARIANT: no money is introduced — this is styling only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Teacher top bar — light design-system header (replaces the dark .topnav) ─ */
.ds-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.ds-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.ds-topbar__brand:hover { text-decoration: none; }
.ds-topbar__nav { display: flex; gap: .25rem; }
.ds-topbar__link {
  padding: .45rem .85rem;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.ds-topbar__link:hover { background: var(--bg-secondary); color: var(--text); text-decoration: none; }
.ds-topbar__link.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.ds-topbar__spacer { flex: 1; }
.ds-topbar__user { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }
.ds-topbar__logout { margin: 0; }

/* ── Month navigation — rounded brand buttons ─────────────────────────────── */
.ds .month-nav { gap: .5rem; margin-bottom: 1.25rem; }
.ds .month-nav__arrow {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  transition: background .12s, border-color .12s, color .12s;
}
.ds .month-nav__arrow:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}
.ds .month-nav__label {
  font-weight: 600;
  color: var(--text);
  min-width: 9.5rem;
}

/* ── Mode switch — segmented pill on --brand ──────────────────────────────── */
.ds .mode-switch {
  background: var(--bg-tertiary);
  border-radius: var(--r-pill);
  padding: .25rem;
  gap: .2rem;
  margin-bottom: 1rem;
}
.ds .mode-option {
  padding: .35rem 1rem;
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background .12s, color .12s, box-shadow .12s;
}
.ds .mode-option--active {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ── Month summary cards (hours/counts only — INVARIANT safe) ──────────────── */
.ds .stats-row { gap: 1rem; margin-bottom: 1.5rem; }
.ds .stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border-top: 0;
  padding: 1rem 1.25rem;
}
.ds .stat-card .stat-label {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: .8125rem;
  font-weight: 500;
}
.ds .stat-card .stat-value { color: var(--brand); }

/* ── Grid container — a single rounded card ───────────────────────────────── */
.ds .grid-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;          /* keep horizontal scroll; menu is position:fixed */
}
.ds .attendance-table {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.ds .attendance-table thead th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--border);
}
.ds .attendance-table thead th.name-col {
  color: var(--text-secondary);
  padding-left: 1rem;
}
.ds .attendance-table thead th.total-col { color: var(--brand); }
.ds .attendance-table tbody tr:nth-child(even) { background: transparent; }
.ds .attendance-table tbody tr:hover { background: var(--brand-tint-soft); }

.ds td.name-cell { color: var(--text); }
.ds td.name-cell small { color: var(--text-secondary); }

/* ── Hours total column — brand accent ────────────────────────────────────── */
.ds td.total-cell {
  color: var(--brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ds .no-students { color: var(--text-secondary); }

/* ── Day cells — tiles, not solid squares ─────────────────────────────────────
   The coloured tile is painted by an ::after pseudo-element (inset + rounded),
   NOT a wrapper element, so JS (closest('td.day-cell'), :scope > .cell-menu) and
   the td's own hx-* toggle are completely unaffected. Legacy solid fills are
   neutralised below, then redrawn as tiles. Status class names are unchanged. */
.ds td.day-cell {
  border: 1px solid var(--border);
  background: transparent;
}
.ds td.day-cell:hover { background: var(--brand-tint-soft); }

/* Cancel legacy solid backgrounds so only the tile shows */
.ds td.day-cell.conducted,
.ds td.day-cell.planned,
.ds td.day-cell.scheduled,
.ds td.day-cell.cancelled,
.ds td.day-cell.rescheduled {
  background: transparent;
  border: 1px solid var(--border);
}

/* Shared tile geometry */
.ds td.day-cell.conducted::after,
.ds td.day-cell.planned::after,
.ds td.day-cell.scheduled::after,
.ds td.day-cell.cancelled::after,
.ds td.day-cell.rescheduled::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  z-index: 0;
  pointer-events: none;
}

/* Conducted — brand violet tile */
.ds td.day-cell.conducted::after { background: var(--brand); }
.ds td.day-cell.conducted:hover::after { background: var(--brand-hover); }

/* Planned — dashed brand frame with clock icon */
.ds td.day-cell.planned::after,
.ds td.day-cell.scheduled::after {
  background: var(--brand-tint-soft);
  border: 1px dashed var(--brand);
}
.ds td.day-cell.planned:hover::after,
.ds td.day-cell.scheduled:hover::after { background: var(--brand-tint); }

/* Cancelled — muted grey tile with ✕ */
.ds td.day-cell.cancelled::after {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
}

/* Rescheduled — amber tile with ↻ */
.ds td.day-cell.rescheduled::after {
  background: var(--warning-bg);
  border: 1px solid #f0d9a8;
}

/* Substituted away — locked hatch, not ours to mark */
.ds td.day-cell.substituted_away {
  background: repeating-linear-gradient(
    45deg, var(--bg-tertiary), var(--bg-tertiary) 4px,
    var(--bg-secondary) 4px, var(--bg-secondary) 8px
  );
  border-color: var(--border);
}

/* Icons / units sit above the tile */
.ds .status-icon,
.ds .units-badge { position: relative; z-index: 1; }
.ds td.day-cell.planned .status-icon,
.ds td.day-cell.scheduled .status-icon { color: var(--brand); }
.ds td.day-cell.conducted .status-icon,
.ds td.day-cell.conducted .units-badge { color: #fff; }
.ds td.day-cell.cancelled .status-icon { color: var(--text-secondary); }
.ds td.day-cell.rescheduled .status-icon { color: var(--warning-text); }
.ds td.day-cell.substituted_away .status-icon { color: var(--text-tertiary); }

/* ── Hover menu — design-system card with pop shadow ──────────────────────────
   ONLY colour / border / radius / shadow are set here. Display, position, the
   ::before hover bridge and the --above flip stay on the legacy rules so the
   open/keep/flip mechanics are byte-for-byte unchanged. */
.ds .cell-menu {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: .35rem .4rem;
}
.ds .cell-menu__units,
.ds .cell-menu__att { border-bottom-color: var(--border); }
.ds .cell-menu__btn {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  transition: background .1s, border-color .1s, color .1s;
}
.ds .cell-menu__btn:hover { background: var(--bg-secondary); }
.ds .cell-menu__btn.active {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
}
.ds .cell-menu__btn--danger { color: var(--danger-text); border-color: var(--danger-bg); }
.ds .cell-menu__btn--danger:hover { background: var(--danger-bg); }
.ds .cell-menu__btn--warn { color: var(--warning-text); border-color: var(--warning-bg); }
.ds .cell-menu__btn--warn:hover { background: var(--warning-bg); }
.ds .cell-menu__btn--del { color: var(--text-tertiary); }
.ds .cell-menu__btn--del:hover { background: var(--danger-bg); color: var(--danger-text); }
.ds .cell-menu__btn--att { color: var(--brand); }
.ds .cell-menu__btn--att:hover { background: var(--brand-tint); }

/* ── Section + group headers ──────────────────────────────────────────────── */
.ds .section-header-row,
.ds .section-header-row:hover { background: var(--bg-secondary) !important; }
.ds .section-header {
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: .05em;
}
.ds .group-header-row,
.ds .group-header-row:hover { background: var(--brand-tint-soft) !important; }
.ds .group-header { color: var(--brand); }
.ds .group-header .miro-link { color: var(--brand); }

/* ── Substitution — brand pill + accent ("заміна за X") ───────────────────── */
.ds .section-header-row--sub,
.ds .section-header-row--sub:hover { background: var(--brand-tint-soft) !important; }
.ds .section-header--sub { color: var(--brand) !important; }
.ds tr.sub-grid-row td.name-cell { box-shadow: inset 3px 0 0 var(--brand); }
.ds .sub-tag {
  padding: .1rem .55rem;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 600;
  background: var(--brand-tint);
  color: var(--brand);
}

/* ── Group attendance panel (stats only — INVARIANT safe) ─────────────────── */
.ds .group-att-cell { background: var(--bg-secondary); }
.ds .group-att-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ds .group-att-title { color: var(--brand); }
.ds .group-att-saved { color: var(--success-text); }
.ds .group-att-close { color: var(--text-tertiary); }
.ds .group-att-close:hover { color: var(--danger-text); }

/* ── Miro link + inline editor ────────────────────────────────────────────── */
.ds .miro-link { color: var(--brand); font-weight: 600; }
.ds .miro-add-btn,
.ds .miro-edit-btn,
.ds .miro-save-btn,
.ds .miro-cancel-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
}
.ds .miro-add-btn:hover,
.ds .miro-edit-btn:hover,
.ds .miro-save-btn:hover,
.ds .miro-cancel-btn:hover { background: var(--bg-secondary); }
.ds .miro-form .miro-input {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: .2rem .4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Parent cabinet — light design-system view (balances + lesson calendar).
   INVARIANT does NOT apply to the parent: they DO see their own child's money.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Child selector — segmented pills ─────────────────────────────────────── */
.ds .child-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ds .child-tab {
  padding: .45rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.ds .child-tab:hover { background: var(--bg-secondary); color: var(--text); text-decoration: none; }
.ds .child-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Two payment cards ────────────────────────────────────────────────────── */
.ds .parent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.ds .money-card { display: flex; flex-direction: column; gap: .35rem; }
.ds .money-card--forecast {
  border-color: transparent;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--brand-tint);
  background: linear-gradient(180deg, var(--brand-tint-soft), var(--bg) 55%);
}
.ds .money-card__label { font-size: .8125rem; font-weight: 500; color: var(--text-secondary); }
.ds .money-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .money-card__value.is-success { color: var(--success-text); }
.ds .money-card__value.is-danger  { color: var(--danger-text); }
.ds .money-card__value.is-brand   { color: var(--brand); }
.ds .money-card__value.is-muted   { color: var(--text-tertiary); }
.ds .money-card__foot { margin-top: .15rem; display: flex; align-items: center; gap: .5rem; }

/* ── Inline tags inside the lesson table ──────────────────────────────────── */
.ds .tag {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
}
.ds .tag-group { background: var(--bg-tertiary); color: var(--text-secondary); }
.ds .tag-sub {
  margin-left: .4rem;
  background: var(--brand-tint);
  color: var(--brand);
}

/* ── Lesson table — planned rows muted with a dashed brand edge ───────────── */
.ds .lesson-table tr.row-planned td { color: var(--text-tertiary); }
.ds .lesson-table tr.row-planned td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}
.ds .lesson-table tbody tr.row-planned:hover td { background: var(--brand-tint-soft); }

/* ── Table footer — separate "списано" / "до сплати" lines ────────────────── */
.ds .lesson-table tfoot td {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.ds .lesson-table .lesson-foot--conducted td.col-r { color: var(--success-text); }
.ds .lesson-table .lesson-foot--planned   td.col-r { color: var(--brand); }

/* ═══ Parent cabinet — payment redesign ═══════════════════════════════════════
   Centered container · two-column grid (payment card | balance + methods).
   Visual only; every figure is rendered straight from ChildView context. */
.ds.parent-cabinet { max-width: 1120px; margin: 0 auto; }

.ds .pc-head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.ds .pc-head__name { margin: 0; font-size: 1.5rem; }
.ds .pc-head__charged { font-size: .9375rem; }

.ds .pc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.ds .pc-side { display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 880px) {
  .ds .pc-grid { grid-template-columns: 1fr; }
}

/* ── Left: payment card ───────────────────────────────────────────────────── */
.ds .pay-card { padding: 1.5rem; }
.ds .pay-card__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem;
}
.ds .pay-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
}
.ds .pay-card__icon .icon { width: 1.2rem; height: 1.2rem; }
.ds .pay-card__title { font-size: 1.0625rem; font-weight: 600; }

/* Figure box — the call-to-pay amount on a tinted panel. */
.ds .pay-figure {
  background: var(--brand-tint-soft);
  border: 1px solid var(--brand-tint);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.ds .pay-figure--muted   { background: var(--bg-secondary); border-color: var(--border); }
.ds .pay-figure--success { background: var(--success-bg);   border-color: transparent; }
.ds .pay-figure__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  margin-bottom: .35rem;
}
.ds .pay-figure__value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .pay-figure__cur { font-size: 1.1rem; font-weight: 600; color: var(--text-tertiary); }
.ds .pay-figure__missing { font-size: 1.25rem; font-weight: 700; color: var(--text-tertiary); }
.ds .pay-figure__covered { font-size: 1.75rem; font-weight: 800; color: var(--success-text); margin-bottom: .4rem; }

/* Presets — two-line selectable cards that fill the amount field. */
.ds .pay-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-bottom: 1rem;
}
.ds .pay-preset {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
  text-align: left;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.ds .pay-preset:hover { border-color: var(--border-strong); }
.ds .pay-preset.is-active {
  border-color: var(--brand);
  background: var(--brand-tint-soft);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.ds .pay-preset__label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.ds .pay-preset__amount { font-size: 1.0625rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ds .pay-preset.is-active .pay-preset__amount { color: var(--brand); }

/* Amount field — framed row: label left, large editable number + zł suffix. */
.ds .pay-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .85rem .5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  margin-bottom: .6rem;
  transition: border-color .15s, box-shadow .15s;
}
.ds .pay-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ds .pay-field__label { font-size: .9375rem; color: var(--text-secondary); }
.ds .pay-field__control { display: inline-flex; align-items: baseline; gap: .35rem; }
.ds .pay-amount-input {
  width: 7.5rem;
  border: 0;
  background: transparent;
  text-align: right;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 0;
  -moz-appearance: textfield;
}
.ds .pay-amount-input:focus { outline: none; }
.ds .pay-amount-input::-webkit-outer-spin-button,
.ds .pay-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds .pay-field__suffix { font-size: .9375rem; font-weight: 600; color: var(--text-tertiary); }

.ds .pay-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--text-tertiary);
  margin: 0 0 1rem;
}
.ds .pay-hint .icon { width: 1rem; height: 1rem; }

.ds .pay-submit { width: 100%; padding: .95rem 1.25rem; font-size: 1rem; gap: .5rem; }
.ds .pay-submit__amount { font-weight: 700; }

.ds .pay-via {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.ds .pay-via__label { font-size: .8125rem; }
.ds .pay-via__item {
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Payment result pages (success / cancel) ──────────────────────────────── */
.ds .pay-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  margin: 2rem auto 0;
  max-width: 480px;
  padding: 2.25rem 1.5rem;
}
.ds .pay-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
}
.ds .pay-result__icon .icon { width: 1.75rem; height: 1.75rem; }
.ds .pay-result__icon.is-success { background: var(--success-bg, #e7f6ec); color: var(--success-text); }
.ds .pay-result__icon.is-muted { background: var(--bg-secondary); color: var(--text-tertiary); }
.ds .pay-result__title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.ds .pay-result__text { font-size: .9375rem; margin: 0; }
.ds .pay-result__btn { margin-top: .5rem; }

/* ── Right: balance card — tinted by sign (debt / prepaid) ────────────────── */
.ds .balance-card { display: flex; flex-direction: column; gap: .35rem; }
.ds .balance-card.is-debt    { background: var(--danger-bg);  border-color: transparent; }
.ds .balance-card.is-prepaid { background: var(--success-bg); border-color: transparent; }
.ds .balance-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.ds .balance-card__label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
}
.ds .balance-card__value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ds .balance-card__value.is-success { color: var(--success-text); }
.ds .balance-card__value.is-danger  { color: var(--danger-text); }
.ds .balance-card__cur { font-size: .95rem; font-weight: 600; opacity: .7; }
.ds .balance-card__note {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: .25rem;
}
.ds .balance-card__note .icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }

/* ── Right: payment methods — informational list ──────────────────────────── */
.ds .methods-card__title {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  margin-bottom: .85rem;
}
.ds .methods-list { display: flex; flex-direction: column; gap: .5rem; }
.ds .method-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ds .method-row__name { font-size: .875rem; font-weight: 600; color: var(--text); }
.ds .method-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.ds .method-ico .icon { width: 1.05rem; height: 1.05rem; }
.ds .method-ico--card { background: var(--brand); }
.ds .method-ico--blik { background: #ff6b35; }
.ds .method-ico--p24  { background: #d6336c; font-size: .62rem; }
.ds .methods-card__note { margin: .85rem 0 0; font-size: .8125rem; }

/* ── Collapsed lessons section ────────────────────────────────────────────── */
.ds .lessons-details {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: 0 1.25rem;
  margin-bottom: 1.5rem;
}
.ds .lessons-details[open] { padding-bottom: 1.25rem; }
.ds .lessons-details__summary {
  cursor: pointer;
  padding: 1rem .25rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ds .lessons-details__summary::-webkit-details-marker { display: none; }
.ds .lessons-details__summary::before {
  content: "▸";
  color: var(--text-tertiary);
  font-size: .8125rem;
  transition: transform .12s;
}
.ds .lessons-details[open] .lessons-details__summary::before { transform: rotate(90deg); }
.ds .lessons-details__title { font-size: .9375rem; font-weight: 600; color: var(--text); }
.ds .lessons-details__badge {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: .15rem .6rem;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

/* ── Payment history — read-only family ledger ────────────────────────────── */
.ds .pay-history { margin-bottom: 1.5rem; }
.ds .pay-history__list { list-style: none; margin: 0; padding: 0; }
.ds .pay-history__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .25rem;
  border-top: 1px solid var(--border);
}
.ds .pay-history__row:first-child { border-top: 0; }
.ds .pay-history__date { color: var(--text-secondary); font-size: .9375rem; }
.ds .pay-history__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--success-text);
}
.ds .pay-history__empty { margin: 0; }