:root{
  --sidebar-width:260px;
  --font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bg-main:#1f2428;
  --bg-panel:#2a3036;
  --bg-panel-light:#313840;
  --text-main:#d8dee9;
  --text-muted:#9aa4b2;
  --border:#3b424a;
  --accent:#5e81ac;
  --accent-hover:#81a1c1;
  --danger:#bf616a;

  /* cienie: domyślnie dark theme */
  --shadow-panel: 0 0 0 1px rgba(255,255,255,0.05), 0 10px 30px rgba(0,0,0,0.35);
  --shadow-menu:  0 0 0 1px rgba(255,255,255,0.06), 0 12px 34px rgba(0,0,0,0.45);

  /* filtry ikon */
  --ico-neutral: brightness(0) invert(0.85);
  --ico-neutral-dim: brightness(0) invert(0.75);
  --ico-blue: invert(32%) sepia(98%) saturate(1600%) hue-rotate(190deg) brightness(95%) contrast(95%);
  --ico-green: invert(56%) sepia(55%) saturate(650%) hue-rotate(85deg) brightness(95%) contrast(92%);
  --ico-yellow: invert(73%) sepia(38%) saturate(700%) hue-rotate(6deg) brightness(93%) contrast(93%);
  --ico-red: invert(33%) sepia(61%) saturate(2100%) hue-rotate(330deg) brightness(92%) contrast(95%);
  --meter-ok:#5fbf7a;
  --meter-warn:#d7b85c;
}

*{ box-sizing:border-box; }

html{ font-size:15px; }

body{
  margin:0;
  padding:40px;
  font-family:var(--font-sans);
  line-height:1.45;
  background:var(--bg-main);
  color:var(--text-main);
}

body.app{
  min-height:100vh;
  padding:0;
  display:flex;
  flex-direction:column;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{
  color:var(--accent-hover);
  text-decoration:underline;
}

h2,h3{
  margin-top:0;
  color:var(--text-main);
}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:15px 0 0 0;
}

.muted{ opacity:.75; font-size:12px; }
.k{ opacity:.75; }
.small{ font-size:.92em; color:var(--text-muted); }
.error{ color:var(--danger); margin-bottom:10px; }

.mono{
  font-family:var(--font-mono);
}
.nowrap{ white-space:nowrap; }

/* ===== icons ===== */
.ico{
  width:18px;
  height:18px;
  filter:var(--ico-neutral);
  opacity:.95;
  flex:0 0 auto;
  display:inline-block;
  vertical-align:middle;
}
.ico.sm{ width:16px; height:16px; }
.ico.lg{ width:20px; height:20px; }

.ico-brand-python{
  width:48px;
  height:48px;
  filter: brightness(0) saturate(100%)
          invert(34%) sepia(61%) saturate(2100%)
          hue-rotate(330deg) brightness(90%) contrast(95%);
}

/* miejsca gdzie ikony mają być niebieskie */
.sidebar .ico,
.table-wrap .ico,
.role-list .ico{
  filter:var(--ico-blue);
}

/* ===== auth ===== */
.center-wrap{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-only{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px;
}

/* ===== card + forms ===== */
.card{
  width:420px;
  max-width:92vw;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px;
  box-shadow:var(--shadow-panel);
}

label{
  display:block;
  margin-bottom:6px;
  color:var(--text-muted);
  font-size:.95em;
}

button,
input,
select,
textarea{
  font:inherit;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea{
  width:100%;
  padding:8px 10px;
  background:var(--bg-panel-light);
  color:var(--text-main);
  border:1px solid var(--border);
  border-radius:6px;
  font:inherit;
}

textarea{
  resize:vertical;
  min-height:140px;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
}

/* ===== buttons ===== */
button{
  padding:8px 14px;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  border-radius:6px;
  cursor:pointer;
  font:inherit;
  font-weight:600;
}
button:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.actions button{ width:100%; }

.actions-inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* link-buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-panel-light);
  color:var(--text-main);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ border-color:var(--accent); }

.btn.sm{
  padding:5px 10px;
  border-radius:8px;
}

.btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.btn.danger{
  background:#3a0f14;
  border-color:#5a1a22;
  color:#ffd9d9;
}
.btn.danger:hover{ background:#4a131a; }

.btn.primary{
  background-color:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  font-weight:600;
}
.btn.primary:hover{
  background-color:var(--accent-hover);
  border-color:var(--accent-hover);
}
.btn.primary:active{
  transform:translateY(1px);
}
.btn.primary .ico{
  filter:brightness(200%);
}

.btn.success{
  background:color-mix(in srgb, var(--meter-ok) 22%, var(--bg-panel-light));
  border-color:color-mix(in srgb, var(--meter-ok) 55%, var(--border));
  color:var(--meter-ok);
  font-weight:700;
}
.btn.success:hover{
  background:color-mix(in srgb, var(--meter-ok) 30%, var(--bg-panel-light));
  border-color:color-mix(in srgb, var(--meter-ok) 70%, var(--border));
}

/* ===== responsive ===== */
@media (max-width:480px){
  body{ padding:10px; }
  .card{ padding:18px; }
}

/* ===== layout app ===== */
.topbar{
  min-height:64px;
  padding:10px 18px;
  display:grid;
  grid-template-columns:minmax(180px, max-content) minmax(180px, 1fr) max-content;
  align-items:center;
  column-gap:16px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:30;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}
.brand-name{
  font-weight:700;
  font-size:1.15rem;
  line-height:1.1;
}
.brand-logo{
  height:48px;
  width:auto;
  display:block;
  object-fit:contain;
}
.brand-db{ color:var(--text-muted); font-size:.95em; }

.topbar-right{
  display:flex;
  gap:12px;
  align-items:center;
  justify-self:end;
}
.top-user{ color:var(--text-muted); }

.layout{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  flex:1 1 auto;
  min-height:0;
}

.sidebar{
  width:100%;
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  padding:14px 12px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.content{
  padding:0;
  min-width:0;
}
.page{
  width:min(100%, 1640px);
  margin:0 auto;
  padding:22px 26px 26px;
}

.footer{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 18px;
  color:var(--text-muted);
  border-top:1px solid var(--border);
  background:var(--bg-panel);
}

@media (max-width:980px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{
    border-right:none;
    border-bottom:1px solid var(--border);
    width:auto;
    max-height:46vh;
  }
  .page{ padding:16px; }
}

@media (max-width:820px){
  .topbar{
    grid-template-columns:1fr;
    row-gap:8px;
    align-items:start;
    padding:12px 14px;
  }
  .topbar-right{
    justify-self:stretch;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
  }
}

/* ===== menu ===== */
.menu{ display:flex; flex-direction:column; gap:6px; }

.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-main);
  text-decoration:none;
  cursor:pointer;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  justify-content:flex-start;
}

.menu-item span{
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}

