/* ============================================================
   themes/refresh.css — "Solve Premium" theme overlay (v2)
   Sprint 1 v5: bez serifa (user prefers Google sans). Zostaje:
     - ciepła paleta (cream-warm tła)
     - głęboki granat primary + terakota accent
     - większe radii, miękkie cienie
     - dark mode warm

   Wyłączanie: usuń linka w base.html — wracasz do oryginalnej palety.
   ============================================================ */

:root {
  /* ── Tła i powierzchnie ── ciepłe, kremowe ─────────────────────────── */
  --bg:                       oklch(0.985 0.005 80);
  --surface:                  oklch(1 0 0);
  --surface-1:                oklch(0.985 0.006 80);
  --surface-2:                oklch(0.975 0.008 80);
  --surface-3:                oklch(0.965 0.010 80);
  --surface-4:                oklch(0.955 0.012 80);
  --surface-5:                oklch(0.945 0.014 80);

  /* ── Bordery: warm grays, miękkie ──────────────────────────────────── */
  --border:                   oklch(0.91 0.008 80);
  --border-strong:            oklch(0.82 0.010 80);
  --outline:                  oklch(0.72 0.010 80);
  --outline-variant:          oklch(0.89 0.008 80);

  /* ── Tekst: warm dark ──────────────────────────────────────────────── */
  --text:                     oklch(0.20 0.012 60);
  --text-2:                   oklch(0.42 0.010 60);
  --text-3:                   oklch(0.60 0.008 60);

  /* ── Primary: deep navy zamiast Google blue ─────────────────────────── */
  --primary:                  oklch(0.35 0.13 250);
  --primary-hover:            oklch(0.30 0.14 250);
  --primary-pressed:          oklch(0.26 0.15 250);
  --on-primary:               oklch(0.985 0.005 80);
  --primary-container:        oklch(0.93 0.04 250);
  --on-primary-container:     oklch(0.24 0.13 250);

  /* ── Accent secondary: terakota — ciepły kontrapunkt do navy ──────── */
  --accent:                   oklch(0.62 0.13 35);
  --accent-hover:             oklch(0.56 0.14 35);
  --accent-fg:                oklch(0.985 0.005 80);

  /* State layers */
  --state-hover:              oklch(0.20 0.012 60 / 0.05);
  --state-focus:              oklch(0.20 0.012 60 / 0.09);
  --state-pressed:            oklch(0.20 0.012 60 / 0.12);
  --state-hover-primary:      oklch(0.35 0.13 250 / 0.08);

  /* Status colors — głębsze */
  --c-new:                    oklch(0.40 0.14 250);
  --c-new-bg:                 oklch(0.94 0.04 250);
  --c-prog:                   oklch(0.55 0.13 65);
  --c-prog-bg:                oklch(0.95 0.05 70);
  --c-ok:                     oklch(0.48 0.12 155);
  --c-ok-bg:                  oklch(0.94 0.05 155);
  --c-rej:                    oklch(0.50 0.16 25);
  --c-rej-bg:                 oklch(0.94 0.04 25);

  /* ── Shape — większe zaokrąglenia ───────────────────────────────── */
  --shape-xs:                 6px;
  --shape-sm:                 10px;
  --shape-md:                 14px;
  --shape-lg:                 18px;
  --shape-xl:                 22px;
  --shape-full:               999px;
  --radius:                   var(--shape-md);
  --radius-sm:                var(--shape-sm);

  /* ── Cienie — miękkie ─────────────────────────────────────────── */
  --elev-1: 0 1px 2px oklch(0.20 0.012 60 / 0.04), 0 1px 3px oklch(0.20 0.012 60 / 0.04);
  --elev-2: 0 2px 4px oklch(0.20 0.012 60 / 0.04), 0 4px 8px oklch(0.20 0.012 60 / 0.06);
  --elev-3: 0 4px 8px oklch(0.20 0.012 60 / 0.04), 0 8px 24px oklch(0.20 0.012 60 / 0.10);
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
  --shadow-3: var(--elev-3);
}

