/* =========================
   THEME VARIABLES
========================= */

:root{
  color-scheme: dark;
  --bg:#0b0f14;
  --panel:#121a24;
  --panel-light:#0f1520;
  --border:#223044;
  --accent:#4b7bec;

  --text:#e8eef6;
  --muted:#8fa3c1;

  --icon:#8fa3c1;
  --icon-hover:#e8eef6;

  --line:rgba(255,255,255,.10);
  --focus:rgba(75,123,236,.55);
  --focus2:rgba(75,123,236,.25);
  --success:#22c55e;
  --success-soft:rgba(34,197,94,.18);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.18);
  --accent-soft:rgba(75,123,236,.18);
  --accent-soft-2:rgba(75,123,236,.08);

  --shadow:0 15px 40px rgba(0,0,0,.4);
  --shadow-soft:0 10px 24px rgba(0,0,0,.22);
  --topbar-h:60px;
  --nav-btn-size:38px;
  --nav-icon-size:18px;
  --menu-item-h:42px;
  --menu-icon-size:18px;
  --menu-gap-x:12px;
  --topbar-pad-x:20px;
}

[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-light:#f1f4f9;
  --border:#d5deea;
  --accent:#2f6feb;

  --text:#0d1623;
  --muted:#556b86;

  --icon:#556b86;
  --icon-hover:#0d1623;

  --line:rgba(13,22,35,.12);
  --focus:rgba(47,111,235,.55);
  --focus2:rgba(47,111,235,.20);
  --success:#15803d;
  --success-soft:rgba(21,128,61,.14);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.14);
  --accent-soft:rgba(47,111,235,.14);
  --accent-soft-2:rgba(47,111,235,.06);

  --shadow:0 10px 26px rgba(0,0,0,.12);
  --shadow-soft:0 8px 18px rgba(8,15,30,.08);
}

/* =========================
   BASE
========================= */

*{ box-sizing:border-box }

html{ font-size:15px }

body{
  margin:0;
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(900px 420px at -10% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(700px 360px at 110% 0%, color-mix(in srgb, var(--success) 10%, transparent), transparent 65%);
  color:var(--text);
  font-size:1rem;
  line-height:1.45;
}

/* =========================
   LAYOUT
========================= */

.layout{ display:flex; height:100vh }

.sidebar{
  width:240px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent-soft-2)) 0%, var(--panel) 100%);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  min-width:240px;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--line) 70%, transparent);
}

.menu{
  padding:10px 8px 12px;
  flex:1;
  overflow:auto;
}

.menu-section{
  font-size:.75rem;
  color:var(--muted);
  padding:14px 12px 6px;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-weight:700;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:var(--menu-gap-x);
  min-height:var(--menu-item-h);
  padding:8px 12px;
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .15s ease, box-shadow .15s ease;
}

.menu-item:hover{
  background:color-mix(in srgb, var(--panel-light) 75%, var(--accent-soft-2));
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent-soft));
  transform: translateX(2px);
}

.menu-item.active{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white 6%) 0%, var(--accent) 100%);
  color:#fff;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* =========================
   SIDEBAR LOGO FIXED LAYOUT
========================= */

.logo{
  height:var(--topbar-h);
  padding:0 12px;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, var(--accent-soft-2)) 0%, transparent 100%);

  display:flex;
  flex-direction:row;      /* wymuszone poziomo */
  align-items:center;
  gap:12px;
}

