/* ═══════════════════════════════════════════════════════════════════════════
   ESTREKA · NOCTURNE — kujunduskiht (dark, elegantne, blurple aktsent)
   ---------------------------------------------------------------------------
   PAIGALDUS: lae see fail KÕIGE VIIMASENA, PÄRAST footer.css-i, header.php-s:
       <link rel="stylesheet" href="<?php echo asset_url('assets/css/nocturne.css'); ?>">
   Ta kirjutab üle style.css + design.css + header.css + footer.css tokenid ja
   pinnaklassid. Enamik saidist (tabelid, listid, kaardid, kiibid, badge'd,
   menüü) muutub ainuüksi tokenite ümberpööramisest — allpool on lisaks kohad,
   kus taust oli kõvakodeeritud #fff või kus komponent vajab uut hoiakut.
   Ikoonid: olemasolev icon() helper (feather-stiil) sobib.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENID ─────────────────────────────────────────────────────────── */
:root {
  /* Aktsent — blurple (asendab navy). Kasutatakse joone/kontuuri/kumana. */
  --primary-color: #9184d9;
  --primary-dark:  #a7a1db;   /* tumedal taustal on "hover" HELEDAM */
  --primary-light: #b5abfc;
  --header-gradient: none;

  /* Aktsent-taust ja -ääris (nüüd tumedad) */
  --accent-bg:     #2b2741;
  --accent-border: #423a6a;
  --on-navy-light: #b5abfc;
  --admin-sidebar: #12141f;

  /* Hall-astmik ÜMBER PÖÖRATUD: tume põhi, hele tekst.
     Nii toimib olemasolev markup — color:var(--gray-900) = hele pealkiri,
     background:var(--gray-50) = tume õrn pind, border:var(--gray-200) = tume joon. */
  --gray-50:  #1e2130;
  --gray-100: #232532;
  --gray-200: #2f323e;
  --gray-300: #3f424d;
  --gray-400: #75798c;
  --gray-500: #9397ab;
  --gray-600: #b2b6ca;
  --gray-700: #cfd3e5;
  --gray-800: #e4e7f5;
  --gray-900: #f3f5fe;

  --secondary-color: #9397ab;
  --success-color: #7fd1a8;
  --warning-color: #e6b566;
  --danger-color:  #e8878b;
  --info-color:    #9184d9;
  /* Loendur-badge'ide punane: --danger-color on pastelne (tumedal taustal
     rahulik veatoon), aga LOENDUR peab silma torkama ja valge tekst sellel
     jäi loetamatuks (kontrast 2.2:1). Eraldi toon → veateated jäävad omaks. */
  --badge-red:     #dc2626;

  /* Pehmed nurgad (Nocturne) — kirjutab üle design.css radius:0.
     Näidise järgi natuke ümaramad: kaardid ~16, kontrollid ~10, sildid ~8. */
  --radius-sm: 8px; --radius: 10px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 18px; --radius-2xl: 20px;

  /* Elevatsioon tumedal: serv + varjuhõng */
  --shadow-sm: 0 0 0 1px #2f323e;
  --shadow:    0 0 0 1px #2f323e;
  --shadow-md: 0 0 0 1px #3f424d, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 0 0 1px #595d6c, 0 16px 40px rgba(0,0,0,.65);
  --shadow-xl: 0 0 0 1px #595d6c, 0 24px 60px rgba(0,0,0,.7);

  /* Nocturne alusvärvid, kui otse vaja */
  --noct-bg: #161826;
  --noct-surface: #232532;
  --noct-divider: rgba(233,233,237,.16);
}

html, body { background: var(--noct-bg); color: var(--gray-900); }
::selection { background: color-mix(in srgb, var(--primary-color) 30%, transparent); }
a { color: var(--primary-color); }
a:hover { color: var(--primary-light); }
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ── 2. PINNAD, mis olid #fff ────────────────────────────────────────────── */
.ds-card, .ds-stat, .pg-table-wrap, .pg-card, .ds-search, .ds-segment,
.ds-empty, .ds-interest, .pg-chip, .card, .modal, .modal-content,
.dropdown-menu, .fd-week, .ds-timeline-card {
  background: var(--noct-surface);
  border-color: var(--gray-300);
  color: var(--gray-900);
}
.ds-timeline-date { background: var(--gray-50); border-color: var(--gray-300); }
.ds-bar-track { background: var(--gray-200); }
.ds-bar-fill  { background: var(--primary-color); box-shadow: 0 0 8px color-mix(in srgb,var(--primary-color) 55%,transparent); }
.ds-msg-theirs { background: var(--gray-100); }
.ds-msg-mine   { background: var(--accent-bg); color: var(--primary-light); }
.fd-week-stat  { background: var(--gray-50); }