/* Sprint 1 v5 (#1): WYRZUCONO serif. Headery wracają na Geist sans —
   user preferuje czysto googlową typografię. */

/* Buttons — luźniejszy padding, miękki cień zamiast border */
.btn {
  padding: 9px 18px;
  border-radius: var(--shape-md);
  border-color: var(--border);
  transition: background 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.btn:hover { box-shadow: var(--elev-1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.accent {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn.accent:hover { background: var(--primary-hover); box-shadow: var(--elev-2); }
.btn.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn.danger { background: var(--c-rej); border-color: var(--c-rej); color: white; }

/* Cards — soft shadow zamiast hard border */
.card,
.parent-card,
.stat,
.form-card {
  border-color: var(--border);
  box-shadow: var(--elev-1);
}
.card:hover,
.parent-card:hover { box-shadow: var(--elev-2); }

/* Nav-item active — głębszy primary container */
.nav-item.active {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

/* Tagi/chips — większy padding */
.tag {
  padding: 4px 12px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.chip {
  padding: 6px 14px;
  border-radius: var(--shape-full);
}

/* Material Symbols cieńsze (300 weight) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   #8 Sprint 1 v5: brakujące tag colors dla statusów współprac.
   COLOR_OPTIONS w backendzie ma: gray, blue, green, yellow, red,
   purple, pink, orange. W app.css były tylko: slate, blue, green,
   amber, red, violet, pink, teal. Brakujące rzucały statusy na
   białe tło. Dodajemy aliasy.
   ============================================================ */
.tag-gray   { background: oklch(0.93 0.005 255); color: oklch(0.40 0.02 255); }
.tag-yellow { background: oklch(0.95 0.07 95);   color: oklch(0.45 0.13 75);  }
.tag-orange { background: oklch(0.94 0.07 50);   color: oklch(0.50 0.16 45);  }
.tag-purple { background: oklch(0.94 0.04 295);  color: oklch(0.46 0.16 295); }

/* stat-dot — ten sam zestaw plus istniejące */
.stat-dot.gray   { background: oklch(0.62 0.02 255); }
.stat-dot.blue   { background: oklch(0.55 0.17 252); }
.stat-dot.green  { background: oklch(0.52 0.13 155); }
.stat-dot.yellow { background: oklch(0.65 0.16 90);  }
.stat-dot.red    { background: oklch(0.55 0.18 25);  }
.stat-dot.purple { background: oklch(0.55 0.18 295); }
.stat-dot.pink   { background: oklch(0.60 0.18 350); }
.stat-dot.orange { background: oklch(0.62 0.17 45);  }

/* Dark mode warm palette */
html.dark {
  --bg:           oklch(0.16 0.008 60);
  --surface:      oklch(0.20 0.010 60);
  --surface-2:    oklch(0.22 0.012 60);
  --surface-3:    oklch(0.24 0.014 60);
  --border:       oklch(0.30 0.010 60);
  --border-strong: oklch(0.42 0.012 60);
  --text:         oklch(0.95 0.005 80);
  --text-2:       oklch(0.75 0.008 80);
  --text-3:       oklch(0.58 0.010 80);
  --primary:      oklch(0.65 0.16 250);
  --primary-container: oklch(0.32 0.10 250);
  --accent:       oklch(0.72 0.14 35);
}

/* ============================================================
   v6 #3 — visible borders na input/select/textarea, fix tag/seria grid.
   ============================================================ */

/* Wszystkie pola formularzy muszą mieć WIDOCZNĄ ramkę, żeby się nie zlewały
   z tłem (zwłaszcza po wprowadzeniu ciepłego cream tła w refresh.css). */
.input, .select, .textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
  border: 1px solid var(--border-strong) !important;
  background: var(--surface) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:hover, .select:hover, .textarea:hover, select:hover, textarea:hover,
input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: var(--outline) !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.35 0.13 250 / 0.15) !important;
}

/* Tag i seria w profilu ucznia — grid 1fr 1fr crashował na mobile.
   Auto-fit z minmax = elastyczne 1-2 kolumny w zależności od szerokości. */
.profile-head details > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}