/* ===========================================================================
   GitCloud - JEDEN plik motywu (scalony 2026-08-24 z theme-black.css +
   theme-color.css, audyt UI standaryzacji) zamiast dwóch równoległych,
   ręcznie synchronizowanych kopii. Wybór motywu (Kolor/Czarny) to atrybut
   [data-theme] na <html>, ustawiany server-side (patrz $gcTheme w index.php)
   - serwer ZAWSZE zna motyw przy renderze, więc nie ma tu typowego dla
   prefers-color-scheme problemu "unstamped state"/migotania.

   Struktura:
   - wspólny :root - tokeny NIEKOLOROWE (layout/spacing/animacje) + defaulty
     kolorowe (= motyw "Czarny", zachowanie historyczne gdy [data-theme]
     jeszcze nie doszedł/JS wyłączony)
   - :root[data-theme="black"] / :root[data-theme="color"] - override tokenów
     KOLOROWYCH, obie gałęzie równorzędne (żadna nie jest "defaultem" w
     runtime - index.php zawsze wypisuje jeden z dwóch atrybutów)
   - --neon-rgb/--neon2-rgb/--muted-rgb (składowe R,G,B bez "rgb()") - do
     zapisu rgba(var(--neon-rgb), .14) w miejscach, które dawniej miały
     osobny hardcoded rgba() na motyw (141 takich miejsc wg audytu diff) */
:root{
  color-scheme: dark;
  --frame-anim:none;
  --panel-radius:16px;
  --panel-shadow:0 10px 28px rgba(0,0,0,.38);
  --row-divider:1px solid rgba(255,255,255,.06);
  --cell-pad-y:6px;
  --cell-pad-x:10px;
  --status-port-up:#22c55e;
  --status-port-down:#ef4444;
  --loader-height:8px;

  /* Skala odstepow (2026-08-28) - po serii recznych "o wlos wiecej/mniej"
     poprawek paddingu paska szukajki nad tabela, user poprosil o systemowe
     rozwiazanie zamiast kolejnej punktowej podkretki (patrz shadcn/ui
     DataTable, Ant Design Table - JEDNA skala odstepow uzywana wszedzie,
     nie osobna wartosc per komponent). Krok 4px, nazwy numeryczne zamiast
     t-shirt s/m/l - lzej zmapowac "o ile px zmienic". Dodajac nowy odstep
     w toolbarze/tabeli - UZYJ jednej z tych wartosci, nie nowego hardcoded px. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;

  /* Defaulty = motyw "Czarny" (patrz :root[data-theme="black"] niżej -
     identyczne wartości, potrzebne TU jako fallback zanim [data-theme]
     dotrze do drzewa, np. bardzo wczesny render/brak JS). */
  --bg:#080808;
  --fg:#ececec;
  --muted:#b0b0b0;
  --neon:#969696;
  --neon2:#d5d5d5;
  --neon-rgb:150,150,150;
  --neon2-rgb:150,150,150;
  --muted-rgb:170,170,170;
  --edge:#232323;
  --card:#1c1c1c;
  --accent:#b0b0b0;
  --frame-glow-base:0 0 3px rgba(150,150,150,0.18), 0 0 5px rgba(150,150,150,0.14), 0 0 18px rgba(0,0,0,1) inset;
  --frame-glow-peak:0 0 3.5px rgba(150,150,150,0.22), 0 0 5.5px rgba(150,150,150,0.16), 0 0 18px rgba(0,0,0,1) inset;
  --frame-border-base:rgba(150,150,150,0.14);
  --frame-border-peak:rgba(150,150,150,0.18);
  --panel-bg:rgba(20,20,20,.94);
  --panel-border:1px solid rgba(150,150,150,.22);
  --surface-bg:#141414;
  --surface-border:1px solid rgba(255,255,255,.14);
  --status-port-unused:#666666;
  --chart-in:#a8a8a8;
  --chart-grid-h:rgba(255,255,255,0.14);
  --chart-grid-v:rgba(255,255,255,0.09);
  --chart-label:#c2c2c2;
  --chart-single:#d4d4d4;
  --chart-single-grid:rgba(255,255,255,.12);
  --chart-single-label:#a8a8a8;
}

:root[data-theme="black"]{
  --bg:#080808;
  --fg:#ececec;
  --muted:#b0b0b0;
  --neon:#969696;
  --neon2:#d5d5d5;
  --neon-rgb:150,150,150;
  --neon2-rgb:150,150,150;
  --muted-rgb:170,170,170;
  --edge:#232323;
  --card:#1c1c1c;
  --accent:#b0b0b0;
  --frame-glow-base:0 0 3px rgba(150,150,150,0.18), 0 0 5px rgba(150,150,150,0.14), 0 0 18px rgba(0,0,0,1) inset;
  --frame-glow-peak:0 0 3.5px rgba(150,150,150,0.22), 0 0 5.5px rgba(150,150,150,0.16), 0 0 18px rgba(0,0,0,1) inset;
  --frame-border-base:rgba(150,150,150,0.14);
  --frame-border-peak:rgba(150,150,150,0.18);
  --panel-bg:rgba(20,20,20,.94);
  --panel-border:1px solid rgba(150,150,150,.22);
  --surface-bg:#141414;
  --surface-border:1px solid rgba(255,255,255,.14);
  --status-port-unused:#666666;
  --chart-in:#a8a8a8;
  --chart-grid-h:rgba(255,255,255,0.14);
  --chart-grid-v:rgba(255,255,255,0.09);
  --chart-label:#c2c2c2;
  --chart-single:#d4d4d4;
  --chart-single-grid:rgba(255,255,255,.12);
  --chart-single-label:#a8a8a8;
}

:root[data-theme="color"]{
  --bg:#05070c;
  --fg:#d9e1ff;
  --muted:#9aa4c7;
  --neon:#1c74ff;
  --neon2:#5aa4ff;
  --neon-rgb:28,116,255;
  --neon2-rgb:90,164,255;
  --muted-rgb:120,160,220;
  --edge:#121a2c;
  --card:#0d1016;
  --accent:#7aa2ff;
  --frame-glow-base:0 0 3px rgba(28,116,255,0.18), 0 0 5px rgba(28,116,255,0.14), 0 0 18px rgba(0,0,0,1) inset;
  --frame-glow-peak:0 0 3.5px rgba(28,116,255,0.22), 0 0 5.5px rgba(28,116,255,0.16), 0 0 18px rgba(0,0,0,1) inset;
  --frame-border-base:rgba(28,116,255,0.14);
  --frame-border-peak:rgba(28,116,255,0.18);
  --panel-bg:rgba(6,9,16,.92);
  --panel-border:1px solid rgba(90,164,255,.22);
  --surface-bg:#141414;
  --surface-border:1px solid rgba(255,255,255,.14);
  --status-port-unused:#5b6472;
  --chart-in:#22e5ff;
  --chart-grid-h:rgba(90,164,255,0.16);
  --chart-grid-v:rgba(90,164,255,0.10);
  --chart-label:#7fa0c0;
  --chart-single:#7fb8ff;
  --chart-single-grid:rgba(127,184,255,.12);
  --chart-single-label:#5f7590;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,Segoe UI,system-ui,Arial;
  font-size:15px;
  zoom:1.1;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
}
html.gc-modal-open,
body.gc-modal-open{
  overflow:hidden;
}
a{color:var(--neon);text-decoration:none}

