/* PRZYCHODY POZA RECEPCJĄ i PRZYCHODY SPOZA CEM (właściciel 2026-08-16: "zrób wizualnie te
   zakładki ładniej graficznie").

   JEDEN UKŁAD DLA OBU. To dwie zakładki o tym samym kształcie danych — nagłówek, okres, kwoty,
   tabela — więc mają wyglądać tak samo. Różni je wyłącznie kolor akcentu, po którym od progu
   widać, w której się jest: niebieski to przychód CEM, zielony to własna działalność.
   Oba z tej samej sprawdzonej palety co wykresy na Dashboardzie. */

.cem-przych{--akcent:#2563eb;padding:20px 24px 32px;display:flex;flex-direction:column;gap:16px}
.cem-przych-spoza{--akcent:#059669}
@media (max-width:760px){.cem-przych{padding:14px;gap:12px}}

/* --- nagłówek: co to jest, w jednym zdaniu --- */
.cem-przych-naglowek{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;background:#fff;border:1px solid #e6ebf2;border-left:4px solid var(--akcent);
  border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cem-przych-naglowek h2{margin:0 0 6px;font-size:20px;color:#0f172a}
.cem-przych-naglowek p{margin:0;font-size:13.5px;color:#7c8898;line-height:1.55;max-width:70ch}
.cem-przych-naglowek .cem-btn{flex:none}

/* --- pasek okresu: przełącznik po lewej, wybrany okres po prawej --- */
.cem-przych-pasek{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cem-przych-okres{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#94a3b8}
.cem-przych .cem-choice-btn.active{background:var(--akcent);border-color:var(--akcent)}

/* --- kafelki z kwotami --- */
.cem-przych-kafelki{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.cem-przych-kafel{background:#fff;border:1px solid #e6ebf2;border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cem-przych-kafel span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#7c8898}
.cem-przych-kafel b{font-size:19px;color:#0f172a;font-variant-numeric:tabular-nums}
/* Ta jedna liczba, po którą się tu przychodzi — dostaje kolor akcentu i grubszą wagę. */
.cem-przych-kafel.glowny{border-color:color-mix(in srgb,var(--akcent) 35%,#e6ebf2)}
.cem-przych-kafel.glowny b{font-size:23px;color:var(--akcent)}
/* Licznik wpisów NIE jest kwotą i nie ma jej udawać. */
.cem-przych-kafel.liczba b{font-size:19px;color:#475569}

/* --- „Skąd" — udziały źródeł, ten sam kształt co paski na Dashboardzie --- */
.cem-przych-zrodla{background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cem-przych-zrodla h3{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#64748b}
.cem-przych-paski{display:flex;flex-direction:column;gap:9px}
.cem-przych-pasek-wiersz{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;
  align-items:center;gap:10px}
.cem-przych-pasek-nazwa{font-size:13.5px;color:#334155;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cem-przych-pasek-tor{background:#f1f5f9;border-radius:5px;height:11px;overflow:hidden}
.cem-przych-pasek-tor i{display:block;height:100%;background:var(--akcent);border-radius:0 5px 5px 0}
.cem-przych-pasek-kwota{font-size:13.5px;color:#0f172a;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cem-przych-pasek-kwota em{font-style:normal;color:#94a3b8;margin-left:6px;font-size:12.5px}

/* --- tabela --- */
.cem-przych-tabela{background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:6px 8px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden}
.cem-przych-tabela table{width:100%}
.cem-przych-tabela th.num,.cem-przych-tabela td.num{text-align:right;font-variant-numeric:tabular-nums}
.cem-przych-pusto{margin:0;padding:28px 16px;text-align:center;color:#94a3b8;font-size:14px}

/* Pakiety — pusta lista ma TŁUMACZYĆ, po co ta zakładka istnieje, a nie mówić „brak" i milczeć.
   To jedyne miejsce, które pilnuje zabiegów opłaconych z góry i jeszcze nieodebranych. */
.cem-pak-pusto{text-align:center;padding:26px 16px}
.cem-pak-pusto strong{display:block;font-size:15px;color:#334155;margin-bottom:6px}
.cem-pak-pusto span{display:block;font-size:13.5px;color:#94a3b8;line-height:1.55;max-width:56ch;margin:0 auto}

/* Pakiety — ten sam układ co pozostałe zakładki przychodowe, własny kolor akcentu.
   Fiolet, bo to nie przychód do policzenia, tylko zobowiązanie do odebrania — i ma się nie mylić
   z niebieskim (przychód CEM) ani zielonym (własna działalność). */
.cem-przych-pakiety{--akcent:#7c3aed}
/* Jedno zdanie wyjaśnienia zamiast nagłówka z nazwą zakładki: nazwa stoi już w pasku u góry. */
.cem-przych-nota{margin:-4px 0 0;font-size:13px;color:#94a3b8;line-height:1.55;max-width:80ch}
.cem-przych-pasek .cem-btn{margin-left:auto}
.cem-pak-historia{padding:16px 18px}
.cem-pak-historia h3{margin:0 0 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.cem-pak-historia > p{margin:0 0 12px;font-size:13px;color:#94a3b8}

/* Analizy — uwaga o brakujących numerach telefonu na liście „kto nie wrócił". */
.cem-analizy-uwaga{margin:10px 0 0;padding:10px 12px;background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;font-size:13px;color:#78350f;line-height:1.55}
/* Odhaczony wiersz gaśnie, ale NIE znika — telefon mógł się nie udać i trzeba go powtórzyć. */
tr.jest-odhaczony{opacity:.45}
tr.jest-odhaczony td{text-decoration:line-through}
tr.jest-odhaczony td:first-child{text-decoration:none}