:root{
  --bg:#f4f6f4;
  --surface:#ffffff;
  --surface-2:#eef1ee;
  --ink:#16202a;
  --ink-muted:#5b6b73;
  --ink-faint:#8b9a9f;
  --accent:#0e7c86;
  --accent-strong:#0b5f67;
  --accent-soft:#e3f1f0;
  --warn:#c97a2e;
  --warn-soft:#f7e9db;
  --danger:#b5432f;
  --danger-soft:#f7e2dd;
  --good:#2f7d4f;
  --good-soft:#e2f0e6;
  --line:#dde3e0;
  --shadow: 0 1px 2px rgba(22,32,42,.04), 0 8px 24px -12px rgba(22,32,42,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1417;
    --surface:#161d21;
    --surface-2:#1c2428;
    --ink:#e7ede9;
    --ink-muted:#93a3a0;
    --ink-faint:#5f6f6c;
    --accent:#4fc3cd;
    --accent-strong:#7adbe2;
    --accent-soft:#132a2c;
    --warn:#e2a159;
    --warn-soft:#2c2216;
    --danger:#e2786a;
    --danger-soft:#2c1a16;
    --good:#7fd19e;
    --good-soft:#152820;
    --line:#2a3438;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono, .time, table.data-table td.mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; }
a{ color:var(--accent-strong); }
.muted{ color:var(--ink-muted); }

/* ---------- app shell / sidebar ---------- */
.app-shell{ display:flex; align-items:stretch; min-height:100vh; }
.sidebar{
  width:266px; flex-shrink:0; background:#0d2226; color:#cfe4e2;
  display:flex; flex-direction:column; padding:26px 18px;
  position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;
  background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:26px;
}
.brand-logo{ height:32px; width:auto; display:block; max-width:201px; }
.brand-suffix{
  display:none;
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong);
  background:var(--accent-soft); padding:4px 9px; border-radius:6px;
}
.side-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.side-nav a{
  text-decoration:none; color:#9fbdb9; font-size:14.5px; font-weight:500;
  padding:11px 14px; border-radius:9px; line-height:1.3;
}
.side-nav a:hover{ background:rgba(255,255,255,.07); color:#e7f3f1; }
.side-nav a.active{ background:rgba(79,195,205,.18); color:#7fe3ea; font-weight:600; }
.side-logout-form{
  margin:16px 0 0; border-top:1px solid rgba(255,255,255,.09); padding-top:12px;
}
.side-logout{
  font:inherit; font-size:14px; font-weight:500; color:#6f8f8a; background:none;
  border:none; padding:8px 14px; cursor:pointer; text-align:left; width:100%;
  border-radius:9px;
}
.side-logout:hover{ color:#e2786a; background:rgba(255,255,255,.05); }
.side-logout-alt{ font-size:12.5px; color:#5d7a76; line-height:1.35; padding-top:2px; }

.shell{ flex:1; min-width:0; padding:40px 44px 100px; }
.content{ max-width:1180px; }

@media (max-width:900px){
  .app-shell{ flex-direction:column; }
  .sidebar{
    width:100%; height:auto; position:static; flex-direction:row; align-items:center;
    padding:14px 16px; overflow-x:auto; gap:8px;
  }
  .brand{ margin-bottom:0; margin-right:12px; }
  .side-nav{ flex-direction:row; flex-wrap:nowrap; }
  .side-nav a{ white-space:nowrap; }
  .side-logout-form{ margin:0 0 0 auto; border-top:none; padding-top:0; width:auto; }
  .side-logout{ padding:11px 14px; white-space:nowrap; width:auto; }
  .shell{ padding:26px 20px 60px; }
}

/* ---------- page head ---------- */
.page-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.page-head h1{ font-size:32px; margin:0 0 6px; letter-spacing:-.01em; }
.week-nav{ display:flex; align-items:center; gap:18px; font-size:16px; flex-wrap:wrap; }
.week-nav a{ text-decoration:none; }
.tag-current{ background:var(--accent-soft); color:var(--accent-strong); padding:5px 12px; border-radius:6px; font-size:14px; }

/* ---------- cards / grid ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 30px; box-shadow:var(--shadow); margin-bottom:28px;
}
.card h2{ font-size:19px; margin:0 0 18px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
@media (max-width:760px){ .grid2{ grid-template-columns:1fr; } }
.stack-col{ display:flex; flex-direction:column; gap:24px; margin-bottom:28px; }

/* ---------- main content + right info rail ---------- */
.layout-rail{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
.layout-rail .main-col{ min-width:0; }
.layout-rail .rail{ display:flex; flex-direction:column; gap:20px; position:sticky; top:40px; }
@media (max-width:980px){
  .layout-rail{ grid-template-columns:1fr; }
  .layout-rail .rail{ position:static; }
}
.rail-card{ padding:22px 24px; margin-bottom:0; }
.rail-card h2{ font-size:15.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); margin:0 0 14px; }
.rail-card.rail-accent{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset, var(--shadow); }
.rail-card.rail-danger{ background:var(--danger-soft); border-color:transparent; }
.rail-card.rail-danger h2{ color:var(--danger); }
.rail-stats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.rail-stats li{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14.5px; color:var(--ink-muted); }
.rail-stats li strong{ font-family:"IBM Plex Mono", monospace; font-size:20px; color:var(--ink); font-weight:600; }
.rail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.rail-list li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; }
.rail-list .rail-item-title{ font-weight:600; display:block; }
.rail-list .rail-item-sub{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:2px; }
.rail-empty{ font-size:14px; color:var(--ink-muted); margin:0; }
.rail-figure{ font-family:"IBM Plex Mono", monospace; font-size:26px; font-weight:600; color:var(--accent-strong); margin:0; }
.rail-figure-label{ font-size:13px; color:var(--ink-muted); margin:4px 0 0; }

/* ---------- kpi tiles (budżet) ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  margin-bottom:28px;
}
.kpi{ background:var(--surface); padding:22px 24px 20px; }
.kpi .num{
  font-family:"IBM Plex Mono", monospace; font-size:30px; font-weight:600;
  color:var(--accent-strong); display:block; font-variant-numeric: tabular-nums;
}
.kpi .label{ font-size:14px; color:var(--ink-muted); margin-top:4px; }

/* ---------- day cards (plan) ---------- */
.day-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); margin-bottom:24px; overflow:hidden;
}
.day-card-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 26px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.day-card-head h2{ margin:0; font-size:19px; }

.task-row{
  display:grid; grid-template-columns:40px 108px 1fr auto; gap:18px;
  align-items:start; padding:20px 26px; border-bottom:1px solid var(--line);
}
.task-row:last-child{ border-bottom:none; }
.task-row.inactive{ opacity:.5; }
.task-row.done .task-title{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line); }
.task-row.done .task-desc{ color:var(--ink-faint); }

.toggle-form{ margin:0; }
.checkbox-btn{
  width:28px; height:28px; border-radius:7px; border:1.5px solid var(--line);
  background:var(--surface); cursor:pointer; color:var(--accent-strong); font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0; font-size:16px;
}
.checkbox-btn:hover{ border-color:var(--accent); }
.task-row.done .checkbox-btn{ background:var(--accent-soft); border-color:var(--accent); }

.time{ font-size:14.5px; color:var(--ink-muted); padding-top:4px; white-space:nowrap; }
.task-title{ font-weight:600; font-size:17px; margin:0 0 5px; }
.task-desc{ font-size:15px; color:var(--ink-muted); margin:0 0 6px; }
.task-goal{ font-size:14px; color:var(--ink-faint); margin:4px 0 0; }
.task-goal strong{ color:var(--ink-muted); }

.note-box{ margin-top:10px; }
.note-box summary{ font-size:14px; color:var(--accent-strong); cursor:pointer; user-select:none; }
.note-box form{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.note-box textarea{ width:100%; max-width:560px; }

.tag{
  justify-self:end; font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:6px;
  white-space:nowrap; height:fit-content; border:1px solid transparent;
}
.tag-prospecting{ background:var(--accent-soft); color:var(--accent-strong); }
.tag-calling{ background:var(--warn-soft); color:var(--warn); }
.tag-followup{ background:var(--warn-soft); color:var(--warn); }
.tag-close{ background:var(--accent-soft); color:var(--accent-strong); }
.tag-mail, .tag-review, .tag-visibility, .tag-inne{ background:var(--surface-2); color:var(--ink-muted); border-color:var(--line); }

.row-actions{ grid-column:1 / -1; display:flex; gap:18px; font-size:14.5px; margin-top:8px; }
.link-btn{ background:none; border:none; padding:0; cursor:pointer; color:var(--ink-muted); font-size:14.5px; font-family:inherit; }
.link-btn:hover{ color:var(--accent-strong); }
.link-btn.danger:hover{ color:var(--danger); }

@media (max-width:680px){
  .task-row{ grid-template-columns:32px 80px 1fr; }
  .tag{ grid-column:1/-1; justify-self:start; margin-top:8px; }
}

/* ---------- mini widgets (dashboard) ---------- */
.mini-tasks, .mini-clients{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:12px; }
.mini-tasks li{ display:flex; gap:12px; font-size:15.5px; }
.mini-tasks li.done{ color:var(--ink-faint); text-decoration:line-through; }
.mini-clients li{ display:flex; justify-content:space-between; gap:12px; font-size:15.5px; }
.btn-link{ font-size:15px; text-decoration:none; }

/* ---------- forms ---------- */
label{ display:flex; flex-direction:column; gap:7px; font-size:14.5px; color:var(--ink-muted); font-weight:500; margin-bottom:16px; }
/* Bez tego "display:flex" powyżej wygrywa z atrybutem hidden i pole
   "Cena" byłoby widoczne także dla tagu "Pozyskiwanie". */
[hidden]{ display:none !important; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=month], input[type=number], textarea, select{
  font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); width:100%;
}
textarea{ resize:vertical; font-family:inherit; }
.form-row{ display:flex; gap:20px; flex-wrap:wrap; }
.form-row > label{ flex:1; min-width:190px; }
button, .btn{
  font:inherit; font-size:15.5px; font-weight:600; padding:12px 22px; border-radius:8px;
  border:1px solid var(--accent-strong); background:var(--accent); color:#fff; cursor:pointer;
  text-decoration:none; display:inline-block; transition:background-color .12s ease, transform .12s ease;
}
button:hover, .btn:hover{ background:var(--accent-strong); }
button:active, .btn:active{ transform:translateY(1px); }
.btn-small{ font-size:13.5px; padding:8px 14px; align-self:flex-start; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.template-form, .client-form, .contact-form{ display:flex; flex-direction:column; }

/* ---------- tables ---------- */
.tablewrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:15px; }
table.data-table th, table.data-table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); }
table.data-table td.mono{ white-space:nowrap; }
table.data-table th{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
}
table.data-table tr.row-overdue{ background:var(--danger-soft); }
table.data-table tr.row-today{ background:var(--warn-soft); }

