/* Operator panel — brand "Kiokuya" (spójny z landingiem): papier washi, tusz sumi,
   cynober pieczęci hanko (shu) jako primary, złote akcenty (kin).
   Typografia marki: Khand SemiBold (nagłówki/KPI) + General Sans (UI/body). */
:root {
  --display: "Khand", "General Sans", system-ui, sans-serif;
  --jp: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #FAF7F1; --surface: #FFFFFF; --surface-2: #F8F3EA;
  --fg: #17130F; --fg-body: #4A423A; --fg-muted: #7A6E5E; --fg-subtle: #A2968A;
  --border: #ECE4D4; --border-2: #DFD4BF; --header-bg: #F7F1E6;

  --primary: #C22F2A; --primary-600: #A32521; --primary-soft: #F8E7E5; --primary-softtext: #8E211D;
  --gold: #B9973E; --gold-text: #8A6E25;
  --danger: #B91C1C; --danger-soft: #FEF2F2;

  --ok-bg:#E7F6EC; --ok-fg:#0F7A3D;
  --info-bg:#E8EEFE; --info-fg:#1E50C8;
  --warn-bg:#FEF3E0; --warn-fg:#96591A;
  --err-bg:#FDECEC; --err-fg:#B42318;
  --neutral-bg:#EFE8DB; --neutral-fg:#5C5142;
  --attn-bg:#FDEAD7; --attn-fg:#9A4B00;

  --radius: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 2px 6px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.06);

  --side-bg: #17130F; --side-bg-2: #201812; --side-fg: #B5A48E; --side-fg-hi: #FAF7F1;
  --side-border: rgba(250,247,241,.08);
  --page-glow: rgba(194,47,42,.10); --page-glow-2: rgba(185,151,62,.12);
  --hero-from: #F8F0E1; --hero-border: #EBDFC6;
  --glow: rgba(194,47,42,.25);
}
/* Dark theme — sumi: ciepła czerń tuszu (jak finał landingu), shu rozjaśnione dla kontrastu. */
[data-theme="dark"] {
  --bg: #14100C; --surface: #1E1812; --surface-2: #262016;
  --fg: #F5EEE3; --fg-body: #DACDBB; --fg-muted: #A5947E; --fg-subtle: #7B6C59;
  --border: #322920; --border-2: #413528; --header-bg: #221B14;

  --primary: #E25B51; --primary-600: #D54B41; --primary-soft: #40211E; --primary-softtext: #F4BCB7;
  --gold: #B9973E; --gold-text: #CBA94E;
  --danger: #F87171; --danger-soft: #3A1D24;

  --ok-bg:#173925; --ok-fg:#6BD693;
  --info-bg:#20304E; --info-fg:#9BB8F0;
  --warn-bg:#3A2B12; --warn-fg:#E8B266;
  --err-bg:#3B1A1E; --err-fg:#F08A8A;
  --neutral-bg:#342B21; --neutral-fg:#CDBDA7;
  --attn-bg:#3D2510; --attn-fg:#EFA35C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);

  --side-bg: #100D0A; --side-bg-2: #17110C; --side-fg: #A5947E; --side-fg-hi: #FAF7F1;
  --side-border: rgba(250,247,241,.07);
  --page-glow: rgba(226,91,81,.12); --page-glow-2: rgba(185,151,62,.08);
  --hero-from: #2A1E15; --hero-border: #43321F;
  --glow: rgba(226,91,81,.28);
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; color: var(--fg-body); font: 400 14px/1.55 var(--sans);
  background:
    radial-gradient(1100px 420px at 15% -140px, var(--page-glow), transparent 70%),
    radial-gradient(900px 560px at 108% 22%, var(--page-glow-2), transparent 72%),
    var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nagłówki: Khand SemiBold (kondensowany display — mocny, jak pieczęć). */
h1 { font-family: var(--display); font-weight: 600; font-size: 1.7rem; letter-spacing: .01em;
     color: var(--fg); margin: 0 0 1.25rem; }
h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; color: var(--fg); }
h2.section { font-size: 1.15rem; margin: 1.75rem 0 .75rem; }