.logo-ico{
  width:34px;
  height:34px;
  flex:0 0 34px;

  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.logo-txt{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.logo-title{
  font-weight:800;
  font-size:1.1rem;
}

.logo-sub{
  font-size:.8rem;
  color:var(--muted);
}

/* =========================
   ICONS (NO FRAMES)
========================= */

.mi-ico,
.ti-ico{
  width:var(--nav-icon-size);
  height:var(--nav-icon-size);
  background:var(--icon);
  display:inline-block;

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;

  transition:background .2s ease;
}

.menu-item:hover .mi-ico,
.icon-btn:hover .ti-ico{
  background:var(--icon-hover);
}

.mi-ico{
  width:var(--menu-icon-size);
  height:var(--menu-icon-size);
}

.ti-ico{
  width:var(--nav-icon-size);
  height:var(--nav-icon-size);
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--nav-btn-size);
  height:var(--nav-btn-size);
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 88%, var(--panel-light)), color-mix(in srgb,var(--panel-light) 82%, transparent));
  border:1px solid color-mix(in srgb,var(--border) 80%, transparent);
  padding:0;
  font:inherit;
  line-height:1;
  border-radius:8px;
  text-decoration:none;
  box-shadow: var(--shadow-soft);
  transition:background .15s ease,border-color .15s ease, transform .12s ease, box-shadow .12s ease;
}

.icon-btn:hover{
  background:var(--panel-light);
  border-color:var(--border);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* =========================
   MAIN
========================= */

.main{ flex:1; display:flex; flex-direction:column }

.topbar{
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent-soft-2)) 0%, var(--panel) 100%);
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 var(--topbar-pad-x);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(8px);
}

.top-left{
  min-width:0;
  display:flex;
  align-items:center;
}

.page-title{
  font-size:1.2rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.2px;
  text-shadow:0 1px 0 color-mix(in srgb, var(--panel-light) 65%, transparent);
}

.content{
  padding:20px 28px;
  overflow:auto;
  background-image:
    radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

.card{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, var(--accent-soft-2)) 0%, var(--panel) 100%);
  border:1px solid var(--border);
  padding:22px;
  border-radius:12px;
  box-shadow:var(--shadow);
  position:relative;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, var(--border)), transparent);
  opacity:.9;
  pointer-events:none;
}

/* =========================
   TABLES
========================= */

.table-wrap{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--panel-light)) 0%, var(--panel) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line) 55%, transparent);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.92rem;
}

.table thead th{
  text-align:left;
  font-weight:600;
  font-size:.84rem;
  padding:10px 12px;
  border-bottom:2px solid var(--border);
  background:color-mix(in srgb, var(--panel) 86%, var(--panel-light));
  white-space:nowrap;
  letter-spacing:.2px;
  text-transform:none;
}

.table tbody td{
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.table tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--panel) 92%,var(--panel-light));
}

.table tbody tr:hover td{
  background:color-mix(in srgb,var(--panel) 70%,var(--panel-light));
}

.cell-mono{
  font-variant-numeric: tabular-nums;
}

.cell-act{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* =========================
   FORMS
========================= */

input,select,textarea{
  width:100%;
  min-height:38px;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-light) 90%, transparent), color-mix(in srgb, var(--panel) 86%, transparent));
  color:var(--text);
  border-radius:8px;
  padding:9px 12px;
  font-size:.95rem;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line) 45%, transparent);
  transition:border-color .15s ease,box-shadow .15s ease, background .15s ease;
}

/* Pomaga przeglądarce renderować natywne listy/select/autofill zgodnie z motywem */
select,
option,
optgroup{
  background-color: var(--panel);
  color: var(--text);
}

input:focus,select:focus,textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 4px var(--focus2), inset 0 1px 0 color-mix(in srgb, var(--line) 35%, transparent);
  outline:none;
}

/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, var(--panel-light)), var(--panel));
  color:var(--text);
  font-size:.92rem;
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .12s ease;
}

.btn:hover{
  background:color-mix(in srgb, var(--panel-light) 90%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 75%, var(--accent-soft));
  transform: translateY(-1px);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.btn.primary{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%), var(--accent));
  border:0;
  color:#fff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 24%, transparent);
}

.btn.primary:hover{ filter:brightness(1.05) }

.btn:disabled,
.btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* =========================
   STATUS COLORS
========================= */

.st-ico.st-ok .ti-ico{ background:var(--success) }
.st-ico.st-err .ti-ico{ background:var(--danger) }
.st-ico.st-muted .ti-ico{ background:var(--muted) }

/* =========================
   RESTORE: TOPBAR RIGHT + THEME TOGGLE
========================= */

.top-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--topbar-h);
  flex-shrink:0;
}

.user-box{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.95rem;
  color:var(--muted);
  padding:4px 8px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:12px;
  background: color-mix(in srgb, var(--panel) 84%, var(--panel-light));
}

.user-name{
  color:var(--text);
  font-weight:500;
}

.logout{
  margin-left:12px;
  color:var(--accent);
  text-decoration:none;
}

.logout:hover{ text-decoration:underline }

.theme-toggle{
  width:var(--nav-btn-size);
  height:var(--nav-btn-size);
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, var(--panel-light)), var(--panel));
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow: var(--shadow-soft);
  transition:background .2s,border-color .2s, transform .12s ease, box-shadow .12s ease;
}

.theme-toggle:hover{
  background:var(--panel-light);
  transform: translateY(-1px) rotate(-4deg);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.theme-ico{
  width:var(--nav-icon-size);
  height:var(--nav-icon-size);
  display:inline-block;
  background:var(--icon-hover);

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

:root .theme-ico{
  -webkit-mask-image:url("/static/icons/weather-sunny.svg");
  mask-image:url("/static/icons/weather-sunny.svg");
}

[data-theme="light"] .theme-ico{
  -webkit-mask-image:url("/static/icons/weather-night.svg");
  mask-image:url("/static/icons/weather-night.svg");
}

/* =========================
   RESTORE: DASHBOARD LAYOUT
========================= */

.section-title{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:16px;
  opacity:.9;
  letter-spacing:.2px;
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.section-head .section-title{ margin:0; }

.section-title-wrap{ min-width:0; }

.section-meta{
  margin-top:4px;
  font-size:.8rem;
  color:var(--muted);
}

.ui-chip,
.ui-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 84%, var(--panel-light));
  color:var(--text);
  font-size:.78rem;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}

.ui-badge{
  min-height:28px;
  padding:5px 10px;
}

.ui-chip-dot,
.ui-badge-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  opacity:.95;
}

.ui-chip.is-neutral,
.ui-badge.is-neutral{ color:var(--muted); }

.ui-chip.is-info,
.ui-badge.is-info{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.ui-chip.is-success,
.ui-badge.is-success{
  color:var(--success);
  border-color:color-mix(in srgb, var(--success) 35%, var(--border));
  background:color-mix(in srgb, var(--success) 10%, var(--panel));
}

.ui-chip.is-warn,
.ui-badge.is-warn{
  color:#f59e0b;
  border-color:color-mix(in srgb, #f59e0b 35%, var(--border));
  background:color-mix(in srgb, #f59e0b 10%, var(--panel));
}

.ui-chip.is-danger,
.ui-badge.is-danger{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 35%, var(--border));
  background:color-mix(in srgb, var(--danger) 10%, var(--panel));
}

.ui-chip-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}

.kpi-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  min-width:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, var(--panel-light)), var(--panel));
  box-shadow:var(--shadow-soft);
}