/* form-väljad */
.ds-form-row input[type=text], .ds-form-row input[type=url],
.ds-form-row input[type=date], .ds-form-row select, .ds-form-row textarea,
.ds-search input, input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=month], input[type=week],
input[type=tel], input[type=url], select, textarea {
  background: var(--noct-surface);
  border: 1px solid var(--gray-300);
  color: var(--gray-900);
  border-radius: var(--radius);
  caret-color: var(--primary-color);
}
/* Legacy üldkomponendid (.form-input jt) — kui klass ei sea tausta ise */
.form-input, .form-select, .form-textarea, .form-control,
.pg-season select {
  background: var(--noct-surface); color: var(--gray-900);
}
.stat-card, .info-card { background: var(--noct-surface); border-color: var(--gray-300); }
.btn-secondary { background: var(--gray-200); color: var(--gray-900); }
.btn-secondary:hover { background: var(--gray-300); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input:focus, select:focus, textarea:focus, .ds-search:focus-within {
  border-color: var(--primary-color); outline: none;
}

/* ── 3. NUPUD — täidetu asemel kontuuriga (Nocturne allkiri) ─────────────── */
.ds-btn-primary {
  background: transparent; color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.ds-btn-primary:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-light); border-color: var(--primary-color);
}
.ds-btn-secondary {
  background: transparent; color: var(--gray-800); border-color: var(--gray-300);
}
.ds-btn-secondary:hover {
  border-color: var(--primary-color); color: var(--primary-color);
  background: color-mix(in srgb, #e9e9ed 6%, transparent);
}
.btn-auth-solid {
  background: transparent !important; color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}
.btn-auth-solid:hover { background: color-mix(in srgb,var(--primary-color) 12%,transparent) !important; }
.btn-auth-outline { color: var(--gray-800); border-color: var(--gray-300); }

/* ── 4. TABELID / LISTID / KOHA-BADGE ────────────────────────────────────── */
.pg-table-wrap { background: var(--noct-surface); }
.pg-table td { border-bottom-color: var(--gray-200); }
.pg-table tbody tr:hover { background: var(--gray-50); }
.pg-table .pg-td-strong { color: var(--gray-900); }
.pg-place { background: var(--gray-200); color: var(--gray-700); }
.pg-place.podium { background: var(--primary-color); color: var(--noct-bg); font-weight: 800; }
.pg-record { background: var(--accent-bg); color: var(--primary-light); border-color: var(--accent-border); }
.ds-table th, .pg-table th { color: var(--gray-500); }
.ds-comment, .ds-convo, .ds-notif, .ds-answer { border-color: var(--gray-200); }

/* ── 5. KIIBID / SILDID / SEGMENT ────────────────────────────────────────── */
.pg-chip { background: var(--noct-surface); color: var(--gray-600); border-color: var(--gray-300); }
.pg-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.pg-chip.active {
  background: var(--accent-bg); color: var(--primary-light); border-color: var(--primary-color);
}
.ds-segment { background: transparent; border-color: var(--gray-300); }
.ds-segment a { color: var(--gray-600); }
.ds-segment a.active {
  background: transparent; color: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}
.ds-badge { border-color: var(--primary-color); color: var(--primary-color); }
.pg-tag, .ds-event-badge { background: var(--accent-bg); color: var(--primary-light); border-color: var(--accent-border); }
.ds-source-net { background: var(--gray-100); color: var(--gray-500); }
.ds-source-club { background: var(--accent-bg); color: var(--primary-light); border-color: var(--accent-border); }
.ds-interest.active { background: var(--accent-bg); color: var(--primary-light); border-color: var(--primary-color); }
.ds-chip-count, .notification-badge, .bell-badge {
  background: var(--badge-red); color: #fff;
}
.ds-dot { background: var(--danger-color); }
/* .ds-suggestion-unread on SISUPLOKK, mitte täpp — taustavärvi siit ei anta
   (oli .ds-dot'iga grupeeritud ja tegi kogu ploki loetamatuks roosaks).
   Riba tuleb siin siiski üle kirjutada: .ds-answer border-color (ülal) võidaks
   sama spetsiifilisuse ja hilisema laadimise tõttu design.css-i aktsentriba. */
.ds-suggestion-unread { border-left-color: var(--primary-color); }
/* teavituse lugemata-täpp on accent (blurple), mitte punane — teavitus pole viga */
.ds-notif-unread::before { background: var(--primary-color); }
.ds-notif-read { color: var(--gray-500); }
.ds-notif-read a { color: var(--gray-600); }
.ds-notif-tag-new { background: var(--accent-bg); color: var(--primary-light); }
.ds-notif-tag-read { background: var(--gray-100); color: var(--gray-500); }

/* Tugevate paksude pealkirjade pehmendus (Nocturne: hierarhia on suurus, mitte kaal) */
.pg-head h1 { font-weight: 700; }
.ds-stat .ds-stat-number { font-weight: 700; }

/* ── 6. PÄIS (header.css üle) ─────────────────────────────────────────────── */
.header, .navbar { background: var(--noct-surface); }
/* backdrop-filter maha: heleda teema blur(8px) jäi läbipaistmatu tausta ALLA
   aktiivseks — nähtamatu, aga brauser komposiitis seda igal kaadril. Kulu
   kandis ainult mobiil (töölaual on sisselogitult päis peidus). */
.header { border-bottom: 1px solid var(--noct-divider); box-shadow: none;
    backdrop-filter: none; }
.brand-text { color: var(--gray-900); }
.brand-sub  { color: var(--gray-500); }
.public-nav a { color: var(--gray-700); }
.public-nav a:hover, .public-nav a.active { color: var(--primary-color); }
.bell-btn { color: var(--gray-800); }
.user-name { color: var(--gray-900); }
.user-role { color: var(--gray-500); }
.user-avatar { background: var(--accent-bg); color: var(--primary-light); }
.dropdown-arrow { color: var(--gray-500); }
.user-menu-dropdown {
  background: var(--noct-surface); border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-lg); border-radius: var(--radius-lg);
}
.dropdown-item { color: var(--gray-800); }
.dropdown-item:hover { background: color-mix(in srgb, #e9e9ed 7%, transparent); color: var(--gray-900); }
.dropdown-item svg { color: var(--gray-500); }
.dropdown-divider { background: var(--noct-divider); }
.dropdown-section-title { color: var(--gray-500); }
.dropdown-header { border-color: var(--noct-divider); }
.logout-item { color: var(--danger-color); }

/* Installi-nupp päises: mobiilne otsetee, sest seal on nav rippmenüü taga.
   Töölaual on külgribas oma link, seepärast on see vaikimisi peidus.
   Vt spec 2026-07-30-pwa-install-nahtavus-design.md */
.pwa-hdr-btn { display: none; position: relative; align-items: center;
  justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 10px; color: var(--gray-800); background: var(--accent-bg);
  text-decoration: none; }
.pwa-hdr-btn:hover { filter: brightness(1.15); }
.pwa-hdr-btn svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  /* :not([hidden]) on KOHUSTUSLIK — autori display võidab hidden-atribuudi
     brauseri vaikereegli üle, ja siis jääks nupp ka installitud äpis alles */
  .pwa-hdr-btn:not([hidden]) { display: inline-flex; }
}

/* ── 7. JALUS (footer.css üle) ────────────────────────────────────────────── */
.footer { background: var(--noct-surface); border-top: 1px solid var(--noct-divider); color: var(--gray-500); }
.footer-brand-text { color: var(--gray-800); }
.footer-copy { color: var(--gray-500); }

/* ── 8. FLASH / ALERT ─────────────────────────────────────────────────────── */
.alert, .ds-alert { background: var(--gray-100); border-color: var(--gray-300); color: var(--gray-900); }
.ds-alert { border-left: 3px solid var(--primary-color); }
.ds-alert-warning { border-left-color: var(--warning-color); }
.ds-alert-error { border-left-color: var(--danger-color); }

/* ── 9. TÜHI OLEK ─────────────────────────────────────────────────────────── */
.ds-empty { border-color: var(--gray-300); }
.ds-empty svg { color: var(--gray-400); }
.ds-empty h3 { color: var(--gray-900); }
.ds-empty p  { color: var(--gray-500); }

/* ═══ 10. ALUMINE TAB-RIBA (mobiil) — vajab bottom-nav.php-d (vt README) ═══ */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: none;                 /* nähtav ainult mobiilis, vt media allpool */
  justify-content: space-around; align-items: stretch;
  background: var(--noct-surface);
  border-top: 1px solid var(--noct-divider);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; min-width: 0; padding: 2px 0;
  font-size: 10px; letter-spacing: .02em; font-weight: 500;
  color: var(--gray-500); text-decoration: none;
}
.app-tab .ds-icon, .app-tab svg { width: 23px; height: 23px; }
.app-tab:hover { color: var(--gray-300); }
.app-tab.active { color: var(--primary-color); }
.app-tab.active .ds-icon, .app-tab.active svg {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--primary-color) 60%, transparent));
}