.pill{
  display:inline-block; font-size:13px; padding:5px 12px; border-radius:20px;
  background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--line);
}
.pill.status-nowy{ background:var(--surface-2); color:var(--ink-muted); }
.pill.status-brak_odpowiedzi{ background:var(--warn-soft); color:var(--warn); }
.pill.status-rozmowa_odbyta{ background:var(--accent-soft); color:var(--accent-strong); }
.pill.status-oferta_wyslana{ background:var(--accent-soft); color:var(--accent-strong); }
.pill.status-wygrany{ background:var(--good-soft); color:var(--good); }
.pill.status-przegrany{ background:var(--danger-soft); color:var(--danger); }
.pill.tag-pozyskiwanie{ background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.pill.tag-wdrozenie{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.rail-card .bar{ max-width:none; }
input[type=file]{ font:inherit; font-size:14px; padding:10px; border:1px dashed var(--line); border-radius:8px; background:var(--surface); width:100%; }

.pill.oferta-szkic{ background:var(--surface-2); color:var(--ink-muted); }
.pill.oferta-wyslana{ background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.pill.oferta-zaakceptowana{ background:var(--good-soft); color:var(--good); border-color:transparent; }
.pill.oferta-odrzucona{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.offer-text{ width:100%; font-size:13.5px; line-height:1.5; background:var(--surface-2); white-space:pre; overflow-x:auto; }
.pill.kind-lead{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.pill.kind-klient{ background:var(--good-soft); color:var(--good); border-color:transparent; }
.page-head h1 .pill{ font-size:13px; vertical-align:middle; margin-left:8px; }
.head-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.head-actions form{ display:inline; margin:0; }

.bar{ width:100%; max-width:200px; height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--accent); }

/* ---------- filters ---------- */
.filters{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; align-items:flex-end; }
.filters input, .filters select{ width:auto; min-width:190px; }
.filters button{ padding:11px 20px; }

/* ---------- client detail ---------- */
.def-list{ display:grid; grid-template-columns:160px 1fr; gap:12px 18px; font-size:15.5px; margin:0; }
.def-list dt{ color:var(--ink-faint); }
.def-list dd{ margin:0; }
.rail-card .def-list{ grid-template-columns:108px 1fr; gap:10px 12px; font-size:14px; }
.issue-notes{ font-size:15.5px; background:var(--surface-2); border-radius:10px; padding:16px 18px; }
.contact-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.contact-log li{ border-bottom:1px solid var(--line); padding-bottom:16px; }
.contact-log li:last-child{ border-bottom:none; }
.contact-log-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.contact-log p{ margin:0; font-size:15px; color:var(--ink-muted); }

/* ---------- client tasks ---------- */
.client-task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.client-task-list li{
  display:grid; grid-template-columns:28px 1fr auto auto; gap:14px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.client-task-list li:last-child{ border-bottom:none; }
.client-task-list li.done .task-title{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line); }
.client-task-list li.done .task-desc{ color:var(--ink-faint); }
.client-task-list li.overdue .task-title{ color:var(--danger); }
.client-task-body{ min-width:0; }
.client-task-body .task-title{ margin:0; }
.client-task-body .task-desc{ margin:3px 0 0; }
.task-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:14.5px; }
.task-meta .price, .price{ color:var(--good); font-weight:600; }
@media (max-width:560px){ .client-task-list li{ grid-template-columns:22px 1fr; } .client-task-list li > span, .client-task-list li > .task-meta, .client-task-list li > form:last-child{ grid-column:2; justify-self:start; align-items:flex-start; } }

/* ---------- day plan: client tasks panel ---------- */
.day-client-tasks{
  padding:16px 26px; background:var(--accent-soft); border-bottom:1px solid var(--line);
}
.day-client-tasks .label{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-strong); margin:0 0 10px;
}
.day-client-tasks ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.day-client-tasks li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; }
.day-client-tasks li.done .ct-title{ text-decoration:line-through; color:var(--ink-faint); }
.day-client-tasks .ct-title{ font-weight:600; }
.day-client-tasks .ct-client{ color:var(--accent-strong); }
.day-client-tasks .ct-title, .day-client-tasks .ct-client, .day-client-tasks .ct-notes{ display:block; }
.day-client-tasks .ct-notes{ color:var(--ink-muted); font-size:13.5px; margin-top:2px; }
.overdue-panel{
  background:var(--danger-soft); border:1px solid var(--line); border-radius:14px;
  padding:18px 26px; margin-bottom:24px; box-shadow:var(--shadow);
}
.overdue-panel .label{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--danger); margin:0 0 10px;
}
.overdue-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.overdue-panel li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; }