.bg-anim{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
body::before{content:none;}
.bg-anim::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(620px 620px at 20% 20%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(520px 520px at 82% 12%, rgba(220,220,230,.12), transparent 60%),
    radial-gradient(680px 680px at 76% 72%, rgba(255,255,255,.14), transparent 64%),
    radial-gradient(460px 460px at 12% 78%, rgba(200,200,210,.10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 8px);
  mix-blend-mode:screen;
  opacity:.55;
  filter:blur(.3px);
}
.bg-anim::after{
  content:"";
  position:absolute;
  inset:-14%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 35%, rgba(200,200,210,.06) 65%, rgba(0,0,0,0) 95%),
    repeating-linear-gradient(105deg, transparent 0 68%, rgba(255,255,255,.05) 68.5% 69.2%, transparent 69.2% 100%);
  background-size:120% 200%, 260% 160%;
  opacity:.28;
}
.wrap::before{
  content:"";
  position:fixed;
  inset:-16%;
  background:
    radial-gradient(30% 34% at 62% 16%, rgba(255,255,255,.13), transparent 65%),
    radial-gradient(24% 28% at 12% 60%, rgba(210,210,220,.10), transparent 62%);
  opacity:.4;
  mix-blend-mode:screen;
  pointer-events:none;
}

.wrap{
  max-width:none;
  width:100%;
  margin:0;
  padding:12px 24px 20px;
  display:flex;
  flex-direction:column;
}

/* Top board */
.board{
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  gap:22px;
  align-items:center;
  border:none;
  border-radius:0;
  padding:0;
  margin-top:6px;
  background:transparent;
  box-shadow:none;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.board > *{min-width:0}
.board .breath{
  display:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:2;
  margin-left:0;
}
.logo-link{display:flex;align-items:center;text-decoration:none}
.logo-text{
  position:relative;
  z-index:2;
  font-weight:900;
  font-size:clamp(32px,3.4vw,36px);
  letter-spacing:.3px;
  line-height:1;
  animation:none;
  text-shadow:none;
  white-space:nowrap;
}
.logo-text .git{ color:var(--neon2); }
.logo-text .cloud{ color:#ffffff; }
.logo-storm{
  display:none;
}

nav.board-nav{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  position:relative;
  z-index:2;
}
.cw-widget{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#a9a9a9;
  white-space:nowrap;
}
.cw-date{
  font-variant-numeric:tabular-nums;
  color:#a9a9a9;
}
.cw-time{
  font-variant-numeric:tabular-nums;
  color:#e7e7e7;
  font-weight:600;
  letter-spacing:.02em;
}
/* Powiadomienia na żywo (2026-08-26) - dzwonek widoczny w topbarze na
   KAŻDEJ stronie (renderowany raz, poza sekcjami), otwiera dropdown listy
   nieprzeczytanych `notifications` + świeżych ai_alerts (od ostatniego
   otwarcia dzwonka). Bazowe (Czarny/dark) style - override dla
   [data-theme="color"] dalej w tym pliku, obok .auth-user-chip. */
.gc-notif-bell-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.gc-notif-bell-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:22px;
  height:22px;
  padding:0;
  border-radius:10px;
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.gc-notif-bell-btn:hover{
  color:var(--fg);
  background:rgba(255,255,255,.08);
}
.gc-notif-bell-count{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:16px;
  height:16px;
  padding:0 3px;
  border-radius:12px;
  background:#ff5b5b;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
}
.gc-notif-dropdown{
  position:fixed;
  width:340px;
  max-width:calc(100vw - 24px);
  max-height:420px;
  overflow-y:auto;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  z-index:500;
}
.gc-notif-dropdown-header{
  padding:10px 14px;
  font-size:12px;
  font-weight:700;
  color:#e7e7e7;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gc-notif-dropdown-list{
  display:flex;
  flex-direction:column;
}
.gc-notif-empty{
  padding:20px 14px;
  font-size:12px;
  color:#888;
  text-align:center;
}
.gc-notif-cell{
  position:relative;
  padding:10px 30px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  border-left:3px solid var(--status-port-unused);
  cursor:pointer;
  transition:background-color .15s ease, opacity .18s ease, max-height .18s ease, padding .18s ease, border-width .18s ease;
  max-height:200px;
  overflow:hidden;
}
.gc-notif-cell.gc-notif-cell-closing{
  opacity:0;
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
}
.gc-notif-cell.sev-critical{ border-left-color:#ff5b5b; }
.gc-notif-cell.sev-warning{ border-left-color:#ffbe5c; }
.gc-notif-cell:last-child{
  border-bottom:none;
}
.gc-notif-cell:hover{
  background:rgba(255,255,255,.05);
}
.gc-notif-cell-top{
  margin-bottom:4px;
}
.gc-notif-cell-badge{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid currentColor;
}
.gc-notif-cell-badge-critical{ color:#ff5b5b; }
.gc-notif-cell-badge-warning{ color:#ffbe5c; }
.gc-notif-cell-badge-info{ color:#9a9a9a; }
.gc-notif-cell-title{
  font-size:12.5px;
  font-weight:600;
  color:#f0f0f0;
  margin-bottom:2px;
}
.gc-notif-cell-desc{
  font-size:11px;
  color:#a9a9a9;
  margin-bottom:4px;
}
.gc-notif-cell-time{
  font-size:10px;
  color:#777;
}
.gc-notif-cell-close{
  position:absolute;
  top:8px;
  right:8px;
  width:18px;
  height:18px;
  line-height:16px;
  text-align:center;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#888;
  font-size:14px;
  cursor:pointer;
}
.gc-notif-cell-close:hover{
  background:rgba(255,255,255,.1);
  color:#e7e7e7;
}
.auth-user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#f7f7f7;
}
.auth-user-name{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
/* Zastępuje emoji 👤 (2026-08-24, zgłoszenie użytkownika: kolor emoji nie
   dało się dopasować do motywu strony - to bitmapa/kolorowy glif renderowany
   przez system, nie reaguje na `color`) - inline SVG z stroke="currentColor"
   dziedziczy ten sam --neon2, co "Git" w logo (patrz .logo-text .git),
   więc wygląda spójnie w OBU motywach (Kolor/Czarny) i na każdej platformie. */
.auth-user-icon{
  color:var(--neon2);
  flex-shrink:0;
}
.auth-user-group{
  color:#a9a9a9;
  font-weight:400;
}
.auth-logout-link{
  color:#f7f7f7;
  text-decoration:none;
  border:1px solid rgba(150,150,150,.35);
  border-radius:10px;
  padding:4px 10px;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.auth-logout-link:hover{
  background:rgba(150,150,150,.2);
  border-color:rgba(150,150,150,.9);
  box-shadow:0 0 8px rgba(150,150,150,.55), 0 0 18px rgba(150,150,150,.35);
}

/* Card */
.card{
  position:relative;
  border:none;
  border-radius:0;
  background:transparent;
  padding:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  margin-top:0;
  min-height:0;
  /* Świadomie BEZ flex-grow (nie "1 1 auto") - ta sekcja ma zawsze mieć
     naturalną wysokość swojej treści, żeby stopka "Powered by GitCloud.pl"
     (patrz .powered-under, tuż pod tym elementem w DOM) zawsze trzymała się
     bezpośrednio pod treścią/ramką - także gdy ramka tabeli jest ręcznie
     zmniejszona uchwytem "resize" (patrz .device-frame). Wcześniej flex-grow
     rozciągało tę sekcję na cały ekran niezależnie od realnej wysokości
     treści, co zostawiało dużą pustą przerwę między skróconą ramką a stopką. */
  flex:0 1 auto;
}
.card-breath{
  display:none;
}
.card-storm{
  display:none;
}
.card-storm .strike{
  stroke:rgba(25,255,154,.55);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:120;
}
.card-storm .s2{animation-delay:1.2s}
.card-storm .s3{animation-delay:2.6s}
.card-storm .s4{animation-delay:3.9s}

/* Header row inside card */
.dhcp-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin:8px 0 4px;
}
.menu-wrapper{
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px; /* slightly higher than previous drop */
  margin-bottom:16px; /* add space between menu and panel on non-dashboard views */
}
.menu-strip{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  flex-shrink:0;
  position:relative;
}
.menu-wrapper .dhcp-meta-right{
  margin-left:auto;
  align-items:flex-start;
}

/* Title */
/* Menu */
.menu-pill-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.menu-pill{
  /* Zmniejszone na prosbe uzytkownika 2026-09-06 - pasek zrobil sie ciasny
     po dodaniu kolejnych grup (Infrastruktura, Automatyzacje+AI Router). */
  font-size:11.5px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(150,150,150,.18);
  background:var(--panel-bg);
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.menu-pill:hover{
  background:rgba(150,150,150,.08);
  color:var(--fg);
  border-color:rgba(150,150,150,.4);
}
.menu-pill.active{
  border-color:var(--neon2);
  color:var(--fg);
  background:rgba(150,150,150,.1);
}

/* Pigułka z podsekcjami (audyt UI 2026-08-24): strzałka ▾ obok tekstu +
   hover-dropdown reszty podsekcji, zamiast osobnego .inv-switcher wewnątrz
   strony. Renderowane przez render_menu_pill_group() - patrz access_lib.php.
   Strzałka celowo osobnym <span>, nie pseudo-elementem - musi się obracać
   niezależnie od reszty pigułki przy hover/focus. */
.menu-pill-group{
  position:relative;
  flex-shrink:0;
}
.menu-pill-has-sub{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.menu-pill-arrow{
  font-size:9px;
  line-height:1;
  color:var(--muted);
  transition:transform .16s ease-out, color .15s ease;
}
.menu-pill-group:hover .menu-pill-arrow,
.menu-pill-group:focus-within .menu-pill-arrow{
  transform:rotate(180deg);
}
.menu-pill-has-sub:hover .menu-pill-arrow{
  color:var(--fg);
}
.menu-pill-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  z-index:30;
  display:none;
  flex-direction:column;
  /* BEZ gap - 2px odstępu między pozycjami tworzyło widoczne "szczeliny" bez
     własnego tła, przez które prześwitywała treść strony pod spodem
     (zgłoszenie użytkownika ze zdjęciem 2026-08-24). Separator = border-bottom
     na .menu-pill-dropdown-item, kontener ma WŁASNE nieprzezroczyste tło jako
     dodatkowe zabezpieczenie niezależnie od tła pozycji. */
  margin-top:6px;
  background:var(--panel-bg);
  border:1px solid rgba(150,150,150,.28);
  border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.5);
  overflow:hidden;
}
.menu-pill-group::after{
  /* niewidzialny "mostek" nad dropdownem, żeby hover nie gubił się w 6px
     odstępie między pigułką a listą (::before/margin same by to nie dały -
     potrzebny realny obszar łapiący :hover) */
  content:'';
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:8px;
}
.menu-pill-group:hover .menu-pill-dropdown,
.menu-pill-group:focus-within .menu-pill-dropdown{
  display:flex;
}
.menu-pill-dropdown-item{
  display:block;
  padding:8px 14px;
  font-size:13px;
  color:#aeaeae;
  text-decoration:none;
  white-space:nowrap;
  background:var(--panel-bg);
  border-left:2px solid transparent;
  border-bottom:1px solid rgba(150,150,150,.1);
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;
}
.menu-pill-dropdown-item:first-child{
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
.menu-pill-dropdown-item:last-child{
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-bottom:none;
}
.menu-pill-dropdown-item:hover{
  background:rgba(150,150,150,.1);
  color:#e7e7e7;
}
.menu-pill-dropdown-item.active{
  color:#efefef;
  background:rgba(150,150,150,.14);
  border-left-color:var(--neon);
}


/* right area (local controls) */
.dhcp-meta-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

/* buttons */
.btn{
  padding:8px 16px;
  border-radius:16px;
  border:1px solid var(--neon);
  background:linear-gradient(180deg,rgba(150,150,150,.18),rgba(0,0,0,0));
  color:var(--fg);
  cursor:pointer;
  box-shadow:
    0 0 10px rgba(150,150,150,.22) inset,
    0 0 10px rgba(0,255,166,.1);
  transition:transform .2s, box-shadow .25s, border-color .25s, background .2s, opacity .2s;
  font-size:13px;
  white-space:nowrap;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 18px var(--neon2), 0 0 28px var(--neon);
}
.btn-secondary{
  border-color:rgba(105,105,105,0.9);
  background:linear-gradient(180deg,rgba(105,105,105,.18),rgba(0,0,0,0));
}
.btn-disabled{
  opacity:.35;
  pointer-events:none;
  border-color:#282828;
}


.app-warning{
  padding:12px 14px;
  border:1px dashed rgba(255,190,92,.6);
  background:rgba(255,190,92,.08);
  color:#ffdca3;
  border-radius:16px;
  box-shadow:0 0 12px rgba(255,190,92,.2);
}

.devices-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* Zjednoczenie paska szukajki + tabeli w JEDEN panel (2026-08-28, zgloszenie
   uzytkownika: dwa oddzielne prostokaty - pasek narzedzi NAD tabela - mialy
   zostac scalone w jedna karte). Selektor bezposredniego dziecka (>) celowo -
   .device-frame/.gc-frame UZYWANE TEZ poza .devices-panel (np. w modalu
   urzadzenia sieciowego, siec-port-modal-main), tam ma zostac WLASNA ramka
   bez zmian. Wewnatrz .devices-panel pasek szukajki staje sie "naglowkiem"
   karty (dolny border zamiast oddzielnej ramki), tabela traci WLASNA
   ramke/tlo/cien - dziedziczy je z rodzica .devices-panel, stykajac sie
   bezposrednio z paskiem (bez gap). */
.devices-panel:has(> .inventory-search-wrap){
  border:var(--surface-border);
  border-radius:var(--panel-radius);
  background:var(--surface-bg);
  background-clip:padding-box;
  box-shadow:var(--panel-shadow);
  gap:0;
  overflow:hidden;
  transform:translateZ(0);
}
.devices-panel:has(> .inventory-search-wrap) > .inventory-search-wrap{
  padding:var(--space-2) var(--space-3) 0;
  margin:0;
}
.devices-panel:has(> .inventory-search-wrap) > .device-frame,
.devices-panel:has(> .inventory-search-wrap) > .gc-frame{
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
/* Naglowek tabeli mial WLASNA gorna ramke (border-top na th, patrz
   .devices-table th/.gc-table th) - zaprojektowana gdy tabela byla
   OSOBNYM blokiem z wlasnym obramowaniem. Po zjednoczeniu panelu (wyzej)
   ta linia zostala jedyna widoczna kreska tuz pod paskiem szukajki, nie
   dopasowana do niczego innego - usunieta TYLKO w kontekscie zjednoczonego
   panelu, gdzie naglowek i tak stoi bezposrednio pod paskiem szukajki. */
.devices-panel:has(> .inventory-search-wrap) > .device-frame .devices-table th,
.devices-panel:has(> .inventory-search-wrap) > .device-frame .gc-table th,
.devices-panel:has(> .inventory-search-wrap) > .gc-frame .devices-table th,
.devices-panel:has(> .inventory-search-wrap) > .gc-frame .gc-table th{
  border-top:none;
}
.device-frame,
.gc-frame{
  border:var(--surface-border);
  border-radius:var(--panel-radius);
  background:var(--surface-bg);
  padding:12px;
  box-shadow:var(--panel-shadow);
  height:calc(100vh - 320px);
  min-height:160px;
  overflow:auto;
  resize:vertical;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #101010;
}
.mapa-frame{
  display:flex;
  resize:none;
  position:relative;
}
.mapa-canvas-wrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  width:100%;
}
.mapa-canvas-wrap #mapa-canvas{
  width:100%;
  height:100%;
}
/* Domyślne kontrolki Google Maps (zoom +/-, fullscreen) są białymi
   kwadratami niezależnie od stylu mapy (to UI, nie warstwa danych) -
   przyciemniamy je przez filter, klasa dodawana przez JS w mapie. */
.mapa-frame .mapa-dark-control{
  filter: invert(88%) hue-rotate(180deg) brightness(0.85) contrast(1.05);
  border-radius:10px;
}
.mapa-legend{
  position:absolute;
  top:16px;
  right:16px;
  bottom:16px;
  width:220px;
  z-index:6;
  background:rgba(10,10,14,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  padding:14px 12px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mapa-legend-title{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:6px;
  margin-top:4px;
}
.mapa-legend-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 2px;
  font-size:12px;
  color:var(--fg);
  cursor:pointer;
  user-select:none;
}
.mapa-legend-row input{
  cursor:pointer;
  flex-shrink:0;
}
.mapa-legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
.mapa-legend-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.mapa-legend-sep{
  border-top:1px solid rgba(255,255,255,.12);
  margin:8px 0;
}
.mapa-cables-status{
  color:var(--muted);
  font-size:11px;
  padding-left:29px;
  min-height:14px;
}
.mapa-search-input{
  width:100%;
  box-sizing:border-box;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:var(--fg);
  font-size:12px;
  padding:7px 9px;
  margin-bottom:10px;
}
.mapa-search-input::placeholder{
  color:var(--muted);
}
.mapa-search-input:focus{
  outline:none;
  border-color:rgba(255,255,255,.35);
}
.mapa-search-results{
  background:rgba(10,10,14,.9);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  margin:-6px 0 10px;
  max-height:260px;
  overflow-y:auto;
}
.mapa-search-result{
  padding:7px 9px;
  font-size:12px;
  color:var(--fg);
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mapa-search-result:last-child{
  border-bottom:none;
}
.mapa-search-result:hover{
  background:rgba(255,255,255,.08);
}
.mapa-search-result-type{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.gc-empty-state{
  color:var(--muted);
}
/* Popup listy urządzeń po kliknięciu w marker serwerowni na zakładce Mapa -
   niestandardowy panel (nie natywny InfoWindow Google) w motywie GitCloud. */
.mapa-popup{
  position:absolute;
  top:16px;
  left:16px;
  z-index:5;
  width:300px;
  max-width:calc(100% - 32px);
  max-height:calc(100% - 32px);
  overflow:auto;
  background:rgba(10,10,14,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  padding:12px 14px;
  color:var(--fg);
  font-size:13px;
}
.mapa-popup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  font-weight:600;
  font-size:14px;
  color:var(--fg);
}
.mapa-popup-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0 0 0 8px;
}
.mapa-popup-close:hover{
  color:var(--fg);
}
.mapa-popup-addr{
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
  margin-bottom:10px;
}
.mapa-popup-loading,
.mapa-popup-empty{
  color:var(--muted);
  font-size:12px;
  padding:6px 0;
}
.mapa-popup-table{
  width:100%;
  border-collapse:collapse;
}
.mapa-popup-table td{
  padding:5px 4px;
  border-bottom:var(--row-divider);
  font-size:12px;
  vertical-align:middle;
}
.mapa-popup-devname{
  color:var(--fg);
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mapa-popup-devip{
  color:var(--muted);
  white-space:nowrap;
}
.mapa-firma-card-name{
  color:#e0b0ff;
  font-weight:600;
  font-size:13px;
  margin-bottom:4px;
}
.mapa-firma-card-row{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.mapa-firma-ip{
  color:var(--fg);
  font-size:12px;
  font-family:monospace;
}
.mapa-topo-slot{
  margin-top:10px;
  padding-top:8px;
  border-top:var(--row-divider);
}
.mapa-topo-title{
  color:var(--fg);
  font-weight:600;
  font-size:12px;
  margin-bottom:6px;
}
.mapa-topo-list{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mapa-topo-hop{
  color:var(--muted);
  font-size:12px;
  padding-left:2px;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding-bottom:4px;
}
.mapa-topo-hop-name{
  color:var(--fg);
}
.mapa-topo-hop-meta{
  color:var(--muted);
  font-size:11px;
  padding-left:18px;
  font-family:monospace;
}
.mapa-topo-hop-badge{
  margin-left:18px;
  display:inline-block;
  width:fit-content;
  font-size:10px;
  color:#e0a020;
  background:rgba(224,160,32,0.12);
  border:1px solid rgba(224,160,32,0.4);
  border-radius:8px;
  padding:1px 5px;
}
.mapa-section{
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:var(--row-divider);
}
.mapa-section:last-of-type{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}
.mapa-section-title{
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:5px;
}
.mapa-inline-icon{
  vertical-align:-2px;
  color:var(--muted);
  flex-shrink:0;
}
.mapa-topo-hop-name .mapa-inline-icon{
  color:#4da6ff;
}
.device-frame::-webkit-scrollbar,
.gc-frame::-webkit-scrollbar{ width:10px; height:10px; }
.device-frame::-webkit-scrollbar-track,
.gc-frame::-webkit-scrollbar-track{
  background:#101010;
  border-radius:14px;
}
.device-frame::-webkit-scrollbar-thumb,
.gc-frame::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#96969688,#b0b0b088);
  border:1px solid #161616;
  border-radius:14px;
  box-shadow:inset 0 0 8px #96969655;
}
#inventory-magazyn-frame{
  height:auto;
  max-height:500px;
  resize:none;
}
.table-frame{
  padding:0;
  overflow:hidden;
}
.devices-table,
.gc-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  font-size:12.5px;
  line-height:1.25;
  --gc-cell-pad-y:3px;
  --gc-cell-pad-x:6px;
}
.devices-table th, .devices-table td,
.gc-table th, .gc-table td{
  padding:var(--gc-cell-pad-y) var(--gc-cell-pad-x);
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
  line-height:1.22;
  overflow:hidden;
  text-overflow:ellipsis;
}
.devices-table th,
.gc-table th{
  padding:calc(var(--gc-cell-pad-y) - 1px) var(--gc-cell-pad-x);
  font-size:12px;
  line-height:1.18;
  position:relative;
  border-right:1px solid rgba(150,150,150,.22);
  border-top:1px solid rgba(150,150,150,.22);
}
.devices-table th:first-child,
.gc-table th:first-child{
  border-left:1px solid rgba(150,150,150,.22);
}
/* Inwentaryzacja */
.inventory-search-wrap{
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.inventory-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
.log-refresh-meta{
  font-size:11px;
  color:#999999;
  white-space:nowrap;
}
.dashboard-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:4px 2px 12px;
}
.dashboard-empty{
  padding:24px;
  text-align:center;
  color:var(--muted);
}
.gc-notif-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 2px 10px;
}
/* AI Advisor - kompaktowy widget na Dashboard (2026-08-28, zgloszenie
   uzytkownika) - TYLKO licznik + link do pelnej sekcji ai-advisor, zadnej
   tresci sugestii tutaj (to byloby duplikowanie calej sekcji). Pokazywany
   TYLKO gdy sa pending sugestie (patrz warunek w dashboard_view.php) - puste
   info nie zasmieca strony startowej. */
.dashboard-ai-advisor-widget{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  margin-bottom:var(--space-1);
  border:var(--surface-border);
  border-radius:10px;
  background:var(--surface-bg);
  color:var(--fg);
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.dashboard-ai-advisor-widget:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
}
.dashboard-ai-advisor-widget-icon{
  display:flex;
  align-items:center;
  flex-shrink:0;
  color:#ffd166;
}
.dashboard-ai-advisor-widget-text{
  font-size:13px;
  flex:1;
}
.dashboard-ai-advisor-widget-arrow{
  color:var(--muted);
  flex-shrink:0;
}
/* Ostatnio rozwiazane alerty - widget na Dashboard (2026-08-28), ten sam
   jezyk wizualny co .dashboard-ai-advisor-widget powyzej (spojnosc dwoch
   widgetow obok siebie). Tresc licznika ustawiana w JS (patrz assets/js/
   app.js) po porownaniu z localStorage - PHP zawsze renderuje ten sam
   placeholder "Sprawdzanie...", zeby uniknac migotania tresci przy SSR
   (serwer nie zna stanu localStorage przegladarki). */
.dashboard-resolved-widget{
  margin-bottom:var(--space-1);
}
.dashboard-resolved-widget-link{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  border:var(--surface-border);
  border-radius:10px;
  background:var(--surface-bg);
  color:var(--fg);
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.dashboard-resolved-widget-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
}
.dashboard-resolved-widget-icon{
  display:flex;
  align-items:center;
  flex-shrink:0;
  color:var(--status-port-up);
}
.dashboard-resolved-widget-text{
  font-size:13px;
  flex:1;
}
.dashboard-resolved-widget-arrow{
  color:var(--muted);
  flex-shrink:0;
}
.gc-notif-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.gc-notif-row-text{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.gc-notif-row-title{
  font-size:13px;
}
.gc-notif-row-desc{
  font-size:12px;
  color:var(--muted);
}
.gc-notif-row-since{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.gc-notif-row-btn{
  flex-shrink:0;
}
.gc-notif-row-digest{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.gc-notif-row-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
}
.gc-notif-row-chevron{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  padding:2px 4px;
  flex-shrink:0;
  transition:transform .15s ease;
}
.gc-notif-row-digest.is-expanded .gc-notif-row-chevron{
  transform:rotate(180deg);
}
.gc-notif-row-body{
  display:none;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
}
.gc-notif-row-digest.is-expanded .gc-notif-row-body{
  display:block;
}
.gc-notif-row-digest .gc-notif-row-btn{
  align-self:flex-start;
}
.dashboard-card{
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--status-port-unused);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  transition:background .15s ease, opacity .3s ease;
}
.dashboard-card:hover{
  background:rgba(255,255,255,.045);
}
/* Live-refresh transitions (2026-08-26) - gcDashboardRefresh() diffs the
   card list instead of a wholesale innerHTML swap, so only cards that
   actually appeared/changed/disappeared get a transition; everything else
   stays untouched in the DOM (no page-wide flash/jump on every WS event).
   overflow:hidden only applies to the leaving state (needed for the
   max-height collapse animation) - NOT the base .dashboard-card, which
   would otherwise risk clipping expanded content (optics graph etc). */
.dashboard-card{
  transition:background .5s ease, opacity .35s ease, transform .35s ease, border-left-color .5s ease, box-shadow .5s ease;
}
.dashboard-card.gc-card-entering{
  opacity:0;
  transform:translateY(-6px);
}
.dashboard-card.gc-card-leaving{
  opacity:0;
  overflow:hidden;
  max-height:0;
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
  transition:background .15s ease, opacity .32s ease, transform .32s ease, max-height .32s ease, margin .32s ease, padding .32s ease, border-width .32s ease;
}
.dashboard-card.gc-card-updated-out{
  opacity:0;
  transform:translateY(-4px);
}
/* "Updated" highlight (2026-08-26) - OUTLINE only, never a background
   fill (user: "карточка вся внутри заполняется а надо что бы только по
   контуру шло"). One flat, calm neutral accent for every change - user
   asked to drop the red/green/amber-by-severity scheme ("изменить цвет
   на однолитый и не сильно нервирующий глаз нейтральный") - specific
   red/green semantics now live in .dashboard-card-delta instead. */
.dashboard-card.gc-card-updated{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Delta chip next to the title (2026-08-26) - shows how much a running
   counter in title moved since the last render (user: "красным +250 или
   зеленым -500"). Red for a rise, green for a drop - no attempt to guess
   whether a rise is "good" or "bad" for this particular alert type. */
.dashboard-card-delta{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  margin-left:6px;
  white-space:nowrap;
  vertical-align:baseline;
}
.dashboard-card-delta.is-up{ color:#ff5b5b; }
.dashboard-card-delta.is-down{ color:#22c55e; }
.dashboard-card.sev-critical{ border-left-color:#ff5b5b; }
.dashboard-card.sev-warning{ border-left-color:#ffbe5c; }
.dashboard-card.sev-info{ border-left-color:var(--status-port-unused); }
.dashboard-card.sev-resolved,
.dashboard-card.is-resolved{
  border-left-color:var(--status-port-up);
  background:rgba(34,197,94,.06);
}
/* Karty domyślnie zwinięte (tylko nagłówek+chipy) - potwierdzone z użytkownikiem
   2026-08-08, przy dużej liczbie alertów pełne karty były nieczytelne. */
.dashboard-card-header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
}
.dashboard-card-header-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0;
}
.dashboard-card-chevron{
  font-size:13px;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:2px 4px;
  flex-shrink:0;
  transition:transform .15s ease;
}
.dashboard-card.is-expanded .dashboard-card-chevron{
  transform:rotate(180deg);
}
.dashboard-card-body{
  display:none;
  flex-direction:column;
  gap:6px;
  padding:0 14px 12px;
}
.dashboard-card.is-expanded .dashboard-card-body{
  display:flex;
}
.dashboard-card-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
}
/* Severity chip on Dashboard cards is neutral gray (2026-08-26) - the card's
   own left border ALREADY encodes severity color (red=critical, amber=
   warning, see .dashboard-card.sev-*), so the "Krytyczne"/"Ostrzeżenie" text
   chip repeating the same info in red/amber was pure duplication (user:
   "цветовая мешанина ... надпись критичная и остшежение они нам ничего не
   дают по цветам определяем" - only the border should carry the color).
   .status-chip is shared with other tables site-wide, so scoped here rather
   than changed globally. */
.dashboard-card-top .status-chip{
  color:var(--muted);
  border-color:rgba(255,255,255,.25);
}
.dashboard-card-source{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.dashboard-card-since{
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
  flex-shrink:0;
}
.dashboard-wf-chip{
  font-size:11px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid;
  white-space:nowrap;
  flex-shrink:0;
}
.dashboard-wf-chip.wf-new{ color:#d6dcff; border-color:#7c93ff; }
.dashboard-wf-chip.wf-progress{ color:#b5b5b5; border-color:var(--status-port-unused); }
.dashboard-wf-chip.wf-verifying{ color:#ffdca3; border-color:#ffbe5c; }
.dashboard-wf-chip.wf-resolved{ color:#8ff0b4; border-color:var(--status-port-up); }
.status-chip.wf-resolved{ color:#8ff0b4; border-color:var(--status-port-up); }
.dashboard-card-title{
  font-size:14px;
  font-weight:600;
  color:var(--fg);
}
/* Two-line title (2026-08-26) - line 1: device/location/model, line 2:
   port + the actual fault symptom (user: "в первой строчке должно
   писаться название самого устройства его, локализация и модель а
   снизу уже порт и сама авария"). Line 2 is dimmer/smaller - it's the
   detail, line 1 is what you scan the list for. */
.dashboard-card-title-line1{
  font-weight:600;
}
/* Groupless cards (no "powiązanych alertów" badge) fold the date/status
   meta into the title's first line instead of a separate top row - one
   less real row of content than a grouped card, so it should render
   shorter, not padded to the same height (2026-08-26). */
.dashboard-card-title-line1-with-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.dashboard-card-title-line1-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.dashboard-card-title-line1-with-meta .dashboard-card-since{
  margin-left:auto;
}
.dashboard-card-title-line2{
  font-weight:400;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
}
.dashboard-card-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}
.dashboard-card-device{
  font-size:12px;
  color:var(--muted);
}
a.dashboard-card-device-link{
  display:block;
  color:var(--muted);
  text-decoration:none;
  cursor:pointer;
}
a.dashboard-card-device-link:hover{
  color:var(--neon);
  text-decoration:underline;
}
.dashboard-ai-analysis{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
  border-left:2px solid rgba(150,150,150,.3);
}
.dashboard-verify-note{
  font-size:11.5px;
  color:var(--muted);
  font-style:italic;
}
.dashboard-investigation-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
  border-left:2px solid rgba(92,200,150,.5);
}
.dashboard-investigation-note-head{
  font-weight:600;
  color:var(--fg, #ddd);
  margin-bottom:4px;
}
.dashboard-incident-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,190,92,.5);
  color:#ffbe5c;
  white-space:nowrap;
  flex-shrink:0;
}
.dashboard-incident-summary{
  font-size:12px;
  color:var(--fg);
  line-height:1.4;
  padding:8px 10px;
  /* Ciemne tlo zamiast pomaranczowego tinta (2026-08-20, druga runda
     poprawek - user chcial zeby "w srodku byl ciemny kolor") - akcent
     korelacji incydentu zostaje TYLKO w lewym pasku, srodek nie "swieci"
     pomaranczem. */
  background:rgba(15,15,15,.5);
  border-radius:10px;
  border-left:2px solid rgba(255,190,92,.6);
}
.dashboard-incident-children{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:2px;
}
.dashboard-incident-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11.5px;
  color:var(--muted);
}
.dashboard-incident-child-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-incident-child-temp{
  white-space:nowrap;
  flex-shrink:0;
  font-weight:600;
}
/* Kolorowanie temperatury site-wide (patrz gc_temp_class() w netdata_lib.php)
 * - zielony=ok, żółty=warning, czerwony=critical, zielony ten sam co
 * "health" gdzie indziej na stronie (NAS S.M.A.R.T. itp., patrz
 * [[gitcloud_status_color_rules]] - health jest dozwolonym wyjątkiem od
 * biało/szaro/czerwonego schematu). Klasa .gc-temp + jedna z
 * .temp-ok/.temp-warning/.temp-critical - dowolny element (span/td/text w
 * SVG) na całej stronie. */
.gc-temp.temp-ok{ color:#40ffba; }
.gc-temp.temp-warning{ color:#ffbe5c; }
.gc-temp.temp-critical{ color:#ff5b5b; }
.dashboard-incident-child-temp.temp-ok{ color:#40ffba; }
.dashboard-incident-child-temp.temp-warning{ color:#ffbe5c; }
.dashboard-incident-child-temp.temp-critical{ color:#ff5b5b; }
.dashboard-incident-child-since{
  white-space:nowrap;
  flex-shrink:0;
}
.dashboard-card-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:4px;
  flex-wrap:wrap;
}
.dashboard-action-link{
  font-size:12px;
}
.dashboard-btn{
  font-size:12px;
  padding:5px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--fg);
  cursor:pointer;
}
.dashboard-btn:hover:not(:disabled){
  background:rgba(255,255,255,.09);
}
.dashboard-btn:disabled{
  opacity:.5;
  cursor:default;
}
/* Kolory dopasowane do znaczenia akcji (2026-08-20, na wyrazna prosbe
   uzytkownika - "kolory her pojmu jakiego koloru"/"wszystkie 3 wygladaja
   rozno-stylowo", chcial spojnej palety): W trakcie (claim, wziecie w
   robote) = niebieska WYPELNIONA plomba (jedyny przycisk z pelnym tlem, nie
   tylko obwodka - podkresla ze to GLOWNA/pierwsza akcja na nowym alercie);
   Odłóż (unclaim) = szara, Sprawdź rozwiązanie = niebieska/blekitna, Oznacz
   jako rozwiązany = zielona - WSZYSTKIE TRZY dostaja TERAZ ten sam wzorzec:
   obwodka + delikatne rgba(<ten sam odcien>,.1) tlo (dokladnie jak juz
   istniejacy .dashboard-filter-pill.active gdzie indziej w tym pliku) -
   zanim byla to sama obwodka bez tla, co dawalo im niespojny, "rozny
   ciezar" wyglad (Odłóż wygladala "chudsza"/mniej wyrazna niz Sprawdź/Oznacz
   mimo tej samej obwodki, bo obie ostatnie mialy jasniejszy kolor tekstu
   sugerujacy wieksza waznosc). Teraz kazdy przycisk to spojny "chip":
   kolorowa obwodka + tekst w tym samym odcieniu + bardzo lekkie kolorowe tlo. */
/* "W trakcie" (claim) - 2026-08-20, druga runda poprawek: user chcial zeby
   wygladal jak zwykly link "Zobacz" (.dashboard-action-link) zamiast
   wypelnionego przycisku - najprostsza/pierwsza akcja na nowym alercie nie
   musi wizualnie "krzyczec" bardziej niz reszta. .dashboard-btn-claim traci
   WSZYSTKIE style przycisku (border/background/padding/border-radius z
   .dashboard-btn) i staje sie plaskim niebieskim tekstem z podkresleniem po
   najechaniu, dokladnie jak zwykly <a> link w tym pliku. */
.dashboard-btn-claim{
  border:none;
  background:none;
  padding:0;
  border-radius:0;
  color:var(--neon);
  font-size:12px;
}
.dashboard-btn-claim:hover:not(:disabled){
  background:none;
  text-decoration:underline;
}
/* Odłóż/Sprawdź rozwiązanie/Oznacz jako rozwiązany - 2026-08-20, druga runda:
   user chcial ciemne tlo (jak istniejacy .siec-chart-zoom-reset "Pełny
   zakres" - rgba(15,15,15,.65)) zamiast lekkiego kolorowego tinta, i BIALY
   tekst zamiast kolorowego - kolor akcji zostaje TYLKO w obwodce, tekst
   zawsze czytelny biel niezaleznie od koloru akcji. */
.dashboard-btn-unclaim{
  border-color:#8a8a8a;
  color:#fff;
  background:rgba(15,15,15,.65);
}
.dashboard-btn-unclaim:hover:not(:disabled){
  background:rgba(40,40,40,.65);
}
.dashboard-btn-verify{
  border-color:#5aa4ff;
  color:#fff;
  background:rgba(15,15,15,.65);
}
.dashboard-btn-verify:hover:not(:disabled){
  background:rgba(40,40,40,.65);
}
.dashboard-btn-dismiss{
  border-color:var(--status-port-up);
  color:#fff;
  background:rgba(15,15,15,.65);
}
.dashboard-btn-dismiss:hover:not(:disabled){
  background:rgba(40,40,40,.65);
}
.dashboard-btn-dm{
  border-color:#40ffba;
  color:#fff;
  background:rgba(15,15,15,.65);
}
.dashboard-btn-dm:hover:not(:disabled){
  background:rgba(40,40,40,.65);
}
.dashboard-btn-dm-sent{
  border-color:rgba(255,255,255,.16);
  color:var(--muted);
}
.dashboard-dm-sent-note{
  font-size:11.5px;
  color:var(--muted);
  font-style:italic;
}
.dashboard-dm-sent-note-clickable{
  cursor:pointer;
  text-decoration:underline dotted;
  text-underline-offset:2px;
}
.dashboard-dm-sent-note-clickable:hover{
  color:var(--text);
}
.dashboard-dm-pending-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 10px;
  border:1px solid rgba(255,193,7,.35);
  border-radius:6px;
  background:rgba(255,193,7,.06);
}
.dashboard-dm-pending-text{
  width:100%;
  min-height:110px;
  max-height:40vh;
  resize:vertical;
  font:inherit;
  font-size:12.5px;
  line-height:1.4;
  padding:6px 8px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,15,15,.5);
  color:var(--text);
  box-sizing:border-box;
}
.dashboard-dm-pending-actions{
  display:flex;
  gap:8px;
}
.dm-send-modal-card{
  max-height:90vh;
  overflow-y:auto;
}
.dm-send-textarea{
  min-height:160px;
  max-height:50vh;
}
.inv-switcher{
  position:relative;
  flex-shrink:0;
}
.inv-switcher-btn{
  display:flex;
  align-items:center;
  gap:6px;
  /* Kwadratowy ksztalt (2026-08-28 v2, uchyla decyzje z 24.08 opisana
     wyzej) - po zjednoczeniu paska szukajki z tabela w jeden panel
     (.devices-panel) i ujednoliceniu promieni na calej stronie, pigulkowy
     ksztalt zaczal wygladac niespojnie obok prostokatnego pola szukajki i
     panelu (zgloszenie uzytkownika: "zrob kwadratowymi"). Ten sam
   border-radius co .inventory-search-input obok. */
  border-radius:8px;
}
.inv-switcher-btn .arrow{
  font-size:9px;
  color:var(--muted);
  transition:transform .16s ease-out;
}
.inv-switcher.open .inv-switcher-btn .arrow{
  transform:rotate(180deg);
}
.inv-switcher-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:160px;
  /* max-height:340px + overflow-y:auto usunięte 2026-08-22 na wyraźną prośbę
     ("usuń scroller, niech się zawsze pokazuje w całości") - listy w tych
     dropdownach (przełączniki lokalizacji/kategorii) są krótkie, rozciągnięcie
     do naturalnej wysokości treści jest bezpieczne. */
  background:var(--panel-bg);
  border:1px solid rgba(150,150,150,.24);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:5px 0;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:30;
}
.inv-switcher.open .inv-switcher-dropdown{
  display:flex;
}
.inv-switcher-item{
  display:block;
  padding:8px 14px;
  font-size:13px;
  color:#aeaeae;
  text-decoration:none;
  white-space:nowrap;
  border-left:2px solid transparent;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;
}
.inv-switcher-item:hover{
  background:rgba(150,150,150,.06);
  color:#e7e7e7;
}
.inv-switcher-item.active{
  color:#efefef;
  background:rgba(150,150,150,.10);
  border-left-color:var(--neon);
}
button.inv-switcher-item{
  border:none;
  border-left:2px solid transparent;
  background:none;
  font-family:inherit;
  width:100%;
  cursor:pointer;
}
button.inv-switcher-item.active{
  border-left-color:var(--neon);
}
.mm-feed-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  height:70vh;
  min-height:360px;
  overflow:hidden;
}
.mm-alerts-split{
  display:flex;
  gap:0;
  width:100%;
  height:100%;
  min-height:0;
  align-items:stretch;
}
.mm-alerts-split .mm-feed-panel{
  flex:0 0 var(--mm-split-left, 50%);
  min-width:260px;
  max-width:none;
}
.mm-split-resizer{
  flex:0 0 auto;
  width:16px;
  cursor:col-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
  -webkit-user-select:none;
  user-select:none;
}
.mm-split-resizer::before{
  content:"";
  width:3px;
  height:42px;
  border-radius:4px;
  background:rgba(150,150,150,.25);
  transition:background-color .15s ease;
}
.mm-split-resizer:hover::before,
.mm-split-resizer.dragging::before{
  background:rgba(150,150,150,.75);
  box-shadow:0 0 8px rgba(150,150,150,.5);
}
/* Wariant "sam kalendarz" (2026-08-25) - lenta wpisów ukryta (istnieje w DOM
   tylko jako źródło danych JS, patrz mm-feed-hidden-source), kalendarz zajmuje
   całą szerokość zamiast dzielić ją z panelem listy, styl przezroczysty jak
   na Dashboardzie (.dashboard-card) zamiast pełnej karty .mm-calendar-panel. */
.mm-feed-hidden-source{
  display:none;
}
.mm-alerts-split-calendar-only{
  display:block;
}
.mm-calendar-panel-full{
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.02);
  box-shadow:none;
}
.mm-calendar-panel{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  /* Przezroczysty jak Dashboard (2026-08-28, zgloszenie uzytkownika) - zamiast
     prawie nieprzezroczystego var(--panel-bg) (94% krycia, calkowicie
     zakrywalo dekoracyjny wzor strony .bg-anim pod spodem, ktory Dashboard
     pokazuje). Lekki blur zamiast plaskiej przezroczystosci - tekst
     dni/zadan w komorkach zostaje czytelny na tle wzoru. */
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:var(--panel-border);
  border-radius:24px;
  box-shadow:var(--panel-shadow);
  padding:20px 22px;
}
.mm-calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  flex:0 0 auto;
}
.mm-calendar-title{
  font-size:15px;
  font-weight:700;
  color:#efefef;
  text-transform:capitalize;
}
.mm-calendar-nav{
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:10px;
  border:1px solid rgba(150,150,150,.24);
  background:rgba(170,170,170,.06);
  color:#aeaeae;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mm-calendar-nav:hover{
  background:rgba(150,150,150,.14);
  border-color:rgba(150,150,150,.5);
  color:#efefef;
}
.mm-calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin-bottom:6px;
  flex:0 0 auto;
}
.mm-calendar-weekdays span{
  text-align:center;
  font-size:10.5px;
  color:#999999;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mm-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:min-content;
  gap:4px;
  flex:1;
  min-height:0;
  overflow-y:auto;
}
.mm-calendar-grid:not(.year-mode){
  grid-auto-rows:1fr;
}
.mm-calendar-day{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:4px;
  /* Karta-dzień jak .dashboard-card (widoczny border, nie transparent) -
     bez tego siatka kalendarza ginie na przezroczystym tle panelu
     (zgłoszenie użytkownika 2026-08-25, zrzuty ekranu: dni ledwo widoczne). */
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:#d7d7d7;
  font-size:12.5px;
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease;
  overflow:hidden;
}
.mm-calendar-day:hover{
  background:rgba(255,255,255,.055);
}
.mm-calendar-day.empty{
  visibility:hidden;
  pointer-events:none;
}
.mm-calendar-day.today{
  border-color:rgba(150,150,150,.6);
}
.mm-calendar-day.active{
  border-color:var(--neon);
  background:rgba(150,150,150,.1);
}
.mm-calendar-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  flex:0 0 auto;
  padding-right:24px; /* miejsce na przycisk "+" w rogu */
}
.mm-calendar-day-num{
  border:none;
  background:none;
  color:#f2f2f2;
  font-size:15.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  padding:2px 6px;
  border-radius:8px;
  transition:background-color .15s ease, color .15s ease;
}
.mm-calendar-day.has-events .mm-calendar-day-num{
  color:#efefef;
  font-weight:700;
}
.mm-calendar-day-num:hover{
  background:rgba(150,150,150,.16);
}
.mm-calendar-day.active .mm-calendar-day-num{
  background:var(--neon2);
  color:#191919;
}
.mm-calendar-day-add{
  position:absolute;
  top:3px;
  right:3px;
  width:22px;
  height:22px;
  line-height:19px;
  border:1px solid rgba(150,150,150,.3);
  border-radius:8px;
  background:rgba(170,170,170,.08);
  color:#999999;
  font-size:16px;
  font-family:inherit;
  cursor:pointer;
  padding:0;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mm-calendar-day-add:hover{
  background:rgba(150,150,150,.24);
  border-color:rgba(150,150,150,.7);
  color:#efefef;
}
.mm-calendar-notes{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:2px;
  overflow:hidden;
}
.mm-calendar-note-line{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:10.5px;
  line-height:14px;
  color:#ececec;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  border-left:2px solid #b6b6b6;
  border-radius:4px;
  padding:1px 4px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background-color .15s ease;
}
.mm-calendar-note-line:hover{
  background:rgba(255,255,255,.18);
}
/* Plakietka kategorii tematycznej (siec/serwery/ui/gitcloud/wiedza) w karcie
   dnia - ODTWORZONA 2026-08-28 (zgloszenie uzytkownika: tekst "GitCloudDodaj
   ..." bez separatora). Klasa .mm-calendar-note-cat byla renderowana w JS
   (patrz assets/js/app.js) od 2026-08-26, ale jej CSS mial zyc w
   theme-black.css/theme-color.css - te pliki zostaly scalone do theme.css
   24.08 PRZED wprowadzeniem kategorii 26.08, wiec regula nigdy nie trafila
   do finalnego pliku (span renderowal sie bez zadnego stylu, stad sklejenie
   z tekstem zadania zaraz po nim). Kolor tla dopasowany do .cat-<key> na
   rodzicu (.mm-calendar-note-line), nie do samej plakietki - jeden zestaw
   kolorow kategorii uzywany w catCls PONIZEJ i w .dostep-group itd. */
.mm-calendar-note-cat{
  display:inline-block;
  flex-shrink:0;
  margin-right:4px;
  padding:0 4px;
  border-radius:3px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  background:rgba(255,255,255,.14);
  color:#d7d7d7;
  vertical-align:middle;
}
.mm-calendar-note-line.cat-siec .mm-calendar-note-cat{
  background:rgba(90,164,255,.22);
  color:#bcdcff;
}
.mm-calendar-note-line.cat-serwery .mm-calendar-note-cat{
  background:rgba(255,190,92,.22);
  color:#ffdca3;
}
.mm-calendar-note-line.cat-ui .mm-calendar-note-cat{
  background:rgba(191,127,255,.22);
  color:#dcb8ff;
}
.mm-calendar-note-line.cat-gitcloud .mm-calendar-note-cat{
  background:rgba(70,210,120,.22);
  color:#a8f0bf;
}
.mm-calendar-note-line.cat-wiedza .mm-calendar-note-cat{
  background:rgba(255,107,107,.22);
  color:#ffb7b7;
}
/* Status wpisu (2026-08-25, dziennik prac Claude) - aktywne/niedokończone
   zadania WYRÓŻNIONE (biały tekst, jaśniejszy border/tło), zrobione
   przygaszone (bazowy szary powyżej zostaje ich stylem domyślnym). */
.mm-calendar-note-line.status-active{
  color:#ffffff;
  background:rgba(255,255,255,.14);
  border-left-color:#ffffff;
  font-weight:600;
}
.mm-calendar-note-line.status-active:hover{
  background:rgba(255,255,255,.22);
}
.mm-calendar-note-line.status-done{
  color:#9a9a9a;
  background:rgba(150,150,150,.08);
  border-left-color:#6e6e6e;
}
.mm-calendar-note-line.status-done:hover{
  background:rgba(150,150,150,.16);
}
.mm-calendar-note-more{
  font-size:10px;
  color:var(--muted);
  padding:1px 4px;
  text-align:left;
}
/* Wskaźnik "N zrobionych" w komórce dnia (2026-08-25, poprawka po zgłoszeniu
   użytkownika - AKTYWNE ▶ zadania są wypisane wprost tekstem obok, patrz
   .mm-calendar-notes/.mm-calendar-note-line, TYLKO zrobione ✅ są zwinięte
   tutaj) - klik otwiera panel "Dzień" z pełną timeline, patrz mmOpenDayPanel
   w index.php. */
.mm-calendar-day-indicator{
  display:flex;
  align-items:center;
  gap:4px;
  align-self:flex-start;
  margin-top:2px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:rgba(255,255,255,.04);
  color:#d7d7d7;
  font-family:inherit;
  font-size:10.5px;
  font-weight:600;
  padding:1px 7px 1px 6px;
  cursor:pointer;
  transition:background-color .15s ease, transform .1s ease;
}
.mm-calendar-day-indicator:hover{
  background:rgba(255,255,255,.09);
  transform:translateY(-1px);
}
.mm-calendar-day-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.mm-calendar-day-dot.dot-active{
  background:#ffffff;
  box-shadow:0 0 4px rgba(255,255,255,.6);
}
.mm-calendar-day-dot.dot-done{
  background:#8a8a8a;
}
/* Panel "Dzień" - timeline pionowa (linia łącząca + kropki-węzły), styl jak
   .dashboard-card (przezroczyste tło, widoczny border). */
.mm-day-panel-card{
  max-width:520px;
}
.mm-day-timeline{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:12px 0;
  max-height:60vh;
  overflow-y:auto;
}
.mm-day-timeline-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-left:4px;
}
.mm-day-timeline-item::before{
  content:"";
  position:absolute;
  left:8px;
  top:16px;
  bottom:-2px;
  width:1px;
  background:rgba(255,255,255,.12);
}
.mm-day-timeline-item:last-child::before{
  display:none;
}
.mm-day-timeline-node{
  flex-shrink:0;
  width:9px;
  height:9px;
  border-radius:50%;
  margin-top:6px;
  background:#8a8a8a;
  box-shadow:0 0 0 3px var(--bg);
  z-index:1;
}
.mm-day-timeline-item.status-active .mm-day-timeline-node{
  background:#ffffff;
  box-shadow:0 0 0 3px var(--bg), 0 0 6px rgba(255,255,255,.6);
}
.mm-day-timeline-content{
  flex:1;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  color:#d7d7d7;
  font-family:inherit;
  font-size:12.5px;
  text-align:left;
  padding:7px 10px;
  cursor:pointer;
  transition:background-color .15s ease;
}
.mm-day-timeline-content:hover{
  background:rgba(255,255,255,.055);
}
.mm-day-timeline-item.status-active .mm-day-timeline-content{
  color:#ffffff;
  font-weight:600;
  border-color:rgba(255,255,255,.16);
}
.mm-day-timeline-item.status-done .mm-day-timeline-content{
  color:#9a9a9a;
}
.mm-day-timeline-time{
  flex-shrink:0;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.mm-day-timeline-text{
  min-width:0;
  overflow-wrap:break-word;
}
.mm-day-timeline-empty{
  color:var(--muted);
  font-size:13px;
  padding:12px 4px;
  text-align:center;
}
/* Grupa zdarzeń JEDNEGO zadania w pełnej chronologii dnia (2026-08-28) -
   oddzielona od kolejnej grupy przerwą + delikatną linią, żeby nie było
   widać, że wspólna pionowa linia .mm-day-timeline-item::before przechodzi
   przez granicę różnych zadań (myliłoby to z jedną ciągłą historią). */
.mm-day-timeline-group{
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mm-day-timeline-group:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}
.mm-day-timeline-change-tag{
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#8a8a8a;
  background:rgba(255,255,255,.06);
  border-radius:8px;
  padding:1px 5px;
}
.mm-day-timeline-item.status-active .mm-day-timeline-change-tag{
  color:#cfcfcf;
  background:rgba(255,255,255,.12);
}
.mm-calendar-grid.year-mode{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:auto;
  align-content:start;
  overflow-y:auto;
}
.mm-calendar-month-tile{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(170,170,170,.14);
  border-radius:14px;
  background:rgba(170,170,170,.04);
  padding:8px;
  transition:border-color .15s ease;
}
.mm-calendar-month-tile.current-month{
  border-color:rgba(150,150,150,.6);
}
.mm-calendar-month-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  border:none;
  background:none;
  padding:0 0 5px;
  margin:0;
  border-bottom:1px solid rgba(170,170,170,.12);
  color:#d7d7d7;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  text-transform:capitalize;
  cursor:pointer;
  transition:color .15s ease;
}
.mm-calendar-month-header:hover{
  color:#f7f7f7;
}
.mm-calendar-month-header.has-events{
  color:#efefef;
}
.mm-calendar-month-total{
  flex:0 0 auto;
  font-size:9.5px;
  font-weight:700;
  color:var(--neon2);
  background:rgba(150,150,150,.14);
  border-radius:14px;
  padding:0 6px;
}
.mm-calendar-mini-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.mm-calendar-mini-day{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:4px;
  background:none;
  color:#999999;
  font-size:9.5px;
  font-family:inherit;
  cursor:pointer;
  padding:0;
  transition:background-color .15s ease, border-color .15s ease;
}
.mm-calendar-mini-day:hover{
  background:rgba(150,150,150,.16);
  color:#efefef;
}
.mm-calendar-mini-day.has-events{
  color:#efefef;
  background:rgba(150,150,150,.14);
  font-weight:700;
}
.mm-calendar-mini-day.today{
  border-color:rgba(150,150,150,.7);
}
.mm-calendar-mini-day.active{
  background:var(--neon2);
  color:#191919;
  font-weight:700;
}
.mm-calendar-mini-day.empty{
  visibility:hidden;
  pointer-events:none;
}
.mm-calendar-footer{
  margin-top:12px;
  display:flex;
  justify-content:center;
  flex:0 0 auto;
}
.mm-feed-panel{
  width:100%;
  max-width:820px;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:24px;
  box-shadow:var(--panel-shadow);
  overflow:hidden;
}
.mm-feed-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:18px 22px 24px;
}
.mm-feed-loadmore-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.mm-feed-error,
.mm-feed-empty{
  padding:30px 10px;
  text-align:center;
  color:#aeaeae;
  font-size:13px;
}
.mm-feed-posts{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mm-post{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.mm-post-avatar{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  color:#191919;
  background:linear-gradient(135deg,var(--neon),var(--neon2));
}
.mm-post-avatar-fallback{
  display:block;
}
.mm-post-avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mm-post-body{
  flex:1;
  min-width:0;
}
.mm-post-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.mm-post-author{
  font-size:13px;
  font-weight:600;
  color:#e7e7e7;
}
.mm-post-time{
  font-size:11px;
  color:#848484;
}
.mm-post-text{
  margin-top:3px;
  font-size:13.5px;
  line-height:1.5;
  color:#d7d7d7;
  word-wrap:break-word;
}
.mm-post-text .mm-mention{
  color:var(--neon2);
  font-weight:600;
}
.mm-post-text a{
  color:var(--neon2);
}
.mm-post-text code{
  background:rgba(170,170,170,.12);
  padding:1px 5px;
  border-radius:8px;
  font-size:12px;
}
.mm-attachment{
  margin-top:6px;
  padding:8px 12px;
  border-left:3px solid var(--neon2);
  background:rgba(170,170,170,.06);
  border-radius:8px;
  font-size:13px;
}
.mm-attachment-pretext{
  margin-bottom:4px;
  color:#d7d7d7;
}
.mm-attachment-author{
  font-size:12px;
  color:#aeaeae;
  margin-bottom:2px;
}
.mm-attachment-title{
  font-weight:600;
  color:#e7e7e7;
  margin-bottom:4px;
}
.mm-attachment-title a{
  color:#e7e7e7;
}
.mm-attachment-text{
  color:#d7d7d7;
  margin-bottom:4px;
}
.mm-attachment-fields{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:4px;
}
.mm-attachment-field{
  flex:1 1 100%;
}
.mm-attachment-field.short{
  flex:1 1 calc(50% - 18px);
  min-width:140px;
}
.mm-attachment-field-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#999999;
}
.mm-attachment-field-value{
  font-size:12.5px;
  color:#e2e2e2;
}
.mm-attachment-image{
  margin-top:6px;
}
.mm-attachment-image img{
  max-width:280px;
  max-height:280px;
  border-radius:12px;
  cursor:zoom-in;
}
.mm-attachment-footer{
  margin-top:6px;
  font-size:11px;
  color:#848484;
}
.mm-post-images{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.mm-post-image-link{
  display:block;
  line-height:0;
}
.mm-post-image{
  max-width:260px;
  max-height:260px;
  width:auto;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(170,170,170,.18);
  cursor:zoom-in;
  display:block;
}
.mm-post-reactions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.mm-reaction-chip{
  font-size:12px;
  padding:2px 8px;
  border-radius:16px;
  background:rgba(150,150,150,.10);
  border:1px solid rgba(170,170,170,.18);
  color:#e7e7e7;
}
.mm-post-files{
  margin-top:6px;
  font-size:12px;
  color:#999999;
}
.inventory-search-input{
  width:100%;
  /* Zmniejszone z 360px (2026-08-24, zgłoszenie użytkownika: pole wyglądało
     nieproporcjonalnie szeroko/"ważniej" niż pasek MENU nad nim) - nadal
     mieści większość placeholderów w całości na desktopie, po prostu nie
     rozpycha całego rzędu toolbar. */
  max-width:300px;
  padding:var(--space-1) var(--space-3);
  background:rgba(15,15,15,.4);
  border:1px solid rgba(150,150,150,.3);
  border-radius:8px;
  color:#f7f7f7;
  font-size:12px;
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.inventory-search-input::placeholder{
  color:var(--muted);
}
.inventory-search-input:focus{
  border-color:var(--neon2);
  box-shadow:0 0 8px rgba(150,150,150,.4);
}
#inventory-table tr.gc-row.search-hidden{
  display:none;
}
.inventory-save-status{
  min-height:0;
  font-size:12px;
  color:var(--muted);
}
.inventory-save-status:empty{
  display:none;
}
.inventory-save-status.ok{ color:#35ffb5; }
.inventory-save-status.error{ color:#ff6666; }
.inventory-add-col-th{
  width:1%;
  white-space:nowrap;
}
#inventory-table[data-category="laptopy"]{
  table-layout:fixed;
}
#inventory-table[data-category="laptopy"] .inventory-add-col-th{
  width:3%;
}
#inventory-table.edit-mode td.inventory-cell[data-col="computer_name"],
#inventory-table.edit-mode td.inventory-cell[data-col="phone"]{
  border:1px solid rgba(150,150,150,.28);
  box-shadow:0 0 3px rgba(150,150,150,.18);
  border-radius:8px;
  transition:box-shadow .25s ease, border-color .25s ease;
}
#inventory-table.edit-mode td.inventory-cell[data-col="computer_name"]:hover,
#inventory-table.edit-mode td.inventory-cell[data-col="phone"]:hover{
  border-color:var(--neon2);
  box-shadow:0 0 6px rgba(150,150,150,.7), 0 0 16px rgba(150,150,150,.55), 0 0 34px rgba(150,150,150,.35), 0 0 10px rgba(150,150,150,.4) inset;
}
#inventory-table[data-category="laptopy"] th:nth-child(4),
#inventory-table[data-category="laptopy"] td:nth-child(4),
#inventory-table[data-category="laptopy"] th:nth-child(8),
#inventory-table[data-category="laptopy"] td:nth-child(8),
#inventory-table[data-category="telefony"] th:nth-child(4),
#inventory-table[data-category="telefony"] td:nth-child(4),
#inventory-table[data-category="telefony"] th:nth-child(5),
#inventory-table[data-category="telefony"] td:nth-child(5){
  text-align:center;
}
.inventory-add-col-btn{
  border:1px solid rgba(150,150,150,.35);
  background:rgba(15,15,15,.4);
  color:#c5c5c5;
  border-radius:10px;
  width:22px;
  height:22px;
  line-height:1;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.inventory-add-col-btn:hover{
  background:rgba(150,150,150,.2);
  border-color:rgba(150,150,150,.6);
}
.inventory-name-cell{
  font-weight:400;
  color:#f3f3f3;
  white-space:nowrap;
}
.inventory-toolbar{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.inventory-toolbar-btn{
  border:1px solid rgba(150,150,150,.35);
  background:rgba(15,15,15,.4);
  color:#f7f7f7;
  border-radius:10px;
  padding:var(--space-1) var(--space-3);
  font-size:12px;
  font-weight:400;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.inventory-toolbar-btn:hover{
  background:rgba(150,150,150,.22);
  border-color:rgba(150,150,150,.9);
  box-shadow:0 0 8px rgba(150,150,150,.55), 0 0 18px rgba(150,150,150,.35);
}
.inventory-toolbar-btn:disabled{
  cursor:default;
  opacity:1;
}
.inventory-toolbar-btn:disabled:hover{
  background:rgba(15,15,15,.4);
  border-color:rgba(150,150,150,.35);
  box-shadow:none;
}
.vpn-assign-owner-btn{
  border:1px solid rgba(150,150,150,.35);
  background:rgba(15,15,15,.4);
  color:#f7f7f7;
  border-radius:8px;
  padding:2px 8px;
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.vpn-assign-owner-btn:hover{
  background:rgba(150,150,150,.22);
  border-color:rgba(150,150,150,.9);
}
.wslog-loadmore-wrap{
  display:flex;
  justify-content:center;
  padding:14px 0 4px;
}
.wslog-type-cell{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.log-table{
  table-layout:fixed;
}
.log-desc-cell{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* "Historia alertów" - klik na wiersz rozwija/zwija wiersz-szczegol pod nim
   (patrz .gc-detail-row w index.php) zamiast otwierac modal - kompaktowa
   tabela przy duzej liczbie rozwiazanych alertow. Stylowane na <td>, NIE na
   <tr> (patrz komentarz nad .siec-device-row.clickable ponizej - border-collapse
   ignoruje tlo/obwodke na samym <tr>). */
.historyalert-row{ cursor:pointer; }
.historyalert-row td{ transition:background-color .12s ease; }
.historyalert-row:hover td{ background:rgba(255,255,255,.035); }
.historyalert-row.is-expanded td{ background:rgba(90,164,255,.06); }
.gc-detail-row > td{
  padding:0 10px 10px !important;
  background:rgba(255,255,255,.015);
  /* Nadpisuje .gc-table td (white-space:nowrap + overflow:hidden + ellipsis,
     patrz powyzej) - ta komorka to WIELOLINIOWY blok opisu awarii, nie
     pojedyncza wartosc. Bez tego dlugi opis (np. lista adresow klientow w
     "IPTV: port ... wzrost bledow") uciekal poza PRAWA krawedz tabeli zamiast
     zawijac sie - zgloszone przez uzytkownika 2026-08-20 (screenshot: tekst
     wyjezdzajacy poza ramke). */
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.historyalert-detail,
.dashboard-card-detail{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-left:2px solid rgba(90,164,255,.45);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  max-width:100%;
}
/* .dashboard-card-detail (karta Dashboardu, blok Wystąpił/opis/AI) - ten sam
   wyglad co .historyalert-detail w "Historia alertów" (2026-08-20, user
   poprosił zeby wygladalo tak samo). .dashboard-ai-analysis/-verify-note w
   srodku dostaja mniejszy padding i przezroczyste tlo wlasne - nie chcemy
   "ramki w ramce", tylko delikatnego rozroznienia.
   .dashboard-card-detail SAM dostaje background:transparent (nadpisuje
   ogolna regule .historyalert-detail powyzej, ktora ma jasne
   rgba(255,255,255,.02)) - user zglosil 2026-08-20 ze na karcie Dashboardu
   ten fragment wygladal jak jasna "plama" nad tlem karty: .dashboard-card
   SAM juz ma to samo rgba(255,255,255,.02) tlo, wiec dwa nakladajace sie
   polprzezroczyste tla dawaly widocznie jasniejszy prostokat w srodku karty.
   W "Historia alertów" (tabela, nie karta) to samo tlo NIE nakladalo sie na
   nic i wygladalo dobrze, wiec tam .historyalert-detail zostaje bez zmian -
   stad override tylko dla .dashboard-card-detail, nie dla obu naraz. */
.dashboard-card-detail{
  background:transparent;
}
.dashboard-card-detail .dashboard-ai-analysis,
.dashboard-card-detail .dashboard-verify-note{
  background:transparent;
  border-left:none;
  padding:0;
}
.historyalert-detail-row{
  display:flex;
  gap:8px;
  font-size:12.5px;
  flex-wrap:wrap;
}
.historyalert-detail-row span{
  color:var(--muted);
  min-width:110px;
  flex-shrink:0;
}
.historyalert-detail-row strong{
  font-weight:600;
  color:var(--fg);
  overflow-wrap:break-word;
  min-width:0;
}
.historyalert-detail-desc{
  font-size:12.5px;
  color:var(--fg);
  line-height:1.4;
  white-space:normal;
  overflow-wrap:break-word;
}

/* Sieć - wiersz urządzenia z dostępnym schematem portów */
/* Podświetlenie klikalnych wierszy (Sieć/NAS/Unimus/Proxmox/Siłownie/
   OLT) na NAJEŹDŻENIE i klawiaturowy focus - stylowane na <td>, NIE na <tr>:
   te tabele mają border-collapse:collapse, a w tym trybie background/transform
   ustawione bezpośrednio na <tr> jest przez przeglądarkę całkowicie
   ignorowane przy renderowaniu (potwierdzone empirycznie - poprzednia wersja
   tej reguły, stylowana na samym <tr>, nigdy realnie nic nie pokazywała, na
   ŻADNEJ z tych tabel, mimo że wyglądała poprawnie w kodzie). */
.siec-device-row.clickable, .unimus-row.clickable,
.nas-row.clickable, .silownie-row.clickable, .cms-olt-row.clickable, .cms-ont-search-row.clickable,
.siec-related-row.clickable, .proxmox-vm-row.clickable, .klienciruch-row.clickable, .asnruch-row.clickable{
  cursor:pointer;
}
.siec-device-row.clickable > td, .unimus-row.clickable > td,
.nas-row.clickable > td, .silownie-row.clickable > td, .cms-olt-row.clickable > td, .cms-ont-search-row.clickable > td,
.siec-related-row.clickable > td, .proxmox-vm-row.clickable > td, .automatyzacje-history-row > td, .automatyzacje-row.clickable > td, .klienciruch-row.clickable > td, .asnruch-row.clickable > td{
  transition:background .15s ease;
}
.siec-device-row.clickable:hover > td, .siec-device-row.clickable:focus-visible > td,
.unimus-row.clickable:hover > td, .unimus-row.clickable:focus-visible > td,
.nas-row.clickable:hover > td, .nas-row.clickable:focus-visible > td,
.silownie-row.clickable:hover > td, .silownie-row.clickable:focus-visible > td,
.cms-olt-row.clickable:hover > td, .cms-olt-row.clickable:focus-visible > td,
.cms-ont-search-row.clickable:hover > td, .cms-ont-search-row.clickable:focus-visible > td,
.siec-related-row.clickable:hover > td, .siec-related-row.clickable:focus-visible > td,
.proxmox-vm-row.clickable:hover > td, .proxmox-vm-row.clickable:focus-visible > td,
.automatyzacje-history-row:hover > td, .automatyzacje-history-row:focus-visible > td,
.automatyzacje-row.clickable:hover > td, .automatyzacje-row.clickable:focus-visible > td,
.klienciruch-row.clickable:hover > td, .klienciruch-row.clickable:focus-visible > td,
.asnruch-row.clickable:hover > td, .asnruch-row.clickable:focus-visible > td{
  background:rgba(150,150,150,.14);
}
.siec-device-row.clickable:focus-visible, .unimus-row.clickable:focus-visible,
.nas-row.clickable:focus-visible,
.silownie-row.clickable:focus-visible, .cms-olt-row.clickable:focus-visible,
.cms-ont-search-row.clickable:focus-visible, .siec-related-row.clickable:focus-visible,
.proxmox-vm-row.clickable:focus-visible, .automatyzacje-row.clickable:focus-visible, .klienciruch-row.clickable:focus-visible, .asnruch-row.clickable:focus-visible{
  outline:1px solid rgba(150,150,150,.5);
  outline-offset:-1px;
}
.siec-unimus-hint{
  opacity:.85;
  font-size:11px;
  margin-left:4px;
}
.cms-ont-live-open-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(150,150,150,.08);
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--fg);
  cursor:pointer;
  font-size:11px;
  line-height:1;
  padding:5px 12px;
  white-space:nowrap;
  transition:background .15s ease-out, box-shadow .15s ease-out;
}
.cms-ont-live-open-btn::before{
  content:"▶";
  font-size:8px;
  opacity:.85;
}
.cms-ont-live-open-btn:hover{
  background:rgba(150,150,150,.18);
  box-shadow:0 0 8px rgba(150,150,150,.3);
}
.cms-ont-live-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 12px;
}
.cms-ont-live-tab{
  background:transparent;
  border:1px solid var(--panel-border, rgba(150,150,150,.22));
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  font-size:11px;
  letter-spacing:.02em;
  padding:6px 10px;
}
.cms-ont-live-tab:hover{
  color:var(--fg);
}
.cms-ont-live-tab.active{
  border-color:var(--accent);
  color:var(--fg);
}
.cms-ont-live-tab.busy{
  cursor:progress;
  opacity:.55;
}
/* Mała wersja .loader-orb (patrz .loader-orb-wrap - pełnostronicowy loader
   przy starcie strony) - ten sam pierścień/animacja orbSpin, tylko
   przeskalowany do użycia inline w modalu, zamiast osobnego,
   niespójnego stylu. */
.cms-ont-live-spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  margin:0 auto 12px;
  position:relative;
}
.cms-ont-live-spinner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--neon);
  border-right-color:var(--neon2);
  filter:drop-shadow(0 0 6px rgba(150,150,150,0.6));
  animation:orbSpin 1.4s linear infinite;
}
.gc-zbx-icon{
  display:inline-flex;
  align-items:center;
  margin-right:5px;
  vertical-align:-3px;
}
.gc-zbx-icon svg{
  display:block;
}
.gc-zbx-icon-ok svg{
  border-radius:4px;
}
.gc-zbx-icon-err{
  color:#ff5b5b;
}
.gc-zbx-icon-err svg *{
  fill:currentColor;
}
.unimus-net-link{
  opacity:.85;
  font-size:12px;
  margin-right:5px;
  cursor:pointer;
}
.unimus-net-link:hover{ opacity:1; }

/* Modal - schemat portów urządzenia sieciowego (LibreNMS). max-height 95vh
   (podniesione z 88vh 2026-08-14) - port z wykresem ruchu I wykresem optyki
   naraz nie mieścił się bez przewijania na typowej wysokości okna. */
.siec-port-modal-card{
  width:100%;
  max-width:1500px;
  max-height:calc(100vh - 48px);
  min-height:0;
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1a;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:20px 22px 18px;
  margin:auto;
  transform:scale(0.85);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;
}
.modal-backdrop.active .siec-port-modal-card{
  transform:scale(1);
  opacity:1;
}
.siec-port-modal-title{
  clear:both;
  margin:0 0 2px;
  font-size:18px;
  font-weight:700;
  color:#efefef;
}
.siec-port-modal-sub{
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--muted);
}
.siec-modal-tabs{
  display:flex;
  gap:6px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(170,170,170,.14);
}
.siec-modal-tab{
  background:none;
  border:none;
  color:#999999;
  font-size:12.5px;
  font-weight:600;
  padding:6px 4px 10px;
  cursor:pointer;
  border-bottom:2px solid transparent;
}
.siec-modal-tab:hover{ color:#e2e2e2; }
.siec-modal-tab.active{
  color:var(--chart-single);
  border-bottom-color:var(--chart-single);
}
.siec-routing-as{
  font-size:12.5px;
  color:#e2e2e2;
  margin:0 0 12px;
}
.siec-config-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:0 0 12px;
  padding:8px 12px;
  background:rgba(19,19,19,.6);
  border:1px solid rgba(170,170,170,.14);
  border-radius:12px;
  font-size:12.5px;
  color:#e2e2e2;
}
.siec-config-summary-item{
  color:#c9c9c9;
}
.siec-routing-subhead{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#999999;
  margin:16px 0 6px;
}
.siec-routing-subhead:first-of-type{ margin-top:0; }
.siec-config-pre-wrap{
  position:relative;
  max-width:100%;
}
.pbs-versions-wrap{
  max-width:100%;
  max-height:60vh;
  overflow:auto;
  box-sizing:border-box;
}
.pbs-versions-wrap table{ margin:0; }
/* "Apps"/Backupy VM (Proxmox) - odstep od tabeli ponizej (search-wrap nie ma
   marginesu domyslnie, patrz .inventory-search-wrap) i przycisk "Backup teraz"
   o stalym, mniejszym rozmiarze jak w motywie "Kolor" (w "Czarny" wspolny
   .inventory-toolbar-btn jest wyzszy/wiekszy - tu ujednolicone niezaleznie od
   aktywnego motywu, user 2026-08-20). */
#pvmbk-content > .inventory-search-wrap{ margin-bottom:10px; }
#pvmbk-backup-btn{ padding:5px 14px; font-size:12px; }
.nas-disk-rect{ cursor:pointer; }
.nas-disk-rect.selected{
  stroke:var(--chart-single) !important;
  stroke-width:2.5 !important;
}
.nas-state-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 0;
}
.nas-usage-bar{
  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(170,170,170,.16);
  overflow:hidden;
  min-width:60px;
}
.nas-usage-bar-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--neon2),var(--chart-single));
}
.siec-config-pre{
  margin:0;
  max-width:100%;
  max-height:60vh;
  overflow:auto;
  background:rgba(19,19,19,.6);
  border:1px solid rgba(170,170,170,.14);
  border-radius:12px;
  padding:38px 16px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  line-height:1.55;
  color:#e2e2e2;
  white-space:pre;
  box-sizing:border-box;
}
/* Modyfikator dla logow tekstowych (Job Event Log / Error Output w modalu
   "Automatyzacje") - w przeciwienstwie do konfigow urzadzen (gdzie white-space:pre
   jest celowe, bo wyrownanie kolumn ma znaczenie), log to zwykly tekst z
   dlugimi liniami bez formatowania - zawijanie w pionie zamiast poziomego
   scrolla, zgloszone przez uzytkownika ze zrzutem ekranu 2026-08-22. */
.siec-config-pre.log-wrap{
  white-space:pre-wrap;
  word-break:break-word;
}
.siec-config-match{
  background:rgba(255,190,92,.35);
  color:inherit;
  border-radius:4px;
}
.siec-config-match.current{
  background:rgba(150,150,150,.65);
}
.siec-config-search-wrap{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(15,15,15,.92);
  border:1px solid rgba(150,150,150,.3);
  border-radius:10px;
  padding:3px 4px;
}
.siec-config-search-wrap input{
  width:120px;
  background:transparent;
  border:none;
  outline:none;
  color:#f7f7f7;
  font-size:12px;
  padding:2px 4px;
}
.siec-config-search-count{
  font-size:11px;
  color:#999999;
  min-width:32px;
  text-align:center;
}
.siec-config-search-wrap button{
  background:transparent;
  border:none;
  color:var(--neon2);
  cursor:pointer;
  font-size:11px;
  padding:2px 5px;
  border-radius:8px;
}
.siec-config-search-wrap button:hover{
  color:var(--neon);
  background:rgba(150,150,150,.14);
}
.siec-config-version-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px;
  font-size:12px;
  color:#e2e2e2;
}
.siec-config-version-wrap-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 10px;
}
.siec-config-version-wrap-row .siec-config-version-wrap{
  margin:0;
}
.siec-config-version-wrap select{
  background:rgba(15,15,15,.6);
  border:1px solid rgba(150,150,150,.3);
  border-radius:10px;
  color:#f7f7f7;
  font-size:12px;
  padding:4px 8px;
}
.siec-port-modal-loading,
.siec-port-modal-error{
  padding:40px 0;
  text-align:center;
  color:#aeaeae;
  font-size:13px;
}
.siec-port-modal-error{ color:#ff8c8c; }
#siec-port-modal-body{
  height:64vh;
  min-height:420px;
  max-height:640px;
  display:flex;
  flex-direction:column;
}
.siec-port-modal-main,
.siec-routing-panel{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}
.siec-port-modal-main{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.siec-port-modal-main .device-frame.gc-frame,
.siec-routing-panel .device-frame.gc-frame{
  height:auto;
  max-height:none;
  resize:none;
}
.siec-port-modal-diagram-col{
  flex:1 1 auto;
  min-width:0;
}
.siec-switch-diagram-wrap{
  overflow-x:auto;
  padding:6px 0 4px;
  cursor:pointer;
}
.siec-switch-diagram-wrap svg{
  display:block;
  margin:0 auto;
  border-radius:14px;
  outline:2px solid transparent;
  outline-offset:3px;
  transition:outline-color .15s;
}
.siec-switch-diagram-wrap.selected svg{
  outline-color:var(--chart-single);
}
.siec-port-legend{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(170,170,170,.14);
  font-size:12px;
  color:#e2e2e2;
}
.siec-port-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
}
.siec-port-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 6px currentColor;
}

/* Panel szczegółów wybranego portu (klik na schemat lub listę) */
.siec-port-detail{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(170,170,170,.14);
  min-height:20px;
}
.siec-port-detail-hint{
  font-size:12px;
  color:var(--chart-single-label);
  font-style:italic;
}
.siec-port-detail-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#efefef;
  margin-bottom:8px;
}
.siec-port-detail-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 6px currentColor;
  flex:0 0 auto;
}
.siec-port-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px 18px;
}
.siec-port-detail-row{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.siec-port-detail-wide-row{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  margin-top:8px;
}
.siec-port-detail-wide-row .siec-port-detail-value{
  overflow-wrap:break-word;
}
.siec-port-detail-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--chart-single-label);
}
.siec-port-detail-value{
  font-size:13px;
  color:#ededed;
}
.siec-port-detail-value.muted{
  color:var(--chart-single-label);
  font-style:italic;
}
/* Skeleton-loader (2026-08-24, audyt UI pkt 10) - zastępuje tekst "Ładowanie..."
   w kartach metryk (CPU/RAM/Storage/Temperatura itp.) i kontenerach wykresów.
   Wariant "pulse" (oddychająca przezroczystość) wybrany przez użytkownika
   spośród dwóch pokazanych w demo. .gc-skel na <span> wartości metryki -
   szerokość ustawiana inline per-miejsce (przybliżony rozmiar docelowej
   liczby), .gc-skel-chart na całym kontenerze wykresu (siatka + przerywana
   linia, ten sam kształt co docelowy wykres, żeby layout się nie przesuwał
   gdy dane przyjdą). */