/* ── 11. MOBIIL-FIRST KÄITUMINE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .app-tabbar { display: flex; }
  .page-wrapper { padding-bottom: 84px; }  /* ruumi tab-ribale (nüüd ka avalikel) */
  /* Pikk menüü mobiilis: kõrgus dünaamilise viewport'i (dvh) järgi, et alumised
     lingid ("Logi välja") ei jääks mobiilibrauseri tööriistariba ega tab-riba taha
     peitu. 100vh on mobiilis ebausaldusväärne (ei arvesta dünaamilist riba) — 100dvh
     arvestab. Sisu kerib usaldusväärselt paneeli sees. vh jääb fallbackiks. */
  .user-menu-dropdown {
    max-height: calc(100vh - 150px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Päises: hoia kompaktne — peida rollitekst ja avalik keskmenüü mobiilis */
  .navbar-user .user-info { display: none; }
  .public-nav { display: none; }
  .pg-head h1 { font-size: 24px; }
  .container { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  /* Kelluke ja kasutaja-menüü sama kõrgusega (ühtlane joondus mobiilipäises) */
  .navbar-user { align-items: center; }
  .bell-btn, .user-menu-toggle { height: 40px; box-sizing: border-box; }
  .user-menu-toggle { padding-top: 3px; padding-bottom: 3px; }
  /* Avalik päis: hoia auth-nupud mahtuvana — "Sisene" ikoon-nupuks (nagu kelluke),
     et bränd + kaks nuppu ei jookseks kitsal ekraanil ekraanilt välja */
  .navbar-content { gap: 12px; }
  .auth-buttons { gap: 8px; }
  .btn-auth-outline span { display: none; }
  .btn-auth-outline { padding: 0; width: 40px; height: 40px; justify-content: center; flex: none; }
  .btn-auth-outline .ds-icon { width: 18px; height: 18px; }
  .btn-auth-solid { padding: 10px 14px; }
}

/* ── PWA installi pakkumise riba (pwa-install.js) ────────────────────────── */
.pwa-banner {
  position: fixed; z-index: 320;
  right: 20px; bottom: 20px; max-width: 380px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--noct-surface); border: 1px solid var(--noct-divider);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.pwa-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pwa-banner-text strong { color: var(--gray-900); font-size: 14px; }
.pwa-banner-text span { color: var(--gray-500); font-size: 12px; line-height: 1.4; }
.pwa-banner-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pwa-banner-install {
  background: var(--primary-color); color: #fff; border: none; cursor: pointer;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius, 10px); font-family: inherit;
}
.pwa-banner-later {
  background: transparent; color: var(--gray-500); border: none; cursor: pointer;
  padding: 4px; font-size: 12px; font-family: inherit;
}
.pwa-banner-later:hover, .pwa-banner-install:hover { filter: brightness(1.1); }

/* Juhis-aken: avaneb siis, kui brauser ei paku programmaatilist installi */
.pwa-howto { position: fixed; inset: 0; z-index: 500; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .55); }
.pwa-howto-box { position: relative; width: 100%; max-width: 420px;
  max-height: 80vh; overflow-y: auto; padding: 20px;
  background: var(--noct-surface); border: 1px solid var(--noct-divider);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.pwa-howto-box h3 { margin: 0 0 8px; color: var(--gray-900); font-size: 17px; }
.pwa-howto-box p { margin: 0 0 12px; color: var(--gray-500); font-size: 13px; }
.pwa-howto-steps { color: var(--gray-800); font-size: 14px; }
.pwa-howto-steps ol { margin: 8px 0 0; padding-left: 20px; }
.pwa-howto-steps li { margin-bottom: 6px; line-height: 1.45; }
.pwa-howto-close { position: absolute; top: 6px; right: 10px; border: 0;
  background: none; color: var(--gray-500); font-size: 26px; line-height: 1;
  cursor: pointer; }
@media (max-width: 768px) {
  /* Mobiilis tab-riba kohal, üle kogu laiuse */
  .pwa-banner { left: 12px; right: 12px; max-width: none;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Väga kitsad ekraanid (nt vana iPhone SE, 320px) — pigista veel veidi kokku */
@media (max-width: 360px) {
  .brand-link { gap: 8px; }
  .navbar-content { gap: 8px; }
  .btn-auth-solid { padding: 10px 12px; }
}

/* ═══ 12. LAUAARVUTI KÜLGRIBA (desktop) — vajab app-sidebar.php (vt README) ═══ */
.app-sidebar { display: none; }               /* nähtav ainult >=769px */
.as-brand { font-family: var(--font-family); font-weight: 600; font-size: 20px;
  letter-spacing: .02em; padding: 4px 12px 22px; color: var(--gray-900); text-decoration: none; }
.as-brand span { color: var(--primary-color); }
.as-nav { display: flex; flex-direction: column; gap: 2px; }
.as-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-md); color: var(--gray-500); text-decoration: none;
  font-size: 14px; font-weight: 500; }
.as-item .ds-icon, .as-item svg { width: 20px; height: 20px; flex: none; }
.as-item:hover { background: color-mix(in srgb, #e9e9ed 6%, transparent); color: var(--gray-800); }
.as-item.active { color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 13%, transparent); }
.as-item.active .ds-icon, .as-item.active svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary-color) 55%, transparent)); }
/* Loendur PUNANE, mitte mahe blurple — see on tegevust ootav asi ja peab
   silma paistma; maheda tooniga jäi märkamata (kasutaja tagasiside 2026-07-28) */
.as-item .as-badge { margin-left: auto; background: var(--badge-red); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; }
.as-item .ds-dot { margin-left: auto; }
.as-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-500); padding: 18px 12px 7px; }
.as-user { margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 4px; border-top: 1px solid var(--noct-divider); }
.as-user .as-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--accent-bg); color: var(--primary-light); display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.as-user .as-avatar img { width: 100%; height: 100%; object-fit: cover; }
.as-user .as-name { font-size: 14px; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-user .as-role { font-size: 11px; color: var(--gray-500); }
/* Kelluke vajab OMA kasti: ilma selleta on .as-bell kõrgus = ikooni 16px ja
   18px badge katab ikooni peaaegu tervenisti (mõõdetud 2026-07-28: 87%).
   32px kast → ikoon keskel, badge jääb nurka. */
.as-user .as-bell { margin-left: auto; position: relative; color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); }
.as-user .as-bell:hover { background: color-mix(in srgb, #e9e9ed 8%, transparent);
  color: var(--gray-800); }
.as-user .as-bell .bell-badge, .as-user .as-bell .notification-badge {
  position: absolute; top: -5px; right: -7px; }

@media (min-width: 769px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 250px; z-index: 310;
    display: flex; flex-direction: column; padding: 22px 16px; overflow-y: auto;
    background: var(--noct-surface); border-right: 1px solid var(--noct-divider);
  }
  /* Lauaarvutis asendab külgriba ülemise päise-navigatsiooni (sisselogitult) */
  body.logged-in .header { display: none; }
  body.logged-in .page-wrapper { margin-left: 250px; }
  /* Väljalogituna / avalikel lehtedel jääb tavaline ülapäis alles. */
}

/* ═══ 13. AUTH (login/register/konto-loomine) — split-paneel tumedaks ═══
   Need lehed on eraldiseisvad (oma <head>, auth.css). nocturne.css laetakse
   PÄRAST auth.css-i, nii et see plokk võidab kõvakodeeritud #fff pinnad. */
.auth-brand {
  background: linear-gradient(150deg, #2b2741 0%, #161826 100%);
  color: var(--gray-900);
}
.auth-brand-plate { background: #fff; }              /* logo jääb valgele plaadile */
.auth-brand-mid h1 { color: var(--gray-900); font-weight: 700; }
.auth-brand-label, .auth-perk-check { color: var(--primary-light); }
.auth-perk-check { background: var(--accent-bg); }
.auth-form-panel { background: var(--noct-bg); }
.auth-form-box h2 { color: var(--gray-900); font-weight: 700; }
.auth-input {
  background: var(--noct-surface); border-color: var(--gray-300); color: var(--gray-900);
  border-radius: var(--radius);
}
.auth-input:focus { border-color: var(--primary-color); }
.auth-submit {
  background: transparent; color: var(--primary-color);
  border: 1px solid var(--primary-color); border-radius: var(--radius);
}
.auth-submit:hover { background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-light); }
.auth-error { background: var(--gray-100); border-color: var(--gray-300); border-left-color: var(--danger-color); color: var(--gray-900); }
.auth-success { background: var(--accent-bg); border-color: var(--accent-border); border-left-color: var(--primary-color); color: var(--primary-light); }

/* ═══ 14. ADMIN-KEST (ash-*) — tumedaks (vt admin-shell.css) ═══════════════
   Admin-lehed laevad nocturne.css KÕIGE VIIMASENA admin-header.php-s, nii et
   see plokk võidab admin-shell.css kõvakodeeritud #fff / heledad pinnad.
   Sidebar (#12141f) tuleb juba --admin-sidebar tokenist. */
body.admin-shell { background: var(--noct-bg); color: var(--gray-900); }
.ash-topbar { background: var(--noct-surface); border-bottom-color: var(--noct-divider); }
.ash-stat, .ash-card, .ash-modal-content { background: var(--noct-surface); border-color: var(--gray-300); }
.ash-card-head, .ash-fieldset { border-color: var(--gray-200); }
.ash-table th { border-bottom-color: var(--gray-200); }
.ash-table tbody tr { border-bottom-color: var(--gray-200); }
.ash-row { border-bottom-color: var(--gray-200); }
.ash-modal-head { border-bottom-color: var(--gray-200); }
.ash-input, .ash-select, .ash-textarea {
  background: var(--noct-surface); border-color: var(--gray-300); color: var(--gray-900);
}
.ash-input::placeholder, .ash-textarea::placeholder { color: var(--gray-400); }
.ash-btn { background: transparent; border-color: var(--gray-300); color: var(--gray-800); }
.ash-btn:hover { background: color-mix(in srgb, #e9e9ed 6%, transparent); border-color: var(--primary-color); color: var(--primary-color); }
.ash-btn.primary { background: transparent; border-color: var(--primary-color); color: var(--primary-color); }
.ash-btn.primary:hover { background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-light); }
.ash-place.top { background: var(--primary-color); color: var(--noct-bg); }
.ash-toast { background: var(--noct-surface); color: var(--gray-900); box-shadow: var(--shadow-lg); }
.ash-toast.error { background: color-mix(in srgb, var(--danger-color) 22%, var(--noct-surface)); color: var(--gray-900); }
/* Staatuse-sildid tumedal taustal */
.ash-tag.warn { background: color-mix(in srgb, var(--warning-color) 16%, var(--noct-surface)); border-color: color-mix(in srgb, var(--warning-color) 40%, transparent); color: var(--warning-color); }
.ash-tag.danger { background: color-mix(in srgb, var(--danger-color) 16%, var(--noct-surface)); border-color: color-mix(in srgb, var(--danger-color) 40%, transparent); color: var(--danger-color); }
.ash-tag.success { background: color-mix(in srgb, var(--success-color) 16%, var(--noct-surface)); border-color: color-mix(in srgb, var(--success-color) 40%, transparent); color: var(--success-color); }
.ash-alert { background: color-mix(in srgb, var(--danger-color) 12%, var(--noct-surface)); border-color: color-mix(in srgb, var(--danger-color) 35%, transparent); border-left-color: var(--danger-color); color: var(--gray-900); }
.ash-alert.success { background: color-mix(in srgb, var(--success-color) 12%, var(--noct-surface)); border-color: color-mix(in srgb, var(--success-color) 35%, transparent); border-left-color: var(--success-color); color: var(--gray-900); }
.ash-input.error { background: color-mix(in srgb, var(--danger-color) 12%, var(--noct-surface)); border-color: var(--danger-color); }
.ash-stat.alert, .ash-card.alert { border-left-color: var(--danger-color); }

/* ═══ 15. LIIKME TÖÖLAUD (db-) — tumedaks (vt dashboard.css) ═══════════════
   Enamik db- reegleid kasutab hall-tokeneid ja --primary-color, mis pöörduvad
   ise ümber. Siin võidame ainult kõvakodeeritud valged pinnad + hero-gradiendi
   (--header-gradient on Nocturnes 'none', nii et .db-next vajab uut pinda). */
.db-next {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--noct-surface) 100%);
  box-shadow: var(--shadow-md);
}
.db-quick a, .db-stat, .db-comp-row, .db-card { background: var(--noct-surface); }
.db-next-btn-light { background: #fff; color: var(--noct-bg); }
.db-comp-photo-ph {
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 8px, var(--gray-50) 8px, var(--gray-50) 16px);
  color: var(--gray-400);
}

