/* =====================================================================
   LUVARO GROUP - panel wlascicielski. Paleta z CRM Luvaro Stay
   (naglowek luvaro-crm/site/assets/css/app.css): espresso #211d18 niesie
   ciemne powierzchnie, przygaszone zloto #8a6d3b jest akcentem klikalnym
   (bialy napis na nim jest czytelny), zloto witryny #b08d57 drugim
   akcentem, krem #f5efe3 i papier #fbf9f4 buduja tla - "gabinet".

   Kolory spolek (stale, zawsze w tej kolejnosci - kolor idzie za spolka,
   nie za miejscem na liscie):
     p1 Luvaro Stay     zloto        #a07c3f
     p2 Crystal Palace  granat-blekit #3f6fa3
     p3 Scena Wanda     wino         #9b3d56
     p4 wpisy Beaty     szalwia      #5f7355
   Rozna jasnosc i odcien, zeby pary daly sie odroznic takze przy
   zaburzeniach widzenia barw; tozsamosc i tak niesie legenda i podpis.
   ===================================================================== */
:root {
  --side: #211d18;
  --side-2: #2e2822;
  --side-ink: #f5efe3;
  --side-muted: #a39a8b;
  --accent: #8a6d3b;
  --accent-deep: #6f5730;
  --accent-soft: #f5efe3;
  --gold: #b08d57;
  --bg: #fbf9f4;
  --line: #e8e0d0;
  --line-2: #f3eee4;
  --ink: #1c1a17;

  --p1: #a07c3f; --p1-bg: #f5ecdc; --p1-ink: #6f5226;
  --p2: #3f6fa3; --p2-bg: #e5edf7; --p2-ink: #284d78;
  --p3: #9b3d56; --p3-bg: #f7e6eb; --p3-ink: #74263b;
  --p4: #5f7355; --p4-bg: #e8efe4; --p4-ink: #3f5236;
}

.side-brand { color: var(--side-ink); padding: 28px 26px 18px; }
.side-foot em { color: var(--gold); }

.pill-p1 { background: var(--p1-bg); color: var(--p1-ink); }
.pill-p2 { background: var(--p2-bg); color: var(--p2-ink); }
.pill-p3 { background: var(--p3-bg); color: var(--p3-ink); }
.pill-p4 { background: var(--p4-bg); color: var(--p4-ink); }
.ev-p4 { border-color: var(--p4); background: var(--p4-bg); }

/* ---------- Kolory spolek ------------------------------------------- */
.fill-p1 { fill: var(--p1); } .fill-p2 { fill: var(--p2); } .fill-p3 { fill: var(--p3); } .fill-p4 { fill: var(--p4); }
.stroke-p1 { stroke: var(--p1); } .stroke-p2 { stroke: var(--p2); } .stroke-p3 { stroke: var(--p3); } .stroke-p4 { stroke: var(--p4); }
.src-bg-p1 { background: var(--p1); } .src-bg-p2 { background: var(--p2); } .src-bg-p3 { background: var(--p3); } .src-bg-p4 { background: var(--p4); }
.src-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.src-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--p4); flex: none; }
.src-tag.src-p1::before { background: var(--p1); } .src-tag.src-p2::before { background: var(--p2); } .src-tag.src-p3::before { background: var(--p3); }

.co-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #fff; font: 600 15px var(--display);
  letter-spacing: .04em; flex: none; }
.co-mark.lg { width: 56px; height: 56px; font-size: 20px; border-radius: 12px; }

/* ---------- Naglowek pulpitu ---------------------------------------- */
.hello h1 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: 0; }
.hello p { color: var(--muted); }
.sync-info { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.4; }