/* ---------- kalendarz wdrożeń ---------- */
.calendar-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-bottom:28px; box-shadow:var(--shadow);
}
.calendar-daylabel{
  background:var(--surface-2); padding:11px 14px; font-family:"IBM Plex Mono", monospace;
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
}
.calendar-cell{
  background:var(--surface); min-height:132px; padding:12px; display:flex; flex-direction:column; gap:8px;
}
.calendar-cell.outside{ background:var(--bg); }
.calendar-cell.outside .calendar-daynum{ color:var(--ink-faint); }
.calendar-cell.is-today{ box-shadow:inset 0 0 0 2px var(--accent); }
.calendar-daynum{ font-family:"IBM Plex Mono", monospace; font-size:14.5px; color:var(--ink-muted); font-weight:600; }
.calendar-task{ display:flex; align-items:flex-start; gap:8px; font-size:14px; }
.calendar-task.done .calendar-task-title{ color:var(--ink-faint); text-decoration:line-through; }
.calendar-task-title{ line-height:1.4; }
.calendar-task-title .price{ display:block; font-size:13px; }
.checkbox-btn-sm{ width:19px; height:19px; border-radius:5px; margin-top:1px; flex-shrink:0; font-size:11px; }
@media (max-width:760px){
  .calendar-grid{ grid-template-columns:1fr; }
  .calendar-daylabel{ display:none; }
  .calendar-cell{ min-height:auto; border-bottom:1px solid var(--line); }
}

