:root {
  color-scheme: dark;
  --bg:      #16181d;
  --sf:      #1e2128;
  --sf2:     #262a33;
  --sf3:     #2e3340;
  --bd:      #323844;
  --bds:     #44505f;
  --tx:      #c9d1d9;
  --mu:      #6e7a8a;
  --di:      #404858;
  --ac:      oklch(0.65 0.18 250);
  --ac-s:    oklch(0.65 0.18 250 / 0.15);
  --gr:      oklch(0.68 0.14 142);
  --gr-s:    oklch(0.68 0.14 142 / 0.12);
  --ye:      oklch(0.78 0.14 80);
  --ye-s:    oklch(0.78 0.14 80 / 0.12);
  --re:      oklch(0.62 0.18 25);
  --wm:      var(--tx);
  --wm-tld:  color-mix(in oklch, var(--ac) 45%, var(--mu));
  --r:       6px;
  --font:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --sw:      236px;
}

/* ── Light theme ──────────────────────────────────────────────────────────
   Domyślnie idzie za systemem (prefers-color-scheme); [data-theme] na <html>
   (ustawiane inline w <head>, patrz web/templates/layout.html i pozostałe
   {{define "layout"}}, z localStorage["pv-theme"]) daje jawny override,
   niezależny od ustawień systemowych — patrz przełącznik w
   web/templates/user/settings.html. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:      #f4f5f7;
    --sf:      #ffffff;
    --sf2:     #eef0f3;
    --sf3:     #e3e6eb;
    --bd:      #dde1e7;
    --bds:     #c2c9d3;
    --tx:      #1b1e24;
    --mu:      #5b6472;
    --di:      #aab2bd;
    --ac:      oklch(0.55 0.18 250);
    --ac-s:    oklch(0.55 0.18 250 / 0.12);
    --gr:      oklch(0.55 0.14 142);
    --gr-s:    oklch(0.55 0.14 142 / 0.12);
    --ye:      oklch(0.6 0.15 80);
    --ye-s:    oklch(0.6 0.15 80 / 0.12);
    --re:      oklch(0.55 0.2 25);
    --wm:      var(--ac);
    --wm-tld:  color-mix(in oklch, var(--ac) 45%, var(--mu));
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #f4f5f7;
  --sf:      #ffffff;
  --sf2:     #eef0f3;
  --sf3:     #e3e6eb;
  --bd:      #dde1e7;
  --bds:     #c2c9d3;
  --tx:      #1b1e24;
  --mu:      #5b6472;
  --di:      #aab2bd;
  --ac:      oklch(0.55 0.18 250);
  --ac-s:    oklch(0.55 0.18 250 / 0.12);
  --gr:      oklch(0.55 0.14 142);
  --gr-s:    oklch(0.55 0.14 142 / 0.12);
  --ye:      oklch(0.6 0.15 80);
  --ye-s:    oklch(0.6 0.15 80 / 0.12);
  --re:      oklch(0.55 0.2 25);
  --wm:      var(--ac);
  --wm-tld:  color-mix(in oklch, var(--ac) 45%, var(--mu));
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--tx); font-size: 0.875rem; line-height: 1.5; min-height: 100vh; display: flex; }

/* ── SIDEBAR ──────────────────────────────────────── */
.sb {
  width: var(--sw); min-height: 100vh;
  background: var(--sf); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; flex-shrink: 0;
  position: fixed; top: 0; left: 0; bottom: 0;
}
.sb-scroll { flex: 1; overflow-y: auto; padding: 6px 0; }

/* ── BRAND ────────────────────────────────────────── */
/* Ta sama typografia co .auth-logo na ekranach logowania/rejestracji —
   DM Sans, akcent, ujemny letter-spacing — żeby marka wyglądała spójnie
   niezależnie od tego, czy user jest zalogowany czy nie. */
.sb-brand {
  display: flex; align-items: center;
  padding: 14px 12px; flex-shrink: 0; border-bottom: 1px solid var(--bd);
  font-family: 'DM Sans', var(--font); font-size: 1.1875rem; font-weight: 700;
  color: var(--wm); letter-spacing: -0.015em;
  text-decoration: none; transition: background .1s;
}
.sb-brand:hover { background: var(--sf2); }
.sb-brand-tld { color: var(--wm-tld); font-weight: 500; }