.gc-skel{
  display:inline-block;
  height:13px;
  width:70px;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  vertical-align:middle;
  animation:gc-skel-pulse 1.5s ease-in-out infinite;
}
@keyframes gc-skel-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
.gc-skel-chart{
  position:relative;
  height:200px;
  background:#121212;
  border-radius:12px;
  overflow:hidden;
}
.gc-skel-chart::before{
  content:"";
  position:absolute;
  inset:16px 20px 34px;
  background-image:repeating-linear-gradient(to bottom, var(--chart-single-grid) 0, var(--chart-single-grid) 1px, transparent 1px, transparent 25%);
}
.gc-skel-chart::after{
  /* Sylwetka linii trendu (przybliżony kształt wykresu) - jednolity blok
     tła przycięty clip-pathem do "postrzępionego paska", zamiast prawdziwej
     krzywej (nie ma jeszcze danych do narysowania). */
  content:"";
  position:absolute;
  left:20px; right:20px; bottom:34px; height:56px;
  background:rgba(150,150,150,.28);
  clip-path:polygon(0% 68%, 12% 34%, 25% 88%, 38% 18%, 52% 74%, 65% 42%, 78% 62%, 90% 22%, 100% 38%, 100% 100%, 0% 100%);
  animation:gc-skel-pulse 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .gc-skel, .gc-skel-chart::after{ animation:none; opacity:.75; }
}
.siec-port-detail-sublist-row{
  font-size:11.5px;
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Lista dysków w zakładce "Overview" modala Proxmox VM/CT - jeden wiersz na
   punkt montowania, pełna szerokość karty (nie ciasna kolumna siatki 150px) -
   patrz zgłoszenie użytkownika 2026-08-24 "zbyt zaspamowane". */
.pvm-disk-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:3px 0;
  font-size:12px;
}
.pvm-disk-mount{
  flex:0 0 auto;
  max-width:120px;
  color:#ededed;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pvm-disk-bar{
  flex:1 1 160px;
  max-width:220px;
  height:6px;
  border-radius:4px;
  background:rgba(150,150,150,.16);
  overflow:hidden;
  min-width:60px;
}
.pvm-disk-bar-fill{
  display:block;
  height:100%;
  background:var(--chart-in,#909090);
  border-radius:4px;
}
.pvm-disk-nums{
  flex:0 0 auto;
  color:var(--chart-single-label,#787878);
  white-space:nowrap;
  font-size:11.5px;
}
.siec-port-detail-graph-wrap{
  margin-top:14px;
  border-top:1px solid rgba(170,170,170,.15);
  padding-top:10px;
}
.siec-port-detail-graph-wrap [id$="-chart"]{
  position:relative;
}
.siec-port-detail-graph-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.siec-port-detail-graph-title{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--chart-single-label);
}
.siec-port-detail-graph-range{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
}
.siec-graph-range-btn{
  font-size:10.5px;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid rgba(170,170,170,.3);
  background:transparent;
  color:#999999;
  cursor:pointer;
}
.siec-graph-range-btn:hover{
  border-color:rgba(191,191,191,.6);
  color:#ededed;
}
.siec-graph-range-btn.active{
  background:rgba(191,191,191,.15);
  border-color:var(--chart-single);
  color:var(--chart-single);
}
.siec-port-detail-graph-hint{
  font-size:10.5px;
  color:var(--chart-single-label);
  margin-top:5px;
}
.siec-traffic-chart-row{
  display:flex;
  gap:14px;
  align-items:stretch;
}
.siec-traffic-chart-col{
  flex:1 1 auto;
  min-width:0;
}
.siec-traffic-down-banner{
  font-size:11.5px;
  color:#ff8080;
  background:rgba(255,80,80,.1);
  border:1px solid rgba(255,80,80,.35);
  border-radius:10px;
  padding:4px 8px;
  margin-bottom:8px;
  display:inline-block;
}
.siec-traffic-stats-col{
  flex:0 0 128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
}
.siec-traffic-stat{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.siec-traffic-stat-label{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--chart-single-label);
}
.siec-traffic-stat-value{
  font-size:13px;
  color:#ededed;
  font-variant-numeric:tabular-nums;
}
.siec-traffic-chart-interactive{
  position:relative;
}
.siec-chart-series{
  transition:opacity .12s;
}
.siec-chart-series.siec-chart-dimmed{
  opacity:.2;
}
.siec-chart-legend{
  transition:opacity .12s;
}
.siec-chart-legend.siec-chart-legend-active text{
  font-weight:700;
  fill:#ffffff !important;
}
.siec-chart-legend.siec-chart-legend-active circle{
  r:4.5;
}
.siec-chart-capture{
  cursor:crosshair;
}
.siec-chart-zoom-reset{
  padding:2px 8px;
  font-size:10.5px;
  border:1px solid rgba(150,150,150,.4);
  border-radius:8px;
  background:rgba(15,15,15,.65);
  color:var(--neon2);
  cursor:pointer;
  margin-right:6px;
}
.siec-chart-zoom-reset:hover{
  border-color:var(--neon2);
  color:var(--neon);
  background:rgba(150,150,150,.14);
}
.siec-traffic-chart-tooltip{
  position:absolute;
  z-index:5;
  pointer-events:none;
  font-size:11px;
  font-weight:600;
  color:#efefef;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  background:rgba(10,10,10,.92);
  border:1px solid var(--gc-tooltip-accent, rgba(191,191,191,.35));
  border-radius:10px;
  padding:4px 9px;
  box-shadow:0 0 8px var(--gc-tooltip-accent, transparent), 0 2px 10px rgba(0,0,0,.5);
  transform:translate(-50%,-100%);
  margin-top:-10px;
  transition:opacity .08s;
}
.siec-traffic-chart-tooltip.siec-tooltip-flip{
  transform:translate(-100%,-100%);
}
.siec-traffic-chart-tooltip.siec-tooltip-hint{
  position:static;
  transform:none;
  margin-top:6px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  color:#dbdbdb;
  min-height:14px;
  white-space:normal;
}
.siec-port-rect{ cursor:pointer; }
.siec-port-rect.selected{
  stroke:var(--chart-single) !important;
  stroke-width:2 !important;
}
.siec-port-list-row{ cursor:pointer; }
.siec-port-list-row.selected{
  background:rgba(150,150,150,.1);
  border-radius:10px;
}

/* Prawa kolumna - lista wszystkich portów z opisem i VLAN-em */
.siec-port-list-col{
  flex:0 0 360px;
  min-width:0;
  border-left:1px solid rgba(170,170,170,.14);
  padding-left:18px;
}
.siec-port-list-head{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#999999;
  padding-bottom:6px;
  border-bottom:1px solid rgba(170,170,170,.14);
  margin-bottom:6px;
}
.siec-port-list{
  max-height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.siec-port-list-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:5px 2px;
  font-size:11.5px;
  line-height:1.35;
}
.siec-port-list-row + .siec-port-list-row{
  border-top:1px solid rgba(170,170,170,.08);
}
.siec-port-list-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:3px;
  border-radius:50%;
  box-shadow:0 0 5px currentColor;
}
.siec-port-list-num{
  flex:0 0 auto;
  width:20px;
  color:var(--chart-single);
  font-weight:700;
}
.siec-port-list-info{
  flex:1 1 auto;
  min-width:0;
  color:#ededed;
}
.siec-port-list-alias{
  font-weight:600;
}
.siec-port-list-vlan{
  color:#999999;
  font-size:11px;
}
.siec-port-errors-wrap{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(170,170,170,.14);
}
.siec-port-errors-head{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#999999;
  padding-bottom:6px;
}
.siec-port-errors-list{
  max-height:180px;
  overflow-y:auto;
  padding-right:6px;
}
.siec-port-errors-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:5px 2px;
  font-size:11.5px;
  cursor:pointer;
  border-radius:10px;
}
.siec-port-errors-row:hover{
  background:rgba(255,91,91,.08);
}
.siec-port-errors-row + .siec-port-errors-row{
  border-top:1px solid rgba(170,170,170,.08);
}
.siec-port-errors-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:#ff5b5b;
  box-shadow:0 0 5px #ff5b5b;
}
.siec-port-errors-dot.resolved{
  background:var(--status-port-unused);
  box-shadow:none;
}
.siec-port-errors-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.siec-port-errors-name{
  color:#ededed;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.siec-port-errors-sub{
  color:#999999;
  font-size:10.5px;
}
.siec-port-errors-since{
  flex:0 0 auto;
  font-size:10.5px;
  color:#999999;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.siec-port-errors-empty{
  font-size:11.5px;
  color:#999999;
  padding:4px 2px;
}
.siec-port-search-wrap{
  position:relative;
  margin-bottom:8px;
}
.siec-port-search{
  width:100%;
  box-sizing:border-box;
  padding-right:28px;
  margin-bottom:0;
}
.siec-port-search-clear{
  display:none;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--neon2);
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.siec-port-search-clear.visible{
  display:flex;
}
.siec-port-search-clear:hover{
  color:var(--neon);
  background:rgba(150,150,150,.14);
}
/* Uniwersalny przycisk "×" doklejany automatycznie (JS, gcInitClearButtons())
   do KAŻDEGO pola tekstowego na stronie - nie tylko pól wyszukiwania. */
