/* ============================================================
   axion.css — wspólny fundament stron AxionRP
   Serwowany statycznie z /var/www/axionrp/axion.css, linkowany
   przez <link rel="stylesheet" href="/axion.css"> na każdej podstronie.

   Powód istnienia: każda podstrona miała własną, skopiowaną kopię tych
   samych reguł i kopie się rozjechały (jedne definiowały `a.btn,button.btn`,
   inne tylko `a.btn`) — stąd przyciski, które wyglądały inaczej albo wcale.
   Tu jest jedna, poprawna wersja. Style specyficzne dla strony zostają
   w jej <style>, który ładuje się PO tym pliku, więc nadal wygrywa.
   ============================================================ */

:root{
  --bg:#111110; --bg2:#161615; --surface:#1b1b19; --surface2:#222220;
  --line:#2b2b28; --line2:#3b3b36;
  --amber:#E8A020; --amber2:#F6B23C;
  --text:#F1EEE8; --muted:#9a968c; --faint:#6a665e;
  --ok:#4CC65B; --red:#E5534B; --blue:#5a9fd4;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.55}
.wrap{max-width:940px;margin:0 auto;padding:32px 24px 64px}

/* --- nagłówek strony --- */
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
h1{font-size:1.7rem;margin:0;letter-spacing:-.02em}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}

/* --- przyciski ---
   Selektory MUSZĄ łapać i <a>, i <button> — inaczej przycisk-element
   zostaje szarym guzikiem przeglądarki. Warianty kolorystyczne mają
   podwójną klasę (a.btn.btn-red), żeby wygrywały specyficznością z bazą. */
a.btn,button.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  padding:7px 12px;border-radius:6px;border:1px solid var(--line2);
  background:transparent;color:var(--text);text-decoration:none;transition:.15s}
a.btn:hover,button.btn:hover{border-color:var(--amber);color:var(--amber)}

a.btn.btn-ghost,button.btn.btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
a.btn.btn-ghost:hover,button.btn.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

a.btn.btn-ok,button.btn.btn-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
a.btn.btn-ok:hover,button.btn.btn-ok:hover{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:var(--ok)}

a.btn.btn-red,button.btn.btn-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
a.btn.btn-red:hover,button.btn.btn-red:hover{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red);border-color:var(--red)}

a.btn.btn-blue,button.btn.btn-blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
a.btn.btn-blue:hover,button.btn.btn-blue:hover{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);border-color:var(--blue)}

a.btn.btn-amber,button.btn.btn-amber,button.btn-amber{background:var(--amber);color:#1a1206;border:1px solid var(--amber);
  cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  padding:8px 16px;border-radius:6px}
a.btn.btn-amber:hover,button.btn.btn-amber:hover,button.btn-amber:hover{background:var(--amber2);border-color:var(--amber2);color:#1a1206}

/* Bursztynowy przycisk akcji przy polach wyszukiwania (Szukaj/Odśwież). */
button.go{cursor:pointer;font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;padding:8px 16px;border-radius:6px;border:1px solid var(--amber);background:var(--amber);color:#1a1206}
button.go:hover{background:var(--amber2);border-color:var(--amber2)}

/* --- wspólny pasek górny --- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 24px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;font-size:.86rem}
.brand span{color:var(--amber)}
.brand em{font-style:normal;color:var(--faint);letter-spacing:.1em}
.mainnav{display:flex;gap:2px;flex-wrap:wrap}
.mainnav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:6px}
.mainnav a:hover{color:var(--amber);background:var(--surface)}
.mainnav a.on{color:var(--amber);background:var(--surface)}
.userbar{margin-left:auto;display:flex;gap:8px;align-items:center;padding-left:16px;border-left:1px solid var(--line)}

/* --- zakładki --- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 20px}
.tab{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:10px 16px;border-radius:8px 8px 0 0;text-decoration:none;color:var(--muted);
  border:1px solid transparent;border-bottom:none;background:none;cursor:pointer}
.tab:hover{color:var(--amber)}
.tab.active{color:var(--amber);background:var(--surface);border-color:var(--line);
  border-bottom:1px solid var(--surface);margin-bottom:-1px}

/* --- karty i drobne elementy --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:0 0 18px}
.card h2{font-size:.9rem;margin:0 0 6px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.hint{color:var(--faint);font-size:.82rem;margin:0 0 14px}
.empty{color:var(--faint);font-size:.9rem}
.msg{font-family:var(--mono);font-size:.8rem;min-height:1em;margin:6px 0}
.mono{font-family:var(--mono);color:var(--muted);font-size:.82rem}
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;border:1px solid;white-space:nowrap}
.spacer{margin-left:auto}

/* --- formularze --- */
select,input[type=text],input[type=number],input[type=date],textarea{
  background:var(--bg);border:1px solid var(--line2);border-radius:7px;color:var(--text);font:inherit;padding:8px 11px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--amber)}
input[type=date]{color-scheme:dark}

/* --- tabele --- */
.tabww{overflow-x:auto}
img{max-width:100%;height:auto}
.mono{overflow-wrap:anywhere}
table.tb{width:100%;border-collapse:collapse;font-size:.9rem}
table.tb th{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:6px 10px;border-bottom:1px solid var(--line)}
table.tb td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.tb tr:hover td{background:var(--bg2)}

/* ============================================================
   Małe ekrany. Do 11.08.2026 ten plik nie miał ANI JEDNEJ reguły
   responsywnej, a 7 z 12 podstron też nie — na telefonie pasek nawigacji
   i zakładki łamały się w kilka rzędów, a szerokie karty wypychały stronę
   w bok. Zamiast łamania: poziome przewijanie samego paska/zakładek,
   bo to jedyne miejsca, które muszą zmieścić dużo krótkich pozycji.
   ============================================================ */
@media (max-width:760px){
  .wrap{padding:20px 14px 48px}
  h1{font-size:1.35rem}

  .topbar{padding:8px 14px;gap:10px}
  .mainnav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{white-space:nowrap;padding:8px 10px}
  .userbar{padding-left:10px}

  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;padding:9px 12px}

  .card{padding:16px 14px;border-radius:10px}

  /* Palec zamiast kursora — 7px paddingu to za mało, żeby trafić. */
  a.btn,button.btn,button.go{min-height:40px}

  table.tb{font-size:.84rem}
  table.tb th,table.tb td{padding:8px}

  select,input[type=text],input[type=number],input[type=date],textarea{max-width:100%}
}

@media (max-width:420px){
  .wrap{padding:16px 10px 40px}
  .brand{font-size:.78rem}
}