/* ── WORKSPACE SWITCHER ───────────────────────────── */
.ws { position: relative; flex-shrink: 0; border-bottom: 1px solid var(--bd); }
.ws-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; background: none; border: none; cursor: pointer;
  color: var(--tx); font-family: var(--font); text-align: left;
  transition: background .1s;
}
.ws-btn:hover { background: var(--sf2); }
.ws-ico {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--ac); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; font-family: var(--mono);
}
.ws-name { flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-arr  { flex-shrink: 0; color: var(--mu); }
.ws-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: var(--sf); border: 1px solid var(--bd);
  border-top: none; border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
}
.ws-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; font-size: 0.8125rem; color: var(--tx);
  text-decoration: none; transition: background .1s; cursor: pointer;
}
.ws-item:hover    { background: var(--sf2); }
.ws-item.ws-active { background: var(--ac-s); color: var(--ac); }
.ws-ico-sm {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  background: var(--sf3); color: var(--mu);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700;
}
.ws-active .ws-ico-sm { background: var(--ac); color: #fff; }
.ws-tag {
  margin-left: auto; font-size: 0.625rem; font-family: var(--mono);
  color: var(--di); border: 1px solid var(--bd); padding: 1px 5px; border-radius: 99px;
}
.ws-sep { height: 1px; background: var(--bd); margin: 4px 0; }
.ws-new { color: var(--ac) !important; font-weight: 500; }

/* tree */
.tn { user-select: none; }
.tr {
  display: flex; align-items: center;
  height: 30px; cursor: pointer;
  color: var(--mu); font-size: 0.8125rem;
  transition: background .1s, color .1s;
}
.tr:hover  { background: var(--sf2); color: var(--tx); }
.tr.active { background: var(--ac-s); color: var(--ac); font-weight: 500; }
.tr-pad    { flex-shrink: 0; }
.tr-tog {
  width: 18px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5625rem; color: var(--di); transition: transform .15s;
}
.tr-tog.open { transform: rotate(90deg); }
.tr-ico  { width: 18px; flex-shrink: 0; text-align: center; font-size: 0.8125rem; }
.tr-lbl  { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.tr-cnt  { font-size: 0.6875rem; color: var(--di); font-family: var(--mono); padding-right: 10px; flex-shrink: 0; }
.tc      { display: none; }
.tc.open { display: block; }

.sb-footer {
  padding: 11px 14px; border-top: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.u-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sf3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 600; color: var(--ac);
}
.u-em { font-size: 0.75rem; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── MAIN ─────────────────────────────────────────── */
.main { margin-left: var(--sw); flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar {
  height: 52px; border-bottom: 1px solid var(--bd); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--bg); z-index: 10;
}
.bc { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; }
.bc a { color: var(--mu); text-decoration: none; }
.bc a:hover { color: var(--tx); }
.bc-sep { color: var(--di); }
.bc-cur { color: var(--tx); font-weight: 600; }
.tb-right { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }

/* ── BUTTONS ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--r);
  font-size: 0.8125rem; font-weight: 500; font-family: var(--font);
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background .1s, color .1s, border-color .1s; line-height: 1; white-space: nowrap;
}
.btn-p { background: var(--ac); color: #fff; border-color: var(--ac); text-decoration: none; }
.btn-p:hover { filter: brightness(1.1); }
.btn-g { background: transparent; color: var(--mu); border-color: var(--bd); }
.btn-g:hover { background: var(--sf2); color: var(--tx); border-color: var(--bds); }
.btn-i { padding: 4px 6px; border-color: transparent; color: var(--mu); }
.btn-i:hover { background: var(--sf2); color: var(--tx); border-color: var(--bd); }
.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: not-allowed; filter: none; }

/* ── BODY ─────────────────────────────────────────── */
.body-wrap { display: flex; flex: 1; overflow: hidden; }
.list-col  { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-width: 0; }
.c-scroll  { flex: 1; overflow-y: auto; }
.content   { padding: 18px 20px; }
.list-scroll-x { overflow-x: auto; }

/* search — własny nieskrolujący pasek nad listą (jak drugi nagłówek) */
.search-bar { flex-shrink: 0; border-bottom: 1px solid var(--bd); padding: 12px 20px; }
.list-search { position: relative; flex-shrink: 0; }
.list-search svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--di); pointer-events: none; }
.list-search input {
  padding: 6px 10px 6px 28px; background: var(--sf); border: 1px solid var(--bd);
  border-radius: var(--r); color: var(--tx); font-family: var(--font); font-size: 0.8125rem;
  outline: none; transition: border-color .15s; width: 220px;
}
.list-search input:focus { border-color: var(--ac); }
.list-search input::placeholder { color: var(--di); }

/* wiersze sekretów znalezionych poza bieżącą grupą (search) — bez podglądu wartości w miejscu */
.lrow-remote { opacity: 0.75; }
.lrow-remote:hover { opacity: 1; }

/* ── MIXED LIST ───────────────────────────────────── */
/* width:100% + jedna elastyczna kolumna (URL) — tabela sięga do końca kontenera
   nawet na dużych monitorach, hover na wierszu podświetla całą szerokość zamiast
   urywać się w połowie ekranu. */
.list { width: 100%; border-collapse: collapse; table-layout: fixed; }
.list col.cl-icon  { width: 34px; }
.list col.cl-totp  { width: 40px; }
.list col.cl-warn  { width: 28px; }
.list col.cl-name  { width: 220px; }
.list col.cl-val   { width: 110px; }
.list col.cl-user  { width: 140px; }
.list col.cl-url   { /* auto — elastyczna, rośnie z ekranem */ }
.list col.cl-date  { width: 84px; }

.list th {
  text-align: left; padding: 0 8px 7px;
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--di);
}
.list th:first-child { padding-left: 2px; }