/* ── layout: left sidebar + content (Dashboard v4) ─────────────────────────────── */
.layout { display: flex; min-height: 100dvh; }
.sidebar { width: 224px; flex: none; background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: var(--side-fg); display: flex; flex-direction: column; padding: 1rem .8rem;
  position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--side-border); }
.brand { font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--side-fg-hi); padding: .35rem .6rem 1rem; display: flex; align-items: center; gap: .6rem; }
.brand .hanko { width: 26px; height: 26px; flex: none; }
.nav-toggle { display: none; } /* hamburger — tylko mobile */
.sidenav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sidenav a { display: flex; align-items: center; gap: .65rem; color: var(--side-fg);
  padding: .5rem .6rem; border-radius: 8px; font-size: .9rem; font-weight: 500;
  border: 1px solid transparent; transition: background .15s, color .15s; }
.sidenav a svg { width: 17px; height: 17px; flex: none; }
.sidenav a:hover { background: rgba(255,255,255,.06); color: var(--side-fg-hi); text-decoration: none; }
.sidenav a.active { background: rgba(255,255,255,.05); color: var(--side-fg-hi);
  border-color: rgba(255,255,255,.16); }
.side-foot { display: flex; flex-direction: column; gap: .5rem; padding-top: .8rem;
  border-top: 1px solid var(--side-border); }
.theme-toggle { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left;
  background: transparent; color: var(--side-fg); border: 1px solid transparent; box-shadow: none;
  padding: .5rem .6rem; border-radius: 8px; font: 500 .9rem var(--sans); cursor: pointer; }
.theme-toggle:hover { background: rgba(255,255,255,.06); color: var(--side-fg-hi); }
.theme-toggle svg { width: 17px; height: 17px; }
.tenant-chip { font-size: .8rem; color: var(--side-fg); padding: 0 .6rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.logout button { width: 100%; background: rgba(255,255,255,.07); color: #E5E7EB; font-weight: 500;
  border: 1px solid rgba(255,255,255,.13); box-shadow: none; }
.logout button:hover { background: rgba(255,255,255,.15); }

.content { flex: 1; min-width: 0; }
main { max-width: 1280px; margin: 1.75rem auto; padding: 0 1.5rem; }

/* dashboard two-column: work area + right rail (calendar) */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem;
  align-items: start; }
.dash-rail { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* KPI cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s;
  text-align: center; }
.card:hover { box-shadow: var(--shadow-md); }
.card .n { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--fg); font-feature-settings: "tnum" 1; }
.card .label { color: var(--fg-muted); font-size: .82rem; margin-top: .45rem; font-weight: 500; }

/* badges (colour + text) */
.badge { display: inline-flex; align-items: center; padding: .16rem .5rem; border-radius: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; }
.badge.active, .badge.granted, .badge.done { background: var(--ok-bg); color: var(--ok-fg); }
.badge.converted, .badge.in_progress { background: var(--info-bg); color: var(--info-fg); }
.badge.new, .badge.waiting, .badge.qualified { background: var(--warn-bg); color: var(--warn-fg); }
.badge.erased, .badge.low, .badge.normal { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge.withdrawn, .badge.rejected, .badge.spam { background: var(--err-bg); color: var(--err-fg); }
.badge.high, .badge.dup, .badge.important { background: var(--attn-bg); color: var(--attn-fg); }
.badge.chan { background: var(--primary-soft); color: var(--primary-softtext); }
.badge.auto { background: var(--primary-soft); color: var(--primary-softtext);
  text-transform: uppercase; letter-spacing: .04em; font-size: .62rem; }
.chk-col { width: 2.2rem; text-align: center; }
.chk-col input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); }
.badge.proposed { background: var(--warn-bg); color: var(--warn-fg); }
.badge.accepted { background: var(--ok-bg); color: var(--ok-fg); }
.badge.dismissed { background: var(--neutral-bg); color: var(--neutral-fg); }
/* message statuses */
.badge.draft { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge.approved, .badge.sent { background: var(--ok-bg); color: var(--ok-fg); }
.badge.scheduled, .badge.sending { background: var(--info-bg); color: var(--info-fg); }
.badge.failed { background: var(--err-bg); color: var(--err-fg); }
.badge.cancelled { background: var(--neutral-bg); color: var(--neutral-fg); }

/* safety metrics header (knowledge, SG-1) */
.safety-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* owned-items note (message detail, S-2) */
.owned-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.owned-label { font-weight: 600; margin-right: .2rem; }

/* compliance passport (message detail) */
.passport { list-style: none; margin: 0; padding: 0; }
.passport li { display: flex; align-items: baseline; gap: .6rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border); font-size: .9rem; }
.passport li:last-child { border-bottom: 0; }
.passport .pp-mark { font-weight: 700; width: 1.1rem; flex: none; text-align: center; }
.passport li.ok .pp-mark { color: var(--ok-fg); }
.passport li.bad .pp-mark { color: var(--err-fg); }
.passport li.na .pp-mark { color: var(--fg-muted); }
.passport .pp-label { font-weight: 600; min-width: 210px; }
.passport .pp-detail { font-size: .82rem; }