.gc-clear-btn{
  display:none;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:0;
  left:0;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--neon2);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.gc-clear-btn.visible{
  display:flex;
}
.gc-clear-btn:hover{
  color:var(--neon);
  background:rgba(150,150,150,.14);
}
.siec-port-eventlog-wrap{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(170,170,170,.14);
}
.siec-port-eventlog-head{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#999999;
  padding-bottom:6px;
}
.siec-port-eventlog-list{
  max-height:180px;
  overflow-y:auto;
  padding-right:6px;
}
.siec-port-eventlog-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:5px 2px;
  font-size:11.5px;
}
.siec-port-eventlog-row + .siec-port-eventlog-row{
  border-top:1px solid rgba(170,170,170,.08);
}
.siec-port-eventlog-dot{
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 0 5px #ffffff;
}
.siec-port-eventlog-dot.down{
  background:var(--status-port-down);
  box-shadow:0 0 5px var(--status-port-down);
}
.siec-port-eventlog-desc{
  flex:1 1 auto;
  min-width:0;
  color:#ededed;
}
.siec-port-eventlog-time{
  flex:0 0 auto;
  font-size:10.5px;
  color:#999999;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.siec-port-eventlog-empty{
  font-size:11.5px;
  color:#999999;
  padding:4px 2px;
}
.inventory-toolbar-btn.save{
  border-color:rgba(53,255,181,.5);
}
.inventory-toolbar-btn.save:hover{
  background:rgba(53,255,181,.18);
  border-color:rgba(53,255,181,.9);
  box-shadow:0 0 8px rgba(53,255,181,.5), 0 0 18px rgba(53,255,181,.3);
}
.inventory-toolbar-btn.cancel{
  border-color:rgba(255,102,102,.5);
}
.inventory-toolbar-btn.cancel:hover{
  background:rgba(255,102,102,.18);
  border-color:rgba(255,102,102,.9);
  box-shadow:0 0 8px rgba(255,102,102,.5), 0 0 18px rgba(255,102,102,.3);
}
.inventory-delete-cell{
  width:1%;
  white-space:nowrap;
  text-align:right;
}
.inventory-delete-btn{
  border:1px solid rgba(255,102,102,.4);
  background:rgba(30,8,8,.4);
  color:#ff6666;
  border-radius:10px;
  width:22px;
  height:22px;
  line-height:1;
  font-size:12px;
  cursor:pointer;
  display:none;
}
#inventory-table.edit-mode .inventory-delete-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.inventory-delete-btn:hover{
  background:rgba(255,102,102,.25);
  border-color:rgba(255,102,102,.8);
}
.inventory-delete-btn.pending{
  background:rgba(150,150,150,.15);
  border-color:rgba(150,150,150,.6);
  color:#c5c5c5;
}
.inventory-delete-btn.pending:hover{
  background:rgba(150,150,150,.3);
}
.gc-row.pending-delete{
  opacity:.45;
}
.gc-row.nas-backup-risk{
  color:#ffbe5c;
}
.gc-row.nas-backup-risk td:first-child{
  border-left:2px solid #ffbe5c;
}
.inv-confirm-pending-btn{
  border:none;
  background:none;
  cursor:pointer;
  font-size:12px;
  padding:0;
  vertical-align:middle;
}
.inventory-protocol-cell{
  text-align:center;
}
.inv-protocol-view-btn,
.inv-protocol-pin-btn,
.inv-protocol-delete-btn{
  border:none;
  background:none;
  cursor:pointer;
  font-size:14px;
  padding:0 2px;
  vertical-align:middle;
  color:var(--chart-single);
  transition:color .15s ease;
}
.inv-protocol-view-btn svg,
.inv-protocol-pin-btn svg,
.inv-protocol-delete-btn svg{
  display:block;
  vertical-align:middle;
}
.inv-protocol-view-btn:hover,
.inv-protocol-pin-btn:hover{
  color:var(--neon2);
}
.inv-protocol-delete-btn{
  color:#ff5a5a;
}
.inv-protocol-delete-btn:hover{
  color:#ff8080;
}
.inv-protocol-pin-btn,
.inv-protocol-delete-btn{
  display:none;
}
#inventory-table.edit-mode .inv-protocol-pin-btn,
#inventory-table.edit-mode .inv-protocol-delete-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#inventory-table.edit-mode .inv-protocol-view-btn,
#inventory-table.edit-mode .inv-protocol-empty{
  display:none;
}
.inv-phone-toggle-btn{
  border:1px solid rgba(150,150,150,.35);
  background:rgba(150,150,150,.08);
  color:var(--chart-single);
  border-radius:10px;
  padding:1px 8px;
  font-size:11px;
  cursor:pointer;
  vertical-align:middle;
}
.inv-phone-toggle-btn:hover{
  background:rgba(150,150,150,.2);
  border-color:rgba(150,150,150,.7);
}
#inventory-table.edit-mode .inv-phone-toggle-btn{
  display:none;
}
#inventory-table.edit-mode .inv-phone-real{
  display:inline !important;
}
.inventory-magazyn-wrap{
  margin-top:14px;
}
.inventory-magazyn-title{
  font-size:13px;
  font-weight:700;
  color:#e1e1e1;
  margin-bottom:8px;
}
.inventory-magazyn-count{
  color:var(--muted);
  font-weight:400;
}
.inventory-magazyn-empty{
  font-size:12px;
  color:var(--muted);
  padding:8px 0;
}
.inventory-magazyn-assign-input{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(65,65,65,.9);
  background:#0c0c0c;
  padding:4px 8px;
  font-size:12px;
  color:var(--fg);
}
.inventory-magazyn-assign-btn,
.inventory-magazyn-delete-btn{
  border:1px solid rgba(150,150,150,.4);
  background:rgba(19,19,19,.4);
  color:#c5c5c5;
  border-radius:10px;
  width:22px;
  height:22px;
  line-height:1;
  font-size:12px;
  cursor:pointer;
  margin-right:4px;
}
.inventory-magazyn-delete-btn{
  border-color:rgba(255,102,102,.4);
  color:#ff6666;
}
.gc-row.pending-delete .inventory-name-cell{
  text-decoration:line-through;
}
.inventory-cell{
  cursor:pointer;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inventory-cell.editing{
  padding:0 !important;
  overflow:visible;
}
.inventory-cell input{
  width:100%;
  box-sizing:border-box;
  background:rgba(15,15,15,.9);
  border:1px solid rgba(150,150,150,.6);
  border-radius:8px;
  color:#f3f3f3;
  font:inherit;
  padding:var(--gc-cell-pad-y) var(--gc-cell-pad-x);
  outline:none;
}
.inventory-cell input:focus{
  border-color:var(--neon2);
  box-shadow:0 0 4px rgba(150,150,150,.5);
}
.section-header-bar{
  width:100%;
  box-sizing:border-box;
  margin-bottom:8px;
}

.backup-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
}
.backup-toggle{
  border:none;
  background:transparent;
  color:#f3f3f3;
  border-radius:12px;
  padding:2px 6px;
  cursor:pointer;
  box-shadow:none;
}
.backup-toggle:hover{
  color:#d9d9d9;
}
.backup-dropdown{
  position:absolute;
  right:0;
  top:100%;
  margin-top:4px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:14px;
  box-shadow:var(--panel-shadow);
  padding:8px 10px;
  min-width:200px;
  max-height:220px;
  overflow:auto;
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:20;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #101010;
}
.backup-dropdown::-webkit-scrollbar { width:10px; height:10px; }
.backup-dropdown::-webkit-scrollbar-track {
  background:#101010;
  border-radius:14px;
}
.backup-dropdown::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#96969688,#b0b0b088);
  border:1px solid #161616;
  border-radius:14px;
  box-shadow:inset 0 0 8px #96969655;
}
.backup-dropdown.show{
  display:flex;
}
.backup-item{
  padding:6px 8px;
  border:var(--panel-border);
  border-radius:12px;
  background:var(--panel-bg);
  color:#f3f3f3;
  font-size:12px;
  cursor:pointer;
}
.backup-item:hover{
  border-color:rgba(150,150,150,.6);
  box-shadow:0 0 12px rgba(150,150,150,.18);
}
.backup-item.active{
  border-color:rgba(150,150,150,.8);
  box-shadow:0 0 14px rgba(150,150,150,.35), inset 0 0 12px rgba(150,150,150,.18);
}
.section-header-bar{
  width:100%;
  box-sizing:border-box;
  margin-bottom:0;
}
.crash-indicator-list{
  margin-top:6px;
  padding-top:0;
  border-top:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.crash-indicator-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12.5px;
  color:#c8c8c8;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.crash-indicator-row:last-child{
  border-bottom:none;
}
.crash-indicator-name{
  color:#bababa;
}
.crash-indicator-count{
  font-weight:800;
}
mark.log-hit{
  background:#464646;
  color:#fff;
  padding:0 2px;
  border-radius:4px;
}
.devices-table th,
.gc-table th{
  color:#e1e1e1;
  border-bottom:var(--surface-border);
  font-weight:600;
  background:var(--surface-bg);
  text-align:center;
  position:sticky;
  top:0;
  z-index:3;
}
/* Naglowek jest "position:sticky" i maluje WLASNE, nieprzezroczyste tlo
   (potrzebne zeby przykrywac wiersze przewijane pod nim) - bez tego jego
   prostokatny ksztalt optycznie "zasklepia" zaokraglony gorny rog
   .gc-frame/.device-frame (border-radius:16px, patrz --panel-radius), mimo
   ze sam frame ma overflow:auto i technicznie przycina zawartosc do
   zaokraglenia - kolor tla naglowka jest identyczny jak tlo frame'u, wiec
   przyciecie jest niewidoczne, a widoczny jest tylko kwadratowy naglowek.
   Zgloszone przez uzytkownika 2026-08-20 (screenshot "Historia alertów") -
   dotyczy WSZYSTKICH tabel .gc-table/.devices-table na stronie.
   PIERWSZA proba fixu (border-top-*-radius bezposrednio na <th>) NIE
   zadzialala - user potwierdzil screenshotem ze rog nadal kwadratowy.
   Przyczyna: .gc-table ma border-collapse:collapse (patrz definicja
   powyzej), a wg specyfikacji CSS border-radius na komorkach tabeli jest
   CALKOWICIE ignorowany przez przegladarki gdy border-collapse:collapse jest
   aktywne - nie ma znaczenia jak bardzo poprawny jest selektor.
   Prawdziwy fix ponizej: para "wciek" (concave corner) pseudo-elementow na
   SAMYM .gc-frame/.device-frame (nie na <th>) - kwadracik
   var(--panel-radius) x var(--panel-radius) w kazdym z dwoch gornych rogow,
   z-index WYZSZY niz naglowek (sticky th ma z-index:3), wypelniony
   radial-gradient: promien od WEWNETRZNEGO rogu kwadratu (tam gdzie styka
   sie z reszta zaokraglonej krawedzi frame'u) przezroczysty do promienia
   var(--panel-radius), a POZA tym promieniem (czyli dokladnie w naroznym
   "trojkacie" ktory naglowek bledy wypelnil swoim kwadratowym tlem) kolor
   strony (--bg) - czyli maskuje TYLKO ten fragment ktory powinien byc
   "wyciety" przez zaokraglenie, zostawiajac srodek (gdzie i tak jest tlo
   naglowka pod spodem) w pelni przezroczystym. Czysto kosmetyczny trik bez
   zadnej zmiany struktury DOM/JS (resize-uchwyt i paginacja nadal dzialaja
   na tym samym .gc-frame co zawsze). pointer-events:none zeby nie blokowac
   klikania w naglowek (sortowanie kolumn) pod spodem. */
