/*
 * North-Host – motyw jasny / ciemny (wspólny dla strony, panelu i logowania). Ładowany jako OSTATNI arkusz.
 * Ciemny = domyślne kolory z site.css / admin.css / auth.css. Jasny = nadpisania poniżej.
 * Wybór: <html data-theme="light|dark"> ustawiany w <head> (zapamiętany wybór albo ustawienie systemu), przełącznik: /assets/theme.js.
 */

/* ---------- przełącznik ---------- */
.themebtn{width:auto;height:auto;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit;color:var(--muted);background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;line-height:1.2}
.themebtn:hover{color:var(--text);border-color:var(--accent)}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themebtn .t-l,.themebtn .t-d{display:none}
:root[data-theme="light"] .themebtn .t-d,:root:not([data-theme="light"]) .themebtn .t-l{display:inline}
.side-bottom .themebtn{border:0;justify-content:flex-start;gap:10px;padding:9px 10px;width:100%;font-size:14px;border-radius:8px}
.side-bottom .themebtn:hover{background:var(--card)}
.side-bottom .themebtn i{font-style:normal;width:20px;text-align:center}
.links .themebtn{padding:2px 8px;font-size:13px}

/* ---------- jasny motyw: kolory ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f4f8;--card:#ffffff;--card2:#f4f6fa;--line:#d8dee8;--text:#131924;--muted:#5b6575;
  --good:#18924d;--part:#b5720c;--bad:#d23c38;--off:#8a94a3;--accent:#1d72d8;
  --tower:#eef2f7;--gold:#f2c200;
}
:root[data-theme="light"] body{background:var(--bg)}

/* nazwy w kolorach TrackMania: jasne kolory (np. $fff) przyciemnione, odcień ten sam */
:root[data-theme="light"] [style*="--c:"]{color:#2a3140!important;color:oklch(from var(--c) min(l, .5) max(c, .02) h)!important}

/* tablica „Teraz na torach” zostaje ciemna – jak grafika z transmisji */
:root[data-theme="light"] .tower{--tower:#141922;--text:#e7ebf2;--muted:#97a1b2;--line:#2a3140;color:var(--text);background:var(--tower);border-color:#141922}
:root[data-theme="light"] .tower [style*="--c:"]{color:var(--c)!important}

/* strona: drobne kolory wpisane na sztywno */
:root[data-theme="light"] .tower li+li{border-top-color:#222936}
:root[data-theme="light"] .ptab th,:root[data-theme="light"] .ptab td{border-bottom-color:var(--line)}
:root[data-theme="light"] .rng::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--f),#d3dae5 var(--f))}
:root[data-theme="light"] .rng::-moz-range-track{background:#d3dae5}
:root[data-theme="light"] .rng::-webkit-slider-thumb,:root[data-theme="light"] .rng::-moz-range-thumb{box-shadow:0 1px 5px rgba(20,30,50,.25)}
:root[data-theme="light"] .card .lab,:root[data-theme="light"] .tag.lab{color:#6c3fd1;border-color:rgba(108,63,209,.35)}
:root[data-theme="light"] .calc .total .wkrotce{color:#9a6b00}
:root[data-theme="light"] .fav:hover{border-color:#d63384;color:#c2186b}
:root[data-theme="light"] .nmsg.ok,:root[data-theme="light"] .pushmsg.ok,:root[data-theme="light"] .cfgcheck .ok,:root[data-theme="light"] .flash.ok{color:#11743c}
:root[data-theme="light"] .nmsg.warn,:root[data-theme="light"] .pushmsg.warn,:root[data-theme="light"] .cfgcheck .bad,:root[data-theme="light"] .flash.err,:root[data-theme="light"] .ev.error,:root[data-theme="light"] .err{color:#b42723}
:root[data-theme="light"] .nmsg.info,:root[data-theme="light"] .info{color:#174f94}
:root[data-theme="light"] .cfgcheck .warn{color:#8a5800}
:root[data-theme="light"] .card,:root[data-theme="light"] .box,:root[data-theme="light"] .op,:root[data-theme="light"] .calc.board{box-shadow:0 1px 2px rgba(20,30,50,.05)}

/* panel: menu, logi, czat, wykresy */
:root[data-theme="light"] .side{background:#e9edf3;scrollbar-color:#c3cbd7 transparent}
:root[data-theme="light"] .side nav a.on,:root[data-theme="light"] .side nav .srvtree .sub a.on{background:rgba(29,114,216,.12)}
:root[data-theme="light"] .side nav a:hover,:root[data-theme="light"] .side-bottom a:hover,:root[data-theme="light"] .side-bottom .navbtn:hover,:root[data-theme="light"] .srvtree details.srv>summary:hover{background:#dde3eb}
:root[data-theme="light"] .srvtree{scrollbar-color:#c3cbd7 transparent}
:root[data-theme="light"] .srvtree::-webkit-scrollbar-thumb,:root[data-theme="light"] .side::-webkit-scrollbar-thumb{background:#c3cbd7}
:root[data-theme="light"] .srvtree:hover::-webkit-scrollbar-thumb{background:#a9b3c2}
:root[data-theme="light"] .dot.off{background:#a9b1bd}
:root[data-theme="light"] .chat,:root[data-theme="light"] .out,:root[data-theme="light"] .log,:root[data-theme="light"] pre.log,:root[data-theme="light"] .cfged,:root[data-theme="light"] .chartwrap .tip{background:#fbfcfe}
:root[data-theme="light"] .log div{color:#2d3748}
:root[data-theme="light"] .cfged .ln{background:#eef1f6;color:#8a94a3}
:root[data-theme="light"] .cfged textarea{color:#1d2533}
:root[data-theme="light"] svg.chart .grid{stroke:#e2e7ee}
:root[data-theme="light"] svg.chart .cross{stroke:#a9b3c2}
:root[data-theme="light"] .btn.blackb{background:#fde8e8}
:root[data-theme="light"] .btn.warnb{color:#9a6b00}
:root[data-theme="light"] .btn.ignb{color:#b45309}
:root[data-theme="light"] .btn.kickb{color:#7c3aed}
:root[data-theme="light"] .catb.c-2fa,:root[data-theme="light"] .catb.c-awarie{color:#9a6b00}
:root[data-theme="light"] .catb.c-login,:root[data-theme="light"] .catb.c-czat,:root[data-theme="light"] .catb.c-lista{color:#1d63b8}
:root[data-theme="light"] .catb.c-mapy,:root[data-theme="light"] .catb.c-ster,:root[data-theme="light"] .catb.c-sklep{color:#13804a}
:root[data-theme="light"] .catb.c-gracze{color:#c0322e}
:root[data-theme="light"] .catb.c-pliki{color:#b45309}
:root[data-theme="light"] .catb.c-konta,:root[data-theme="light"] .catb.c-konfig{color:#6d3fd1}
:root[data-theme="light"] .catb.c-push{color:#b5248f}
:root[data-theme="light"] input:hover,:root[data-theme="light"] .labf input:hover,:root[data-theme="light"] .delf input[type=password]:hover{border-color:#b8c1ce}

/* logowanie */
:root[data-theme="light"] .card{box-shadow:0 12px 40px rgba(20,30,50,.10)}
:root[data-theme="light"] .pw .eye:hover{background:var(--card2)}

@media (prefers-reduced-motion:no-preference){
  html.theme-anim,html.theme-anim *{transition:background-color .25s ease,border-color .25s ease,color .25s ease!important}
}