/* Plan wysyłek — day groups */
.plan-day { margin-bottom: 1rem; }
.plan-date { font-weight: 600; color: var(--fg-muted); font-size: .82rem; margin-bottom: .35rem;
  padding-bottom: .2rem; border-bottom: 1px solid var(--border); }

/* panels + forms */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.panel > h2, .panel > summary { font-family: var(--display); font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
.form-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: end; }
label.field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 500; color: var(--fg-muted); }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  padding: .5rem .65rem; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font: 400 .9rem var(--sans); background: #fff; color: var(--fg); min-width: 170px;
  transition: border-color .15s, box-shadow .15s; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { width: 100%; min-height: 88px; resize: vertical; font-family: var(--sans); }

/* checkbox row + settings grid (autonomy) */
label.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500;
  color: var(--fg); cursor: pointer; }
label.check input { min-width: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--primary); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-3 .field input { min-width: 0; }
.hint { font-size: .72rem; font-weight: 400; }
@media (max-width: 720px) { .grid-3 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem 1.15rem; margin: 0 0 1.15rem; }
fieldset legend { font-size: .72rem; font-weight: 600; color: var(--fg-muted); padding: 0 .45rem;
  text-transform: uppercase; letter-spacing: .05em; }

/* buttons */
button, a.btn { font: 600 .88rem var(--sans); border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s; }
button { padding: .5rem .9rem; border: 1px solid transparent; background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
button:hover { background: var(--primary-600); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
button.small { padding: .35rem .65rem; font-size: .8rem; }
button.accent { background: var(--primary-soft); color: var(--primary-softtext); border-color: var(--border-2); box-shadow: none; }
button.accent:hover { background: var(--surface-2); }
button.danger { background: var(--danger); }
button.danger:hover { background: #B91C1C; }
a.btn { display: inline-block; padding: .5rem .85rem; background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
a.btn:hover { background: var(--primary-600); text-decoration: none; }
a.btn.small { padding: .35rem .65rem; font-size: .8rem; }
a.btn-danger { display: inline-block; padding: .5rem .85rem; background: var(--surface); color: var(--danger);
  border: 1px solid #F2C9C9; border-radius: var(--radius-sm); font: 600 .88rem var(--sans); }
a.btn-danger:hover { background: var(--danger-soft); text-decoration: none; }

/* tables */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); font-size: .875rem; vertical-align: top; }
th { background: var(--header-bg); color: var(--fg-muted); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; font-size: .82rem; color: var(--fg-body); }

/* cockpit work cards */
.work-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.15rem; margin-top: 1.25rem; }
.work-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; transition: box-shadow .15s; }
.work-card:hover { box-shadow: var(--shadow-md); }
.work-card > header { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.work-card h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.work-card .count { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: .8rem;
  color: var(--fg-muted); background: var(--neutral-bg); border-radius: 999px; padding: .1rem .55rem;
  font-feature-settings: "tnum" 1; }
.work-card .count.zero { color: var(--fg-subtle); }
.work-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.work-list li { font-size: .86rem; line-height: 1.4; }
.work-list a.name { color: var(--fg); font-weight: 600; }
.work-list a.name:hover { color: var(--primary); text-decoration: none; }
.work-list .why { color: var(--fg-muted); font-size: .78rem; margin-top: .12rem; }
.work-card .cta { margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--primary); }
.work-card .cta:hover { color: var(--primary-600); text-decoration: none; }
.work-card .empty-mini { color: var(--fg-subtle); font-size: .83rem; padding: .5rem 0 .8rem; flex: 1; }

/* Klient 360 summary */
.summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem 1.4rem; margin-bottom: 1.4rem; }
.summary .top { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.summary h1 { font-size: 1.5rem; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem 1.7rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.chip { display: flex; flex-direction: column; gap: .18rem; }
.chip .k { color: var(--fg-subtle); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.chip .v { font-weight: 600; font-size: .9rem; color: var(--fg); }

/* recommended next step */
.nextstep { display: grid; gap: .6rem; }
.nextstep .op { background: var(--info-bg); color: #1A398A; padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; }
.nextstep .mk { padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; }
.nextstep .mk.ok { background: var(--ok-bg); color: #0C5C30; }
.nextstep .mk.block { background: var(--warn-bg); color: #7A4A15; }
.nextstep ul.chan { margin: .45rem 0 0; padding-left: 1.15rem; }
.nextstep ul.chan li { font-size: .84rem; margin: .12rem 0; }
.nextstep ul.chan li.no { color: var(--err-fg); }
.nextstep ul.chan li.yes { color: var(--ok-fg); }
.nextstep .legal { font-size: .8rem; color: var(--fg-muted); }

/* activity timeline */
.timeline { list-style: none; margin: .5rem 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: .35rem; bottom: .35rem; width: 2px; background: var(--border-2); }
.timeline li { position: relative; padding: 0 0 1.15rem 1.65rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface); }
.timeline li.form::before { background: var(--attn-fg); }
.timeline li.consent::before { background: var(--ok-fg); }
.timeline .t-when { font-family: var(--mono); font-size: .76rem; color: var(--fg-subtle); }
.timeline .t-what { font-weight: 600; font-size: .88rem; margin: .15rem 0; color: var(--fg); }
.timeline .t-detail { font-size: .83rem; color: var(--fg-muted); }

/* lead workbench: filters, row actions, message, note */
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }
details.msg summary { cursor: pointer; color: var(--primary); font-size: .82rem; font-weight: 500; }
details.msg .body { margin-top: .35rem; font-size: .85rem; white-space: pre-wrap; background: var(--surface-2);
  border: 1px solid var(--border); padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--fg-body); }
.note-box { background: #FFFBEB; border: 1px solid #FCE7B0; border-radius: var(--radius-sm);
  padding: .85rem 1rem; font-size: .9rem; white-space: pre-wrap; color: #5A3E00; }

/* misc */
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-head h1 { margin: 0; }
.confirm-row { display: flex; gap: .75rem; align-items: center; }
.actions-cell { white-space: nowrap; }
ul { margin: .3rem 0; padding-left: 1.2rem; }
.muted { color: var(--fg-muted); }
.empty { padding: 2rem; text-align: center; color: var(--fg-subtle); font-size: .9rem; }
.error { background: var(--err-bg); color: var(--err-fg); padding: .65rem .85rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: .9rem; border: 1px solid #F6D2D2; }

/* flash banners */
.flash { padding: .7rem .95rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: .9rem; font-weight: 500; }
.flash.success { background: var(--ok-bg); color: var(--ok-fg); }
.flash.info { background: var(--info-bg); color: var(--info-fg); }
.flash.warn { background: var(--warn-bg); color: var(--warn-fg); }
.flash.error { background: var(--err-bg); color: var(--err-fg); }

/* login */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 2.25rem; width: 100%; max-width: 380px; }
.login-card h1 { text-align: center; font-size: 1.4rem; margin: 0 0 .35rem; }
.login-card .sub { text-align: center; color: var(--fg-muted); font-size: .85rem; margin-bottom: 1.75rem; }
.login-card label.field { margin-bottom: 1rem; }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: .5rem; padding: .65rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .7rem;
  margin-bottom: 1.4rem; }
.login-brand .hanko { width: 52px; height: 52px; }
.login-brand .word { font-family: var(--display); font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; font-size: 1.15rem; color: var(--fg); }
.login-card .jp-note { text-align: center; font-family: var(--jp); color: var(--gold-text);
  letter-spacing: .4em; font-size: .8rem; margin-top: 1.4rem; }

/* ── ekran ładowania (veil): pieczęć hanko, pojawia się dopiero po ~300 ms ─────── */
#veil { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
#veil.show { opacity: 1; pointer-events: auto; }
#veil .hanko { width: 64px; height: 64px; animation: veil-pulse 1.2s ease-in-out infinite; }
@keyframes veil-pulse {
  0%, 100% { transform: scale(.96); opacity: .85; }
  50% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #veil .hanko { animation: none; } }

/* icon chips + avatars (visual v3) */
.ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ico svg { width: 18px; height: 18px; }
.ico.sm { width: 28px; height: 28px; border-radius: 8px; }
.ico.sm svg { width: 15px; height: 15px; }
.t-indigo { background: var(--primary-soft); color: var(--primary); }
.t-green  { background: var(--ok-bg); color: var(--ok-fg); }
.t-amber  { background: var(--warn-bg); color: var(--warn-fg); }
.t-blue   { background: var(--info-bg); color: var(--info-fg); }
.t-rose   { background: var(--err-bg); color: var(--err-fg); }
.t-slate  { background: var(--neutral-bg); color: var(--neutral-fg); }
.card { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
.card:hover { box-shadow: var(--shadow-md), 0 12px 34px -18px var(--glow); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: .8rem; color: #fff; flex: none; letter-spacing: .02em; }
.av-0 { background: #C22F2A; } .av-1 { background: #0D9488; } .av-2 { background: #B9973E; }
.av-3 { background: #DB2777; } .av-4 { background: #2563EB; } .av-5 { background: #16A34A; }

/* recommendations hero (Blok A-3) */
.rec-hero { background: linear-gradient(180deg, var(--hero-from) 0%, var(--surface) 44%);
  border: 1px solid var(--hero-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), 0 14px 44px -20px var(--glow);
  padding: 1.1rem 1.25rem; margin-top: 1.25rem; }
.rec-hero > header { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.rec-hero h2 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 0; }
.rec-hero .count { font-family: var(--mono); font-weight: 600; font-size: .8rem; color: var(--fg-muted);
  background: var(--neutral-bg); border-radius: 999px; padding: .1rem .55rem; }
.rec-hero > header form { margin-left: auto; }
.rec-list { list-style: none; margin: .4rem 0 0; padding: 0; }
.rec-row { display: flex; align-items: center; gap: .8rem; padding: .7rem .1rem;
  border-bottom: 1px solid var(--border); font-size: .88rem; flex-wrap: wrap; }
.rec-row:last-child { border-bottom: 0; }
.rec-row .who { font-weight: 600; color: var(--fg); white-space: nowrap; }
.rec-row .who:hover { color: var(--primary); text-decoration: none; }
.rec-row .why { color: var(--fg-body); flex: 1; min-width: 220px; }
.rec-row .row-actions { margin-left: auto; }
.rec-empty { color: var(--fg-subtle); font-size: .88rem; padding: .9rem 0 .4rem;
  text-align: center; }

button.ghost { background: var(--surface); color: var(--fg-muted); border: 1px solid var(--border-2); box-shadow: none; }
button.ghost:hover { background: var(--surface-2); color: var(--fg); }

/* pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.1rem 0 .4rem; font-size: .85rem; color: var(--fg-muted); }
.pager .mono { font-feature-settings: "tnum" 1; }

/* ── mail-effectiveness chart (Blok B data, no chart lib) ───────────────────────── */
.chart-card { background: linear-gradient(180deg, var(--hero-from) 0%, var(--surface) 34%);
  border: 1px solid var(--hero-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), 0 14px 44px -22px var(--glow);
  padding: 1.1rem 1.25rem; margin-top: 1.25rem; }
.chart-card > header { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.chart-card h2 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 0; }
.chart-kpis { display: flex; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.chart-kpis .ck .n { font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--fg); line-height: 1.1; font-feature-settings: "tnum" 1; }
.chart-kpis .ck .l { font-size: .78rem; color: var(--fg-muted); }
.rule-bar { display: grid; grid-template-columns: 190px 1fr 92px; gap: .7rem; align-items: center;
  padding: .4rem 0; font-size: .85rem; }
.rule-bar .name { color: var(--fg-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-bar .track { display: block; height: 10px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.rule-bar .fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); min-width: 2px; }
.rule-bar .val { font-family: var(--mono); font-size: .78rem; color: var(--fg-muted); text-align: right;
  font-feature-settings: "tnum" 1; }

/* ── interactive send calendar (right rail) ────────────────────────────────────── */
.cal-card { background: linear-gradient(180deg, var(--hero-from) 0%, var(--surface) 40%);
  border: 1px solid var(--hero-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), 0 14px 44px -22px var(--glow);
  padding: 1rem 1.1rem; }
.cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.cal-head h2 { font-family: var(--display); font-size: .98rem; font-weight: 600; margin: 0; flex: 1; }
.cal-nav { display: flex; gap: .25rem; }
.cal-nav button { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border-2);
  box-shadow: none; padding: .15rem .55rem; font-size: .85rem; border-radius: 7px; }
.cal-nav button:hover { color: var(--fg); }
.cal-month { text-align: center; font-size: .84rem; font-weight: 600; color: var(--fg);
  margin-bottom: .45rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { text-align: center; font-size: .66rem; color: var(--fg-subtle);
  text-transform: uppercase; padding: .2rem 0; }
.cal-day { position: relative; aspect-ratio: 1; display: grid; place-items: center;
  font-size: .8rem; color: var(--fg-body); border-radius: 8px; cursor: default;
  border: 1px solid transparent; font-feature-settings: "tnum" 1; }
.cal-day.other { color: var(--fg-subtle); opacity: .5; }
.cal-day.today { border-color: var(--primary); font-weight: 700; }
.cal-day.has { cursor: pointer; font-weight: 600; color: var(--fg); }
.cal-day.has::after { content: ""; position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); }
.cal-day.has:hover, .cal-day.sel { background: var(--primary-soft); }
.cal-list { margin-top: .7rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.cal-list .cl-date { font-size: .78rem; font-weight: 600; color: var(--fg-muted); margin-bottom: .35rem; }
.cal-item { display: flex; gap: .55rem; align-items: baseline; padding: .3rem 0; font-size: .84rem; }
.cal-item .t { font-family: var(--mono); font-size: .76rem; color: var(--fg-muted); flex: none; }
.cal-item a { color: var(--fg); font-weight: 500; }
.cal-empty { font-size: .82rem; color: var(--fg-subtle); padding: .25rem 0; text-align: center; }

@media (max-width: 960px) {
  .layout { flex-direction: column; }
  /* Górny pasek: marka + hamburger. Menu (wszystkie pozycje, z etykietami) rozwija
     się pod paskiem; motyw/tenant/wyloguj lądują na jego dole — nie zjadają paska. */
  .sidebar { width: 100%; height: auto; position: sticky; top: 0; z-index: 60;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: .5rem .8rem; gap: 0; }
  .brand { padding: .2rem .4rem; flex: 1; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--side-border); border-radius: 10px;
    color: var(--side-fg-hi); box-shadow: none; padding: 0; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle:hover { background: rgba(255,255,255,.06); }
  .sidenav, .side-foot { display: none; }
  .sidebar.open .sidenav { display: flex; flex-direction: column; gap: .2rem;
    flex: 1 0 100%; /* bazowe flex:1 (basis 0) wciskało menu OBOK marki */
    width: 100%; padding-top: .7rem; }
  .sidebar.open .sidenav a { padding: .7rem .6rem; font-size: .98rem; }
  .sidebar.open .side-foot { display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: .5rem; flex: 1 0 100%; width: 100%;
    border-top: 1px solid var(--side-border); margin-top: .6rem; padding-top: .7rem; }
  .sidebar.open .theme-toggle { width: auto; }
  .sidebar.open .tenant-chip { flex: 1; text-align: right; }
  .sidebar.open .logout { margin-left: auto; }
  .sidebar.open .logout button { width: auto; padding: .45rem .8rem; font-size: .85rem; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-rail { position: static; }
  .work-cards { grid-template-columns: 1fr; }
  main { margin: 1.25rem auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }