/* ============================================================
   themes/premium.css — "Solve Premium" — Figma-inspired Indigo

   Kierunek designu:
     • Kolor marki: Electric Indigo (oklch 278°) — premium, high-tech jak Figma
     • Typografia: Plus Jakarta Sans — nowoczesna, czytelna, profesjonalna
     • Karty i sidebar: Glassmorphism — frosted glass z backdrop-filter
     • Tło: subtelna gradient mesh — głębia bez przytłoczenia
     • Dark mode: deep space indigo — intensywny, nowoczesny
     • Animacje: spring transitions — żywsze niż linear
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   FONT
   ═══════════════════════════════════════════════════════════ */
body,
.btn, .input, .select, .textarea, select, textarea, input {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  /* Tabular nums — liczby zawsze tej samej szerokości (wyrównanie kolumn)
     bez potrzeby osobnej czcionki mono dla statystyk */
  font-variant-numeric: tabular-nums !important;
}

/* Decyzja designowa (pass v3): JEDNA rodzina pisma w całym UI.
   Mono zostaje wyłącznie dla <code>. Daty, godziny, liczniki, kwoty —
   Plus Jakarta Sans z tabular-nums (równe kolumny bez zmiany kroju). */
code {
  font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace !important;
}
.mono,
.report-lesson-date,
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  font-family: inherit !important;
  font-variant-numeric: tabular-nums !important;
}

/* Duże liczby KPI (np. 42, 78%) — Plus Jakarta Sans, gruby, elegancki */
.page-title,
.profile-stat-value,
[class*="stat-value"],
.pct-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em !important;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Indigo Premium
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Tła — czyste z lekkim indigo tint */
  --bg:                       oklch(0.978 0.004 278);
  --surface:                  oklch(1 0 0);
  --surface-1:                oklch(0.983 0.005 278);
  --surface-2:                oklch(0.972 0.007 278);
  --surface-3:                oklch(0.962 0.009 278);
  --surface-4:                oklch(0.952 0.011 278);
  --surface-5:                oklch(0.942 0.013 278);

  /* Bordery */
  --border:                   oklch(0.91 0.006 278);
  --border-strong:            oklch(0.83 0.009 278);
  --outline:                  oklch(0.73 0.009 278);
  --outline-variant:          oklch(0.90 0.006 278);

  /* Tekst */
  --text:                     oklch(0.18 0.018 278);
  --text-2:                   oklch(0.40 0.014 278);
  --text-3:                   oklch(0.58 0.010 278);

  /* Primary — Electric Indigo (Figma-like) */
  --primary:                  oklch(0.505 0.240 278);
  --primary-hover:            oklch(0.455 0.250 278);
  --primary-pressed:          oklch(0.405 0.255 278);
  --on-primary:               oklch(1 0 0);
  --primary-container:        oklch(0.915 0.055 278);
  --on-primary-container:     oklch(0.255 0.180 278);

  /* Accent alias */
  --accent:                   var(--primary);
  --accent-hover:             var(--primary-hover);
  --accent-fg:                var(--on-primary);

  /* Surface tint */
  --surface-tint:             oklch(0.505 0.240 278 / 0.05);

  /* State layers */
  --state-hover:              oklch(0.18 0.018 278 / 0.055);
  --state-focus:              oklch(0.18 0.018 278 / 0.09);
  --state-pressed:            oklch(0.18 0.018 278 / 0.12);
  --state-hover-primary:      oklch(0.505 0.240 278 / 0.08);
  --state-focus-primary:      oklch(0.505 0.240 278 / 0.13);

  /* Semantic colors — status ledów */
  --c-new:                    oklch(0.50 0.20 278);
  --c-new-bg:                 oklch(0.93 0.05 278);
  --c-prog:                   oklch(0.58 0.14 60);
  --c-prog-bg:                oklch(0.95 0.06 70);
  --c-ok:                     oklch(0.52 0.13 155);
  --c-ok-bg:                  oklch(0.94 0.06 155);
  --c-rej:                    oklch(0.55 0.18 25);
  --c-rej-bg:                 oklch(0.95 0.04 25);

  /* Shape — zaokrąglenia */
  --shape-xs:                 6px;
  --shape-sm:                 10px;
  --shape-md:                 14px;
  --shape-lg:                 20px;
  --shape-xl:                 28px;
  --shape-full:               999px;
  --radius:                   var(--shape-md);
  --radius-sm:                var(--shape-sm);

  /* Glassmorphism tokens */
  --glass-bg:                 rgba(255, 255, 255, 0.72);
  --glass-border:             rgba(255, 255, 255, 0.50);
  --glass-blur:               blur(20px) saturate(180%);
  --glass-shadow:             0 4px 32px oklch(0.505 0.240 278 / 0.07),
                              0 1px 6px oklch(0.505 0.240 278 / 0.05);

  /* Cienie — bardziej "premium" z indigo tint */
  --elev-1:   0 1px 2px oklch(0 0 0 / 0.04), 0 1px 4px oklch(0.505 0.240 278 / 0.05);
  --elev-2:   0 2px 6px oklch(0 0 0 / 0.05), 0 4px 16px oklch(0.505 0.240 278 / 0.07);
  --elev-3:   0 4px 12px oklch(0 0 0 / 0.06), 0 12px 32px oklch(0.505 0.240 278 / 0.10);
  --elev-4:   0 8px 24px oklch(0 0 0 / 0.08), 0 24px 48px oklch(0.505 0.240 278 / 0.12);
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
  --shadow-3: var(--elev-3);
  --shadow-drawer: -16px 0 40px -8px oklch(0.505 0.240 278 / 0.12);

  /* Motion — spring-like */
  --motion-fast:  140ms;
  --motion-std:   220ms;
  --motion-slow:  360ms;
  --ease-std:     cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-emph:    cubic-bezier(0.2, 0, 0, 1.05);
  --ease-decel:   cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Deep Space Indigo
   ═══════════════════════════════════════════════════════════ */