.gc-frame, .device-frame{ position:relative; }
.gc-frame::before, .gc-frame::after,
.device-frame::before, .device-frame::after{
  content:'';
  position:absolute;
  top:0;
  width:var(--panel-radius);
  height:var(--panel-radius);
  z-index:4;
  pointer-events:none;
}
.gc-frame::before, .device-frame::before{
  left:0;
  background:radial-gradient(circle at 100% 100%, transparent var(--panel-radius), var(--bg) var(--panel-radius));
}
.gc-frame::after, .device-frame::after{
  right:0;
  background:radial-gradient(circle at 0% 100%, transparent var(--panel-radius), var(--bg) var(--panel-radius));
}
.gc-th-sub{
  display:block;
  font-weight:400;
  font-size:.82em;
  opacity:.65;
  text-transform:lowercase;
}
.gc-row{
  background:transparent;
  border:none;
  border-radius:0;
  transition:none;
  box-shadow:none;
}
.gc-row:hover{
  background:transparent;
}
.status-chip{
  display:inline-block;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  border:1px solid;
  opacity:.85;
  line-height:1.4;
}
/* Komorka "peak" w tabeli Ruch klienci (2026-08-28) - wartosc + opcjonalna
   plakietka % taryfy jako WLASNA, stala struktura (flex-column + gap) zamiast
   <br>+margin-top inline - to ostatnie dawalo nierowny odstep i "skakanie"
   wysokosci wiersza miedzy klientami z plakietka i bez niej (zgloszenie
   uzytkownika). min-height utrzymuje jednolita wysokosc wiersza niezaleznie
   od tego, czy dany klient ma $pctDown/$pctUp (np. brak danych taryfy). */
td.klienciruch-peak-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-height:34px;
  justify-content:center;
  white-space:normal;
  overflow:visible;
}
.status-ok{
  color:#86efac;
  border-color:var(--status-port-up);
}
.status-problem{
  color:#ffb7b7;
  border-color:#ff5b5b;
}
.status-unknown{
  color:#ffdca3;
  border-color:#ffbe5c;
}
.status-mixed{
  color:#ffb7b7;
  border-color:#ff5b5b;
}
.status-neutral{
  color:#b5b5b5;
  border-color:var(--status-port-unused);
}
.status-vpn-yes{
  color:#cbe3ff;
  border-color:#5aa4ff;
}
.status-vpn-no{
  color:#b5b5b5;
  border-color:var(--status-port-unused);
}
.siec-port-count{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}
.siec-pc-up{ color:var(--status-port-up); }
.siec-pc-down{ color:var(--status-port-down); }
.siec-pc-unused{ color:#9a9a9a; }
.siec-pc-sep{ color:var(--chart-single-label); font-weight:400; }
.vlany-devices-cell{
  white-space:normal !important;
  line-height:1.9;
}
.vlany-device-chip{
  display:inline-block;
  padding:1px 8px;
  margin:1px 3px 1px 0;
  border-radius:14px;
  font-size:11px;
  font-family:inherit;
  border:1px solid rgba(150,150,150,.3);
  background:rgba(150,150,150,.08);
  color:#e7e7e7;
}
button.vlany-device-chip{
  cursor:default;
}
.vlany-device-clickable{
  cursor:pointer;
}
.vlany-device-clickable:hover{
  background:rgba(150,150,150,.22);
  border-color:rgba(150,150,150,.7);
}
.vlany-device-up{
  border-color:rgba(255,255,255,.5);
  color:#ffffff;
}
.vlany-device-down{
  border-color:rgba(239,68,68,.5);
  color:#ff9d9d;
}
.vlany-device-unused{
  border-color:rgba(154,154,154,.4);
  color:#b5b5b5;
}
.gc-col-resize-handle{
  position:absolute;
  top:0; right:-4px; bottom:0;
  width:8px;
  cursor:col-resize;
  user-select:none;
  z-index:3;
  touch-action:none;
}
.gc-col-resize-handle:hover,
.gc-col-resize-handle.resizing{
  background:rgba(150,150,150,.35);
}
th.gc-sortable{
  cursor:pointer;
  user-select:none;
}
th.gc-sortable:hover{
  color:#ffffff;
}
.gc-sort-arrow{
  display:inline-block;
  margin-left:4px;
  font-size:10px;
  color:var(--chart-single-label);
  vertical-align:middle;
}
.gc-sort-arrow::after{
  content:'⇅';
}
th.gc-sortable[data-sort-dir="asc"] .gc-sort-arrow{
  color:var(--neon2);
}
th.gc-sortable[data-sort-dir="asc"] .gc-sort-arrow::after{
  content:'▲';
}
th.gc-sortable[data-sort-dir="desc"] .gc-sort-arrow{
  color:var(--neon2);
}
th.gc-sortable[data-sort-dir="desc"] .gc-sort-arrow::after{
  content:'▼';
}
/* Kolumny statusowe w trybie cyklicznego przełączania statusu (patrz
   initSortableTable() w index.php, data-sort-dir="status") - kropka zamiast
   strzałki, żeby odróżnić od zwykłego asc/desc. */
th.gc-sortable[data-sort-dir="status"] .gc-sort-arrow{
  color:var(--neon2);
}
th.gc-sortable[data-sort-dir="status"] .gc-sort-arrow::after{
  content:'●';
}
/* Table shell */
.table-shell{
  position:relative;
  margin-top:0;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  height:auto;
  min-height:0;
  flex:0 1 auto;
  animation:none;
  transform-origin:unset;
}
.list-frame{
  position:relative;
  border:none;
  border-radius:0;
  background:transparent;
  padding:0;
  box-shadow:none;
  animation:none;
}
@keyframes neonFramePulse{
  0%,100%{
    border-color:var(--frame-border-base);
    box-shadow:var(--frame-glow-base);
  }
  50%{
    border-color:var(--frame-border-peak);
    box-shadow:var(--frame-glow-peak);
  }
}

/* Unified neon frame across bordered elements */
.modal-card,
.updates-dropdown,
.server-chip:not(.menu-chip){
  box-shadow:var(--frame-glow-base);
  animation:var(--frame-anim);
  border-color:var(--frame-border-base);
}

/* Scroll */
.scrollable{
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #101010;
  touch-action:none;
}
.scrollable::-webkit-scrollbar { width:10px; height:10px; }
.scrollable::-webkit-scrollbar-track {
  background:#101010;
  border-radius:14px;
}
.scrollable::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#96969688,#b0b0b088);
  border:1px solid #161616;
  border-radius:14px;
  box-shadow:inset 0 0 8px #96969655;
}

/* Table */
table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  font-size:13px;
}
th,td{
  padding:var(--cell-pad-y) var(--cell-pad-x);
  text-align:left;
  white-space:nowrap;
}
th{
  color:#e1e1e1;
  border-bottom:var(--panel-border);
  font-weight:600;
}
tbody tr{
  background:transparent;
  border:none;
  border-radius:0;
  transition:none;
}
tbody tr:hover{
  background:rgba(255,255,255,.02);
}
tbody tr + tr{border-top:var(--row-divider);}
.list-frame table{
  border-collapse:collapse;
  border-spacing:0;
}
.list-frame th, .list-frame td{
  padding:var(--cell-pad-y) var(--cell-pad-x);
}
.list-frame tbody tr{
  background:transparent;
  border:none;
  border-radius:0;
  transition:none;
}
.list-frame tbody tr + tr{
  border-top:var(--row-divider);
}

/* Powered text under frame */
.powered-under{
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
  text-align:center;
}
.powered-under a{
  color:var(--neon);
  text-decoration:none;
}
.powered-under a:hover{text-decoration:underline;}

/* Loader overlay */
.loader-overlay{
  position:fixed;
  inset:0;
  /* Podniesione z 0.94 (2026-08-24, zgłoszenie użytkownika: tło overlaya
     przy przejściu między stronami zbyt przeświecało treścią pod spodem -
     "2,6 Mbps" itp. czytelne przez warstwę) - prawie pełna nieprzezroczystość,
     żeby loader realnie zasłaniał poprzednią stronę podczas ładowania. */
  background:rgba(6,6,6,0.985);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease-out;
}
body.loading .loader-overlay{
  opacity:1;
  pointer-events:auto;
}
.loader-orb-wrap{
  text-align:center;
}
/* Przebudowane 2026-08-24 (audyt UI) - poprzednia wersja miała turkusową kulę
   (#00ffbf) niezależną od motywu strony i tekst PO ANGIELSKU ("PLEASE
   WAIT...") - jedyne miejsce w całym serwisie nie po polsku. Teraz: neutralny
   pierścień w kolorach akcentu strony (--neon/--neon2, więc automatycznie
   szary w Czarnym i niebieski w Kolor - bez duplikowania logiki motywu) i
   polski tekst, spójne z resztą interfejsu (w tym ze skeleton-loaderami
   .gc-skel/.gc-skel-chart wprowadzonymi tego samego dnia). */
.loader-orb{
  width:64px;
  height:64px;
  border-radius:50%;
  position:relative;
}
.loader-orb::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid rgba(150,150,150,.18);
}
.loader-orb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--neon2);
  border-right-color:var(--neon2);
  filter:drop-shadow(0 0 6px var(--neon2));
  animation:orbSpin 1s linear infinite;
}
@keyframes orbSpin{to{transform:rotate(360deg);}}
.loader-text{
  margin-top:14px;
  letter-spacing:.14em;
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.92);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
  box-sizing:border-box;
  z-index:900;
}
/* Uniwersalne okno potwierdzenia (gcConfirm) musi zawsze być NAD innymi
   otwartymi oknami (może być wywołane z wnętrza dowolnego z nich, np. z
   edycji wpisu w kalendarzu) - stąd wyższy z-index niż zwykłe .modal-backdrop. */
#gc-confirm-modal-backdrop{
  z-index:950;
}
/* Modal peera BGP otwierany KLIKIEM Z WNETRZA modalu urzadzenia (zakladka
   Routing, patrz siecOpenBgpPeerModal) - oba maja z-index:900 z bazowej
   reguly, wiec o tym co jest "na wierzchu" decydowalaby wylacznie kolejnosc
   w DOM (siec-bgp-peer-modal-backdrop jest WCZESNIEJ niz
   siec-port-modal-backdrop w index.php), co chowalo peer-modal POD modalem
   urzadzenia zamiast nad nim (zgloszenie uzytkownika 2026-08-28). Wyzszy
   z-index (ten sam poziom co gcConfirm) naprawia to niezaleznie od kolejnosci
   w znacznikach. */
#siec-bgp-peer-modal-backdrop{
  z-index:950;
}
.modal-backdrop.active{
  display:flex;
}
.modal-card{
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 48px);
  min-height:0;
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1a;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:18px 16px 16px;
  margin:auto;
  transform:scale(0.8);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;
}
/* Modal wpisu Kalendarza (Nowy/Edytuj/podglad) - szerszy i "szklany" (2026-08-28,
   zgloszenie uzytkownika: pojedynczy wpis ma sie rozciagac na cala szerokosc
   tekstu zamiast waskiej stalej kolumny). max-width procentowy (nie staly px
   jak reszta modali) - dluzsze wpisy (patrz dziennik prac Claude, wielo-
   akapitowe notatki AI Advisor) faktycznie korzystaja z dodatkowej przestrzeni,
   krotkie i tak nie rozciagna sie wizualnie bo tresc jest krotsza niz max-width.
   Szklany efekt: polprzezroczyste tlo + backdrop-filter blur zamiast plaskiego
   #1a1a1a - tlo strony (siatka kalendarza) widoczne "przez" karte. */
.mm-event-modal-card{
  max-width:min(720px, 92vw);
  background:rgba(120,120,120,.22);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 16px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.modal-backdrop.active .modal-card{
  transform:scale(1);
  opacity:1;
}
.modal-title{
  clear:both;
  margin:0 0 4px;
  font-size:17px;
  font-weight:700;
}
.modal-sub{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}
.modal-fields{
  max-height:360px;
  overflow:auto;
  padding-right:6px;
}
.modal-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
}
.modal-field span{
  font-size:12px;
  color:#e2e2e2;
}
.modal-field input,
.modal-field select,
.modal-field textarea{
  border-radius:14px;
  border:1px solid rgba(65,65,65,.9);
  background:#0c0c0c;
  padding:6px 10px;
  font-size:13px;
  font-family:inherit;
  color:var(--fg);
  resize:vertical;
}
.modal-field select{
  cursor:pointer;
}
.modal-field input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(.8);
  cursor:pointer;
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus{
  outline:none;
  border-color:var(--neon);
  box-shadow:0 0 10px rgba(150,150,150,.5);
}
.mm-port-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mm-port-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.mm-port-row select{
  flex:1 1 auto;
  min-width:0;
}
.mm-port-row-btn{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:12px;
  border:1px solid rgba(65,65,65,.9);
  background:#0c0c0c;
  color:#ff9a9a;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.mm-port-row-btn:hover{
  border-color:rgba(255,90,90,.7);
  color:#ffb3b3;
}
.mm-event-view-text{
  font-size:13.5px;
  line-height:1.6;
  color:#e2e2e2;
  background:rgba(170,170,170,.06);
  border:1px solid rgba(170,170,170,.16);
  border-radius:14px;
  padding:12px 14px;
  margin:4px 0 12px;
  white-space:pre-wrap;
  word-wrap:break-word;
  max-height:280px;
  overflow-y:auto;
}
.mm-event-view-text a{
  color:var(--neon2);
}
.modal-error{
  margin:6px 0 8px;
  font-size:12px;
  color:#ff8c8c;
}
.modal-footer{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
/* Uproszczone (2026-08-28 v3) - stary styl (gradient+wielowarstwowy
   glow+font-weight:800) faktycznie i tak renderowal sie plasko odkad
   --card/--bg zbiegly sie kolorystycznie w nowej, szarej palecie (patrz
   przeglad uzytkownika: "Zapisz" w Nowy wpis wygladalo juz skromnie mimo
   "ciezkiego" kodu pod spodem) - kod uproszczony DO TEGO, co faktycznie
   widac, zeby nie utrzymywac martwej wagi wizualnej. TEN sam styl jest
   teraz jedynym wzorcem przycisku modala/karty w calym serwisie - patrz
   .ai-advisor-btn nizej, ktory jawnie go kopiuje zamiast wlasnej wersji. */
.modal-action-btn{
  padding:8px 16px;
  border-radius:12px;
  border:1px solid rgba(150,150,150,.4);
  background:rgba(255,255,255,.03);
  color:#f0f0f0;
  font-weight:500;
  letter-spacing:normal;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:background-color .15s ease, border-color .15s ease;
}
.modal-action-btn:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(150,150,150,.65);
}
.modal-action-btn:active{
  background:rgba(255,255,255,.1);
}
.modal-action-btn-confirm{
  border-color:rgba(70,210,120,.5);
  color:#a8f0bf;
}
.modal-action-btn-confirm:hover{
  background:rgba(70,210,120,.1);
  border-color:rgba(70,210,120,.75);
}
/* sticky (nie absolute) - .siec-port-modal-card sam siebie przewija
   (overflow:auto, max-height:95vh) przy dużej zawartości (patrz komentarz
   przy .siec-port-modal-card), więc "x" z position:absolute przewijał się
   RAZEM z treścią i znikał poza widocznym obszarem - użytkownik nie mógł
   zamknąć okna bez przewinięcia z powrotem na sam początek. Sticky trzyma
   go zawsze w prawym górnym rogu widocznego (przewiniętego) obszaru. Element
   musi być float:right, żeby sticky "top" faktycznie zadziałało na inline
   spanie bez zmiany reszty layoutu (h3/p pod nim zostają w normalnym flow). */
.modal-close{
  position:sticky;
  float:right;
  top:8px;
  right:10px;
  margin-left:12px;
  z-index:2;
  cursor:pointer;
  font-size:16px;
  color:var(--muted);
}

/* Dashboard widget – server overview */
.server-widget{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  margin-top:0;
  width:100%;
}

.server-header-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:0;
  margin-bottom:4px;
  width:100%;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
}
.server-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid rgba(150,150,150,0.28);
  background:transparent;
  font-size:12px;
  box-shadow:0 0 10px rgba(150,150,150,0.2);
  animation:none;
}
.server-header-grid{
  justify-content:flex-start;
}
.server-chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
}
.server-chip .chip-label{
  color:#d4d4d4;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}
.server-chip .chip-value{
  display:flex;
  align-items:center;
  gap:4px;
  color:#f7f7f7;
}
.uptime-chip .chip-value{
  color:#f7f7f7;
}

/* Windows Updates chip (interaktywny – rozwija listę) */
.server-chip.updates-chip{
  position:relative;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.server-chip.updates-chip:hover{
  background:rgba(150,150,150,.14);
  border-color:rgba(150,150,150,.8);
  box-shadow:0 0 8px rgba(150,150,150,.55), 0 0 18px rgba(150,150,150,.35);
}

.server-chip.updates-chip .updates-count{
  font-weight:700;
  color:#a3a3a3; /* 0 – szary */
}

/* 1 обновление – зелёный */
.server-chip.updates-chip.upd-one .updates-count{
  color:#ffffff;
}

/* >3 обновлений – красный */
.server-chip.updates-chip.upd-many .updates-count{
  color:#ff6666;
}

.server-chip.updates-chip .updates-arrow{
  font-size:10px;
  color:var(--muted);
  transition:transform .16s ease-out;
}

.server-chip.updates-chip.open .updates-arrow{
  transform:rotate(180deg);
}

.updates-dropdown{
  position:absolute;
  top:115%;
  left:0;
  min-width:260px;
  background:rgba(12,12,12,.98);
  border-radius:16px;
  border:1px solid transparent;
  box-shadow:var(--frame-glow-base);
  animation:var(--frame-anim);
  border-color:var(--frame-border-base);
  padding:6px 10px;
  display:none;
  z-index:20;
}

.server-chip.updates-chip.open .updates-dropdown{
  display:block;
}

  .updates-item{
    font-size:11px;
    color:var(--fg);
    padding:2px 0;
  }

  /* Raport chip – как Updates, но со своей цифрой */
  .server-chip.host-chip{
    position:relative;
    cursor:pointer;
  }
  .server-chip.host-chip .host-arrow{
    font-size:10px;
    color:var(--muted);
    transition:transform .16s ease-out;
  }
  .server-chip.host-chip.open .host-arrow{
    transform:rotate(180deg);
  }
  .host-dropdown{
    position:absolute;
    top:115%;
    left:0;
    min-width:220px;
    background:rgba(12,12,12,.98);
    border-radius:16px;
    border:1px solid transparent;
    box-shadow:var(--frame-glow-base);
    animation:var(--frame-anim);
    border-color:var(--frame-border-base);
    padding:6px 8px;
    display:none;
    z-index:25;
  }
  .server-chip.host-chip.open .host-dropdown{
    display:block;
  }
  .server-chip.host-chip.single-host{
    cursor:default;
  }
  .server-chip.host-chip.single-host .host-dropdown{
    display:none !important;
  }
  .host-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 8px;
    border-radius:14px;
    color:var(--fg);
    text-decoration:none;
    transition:background .12s ease, color .12s ease;
    font-size:11px;
  }
  .host-option:hover,
  .host-option:focus{
    background:rgba(156,156,156,.08);
    outline:none;
  }
  .host-option .host-name{
    font-weight:600;
  }
  .host-option .host-badge{
    font-size:10px;
    color:var(--muted);
  }
  .host-option.active .host-name{
    color:var(--neon2);
  }
  .host-option.active .host-badge{
    color:var(--neon2);
  }

  .server-chip .chip-value{
   color:#f3f3f3;
   font-weight:500;
 }

}
/* stat grid */
.server-stats-grid{
  display:flex;
  flex-direction:column;
  gap:18px; /* bardziej zwarta siatka jak w Pamięć systemu */
  width:100%;
}
.server-stats-grid-bottom{
  margin-top:8px;
}
.server-stats-col-left{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.server-stats-col-right{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.server-stats-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:flex-start; /* естественная высота карточек без лишнего растягивания */
  width:100%;
}
.server-stats-top.stats-equal{
  align-items:stretch; /* выравниваем карточки по высоте в первом ряду */
}
.server-stats-top.top-list-row .terminal-card{
  display:flex;
  flex-direction:column;
}
.server-stats-top.top-list-row .metric-group:last-of-type:not(.top-list-sync){
  margin-bottom:auto;
}
.server-stats-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:auto;
}
.server-stats-stack > .server-stat-card:last-child{
  flex:1; /* dolna karta w kolumnie dorasta, żeby oba stosy kończyły się na tej samej wysokości */
}
.server-stats-top + .server-stats-top{
  margin-top:14px; /* разделяем верхний и нижний ряд */
}
.api-list .terminal-line:not(:last-child){
  border-bottom:1px solid rgba(55,55,55,.24);
  padding-bottom:2px;
  margin-bottom:2px;
}