/* group row */
.lrow-group { cursor: pointer; transition: background .1s; }
.lrow-group:hover { background: var(--sf2); }
.lrow-group td { padding: 8px 8px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.lrow-group td:first-child { padding-left: 2px; }
.lrow-group:last-child td { border-bottom: none; }

.group-icon {
  width: 26px; height: 26px; border-radius: 5px; background: var(--sf3);
  display: flex; align-items: center; justify-content: center; font-size: 0.875rem;
  color: var(--mu);
}
.group-icon.lock { background: var(--ye-s); color: var(--ye); }
.lrow-name     { font-size: 0.875rem; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-name-sub { font-size: 0.75rem; color: var(--mu); margin-top: 1px; }

/* secret row */
.lrow-secret { cursor: pointer; transition: background .1s; }
.lrow-secret:hover { background: var(--sf2); }
.lrow-secret td { padding: 8px 8px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.lrow-secret td:first-child { padding-left: 2px; }
.lrow-secret:last-child td { border-bottom: none; }

.s-icon {
  width: 26px; height: 26px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; font-size: 0.875rem;
}
.si-ac  { background: oklch(0.65 0.18 250 / 0.12); color: var(--ac); }
.si-env { background: oklch(0.68 0.14 142 / 0.12); color: var(--gr); }
.si-file { background: oklch(0.78 0.14 80 / 0.12); color: var(--ye); }

.badge {
  display: inline-flex; padding: 2px 6px; border-radius: 99px;
  font-size: 0.6875rem; font-weight: 500; font-family: var(--mono); white-space: nowrap;
}
.b-ac  { background: oklch(0.65 0.18 250 / 0.12); color: var(--ac); }
.b-env { background: oklch(0.68 0.14 142 / 0.12); color: var(--gr); }
.b-grp { background: var(--sf3); color: var(--mu); }
/* organizacja w karencji przed usunięciem (tasks/076) */
.b-del { background: oklch(0.62 0.18 25 / 0.12); color: var(--re); }

.s-date  { font-size: 0.75rem; color: var(--mu); font-family: var(--mono); white-space: nowrap; }
.s-user  { font-size: 0.8125rem; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
.s-url   { font-size: 0.8125rem; color: var(--ac); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.s-url:hover { text-decoration: underline; }
.s-url.s-url-static { color: var(--mu); }
.s-url.s-url-static:hover { text-decoration: none; }
.s-note  { font-size: 0.75rem; color: var(--di); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.s-val { font-size: 0.875rem; color: var(--tx); font-family: var(--mono); white-space: nowrap; letter-spacing: .08em; display: inline-block; }

/* click-to-copy: hover podświetla pole, klik kopiuje bez ujawniania wartości */
.copyable { cursor: pointer; border-radius: 4px; padding: 2px 5px; margin: -2px -5px; transition: background .1s, color .1s; }
.copyable:hover { background: var(--sf3); color: var(--tx); }
.copyable.copied-flash { background: var(--gr-s); color: var(--gr); }
.ic-totp {
  font-size: 1.375rem; color: var(--ac); line-height: 1; display: flex;
  align-items: center; justify-content: center; margin: 0 auto;
  background: var(--ac-s); border: none; cursor: pointer; padding: 0; width: 28px; height: 28px;
  border-radius: 8px; transition: color .1s, background .1s, transform .05s;
}
.ic-totp:hover { background: var(--ac); color: #fff; }
.ic-totp:active { transform: scale(0.92); }
.ic-totp.copied-flash { color: #fff; background: var(--gr); }
.ic-warn { font-size: 1.125rem; color: var(--ye); line-height: 1; display: block; text-align: center; cursor: default; }

.row-actions { display: flex; gap: 1px; justify-content: flex-end; opacity: 0; transition: opacity .1s; }
.lrow-secret:hover .row-actions,
.lrow-group:hover .row-actions { opacity: 1; }

/* divider between groups and secrets */
.list-section-label td {
  padding: 14px 8px 5px; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--di);
  border-bottom: none;
}

/* ── DETAIL PANEL ─────────────────────────────────── */
.dp {
  width: 294px; flex-shrink: 0; display: none;
  border-left: 1px solid var(--bd); background: var(--sf); overflow-y: auto;
}
.dp.open { display: flex; flex-direction: column; }
.dp-inner { padding: 16px; }

.dp-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.dp-title  { font-size: 0.875rem; font-weight: 600; color: var(--tx); }
.dp-sub    { font-size: 0.75rem; color: var(--mu); margin-top: 2px; }
.dp-close  { background: none; border: none; color: var(--di); cursor: pointer; font-size: 0.9375rem; padding: 0; flex-shrink: 0; }

.df { margin-bottom: 12px; }
.df-l { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--di); margin-bottom: 3px; }
.df-v { font-size: 0.8125rem; color: var(--tx); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-all; }
.df-v.mono { font-family: var(--mono); font-size: 0.75rem; }
.df-v a { color: var(--ac); text-decoration: none; }
.df-v a:hover { text-decoration: underline; }

.cb {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--bd); background: transparent;
  color: var(--mu); font-size: 0.6875rem; cursor: pointer;
  transition: color .1s, border-color .1s; font-family: var(--font); white-space: nowrap;
}
.cb:hover { color: var(--ac); border-color: var(--ac); }

.dp-div { height: 1px; background: var(--bd); margin: 14px 0 10px; }
.dp-sec { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--di); margin-bottom: 8px; }

.ac-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--bd); font-size: 0.8125rem; }
.ac-row:last-child { border-bottom: none; }
.ac-ico  { font-size: 0.75rem; width: 18px; text-align: center; flex-shrink: 0; }
.ac-name { flex: 1; color: var(--tx); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-perm {
  font-size: 0.6875rem; font-family: var(--mono); font-weight: 500;
  padding: 1px 6px; border-radius: 99px; flex-shrink: 0;
}
.p-viewer  { background: var(--sf3); color: var(--mu); }
.p-editor  { background: var(--gr-s); color: var(--gr); }
.p-manager { background: var(--ac-s); color: var(--ac); }
.p-owner   { background: var(--ye-s); color: var(--ye); }
.p-admin   { background: var(--ac-s); color: var(--ac); }

.dp-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

.dp-person-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; margin: 0 -6px; border-radius: var(--r); }
.dp-person-row:hover { background: var(--sf2); }

/* ── MODAL ────────────────────────────────────────── */
.bd-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; align-items: center; justify-content: center; }
.bd-modal.open { display: flex; }
.modal {
  background: var(--sf); border: 1px solid var(--bd);
  border-radius: 10px; padding: 20px; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.m-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 16px; color: var(--tx); }
.fg  { margin-bottom: 12px; }
.fl  { display: block; font-size: 0.75rem; font-weight: 500; color: var(--mu); margin-bottom: 4px; }
.fi, .fta {
  width: 100%; padding: 7px 9px;
  background: var(--bg); border: 1px solid var(--bd);
  border-radius: var(--r); color: var(--tx);
  font-family: var(--font); font-size: 0.875rem; outline: none; transition: border-color .15s;
}
.fi:focus, .fta:focus { border-color: var(--ac); }
.fta { resize: vertical; min-height: 68px; font-family: var(--mono); font-size: 0.8125rem; }
.fi-mono { font-family: var(--mono); }
.fi-secret { -webkit-text-security: disc; font-family: var(--mono); }
.fi-secret.revealed { -webkit-text-security: none; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw { position: relative; }
.pw .fi { padding-right: 32px; }
.pw-tog { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--di); cursor: pointer; font-size: 0.875rem; }
.m-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; }