html.dark {
  --bg:                       oklch(0.095 0.020 278);
  --surface:                  oklch(0.130 0.022 278);
  --surface-1:                oklch(0.155 0.024 278);
  --surface-2:                oklch(0.180 0.026 278);
  --surface-3:                oklch(0.205 0.028 278);
  --surface-4:                oklch(0.230 0.030 278);
  --surface-5:                oklch(0.255 0.032 278);

  --border:                   oklch(0.260 0.020 278);
  --border-strong:            oklch(0.360 0.024 278);
  --outline:                  oklch(0.440 0.020 278);
  --outline-variant:          oklch(0.240 0.018 278);

  --text:                     oklch(0.960 0.005 278);
  --text-2:                   oklch(0.730 0.012 278);
  --text-3:                   oklch(0.560 0.010 278);

  --primary:                  oklch(0.750 0.180 278);
  --primary-hover:            oklch(0.800 0.170 278);
  --primary-pressed:          oklch(0.700 0.185 278);
  --on-primary:               oklch(0.150 0.090 278);
  --primary-container:        oklch(0.300 0.150 278);
  --on-primary-container:     oklch(0.880 0.090 278);

  --accent:                   var(--primary);
  --accent-fg:                var(--on-primary);

  --surface-tint:             oklch(0.750 0.180 278 / 0.07);

  --state-hover:              oklch(1 0 0 / 0.07);
  --state-focus:              oklch(1 0 0 / 0.11);
  --state-pressed:            oklch(1 0 0 / 0.15);
  --state-hover-primary:      oklch(0.750 0.180 278 / 0.10);
  --state-focus-primary:      oklch(0.750 0.180 278 / 0.16);

  --c-new:    oklch(0.78 0.14 278);  --c-new-bg:  oklch(0.24 0.10 278);
  --c-prog:   oklch(0.78 0.13 70);   --c-prog-bg: oklch(0.24 0.08 75);
  --c-ok:     oklch(0.78 0.13 155);  --c-ok-bg:   oklch(0.22 0.08 155);
  --c-rej:    oklch(0.78 0.13 25);   --c-rej-bg:  oklch(0.24 0.10 25);

  /* Dark glassmorphism */
  --glass-bg:     rgba(20, 16, 36, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 4px 32px oklch(0 0 0 / 0.30), 0 1px 6px oklch(0 0 0 / 0.20);

  --elev-1: 0 1px 2px oklch(0 0 0 / 0.20), 0 1px 4px oklch(0 0 0 / 0.15);
  --elev-2: 0 2px 6px oklch(0 0 0 / 0.25), 0 4px 16px oklch(0 0 0 / 0.20);
  --elev-3: 0 4px 12px oklch(0 0 0 / 0.30), 0 12px 32px oklch(0 0 0 / 0.25);
}

/* ═══════════════════════════════════════════════════════════
   BODY — gradient mesh background
   ═══════════════════════════════════════════════════════════ */
body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse at 15% 15%, oklch(0.84 0.08 278 / 0.28) 0px, transparent 55%),
    radial-gradient(ellipse at 85% 85%, oklch(0.82 0.07 310 / 0.20) 0px, transparent 55%),
    radial-gradient(ellipse at 50% 5%,  oklch(0.86 0.05 240 / 0.15) 0px, transparent 45%) !important;
  background-attachment: fixed !important;
}
html.dark body {
  background-image:
    radial-gradient(ellipse at 15% 15%, oklch(0.22 0.10 278 / 0.50) 0px, transparent 55%),
    radial-gradient(ellipse at 85% 85%, oklch(0.20 0.08 310 / 0.35) 0px, transparent 55%),
    radial-gradient(ellipse at 50% 5%,  oklch(0.18 0.06 240 / 0.25) 0px, transparent 45%) !important;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — frosted glass
   ═══════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow: 4px 0 32px oklch(0.505 0.240 278 / 0.06) !important;
}
html.dark .sidebar {
  box-shadow: 4px 0 32px oklch(0 0 0 / 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR — frosted glass
   ═══════════════════════════════════════════════════════════ */
.topbar {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 1px 20px oklch(0.505 0.240 278 / 0.05) !important;
}
html.dark .topbar {
  background: rgba(13, 10, 24, 0.82) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 20px oklch(0 0 0 / 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS — glassmorphism
   WAŻNE: .kanban-card jest celowo WYKLUCZONY — backdrop-filter
   tworzy nowy stacking context który blokuje HTML5 drag events
   ═══════════════════════════════════════════════════════════ */
.card,
.parent-card,
.stat,
.form-card {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--shape-lg) !important;
  transition:
    transform var(--motion-fast) var(--ease-std),
    box-shadow var(--motion-fast) var(--ease-std) !important;
}

/* Kanban cards — bez glassmorphism (pozwala na drag events) */
.kanban-card {
  background: var(--surface) !important;
  border: 1px solid var(--outline-variant) !important;
  box-shadow: var(--elev-1) !important;
  border-radius: var(--shape-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.kanban-card:hover {
  box-shadow: var(--elev-2) !important;
  border-color: var(--primary) !important;
  transform: none !important;
}
.card:hover,
.parent-card:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 6px 40px oklch(0.505 0.240 278 / 0.10),
    0 2px 8px oklch(0.505 0.240 278 / 0.07) !important;
}
html.dark .card:hover,
html.dark .parent-card:hover {
  box-shadow:
    0 6px 40px oklch(0 0 0 / 0.40),
    0 2px 8px oklch(0 0 0 / 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   MODAL / DRAWER — premium glass
   ═══════════════════════════════════════════════════════════ */
.modal,
dialog.modal {
  background: rgba(255,255,255,0.90) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.60) !important;
  border-radius: var(--shape-xl) !important;
  box-shadow:
    0 24px 64px oklch(0.505 0.240 278 / 0.15),
    0 8px 24px oklch(0 0 0 / 0.10) !important;
}
html.dark .modal,
html.dark dialog.modal {
  background: rgba(20, 16, 36, 0.90) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow:
    0 24px 64px oklch(0 0 0 / 0.50),
    0 8px 24px oklch(0 0 0 / 0.30) !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — premium indigo
   ═══════════════════════════════════════════════════════════ */
.btn {
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: var(--shape-md) !important;
  transition:
    background var(--motion-fast) var(--ease-std),
    transform var(--motion-fast) var(--ease-std),
    box-shadow var(--motion-fast) var(--ease-std) !important;
}
.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 12px oklch(0 0 0 / 0.10) !important;
}
.btn:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: none !important;
}
.btn.accent {
  background: var(--primary) !important;
  border-color: transparent !important;
  color: var(--on-primary) !important;
  box-shadow: 0 2px 12px oklch(0.505 0.240 278 / 0.30) !important;
}
.btn.accent:hover {
  background: var(--primary-hover) !important;
  box-shadow: 0 4px 20px oklch(0.505 0.240 278 / 0.40) !important;
}
html.dark .btn.accent {
  box-shadow: 0 2px 12px oklch(0.750 0.180 278 / 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM INPUTS — premium focus ring
   ═══════════════════════════════════════════════════════════ */
.input, .select, .textarea, select, textarea, input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--shape-sm) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}
.input:focus, .select:focus, .textarea:focus,
select:focus, textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px oklch(0.505 0.240 278 / 0.18) !important;
}
html.dark .input, html.dark .select, html.dark .textarea,
html.dark select, html.dark textarea,
html.dark input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(20, 16, 36, 0.70) !important;
}

/* ═══════════════════════════════════════════════════════════
   TOPIC ROW — nowy flexbox layout (stary był CSS grid 6 kolumn)
   ═══════════════════════════════════════════════════════════ */
.topic-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px 7px 10px !important;
}
.topic-row .topic-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.topic-row .topic-actions .icon-btn {
  width: 26px !important;
  height: 26px !important;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.topic-row:hover .topic-actions .icon-btn { opacity: 1; }
.topic-diff { flex-shrink: 0; }
.topic-time  { flex-shrink: 0; min-width: 32px; text-align: right; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — premium navigation (Figma-inspired)
   ═══════════════════════════════════════════════════════════ */

/* Brand */
.brand-name {
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  background: linear-gradient(135deg, var(--text) 0%, oklch(0.505 0.240 278) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html.dark .brand-name {
  background: linear-gradient(135deg, oklch(0.96 0.005 278), oklch(0.75 0.180 278)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.brand-tag { font-size: 10px !important; letter-spacing: 0.10em !important; }

/* Logo ring */
img.brand-mark {
  border: 2px solid transparent !important;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, oklch(0.505 0.240 278), oklch(0.62 0.20 310)) border-box !important;
  padding: 2px !important;
  border-radius: 12px !important;
}
html.dark img.brand-mark {
  background:
    linear-gradient(oklch(0.15 0.022 278), oklch(0.15 0.022 278)) padding-box,
    linear-gradient(135deg, oklch(0.750 0.180 278), oklch(0.70 0.18 310)) border-box !important;
}

/* Nav section labels */
.nav-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-3) !important;
}

/* Nav items */
.nav-item {
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease !important;
}
.nav-item:active { transform: scale(0.98) !important; }

/* Active state — indigo gradient */
.nav-item.active {
  background: linear-gradient(135deg,
    oklch(0.505 0.240 278 / 0.13),
    oklch(0.60 0.200 310 / 0.08)) !important;
  color: oklch(0.360 0.200 278) !important;
  font-weight: 700 !important;
  border: 1px solid oklch(0.505 0.240 278 / 0.18) !important;
}
.nav-item.active .nav-ico { color: oklch(0.360 0.200 278) !important; }

html.dark .nav-item.active {
  background: linear-gradient(135deg,
    oklch(0.750 0.180 278 / 0.18),
    oklch(0.70 0.180 310 / 0.10)) !important;
  color: oklch(0.830 0.140 278) !important;
  border-color: oklch(0.750 0.180 278 / 0.22) !important;
}
html.dark .nav-item.active .nav-ico { color: oklch(0.830 0.140 278) !important; }

/* Icons — thin outline na nieaktywnych, filled na aktywnych */
.nav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22 !important;
  font-size: 20px !important;
}
.nav-item.active .nav-ico.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 22 !important;
}

/* Sidebar foot — card-style */
.sidebar-foot {
  background: var(--surface-tint) !important;
  border-radius: 10px !important;
  border-top: none !important;
  margin: 0 4px 4px !important;
  padding: 10px 12px !important;
}

/* Avatar gradient — indigo marki, biały tekst (inicjały) */
.avatar, .who-avatar {
  background: linear-gradient(135deg,
    oklch(0.505 0.240 278),
    oklch(0.60 0.20 310)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE TITLE — premium typografia
   ═══════════════════════════════════════════════════════════ */
.page-title {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg,
    oklch(0.20 0.025 278) 0%,
    oklch(0.505 0.240 278) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html.dark .page-title {
  background: linear-gradient(135deg,
    oklch(0.96 0.005 278) 0%,
    oklch(0.80 0.150 278) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════
   TABS — premium underline
   ═══════════════════════════════════════════════════════════ */
.tab.active {
  color: var(--primary) !important;
  font-weight: 600 !important;
}
.tab.active::after {
  background: var(--primary) !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   STATUS COLORS — Indigo-based
   ═══════════════════════════════════════════════════════════ */
.tag-gray   { background: oklch(0.93 0.004 278); color: oklch(0.40 0.015 278); }
.tag-yellow { background: oklch(0.95 0.07 80);   color: oklch(0.45 0.13 70);  }
.tag-orange { background: oklch(0.94 0.07 50);   color: oklch(0.50 0.16 45);  }
.tag-purple { background: oklch(0.92 0.07 290);  color: oklch(0.40 0.20 278); }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BARS — indigo gradient
   ═══════════════════════════════════════════════════════════ */
.progress-bar.ok {
  background: linear-gradient(90deg,
    oklch(0.505 0.240 278),
    oklch(0.62 0.200 310)) !important;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR — premium
   ═══════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.505 0.240 278 / 0.25) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: oklch(0.505 0.240 278 / 0.25);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: oklch(0.505 0.240 278 / 0.45);
}

/* ═══════════════════════════════════════════════════════════
   HERO BADGES / CHIPS — premium pill
   ═══════════════════════════════════════════════════════════ */
.chip, .badge, .tab-count {
  border-radius: var(--shape-full) !important;
}

/* ═══════════════════════════════════════════════════════════
   PAGE — parent portal glass cards
   ═══════════════════════════════════════════════════════════ */
.parent-shell { background: var(--bg) !important; }

/* ═══════════════════════════════════════════════════════════
   PARENT PORTAL — layout dashboardu 2-kolumnowy
   ═══════════════════════════════════════════════════════════ */

/* Główny grid: 1 kolumna na mobile, 2 na desktop */
.parent-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
@media (min-width: 900px) {
  .parent-dash-grid {
    grid-template-columns: 1fr 310px;
    gap: 20px;
  }
}

/* Kolumny — zwykły blok, bez flex gap (spacing przez .ps) */
.parent-dash-main,
.parent-dash-side {
  display: block;
}

/* Na mobile side jedzie pod main */
@media (max-width: 899px) {
  .parent-dash-side { margin-top: 0; }
}

/* Sekcja — wyraźny odstęp między grupami */
.ps {
  margin-bottom: 40px;
}
.ps:last-child {
  margin-bottom: 0;
}

/* Karta wewnątrz sekcji — mały odstęp między sąsiadami */
.ps > .parent-card,
.ps > a.parent-card {
  margin-bottom: 12px;
}
.ps > .parent-card:last-child,
.ps > a.parent-card:last-child {
  margin-bottom: 0;
}

/* Nagłówki sekcji — wyraźne separatory */
.parent-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--outline-variant);
  margin-top: 4px;
}
.parent-dash-main .parent-section-label:first-child,
.parent-dash-side .parent-section-label:first-child {
  margin-top: 0;
}

/* Toast banery akcji */
.parent-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--shape-sm);
  border: 1px solid;
  margin-bottom: 14px;
  font-size: 13px;
}
.parent-toast--ok {
  background: color-mix(in oklch, oklch(0.65 0.18 145) 10%, var(--surface-2));
  border-color: color-mix(in oklch, oklch(0.65 0.18 145) 30%, var(--border));
  color: oklch(0.55 0.18 145);
}
.parent-toast--err {
  background: color-mix(in oklch, oklch(0.65 0.20 25) 8%, var(--surface-2));
  border-color: color-mix(in oklch, oklch(0.65 0.20 25) 25%, var(--border));
  color: oklch(0.55 0.20 25);
}
.parent-toast--info {
  background: color-mix(in oklch, oklch(0.60 0.18 250) 8%, var(--surface-2));
  border-color: color-mix(in oklch, oklch(0.60 0.18 250) 25%, var(--border));
  color: oklch(0.50 0.18 250);
}

/* CTA karta rezerwacji */
.parent-cta-card {
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border)) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.parent-cta-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent) !important;
}

/* Karta w flex stack — gap przejmuje spacing */
.parent-dash-main .parent-card,
.parent-dash-side .parent-card {
  margin-bottom: 0 !important;
  padding: 20px 22px;
}

/* Nagłówek wewnątrz karty — więcej powietrza */
.parent-dash-main .parent-card-h,
.parent-dash-side .parent-card-h {
  margin-bottom: 16px;
}

/* Wiersze lekcji — wyraźniejsze odstępy */
.parent-dash-main .lesson-row {
  padding-bottom: 14px;
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════
   KANBAN EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.kanban-empty {
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
  padding: 16px 8px;
}

/* ═══════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════ */
::selection {
  background: oklch(0.505 0.240 278 / 0.20);
  color: var(--text);
}