/* ---------- login ---------- */
.login-body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans", sans-serif;
}
.login-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:40px 36px; width:100%; max-width:380px; display:flex; flex-direction:column;
}
.login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.login-brand img{ height:36px; width:auto; }
.login-error{ background:var(--danger-soft); color:var(--danger); font-size:14.5px; padding:12px 14px; border-radius:8px; margin:0 0 16px; }
.login-info{ background:var(--accent-soft); color:var(--accent-strong); font-size:14.5px; padding:12px 14px; border-radius:8px; margin:0 0 16px; }
.login-lead{ font-size:14.5px; color:var(--ink-muted); margin:0 0 20px; line-height:1.5; }
.login-card form{ display:flex; flex-direction:column; margin:0; }
.code-input{
  font-family:"IBM Plex Mono", monospace; font-size:26px; font-weight:600;
  letter-spacing:.32em; text-align:center; padding:14px 12px;
}
.checkbox-line{ flex-direction:row; align-items:center; gap:10px; font-size:14px; margin-bottom:18px; }
.checkbox-line input{ width:auto; margin:0; flex:0 0 auto; }
.resend-form{ margin-top:16px; align-items:center; }
.resend-form .link-btn{ font-size:14px; color:var(--accent-strong); }
.login-foot{ margin:14px 0 0; text-align:center; font-size:13.5px; }
.login-foot a{ color:var(--ink-faint); text-decoration:none; }
.login-foot a:hover{ color:var(--accent-strong); }


/* ---------- edytor oferty: formularz + podglad na zywo ---------- */
.editor-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.editor-form{ min-width:0; }
.editor-preview{
  position:sticky; top:24px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden; min-width:0;
}
.preview-bar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--surface-2); font-size:14px;
}
.preview-bar .muted{ font-size:13px; margin-left:auto; }
#offer-preview{ width:100%; height:calc(100vh - 190px); min-height:520px; border:0; display:block; background:#e9ecec; }
.editor-actions{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.sections-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.sections-grid .checkbox-line{ margin-bottom:0; }
@media (max-width:1200px){
  .editor-split{ grid-template-columns:1fr; }
  .editor-preview{ position:static; }
  #offer-preview{ height:70vh; }
}
.pill.oferta-wyswietlona{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.pill.oferta-wygasla{ background:var(--surface-2); color:var(--ink-faint); }

/* ---------- lista ofert, katalog uslug, logotypy ---------- */
.side-nav-label{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin:16px 0 4px; padding:0 12px;
}
.card-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.card-head h2{ margin:0; }
.filter-pills{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.filter-pills a{
  font-size:12.5px; padding:4px 10px; border-radius:999px; text-decoration:none;
  color:var(--ink-muted); background:var(--surface-2); white-space:nowrap;
}
.filter-pills a:hover{ color:var(--accent-strong); }
.filter-pills a.on{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }

.pill-select{
  font-size:12.5px; font-weight:600; padding:5px 8px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-muted);
  width:auto; min-width:118px; margin:0;
}
.pill-select.oferta-wyslana,
.pill-select.oferta-wyswietlona{ background:var(--accent-soft); color:var(--accent-strong); }
.pill-select.oferta-zaakceptowana{ background:var(--good-soft); color:var(--good); }
.pill-select.oferta-odrzucona{ background:var(--danger-soft); color:var(--danger); }
.inline-status{ margin:0; display:inline-flex; gap:6px; align-items:center; }
.nowrap{ white-space:nowrap; }
.req{ color:var(--danger); }

.logo-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.logo-tile{
  width:150px; height:64px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:8px;
}
.logo-tile img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-thumb{
  width:46px; height:30px; object-fit:contain; flex:0 0 auto;
  border:1px solid var(--line); border-radius:6px; background:#fff; padding:2px;
}
.color-preview{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-muted); }
.color-preview span{ display:inline-flex; align-items:center; gap:7px; }
.color-preview i{
  width:22px; height:22px; border-radius:6px; border:1px solid var(--line); display:block;
}

/* pasek podgladu: strony i zoom */
.preview-bar .pager,
.preview-bar .zoomer{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--ink-muted); }
.preview-bar .zoomer{ margin-left:4px; }
.page-btn{
  font:inherit; font-size:14px; line-height:1; width:26px; height:26px; padding:0;
  border:1px solid var(--line); border-radius:6px; background:var(--surface);
  color:var(--ink-muted); cursor:pointer; margin:0;
}
.page-btn:hover{ background:var(--surface-2); border-color:var(--accent); color:var(--accent-strong); }
.page-btn.wide{ width:auto; padding:0 9px; font-size:12.5px; }
#page-info, #zoom-info{ min-width:44px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---------- opinie klientow, zdjecie w ustawieniach ---------- */
.review-list li{ align-items:flex-start; }
.review-snippet{
  display:block; font-size:12.5px; color:var(--ink-muted); margin-top:4px;
  font-style:italic; line-height:1.4;
}
.photo-preview{ display:flex; align-items:center; gap:16px; margin:0 0 16px; }
.photo-preview img{
  width:96px; height:128px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2);
}