@media (max-width: 900px){
  .server-stats-col-left{
    gap:8px;
  }
}
.server-stat-card{
  border-radius:var(--panel-radius);
  border:var(--panel-border);
  background:var(--panel-bg);
  padding:12px;
  position:relative;
  box-shadow:var(--panel-shadow);
  font-size:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:none;
}
.server-stats-top .server-stat-card .metric-group:last-child{
  margin-top:auto; /* опускаем последний блок (top processes) к низу карточки */
}
.server-stat-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#c5c5c5;
  font-weight:800;
  margin-bottom:8px;
}
.terminal-card .terminal-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:1px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.terminal-line.small{
  font-size:12px;
  opacity:1;
  margin:0;
  padding:1px 0;
}
.terminal-line .t-label{
  color:#f3f3f3;
}
.terminal-line .t-value{
  color:#a9a9a9;
  font-size:11px;
}
/* metric bars */
.metric-group{
  margin-top:4px;
}
.metric-group.tight-first{
  margin-top:0 !important;
  margin-bottom:2px !important;
}
.top-list-sync{
  display:flex;
  flex-direction:column;
  margin-top:auto;
  gap:4px;
}
.top-list-sync .top-list-card{
  margin-top:4px;
}
.metric-label{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:2px;
}
.metric-label.occupancy-label{
  font-size:13px !important;
  letter-spacing:.12em;
}
.metric-value-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
}
.metric-main{
  font-size:13px;
  font-weight:600;
  color:#f3f3f3;
}
.metric-sub{
  font-size:12px;
  color:var(--muted);
}
/* TOP 5 rows layout */
.top-proc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 0;
  margin: 0;
}
.top-proc-row:not(:last-child){
  border-bottom:1px solid rgba(55,55,55,.24);
  padding-bottom:2px;
  margin-bottom:2px;
}

.top-proc-name {
  font-size: 12px;  /* 1px smaller than header */
  color: #f3f3f3;
  font-weight: 400;
  padding-right: 10px;
}

.top-proc-load {
  font-size: 11px;     /* 1px smaller than header */
  color: #efefef;      /* светлый нейтральный */
  font-weight: 400;    /* тонкий текст, не жирный */
  min-width: 50px;
  text-align: right;
  opacity: 0.9;        /* чтобы немного мягче смотрелось */
}
.top-list-card{
  margin-top:6px;
  padding:2px 0;
  border-radius:0;
  background:transparent;
  border:none;
}
.server-stats-top.stats-equal .top-list-card{
  margin-top:auto;
  padding-top:6px;
}
.drive-speed-list .terminal-line{
  padding:1px 0;
  border-bottom:1px solid rgba(40,40,40,0.55);
}
.drive-speed-list .terminal-line:last-child{
  border-bottom:none;
}
.drive-speed-list .terminal-line .t-label{
  font-size:12px;
}
.drive-speed-list .terminal-line .t-value{
  font-size:11px;
}

.metric-bar{
  margin-top:4px;
  position:relative;
  height:var(--loader-height);
  min-height:var(--loader-height);
  max-height:var(--loader-height);
  border-radius:999px;
  background:#0a0a0a;
  border:none;
  overflow:hidden;
}
.metric-bar-inner{
  position:absolute;
  inset:0;
  height:100%;
  width:0;
  transform-origin:left center;
  transform:scaleX(0);
  animation:barGrow 1.1s ease-out forwards, barFlow 4s linear infinite;
  transition:background 0.4s ease-out, box-shadow 0.4s ease-out;
  background-size:200% 100%;

}
.metric-bar-inner.cpu{animation-delay:.05s;}
.metric-bar-inner.ram{animation-delay:.1s;}
.metric-bar-inner.disk{animation-delay:.15s;}

@keyframes barGrow{
  to{transform:scaleX(1);}
}
@keyframes barFlow{
  0%  { background-position:0 0; }
  100%{ background-position:100% 0; }
}

/* network */
.net-grid{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.net-card{
  padding:6px 0;
  border-radius:0;
  background:transparent;
  border:none;
}
.net-card .terminal-line:not(:last-child){
  border-bottom:var(--row-divider);
}
.net-grid .net-card + .net-card{
  border-top:none;
  margin-top:8px;
  padding-top:0;
}
.net-card .metric-label,
.net-card .metric-main,
.net-card .terminal-line{
  font-size:12px;
}
.net-card .terminal-line .t-label{
  font-size:12px;
}
.net-card .terminal-line .t-value{
  font-size:11px;
}
.server-stat-card.terminal-card{
  animation:none;
  box-shadow:var(--panel-shadow);
}
.stats-chart-card{
  padding-bottom:12px;
}
.stat-chart-legend{
  margin-top:2px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  flex-wrap:wrap;
}
.stat-chart-legend .legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.stat-chart-legend .legend-range{
  margin-left:auto;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 8px currentColor;
}
.legend-dot.ram{
  background:#adadad;
  color:#adadad;
}
.legend-dot.cpu{
  background:#eaeaea;
  color:#eaeaea;
}
.stat-chart-wrap{
  position:relative;
  width:100%;
  height:320px;
  margin-top:10px;
  background:transparent;
}
#stats-chart{
  width:100%;
  height:100%;
  display:block;
}
@media (prefers-reduced-motion: reduce){
  .bg-anim::before,
  .bg-anim::after,
  .wrap::before,
  .server-stat-card.terminal-card{
    animation:none !important;
  }
}

/* Mobile */
@media (max-width: 900px){
  .wrap{padding:14px 16px 24px;}
  .board{
    grid-template-columns:max-content 1fr max-content;
    column-gap:10px;
    row-gap:0;
    padding:10px 12px;
  }
  .table-shell{
    height:auto;
    padding:8px 6px 4px;
  }
  .device-frame, .apps-frame, .gc-frame{
    height:calc(100vh - 300px);
  }
  table{
    font-size:11px;
    min-width:540px;
  }
  .server-stats-top{grid-template-columns:1fr;}
}

@media (max-width:480px){
  th,td{
    padding:3px 8px;
    font-size:11px;
  }
  .status-pill{
    min-width:58px;
    font-size:10px;
  }
}

/* Cyberpunk "ACCESS GRANTED" – po zalogowaniu, na tle już wczytanego dashboardu */
.access-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,5,5,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.access-overlay.show{
  opacity:1;
  pointer-events:auto;
}
.access-box{
  position:relative;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  text-align:center;
  padding:26px 46px;
  border-radius:8px;
  background:rgba(9,9,9,.6);
  box-shadow:0 0 20px rgba(150,150,150,.3), 0 0 50px rgba(150,150,150,.12) inset;
  overflow:hidden;
  animation:accessBoxIn .25s ease-out;
}
.access-box::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-100%;
  height:60%;
  background:linear-gradient(180deg, transparent, rgba(150,150,150,.18), transparent);
  animation:accessScan 1.4s linear infinite;
}
.access-box .corner{
  position:absolute;
  width:18px;
  height:18px;
  pointer-events:none;
}
.access-box .corner.tl{ top:-1px; left:-1px; border-top:2px solid var(--neon2); border-left:2px solid var(--neon2); }
.access-box .corner.tr{ top:-1px; right:-1px; border-top:2px solid var(--neon2); border-right:2px solid var(--neon2); }
.access-box .corner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--neon2); border-left:2px solid var(--neon2); }
.access-box .corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--neon2); border-right:2px solid var(--neon2); }
.access-box.denied .corner{ border-color:#ff6666 !important; }
.access-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--neon2);
  text-shadow:0 0 8px rgba(150,150,150,.8), 0 0 20px rgba(150,150,150,.5);
}
.access-sub{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.12em;
  color:#f7f7f7;
  opacity:.9;
}
@keyframes accessBoxIn{
  0%{transform:scale(.94); opacity:0;}
  100%{transform:scale(1); opacity:1;}
}
@keyframes accessScan{
  0%{top:-60%;}
  100%{top:100%;}
}

/* Zakładka "Dostęp" - zarządzanie dostępem kont IT do zakładek (developer-only) */
.dostep-layout{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.dostep-users-col{
  flex:0 0 260px;
  border:var(--surface-border);
  border-radius:var(--panel-radius);
  background:var(--surface-bg);
  padding:14px;
}
.dostep-tree-col{
  flex:1 1 auto;
  min-width:0;
}
.dostep-col-title{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.dostep-users-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:70vh;
  overflow-y:auto;
}
.dostep-user-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 11px;
  border-radius:12px;
  color:var(--fg);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  transition:background-color .15s ease, border-color .15s ease;
}
.dostep-user-item:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.dostep-user-item.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
.dostep-user-sam{
  font-size:11px;
  color:var(--muted);
}
.dostep-tree-placeholder{
  color:var(--muted);
  padding:24px 0;
}
.dostep-group{
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:12px 14px;
  margin-bottom:8px;
}
.dostep-group-label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--fg);
}
.dostep-subsections{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px 16px;
  margin:10px 0 0 26px;
}
.dostep-sub-label{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  min-width:0;
}
.dostep-sub-label span,
.dostep-sub-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dostep-sub-label input,
.dostep-group-label input{
  accent-color:var(--accent);
  cursor:pointer;
  flex-shrink:0;
}
.dostep-save-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.dostep-save-status{
  font-size:13px;
  color:var(--muted);
}
.dostep-save-status.ok{
  color:var(--status-port-up);
}
.dostep-save-status.error{
  color:var(--status-port-down);
}


/* Automatyzacje: modal "Job Details" (patrz index.php, section=automatyzacje) -
   dwukolumnowy layout (szczegoly + Error/Log po lewej, lista poprzednich
   uruchomien po prawej), zamodelowany na widoku "Job Details" Cronicle.
   max-width:700px usunieto 2026-08-22 - na szerokim modalu (.siec-port-modal-card
   siega az 1500px) zostawialo caly prawy margines pusty, a lewa kolumna
   sprawiala wrazenie "naleplonej" (zglosil uzytkownik ze zrzutem ekranu).
   Teraz layout rozciaga sie na cala szerokosc modala, grid dostaje wiecej
   kolumn dzieki auto-fit zamiast sztywnych dwoch. */
.automatyzacje-detail-subrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.automatyzacje-detail-subrow .siec-port-modal-sub{
  margin:0;
}
.automatyzacje-detail-layout{
  display:flex;
  gap:24px;
  margin-top:14px;
  align-items:flex-start;
}
.automatyzacje-detail-main{
  flex:1 1 auto;
  min-width:0;
}
.automatyzacje-detail-history{
  flex:0 0 220px;
  min-width:0;
  border-left:1px solid rgba(170,170,170,.14);
  padding-left:14px;
}
.automatyzacje-detail-history-list-wrap{
  max-height:60vh;
  overflow:auto;
}
.automatyzacje-history-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.automatyzacje-history-row > td{
  padding:6px 4px;
  font-size:10.5px;
  color:#c7c7c7;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .12s ease, color .12s ease;
}
.automatyzacje-history-row.active > td{
  background:rgba(200,200,200,.3);
  color:#fff;
  font-weight:600;
}
.automatyzacje-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px 24px;
  margin-top:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(170,170,170,.12);
  border-radius:14px;
}
.automatyzacje-detail-grid-item{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.automatyzacje-detail-grid-item .label{
  font-size:10.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#8a8a8a;
}
.automatyzacje-detail-grid-item .value{
  font-size:13px;
  color:#e6e6e6;
  word-break:break-word;
}
@media (max-width: 720px){
  .automatyzacje-detail-layout{ flex-direction:column; }
  .automatyzacje-detail-history{
    flex:1 1 auto;
    border-left:none;
    border-top:1px solid rgba(170,170,170,.14);
    padding-left:0;
    padding-top:10px;
  }
  .automatyzacje-detail-history-list-wrap{ max-height:180px; }
}
.silownie-battery-icon{
  display:inline-block;
  animation:silownieBatteryPulse 1.6s ease-in-out infinite;
}
@keyframes silownieBatteryPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

.gc-asn-name{ color:#8a8f98; font-weight:400; }

#klienciruch-table, #asnruch-table, #georuch-table, #portruch-table{ min-width:820px; }

/* Suwak "Liczba pozycji" w analizie ruchu klienta (Ruch klienci -> modal)
   - rozowy jak linia Out (Upload) na wykresie ruchu, zeby byl od razu
     widoczny jako element sterujacy, nie zlewal sie z reszta interfejsu. */
.klienciruch-topn-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:6px;
  border-radius:4px;
  background:linear-gradient(90deg, #ff3fc7 0%, #ff3fc7 var(--klienciruch-fill, 50%), rgba(255,255,255,.14) var(--klienciruch-fill, 50%), rgba(255,255,255,.14) 100%);
  outline:none;
  cursor:pointer;
}
.klienciruch-topn-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ff3fc7;
  border:2px solid #121212;
  box-shadow:0 0 6px rgba(255,63,199,.7);
  cursor:pointer;
}
.klienciruch-topn-range::-moz-range-track{
  height:6px;
  border-radius:4px;
  background:rgba(255,255,255,.14);
}
.klienciruch-topn-range::-moz-range-progress{
  height:6px;
  border-radius:4px;
  background:#ff3fc7;
}
.klienciruch-topn-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ff3fc7;
  border:2px solid #121212;
  box-shadow:0 0 6px rgba(255,63,199,.7);
  cursor:pointer;
}

/* Paginacja tabel (2026-08-19) - zastepuje przewijanie w .gc-frame na
   strony 1 2 3 4..., patrz initPaginatedTable() w index.php. */