/* ---------- Kafle spolek ------------------------------------------- */
.co-tile { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.co-tile::before { content: ""; height: 4px; background: var(--tone, var(--gold)); }
.co-tile.t-p1 { --tone: var(--p1); } .co-tile.t-p2 { --tone: var(--p2); } .co-tile.t-p3 { --tone: var(--p3); }
.co-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px 10px; }
.co-head h2 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0; }
.co-head h2 a { color: var(--ink); }
.co-head small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.co-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); }
.co-kpi { background: var(--card); padding: 10px 18px; min-width: 0; }
.co-kpi small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; min-height: 2.6em; }
.co-kpi strong { display: block; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.co-kpi.tone-warn strong { color: var(--warn); } .co-kpi.tone-err strong { color: var(--err); } .co-kpi.tone-ok strong { color: var(--ok); }
.co-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 14px; flex-wrap: wrap; margin-top: auto; }
.co-foot .grow { flex: 1; min-width: 0; }
.co-status { padding: 8px 18px 0; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-spark { padding: 4px 18px 0; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.spark { width: 120px; height: 30px; }
.spark .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Lista uwagi -------------------------------------------- */
.attn li { align-items: flex-start; }
.attn .ico-dot { margin-top: 1px; }
.attn .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.ico-dot.muted { background: var(--line-2); color: var(--muted); }
.ico-dot.gold { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- Wykresy ------------------------------------------------ */
.chart { width: 100%; height: auto; display: block; font-family: var(--sans); }
.chart .gl { stroke: var(--line-2); stroke-width: 1; }
.chart .base { stroke: #b9ae9b; stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .dl { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--card); stroke-width: 1.5; }
.chart .hit { fill: transparent; }
.chart g:hover .dot { r: 5; }
.chart rect { stroke: var(--card); stroke-width: 1; }
.chart rect:hover { opacity: .85; }
.chart-legend { margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; }
.share-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--card); }
.share-bar span { display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; min-width: 2px; }
.share-legend { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; }
.share-legend div { display: grid; grid-template-columns: 14px 1fr auto 56px; gap: 8px; align-items: center; }
.share-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.share-legend small { color: var(--muted); text-align: right; }
.delta { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.delta.up { color: var(--ok); } .delta.down { color: var(--err); }
.delta.neutral { color: var(--muted); }

/* ---------- Notatki ------------------------------------------------ */
.notes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.note { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column;
  gap: 8px; box-shadow: var(--shadow); border-top: 4px solid var(--line); min-width: 0; }
.note h3 { font-size: 14.5px; display: flex; gap: 6px; align-items: flex-start; }
.note h3 a { color: var(--ink); }
.note .body { font-size: 13px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.note .meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.note-gold { border-top-color: var(--gold); background: #fdfaf3; }
.note-sage { border-top-color: #7f9a72; background: #f6f9f3; }
.note-rose { border-top-color: #c27b8c; background: #fcf4f6; }
.note-sky { border-top-color: #6d93bf; background: #f3f7fc; }
.note-sand { border-top-color: #c9ad7f; background: #fbf6ec; }
.note.is-pinned { box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.pin-ico { color: var(--accent); }
.tagline { display: flex; gap: 4px; flex-wrap: wrap; }
.mini-notes { display: grid; gap: 10px; }
.mini-notes .note { padding: 10px 12px; }

/* ---------- Drobne ------------------------------------------------- */
.kv-table td:first-child { color: var(--muted); }
.stat-row { display: flex; gap: 22px; flex-wrap: wrap; }
.stat-row div small { display: block; color: var(--muted); font-size: 12px; }
.stat-row div strong { font-size: 20px; }
.result-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg); font-size: 13px; }
.result-box pre { margin: 8px 0 0; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input { width: auto; padding: 5px 8px; font-size: 12.5px; }
details.more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-deep); }
.tile-empty { padding: 20px 18px; color: var(--muted); font-size: 13px; }
.big-num { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; }

/* ---------- Raport do druku ---------------------------------------- */
.report { max-width: 1000px; margin: 0 auto; }
.report-sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 40px; box-shadow: var(--shadow); }
.report-head { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--side); padding-bottom: 14px; margin-bottom: 18px; }
.report-head h1 { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: 0; }
.report-head .brand-mini { color: var(--side); width: 130px; flex: none; }
.report h2 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: 0; margin: 22px 0 10px; display: flex; gap: 10px; align-items: center; }
.report h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
.report .t { font-size: 12.5px; }
.report-co { break-inside: avoid-page; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 10px; }
.report-comment { background: var(--accent-soft); border-left: 3px solid var(--gold); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; white-space: pre-line; }
.report-foot { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpi-grid > div { border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 10px; }
.kpi-grid small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.kpi-grid strong { font-size: 15px; }
.frozen-badge { display: inline-flex; gap: 6px; align-items: center; background: var(--side); color: var(--side-ink); font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px; }

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body { font-size: 10.5px; }
  .report { max-width: none; }
  .report-sheet { border: 0; box-shadow: none; padding: 0; }
  .report-co { break-inside: auto; }
  .report .card, .report table { break-inside: avoid; }
  .chart { max-height: 190px; }
  .chart rect { stroke: #fff; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  a { color: inherit; text-decoration: none; }
  .pill { border: 1px solid currentColor; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-sheet { padding: 20px 16px; }
  .report-head { flex-direction: column; }
  .hello h1 { font-size: 24px; }
}