/* ═══ 16. AVALIK POOL (pub-) — tumedaks (vt public.css) ═════════════════════
   index.php + public/ lehed. Hero muutub blurple-toonis tumedaks, valged
   ribad ja kaardid saavad Nocturne-pinna. Logo-plaadid jäävad valgeks. */
.pub-hero { background: linear-gradient(135deg, var(--accent-bg) 0%, var(--noct-bg) 100%); }
.pub-stats-band { background: var(--noct-surface); border-bottom-color: var(--gray-200); }
.pub-section-white { background: var(--noct-surface); }
.pub-comp-card { background: var(--noct-surface); }
.pub-comp-photo-ph {
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 10px, var(--gray-50) 10px, var(--gray-50) 20px);
  color: var(--gray-400);
}
.pub-cta { background: var(--noct-surface); border-top-color: var(--gray-200); }
.pub-btn-light { background: #fff; color: var(--noct-bg); }
.pub-btn-light:hover { background: var(--accent-bg); color: var(--primary-light); }
.pub-btn-navy { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); }
.pub-btn-navy:hover { background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-light); }
.pub-btn-outline-navy { background: transparent; border-color: var(--gray-300); color: var(--primary-color); }
.pub-btn-outline-navy:hover { border-color: var(--primary-color); }

/* ═══ 17. ÜMARAMAD NURGAD (näidise järgi) ══════════════════════════════════
   Vana A-stiili disainisüsteem oli teadlikult kandiline — enamik komponente
   ei sea border-radius'i üldse (vaikimisi 0). Siin anname neile pehmed nurgad
   Nocturne tokenitest, et päris sait klapiks mockupiga. */