.kpi-card.is-accent{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  background:color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.kpi-card.is-success{
  border-color:color-mix(in srgb, var(--success) 35%, var(--border));
  background:color-mix(in srgb, var(--success) 8%, var(--panel));
}
.kpi-card.is-warn{
  border-color:color-mix(in srgb, #f59e0b 35%, var(--border));
  background:color-mix(in srgb, #f59e0b 9%, var(--panel));
}
.kpi-card.is-danger{
  border-color:color-mix(in srgb, var(--danger) 35%, var(--border));
  background:color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.kpi-label{
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:4px;
}

.kpi-value{
  font-size:1.08rem;
  line-height:1.15;
  font-weight:750;
  font-variant-numeric:tabular-nums;
}

.kpi-note{
  margin-top:4px;
  font-size:.75rem;
  color:var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .menu-item,
  .icon-btn,
  .btn,
  .theme-toggle{
    transition:none;
    transform:none !important;
  }
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.full-width{ width:100% }

/* =========================
   RESTORE: SYSTEM STATUS WIDGETS
========================= */

.status-item{
  margin-bottom:12px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:12px;
  padding:10px 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--panel-light));
}

.status-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.status-ico{
  width:18px;
  height:18px;
  flex:0 0 18px;

  background:var(--icon);
  display:inline-block;

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.status-header .status-label{
  flex:1;
  font-size:.9rem;
  opacity:.7;
}

.status-header .status-value{
  font-size:1rem;
  font-weight:600;
}

.status-label{
  font-size:.85rem;
  opacity:.6;
}

.status-value{
  font-size:1.35rem;
  font-weight:600;
  margin:4px 0 6px 0;
}

.progress{
  height:6px;
  background:color-mix(in srgb, var(--border) 75%, var(--panel-light));
  border-radius:4px;
  overflow:hidden;
  box-shadow: inset 0 1px 1px color-mix(in srgb, black 20%, transparent);
}

.progress-bar{
  height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, white 12%), var(--accent));
  transition:width .3s ease;
}

/* =========================
   RESTORE: WORKERS
========================= */

.worker-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 88%, var(--panel-light));
}

.worker-row:last-child{
  margin-bottom:0;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.worker-name{ font-size:.95rem }

.worker-status{ font-weight:600 }
.worker-status.running{ color:#3fb950 }
.worker-status.stopped{ color:#f85149 }

/* =========================
   RESTORE: DB GRID
========================= */

.db-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.db-grid.db-grid-db{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.small{
  font-size:.85rem;
  opacity:.75;
}

.big{
  font-size:1.15rem;
  font-weight:600;
  margin-top:6px;
}

/* =========================
   RESTORE: CHANGELOG
========================= */

.changelog{
  list-style:none;
  padding:0;
  margin:0;
}

.changelog li{
  padding:8px 0;
  border-bottom:1px solid var(--border);
}

.changelog li:last-child{ border-bottom:0 }

/* =========================
   RESTORE: ALERTS + SWITCH (jeśli używasz)
========================= */

.alert{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:14px;
}

.alert.ok{
  border-color:color-mix(in srgb,var(--success) 45%, var(--border));
  background:color-mix(in srgb,var(--success) 12%, var(--panel));
}

.alert.error{
  border-color:color-mix(in srgb,var(--danger) 45%, var(--border));
  background:color-mix(in srgb,var(--danger) 12%, var(--panel));
}

/* =========================
   GLOBAL TOASTS / POPUPS
========================= */

.bb-toast-host{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:1400;
  pointer-events:none;
}

.bb-toast{
  width:min(560px, calc(100vw - 24px));
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--panel-light)), var(--panel));
  box-shadow:var(--shadow);
  padding:12px 14px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:auto;
}

.bb-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.bb-toast-title{
  font-weight:700;
  line-height:1.2;
}

.bb-toast-body{
  margin-top:3px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.3;
}

.bb-toast.is-ok{
  border-color:color-mix(in srgb, var(--success) 45%, var(--border));
  background:color-mix(in srgb, var(--success) 10%, var(--panel));
}

.bb-toast.is-ok .bb-toast-title{
  color:var(--success);
}

.bb-toast.is-error{
  border-color:color-mix(in srgb, var(--danger) 45%, var(--border));
  background:color-mix(in srgb, var(--danger) 10%, var(--panel));
}

.bb-toast.is-error .bb-toast-title{
  color:var(--danger);
}

@media (max-width: 720px){
  .bb-toast-host{
    padding:12px;
  }
}

.switch{
  position:relative;
  width:44px;
  height:26px;
  display:inline-flex;
  align-items:center;
}

.switch input[type="checkbox"],
.switch input[type="radio"]{
  display:none;
  width:0;
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}

.switch .slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--border);
  border:1px solid var(--border);
  transition:background .2s ease;
}