.gc-frame-paginated{
  height:auto;
  max-height:none;
  min-height:0;
  overflow-x:auto;
  overflow-y:visible;
  resize:none;
}
.gc-page-hidden{
  display:none !important;
}
.gc-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
  margin:10px 0 2px;
}
.gc-page-btn{
  border:1px solid rgba(150,150,150,.35);
  background:rgba(15,15,15,.4);
  color:#f7f7f7;
  border-radius:10px;
  padding:5px 11px;
  font-size:12.5px;
  font-weight:400;
  cursor:pointer;
  min-width:32px;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.gc-page-btn:hover:not(:disabled){
  background:rgba(150,150,150,.22);
  border-color:rgba(150,150,150,.9);
  box-shadow:0 0 8px rgba(150,150,150,.55), 0 0 18px rgba(150,150,150,.35);
}
.gc-page-btn.active{
  background:rgba(150,150,150,.3);
  border-color:var(--neon2);
  color:#fff;
  font-weight:600;
}
.gc-page-btn:disabled{
  opacity:.35;
  cursor:default;
}
.gc-page-ellipsis{
  color:var(--muted);
  padding:0 4px;
  user-select:none;
}

/* ===========================================================================
   Motyw "Kolor" - override tokenów/wartości specyficznych dla tego motywu
   (scalenie theme-black.css + theme-color.css, 2026-08-24). Selektory poniżej
   mają identyczną strukturę co ich odpowiedniki wyżej w pliku, różnią się TYLKO
   wartościami (głównie kolor, kilka nie-kolorowych różnic ujednolicone ręcznie
   PRZED wygenerowaniem tego bloku - patrz audyt UI, 8-punktowa lista structural).
   Prefiks [data-theme="color"] podnosi specyficzność na tyle, by nadpisać bazową
   regułę bez !important. */

[data-theme="color"] .bg-anim::before{  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(620px 620px at 20% 20%, rgba(50,130,255,.20), transparent 62%),
    radial-gradient(520px 520px at 82% 12%, rgba(70,170,255,.16), transparent 60%),
    radial-gradient(680px 680px at 76% 72%, rgba(35,110,230,.18), transparent 64%),
    radial-gradient(460px 460px at 12% 78%, rgba(90,190,255,.13), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 8px);
  mix-blend-mode:screen;
  opacity:.55;
  filter:blur(.3px);}
[data-theme="color"] .bg-anim::after{  content:"";
  position:absolute;
  inset:-14%;
  background:
    linear-gradient(180deg, rgba(30,110,220,.1) 0%, rgba(0,0,0,0) 35%, rgba(10,180,200,.07) 65%, rgba(0,0,0,0) 95%),
    repeating-linear-gradient(105deg, transparent 0 68%, rgba(120,200,255,.06) 68.5% 69.2%, transparent 69.2% 100%);
  background-size:120% 200%, 260% 160%;
  opacity:.28;}
[data-theme="color"] .wrap::before{  content:"";
  position:fixed;
  inset:-16%;
  background:
    radial-gradient(30% 34% at 62% 16%, rgba(30,140,255,.16), transparent 65%),
    radial-gradient(24% 28% at 12% 60%, rgba(60,170,255,.12), transparent 62%);
  opacity:.4;
  mix-blend-mode:screen;
  pointer-events:none;}
[data-theme="color"] .logo-text .git{ color:#3aa6ff; }
[data-theme="color"] .cw-widget{  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#9aa8b8;
  white-space:nowrap;}
[data-theme="color"] .cw-date{  font-variant-numeric:tabular-nums;
  color:#9aa8b8;}
[data-theme="color"] .cw-time{  font-variant-numeric:tabular-nums;
  color:#cfe4ff;
  font-weight:600;
  letter-spacing:.02em;}
[data-theme="color"] .gc-notif-bell-btn{  color:#1c3a66;}
[data-theme="color"] .gc-notif-bell-btn:hover{  color:#1c3a66;
  background:rgba(20,40,80,.1);}
[data-theme="color"] .gc-notif-bell-count{  background:#e0453f;}
[data-theme="color"] .gc-notif-dropdown{  background:#fff;
  border:1px solid rgba(20,40,80,.18);
  box-shadow:0 12px 32px rgba(20,40,80,.25);}
[data-theme="color"] .gc-notif-dropdown-header{  color:#1c3a66;
  border-bottom:1px solid rgba(20,40,80,.1);}
[data-theme="color"] .gc-notif-empty{  color:#7a8aa0;}
[data-theme="color"] .gc-notif-cell{  border-bottom:1px solid rgba(20,40,80,.08);
  border-left-color:#8a9ab0;}
[data-theme="color"] .gc-notif-cell.sev-critical{  border-left-color:#e0453f;}
[data-theme="color"] .gc-notif-cell.sev-warning{  border-left-color:#d98c1f;}
[data-theme="color"] .gc-notif-cell:hover{  background:rgba(20,40,80,.05);}
[data-theme="color"] .gc-notif-cell-badge-critical{  color:#e0453f;}
[data-theme="color"] .gc-notif-cell-badge-warning{  color:#d98c1f;}
[data-theme="color"] .gc-notif-cell-badge-info{  color:#8a9ab0;}
[data-theme="color"] .gc-notif-cell-title{  color:#1c3a66;}
[data-theme="color"] .gc-notif-cell-desc{  color:#5a6b85;}
[data-theme="color"] .gc-notif-cell-time{  color:#98a5ba;}
[data-theme="color"] .gc-notif-cell-close{  color:#8a9ab0;}
[data-theme="color"] .gc-notif-cell-close:hover{  background:rgba(20,40,80,.1);
  color:#1c3a66;}
[data-theme="color"] .auth-user-chip{  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#f2f6fc;}
[data-theme="color"] .auth-user-icon{  color:#3aa6ff;
  flex-shrink:0;}
[data-theme="color"] .auth-user-group{  color:#9aa8b8;
  font-weight:400;}
[data-theme="color"] .auth-logout-link{  color:#f2f6fc;
  text-decoration:none;
  border:1px solid rgba(90,164,255,.35);
  border-radius:10px;
  padding:4px 10px;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;}
[data-theme="color"] .auth-logout-link:hover{  background:rgba(28,116,255,.2);
  border-color:rgba(90,164,255,.9);
  box-shadow:0 0 8px rgba(28,116,255,.55), 0 0 18px rgba(90,164,255,.35);}
/* .menu-pill-dropdown border - poprawiony na kolor akcentu Kolor (niebieski
   rgba(90,164,255,...), tak jak analogiczny .inv-switcher-dropdown) zamiast
   dosłownie skopiowanego szarego z theme-black.css (przeoczenie przy
   naprawie "prześwitywania" dropdownu 2026-08-24, wykryte przy scalaniu). */
[data-theme="color"] .menu-pill-dropdown{ border-color:rgba(90,164,255,.28); }
[data-theme="color"] .btn{  padding:8px 16px;
  border-radius:16px;
  border:1px solid var(--neon);
  background:linear-gradient(180deg,rgba(28,116,255,.18),rgba(0,0,0,0));
  color:var(--fg);
  cursor:pointer;
  box-shadow:
    0 0 10px rgba(28,116,255,.22) inset,
    0 0 10px rgba(0,255,166,.1);
  transition:transform .2s, box-shadow .25s, border-color .25s, background .2s, opacity .2s;
  font-size:13px;
  white-space:nowrap;}
[data-theme="color"] .btn-secondary{  border-color:rgba(0,140,210,0.9);
  background:linear-gradient(180deg,rgba(0,120,210,.18),rgba(0,0,0,0));}
[data-theme="color"] .btn-disabled{  opacity:.35;
  pointer-events:none;
  border-color:#1a2635;}
[data-theme="color"] .device-frame, [data-theme="color"] .gc-frame{  border:var(--surface-border);
  border-radius:var(--panel-radius);
  background:var(--surface-bg);
  padding:12px;
  box-shadow:var(--panel-shadow);
  height:calc(100vh - 320px);
  min-height:160px;
  overflow:auto;
  resize:vertical;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #0b0f15;}
[data-theme="color"] .device-frame::-webkit-scrollbar-track, [data-theme="color"] .gc-frame::-webkit-scrollbar-track{  background:#0b0f15;
  border-radius:14px;}
[data-theme="color"] .device-frame::-webkit-scrollbar-thumb, [data-theme="color"] .gc-frame::-webkit-scrollbar-thumb{  background:linear-gradient(180deg,#1c74ff88,#5aa4ff88);
  border:1px solid #0b1a22;
  border-radius:14px;
  box-shadow:inset 0 0 8px #1c74ff55;}
[data-theme="color"] .devices-table th, [data-theme="color"] .gc-table th{  padding:calc(var(--gc-cell-pad-y) - 1px) var(--gc-cell-pad-x);
  font-size:12px;
  line-height:1.18;
  position:relative;
  border-right:1px solid rgba(90,164,255,.22);
  border-top:1px solid rgba(90,164,255,.22);}
[data-theme="color"] .devices-table th, [data-theme="color"] .gc-table th{  color:#c3e8ff;
  border-bottom:var(--surface-border);
  font-weight:600;
  background:var(--surface-bg);
  text-align:center;
  position:sticky;
  top:0;
  z-index:3;}
[data-theme="color"] .devices-table th:first-child, [data-theme="color"] .gc-table th:first-child{  border-left:1px solid rgba(90,164,255,.22);}
[data-theme="color"] .log-refresh-meta{  font-size:11px;
  color:#7f93b3;
  white-space:nowrap;}
[data-theme="color"] .dashboard-card{  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid #666666;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  transition:background .15s ease, opacity .3s ease;}
[data-theme="color"] .dashboard-card.sev-info{ border-left-color:#666666; }
[data-theme="color"] .dashboard-wf-chip.wf-new{ color:#3949c9; border-color:#7c93ff; }
[data-theme="color"] .dashboard-wf-chip.wf-progress{ color:#b5b5b5; border-color:#666666; }
[data-theme="color"] .dashboard-card-top .status-chip{ color:var(--muted); border-color:rgba(20,40,80,.25); }
[data-theme="color"] .dashboard-investigation-note{  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  padding:8px 10px;
  background:rgba(255,255,255,.03);
  border-radius:10px;
  border-left:2px solid rgba(46,160,100,.5);}
[data-theme="color"] .dashboard-investigation-note-head{  font-weight:600;
  color:var(--fg, #222);
  margin-bottom:4px;}
[data-theme="color"] .gc-temp.temp-ok{ color:var(--status-port-up); }
[data-theme="color"] .dashboard-incident-child-temp.temp-ok{ color:var(--status-port-up); }
[data-theme="color"] .dashboard-btn-verify{  border-color:var(--neon2);
  color:#fff;
  background:rgba(15,15,15,.65);}
[data-theme="color"] .inv-switcher-dropdown{  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:160px;
  /* max-height:340px + overflow-y:auto usunięte 2026-08-22 na wyraźną prośbę
     ("usuń scroller, niech się zawsze pokazuje w całości") - listy w tych
     dropdownach (przełączniki lokalizacji/kategorii) są krótkie, rozciągnięcie
     do naturalnej wysokości treści jest bezpieczne. */
  background:var(--panel-bg);
  border:1px solid rgba(90,164,255,.24);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  padding:5px 0;
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:30;}
[data-theme="color"] .inv-switcher-item{  display:block;
  padding:8px 14px;
  font-size:13px;
  color:#94a9c8;
  text-decoration:none;
  white-space:nowrap;
  border-left:2px solid transparent;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;}
[data-theme="color"] .inv-switcher-item:hover{  background:rgba(90,164,255,.06);
  color:#cfe4ff;}
[data-theme="color"] .inv-switcher-item.active{  color:#dff0ff;
  background:rgba(90,164,255,.10);
  border-left-color:var(--neon);}
[data-theme="color"] .mm-split-resizer::before{  content:"";
  width:3px;
  height:42px;
  border-radius:4px;
  background:rgba(90,164,255,.25);
  transition:background-color .15s ease;}
[data-theme="color"] .mm-split-resizer:hover::before, [data-theme="color"] .mm-split-resizer.dragging::before{  background:rgba(90,164,255,.75);
  box-shadow:0 0 8px rgba(90,164,255,.5);}
[data-theme="color"] .mm-calendar-title{  font-size:15px;
  font-weight:700;
  color:#dff0ff;
  text-transform:capitalize;}
[data-theme="color"] .mm-calendar-nav{  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:10px;
  border:1px solid rgba(90,164,255,.24);
  background:rgba(120,160,220,.06);
  color:#94a9c8;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;}
[data-theme="color"] .mm-calendar-nav:hover{  background:rgba(90,164,255,.14);
  border-color:rgba(90,164,255,.5);
  color:#dff0ff;}
[data-theme="color"] .mm-calendar-weekdays span{  text-align:center;
  font-size:10.5px;
  color:#7f93b3;
  text-transform:uppercase;
  letter-spacing:.04em;}
[data-theme="color"] .mm-calendar-day{  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:4px;
  border:1px solid rgba(120,160,220,.16);
  border-radius:12px;
  background:rgba(120,160,220,.06);
  color:#c4d3ea;
  font-size:12.5px;
  font-family:inherit;
  transition:background-color .15s ease, border-color .15s ease;
  overflow:hidden;}
[data-theme="color"] .mm-calendar-day:hover{  background:rgba(120,160,220,.1);}
[data-theme="color"] .mm-calendar-day.today{  border-color:rgba(44,224,255,.6);}
[data-theme="color"] .mm-calendar-day.active{  border-color:var(--neon);
  background:rgba(90,164,255,.1);}
[data-theme="color"] .mm-calendar-day-num{  border:none;
  background:none;
  color:#eef4ff;
  font-size:15.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  padding:2px 6px;
  border-radius:8px;
  transition:background-color .15s ease, color .15s ease;}
[data-theme="color"] .mm-calendar-day.has-events .mm-calendar-day-num{  color:#dff0ff;
  font-weight:700;}
[data-theme="color"] .mm-calendar-day-num:hover{  background:rgba(90,164,255,.16);}
[data-theme="color"] .mm-calendar-day.active .mm-calendar-day-num{  background:var(--neon2);
  color:#0c1526;}
[data-theme="color"] .mm-calendar-day-add{  position:absolute;
  top:3px;
  right:3px;
  width:22px;
  height:22px;
  line-height:19px;
  border:1px solid rgba(90,164,255,.3);
  border-radius:8px;
  background:rgba(120,160,220,.08);
  color:#7f93b3;
  font-size:16px;
  font-family:inherit;
  cursor:pointer;
  padding:0;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;}
[data-theme="color"] .mm-calendar-day-add:hover{  background:rgba(90,164,255,.24);
  border-color:rgba(90,164,255,.7);
  color:#dff0ff;}
[data-theme="color"] .mm-calendar-note-line{  display:block;
  width:100%;
  font-family:inherit;
  font-size:10.5px;
  line-height:14px;
  color:#e4ddff;
  background:rgba(138,108,255,.22);
  border:1px solid rgba(138,108,255,.28);
  border-left:2px solid #8a6cff;
  border-radius:4px;
  padding:1px 4px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background-color .15s ease;}
[data-theme="color"] .mm-calendar-note-line:hover{  background:rgba(138,108,255,.34);}
[data-theme="color"] .mm-calendar-note-line.status-active{  color:#ffffff;
  background:rgba(90,164,255,.22);
  border-left-color:#5aa4ff;
  font-weight:600;}
[data-theme="color"] .mm-calendar-note-line.status-active:hover{  background:rgba(90,164,255,.32);}
[data-theme="color"] .mm-calendar-note-line.status-done{  color:#8391ad;
  background:rgba(120,160,220,.06);
  border-left-color:#5c6b85;}
[data-theme="color"] .mm-calendar-note-line.status-done:hover{  background:rgba(120,160,220,.12);}
[data-theme="color"] .mm-calendar-note-more{  color:#7f93b3;}
[data-theme="color"] .mm-calendar-day-indicator{  border-color:rgba(120,160,220,.2);
  background:rgba(120,160,220,.08);
  color:#c4d3ea;}
[data-theme="color"] .mm-calendar-day-indicator:hover{  background:rgba(90,164,255,.16);}
[data-theme="color"] .mm-calendar-day-dot.dot-active{  background:#5aa4ff;
  box-shadow:0 0 4px rgba(90,164,255,.7);}
[data-theme="color"] .mm-day-timeline-item::before{  background:rgba(120,160,220,.2);}
[data-theme="color"] .mm-day-timeline-node{  background:#5c6b85;}
[data-theme="color"] .mm-day-timeline-item.status-active .mm-day-timeline-node{  background:#5aa4ff;
  box-shadow:0 0 0 3px var(--bg), 0 0 6px rgba(90,164,255,.7);}
[data-theme="color"] .mm-day-timeline-content{  border-color:rgba(120,160,220,.16);
  background:rgba(120,160,220,.04);
  color:#c4d3ea;}
[data-theme="color"] .mm-day-timeline-content:hover{  background:rgba(90,164,255,.12);}
[data-theme="color"] .mm-day-timeline-item.status-active .mm-day-timeline-content{  color:#ffffff;
  border-color:rgba(90,164,255,.4);}
[data-theme="color"] .mm-day-timeline-item.status-done .mm-day-timeline-content{  color:#8391ad;}
[data-theme="color"] .mm-day-timeline-time{  color:#7f93b3;}
[data-theme="color"] .mm-day-timeline-group{  border-bottom-color:rgba(120,160,220,.14);}
[data-theme="color"] .mm-day-timeline-change-tag{  color:#7f93b3;
  background:rgba(120,160,220,.1);}
[data-theme="color"] .mm-day-timeline-item.status-active .mm-day-timeline-change-tag{  color:#dff0ff;
  background:rgba(90,164,255,.2);}

/* AI Advisor (2026-08-28) - karty sugestii, sekcja sections/ai-advisor_view.php.
   Styl jak .mm-day-timeline-content (border+lekkie tlo), status koloruje
   lewy pasek jak .mm-calendar-note-line.status-active/status-done. */
.ai-advisor-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ai-advisor-card{
  border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--status-port-unused);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:12px 14px;
}
.ai-advisor-card-accepted{
  border-left-color:#22c55e;
}
.ai-advisor-card-rejected{
  border-left-color:#6e6e6e;
  opacity:.65;
}
.ai-advisor-card-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.ai-advisor-card-title{
  font-size:14px;
  font-weight:700;
  color:#f2f2f2;
}
.ai-advisor-card-rationale{
  font-size:12.5px;
  line-height:1.5;
  color:#c7c7c7;
  white-space:pre-wrap;
}
.ai-advisor-card-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
/* Wlasny, plaski styl przyciskow (2026-08-28) zamiast ciezkiego
   .modal-action-btn (glow/gradient/inset-shadow) - ten ostatni byl
   zaprojektowany pod stary, dekoracyjny wyglad modalek i po przejsciu kart
   na plaski styl (patrz surface-bg) wygladal niespojnie z reszta karty
   (zgloszenie uzytkownika: "czcionki i przyciski gdzies rozsynchronizowane").
   Waga/rozmiar czcionki dopasowane do .ai-advisor-card-title (14px/700), nie
   do globalnego .modal-action-btn (ktory zostaje bez zmian dla modalek). */
/* Kopia .modal-action-btn 1:1 (2026-08-28 v3) - jedyny wzorzec przycisku
   w modalach/kartach w calym serwisie (zgloszenie uzytkownika: "usun gruby
   font wszedzie, zsynchronizuj design jak w Zapisz"). Osobna nazwa klasy
   TYLKO dla selektorow JS (.ai-advisor-accept-btn/.ai-advisor-reject-btn w
   assets/js/app.js), nie dla innego wygladu. */
.ai-advisor-btn{
  padding:8px 16px;
  border-radius:12px;
  border:1px solid rgba(150,150,150,.4);
  background:rgba(255,255,255,.03);
  color:#f0f0f0;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:normal;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:background-color .15s ease, border-color .15s ease;
}
.ai-advisor-btn:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(150,150,150,.65);
}
.ai-advisor-accept-btn{
  border-color:rgba(70,210,120,.5);
  color:#a8f0bf;
}
.ai-advisor-accept-btn:hover{
  background:rgba(70,210,120,.1);
  border-color:rgba(70,210,120,.75);
}
.ai-advisor-card-status{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
[data-theme="color"] .ai-advisor-card{  border-color:rgba(120,160,220,.16);
  background:rgba(120,160,220,.05);}
[data-theme="color"] .ai-advisor-card-title{  color:#eef4ff;}
[data-theme="color"] .ai-advisor-card-rationale{  color:#b7c3dd;}
[data-theme="color"] .mm-calendar-month-tile{  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid rgba(120,160,220,.14);
  border-radius:14px;
  background:rgba(120,160,220,.04);
  padding:8px;
  transition:border-color .15s ease;}
[data-theme="color"] .mm-calendar-month-tile.current-month{  border-color:rgba(44,224,255,.6);}
[data-theme="color"] .mm-calendar-month-header{  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  border:none;
  background:none;
  padding:0 0 5px;
  margin:0;
  border-bottom:1px solid rgba(120,160,220,.12);
  color:#c4d3ea;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  text-transform:capitalize;
  cursor:pointer;
  transition:color .15s ease;}
[data-theme="color"] .mm-calendar-month-header:hover{  color:#f2f6fc;}
[data-theme="color"] .mm-calendar-month-header.has-events{  color:#dff0ff;}
[data-theme="color"] .mm-calendar-month-total{  flex:0 0 auto;
  font-size:9.5px;
  font-weight:700;
  color:var(--neon2);
  background:rgba(90,164,255,.14);
  border-radius:14px;
  padding:0 6px;}
[data-theme="color"] .mm-calendar-mini-day{  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:4px;
  background:none;
  color:#7f93b3;
  font-size:9.5px;
  font-family:inherit;
  cursor:pointer;
  padding:0;
  transition:background-color .15s ease, border-color .15s ease;}
[data-theme="color"] .mm-calendar-mini-day:hover{  background:rgba(90,164,255,.16);
  color:#dff0ff;}
[data-theme="color"] .mm-calendar-mini-day.has-events{  color:#dff0ff;
  background:rgba(90,164,255,.14);
  font-weight:700;}
[data-theme="color"] .mm-calendar-mini-day.today{  border-color:rgba(44,224,255,.7);}
[data-theme="color"] .mm-calendar-mini-day.active{  background:var(--neon2);
  color:#0c1526;
  font-weight:700;}
[data-theme="color"] .mm-feed-error, [data-theme="color"] .mm-feed-empty{  padding:30px 10px;
  text-align:center;
  color:#94a9c8;
  font-size:13px;}
[data-theme="color"] .mm-post-avatar{  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  color:#0c1526;
  background:linear-gradient(135deg,var(--neon),var(--neon2));}
[data-theme="color"] .mm-post-author{  font-size:13px;
  font-weight:600;
  color:#cfe4ff;}
[data-theme="color"] .mm-post-time{  font-size:11px;
  color:#6c7f9c;}
[data-theme="color"] .mm-post-text{  margin-top:3px;
  font-size:13.5px;
  line-height:1.5;
  color:#c4d3ea;
  word-wrap:break-word;}
[data-theme="color"] .mm-post-text code{  background:rgba(120,160,220,.12);
  padding:1px 5px;
  border-radius:8px;
  font-size:12px;}
[data-theme="color"] .mm-attachment{  margin-top:6px;
  padding:8px 12px;
  border-left:3px solid var(--neon2);
  background:rgba(120,160,220,.06);
  border-radius:8px;
  font-size:13px;}
[data-theme="color"] .mm-attachment-pretext{  margin-bottom:4px;
  color:#c4d3ea;}
[data-theme="color"] .mm-attachment-author{  font-size:12px;
  color:#94a9c8;
  margin-bottom:2px;}
[data-theme="color"] .mm-attachment-title{  font-weight:600;
  color:#cfe4ff;
  margin-bottom:4px;}
[data-theme="color"] .mm-attachment-title a{  color:#cfe4ff;}
[data-theme="color"] .mm-attachment-text{  color:#c4d3ea;
  margin-bottom:4px;}
[data-theme="color"] .mm-attachment-field-title{  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#7f93b3;}
[data-theme="color"] .mm-attachment-field-value{  font-size:12.5px;
  color:#d3e0f2;}
[data-theme="color"] .mm-attachment-footer{  margin-top:6px;
  font-size:11px;
  color:#6c7f9c;}
[data-theme="color"] .mm-post-image{  max-width:260px;
  max-height:260px;
  width:auto;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(120,160,220,.18);
  cursor:zoom-in;
  display:block;}
[data-theme="color"] .mm-reaction-chip{  font-size:12px;
  padding:2px 8px;
  border-radius:16px;
  background:rgba(90,164,255,.10);
  border:1px solid rgba(120,160,220,.18);
  color:#cfe4ff;}
[data-theme="color"] .mm-post-files{  margin-top:6px;
  font-size:12px;
  color:#7f93b3;}
[data-theme="color"] .inventory-search-input{  width:100%;
  /* Zmniejszone z 360px (2026-08-24, zgłoszenie użytkownika: pole wyglądało
     nieproporcjonalnie szeroko/"ważniej" niż pasek MENU nad nim) - nadal
     mieści większość placeholderów w całości na desktopie, po prostu nie
     rozpycha całego rzędu toolbar. */
  max-width:300px;
  padding:7px 12px;
  background:rgba(9,13,21,.4);
  border:1px solid rgba(90,164,255,.3);
  border-radius:10px;
  color:#f2f6fc;
  font-size:13px;
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;}
[data-theme="color"] .inventory-search-input:focus{  border-color:var(--neon2);
  box-shadow:0 0 8px rgba(28,116,255,.4);}
[data-theme="color"] #inventory-table.edit-mode td.inventory-cell[data-col="computer_name"], [data-theme="color"] #inventory-table.edit-mode td.inventory-cell[data-col="phone"]{  border:1px solid rgba(90,164,255,.28);
  box-shadow:0 0 3px rgba(28,116,255,.18);
  border-radius:8px;
  transition:box-shadow .25s ease, border-color .25s ease;}
[data-theme="color"] #inventory-table.edit-mode td.inventory-cell[data-col="computer_name"]:hover, [data-theme="color"] #inventory-table.edit-mode td.inventory-cell[data-col="phone"]:hover{  border-color:var(--neon2);
  box-shadow:0 0 6px rgba(28,116,255,.7), 0 0 16px rgba(90,164,255,.55), 0 0 34px rgba(90,164,255,.35), 0 0 10px rgba(90,164,255,.4) inset;}
[data-theme="color"] .inventory-add-col-btn{  border:1px solid rgba(90,164,255,.35);
  background:rgba(9,13,21,.4);
  color:#8bc3ff;
  border-radius:10px;
  width:22px;
  height:22px;
  line-height:1;
  font-size:14px;
  font-weight:700;
  cursor:pointer;}
[data-theme="color"] .inventory-add-col-btn:hover{  background:rgba(28,116,255,.2);
  border-color:rgba(90,164,255,.6);}
[data-theme="color"] .inventory-name-cell{  font-weight:400;
  color:#e7f6ff;
  white-space:nowrap;}
[data-theme="color"] .inventory-toolbar-btn{  border:1px solid rgba(90,164,255,.35);
  background:rgba(9,13,21,.4);
  color:#f2f6fc;
  border-radius:10px;
  padding:5px 14px;
  font-size:12px;
  font-weight:400;
  cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;}
[data-theme="color"] .inventory-toolbar-btn:hover{  background:rgba(28,116,255,.22);
  border-color:rgba(90,164,255,.9);
  box-shadow:0 0 8px rgba(28,116,255,.55), 0 0 18px rgba(90,164,255,.35);}
[data-theme="color"] .inventory-toolbar-btn:disabled:hover{  background:rgba(9,13,21,.4);
  border-color:rgba(90,164,255,.35);
  box-shadow:none;}
[data-theme="color"] .historyalert-row.is-expanded td{ background:rgba(90,164,255,.08); }
[data-theme="color"] .siec-device-row.clickable:hover > td, [data-theme="color"] .siec-device-row.clickable:focus-visible > td, [data-theme="color"] .unimus-row.clickable:hover > td, [data-theme="color"] .unimus-row.clickable:focus-visible > td, [data-theme="color"] .nas-row.clickable:hover > td, [data-theme="color"] .nas-row.clickable:focus-visible > td, [data-theme="color"] .silownie-row.clickable:hover > td, [data-theme="color"] .silownie-row.clickable:focus-visible > td, [data-theme="color"] .cms-olt-row.clickable:hover > td, [data-theme="color"] .cms-olt-row.clickable:focus-visible > td, [data-theme="color"] .cms-ont-search-row.clickable:hover > td, [data-theme="color"] .cms-ont-search-row.clickable:focus-visible > td, [data-theme="color"] .siec-related-row.clickable:hover > td, [data-theme="color"] .siec-related-row.clickable:focus-visible > td, [data-theme="color"] .proxmox-vm-row.clickable:hover > td, [data-theme="color"] .proxmox-vm-row.clickable:focus-visible > td, [data-theme="color"] .automatyzacje-history-row:hover > td, [data-theme="color"] .automatyzacje-history-row:focus-visible > td, [data-theme="color"] .automatyzacje-row.clickable:hover > td, [data-theme="color"] .automatyzacje-row.clickable:focus-visible > td, [data-theme="color"] .klienciruch-row.clickable:hover > td, [data-theme="color"] .klienciruch-row.clickable:focus-visible > td, [data-theme="color"] .asnruch-row.clickable:hover > td, [data-theme="color"] .asnruch-row.clickable:focus-visible > td{  background:rgba(90,164,255,.14);}
[data-theme="color"] .siec-device-row.clickable:focus-visible, [data-theme="color"] .unimus-row.clickable:focus-visible, [data-theme="color"] .nas-row.clickable:focus-visible, [data-theme="color"] .silownie-row.clickable:focus-visible, [data-theme="color"] .cms-olt-row.clickable:focus-visible, [data-theme="color"] .cms-ont-search-row.clickable:focus-visible, [data-theme="color"] .siec-related-row.clickable:focus-visible, [data-theme="color"] .proxmox-vm-row.clickable:focus-visible, [data-theme="color"] .automatyzacje-row.clickable:focus-visible, [data-theme="color"] .klienciruch-row.clickable:focus-visible, [data-theme="color"] .asnruch-row.clickable:focus-visible{  outline:1px solid rgba(90,164,255,.6);
  outline-offset:-1px;}
[data-theme="color"] .siec-port-modal-card{  width:100%;
  max-width:1500px;
  max-height:calc(100vh - 48px);
  min-height:0;
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1a;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:20px 22px 18px;
  margin:auto;
  transform:scale(0.85);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;}
[data-theme="color"] .siec-port-modal-title{  clear:both;
  margin:0 0 2px;
  font-size:18px;
  font-weight:700;
  color:#dff0ff;}
[data-theme="color"] .siec-modal-tabs{  display:flex;
  gap:6px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(120,160,220,.14);}
[data-theme="color"] .siec-modal-tab{  background:none;
  border:none;
  color:#7f93b3;
  font-size:12.5px;
  font-weight:600;
  padding:6px 4px 10px;
  cursor:pointer;
  border-bottom:2px solid transparent;}
[data-theme="color"] .siec-modal-tab:hover{ color:#c5d9ff; }
[data-theme="color"] .siec-routing-as{  font-size:12.5px;
  color:#c5d9ff;
  margin:0 0 12px;}
[data-theme="color"] .siec-config-summary{  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:0 0 12px;
  padding:8px 12px;
  background:rgba(10,20,40,.45);
  border:1px solid rgba(120,160,255,.18);
  border-radius:12px;
  font-size:12.5px;
  color:#c5d9ff;}
[data-theme="color"] .siec-config-summary-item{  color:#9fb6e0;}
[data-theme="color"] .siec-routing-subhead{  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#7f93b3;
  margin:16px 0 6px;}
[data-theme="color"] .nas-usage-bar{  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(120,160,220,.16);
  overflow:hidden;
  min-width:60px;}
[data-theme="color"] .siec-config-pre{  margin:0;
  max-width:100%;
  max-height:60vh;
  overflow:auto;
  background:rgba(10,16,28,.6);
  border:1px solid rgba(120,160,220,.14);
  border-radius:12px;
  padding:38px 16px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  line-height:1.55;
  color:#c5d9ff;
  white-space:pre;
  box-sizing:border-box;}
[data-theme="color"] .siec-config-match.current{  background:rgba(28,116,255,.65);}
[data-theme="color"] .siec-config-search-wrap{  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(9,13,21,.92);
  border:1px solid rgba(90,164,255,.3);
  border-radius:10px;
  padding:3px 4px;}
[data-theme="color"] .siec-config-search-wrap input{  width:120px;
  background:transparent;
  border:none;
  outline:none;
  color:#f2f6fc;
  font-size:12px;
  padding:2px 4px;}
[data-theme="color"] .siec-config-search-count{  font-size:11px;
  color:#7f93b3;
  min-width:32px;
  text-align:center;}
[data-theme="color"] .siec-config-search-wrap button:hover{  color:var(--neon);
  background:rgba(90,164,255,.14);}
[data-theme="color"] .siec-config-version-wrap{  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px;
  font-size:12px;
  color:#c5d9ff;}
[data-theme="color"] .siec-config-version-wrap select{  background:rgba(9,13,21,.6);
  border:1px solid rgba(90,164,255,.3);
  border-radius:10px;
  color:#f2f6fc;
  font-size:12px;
  padding:4px 8px;}
[data-theme="color"] .siec-port-modal-loading, [data-theme="color"] .siec-port-modal-error{  padding:40px 0;
  text-align:center;
  color:#94a9c8;
  font-size:13px;}
[data-theme="color"] .siec-port-legend{  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(120,160,220,.14);
  font-size:12px;
  color:#c5d9ff;}
[data-theme="color"] .siec-port-detail{  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(120,160,220,.14);
  min-height:20px;}
[data-theme="color"] .siec-port-detail-title{  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#dff0ff;
  margin-bottom:8px;}
[data-theme="color"] .siec-port-detail-value{  font-size:13px;
  color:#dbe9ff;}
[data-theme="color"] .pvm-disk-mount{  flex:0 0 auto;
  max-width:120px;
  color:#dbe9ff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;}
[data-theme="color"] .pvm-disk-bar{  flex:1 1 160px;
  max-width:220px;
  height:6px;
  border-radius:4px;
  background:rgba(90,164,255,.16);
  overflow:hidden;
  min-width:60px;}
[data-theme="color"] .pvm-disk-bar-fill{  display:block;
  height:100%;
  background:var(--chart-in,#5aa4ff);
  border-radius:4px;}
[data-theme="color"] .pvm-disk-nums{  flex:0 0 auto;
  color:var(--chart-single-label,#7fa0c0);
  white-space:nowrap;
  font-size:11.5px;}
[data-theme="color"] .siec-port-detail-graph-wrap{  margin-top:14px;
  border-top:1px solid rgba(120,160,220,.15);
  padding-top:10px;}
[data-theme="color"] .siec-graph-range-btn{  font-size:10.5px;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid rgba(120,160,220,.3);
  background:transparent;
  color:#7f93b3;
  cursor:pointer;}
[data-theme="color"] .siec-graph-range-btn:hover{  border-color:rgba(127,184,255,.6);
  color:#dbe9ff;}
[data-theme="color"] .siec-graph-range-btn.active{  background:rgba(127,184,255,.15);
  border-color:var(--chart-single);
  color:var(--chart-single);}
[data-theme="color"] .siec-traffic-stat-value{  font-size:13px;
  color:#dbe9ff;
  font-variant-numeric:tabular-nums;}
[data-theme="color"] .siec-chart-zoom-reset{  padding:2px 8px;
  font-size:10.5px;
  border:1px solid rgba(90,164,255,.4);
  border-radius:8px;
  background:rgba(9,13,21,.65);
  color:var(--neon2);
  cursor:pointer;
  margin-right:6px;}
[data-theme="color"] .siec-chart-zoom-reset:hover{  border-color:var(--neon2);
  color:var(--neon);
  background:rgba(90,164,255,.14);}
[data-theme="color"] .siec-traffic-chart-tooltip{  position:absolute;
  z-index:5;
  pointer-events:none;
  font-size:11px;
  font-weight:600;
  color:#efefef;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  background:rgba(10,10,10,.92);
  border:1px solid var(--gc-tooltip-accent, rgba(90,164,255,.4));
  border-radius:10px;
  padding:4px 9px;
  box-shadow:0 0 8px var(--gc-tooltip-accent, transparent), 0 2px 10px rgba(0,0,0,.35);
  transform:translate(-50%,-100%);
  margin-top:-10px;
  transition:opacity .08s;}
[data-theme="color"] .siec-traffic-chart-tooltip.siec-tooltip-hint{  position:static;
  transform:none;
  margin-top:6px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  color:#c7d6ee;
  min-height:14px;
  white-space:normal;}
[data-theme="color"] .siec-port-list-row.selected{  background:rgba(90,164,255,.1);
  border-radius:10px;}
[data-theme="color"] .siec-port-list-col{  flex:0 0 360px;
  min-width:0;
  border-left:1px solid rgba(120,160,220,.14);
  padding-left:18px;}
[data-theme="color"] .siec-port-list-head{  display:flex;
  justify-content:space-between;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#7f93b3;
  padding-bottom:6px;
  border-bottom:1px solid rgba(120,160,220,.14);
  margin-bottom:6px;}
[data-theme="color"] .siec-port-list-row + .siec-port-list-row{  border-top:1px solid rgba(120,160,220,.08);}
[data-theme="color"] .siec-port-list-info{  flex:1 1 auto;
  min-width:0;
  color:#dbe9ff;}
[data-theme="color"] .siec-port-list-vlan{  color:#7f93b3;
  font-size:11px;}
[data-theme="color"] .siec-port-errors-wrap{  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(120,160,220,.14);}
[data-theme="color"] .siec-port-errors-head{  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#7f93b3;
  padding-bottom:6px;}
[data-theme="color"] .siec-port-errors-row + .siec-port-errors-row{  border-top:1px solid rgba(120,160,220,.08);}
[data-theme="color"] .siec-port-errors-name{  color:#dbe9ff;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;}
[data-theme="color"] .siec-port-errors-sub{  color:#7f93b3;
  font-size:10.5px;}
[data-theme="color"] .siec-port-errors-since{  flex:0 0 auto;
  font-size:10.5px;
  color:#7f93b3;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;}
[data-theme="color"] .siec-port-errors-empty{  font-size:11.5px;
  color:#7f93b3;
  padding:4px 2px;}
[data-theme="color"] .siec-port-search-clear:hover{  color:var(--neon);
  background:rgba(90,164,255,.14);}
[data-theme="color"] .gc-clear-btn:hover{  color:var(--neon);
  background:rgba(90,164,255,.14);}
[data-theme="color"] .siec-port-eventlog-wrap{  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(120,160,220,.14);}
[data-theme="color"] .siec-port-eventlog-head{  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#7f93b3;
  padding-bottom:6px;}
[data-theme="color"] .siec-port-eventlog-row + .siec-port-eventlog-row{  border-top:1px solid rgba(120,160,220,.08);}
[data-theme="color"] .siec-port-eventlog-dot{  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:var(--status-port-up);
  box-shadow:0 0 5px var(--status-port-up);}
[data-theme="color"] .siec-port-eventlog-desc{  flex:1 1 auto;
  min-width:0;
  color:#dbe9ff;}
[data-theme="color"] .siec-port-eventlog-time{  flex:0 0 auto;
  font-size:10.5px;
  color:#7f93b3;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;}
[data-theme="color"] .siec-port-eventlog-empty{  font-size:11.5px;
  color:#7f93b3;
  padding:4px 2px;}
[data-theme="color"] .inventory-delete-btn.pending{  background:rgba(28,116,255,.15);
  border-color:rgba(90,164,255,.6);
  color:#8bc3ff;}
[data-theme="color"] .inventory-delete-btn.pending:hover{  background:rgba(28,116,255,.3);}
[data-theme="color"] .inv-phone-toggle-btn{  border:1px solid rgba(90,164,255,.35);
  background:rgba(28,116,255,.08);
  color:var(--chart-single);
  border-radius:10px;
  padding:1px 8px;
  font-size:11px;
  cursor:pointer;
  vertical-align:middle;}
[data-theme="color"] .inv-phone-toggle-btn:hover{  background:rgba(28,116,255,.2);
  border-color:rgba(90,164,255,.7);}
[data-theme="color"] .inventory-magazyn-title{  font-size:13px;
  font-weight:700;
  color:#c3e8ff;
  margin-bottom:8px;}
[data-theme="color"] .inventory-magazyn-assign-input{  width:100%;
  border-radius:12px;
  border:1px solid rgba(0,80,130,.9);
  background:#070a11;
  padding:4px 8px;
  font-size:12px;
  color:var(--fg);}
[data-theme="color"] .inventory-magazyn-assign-btn, [data-theme="color"] .inventory-magazyn-delete-btn{  border:1px solid rgba(90,164,255,.4);
  background:rgba(8,20,30,.4);
  color:#8bc3ff;
  border-radius:10px;
  width:22px;
  height:22px;
  line-height:1;
  font-size:12px;
  cursor:pointer;
  margin-right:4px;}
[data-theme="color"] .inventory-cell input{  width:100%;
  box-sizing:border-box;
  background:rgba(9,13,21,.9);
  border:1px solid rgba(90,164,255,.6);
  border-radius:8px;
  color:#e7f6ff;
  font:inherit;
  padding:var(--gc-cell-pad-y) var(--gc-cell-pad-x);
  outline:none;}
[data-theme="color"] .inventory-cell input:focus{  border-color:var(--neon2);
  box-shadow:0 0 4px rgba(28,116,255,.5);}
[data-theme="color"] .backup-toggle{  border:none;
  background:transparent;
  color:#e8f1ff;
  border-radius:12px;
  padding:2px 6px;
  cursor:pointer;
  box-shadow:none;}
[data-theme="color"] .backup-toggle:hover{  color:#c7d7eb;}
[data-theme="color"] .backup-dropdown{  position:absolute;
  right:0;
  top:100%;
  margin-top:4px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:14px;
  box-shadow:var(--panel-shadow);
  padding:8px 10px;
  min-width:200px;
  max-height:220px;
  overflow:auto;
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:20;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #0b0f15;}
[data-theme="color"] .backup-dropdown::-webkit-scrollbar-track{  background:#0b0f15;
  border-radius:14px;}
[data-theme="color"] .backup-dropdown::-webkit-scrollbar-thumb{  background:linear-gradient(180deg,#1c74ff88,#5aa4ff88);
  border:1px solid #0b1a22;
  border-radius:14px;
  box-shadow:inset 0 0 8px #1c74ff55;}
[data-theme="color"] .backup-item{  padding:6px 8px;
  border:var(--panel-border);
  border-radius:12px;
  background:var(--panel-bg);
  color:#e8f1ff;
  font-size:12px;
  cursor:pointer;}
[data-theme="color"] .backup-item:hover{  border-color:rgba(90,164,255,.6);
  box-shadow:0 0 12px rgba(28,116,255,.18);}
[data-theme="color"] .backup-item.active{  border-color:rgba(90,164,255,.8);
  box-shadow:0 0 14px rgba(28,116,255,.35), inset 0 0 12px rgba(28,116,255,.18);}
[data-theme="color"] .crash-indicator-row{  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12.5px;
  color:#b9c6d8;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);}
[data-theme="color"] .crash-indicator-name{  color:#a8b7cc;}
[data-theme="color"] mark.log-hit{  background:#394452;
  color:#fff;
  padding:0 2px;
  border-radius:4px;}
[data-theme="color"] .status-ok{  color:#abffd9;
  border-color:#40ffba;}
[data-theme="color"] .status-mixed{  color:#ffb7b7;
  border-color:#ff5b5b;}
[data-theme="color"] .status-neutral{  color:#aab2c0;
  border-color:var(--status-port-unused);}
[data-theme="color"] .status-vpn-yes{  color:#cbe3ff;
  border-color:var(--neon2);}
[data-theme="color"] .status-vpn-no{  color:#aab2c0;
  border-color:var(--status-port-unused);}
[data-theme="color"] .siec-pc-unused{ color:#8b95a8; }
[data-theme="color"] .vlany-device-chip{  display:inline-block;
  padding:1px 8px;
  margin:1px 3px 1px 0;
  border-radius:14px;
  font-size:11px;
  font-family:inherit;
  border:1px solid rgba(90,164,255,.3);
  background:rgba(28,116,255,.08);
  color:#cfe4ff;}
[data-theme="color"] .vlany-device-clickable:hover{  background:rgba(28,116,255,.22);
  border-color:rgba(90,164,255,.7);}
[data-theme="color"] .vlany-device-up{  border-color:rgba(34,197,94,.4);
  color:#7fe3a6;}
[data-theme="color"] .vlany-device-unused{  border-color:rgba(139,149,168,.4);
  color:#aab2c0;}
[data-theme="color"] .gc-col-resize-handle:hover, [data-theme="color"] .gc-col-resize-handle.resizing{  background:rgba(90,164,255,.35);}
[data-theme="color"] .scrollable{  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#2ce0ff22 #0b0f15;
  touch-action:none;}
[data-theme="color"] .scrollable::-webkit-scrollbar-track{  background:#0b0f15;
  border-radius:14px;}
[data-theme="color"] .scrollable::-webkit-scrollbar-thumb{  background:linear-gradient(180deg,#1c74ff88,#5aa4ff88);
  border:1px solid #0b1a22;
  border-radius:14px;
  box-shadow:inset 0 0 8px #1c74ff55;}
[data-theme="color"] th{  color:#c3e8ff;
  border-bottom:var(--panel-border);
  font-weight:600;}
[data-theme="color"] .loader-overlay{  position:fixed;
  inset:0;
  /* Podniesione z 0.94 (2026-08-24, zgłoszenie użytkownika: tło overlaya
     przy przejściu między stronami zbyt przeświecało treścią pod spodem -
     "2,6 Mbps" itp. czytelne przez warstwę) - prawie pełna nieprzezroczystość,
     żeby loader realnie zasłaniał poprzednią stronę podczas ładowania. */
  background:rgba(3,5,10,0.985);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease-out;}
[data-theme="color"] .loader-orb::before{  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid rgba(28,116,255,.18);}
[data-theme="color"] .modal-backdrop{  position:fixed;
  inset:0;
  background:rgba(4,8,15,0.92);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
  box-sizing:border-box;
  z-index:900;}
[data-theme="color"] .modal-card{  width:100%;
  max-width:520px;
  max-height:calc(100vh - 48px);
  min-height:0;
  overflow:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1a;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:18px 16px 16px;
  margin:auto;
  transform:scale(0.8);
  opacity:0;
  transition:transform .25s ease-out, opacity .25s ease-out;}
[data-theme="color"] .modal-field span{  font-size:12px;
  color:#c5d9ff;}
[data-theme="color"] .modal-field input, [data-theme="color"] .modal-field select, [data-theme="color"] .modal-field textarea{  border-radius:14px;
  border:1px solid rgba(0,80,130,.9);
  background:#070a11;
  padding:6px 10px;
  font-size:13px;
  font-family:inherit;
  color:var(--fg);
  resize:vertical;}
[data-theme="color"] .modal-field input:focus, [data-theme="color"] .modal-field select:focus, [data-theme="color"] .modal-field textarea:focus{  outline:none;
  border-color:var(--neon);
  box-shadow:0 0 10px rgba(28,116,255,.5);}
[data-theme="color"] .mm-port-row-btn{  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:12px;
  border:1px solid rgba(0,80,130,.9);
  background:#070a11;
  color:#ff9a9a;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease, color .15s ease;}
[data-theme="color"] .mm-event-view-text{  font-size:13.5px;
  line-height:1.6;
  color:#d3e0f2;
  background:rgba(120,160,220,.06);
  border:1px solid rgba(120,160,220,.16);
  border-radius:14px;
  padding:12px 14px;
  margin:4px 0 12px;
  white-space:pre-wrap;
  word-wrap:break-word;
  max-height:280px;
  overflow-y:auto;}
/* Uproszczone (2026-08-28 v3) - synchronizacja z motywem Czarny, patrz
   glowna definicja .modal-action-btn wyzej. */
[data-theme="color"] .modal-action-btn{  padding:8px 16px;
  border-radius:12px;
  border:1px solid rgba(90,164,255,.4);
  background:rgba(90,164,255,.06);
  color:#e9f5ff;
  font-weight:500;
  letter-spacing:normal;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:background-color .15s ease, border-color .15s ease;}
[data-theme="color"] .modal-action-btn:hover{  background:rgba(90,164,255,.14);
  border-color:rgba(90,164,255,.65);}
[data-theme="color"] .modal-action-btn:active{  background:rgba(90,164,255,.2);}
[data-theme="color"] .modal-action-btn-confirm{  border-color:rgba(40,190,110,.5);
  color:#a8f0bf;}
[data-theme="color"] .modal-action-btn-confirm:hover{  background:rgba(40,190,110,.1);
  border-color:rgba(40,190,110,.75);}
[data-theme="color"] .server-chip{  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid rgba(28,116,255,0.28);
  background:transparent;
  font-size:12px;
  box-shadow:0 0 10px rgba(28,116,255,0.2);
  animation:none;}
[data-theme="color"] .server-chip .chip-label{  color:#c3d0e5;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;}
[data-theme="color"] .server-chip .chip-value{  display:flex;
  align-items:center;
  gap:4px;
  color:#f2f6fc;}
[data-theme="color"] .server-chip .chip-value{   color:#e7f6ff;
   font-weight:500;
 }
[data-theme="color"] .uptime-chip .chip-value{  color:#f2f6fc;}
[data-theme="color"] .server-chip.updates-chip:hover{  background:rgba(28,116,255,.14);
  border-color:rgba(90,164,255,.8);
  box-shadow:0 0 8px rgba(28,116,255,.55), 0 0 18px rgba(90,164,255,.35);}
[data-theme="color"] .server-chip.updates-chip .updates-count{  font-weight:700;
  color:#8fa0b8; /* 0 – szary */}
[data-theme="color"] .server-chip.updates-chip.upd-one .updates-count{  color:var(--neon2);}
[data-theme="color"] .updates-dropdown{  position:absolute;
  top:115%;
  left:0;
  min-width:260px;
  background:rgba(6,10,17,.98);
  border-radius:16px;
  border:1px solid transparent;
  box-shadow:var(--frame-glow-base);
  animation:var(--frame-anim);
  border-color:var(--frame-border-base);
  padding:6px 10px;
  display:none;
  z-index:20;}
[data-theme="color"] .host-dropdown{    position:absolute;
    top:115%;
    left:0;
    min-width:220px;
    background:rgba(6,10,17,.98);
    border-radius:16px;
    border:1px solid transparent;
    box-shadow:var(--frame-glow-base);
    animation:var(--frame-anim);
    border-color:var(--frame-border-base);
    padding:6px 8px;
    display:none;
    z-index:25;
  }
[data-theme="color"] .host-option:hover, [data-theme="color"] .host-option:focus{    background:rgba(56,140,255,.08);
    outline:none;
  }
[data-theme="color"] .api-list .terminal-line:not(:last-child){  border-bottom:1px solid rgba(0,70,110,.24);
  padding-bottom:2px;
  margin-bottom:2px;}
[data-theme="color"] .server-stat-title{  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#8bc3ff;
  font-weight:800;
  margin-bottom:8px;}
[data-theme="color"] .terminal-line .t-label{  color:#e7f6ff;}
[data-theme="color"] .terminal-line .t-value{  color:#9aa8b8;
  font-size:11px;}
[data-theme="color"] .metric-main{  font-size:13px;
  font-weight:600;
  color:#e7f6ff;}
[data-theme="color"] .top-proc-row:not(:last-child){  border-bottom:1px solid rgba(0,70,110,.24);
  padding-bottom:2px;
  margin-bottom:2px;}
[data-theme="color"] .top-proc-name{  font-size: 12px;  /* 1px smaller than header */
  color: #e7f6ff;
  font-weight: 400;
  padding-right: 10px;}
[data-theme="color"] .top-proc-load{  font-size: 11px;     /* 1px smaller than header */
  color: #dfefff;      /* светлый нейтральный */
  font-weight: 400;    /* тонкий текст, не жирный */
  min-width: 50px;
  text-align: right;
  opacity: 0.9;        /* чтобы немного мягче смотрелось */}
[data-theme="color"] .drive-speed-list .terminal-line{  padding:1px 0;
  border-bottom:1px solid rgba(0,40,80,0.55);}
[data-theme="color"] .metric-bar{  margin-top:4px;
  position:relative;
  height:var(--loader-height);
  min-height:var(--loader-height);
  max-height:var(--loader-height);
  border-radius:999px;
  background:#07090e;
  border:none;
  overflow:hidden;}
[data-theme="color"] .legend-dot.ram{  background:#5bbcff;
  color:#5bbcff;}
[data-theme="color"] .access-overlay{  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,4,8,.72);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;}
[data-theme="color"] .access-box{  position:relative;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  text-align:center;
  padding:26px 46px;
  border-radius:8px;
  background:rgba(4,8,14,.6);
  box-shadow:0 0 20px rgba(28,116,255,.3), 0 0 50px rgba(28,116,255,.12) inset;
  overflow:hidden;
  animation:accessBoxIn .25s ease-out;}
[data-theme="color"] .access-box::before{  content:"";
  position:absolute;
  left:0; right:0; top:-100%;
  height:60%;
  background:linear-gradient(180deg, transparent, rgba(90,164,255,.18), transparent);
  animation:accessScan 1.4s linear infinite;}
[data-theme="color"] .access-title{  font-size:22px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--neon2);
  text-shadow:0 0 8px rgba(90,164,255,.8), 0 0 20px rgba(28,116,255,.5);}
[data-theme="color"] .access-sub{  margin-top:8px;
  font-size:11px;
  letter-spacing:.12em;
  color:#f2f6fc;
  opacity:.9;}
[data-theme="color"] .automatyzacje-history-row.active > td{  background:rgba(90,164,255,.3);
  color:#fff;
  font-weight:600;}
[data-theme="color"] .automatyzacje-detail-grid{  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px 24px;
  margin-top:14px;
  padding:14px 16px;
  background:rgba(0,0,0,.02);
  border:1px solid rgba(170,170,170,.14);
  border-radius:14px;}
[data-theme="color"] .gc-asn-name{ color:#6b7280; font-weight:400; }
/* .klienciruch-topn-range - BEZ override: ujednolicone ręcznie w bazie
   (jasny track rgba(255,255,255,.14) w OBU motywach - poprawka kontrastu
   2026-08-24, patrz audyt UI, structural item #7 - w Kolor track był prawie
   niewidoczny na ciemnym tle rgba(0,0,0,.14)). */
[data-theme="color"] .gc-page-btn{  border:1px solid rgba(90,164,255,.35);
  background:rgba(9,13,21,.4);
  color:#f2f6fc;
  border-radius:10px;
  padding:5px 11px;
  font-size:12.5px;
  font-weight:400;
  cursor:pointer;
  min-width:32px;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;}
[data-theme="color"] .gc-page-btn:hover:not(:disabled){  background:rgba(28,116,255,.22);
  border-color:rgba(90,164,255,.9);
  box-shadow:0 0 8px rgba(28,116,255,.55), 0 0 18px rgba(90,164,255,.35);}
[data-theme="color"] .gc-page-btn.active{  background:rgba(28,116,255,.3);
  border-color:var(--accent);
  color:#fff;
  font-weight:600;}

/* AI Advisor - usunięcie zewnętrznej ramki-panelu (.gc-frame), karty
   .ai-advisor-card mają już własny border+tło, nie potrzebują dodatkowej
   "tabelowej" obwódki wokół całej listy. */
#ai-advisor-frame{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
}

/* === Szafy (rack cabinets) - lista szaf (zwykla tabela .devices-table/.gc-table,
   jak wszedzie indziej na stronie) + wizualny edytor U19, patrz
   [[gitcloud_szafy_rack_view]] === */
.szafy-rack-row.clickable{
  cursor:pointer;
}
.szafy-rack-row.clickable > td{
  transition:background .15s ease;
}
.szafy-rack-row.clickable:hover > td, .szafy-rack-row.clickable:focus-visible > td{
  background:rgba(150,150,150,.14);
}
.szafy-rack-row.clickable:focus-visible{
  outline:none;
}
.szafy-row-actions{
  text-align:right;
}
.szafy-row-del{
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  padding:2px 6px;
  border-radius:4px;
  line-height:1;
}
.szafy-row-del:hover{
  color:#ff8f8f;
  background:rgba(255,80,80,.12);
}

/* Wizualny edytor szafy - kolumna jednostek U, najwyzszy numer u gory.
   "Korpus" szafy - gruba podwojna ramka + boczne "uszy" z otworami na sruby
   (::before/::after, kropki przez radial-gradient) - user 2026-09-01 chcial
   cos bardziej "wektorowego" niz gole prostokaty, bez pelnej ilustracji SVG. */
.szafy-rack-modal-card{
  max-width:660px;
}
.szafy-rack-frame{
  position:relative;
  border:3px solid rgba(150,150,150,.55);
  border-radius:6px;
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(150,150,150,.18), inset 0 2px 10px rgba(0,0,0,.5);
  padding:10px 14px;
  margin:0 14px;
  max-height:60vh;
  overflow-y:auto;
}
.szafy-rack-frame::before, .szafy-rack-frame::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:10px;
  background:
    radial-gradient(circle, rgba(150,150,150,.7) 1.3px, transparent 1.6px) top 10px left 3px / 100% 26px repeat-y,
    rgba(150,150,150,.12);
  border:1px solid rgba(150,150,150,.4);
}
.szafy-rack-frame::before{ left:-13px; border-radius:4px 0 0 4px; }
.szafy-rack-frame::after{ right:-13px; border-radius:0 4px 4px 0; }
.szafy-unit-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  min-height:26px;
  margin-bottom:2px;
}
.szafy-unit-num{
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size:11px;
  color:var(--muted);
  padding-right:2px;
  user-select:none;
}
.szafy-unit-slot{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-radius:5px;
  border:1px dashed rgba(150,150,150,.35);
  background:rgba(150,150,150,.05);
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  transition:border-color .12s ease, background .12s ease;
  min-height:26px;
}
.szafy-unit-slot:hover{
  border-color:var(--neon2);
  background:rgba(150,150,150,.12);
}
.szafy-unit-slot.szafy-filled{
  border-style:solid;
  color:var(--fg);
  font-weight:600;
}
.szafy-unit-main{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.szafy-unit-slot .szafy-unit-sub{
  font-weight:400;
  color:var(--muted);
  margin-left:6px;
  font-size:11px;
}
.szafy-unit-devicelink{
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:rgba(150,150,150,.5);
  text-underline-offset:2px;
}
.szafy-unit-devicelink:hover{
  color:var(--neon2);
  text-decoration-color:var(--neon2);
}
.szafy-unit-edit{
  flex:0 0 auto;
  cursor:pointer;
  color:var(--muted);
  padding:1px 5px;
  border-radius:4px;
  font-size:11px;
}
.szafy-unit-edit:hover{
  color:var(--fg);
  background:rgba(150,150,150,.18);
}
.szafy-swatch-device, .szafy-legend-swatch.szafy-swatch-device{ background:rgba(90,164,255,.28); border-color:rgba(90,164,255,.8); }
.szafy-swatch-blank,  .szafy-legend-swatch.szafy-swatch-blank { background:rgba(150,150,150,.15); border-color:rgba(150,150,150,.6); }
.szafy-swatch-organizer, .szafy-legend-swatch.szafy-swatch-organizer{ background:rgba(180,140,255,.25); border-color:rgba(180,140,255,.75); }
.szafy-swatch-pdu, .szafy-legend-swatch.szafy-swatch-pdu{ background:rgba(255,190,90,.25); border-color:rgba(255,190,90,.8); }
.szafy-swatch-ups, .szafy-legend-swatch.szafy-swatch-ups{ background:rgba(255,110,110,.22); border-color:rgba(255,110,110,.8); }
.szafy-unit-slot.szafy-swatch-device,
.szafy-unit-slot.szafy-swatch-blank,
.szafy-unit-slot.szafy-swatch-organizer,
.szafy-unit-slot.szafy-swatch-pdu,
.szafy-unit-slot.szafy-swatch-ups{
  border-width:1px;
}
.szafy-rack-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
}
.szafy-rack-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.szafy-legend-swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  border:1px solid transparent;
  display:inline-block;
}

/* Modal przypisania U - lista wyboru urzadzenia */
#szafy-unit-device-select{
  width:100%;
  margin-top:6px;
  font-size:12px;
}

/* ===========================================================================
   Panel podglądu na Dashboardzie (2026-09-27, notatka głosowa #20) - alert,
   powiadomienie, AI Advisor, historia alertów otwierają się W Dashboardzie
   (iframe z ?embed=1), a nie przez przejście do innej zakładki menu.
   Szkielet okna = zwykły .modal-backdrop/.modal-card (Escape, blokada
   scrolla, animacja - wspólne), tu tylko rozmiar i układ nagłówka. */
.gc-inline-view-backdrop{
  padding:var(--space-4);
}
.modal-card.gc-inline-view-card{
  max-width:min(1400px, 100%);
  height:calc(100vh - 2 * var(--space-4));
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:var(--space-3) var(--space-4) var(--space-4);
}
.gc-inline-view-head{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding-bottom:var(--space-3);
  border-bottom:var(--row-divider);
}
.gc-inline-view-title{
  flex:1;
  min-width:0;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gc-inline-view-full{
  flex:none;
  font-size:12px;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}
.gc-inline-view-full:hover{
  color:var(--fg);
}
.gc-inline-view-head .modal-close{
  position:static;
  float:none;
  margin:0;
  flex:none;
  padding:var(--space-1);
}
.gc-inline-view-body{
  position:relative;
  flex:1;
  min-height:0;
  margin-top:var(--space-3);
}
.gc-inline-view-frame{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  background:var(--bg);
}
.gc-inline-view-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:13px;
}
@media (max-width:640px){
  .gc-inline-view-backdrop{ padding:0; }
  .modal-card.gc-inline-view-card{
    height:100vh;
    border-radius:0;
    padding:var(--space-3);
  }
}

/* Strona w trybie osadzonym (?embed=1) - bez nagłówka, menu i tła, żeby
   w panelu była tylko treść sekcji. */
body.gc-embed .board,
body.gc-embed .menu-wrapper,
body.gc-embed .bg-anim,
body.gc-embed .card-breath,
body.gc-embed .card-storm{
  display:none !important;
}
body.gc-embed .wrap{
  padding:var(--space-2) var(--space-3) var(--space-4);
}

/* Krótkie podświetlenie karty/powiadomienia otwartego z dzwonka bez
   przeładowania strony (Dashboard). */
@keyframes gc-inplace-flash{
  0%, 40%{ box-shadow:0 0 0 2px rgba(var(--neon2-rgb), .75); }
  100%{ box-shadow:0 0 0 2px rgba(var(--neon2-rgb), 0); }
}
.gc-inplace-flash{
  animation:gc-inplace-flash 1.6s ease-out;
}