/* Suured kaardid ja pinnad → radius-lg */
.ds-card, .ds-stat, .pg-card, .pg-table-wrap, .ds-empty, .ds-timeline-card,
.card, .modal-content, .ash-modal-content, .info-card, .stat-card,
.db-next, .db-card, .db-stat, .db-comp-row, .db-quick a,
.vk-item, .vk-filters, .pub-comp-card,
.ash-card, .ash-stat, .cal-card, .cal-legend {
  border-radius: var(--radius-lg);
}
/* Kaardid, mille sees on pilt/veerg servani → lõika nurgad.
   NB: .pg-table-wrap / .ash-card jäävad välja — nad kerivad laia tabelit
   (overflow-x:auto), hidden lõikaks kerimise ära. Neil piisab border-radiusest. */
.db-comp-row, .db-next, .vk-item, .pub-comp-card, .cal-card { overflow: hidden; }

/* Keskmised kontrollid (nupud, väljad, otsing) → radius */
.ds-btn, .btn, .btn-preset, .ash-btn, .ash-input, .ash-select, .ash-textarea,
.pub-btn-light, .pub-btn-ghost, .pub-btn-navy, .pub-btn-outline-navy,
.db-add-btn, .db-next-btn-light, .db-next-btn-ghost, .db-reg-badge,
.vk-search, .vk-search-go, .ds-search, .ds-segment,
.auth-submit, .auth-input, .form-input, .form-select, .form-textarea, .form-control {
  border-radius: var(--radius);
}
.ds-segment { overflow: hidden; }

/* Väiksed sildid, kiibid, badge'd, kuupäevaplokid → radius-sm */
.pg-chip, .pg-tag, .ds-badge, .ds-event-badge, .ds-source-net, .ds-source-club,
.pg-record, .pg-place, .vk-tag, .vk-date, .pub-badge, .pub-badge-gray,
.ash-tag, .ash-place, .db-comp-date, .db-event-date, .ds-alert, .alert {
  border-radius: var(--radius-sm);
}

/* Edenemisribad → pill (näidises ümarad otsad) */
.ds-bar-track, .ds-bar-fill, .db-bar-track, .db-bar-fill,
.prog, .prog i { border-radius: 9999px; }

/* Feed-postituse fotod (kaardi sees, ümber ääris) → pehmed nurgad.
   Kaardi-ülal lamedad fotod (comp-photo) ümardab juba kaardi overflow. */
.ds-photo-grid img, .ds-photo-grid > * { border-radius: var(--radius); }

/* Teavituse-loendurid (kelluke jm) → pill */
.bell-badge, .notification-badge, .ds-chip-count, .bell-btn .bell-badge,
.today-events { border-radius: 9999px; }
/* Päise kellukese-nupp → pehme ruut (avatar jääb ringiks, ei puutu) */
.bell-btn { border-radius: var(--radius-md); }