.switch .slider:before{
  content:"";
  position:absolute;
  height:20px;
  width:20px;
  left:3px;
  top:2px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid rgba(0,0,0,.2);
  transition:transform .2s ease;
}

.switch input:checked + .slider{
  background:rgba(75,123,236,.55);
  border-color:rgba(75,123,236,.75);
}

.switch input:checked + .slider:before{
  transform:translateX(18px);
}

/* =========================
   CHART TOOLBAR (uPlot page)
========================= */

/* uPlot domyślnie ma bardzo słabo widoczne zaznaczenie w dark mode */
.uplot .u-select{
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

[data-theme="light"] .uplot .u-select{
  background: color-mix(in srgb, var(--accent) 14%, white 8%);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* tu globalne width:100% ma nie obowiązywać */
.toolbar input,
.toolbar select,
.toolbar textarea{
  width:auto;
}

/* datetime-local ma stałą szerokość, żeby nie pływało */
.toolbar input[type="datetime-local"]{
  width:220px;
}

/* Y pad ma zostać wąski, mimo globalnych zasad */
.toolbar #yPadInp{
  width:90px;
}

/* przyciski nie mają się łamać w środku */
.toolbar .btn{
  white-space:nowrap;
}

/* ghost buttons, bo używasz btn-ghost a nie było stylu */
.btn.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}

.btn.btn-ghost:hover{
  background:var(--panel-light);
}

.btn.btn-small{
  height:32px;
  padding:0 12px;
  font-size:.86rem;
}
/* =========================
   ICON STATES (admin/danger/disabled)
========================= */

.icon-btn.icon-danger .ti-ico,
.icon-btn.icon-btn-danger .ti-ico{
  background: var(--danger);
}

.icon-btn.icon-danger:hover,
.icon-btn.icon-btn-danger:hover{
  background: color-mix(in srgb, var(--danger-soft) 60%, var(--panel-light));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.icon-btn.icon-success .ti-ico{
  background: var(--success);
}

.icon-btn.icon-success:hover{
  background: color-mix(in srgb, var(--success-soft) 60%, var(--panel-light));
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}

.icon-btn.icon-admin-on .ti-ico{
  background: var(--success);
}

.icon-btn.icon-admin-off .ti-ico{
  background: var(--muted);
}

.icon-btn.icon-show .ti-ico{
  background: var(--accent);
}

.icon-btn.icon-edit .ti-ico{
  background: var(--icon);
}

.icon-btn.is-disabled{
  opacity: .35;
  pointer-events: none;
}

.table.table-compact .cell-act .icon-btn{
  width:34px;
  height:34px;
}

.cell-act form{
  display:inline-flex;
  align-items:center;
  margin:0;
}

/* =========================
   RADIO + CHECKBOX (ładne i równe)
   Nie rusza switchy, bo switch ma własną konstrukcję
========================= */

/* wyrównanie label + input w jednym rzędzie */
label{
  display:block;
  margin-bottom:6px;
  color: var(--muted);
  font-size: .92rem;
}

input[type="radio"],
input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:auto;
  width:16px;
  height:16px;
  min-height:16px;
  padding:0;
  margin:0;
  vertical-align:middle;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:inline-block;
  cursor:pointer;
  accent-color: var(--accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* typowy układ "input + tekst" */
.field-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* jak masz gdzieś radioboxy w form-row: wyrównaj do środka */
.form-row{
  align-items:center;
}

.icon-btn.icon-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.icon-btn.icon-btn-danger { color: var(--danger); }

.mt-nav-btn,
.ct-nav-btn{
  width:32px;
  height:32px;
  pointer-events:none;
}

.mt-nav-btn .ti-ico,
.ct-nav-btn .ti-ico{
  width:16px;
  height:16px;
}

/* =========================
   DASHBOARD: WORKERS (icons + badges)
========================= */

.worker-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.w-ico{
  width:20px;
  height:20px;
  flex:0 0 20px;

  background:var(--icon);

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.worker-name{
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.w-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 75%, var(--panel-light));
  font-weight:700;
  font-size:.85rem;
  line-height:1;
  user-select:none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--line) 50%, transparent);
}

.ws-ico{
  width:16px;
  height:16px;
  flex:0 0 16px;
  background:var(--muted);

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

/* status ikony */
.w-badge.running .ws-ico{
  background:rgba(0,200,120,.95);
  -webkit-mask-image:url("/static/icons/play.svg");
  mask-image:url("/static/icons/play.svg");
}
.w-badge.stopped .ws-ico{
  background:rgba(248,81,73,.95);
  -webkit-mask-image:url("/static/icons/stop.svg");
  mask-image:url("/static/icons/stop.svg");
}
.w-badge.unknown .ws-ico{
  background:var(--muted);
  -webkit-mask-image:url("/static/icons/help-circle.svg");
  mask-image:url("/static/icons/help-circle.svg");
}

/* kolor tekstu w badge */
.w-badge.running{ color:rgba(0,200,120,.95) }
.w-badge.stopped{ color:rgba(248,81,73,.95) }
.w-badge.unknown{ color:var(--muted) }

/* =========================
   DASHBOARD: DB tiles (icons + nicer cards)
========================= */

.db-tile{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, var(--panel-light)), var(--panel-light));
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}

.db-tile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:color-mix(in srgb, var(--accent) 45%, transparent);
  opacity:.85;
}

.db-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.db-ico{
  width:18px;
  height:18px;
  flex:0 0 18px;

  background:var(--icon);

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.db-tile .big{
  margin-top:10px;
  font-size:1.12rem;
}

.db-tile .big.big-tight{
  font-size:.96rem;
  line-height:1.25;
}

.db-grid.db-grid-db .db-tile .small.muted{
  margin-top:6px;
}

@media (max-width: 980px){
  .layout{
    min-height:100vh;
    height:auto;
  }

  .sidebar{
    width:220px;
    min-width:220px;
  }

  .topbar{
    padding:0 14px;
  }

  .content{
    padding:16px 18px;
  }

  .db-grid.db-grid-db{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .db-grid.db-grid-db{
    grid-template-columns:1fr;
  }
}
/* =========================
   DISCOVERY: COMPACT LIST + SEARCH + SELECTED BAR
========================= */

.discovery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 88%, var(--panel-light));
}

.discovery-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.discovery-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#searchInp{
  width:280px;
  min-height:36px;
}

.selected-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel-light);
}

.selected-left{
  min-width:0;
}

.selected-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.table.table-compact{
  font-size:.86rem;
}

.table.table-compact thead th{
  padding:7px 10px;
}

.table.table-compact tbody td{
  padding:6px 10px;
}

.table.table-compact tbody tr:hover td{
  background:color-mix(in srgb,var(--panel) 82%,var(--panel-light));
}

.dev-row{
  cursor:pointer;
}

.dev-row.is-selected td{
  background:color-mix(in srgb,var(--panel) 68%,var(--panel-light));
}

.cell-ico{
  width:34px;
  padding-left:10px;
  padding-right:6px;
}

.di-ico{
  width:18px;
  height:18px;
  background:var(--icon);
  display:inline-block;

  -webkit-mask-image:var(--ico);
  mask-image:var(--ico);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

.dev-row:hover .di-ico{
  background:var(--icon-hover);
}

.dev-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--panel) 75%,var(--panel-light));
  user-select:none;
  white-space:nowrap;
  font-weight:600;
}

.ds-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--muted);
}

.dev-status-unknown .ds-dot{
  background:var(--muted);
}

.ds-txt{
  font-size:.85rem;
  color:var(--muted);
}

.dev-status .ds-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dev-status-ok {
  color: #22c55e;   /* zielony */
}

.dev-status-ok .ds-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}

.dev-status-err {
  color: #ef4444;   /* czerwony */
}

.dev-status-err .ds-dot {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
}