.type-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 16px; }
.to { padding: 11px; border: 1px solid var(--bd); border-radius: var(--r); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.to:hover { border-color: var(--bds); background: var(--sf2); }
.to.sel { border-color: var(--ac); background: var(--ac-s); }
.to.sel .to-ico { color: var(--ac); }
.to-ico  { color: var(--mu); margin-bottom: 3px; }
.to-lbl  { font-size: 0.8125rem; font-weight: 500; color: var(--tx); }
.to-dsc  { font-size: 0.6875rem; color: var(--mu); margin-top: 1px; }

.kv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

/* ── AUTH ─────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; }
.auth-logo { font-family: 'DM Sans', var(--font); font-weight: 700; font-size: 2.375rem; color: var(--wm); margin-bottom: 22px; letter-spacing: -0.015em; }
.auth-logo-tld { color: var(--wm-tld); font-weight: 500; }
.auth-box  { width: 100%; max-width: 350px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--bd); }
.auth-tab  { flex: 1; padding: 10px; text-align: center; font-size: 0.8125rem; font-weight: 500; color: var(--mu); cursor: pointer; border: none; background: transparent; font-family: var(--font); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .1s; }
.auth-tab.active { color: var(--ac); border-bottom-color: var(--ac); }
.auth-body { padding: 20px; }
.auth-sub  { width: 100%; margin-top: 2px; justify-content: center; padding: 8px; font-size: 0.875rem; }

/* ── SETTINGS VIEW ────────────────────────────────── */
.set-section { margin-bottom: 24px; }
.set-sec-hd {
  font-size: 0.8125rem; font-weight: 600; color: var(--tx);
  margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
}
.set-card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px; }
.set-danger { border-color: oklch(0.62 0.18 25 / 0.35); }

