/* Panel FLAMARA: ciemny pasek marki + jasna przestrzen robocza, akcent = pomarancz FLAMARY */
:root {
  --wegiel: #15110e;
  --wegiel-2: #241d18;
  --papier: #f3f2f0;
  --karta: #ffffff;
  --tekst: #1d1a17;
  --szary: #6d665f;
  --linia: #e2ded9;
  --ogien: #e45712;
  --ogien-ciemny: #b8430a;
  --ok: #2f7d3b;
  --praca: #a85c00;
  --blad: #b3261e;
  --f-naglowek: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-tekst: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-claim: "Lora", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--f-tekst); font-size: 16px; line-height: 1.5; color: var(--tekst); background: var(--papier); }
h1, h2, h3 { font-family: var(--f-naglowek); line-height: 1.15; margin: 0; text-wrap: balance; }
a { color: var(--ogien-ciemny); }
:focus-visible { outline: 3px solid var(--ogien); outline-offset: 2px; }

.logo svg { display: block; width: 100%; height: auto; }
.logo-jasne svg { fill: #fff; }

/* ---------- logowanie ---------- */
.ekran-logowania {
  background:
    radial-gradient(900px 520px at 12% 108%, rgba(228, 87, 18, .38), transparent 62%),
    radial-gradient(600px 380px at 0% 100%, rgba(255, 170, 60, .16), transparent 60%),
    var(--wegiel);
  color: #f1ece6;
}
.logowanie {
  min-height: 100%;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px;
  max-width: 1080px; margin: 0 auto;
  padding-block: 48px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.logowanie-marka { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.logowanie-marka .logo { width: min(320px, 70vw); margin-bottom: 18px; }
.logowanie-marka h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; letter-spacing: -.01em; }
.claim { margin: 0; font-family: var(--f-claim); font-style: italic; font-size: 20px; color: #f3a27a; }
.logowanie-opis { margin: 0; max-width: 40ch; color: #c9bfb5; }

.karta-logowania {
  background: var(--karta); color: var(--tekst);
  border-radius: 14px; padding: 36px 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 8px;
  max-width: 400px; width: 100%; justify-self: end;
}
.karta-logowania h2 { font-size: 24px; margin-bottom: 10px; }
.karta-logowania label { font-family: var(--f-naglowek); font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--szary); margin-top: 8px; }
.karta-logowania input {
  font: inherit; font-size: 17px; padding: 11px 13px; width: 100%; min-width: 0;
  border: 1.5px solid var(--linia); border-radius: 8px; background: #fff; color: var(--tekst);
}
.karta-logowania input:focus { border-color: var(--ogien); outline: none; box-shadow: 0 0 0 3px rgba(228, 87, 18, .18); }
.karta-logowania button, .przycisk {
  font-family: var(--f-naglowek); font-weight: 600; font-size: 15px; letter-spacing: .02em;
  background: var(--ogien); color: #fff; border: 0; border-radius: 8px;
  padding: 12px 18px; cursor: pointer; text-decoration: none; text-align: center;
}
.karta-logowania button { margin-top: 18px; }
.karta-logowania button:hover, .przycisk:hover { background: var(--ogien-ciemny); }
.blad { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fbe9e7; color: var(--blad); font-size: 15px; }
.info { margin: 0; padding: 10px 12px; border-radius: 8px; background: #eef6ef; color: var(--ok); font-size: 15px; }
.drobne { margin: 10px 0 0; font-size: 14px; color: var(--szary); }

@media (max-width: 760px) {
  .logowanie { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 28px; padding-block: 32px; }
  .karta-logowania { justify-self: stretch; max-width: none; padding: 28px 22px; }
  .logowanie-opis { display: none; }
}

/* ---------- aplikacja: pasek + tresc ---------- */
.aplikacja { display: grid; grid-template-columns: 248px 1fr; min-height: 100%; }
.pasek {
  background: var(--wegiel); color: #e9e3dc;
  display: flex; flex-direction: column; gap: 28px;
  padding: 26px 18px;
  position: sticky; top: 0; height: 100vh;
}
.pasek .logo { width: 150px; padding-left: 6px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .menu .nieaktywny {
  font-family: var(--f-naglowek); font-size: 14px; font-weight: 500;
  padding: 9px 10px; border-radius: 7px; color: #e9e3dc; text-decoration: none;
}
.menu a:hover { background: var(--wegiel-2); }
.menu a.aktywny { background: var(--wegiel-2); color: #fff; box-shadow: inset 3px 0 0 var(--ogien); }
.menu .nieaktywny { color: #7f756c; }
.menu .nieaktywny small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.menu-naglowek { margin: 14px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8d8379; }
.kto { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 10px 0; border-top: 1px solid var(--wegiel-2); font-size: 14px; }
.kto a { color: #f3a27a; text-decoration: none; }
.kto a:hover { text-decoration: underline; }

.tresc {
  min-width: 0;
  padding-block: 36px 48px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 28px;
}
.powitanie .data { margin: 0 0 6px; color: var(--szary); font-size: 15px; }
.powitanie h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }

.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; max-width: 1100px; }
.karta {
  background: var(--karta); border: 1px solid var(--linia); border-radius: 12px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.karta header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.karta h3 { font-size: 18px; font-weight: 600; }
.karta p { margin: 0; color: var(--szary); }
.karta .przycisk { align-self: flex-start; margin-top: auto; }
.karta-wkrotce { background: transparent; border-style: dashed; }
.karta-wkrotce h3 { color: var(--szary); }

.status { font-family: var(--f-naglowek); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 99px; background: #eceae7; color: var(--szary); }
.status.ok { background: #e7f3e9; color: var(--ok); }
.status.pracuje { background: #fdf0dc; color: var(--praca); }
.status.blad { background: #fbe9e7; color: var(--blad); }

.liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.liczby div { background: var(--papier); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.liczby dt { font-size: 12px; color: var(--szary); }
.liczby dd { margin: 2px 0 0; font-family: var(--f-naglowek); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }

/* ---------- widok modulu ---------- */
.widok-modulu .tresc { padding-block: 18px 0; gap: 12px; height: 100vh; }
.modul-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.modul-naglowek h1 { font-size: 22px; }
.modul-naglowek a { font-size: 14px; }
.modul-ramka { flex: 1; width: 100%; border: 1px solid var(--linia); border-bottom: 0; border-radius: 10px 10px 0 0; background: #fff; }

@media (max-width: 860px) {
  .aplikacja { grid-template-columns: 1fr; }
  .pasek { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; }
  .pasek .logo { width: 110px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu-naglowek, .menu .nieaktywny { display: none; }
  .kto { margin: 0 0 0 auto; border: 0; padding: 0; }
  .widok-modulu .tresc { height: auto; }
  .modul-ramka { min-height: 80vh; }
  .liczby { grid-template-columns: 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }