:root {
  --bg:#0f172a;         /* slate-900 */
  --fg:#e2e8f0;         /* slate-200 */
  --muted:#94a3b8;      /* slate-400 */
  --card:#ffffff;
  --accent:#38bdf8;     /* sky-400 */
  --green:#10b981;      /* emerald-500 */
  --yellow:#f59e0b;     /* amber-500 */
  --red:#ef4444;        /* red-500 */
  --gray:#64748b;       /* slate-500 */
}

*{box-sizing:border-box}
body{margin:0;background:#f8fafc;color:#0f172a;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1400px;margin:24px auto;padding:0 16px}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:24px;
  padding:12px 16px;background:var(--bg);color:var(--fg);
  box-shadow:0 2px 8px rgba(0,0,0,.25)
}
.topbar .brand{font-weight:700;letter-spacing:.5px}
.topbar .menu{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.topbar .menu li{position:relative}
.topbar .menu a{color:var(--fg);text-decoration:none;padding:6px 10px;border-radius:6px}
.topbar .menu li.active a{background:rgba(56,189,248,.15);outline:1px solid rgba(56,189,248,.35)}
.badge{
  display:inline-block;min-width:22px;padding:2px 6px;margin-left:6px;
  font-size:12px;line-height:16px;text-align:center;border-radius:999px;
  background:var(--accent);color:#003246
}
.badge.red{background:var(--red);color:#fff}
.badge.gray{background:var(--gray);color:#fff}

/* Tabelkowe kolory z Twojego dashboardu */
.chip { font-size:12px; padding:2px 6px; border-radius:4px; background:#eee; display:inline-block; margin:0 4px 4px 0; }
.m-red    { background:#ffe5e5 !important; }
.m-yellow { background:#fff7e0 !important; }
.m-green  { background:#e9f7ef !important; }
.m-unknown{ background:#f0f0f0 !important; }

/* DataTable – spójny z Twoją paletą */
table.dataTable { width:100% !important; border-radius:10px; overflow:hidden; background:#fff }
table.dataTable thead th {
  position: sticky; top: 0; z-index: 2;
  background:#0f172a; color:#e2e8f0; font-weight:600; border-bottom:0;
}
table.dataTable thead th, table.dataTable tbody td { padding:10px 12px; }
table.dataTable tbody tr:nth-child(odd){ background:#f8fafc; }
table.dataTable tbody tr:hover{ background:#eaf6ff; }
td.num { text-align:right; font-variant-numeric: tabular-nums; }
td.delta-up   { color:var(--red);   font-weight:600; }
td.delta-down { color:var(--green); font-weight:600; }
.dataTables_wrapper .dataTables_filter input{ border:1px solid #cbd5e1; border-radius:6px; padding:6px 8px }
.dataTables_wrapper .dataTables_length select{ border:1px solid #cbd5e1; border-radius:6px; padding:4px 6px }

table.dataTable thead th, table.dataTable tbody td { padding: 10px 14px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.date { white-space: nowrap; }
table.dataTable { border-collapse: separate; border-spacing: 0; }
table.dataTable tbody td + td { border-left: 0; } /* bez pionowych linii, ale padding trzyma odstęp */