.member-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.member-row:last-child { border-bottom: none; }
.m-ico  { font-size: 0.8125rem; width: 20px; text-align: center; flex-shrink: 0; color: var(--mu); }
.m-info { flex: 1; min-width: 0; }
.m-name { font-size: 0.8125rem; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-sub  { font-size: 0.6875rem; color: var(--mu); margin-top: 1px; }
.m-sub a { color: var(--ac); text-decoration: none; }
.m-sub a:hover { text-decoration: underline; }
.m-inh  { font-size: 0.6875rem; color: var(--di); font-family: var(--mono); padding: 1px 6px; border-radius: 99px; border: 1px solid var(--bd); flex-shrink: 0; }

select.fi { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e7a8a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

/* Reużywalny user-picker (search + wynik z avatarem), web/static/js/user-picker.js */
.up-wrap { position: relative; }
.up-dropdown { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: 0 8px 24px oklch(0 0 0 / 0.25); }
.up-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; cursor: pointer; }
.up-item:hover, .up-item.active { background: var(--sf2); }
.up-empty { padding: 10px; font-size: 0.75rem; color: var(--mu); }

/* ── RWD ──────────────────────────────────────────── */

/* hamburger + backdrop dla chowanego sidebaru — widoczne tylko poniżej breakpointu */
.sb-toggle {
  display: none; position: fixed; top: 10px; left: 10px; z-index: 60;
  width: 34px; height: 34px; align-items: center; justify-content: center;
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r);
  color: var(--tx); font-size: 1rem; cursor: pointer;
}
.sb-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80;
}

@media (max-width: 860px) {
  .sb-toggle { display: flex; }
  .sb {
    transform: translateX(-100%); transition: transform .2s ease; z-index: 90;
    box-shadow: 0 0 30px rgba(0,0,0,.5);
  }
  .sb.open { transform: translateX(0); }
  .sb-backdrop.show { display: block; }
  .main { margin-left: 0; }
  .topbar { padding-left: 54px; }
}

/* tabela: na węższych ekranach chowamy kolejno mniej istotne kolumny —
   dane wciąż dostępne w panelu szczegółów po kliknięciu w wiersz */
@media (max-width: 960px) {
  .list col.cl-totp, .list col.cl-warn, .list col.cl-date { visibility: collapse; }
}
@media (max-width: 720px) {
  .list col.cl-url { visibility: collapse; }
  .content { padding: 14px 12px; }
}
@media (max-width: 540px) {
  .list col.cl-user { visibility: collapse; }
  .list col.cl-name { width: 150px; }
  .list col.cl-val  { width: 90px; }
}

/* search: skurcz zamiast ucinania */
@media (max-width: 540px) {
  .list-search input { width: 100%; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px 10px 54px; gap: 8px; }
  .tb-right { flex-wrap: wrap; }
}

/* panel szczegółów: pełnoekranowy overlay zamiast wąskiej kolumny bocznej */
@media (max-width: 720px) {
  .dp {
    display: none; position: fixed; inset: 0; width: 100%;
    z-index: 70; border-left: none;
  }
  .dp.open { display: flex; }
}

/* modale i formularze dwukolumnowe na telefonie */
@media (max-width: 520px) {
  .bd-modal { padding: 16px; }
  .f2 { grid-template-columns: 1fr; }
}