/* ==========================================================================
   Master of Managers - demo próbne: wygląd ekranów platformy
   (logowanie i monitoring). Kolory i krój jak w aplikacji HOLOGRAM:
   jasny papier, grafitowy tekst, trzy kolory postaci jako akcenty.
   Nocny motyw: ustawienie systemu albo data-motyw="ciemny" na <html>.
   ========================================================================== */

:root{
  --bg:#fbfaf7;
  --bg-soft:#f2efe8;
  --bg-el:#ffffff;
  --bg-el-2:#f0ece3;
  --line:rgba(20,19,15,.14);
  --obwodka-mocna:rgba(20,19,15,.22);
  --text:#14130f;
  --text-2:#4b463d;
  --muted:#6b6459;
  --na-akcencie:#ffffff;
  --poswiata-gora:rgba(47,111,208,.07);
  --c-1:#d93a24;   /* czerwony */
  --c-2:#2e9c4a;   /* zielony */
  --c-3:#2f6fd0;   /* niebieski */
  --ok:#1f7a3a;   --ok-tlo:rgba(46,156,74,.12);
  --uwaga:#8a5a00; --uwaga-tlo:rgba(214,150,0,.14);
  --zle:#b3261e;  --zle-tlo:rgba(217,58,36,.12);
  --font:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]){
    --bg:#05060a; --bg-soft:#0b0d14; --bg-el:#0e121c; --bg-el-2:#141a28;
    --line:rgba(255,255,255,.10); --obwodka-mocna:rgba(255,255,255,.24);
    --text:#f2f4f8; --text-2:#cfd6e4; --muted:#8b93a4; --na-akcencie:#06070b;
    --poswiata-gora:rgba(58,120,255,.10);
    --c-1:#ff2e3f; --c-2:#5ce838; --c-3:#3aa0ff;
    --ok:#7be08f; --ok-tlo:rgba(92,232,56,.12);
    --uwaga:#ffc95c; --uwaga-tlo:rgba(255,190,60,.13);
    --zle:#ff7a70; --zle-tlo:rgba(255,46,63,.14);
    color-scheme:dark;
  }
}
:root[data-motyw="ciemny"]{
  --bg:#05060a; --bg-soft:#0b0d14; --bg-el:#0e121c; --bg-el-2:#141a28;
  --line:rgba(255,255,255,.10); --obwodka-mocna:rgba(255,255,255,.24);
  --text:#f2f4f8; --text-2:#cfd6e4; --muted:#8b93a4; --na-akcencie:#06070b;
  --poswiata-gora:rgba(58,120,255,.10);
  --c-1:#ff2e3f; --c-2:#5ce838; --c-3:#3aa0ff;
  --ok:#7be08f; --ok-tlo:rgba(92,232,56,.12);
  --uwaga:#ffc95c; --uwaga-tlo:rgba(255,190,60,.13);
  --zle:#ff7a70; --zle-tlo:rgba(255,46,63,.14);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;font-family:var(--font);color:var(--text);background:var(--bg);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 50% -10%,var(--poswiata-gora) 0%,transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}

/* --- znak Master of Managers ------------------------------------------- */
.znak{display:flex;align-items:center;gap:14px}
.znak__kropki{display:flex;gap:6px}
.znak__kropki i{display:block;width:12px;height:12px;border-radius:50%}
.znak__kropki i:nth-child(1){background:var(--c-1)}
.znak__kropki i:nth-child(2){background:var(--c-2)}
.znak__kropki i:nth-child(3){background:var(--c-3)}
.znak__napis{font:600 1.55rem/1.05 Georgia,"Times New Roman",serif;letter-spacing:.01em}
.znak__pod{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* --- ekran logowania ------------------------------------------------------ */
.logowanie{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px 40px;gap:22px}
.karta{width:100%;max-width:430px;background:var(--bg-el);border:1px solid var(--line);border-radius:22px;
  padding:26px 22px 24px;box-shadow:0 1px 0 rgba(20,19,15,.03),0 18px 40px -26px rgba(20,19,15,.35)}
@media (min-width:480px){.karta{padding:32px 30px 28px}}
.karta h1{font-size:1.45rem;margin-bottom:6px}
.karta .podtytul{color:var(--muted);font-size:.95rem;margin-bottom:20px}

.zakladki{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--bg-el-2);margin-bottom:20px}
.zakladki button{border:0;background:transparent;padding:10px 8px;border-radius:10px;cursor:pointer;
  font-size:.92rem;color:var(--muted);transition:background-color .2s,color .2s}
.zakladki button[aria-selected="true"]{background:var(--bg-el);color:var(--text);box-shadow:0 1px 3px rgba(20,19,15,.12)}

.pole{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pole label{font-size:.85rem;color:var(--text-2)}
.pole input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--obwodka-mocna);
  background:var(--bg);font-size:1rem;transition:border-color .2s}