/* ---------- Wykonane dzisiaj ---------- */
.day-pick{ margin:0; display:inline-flex; }
.day-pick input{ margin:0; width:auto; font-size:13.5px; padding:7px 10px; }

.day-stats{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 22px; }
.day-stat{
  flex:1 1 120px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--shadow);
}
.day-stat.wide{ flex:1 1 200px; }
.day-stat strong{ display:block; font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; }
.day-stat span{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:4px; }

/* oś czasu dnia */
.timeline{ list-style:none; margin:0; padding:0; }
.tl-item{ display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.tl-item:first-child{ border-top:none; padding-top:0; }
.tl-time{
  flex:0 0 44px; font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  color:var(--ink-faint); padding-top:3px; font-variant-numeric:tabular-nums;
}
.tl-body{ flex:1; min-width:0; }
.tl-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.tl-tag{
  font-size:11px; font-weight:600; letter-spacing:.03em; padding:3px 8px;
  border-radius:999px; background:var(--surface-2); color:var(--ink-muted); white-space:nowrap;
}
.tl-tag-ok{ background:var(--good-soft); color:var(--good); }
.tl-tag-kontakt{ background:var(--accent-soft); color:var(--accent-strong); }
.tl-tag-notatka{ background:var(--warn-soft); color:var(--warn); }
.tl-tag-oferta{ background:var(--accent-soft); color:var(--accent-strong); }
.tl-title{ font-weight:600; font-size:14.5px; color:var(--ink); text-decoration:none; }
a.tl-title:hover{ color:var(--accent-strong); text-decoration:underline; }
.tl-client{ font-size:13px; color:var(--ink-muted); }
.tl-price{ margin-left:auto; font-size:13.5px; font-weight:600; }
.tl-note{
  margin:5px 0 0; font-size:13.5px; color:var(--ink-muted); line-height:1.55;
  border-left:2px solid var(--line); padding-left:11px;
}

/* pasek aktywności */
.day-bars{ display:flex; align-items:flex-end; gap:4px; height:96px; }
.day-bar{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; text-decoration:none; gap:4px;
}
.day-bar span{
  width:100%; background:var(--accent-soft); border-radius:3px 3px 0 0; min-height:3px;
}
.day-bar:hover span{ background:var(--accent); }
.day-bar.on span{ background:var(--accent-strong); }
.day-bar em{ font-style:normal; font-size:10.5px; color:var(--ink-faint); }
.day-bar.on em{ color:var(--accent-strong); font-weight:700; }

.copy-box{
  font-family:"IBM Plex Mono", monospace; font-size:12px; line-height:1.5; resize:vertical;
}

/* ---------- zmiana terminu wprost na liscie zadan ---------- */
.due-form{ margin:0; display:inline-flex; }
.due-form input[type="date"]{
  margin:0; width:auto; font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  padding:4px 7px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink-muted); cursor:pointer;
}
.due-form input[type="date"]:hover{ border-color:var(--accent); color:var(--accent-strong); }
.due-form input[type="date"]:focus{ border-color:var(--accent); color:var(--ink); }
li.overdue .due-form input[type="date"]{ border-color:var(--danger); color:var(--danger); }
li.done .due-form input[type="date"]{ opacity:.55; }

/* ---------- edycja wyceny wprost na liscie zadan ---------- */
.price-form{ margin:0; display:inline-flex; align-items:center; gap:4px; }
.price-form input[type="text"]{
  margin:0; width:92px; text-align:right;
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; font-weight:600;
  padding:4px 7px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--good); cursor:pointer;
}
.price-form input[type="text"]:hover{ border-color:var(--accent); }
.price-form input[type="text"]:focus{ border-color:var(--accent); cursor:text; }
.price-form input::placeholder{ color:var(--ink-faint); font-weight:400; }
.price-unit{ font-size:12px; color:var(--ink-muted); }
li.done .price-form input[type="text"]{ opacity:.6; }

/* maly przycisk zapisu przy kwotach — pieniadze zapisujemy jawnie,
   nie po opuszczeniu pola */
.mini-save{
  font:inherit; font-size:12px; font-weight:700; line-height:1;
  width:24px; height:24px; padding:0; margin:0; flex:0 0 auto;
  border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink-faint); cursor:pointer;
}
.mini-save:hover{ background:var(--good-soft); border-color:var(--good); color:var(--good); }

/* ---------- ile juz oplacone ---------- */
/* Kolumna z metryka jest waska (grid "auto"), wiec pola nie moga sie
   rozpychac — stad sztywne szerokosci i swiadome lamanie linii. */
.paid-form{
  margin:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  justify-content:flex-end; max-width:264px;
}
.paid-lab{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.paid-form input[type="text"]{
  margin:0; flex:0 0 84px; width:84px; text-align:right;
  font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  padding:4px 7px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink-muted); cursor:pointer;
}
.paid-form input[type="text"]:hover{ border-color:var(--accent); }
.paid-form input[type="text"]:focus{ border-color:var(--accent); color:var(--ink); cursor:text; }
.paid-form.oplacone input[type="text"]{ color:var(--good); border-color:var(--good); background:var(--good-soft); }
.paid-all{
  font:inherit; font-size:11.5px; font-weight:600; padding:4px 9px; margin:0;
  flex:0 0 auto; border-radius:7px; border:1px solid var(--accent);
  background:var(--surface); color:var(--accent-strong); cursor:pointer; white-space:nowrap;
}
.paid-all:hover{ background:var(--accent); color:#fff; }
.paid-ok{ color:var(--good); font-weight:700; font-size:14px; }
/* "zostalo X" zawsze w osobnej linii — inaczej rozpycha wiersz */
.paid-left{
  flex:0 0 100%; text-align:right; font-size:11.5px;
  color:var(--danger); white-space:nowrap;
}
.task-meta{ gap:7px; }
.price-form{ justify-content:flex-end; }
.price-form input[type="text"]{ flex:0 0 92px; }

/* ---------- panel boczny Budzetu: mniej kafelkow, wiecej tresci ---------- */
.rail-hero{ border:1px solid var(--accent); }
.rail-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.rail-rows li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-muted);
}
.rail-rows li:last-child{ border-bottom:none; padding-bottom:0; }
.rail-rows li.sep{ border-top:2px solid var(--line); margin-top:4px; padding-top:13px; }
.rail-rows li strong{
  font-family:"IBM Plex Mono", monospace; font-size:16px; font-weight:600;
  color:var(--ink); white-space:nowrap;
}
.rail-rows li strong.muted{ color:var(--ink-faint); }
.rail-rows em{ font-style:normal; display:block; font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

/* ---------- miesiac rozliczenia przy zadaniu ---------- */
/* Wycena mowi ILE, to pole mowi KIEDY.
   Swiadomie <select>, a nie <input type="month">: natywne pole miesiaca
   rysuje "--------- ----" z ikona kalendarza i w waskiej kolumnie z kwotami
   wyglada jak bledny placeholder. Lista miesiecy jest krotka, wiec select
   jest i czytelniejszy, i da sie go ostylowac na spojna "pigulke". */
.month-form{
  margin:0; display:flex; align-items:center; gap:6px;
  justify-content:flex-end; max-width:264px;
}
.month-lab{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.month-form select{
  margin:0; width:auto; max-width:190px;
  font-size:12.5px; font-weight:600; line-height:1.2;
  padding:4px 22px 4px 9px; border:1px solid var(--line); border-radius:20px;
  background-color:var(--surface); color:var(--accent-strong); cursor:pointer;
  /* wlasna strzalka — natywna w select-ach roznie wyglada w roznych systemach */
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
  text-overflow:ellipsis;
}
.month-form select:hover{ border-color:var(--accent); }
.month-form select:focus{ border-color:var(--accent); outline:2px solid var(--accent-soft); }
/* miesiac wziety z terminu, a nie wpisany recznie — stonowany, zeby bylo
   widac na pierwszy rzut oka, ktore zadania sa zaplanowane swiadomie */
.month-form.auto select{
  color:var(--ink-faint); font-weight:500; background-color:transparent;
  border-style:dashed;
}
.month-form.auto select:hover{ color:var(--ink-muted); }

/* pole miesiaca w formularzu "Dodaj zadanie" — niech stoi w jednym rzedzie
   z terminem i cena, a nie zajmuje calej szerokosci wiersza */
.form-row > label.lab-month{ flex:0 1 230px; min-width:0; max-width:230px; }

/* ---------- Budzet: plan wplywow ---------- */
.horizon-pick{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.horizon-pick a{
  font-size:12.5px; text-decoration:none; padding:5px 12px; border-radius:20px;
  border:1px solid transparent; color:var(--ink-muted); background:var(--surface-2);
  white-space:nowrap; font-weight:500;
}
.horizon-pick a:hover{ color:var(--accent-strong); background:var(--accent-soft); }
.horizon-pick a.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

.plan-month{ margin:0 0 6px; }
.plan-month-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:10px 14px; border-radius:9px 9px 0 0;
  background:var(--surface-2); border:1px solid var(--line); border-bottom:none;
}
.plan-month-head h3{ margin:0; font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.plan-sum{
  margin-left:auto; font-family:"IBM Plex Mono", monospace;
  font-size:15px; font-weight:600; white-space:nowrap;
}
.plan-badge{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:20px; background:var(--accent-soft); color:var(--accent-strong);
  vertical-align:1px; margin-left:8px; white-space:nowrap;
}
.plan-badge.late{ background:var(--danger-soft); color:var(--danger); }
.plan-month.now .plan-month-head{ background:var(--accent-soft); border-color:var(--accent); }
.plan-month.now .plan-month-head h3{ color:var(--accent-strong); }
.plan-month.now .plan-list{ border-color:var(--accent); }
.plan-month.late .plan-month-head{ background:var(--danger-soft); border-color:var(--danger); }
.plan-month.late .plan-month-head h3,
.plan-month.late .plan-sum{ color:var(--danger); }
.plan-month.late .plan-list{ border-color:var(--danger); }

.plan-list{
  list-style:none; margin:0 0 18px; padding:0;
  border:1px solid var(--line); border-radius:0 0 9px 9px; overflow:hidden;
}
.plan-list li{
  display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) auto;
  align-items:baseline; gap:14px;
  padding:9px 14px; font-size:14.5px; background:var(--surface);
  border-top:1px solid var(--line);
}
.plan-list li:first-child{ border-top:none; }
.plan-client{ font-weight:600; min-width:0; overflow-wrap:anywhere; }
.plan-title{ color:var(--ink-muted); min-width:0; overflow-wrap:anywhere; }
.plan-adv{
  grid-column:2; justify-self:start; font-family:"IBM Plex Mono", monospace;
  font-size:11.5px; color:var(--ink-faint); margin-top:-4px;
}
.plan-list .plan-kwota{
  grid-column:3; font-family:"IBM Plex Mono", monospace;
  font-weight:600; white-space:nowrap; text-align:right;
}
.plan-note{ margin:0; padding:9px 14px; font-size:12.5px; color:var(--ink-faint);
  background:var(--surface); border-top:1px solid var(--line); }

.plan-warn{
  margin:0 0 18px; padding:11px 14px; border-radius:9px; font-size:13.5px;
  background:var(--danger-soft); color:var(--danger);
  border:1px solid var(--line); border-left:3px solid var(--danger);
}
.plan-beyond{
  margin:6px 0 0; padding:12px 14px; border-radius:9px; font-size:13.5px;
  background:var(--surface-2); color:var(--ink-muted); border:1px dashed var(--line);
}
.plan-beyond strong{ font-family:"IBM Plex Mono", monospace; }

/* rozbicie "W toku" w panelu bocznym — wiersze podrzedne, nie rownorzedne */
.rail-rows li.sub{ padding:6px 0 6px 12px; border-bottom:none; font-size:13px; }
.rail-rows li.sub + li.sub{ padding-top:0; }
.rail-rows li.sub span{ color:var(--ink-faint); }
.rail-rows li.sub strong{ font-size:13.5px; font-weight:500; }
.rail-rows li.head{ border-bottom:none; padding-bottom:4px; }

/* ---------- generator umow ---------- */
#contract-preview{
  width:100%; height:calc(100vh - 190px); min-height:520px;
  border:0; display:block; background:#e9ecec;
}
@media (max-width:1200px){ #contract-preview{ height:70vh; } }
.preview-bar .btn-link{ margin-left:auto; }
.preview-bar #preview-status{ margin-left:0; }

/* podglad wgranego podpisu — szachownica pokazuje, czy tlo jest
   naprawde przezroczyste, czy tylko bialy prostokat */
.sign-preview{
  display:inline-block; padding:10px 16px; margin-bottom:14px; border-radius:10px;
  border:1px solid var(--line);
  background-color:var(--surface);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
  background-size:14px 14px;
  background-position:0 0, 0 7px, 7px -7px, -7px 0;
}
.sign-preview img{ max-height:70px; max-width:280px; display:block; }

/* blok "dane do umowy" na karcie klienta */
.fieldset-soft{
  border:1px solid var(--line); border-radius:12px; padding:16px 18px 4px;
  margin:0 0 16px; background:var(--surface-2);
}
.fieldset-soft legend{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--ink-muted); padding:0 8px;
}

/* lista umow: status w tabeli nie ma sie rozpychac */
.status-form{ margin:0; }
.status-form select{ font-size:13.5px; padding:6px 10px; width:auto; min-width:120px; }

.form-row > label.lab-mm{ flex:0 1 200px; min-width:0; max-width:200px; }
label.lab-mm{ max-width:200px; }

/* ---------- komunikaty nad tresci strony ----------
   Umowy uzywaja tych klas; wczesniej byly w HTML, ale bez stylu,
   wiec "Zapisane." wygladalo jak zwykly akapit. */
.flash{
  font-size:14.5px; padding:12px 16px; border-radius:9px; margin:0 0 18px;
  border:1px solid transparent; line-height:1.55;
}
.flash code{
  font-family:"IBM Plex Mono", monospace; font-size:13px;
  background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px;
}
.flash-ok{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
.flash-bad{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
.flash-warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.flash-warn strong{ color:var(--warn); }

/* ---------- Budzet: widok miesiaca ---------- */
.month-link{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.month-link:hover{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.plan-month-head .month-link{ border-bottom:none; }
.plan-month-head .month-link:hover{ text-decoration:underline; }

/* lista miesiecy w panelu bocznym — nawigacja, nie tabela */
.month-jump{ list-style:none; margin:0; padding:0; }
.month-jump li + li{ border-top:1px solid var(--line); }
.month-jump a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 10px; margin:0 -10px; border-radius:8px;
  text-decoration:none; color:var(--ink-muted); font-size:14px;
}
.month-jump a:hover{ background:var(--surface-2); color:var(--ink); }
.month-jump a.on{ background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.month-jump strong{
  font-family:"IBM Plex Mono", monospace; font-size:13.5px; font-weight:600;
  white-space:nowrap; color:var(--ink);
}
.month-jump a.on strong{ color:var(--accent-strong); }
.month-jump em{
  font-style:normal; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); margin-left:4px;
}
.month-jump a.on em{ color:var(--accent-strong); }

/* pasek statystyk miesiaca — szersze kafelki niz w "Wykonane dzisiaj",
   bo mieszcza kwoty, a nie liczby sztuk */
.day-stats .day-stat.wide{ flex:1 1 190px; }
/* kwoty sa dluzsze niz liczby sztuk — mniejszy stopien, zeby sie nie lamaly */
.day-stat strong.price{ font-size:21px; font-family:"IBM Plex Mono", monospace; font-weight:600; }

/* ---------- data rozliczenia przy zadaniu ---------- */
/* Robota bywa zrobiona w jednym miesiacu, a pieniadze wplywaja w innym.
   To pole mowi, do ktorego miesiaca wpada kwota w Budzecie. */
.paiddate-form{ margin:0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.paiddate-form input[type="date"]{
  margin:0; width:auto; max-width:132px;
  font-family:"IBM Plex Mono", monospace; font-size:12px; font-weight:600;
  padding:4px 7px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink-muted);
}
.paiddate-form input[type="date"]:hover,
.paiddate-form input[type="date"]:focus{ border-color:var(--accent); }
/* rozliczone w INNYM miesiacu niz ogladany — zeby nie szukac rozbieznosci */
.paiddate-form.inny input[type="date"]{ border-color:var(--warn); color:var(--warn); }
.paiddate-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:20px; background:var(--warn-soft); color:var(--warn);
  white-space:nowrap;
}
/* w tabeli miesiaca pole siedzi pod kwota, wiec do lewej i ciasniej */
table.data-table .paiddate-form{ justify-content:flex-start; margin-top:4px; }
table.data-table .paiddate-form input[type="date"]{ font-size:11.5px; padding:3px 6px; max-width:124px; }

/* data odhaczenia inna niz miesiac rozliczenia — delikatny sygnal,
   ze pozycja "przyjechala" z innego miesiaca */
table.data-table td.przeniesione{ color:var(--warn); font-weight:600; }

/* reszta do zaplaty pod kwota zaplacona — oszczedza cala kolumne w tabeli */
table.data-table td .zostalo{
  font-size:11.5px; font-weight:600; color:var(--danger); margin-top:2px; white-space:nowrap;
}

/* ---------- zapytania z formularza ---------- */
.inq-list{ list-style:none; margin:0; padding:0; }
.inq{ padding:16px 0; border-top:1px solid var(--line); }
.inq:first-child{ border-top:none; padding-top:4px; }
.inq.nowe{ position:relative; padding-left:14px; }
.inq.nowe::before{
  content:''; position:absolute; left:0; top:20px; width:4px; height:calc(100% - 34px);
  border-radius:3px; background:var(--accent);
}
.inq-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.inq-when{ font-size:12.5px; color:var(--ink-faint); white-space:nowrap; }
.inq-from{ font-size:15.5px; }
.inq-subject{ margin:0 0 6px; font-size:14.5px; color:var(--ink-muted); }
.inq-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; margin-bottom:8px; }
.inq-meta .mono{ color:var(--ink-muted); }

.inq-body{ margin:0 0 10px; }
.inq-body summary{ font-size:13.5px; color:var(--accent-strong); cursor:pointer; user-select:none; }
/* Tresc maila jest tekstem z zewnatrz — bialy prostokat, zadnego HTML-a. */
.inq-text{
  margin-top:8px; padding:12px 14px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:13.5px; line-height:1.6; color:var(--ink-muted);
  max-height:340px; overflow:auto; overflow-wrap:anywhere;
}
.inq-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.inq-actions .status-form select{ font-size:13px; padding:5px 9px; width:auto; min-width:130px; }

.pill.inq-status-nowe{ background:var(--accent-soft); color:var(--accent-strong); border-color:transparent; }
.pill.inq-status-dodane{ background:var(--good-soft); color:var(--good); border-color:transparent; }
.pill.inq-status-odrzucone{ background:var(--surface-2); color:var(--ink-faint); }

.code-box{
  margin:0; padding:10px 12px; border-radius:8px; overflow-x:auto;
  background:var(--surface-2); border:1px solid var(--line);
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-muted);
  white-space:pre-wrap; overflow-wrap:anywhere;
}