.menu-item:hover{
  background:rgba(60,120,255,.12);
  border-color:var(--border);
}
.menu-item:hover span{ color:#9db8ff; }

.menu-item.danger{
  color:#fff;
  background:rgba(191,97,106,.25);
}
.menu-item.danger:hover{
  background:rgba(191,97,106,.35);
}

.chev{
  margin-left:auto;
  width:16px;
  height:16px;
  filter:var(--ico-neutral-dim);
  transition:transform .15s ease;
  flex:0 0 auto;
}
.menu-toggle.open .chev{ transform:rotate(180deg); }

.submenu{
  display:none;
  margin-left:22px;
  padding-left:10px;
  border-left:1px solid var(--border);
  overflow:hidden;
}
.submenu.open{ display:block; }

.submenu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  color:var(--text-muted);
  text-decoration:none;
  border-radius:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.submenu-item:hover{
  background:rgba(60,120,255,.12);
  color:var(--text-main);
}
.submenu-item:hover span{ color:#9db8ff; }

.submenu-item.active{
  background:rgba(255,255,255,.06);
  color:var(--text-main);
  border:1px solid var(--border);
}

.submenu-group{
  padding:10px 6px 6px 6px;
  color:var(--text-muted);
  font-size:.9em;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== user menu ===== */
.userbox{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.user-label{
  margin-right:6px;
  color:var(--text-muted);
  font-size:.95em;
}
.user-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-panel-light);
  color:var(--text-main);
  cursor:pointer;
}
.user-btn:hover{ border-color:var(--accent); }

.user-menu{
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:180px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow-menu);
  padding:6px;
  z-index:100;
}
.user-menu.open{ display:block; }

.user-menu a{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  color:var(--text-main);
  text-decoration:none;
  white-space:nowrap;
}
.user-menu a:hover{ background:var(--bg-panel-light); }

.user-menu hr{
  margin:6px 0;
  border-top:1px solid var(--border);
}

.user-menu a.danger{
  background:#3a0f14;
  border:1px solid #5a1a22;
  color:#ffd9d9;
}
.user-menu a.danger:hover{ background:#4a131a; }

/* ===== content helpers ===== */
.page-head{ margin-bottom:14px; }

.box{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px;
  margin-bottom:20px;
  box-shadow:var(--shadow-panel);
}

.card-wide{
  max-width:none;
  width:100%;
  margin:0 auto;
}

.page, .content, .container, main, .main, .wrap{
  max-width:none;
  width:100%;
}

/* ===== forms layout ===== */
.form-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media (max-width:900px){
  .form-columns{ grid-template-columns:1fr; }
}

.form-col h3,
.card h3,
.box > h3{
  color:var(--accent);
  opacity:1;
  font-weight:700;
}

.form-col h3{
  margin:0 0 12px 0;
  font-size:15px;
  letter-spacing:.02em;
  padding-left:10px;
  border-left:3px solid rgba(94,129,172,0.65);
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
}
.form-row{ margin-bottom:14px; }

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

/* ===== tables ===== */
.table-wrap{ width:100%; overflow-x:auto; }

.table-nowrap th,
.table-nowrap td{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* KSeF: lista tokenow - bez zawijania, z przewijaniem poziomym kontenera */
.ksef-tokens-table-nowrap{
  width:max-content;
  min-width:100%;
}
.ksef-tokens-table-nowrap th,
.ksef-tokens-table-nowrap td{
  white-space:nowrap;
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg-panel);
  border-radius:8px;
  overflow:hidden;
}

th, td{
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}

th{
  background:var(--bg-panel-light);
  color:var(--text-muted);
  font-weight:600;
  font-size:.9em;
}

tr:hover td{ background:rgba(255,255,255,.03); }

.cut{
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rowlink{
  display:block;
  color:inherit;
  text-decoration:none;
}
.rowlink:hover{
  text-decoration:none;
  color:var(--accent-hover);
}

.no-underline{
  text-decoration:none;
}

.text-right{ text-align:right; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-danger{ color:var(--danger); }
.text-accent{ color:var(--accent); }
.v-mid{ vertical-align:middle; }

.w-full{ width:100%; }
.w-auto{ width:auto; }
.max-w-520{ max-width:520px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.d-flex{ display:flex; }
.d-inline{ display:inline; }
.d-inline-flex{ display:inline-flex; }
.d-grid{ display:grid; }

.items-center{ align-items:center; }
.items-baseline{ align-items:baseline; }
.self-end{ align-self:end; }
.justify-end{ justify-content:flex-end; }
.justify-between{ justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; }
.nowrap-flex{ flex-wrap:nowrap; }

.gap-6{ gap:6px; }
.gap-8{ gap:8px; }
.gap-10{ gap:10px; }
.gap-12{ gap:12px; }
.gap-16{ gap:16px; }
.gap-24{ gap:24px; }

.mt-0{ margin-top:0; }
.mt-6{ margin-top:6px; }
.mt-8{ margin-top:8px; }
.mt-10{ margin-top:10px; }
.mt-12{ margin-top:12px; }
.mt-14{ margin-top:14px; }
.mt-16{ margin-top:16px; }
.mt-20{ margin-top:20px; }
.mt-24{ margin-top:24px; }
.mt-40{ margin-top:40px; }

.mb-0{ margin-bottom:0; }
.mb-4{ margin-bottom:4px; }
.mb-6{ margin-bottom:6px; }
.mb-8{ margin-bottom:8px; }
.mb-10{ margin-bottom:10px; }
.mb-12{ margin-bottom:12px; }
.mb-14{ margin-bottom:14px; }

.ml-8{ margin-left:8px; }

.fw-600{ font-weight:600; }
.fs-16{ font-size:16px; }
.fs-20{ font-size:20px; }

.lh-145{ line-height:1.45; }
.lh-18{ line-height:1.8; }

.opacity-60{ opacity:.6; }
.opacity-70{ opacity:.7; }
.opacity-75{ opacity:.75; }
.opacity-80{ opacity:.8; }

.icon-20{
  width:20px;
  height:20px;
}

.icon-mr-6{
  margin-right:6px;
}

.ico-green{ filter:var(--ico-green); }
.ico-yellow{ filter:var(--ico-yellow); }
.ico-red{ filter:var(--ico-red); }
.ico-dim{ filter:var(--ico-neutral-dim); }

/* w tabelach globalny .table-wrap .ico ustawia niebieski; te klasy muszą go nadpisać */
.table-wrap .ico.ico-green{ filter:var(--ico-green); }
.table-wrap .ico.ico-yellow{ filter:var(--ico-yellow); }
.table-wrap .ico.ico-red{ filter:var(--ico-red); }
.table-wrap .ico.ico-dim{ filter:var(--ico-neutral-dim); }

.status-ok{
  color:var(--accent);
}

.table-fixed{
  table-layout:fixed;
  width:100%;
}

.chip{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-panel);
  padding:12px 16px;
}

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

@media (max-width:1200px){
  .kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:720px){
  .kpi-grid{
    grid-template-columns:1fr;
  }
}

.kpi-card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  background:var(--bg-panel);
}

.kpi-title{
  color:var(--text-muted);
  font-size:.88rem;
  margin-bottom:8px;
}

.kpi-value{
  font-size:1.35rem;
  font-weight:700;
  line-height:1.2;
}

.kpi-note{
  margin-top:6px;
  font-size:.88rem;
  color:var(--text-muted);
}

.kpi-ok{
  border-color:color-mix(in srgb, var(--meter-ok) 42%, var(--border));
  background:color-mix(in srgb, var(--meter-ok) 12%, var(--bg-panel));
}

.kpi-ok .kpi-value{
  color:var(--meter-ok);
}

.kpi-warn{
  border-color:color-mix(in srgb, var(--meter-warn) 46%, var(--border));
  background:color-mix(in srgb, var(--meter-warn) 14%, var(--bg-panel));
}

.kpi-warn .kpi-value{
  color:var(--meter-warn);
}

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

.kpi-alert .kpi-value{
  color:var(--danger);
}

.reports-days-grid{
  grid-template-columns:200px 1fr;
}

.grid-2-auto{
  grid-template-columns:1fr auto;
}

@media (max-width:900px){
  .reports-days-grid{
    grid-template-columns:1fr;
  }
}

/* ===== toggle ===== */
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.toggle input{ display:none; }
.toggle-ui{
  width:44px;
  height:24px;
  border-radius:999px;
  background:var(--bg-panel-light);
  border:1px solid var(--border);
  position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.toggle-ui::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--text-main);
  position:absolute;
  top:2px;
  left:2px;
  transition:left .15s ease, background .15s ease;
}
.toggle input:checked + .toggle-ui{
  background:rgba(94,129,172,.35);
  border-color:var(--accent);
}
.toggle input:checked + .toggle-ui::after{
  left:22px;
  background:#fff;
}
.toggle-text{
  color:var(--text-muted);
  font-size:.95em;
}

/* ===== search box ===== */
.search-box .search-body{ margin-top:10px; }
.search-box.is-collapsed .search-body{ display:none; }
.search-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.icon-btn{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
  opacity:.8;
  padding:0;
}
.icon-btn:hover{ opacity:1; }

/* ===== invoices row colors ===== */
tr.is-paid{ background:rgba(0,160,80,.18); }
tr.is-paid td, tr.is-paid a.rowlink{ color:#b9ffbf; }

tr.is-partial{ background:rgba(200,160,0,.18); }
tr.is-partial td, tr.is-partial a.rowlink{ color:#ffe6a6; }

tr.is-overdue{ background:rgba(200,40,40,.18); }
tr.is-overdue td, tr.is-overdue a.rowlink{ color:#ffb3b3; }
tr.is-overdue a.rowlink:hover{ color:rgba(191,97,106,.85); }

tr.need-verify td .rowlink{ color:var(--danger); }
tr.need-verify td .rowlink:hover{ color:rgba(191,97,106,.8); }

/* ===== profile roles ===== */
.role-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.role-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}

.theme-switch{
  display:flex;
  gap:8px;
  align-items:center;
}

/* ===== theme: light (nadpisuje tylko zmienne) ===== */
html.theme-light{
  --bg-main:#f3f5f7;
  --bg-panel:#ffffff;
  --bg-panel-light:#f1f3f5;

  --text-main:#1f2937;
  --text-muted:#6b7280;

  --border:#d6dde6;

  --accent:#2f5fbf;
  --accent-hover:#244ea0;

  --danger:#b4232c;

  /* cienie w jasnym: klasyczny ciemny cień */
  --shadow-panel: 0 8px 22px rgba(0,0,0,0.10);
  --shadow-menu:  0 12px 30px rgba(0,0,0,0.16);

  /* filtry ikon w jasnym */
  --ico-neutral: brightness(0) invert(0.15);
  --ico-neutral-dim: brightness(0) invert(0.35);
  --ico-blue: invert(23%) sepia(75%) saturate(2100%) hue-rotate(205deg) brightness(92%) contrast(95%);
  --ico-green: invert(27%) sepia(80%) saturate(900%) hue-rotate(90deg) brightness(92%) contrast(95%);
  --ico-yellow: invert(52%) sepia(95%) saturate(720%) hue-rotate(8deg) brightness(95%) contrast(90%);
  --ico-red: invert(18%) sepia(78%) saturate(4200%) hue-rotate(350deg) brightness(92%) contrast(95%);
}

/* delikatniejsze hover w jasnym */
html.theme-light tr:hover td{
  background:rgba(0,0,0,.03);
}

/* ===== invoices row colors: light theme readability ===== */
html.theme-light tr.is-paid,
html.theme-light tr.is-partial,
html.theme-light tr.is-overdue{
  color:var(--text-main);
}

html.theme-light tr.is-paid a.rowlink,
html.theme-light tr.is-partial a.rowlink,
html.theme-light tr.is-overdue a.rowlink{
  color:var(--text-main);
}

html.theme-light tr.is-paid{
  background:rgba(0, 160, 80, 0.14);
}
html.theme-light tr.is-partial{
  background:rgba(200, 160, 0, 0.14);
}
html.theme-light tr.is-overdue{
  background:rgba(200, 40, 40, 0.14);
}

html.theme-light tr.is-paid:hover td,
html.theme-light tr.is-partial:hover td,
html.theme-light tr.is-overdue:hover td{
  background:rgba(0, 0, 0, 0.04);
}

html.theme-light tr.is-paid td,
html.theme-light tr.is-partial td,
html.theme-light tr.is-overdue td{
  color:var(--text-main);
}

/* ===== badges ===== */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--border);
}
.badge.unpaid{ color:var(--danger); }
.badge.paid{ color:var(--accent-hover); }

/* Ujednolicenie nagłówków w boxach */
.box > h3,
.box .card-header h3{
  color:var(--accent);
  opacity:1;
  font-weight:700;
}

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

@media (max-width:980px){
  .grid-3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:640px){
  .grid-3{ grid-template-columns:1fr; }
}
.meter{
  height:8px;
  background:var(--bg-panel-light);
  border-radius:4px;
  overflow:hidden;
}

.meter-fill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width 0.4s ease;
}
.sysm{ min-width: 220px; }

.sysm-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.sysm-val{
  opacity:0.85;
}

.meter{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border);
}

