:root{--bg:#eef2f6;--panel:#fff;--ink:#162033;--muted:#708090;--brand:#8b8059;--nav:#16283d;--ok:#1c9b55;--warn:#d78a00;--danger:#bd3131}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}.topbar{background:var(--nav);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 24px;gap:18px;box-shadow:0 2px 12px #0002}.brand{display:flex;align-items:center;gap:14px}.brand img{height:50px;max-width:210px;object-fit:contain;background:#fff;padding:4px 8px;border-radius:6px}.brand strong{display:block;font-size:17px}.brand small{opacity:.7}.topbar nav{display:flex;gap:8px;flex-wrap:wrap}.topbar nav a{color:#fff;text-decoration:none;padding:9px 12px;border-radius:8px}.topbar nav a:hover{background:#ffffff16}.container{max-width:1320px;margin:28px auto;padding:0 18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.stat,.panel,.auth-card,.result-card{background:var(--panel);border-radius:14px;box-shadow:0 8px 24px #17233a10}.stat{padding:22px}.stat span{font-size:34px;font-weight:800;display:block}.stat small{color:var(--muted)}.stat.ok{border-left:5px solid var(--ok)}.stat.warn{border-left:5px solid var(--warn)}.panel{padding:20px;margin:18px 0;overflow:auto}.panel.narrow{max-width:760px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.search{display:flex;gap:8px;flex-wrap:wrap}input,select,button{font:inherit}input,select{padding:10px 12px;border:1px solid #ccd4de;border-radius:8px;background:#fff}button{border:0;border-radius:8px;padding:10px 14px;background:#173f8a;color:#fff;font-weight:700;cursor:pointer}button.danger{background:var(--danger)}table{width:100%;border-collapse:collapse;min-width:820px}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #e5e9ef}th{font-size:13px;color:#526071;background:#f7f9fb}.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:12px;font-weight:800}.badge.ok,.result-card.ok{background:#e8f7ed;color:#11713c}.badge.warn,.result-card.warn{background:#fff2d8;color:#9c6200}.badge.muted,.result-card.muted{background:#eceff3;color:#596576}.grid-form{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;align-items:end}.grid-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#526071}.grid-form .check{flex-direction:row;align-items:center;padding-bottom:11px}.grid-form button{height:42px}.auth-card{max-width:440px;margin:70px auto;padding:30px}.auth-card form{display:grid;gap:14px}.auth-card label{display:grid;gap:6px}.login-logo{display:block;max-width:300px;width:100%;margin:0 auto 18px}.alert{padding:12px;border-radius:8px}.alert.error{background:#fdeaea;color:#8b2424}.result-card{max-width:760px;padding:28px;margin:18px 0}.result-card .plate{font-size:34px;font-weight:900;letter-spacing:2px}.muted-text{color:var(--muted);text-align:center;padding:24px}footer{padding:24px;text-align:center;color:#7a8796;font-size:13px}@media(max-width:900px){.stats{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column}.grid-form{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.stats{grid-template-columns:1fr}.brand div{display:none}}
.alert.warning{background:#fff3d9;color:#885900;border-left:4px solid var(--warn);margin:14px 0}.alert.success{background:#e8f7ed;color:#11713c;border-left:4px solid var(--ok);margin:14px 0}.api-box code,.key-code{background:#f2f5f8;padding:3px 6px;border-radius:5px;word-break:break-all}.muted-inline{color:var(--muted)}.button-link{display:inline-block;text-decoration:none;border-radius:8px;padding:10px 14px;background:#173f8a;color:#fff;font-weight:700}

/* v0.2.0.1 — Dashboard banner */
.dashboard-banner{
  margin:0 0 24px;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 8px 24px #17233a18;
  background:#081421;
}
.dashboard-banner img{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:560px){
  .dashboard-banner{border-radius:10px;margin-bottom:18px}
}


/* v0.2.0.2 — kompaktowa belka nawigacji */
.topbar{
  width:calc(100% - 36px);
  max-width:1284px;
  min-height:58px;
  margin:18px auto 0;
  padding:9px 12px;
  background:linear-gradient(135deg,#12263d 0%,#172f4b 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(19,40,65,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}

.topbar .brand{display:none!important}

.topbar .topnav{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.topbar .topnav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 18px;
  color:#f7f9fc;
  text-decoration:none;
  font-size:14px;
  font-weight:750;
  letter-spacing:.15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.topbar .topnav a:hover{
  transform:translateY(-2px);
  color:#fff;
  background:linear-gradient(135deg,#8b8059,#a99b69);
  border-color:#c2b47b;
  box-shadow:
    0 7px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(210,195,132,.16);
}

.topbar .topnav a.active{
  color:#fff;
  background:linear-gradient(135deg,#746a47,#96895b);
  border-color:#b6a86f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 4px 12px rgba(0,0,0,.17);
}

.topbar .topnav a.active::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:#e6d58e;
  opacity:.9;
}

.topbar .topnav .logout-link:hover{
  background:linear-gradient(135deg,#9c3f3f,#bd5353);
  border-color:#d97777;
  box-shadow:0 7px 18px rgba(110,24,24,.25);
}

/* odstęp pod nową belką */
.container{margin-top:18px}

@media(max-width:900px){
  .topbar{
    width:calc(100% - 36px);
    margin-top:14px;
    padding:9px;
    flex-direction:row;
    align-items:center;
  }
  .topbar .topnav{gap:7px}
  .topbar .topnav a{padding:8px 13px}
}

@media(max-width:560px){
  .topbar{
    width:calc(100% - 24px);
    border-radius:11px;
  }
  .topbar .topnav{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .topbar .topnav a{
    width:100%;
    min-width:0;
  }
  .topbar .topnav .logout-link{
    grid-column:1 / -1;
  }
  .container{padding-left:12px;padding-right:12px}
}


/* v0.2.0.3 — zintegrowana belka + banner jak na makiecie */

/* Na Dashboardzie belka i banner tworzą jeden wizualny blok. */
.dashboard-page .topbar{
  margin-bottom:0;
  background:#020a17;
  border-color:rgba(255,255,255,.08);
  border-bottom-color:rgba(205,190,128,.22);
  border-radius:14px 14px 0 0;
  box-shadow:none;
  min-height:56px;
  padding:7px 12px 6px;
}

.dashboard-page .container{
  margin-top:0;
}

/* Banner jest dokładnie pod belką i ma tylko dolne zaokrąglenia. */
.dashboard-page .dashboard-banner{
  margin-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 30px rgba(10,24,42,.18);
}

/* Nawigacja bardziej jak na makiecie: bez ramek dla nieaktywnych pozycji. */
.dashboard-page .topbar .topnav{
  gap:8px;
}

.dashboard-page .topbar .topnav a{
  min-height:38px;
  padding:8px 18px;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:#fff;
  font-weight:800;
}

/* Delikatny złoty hover zamiast "kafelków". */
.dashboard-page .topbar .topnav a:hover{
  transform:translateY(-1px);
  color:#fff;
  background:rgba(151,137,91,.22);
  border-color:rgba(205,190,128,.22);
  box-shadow:inset 0 -2px 0 #a99b69;
}

/* Aktywna pozycja jak na makiecie. */
.dashboard-page .topbar .topnav a.active{
  color:#fff;
  background:linear-gradient(180deg,#9b8f60 0%,#82764e 100%);
  border-color:#aa9d69;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 7px rgba(0,0,0,.22);
}

.dashboard-page .topbar .topnav a.active::after{
  left:14px;
  right:14px;
  bottom:3px;
  height:1px;
  background:#eadb9c;
}

/* Wyloguj pozostaje spokojne; czerwony efekt dopiero po najechaniu. */
.dashboard-page .topbar .topnav .logout-link:hover{
  background:rgba(176,58,58,.28);
  border-color:rgba(217,119,119,.30);
  box-shadow:inset 0 -2px 0 #c85b5b;
}

/* Na pozostałych podstronach belka pozostaje osobnym elementem. */
.app-page .topbar{
  margin-bottom:0;
}

/* Telefon: nadal jeden zintegrowany blok. */
@media(max-width:560px){
  .dashboard-page .topbar{
    border-radius:11px 11px 0 0;
  }
  .dashboard-page .dashboard-banner{
    border-radius:0 0 11px 11px;
  }
}


/* v0.2.0.4 — UI Icons + Vehicle Thumbnail Slot */

.ui-icon{
  width:24px;
  height:24px;
  display:block;
}

/* Kafelki statystyk */
.stat-with-icon{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.stat-with-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(23,35,58,.12);
}
.stat-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#315477;
  background:linear-gradient(145deg,#edf4fb,#f8fbfe);
  border:1px solid #dce7f1;
}
.stat-icon .ui-icon{width:28px;height:28px}
.stat-icon-ok{color:#148449;background:#edf9f1;border-color:#d4efdd}
.stat-icon-warn{color:#b56f00;background:#fff7e8;border-color:#f3e1bb}
.stat-with-icon span{line-height:1}

/* Nagłówki */
.section-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.section-icon{
  width:25px;
  height:25px;
  color:#7f744e;
}
.page-title-with-icon{
  display:flex;
  align-items:center;
  gap:11px;
}
.page-title-icon{
  width:31px;
  height:31px;
  color:#7f744e;
}

/* Tabele zdarzeń */
.events-table{
  min-width:1080px;
}
.events-table .thumb-col{
  width:142px;
}
.event-row{
  transition:background .16s ease,box-shadow .16s ease;
}
.event-row:hover td{
  background:#f8fbfe;
}
.thumb-cell{
  width:142px;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.event-thumb{
  position:relative;
  width:124px;
  height:70px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #d8e1e9;
  background:#eef3f7;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 3px 9px rgba(18,39,63,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.event-thumb.has-image:hover{
  transform:translateY(-2px) scale(1.025);
  border-color:#a99b69;
  box-shadow:0 8px 18px rgba(18,39,63,.18);
}
.event-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .22s ease;
}
.event-thumb.has-image:hover img{
  transform:scale(1.045);
}
.event-thumb.placeholder{
  flex-direction:column;
  gap:4px;
  color:#8290a0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.85),rgba(237,243,248,.9)),
    repeating-linear-gradient(45deg,#edf2f6 0,#edf2f6 6px,#e7edf2 6px,#e7edf2 12px);
}
.event-thumb.placeholder span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.15px;
}
.thumb-placeholder-icon{
  width:25px;
  height:25px;
  opacity:.7;
}
.thumb-zoom{
  position:absolute;
  right:5px;
  bottom:5px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:7px;
  color:#fff;
  background:rgba(5,18,33,.72);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.event-thumb:hover .thumb-zoom{
  opacity:1;
  transform:translateY(0);
}
.thumb-zoom-icon{width:15px;height:15px}

.plate-cell,
.cell-with-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cell-icon{
  width:18px;
  height:18px;
  color:#786e4c;
  flex:0 0 auto;
}
.cell-icon.subtle{
  width:16px;
  height:16px;
  color:#8492a1;
}

/* Status badge z łagodniejszym wyglądem przy hoverze */
.event-row:hover .badge{
  filter:saturate(1.05);
}

/* API panel — przycisk bardziej zgodny z resztą UI */
.api-box .button-link{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.api-box .button-link:hover{
  transform:translateY(-1px);
  background:#1d4ca3;
  box-shadow:0 6px 14px rgba(23,63,138,.18);
}

@media(max-width:900px){
  .stat-with-icon{gap:13px}
  .stat-icon{width:46px;height:46px;flex-basis:46px}
  .event-thumb{width:112px;height:64px}
  .events-table .thumb-col,.thumb-cell{width:128px}
}


/* v0.2.0.5 — delikatne powiększenie interfejsu do 110% */
@media (min-width: 901px){
  html{
    zoom:1.10;
  }
}

/* Na tabletach i telefonach zachowujemy 100%, żeby nie psuć responsywności. */
@media (max-width: 900px){
  html{
    zoom:1;
  }
}


/* =========================================================
   v0.2.0.6 — Animated Banner Shine + Login subtitle
   ========================================================= */

/* Ruchomy "błysk" po bannerze — bez zmiany samego PNG. */
.dashboard-page .dashboard-banner{
  position:relative;
  isolation:isolate;
}

/* Delikatna poświata, która przejeżdża ukośnie przez cały banner. */
.dashboard-page .dashboard-banner::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-45%;
  bottom:-45%;
  left:-42%;
  width:24%;
  pointer-events:none;

  background:linear-gradient(
    105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,245,202,0.00) 22%,
    rgba(255,246,205,0.10) 38%,
    rgba(255,255,255,0.36) 49%,
    rgba(238,216,137,0.18) 57%,
    rgba(255,255,255,0) 76%
  );

  filter:blur(1.2px);
  transform:skewX(-16deg) translateX(0);
  opacity:0;
  animation:srtBannerShine 6.8s ease-in-out infinite;
}

/* Mały złoty punkt świetlny prowadzący błysk. */
.dashboard-page .dashboard-banner::before{
  content:"";
  position:absolute;
  z-index:3;
  top:11%;
  left:-12%;
  width:7px;
  height:7px;
  border-radius:50%;
  pointer-events:none;
  background:#fff5bd;
  box-shadow:
    0 0 5px #fff,
    0 0 12px rgba(255,225,126,.95),
    0 0 24px rgba(201,173,85,.60);
  opacity:0;
  animation:srtBannerSpark 6.8s ease-in-out infinite;
}

@keyframes srtBannerShine{
  0%, 57%{
    transform:skewX(-16deg) translateX(0);
    opacity:0;
  }
  60%{
    opacity:.18;
  }
  66%{
    opacity:.82;
  }
  76%{
    transform:skewX(-16deg) translateX(650%);
    opacity:.34;
  }
  82%, 100%{
    transform:skewX(-16deg) translateX(720%);
    opacity:0;
  }
}

@keyframes srtBannerSpark{
  0%, 59%{
    left:-12%;
    opacity:0;
  }
  63%{
    opacity:.9;
  }
  76%{
    left:103%;
    opacity:.8;
  }
  80%, 100%{
    left:108%;
    opacity:0;
  }
}

/* Nie animujemy interfejsu osobom, które wyłączyły animacje w systemie. */
@media (prefers-reduced-motion: reduce){
  .dashboard-page .dashboard-banner::after,
  .dashboard-page .dashboard-banner::before{
    animation:none;
    display:none;
  }
}

/* Ekran logowania — nazwa systemu pod logo Willa Nowa. */
.login-system-name{
  max-width:350px;
  margin:-7px auto 24px;
  padding:0 8px;
  text-align:center;
  color:#213e5d;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.10px;
}

.auth-card .login-logo{
  margin-bottom:14px;
}


/* =========================================================
   v0.2.0.7 — Admin Event Management
   ========================================================= */

.actions-col{
  width:92px;
  text-align:center!important;
}
.actions-cell{
  width:92px;
}
.row-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.row-actions form{
  margin:0;
}
.icon-action{
  width:34px;
  height:34px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  border:1px solid #d5dfe8;
  background:#fff;
  color:#52677d;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 2px 5px rgba(16,43,72,.06);
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.action-icon{
  width:17px;
  height:17px;
}
.edit-action:hover{
  transform:translateY(-1px);
  color:#fff;
  background:#8f8256;
  border-color:#a99b69;
  box-shadow:0 6px 13px rgba(83,72,33,.18);
}
.delete-action:hover{
  transform:translateY(-1px);
  color:#fff;
  background:#b74444;
  border-color:#c95d5d;
  box-shadow:0 6px 13px rgba(119,32,32,.18);
}

/* Edycja zdarzenia */
.admin-edit-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:18px;
  align-items:start;
}
.admin-edit-panel,
.admin-preview-panel{
  margin-top:0;
}
.admin-event-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.admin-event-form > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-weight:700;
}
.admin-event-form input,
.admin-event-form select{
  width:100%;
}
.resident-edit-box{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:18px;
  border-radius:14px;
  border:1px solid #d7eadf;
  background:#f5fbf7;
  transition:opacity .18s ease,filter .18s ease;
}
.resident-edit-box > label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-weight:700;
}
.resident-edit-heading{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:2px;
}
.resident-edit-heading strong{
  display:block;
}
.resident-edit-heading small{
  display:block;
  margin-top:2px;
  color:#66788a;
  font-weight:500;
}
.resident-edit-icon{
  width:31px;
  height:31px;
  color:#17894d;
}
.resident-edit-box.resident-disabled{
  opacity:.46;
  filter:saturate(.55);
}
.admin-check{
  justify-content:center;
}
.admin-form-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
}
.admin-form-actions button{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.button-icon{
  width:18px;
  height:18px;
}
.secondary-link{
  background:#eef3f7!important;
  color:#334d67!important;
  border:1px solid #d4dee7;
}
.secondary-link:hover{
  background:#e4ecf3!important;
  color:#18344f!important;
}
.admin-event-preview{
  display:block;
  overflow:hidden;
  border-radius:12px;
  border:1px solid #d7e0e8;
  background:#eef3f7;
}
.admin-event-preview img{
  display:block;
  width:100%;
  height:auto;
}
.admin-event-preview.no-preview{
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#8493a2;
}
.preview-placeholder-icon{
  width:42px;
  height:42px;
}
.admin-meta{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.admin-meta > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid #e2e8ee;
}
.admin-meta span{
  color:#748598;
}
.admin-meta strong{
  text-align:right;
  word-break:break-all;
  max-width:65%;
}

@media(max-width:900px){
  .admin-edit-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:650px){
  .admin-event-form,
  .resident-edit-box{
    grid-template-columns:1fr;
  }
}


/* v0.2.0.8 — Admin Tools Links */
.admin-tools-panel{margin-top:18px}
.admin-tools-intro{margin:-3px 0 16px;color:#64778a}
.admin-tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.admin-tool-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:96px;
  padding:15px 16px;
  border:1px solid #dbe4ec;
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#f8fbfd);
  color:#112b47;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(17,43,71,.055);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.admin-tool-card:hover{
  transform:translateY(-2px);
  border-color:#aa9c68;
  background:linear-gradient(145deg,#fff,#fbf9f1);
  box-shadow:0 9px 20px rgba(17,43,71,.11)
}
.admin-tool-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#796e4b;
  background:#f6f2e5;
  border:1px solid #e5dcc1
}
.admin-tool-icon .ui-icon{width:26px;height:26px}
.admin-tool-card strong{display:block;font-size:15px}
.admin-tool-card small{display:block;margin-top:3px;color:#65778a;line-height:1.3}
.admin-tool-card code{display:inline-block;margin-top:7px;font-size:11px;color:#38536d}
.admin-ssh-hint{
  margin-top:14px;
  padding:11px 13px;
  border-radius:10px;
  background:#f5f8fb;
  border:1px solid #dde5ec;
  color:#53687d;
  font-size:13px
}
.admin-ssh-hint strong{color:#173551;margin-right:6px}
.admin-ssh-hint code{user-select:all}
@media(max-width:760px){.admin-tools-grid{grid-template-columns:1fr}}


/* v0.2.0.12.1 — Vehicle AI Two-Line Display */
.vehicle-cell{white-space:nowrap;line-height:1.2}
.vehicle-cell > span{display:block}
.vehicle-ai-tag{
  display:block;
  margin-top:3px;
  margin-left:0;
  padding:0;
  border:0;
  background:transparent;
  color:#60758a;
  font-size:10px;
  line-height:1.15;
  font-weight:700
}

/* v0.2.0.13.1 — SSH / Bash LH quick access */
.admin-tool-button{
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  appearance:none
}
.admin-tool-button code{user-select:all}

/* =========================================================
   v0.2.0.13.3 — Events Table Column Layout / No-Wrap
   Cel: przysunac "Tablica" do "Czas" i dac wiecej miejsca
   numerowi rejestracyjnemu oraz adresowi zamieszkania.
   ========================================================= */
@media (min-width: 901px){
  .events-table th:nth-child(2),
  .events-table td:nth-child(2){
    width:145px;
    padding-right:4px;
  }

  .events-table th:nth-child(3),
  .events-table td:nth-child(3){
    width:122px;
    min-width:122px;
    padding-left:3px;
    padding-right:8px;
    white-space:nowrap;
  }

  .events-table th:nth-child(6),
  .events-table td:nth-child(6){
    min-width:155px;
    white-space:nowrap;
  }

  .events-table .plate-cell,
  .events-table td:nth-child(6) .cell-with-icon{
    white-space:nowrap;
    flex-wrap:nowrap;
  }
}


/* =========================================================
   v0.2.0.13.4 — Camera Label Compact / No-Wrap
   "Szlaban — kanał 2" jest prezentowany jako "Szlaban kanał 2"
   i nie zawija sie w tabelach zdarzen.
   ========================================================= */
@media (min-width: 901px){
  .events-table th:nth-child(7),
  .events-table td:nth-child(7){
    min-width:145px;
    white-space:nowrap;
  }
  .events-table td:nth-child(7) .cell-with-icon{
    white-space:nowrap;
    flex-wrap:nowrap;
  }
}

/* =========================================================
   v0.2.0.14 — Dashboard 20 + History Pagination
   ========================================================= */
.history-summary{
  margin-top:4px;
  color:#6b7c8f;
  font-size:12px;
  font-weight:700;
}
.history-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e6edf5;
}
.history-page-info{
  color:#60758a;
  font-size:13px;
  white-space:nowrap;
}
.history-page-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border:1px solid #d7e1ec;
  border-radius:8px;
  background:#fff;
  color:#173b63;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  line-height:1;
}
a.page-link:hover{
  border-color:#8eb8e6;
  background:#f2f7fd;
}
.page-link.active{
  border-color:#1e66ad;
  background:#1e66ad;
  color:#fff;
}
.page-link.disabled{
  opacity:.42;
  cursor:default;
}
.page-nav{min-width:auto}
.page-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:34px;
  color:#75879a;
  font-weight:800;
}
@media(max-width:760px){
  .history-pagination{align-items:flex-start;flex-direction:column}
  .history-page-links{justify-content:flex-start}
  .page-nav{padding:0 8px}
}

/* v0.2.0.14.1 — History pagination always visible */
.history-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 16px;border-top:1px solid #e5eaf0;background:#fff}
.history-page-info{font-size:14px;color:#667085;white-space:nowrap}
.history-page-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-link,.page-ellipsis{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #d9e2ec;border-radius:9px;padding:0 10px;text-decoration:none;background:#fff;color:#17365d;font-weight:700;font-size:14px;box-sizing:border-box}
.page-link:hover{background:#f4f8fc;border-color:#b8c8d8}
.page-link.active{background:#17365d;color:#fff;border-color:#17365d}
.page-link.disabled{opacity:.45;cursor:default;pointer-events:none}
.page-nav{min-width:auto;padding:0 13px}
.page-ellipsis{border-color:transparent;background:transparent;min-width:24px;padding:0;color:#7b8794}
@media (max-width:760px){.history-pagination{align-items:flex-start}.history-page-links{width:100%}.page-nav{flex:1}}

/* v0.2.0.14.2 — Dashboard pagination visible below Ostatnie zdarzenia */
.dashboard-pagination{
  margin-top:0;
  border-top:1px solid #e5eaf0;
  border-radius:0 0 16px 16px;
}

/* =========================================================
   SRT v0.4.1.6.4.1.8.4 — Dashboard Status Tile / Five Columns
   ========================================================= */
@media (min-width:901px){
  .stats{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
  }
  .stats .stat{
    min-width:0;
    padding:18px 16px;
  }
  .stats .stat-with-icon{
    gap:12px;
  }
  .stats .stat-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  .stats .stat span{
    font-size:30px;
  }
}
.system-stat{
  border-left:5px solid #cf3b3b;
}
.system-stat.online{
  border-left-color:var(--ok);
}
.system-stat.offline{
  border-left-color:#cf3b3b;
}
.stat-icon-system-online{
  color:#148449;
  background:#edf9f1;
  border-color:#d4efdd;
}
.stat-icon-system-offline{
  color:#b42318;
  background:#fff1f1;
  border-color:#f1cccc;
}
.system-status-text{
  font-size:27px !important;
  letter-spacing:.2px;
}

.system-led{
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#cf3b3b;
  box-shadow:0 0 0 5px rgba(207,59,59,.10),0 0 12px rgba(207,59,59,.42);
}
.stat-icon-system-online .system-led{
  background:#22a65a;
  box-shadow:0 0 0 5px rgba(34,166,90,.10),0 0 12px rgba(34,166,90,.48);
}
.stat-icon-system-offline .system-led{
  background:#cf3b3b;
  box-shadow:0 0 0 5px rgba(207,59,59,.10),0 0 12px rgba(207,59,59,.42);
}
.system-stat.online .system-status-text{color:#148449}
.system-stat.offline .system-status-text{color:#b42318}
@media(max-width:1100px) and (min-width:901px){
  .stats .stat{padding:16px 12px}
  .stats .stat-with-icon{gap:9px}
  .stats .stat-icon{width:42px;height:42px;flex-basis:42px}
  .stats .stat span{font-size:27px}
  .system-status-text{font-size:23px !important}
}