/* ── Lehe-spetsiifilised vanad komponendid (hobused/treening/edusammud) ── */
/* Kaardid ja paneelid → radius-lg */
.hr-card, .horse-detail, .tr-card, .tr-load-card, .training-details,
.mo-card, .mo-progress, .empty-state, .horses-main, .training-main,
.motivation-main { border-radius: var(--radius-lg); }
/* Pisipildid, ikoonid, kuupäeva/tüübi-plokid → radius-md */
.hr-photo, .hr-photo-img, .hr-photo-preview, .hr-photo-field, .mo-icon,
.tr-date, .tr-type, .tr-mood, .tr-load-type-head,
.month-selector, .tr-monthnav { border-radius: var(--radius-md); }
/* Tühja-oleku ikoonimull → ring */
.empty-icon { border-radius: 9999px; }
/* Väiksed sildid ja ühikud → radius-sm */
.mo-new, .hr-age, .tr-fact, .tr-stat-unit, .tr-load-type-count,
.tr-load-unit, .tr-meta { border-radius: var(--radius-sm); }
/* Koormusribad → pill */
.mo-bar, .mo-bar > *, .tr-load-bar, .tr-load-bar > * { border-radius: 9999px; }
/* Nupud → radius */
.hr-add, .hr-edit, .hr-remove-photo, .modal-close, .modal-overlay .modal-content {
  border-radius: var(--radius);
}
.modal-content, .modal-overlay > .modal-content { border-radius: var(--radius-lg); }

/* Mobiili app-riba ja töölaua külgriba tabid on juba pehmed/ikoonipõhised;
   admin-kaardi sisemine tabel jälgib kaardi ümarust (overflow üleval). */

/* ═══ 18. KONTAKTISIKU HOIATUSRIBA (alaealine ilma kontaktisikuta) ═══
   Igal lehel nähtav, KA töölaual, kus .header on peidetud — riba elab
   page-wrapperist väljas. Vt specs/2026-07-28-kontaktisikud-design.md */
.kt-warn-bar {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.45;
  background: rgba(220, 76, 100, .16); color: #ff9aac;
  border-bottom: 1px solid rgba(220, 76, 100, .4);
  text-decoration: none; cursor: pointer;
}
.kt-warn-bar:hover { background: rgba(220, 76, 100, .24); color: #ffb3c1; }
.kt-warn-bar svg { width: 17px; height: 17px; flex-shrink: 0; }
.kt-warn-bar strong { font-weight: 800; }
@media (min-width: 901px) {
  body.logged-in .kt-warn-bar { margin-left: 250px; } /* külgriba kõrvale */
}

/* Sünniaja puudumise pehme püsiteade — sama paigutus mis hoiatusribal,
   aga rahulik blurple-toon (see on palve, mitte häire). 2026-07-31 */
.kt-info-bar {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.45;
  background: rgba(145, 132, 217, .14); color: #b5abfc;
  border-bottom: 1px solid rgba(145, 132, 217, .38);
  text-decoration: none; cursor: pointer;
}
.kt-info-bar:hover { background: rgba(145, 132, 217, .22); color: #cdc5ff; }
.kt-info-bar svg { width: 17px; height: 17px; flex-shrink: 0; }
.kt-info-bar strong { font-weight: 800; }
@media (min-width: 901px) {
  body.logged-in .kt-info-bar { margin-left: 250px; } /* külgriba kõrvale */
}

/* ═══ 19. GLOBAALSED PISIPARANDUSED (2026-07-28) ═══ */
/* Virnastatud kaardid ei tohi kokku kleepuda: leheküljesisesed otse main'i all
   olevad kaardid saavad vahe. Gridid (nt liikmete ruudustik) pole main'i otsesed
   lapsed — neid see ei puuduta, seal hoiab vahet grid-gap. */
main > .ds-card { margin-bottom: 16px; }
/* Sama vahe ka voo-/veerusisestele postitusekaartidele (pole main'i otselapsed) */
.ds-feed-layout .ds-card, .ds-blog .ds-post { margin-bottom: 16px; }

/* Klassita sisendid/tekstialad (nt kommentaarikast) said Nocturne'ilt tausta ja
   äärise, aga MITTE polsterdust — placeholder kleepus vastu serva. :where()
   hoiab spetsiifilisuse nullis: iga klassipõhine polsterdus (.auth-input,
   .form-input, .ash-input jt) võidab selle vaikimisi väärtuse alati üle. */
:where(input[type=text], input[type=email], input[type=password],
       input[type=search], input[type=number], input[type=date],
       input[type=time], input[type=datetime-local], input[type=month],
       input[type=week], input[type=tel], input[type=url],
       select, textarea) {
  padding: 9px 12px;
}