.meter-soft{
  background: color-mix(in srgb, var(--bg-panel-light) 92%, var(--bg-main));
}

.meter-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  transition:width 0.35s ease;
}

.meter-fill-soft{
  background: color-mix(in srgb, var(--text-muted) 65%, var(--accent));
  opacity:0.9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
/* GLOBALNE IKONY W TABELACH */
.ico {
  display: inline-block;
  vertical-align: middle;
}

/* było ~16px, robimy czytelne 20px */
.ico-sm {
  width: 20px;
  height: 20px;
}

/* aktywny link w menu */
.menu a.menu-item.is-active,
.submenu a.submenu-item.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

/* akcent dla aktywnego elementu, tekst i ikonki */
.menu a.menu-item.is-active span,
.submenu a.submenu-item.is-active span {
  color: var(--accent);
  font-weight: 600;
}

/* ikonki svg jako img: filtrujemy na kolor akcentu
   działa najlepiej gdy ikonki są czarne/ciemne w plikach */
.menu a.menu-item.is-active img.ico,
.submenu a.submenu-item.is-active img.ico {
  filter: brightness(0) saturate(100%) invert(42%) sepia(74%) saturate(3400%) hue-rotate(345deg) brightness(100%) contrast(100%);
}

/* podświetlenie nagłówka sekcji (button) gdy URL pasuje do tej sekcji */
.menu button.menu-toggle.is-open {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.menu button.menu-toggle.is-open span {
  color: var(--accent);
  font-weight: 600;
}

.menu button.menu-toggle.is-open img.ico {
  filter: brightness(0) saturate(100%) invert(42%) sepia(74%) saturate(3400%) hue-rotate(345deg) brightness(100%) contrast(100%);
}

.brand-meta {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-left: 10px;   /* ustaw ile chcesz */
}

.brand-db-meta {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius:999px;
  padding:6px 10px;
  background:color-mix(in srgb, var(--danger) 16%, transparent);
}

.brand-section-fixed {
  position:absolute;
  left:calc(var(--sidebar-width) + 22px);
  top:50%;
  transform:translateY(-50%);
  text-align:left;
  font-size: 1.08rem;
  font-weight: 600;
  color:var(--text-main);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100% - var(--sidebar-width) - 460px);
  pointer-events:none;
}

.session-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--text-muted);
  min-width:180px;
  justify-content:center;
}

.session-pill b{
  color:var(--text-main);
  font-weight:600;
}

@media (max-width:820px){
  .brand-section-fixed{
    justify-self:start;
    order:3;
    font-size:.95rem;
    opacity:.9;
  }
  .session-pill{
    min-width:0;
  }
}