:root{
  --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-red: invert(33%) sepia(61%) saturate(2100%) hue-rotate(330deg) brightness(92%) contrast(95%);
}

*{ box-sizing:border-box; }

html{ font-size:15px; }

body{
  margin:0;
  padding:40px;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
}

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:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.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-top:0;
}

/* ===== 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;
}

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;
}

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-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%);
}

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

/* ===== layout app ===== */
.topbar{
  height:56px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
}

.brand{ display:flex; gap:10px; align-items:baseline; }
.brand-name{ font-weight:700; }
.brand-db{ color:var(--text-muted); font-size:.95em; }

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

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:calc(100vh - 56px - 40px);
}

.sidebar{
  width:260px;
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  padding:12px;
  overflow-x:hidden;
}

.content{ padding:0; }
.page{ padding:18px; }

.footer{
  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;
  }
}

/* ===== 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; }
.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:rgba(191,97,106,.15);
  color:#fff;
}
.user-menu a.danger:hover{ background:rgba(191,97,106,.35); }

/* ===== 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{
  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);
}

/* ===== 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-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%);
}