.pole input:focus{outline:none;border-color:var(--c-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-3) 22%,transparent)}
.pole__haslo{position:relative}
.pole__haslo input{padding-right:84px}
.pole__pokaz{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);font-size:.8rem;padding:8px 10px;border-radius:8px;cursor:pointer}
.pole__podpowiedz{font-size:.8rem;color:var(--muted)}

.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 18px;border-radius:999px;border:1px solid var(--text);background:var(--text);color:var(--bg);
  font-size:1rem;font-weight:500;cursor:pointer;transition:transform .15s var(--ease),opacity .2s;text-decoration:none}
.przycisk:active{transform:scale(.98)}
.przycisk[disabled]{opacity:.55;cursor:progress}
.przycisk--jasny{background:transparent;color:var(--text);border-color:var(--obwodka-mocna)}
.przycisk--maly{width:auto;padding:8px 14px;font-size:.85rem}
.przycisk--niebezpieczny{background:transparent;color:var(--zle);border-color:currentColor}
.link{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.88rem}
.rzad{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stos{display:flex;flex-direction:column;gap:10px}
.miedzy{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}

.komunikat{border-radius:12px;padding:11px 14px;font-size:.92rem;margin-bottom:16px;border:1px solid transparent}
.komunikat--zle{background:var(--zle-tlo);color:var(--zle);border-color:color-mix(in srgb,var(--zle) 30%,transparent)}
.komunikat--ok{background:var(--ok-tlo);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.komunikat--info{background:var(--bg-el-2);color:var(--text-2)}

.atrapa{max-width:430px;width:100%;font-size:.82rem;color:var(--uwaga);background:var(--uwaga-tlo);
  border:1px dashed color-mix(in srgb,var(--uwaga) 45%,transparent);border-radius:14px;padding:10px 14px}
.atrapa b{font-weight:600}
.atrapa code{font-size:.8rem}

.urzadzenia{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.urzadzenie{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.urzadzenie__nazwa{font-weight:500;font-size:.95rem}
.urzadzenie__kiedy{font-size:.8rem;color:var(--muted)}
.znaczek{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
  background:var(--ok-tlo);color:var(--ok);margin-left:6px;vertical-align:1px}

.stopka{font-size:.78rem;color:var(--muted);text-align:center;max-width:430px}

/* --- monitoring ----------------------------------------------------------- */
.mon{max-width:1240px;margin:0 auto;padding:22px 16px 60px}
@media (min-width:900px){.mon{padding:28px 40px 80px}}
.mon__gora{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.mon h2{font-size:1.15rem;margin:34px 0 4px}
.mon .opis-sekcji{color:var(--muted);font-size:.86rem;margin-bottom:12px}
.kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kafel{background:var(--bg-el);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.kafel__etykieta{font-size:.78rem;color:var(--muted)}
.kafel__liczba{font-size:1.9rem;font-weight:500;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kafel__dopisek{font-size:.78rem;color:var(--muted)}
.tabela-ramka{background:var(--bg-el);border:1px solid var(--line);border-radius:16px;overflow:auto;max-height:520px}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
td.zawijaj{white-space:normal;min-width:240px;max-width:520px;word-break:break-word}
th{position:sticky;top:0;background:var(--bg-el);font-weight:500;color:var(--muted);font-size:.78rem;z-index:1}
tbody tr:hover{background:var(--bg-soft)}
td.liczba,th.liczba{text-align:right;font-variant-numeric:tabular-nums}
.pusto{padding:18px;color:var(--muted);font-size:.88rem}
.status{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;padding:2px 9px;border-radius:999px;white-space:nowrap}
.status--ok{background:var(--ok-tlo);color:var(--ok)}
.status--uwaga{background:var(--uwaga-tlo);color:var(--uwaga)}
.status--zle{background:var(--zle-tlo);color:var(--zle)}
.status--neutralny{background:var(--bg-el-2);color:var(--text-2)}
.pasek{display:inline-block;height:8px;border-radius:4px;background:var(--text-2);opacity:.55;vertical-align:middle;margin-right:8px}
.wyszarzone{color:var(--muted)}
.zaproszenia-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.zaproszenia-form textarea{flex:1 1 280px;min-height:64px;border-radius:12px;border:1px solid var(--obwodka-mocna);background:var(--bg);padding:10px 12px}
.blokada{max-width:460px;margin:12vh auto 0;padding:0 16px;text-align:center}
.blokada .karta{text-align:left}
.znak__logo{display:block;width:72px;height:72px;border-radius:50%}
/* nagłówek monitoringu - logo W05 jak na ekranie logowania (tusz + twardy cień) */
.mon .znak__logo{width:56px;height:56px;border:3px solid #0a0a08;background:#fbfaf7;box-shadow:3px 3px 0 #0a0a08}
.mon .znak__napis{font-weight:700}