/* Style CRM BACh — kolory marki: #1D67CD, #3FB1B5, #D81E5B. */

:root {
  --granat: #1D67CD;
  --granat-ciemny: #1550A3;
  --turkus: #3FB1B5;
  --malina: #D81E5B;
  /* Tło jest wyraźnie ciemniejsze od paneli. Przy niemal białym tle biała karta zlewała się
     z podkładem i cały ekran wyglądał jak jedna płaszczyzna bez hierarchii. */
  --tlo: #DCE4EF;
  --tlo-ciemniejsze: #CBD6E5;
  --panel: #FFFFFF;
  --tekst: #16202B;
  --tekst-slaby: #55657A;
  --ramka: #B3C2D6;
  --ramka-mocna: #8D9DB3;
  --sukces: #15803D;
  --ostrzezenie: #B45309;
  --cien: 0 2px 6px rgba(15, 23, 42, .10), 0 1px 2px rgba(15, 23, 42, .06);
  --cien-duzy: 0 24px 60px rgba(15, 23, 42, .32);
  --zaokraglenie: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--tekst);
  background: var(--tlo);
}

h1, h2, h3 { margin: 0 0 4px; font-weight: 700; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

a { color: var(--granat); }

/* ============ Logowanie ============ */
.ekran-logowania {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--granat) 0%, var(--turkus) 100%);
  padding: 24px;
}

.karta-logowania {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--cien-duzy);
  padding: 32px;
}

.karta-logowania img { display: block; width: 190px; margin: 0 auto 24px; }

/* ============ Układ aplikacji ============ */
.aplikacja { display: flex; min-height: 100vh; }

.pasek-boczny {
  width: 278px;
  flex-shrink: 0;
  background: var(--granat);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Logotyp jest przezroczystym PNG-iem — tłem jest firmowy niebieski paska bocznego. */
.pasek-boczny__logo { padding: 22px 18px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.pasek-boczny__logo img { width: 100%; max-width: 218px; display: block; }

.menu { flex: 1; overflow-y: auto; padding: 12px 8px; }

.menu__pozycja {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu__pozycja:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.menu__pozycja--aktywna { background: #fff; color: var(--granat); font-weight: 600; }
.menu__ikona { font-size: 17px; line-height: 1; }
.menu__licznik {
  margin-left: auto;
  background: var(--malina);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}
.menu__pozycja--aktywna .menu__licznik { background: var(--malina); }

.pasek-boczny__stopka { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12px; }
.pasek-boczny__uzytkownik { color: #fff; font-weight: 600; margin-bottom: 2px; }
.pasek-boczny__rola { color: rgba(255, 255, 255, .7); margin-bottom: 10px; }

.tresc { flex: 1; min-width: 0; padding: 20px 24px 48px; }

.naglowek-widoku {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.naglowek-widoku p { margin: 0; color: var(--tekst-slaby); }

/* ============ Elementy ============ */
.panel {
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien);
  padding: 16px;
  margin-bottom: 16px;
}

/* Nagłówek panelu na własnym tle i z linią pod spodem: bez tego tytuł zlewał się
   z pierwszym wierszem tabeli i nie było widać, gdzie kończy się opis, a zaczynają dane. */
.panel__naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -16px -16px 14px;
  padding: 12px 16px;
  background: var(--granat);
  color: #fff;
  border-radius: var(--zaokraglenie) var(--zaokraglenie) 0 0;
}
.panel__naglowek h2 { font-size: 15px; font-weight: 700; letter-spacing: .2px; color: #fff; }
.panel__naglowek-opis { font-size: 12.5px; line-height: 1.45; opacity: .92; margin-top: 3px; max-width: 78ch; }
.panel__naglowek .przycisk--neutralny { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); }
.panel__naglowek .przycisk--neutralny:hover:not(:disabled) { background: rgba(255, 255, 255, .3); }
.panel__naglowek .przycisk { background: #fff; color: var(--tekst); border-color: #fff; }
.panel__naglowek .przycisk:hover:not(:disabled) { background: #F1F5F9; border-color: #F1F5F9; }

.przycisk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--granat);
  border-radius: 8px;
  background: var(--granat);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.przycisk:hover { background: var(--granat-ciemny); border-color: var(--granat-ciemny); }
.przycisk:disabled { opacity: .5; cursor: not-allowed; }
.przycisk--dodatkowy { background: #fff; color: var(--granat); }
.przycisk--dodatkowy:hover { background: #EEF4FD; }
.przycisk--neutralny { background: #fff; color: var(--tekst); border-color: var(--ramka); }
.przycisk--neutralny:hover { background: #F1F5F9; }
.przycisk--niebezpieczny { background: var(--malina); border-color: var(--malina); }
.przycisk--niebezpieczny:hover { background: #B41649; border-color: #B41649; }
.przycisk--maly { padding: 5px 10px; font-size: 12.5px; }

.pole { margin-bottom: 14px; }
.pole label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.pole__podpowiedz { font-weight: 400; color: var(--tekst-slaby); font-size: 12px; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ramka);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--tekst);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(29, 103, 205, .32);
  border-color: var(--granat);
}
textarea { min-height: 84px; resize: vertical; }

.siatka { display: grid; gap: 14px; }
.siatka--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.siatka--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.pasek-narzedzi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pasek-narzedzi input[type="search"] { max-width: 320px; }
.pasek-narzedzi select { width: auto; min-width: 150px; }

/* ============ Kafelki ============ */
.kafelek {
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-left: 5px solid var(--granat);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien);
  padding: 14px 16px;
}
.kafelek--turkus { border-left-color: var(--turkus); }
.kafelek--malina { border-left-color: var(--malina); }
.kafelek--ostrzezenie { border-left-color: var(--ostrzezenie); }
.kafelek__etykieta { color: var(--tekst-slaby); font-size: 12.5px; margin-bottom: 4px; }
.kafelek__wartosc { font-size: 25px; font-weight: 700; line-height: 1.15; }
.kafelek__opis { color: var(--tekst-slaby); font-size: 12px; margin-top: 3px; }

/* ============ Tabele ============ */
.tabela-otoczka { overflow-x: auto; }

table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabela th {
  text-align: left;
  padding: 10px;
  background: #EDF2F8;
  border-bottom: 2px solid var(--ramka-mocna);
  color: #3D4B5C;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
table.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--ramka); vertical-align: top; }

/* Wiersze parzyste odrobinę przygaszone, a najechany wyraźnie niebieski: przy tabeli
   na dwadzieścia pozycji oko gubiło wiersz w połowie szerokości ekranu. */
table.tabela tbody tr:nth-child(even) { background: #F7FAFD; }
table.tabela tbody tr:hover { background: #DEEAFA; }
table.tabela .liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tabela th.sortowalna { cursor: pointer; }
table.tabela th.sortowalna:hover { color: var(--granat); }

.pusto { padding: 32px 16px; text-align: center; color: var(--tekst-slaby); }

/* ============ Zakładki ============ */
/* Zakładka aktywna jest wypełniona firmowym niebieskim — ta sama zasada co w menu
   bocznym: aktywny element ma maksymalny kontrast wobec swojego otoczenia. W menu
   na niebieskim tle biały, w treści na jasnym tle niebieski. */
.zakladki { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 0; }

.zakladki__pozycja {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--ramka);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #D4DDEA;
  color: #3F4E60;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.zakladki__pozycja:hover { background: #C3D0E2; color: var(--tekst); }

.zakladki__pozycja--aktywna {
  background: var(--granat);
  border-color: var(--granat);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(29, 103, 205, .28);
}
.zakladki__pozycja--aktywna:hover { background: var(--granat-ciemny); border-color: var(--granat-ciemny); color: #fff; }

.zakladki__licznik {
  background: rgba(27, 36, 48, .1);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}
.zakladki__pozycja--aktywna .zakladki__licznik { background: rgba(255, 255, 255, .28); color: #fff; }

/* Panel pod paskiem zakładek domyka je wizualnie w jedną całość. */
.zakladki + .panel { border-top-left-radius: 0; }

/* Drugi poziom zakładek (konta w „Tabelach kont") — węższy, oddzielony od poziomu
   głównego, żeby przy kilkunastu rachunkach nie konkurował z nim o uwagę. */
/* Zakładki da się przestawiać myszą. Kursor „chwytania" jest jedyną podpowiedzią, że tak
   można — pasek ma zostać paskiem zakładek, a nie listą z uchwytami do przeciągania. */
.zakladki__pozycja[draggable="true"] { cursor: grab; }
.zakladki__pozycja[draggable="true"]:active { cursor: grabbing; }

/* Przenoszona zakładka zostaje widoczna na swoim nowym miejscu, tylko przygaszona —
   dzięki temu widać, gdzie wyląduje, zanim puści się przycisk myszy. */
.zakladki__pozycja--przenoszona { opacity: .45; }

.zakladki__przywroc {
  align-self: center;
  margin-left: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-slaby);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.zakladki__przywroc:hover { background: #C3D0E2; color: var(--tekst); }

.zakladki--drugi-poziom { margin-top: 14px; gap: 3px; }
.zakladki--drugi-poziom .zakladki__pozycja { padding: 6px 11px; font-size: 13px; border-radius: 7px 7px 0 0; }

/* ============ Tabela darowizn ============ */
/* Jeden kolor dla wszystkich pasków w programie. Wcześniej każdy moduł miał własny —
   pomarańczowy przy darowiznach do opisania, kolor konta przy tabeli konta — i ekran
   wyglądał jak zbiór różnych programów. Kolor konta został tam, gdzie niesie informację:
   jako kropka przy nazwie. */
.tabela-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--granat);
  color: #fff;
}
.tabela-naglowek__tytul { font-weight: 700; font-size: 15px; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.tabela-naglowek__opis { font-size: 12.5px; line-height: 1.45; opacity: .92; margin-top: 3px; max-width: 78ch; }
.tabela-naglowek .przycisk--neutralny { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tabela-naglowek .przycisk--neutralny:hover:not(:disabled) { background: rgba(255, 255, 255, .3); }
.tabela-naglowek .przycisk { background: #fff; color: var(--tekst); border-color: #fff; }
.tabela-naglowek .przycisk:hover:not(:disabled) { background: #F1F5F9; border-color: #F1F5F9; }

/* Wyszukiwarka wewnątrz tabeli — między paskiem zakładek a wierszami. */
.pasek-wyszukiwania {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #F1F5F9;
  border-bottom: 1px solid var(--ramka);
}
.pasek-wyszukiwania input[type="search"] { max-width: 340px; }
.pasek-wyszukiwania input[type="date"] { width: auto; }

.tabela-podsumowanie {
  padding: 9px 16px;
  border-bottom: 1px solid var(--ramka);
  background: #EDF2F8;
  color: var(--tekst-slaby);
  font-size: 13px;
}

.tabela-przewijana { max-height: 62vh; overflow-y: auto; }
.tabela-przewijana thead th { position: sticky; top: 0; z-index: 2; background: #fff; }

table.tabela-darowizn td { padding: 4px 8px; vertical-align: middle; }
table.tabela-darowizn th { padding: 8px; }

/* Pola edytowalne muszą wyglądać na edytowalne, zanim użytkownik na nie najedzie —
   przerywana linia u dołu jest dyskretna, ale od razu widoczna w całej tabeli. */
.komorka-edycja {
  width: 100%;
  min-width: 118px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-bottom: 1px dashed #C2CCD8;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: text;
}
.komorka-edycja:hover { border-color: var(--ramka); border-bottom-color: var(--granat); background: #fff; }
.komorka-edycja:focus { border-color: var(--granat); background: #fff; outline: 2px solid rgba(29, 103, 205, .25); }
.komorka-edycja--zmieniona { background: #FEF6E0; border-color: var(--ostrzezenie); }
.komorka-edycja[type="date"] { cursor: pointer; }

.komorka-brak {
  border: 1px dashed var(--ramka);
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-slaby);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.komorka-brak:hover { border-color: var(--granat); color: var(--granat); background: #EEF4FD; }

.komorka-nastepny { font-weight: 600; white-space: nowrap; }
.komorka-nastepny--zalegly { color: var(--malina); }
/* Data następnego kontaktu wpisana z ręki — wyróżniona, bo tej program nie liczy sam. */
.komorka-nastepny--reczny { background: #fff7ed; border-color: #fdba74; }

.przycisk-ikona {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ramka);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--tekst);
}
.przycisk-ikona:hover:not(:disabled) { background: #F1F5F9; }
.przycisk-ikona:disabled { opacity: .35; cursor: not-allowed; }
.przycisk-ikona--granat { border-color: var(--granat); color: var(--granat); }
.przycisk-ikona--granat:hover:not(:disabled) { background: #EEF4FD; }
.przycisk-ikona--malina { border-color: var(--malina); color: var(--malina); }
.przycisk-ikona--malina:hover:not(:disabled) { background: #FCE6ED; }

/* ============ Etykiety ============ */
.etykieta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.etykieta--granat { background: #E5EEFB; color: var(--granat); }
.etykieta--turkus { background: #E0F4F5; color: #24777A; }
.etykieta--malina { background: #FCE6ED; color: var(--malina); }
.etykieta--sukces { background: #DCFCE7; color: #15803D; }
.etykieta--ostrzezenie { background: #FEF3C7; color: #92400E; }
.etykieta--szara { background: #EEF2F6; color: var(--tekst-slaby); }

/* ============ Notatki z kontaktu ============ */
.notatka {
  border: 1px solid var(--ramka);
  border-left: 3px solid var(--turkus);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 9px;
  background: #FBFCFE;
}
.notatka__naglowek { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.notatka__data { font-weight: 700; color: var(--granat); }
.notatka__tresc { white-space: pre-wrap; line-height: 1.5; }

/* ============ Przypomnienia ============ */
.przypomnienie {
  border: 1px solid var(--ramka);
  border-left: 4px solid var(--granat);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #FBFCFE;
}
.przypomnienie--zalegle { border-left-color: var(--malina); background: #FEF7F9; }
.przypomnienie__naglowek { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.przypomnienie__rodzaj { font-weight: 700; color: var(--granat); }
.przypomnienie__data { color: var(--tekst-slaby); font-size: 12.5px; }
.przypomnienie__data--zalegla { color: var(--malina); font-weight: 700; }
.przypomnienie__tresc { white-space: pre-wrap; line-height: 1.5; }

.przycisk-tekstowy {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--granat);
  text-decoration: underline;
  cursor: pointer;
}
.przycisk-tekstowy:hover { color: var(--granat-ciemny); }

/* ============ Okno modalne ============ */
.przeslona {
  position: fixed;
  inset: 0;
  background: rgba(10, 17, 30, .68);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}

.okno {
  background: var(--panel);
  border: 1px solid var(--ramka-mocna);
  border-radius: 14px;
  box-shadow: var(--cien-duzy);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
.okno--szerokie { max-width: 900px; }
.okno__naglowek {
  padding: 16px 20px;
  background: #F2F6FB;
  border-bottom: 1px solid var(--ramka);
  border-radius: 13px 13px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.okno__tresc { padding: 20px; overflow-y: auto; }
.okno__stopka {
  padding: 14px 20px;
  background: #F2F6FB;
  border-top: 1px solid var(--ramka);
  border-radius: 0 0 13px 13px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.okno__zamknij { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tekst-slaby); }

/* ============ Komunikaty ============ */
.komunikat {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-weight: 500;
}
.komunikat--blad { background: #FCE6ED; color: #9F1239; border: 1px solid #F5B9CC; }
.komunikat--sukces { background: #DCFCE7; color: #14532D; border: 1px solid #A7F3C4; }
.komunikat--info { background: #E5EEFB; color: #17427F; border: 1px solid #BBD3F5; }

.powiadomienia { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.powiadomienie {
  background: var(--tekst);
  color: #fff;
  padding: 11px 16px;
  border-radius: 8px;
  box-shadow: var(--cien-duzy);
  max-width: 380px;
}
.powiadomienie--blad { background: var(--malina); }
.powiadomienie--sukces { background: var(--sukces); }

/* ============ Kalendarz ============ */
.kalendarz { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ramka); border: 1px solid var(--ramka); border-radius: var(--zaokraglenie); overflow: hidden; }
.kalendarz__nazwa-dnia { background: #EDF2F8; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; }
.kalendarz__dzien { background: #fff; min-height: 104px; padding: 6px; cursor: pointer; }
.kalendarz__dzien:hover { background: #DEEAFA; }
.kalendarz__dzien--obcy { background: #F1F4F8; color: #9FAAB8; }
.kalendarz__dzien--dzis { box-shadow: inset 0 0 0 2px var(--granat); }
.kalendarz__numer { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.kalendarz__wydarzenie {
  font-size: 11.5px;
  padding: 2px 6px;
  border-radius: 5px;
  margin-bottom: 2px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inicjały osoby, która założyła wydarzenie. Półprzezroczyste tło zamiast własnego
   koloru — kafelek ma już kolor kategorii i drugi barwny element robiłby z kalendarza
   mozaikę, w której nie widać, co jest czym. */
.kalendarz__inicjaly {
  display: inline-block;
  background: rgba(255, 255, 255, .28);
  border-radius: 4px;
  padding: 0 4px;
  margin-right: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============ Macierz uprawnień ============ */
.macierz td:first-child, .macierz th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.macierz th:first-child { background: #EDF2F8; }
.macierz input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
.macierz td { text-align: center; }
.macierz td:first-child { text-align: left; font-weight: 600; }

/* ============ Import ============ */
.mapowanie { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mapowanie__pole { display: flex; align-items: center; gap: 8px; }
.mapowanie__pole label { flex: 0 0 150px; font-size: 13px; font-weight: 600; }

.strefa-pliku {
  border: 2px dashed var(--ramka);
  border-radius: var(--zaokraglenie);
  padding: 28px;
  text-align: center;
  color: var(--tekst-slaby);
  cursor: pointer;
  background: #FBFCFE;
}
.strefa-pliku:hover, .strefa-pliku--nad { border-color: var(--granat); background: #EEF4FD; color: var(--granat); }

.podglad-csv { font-size: 12px; }
.podglad-csv td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Edytor treści wiadomości. Pasek przykleja się do góry pola, żeby przy dłuższym liście
   nie trzeba było przewijać w górę po pogrubienie. */
.edytor {
  border: 1px solid var(--ramka);
  border-radius: var(--zaokraglenie);
  background: var(--panel);
  overflow: hidden;
}

.edytor__pasek {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ramka);
  background: var(--tlo);
  position: sticky;
  top: 0;
  z-index: 2;
}

.edytor__guzik {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--tekst);
  cursor: pointer;
}

.edytor__guzik:hover { background: #fff; border-color: var(--ramka); }
.edytor__guzik:active { background: #EEF4FD; border-color: var(--granat); }
.edytor__przerwa { width: 1px; height: 18px; margin: 0 5px; background: var(--ramka); }

.edytor__emotki {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px;
  border-bottom: 1px solid var(--ramka);
  background: var(--tlo);
}

.edytor__emotka {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 17px;
  cursor: pointer;
}

.edytor__emotka:hover { background: #fff; border-color: var(--ramka); }

.edytor__tresc {
  min-height: 240px;
  max-height: 460px;
  overflow-y: auto;
  padding: 14px 16px;
  outline: none;
  line-height: 1.6;
}

.edytor__tresc:focus { box-shadow: inset 0 0 0 2px #EEF4FD; }
.edytor__tresc p { margin: 0 0 10px; }
.edytor__tresc h2 { font-size: 19px; margin: 0 0 10px; }
.edytor__tresc img { max-width: 100%; height: auto; }
.edytor__tresc a { color: var(--granat); }

/* Kolumny opisujące osobę reprezentującą jednostkę. Stonowane tło zamiast ramki czy
   pogrubienia: ma oddzielić dwie grupy danych, a nie krzyczeć, że są ważniejsze. */
table.tabela th.kolumna-osoby { background: #C7DCF4; }
table.tabela td.kolumna-osoby { background: #E2EDFA; }
table.tabela tr:hover td.kolumna-osoby { background: #D3E3F7; }
table.tabela .kolumna-osoby--pierwsza { border-left: 2px solid #9BC1E8; }
table.tabela .kolumna-osoby--ostatnia { border-right: 2px solid #9BC1E8; }

/* Podpowiedzi kontaktów przy łączeniu kart. Lista leży nad formularzem, a nie rozpycha go —
   inaczej pola pod wyszukiwarką skakałyby przy każdej wpisanej literze. */
.podpowiedzi:empty { display: none; }

.podpowiedzi {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien-duzy);
}

.podpowiedzi__pozycja {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--ramka);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.podpowiedzi__pozycja:last-child { border-bottom: 0; }
.podpowiedzi__pozycja:hover, .podpowiedzi__pozycja:focus-visible { background: #EEF4FD; }
.podpowiedzi__pusto { padding: 10px 12px; color: var(--tekst-slaby); }

@media (max-width: 860px) {
  .aplikacja { flex-direction: column; }
  .pasek-boczny { width: 100%; height: auto; position: static; }
  .menu { display: flex; flex-wrap: wrap; }
  .menu__pozycja { width: auto; }
  .tresc { padding: 16px; }
}

/* ---------- Opiekun kontaktu ---------- */

/* Plakietka z inicjałami. Kolor wyliczany z nazwiska w JavaScripcie, więc nowa osoba
   w zespole dostaje własny odcień bez dopisywania czegokolwiek w tym arkuszu. */
.plakietka-opiekuna {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Lista rozwijana leży NA plakietce i jest przezroczysta. Dzięki temu w tabeli widać
   spokojne inicjały, a kliknięcie od razu otwiera wybór — bez dokładania osobnego
   przycisku „zmień", który przy kilkunastu kolumnach nie ma się gdzie zmieścić. */
.komorka-opiekun__pole { position: relative; display: inline-flex; }

select.komorka-opiekun {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* Obramowanie pojawia się dopiero pod kursorem — informacja, że to pole daje się zmienić. */
.komorka-opiekun__pole:hover .plakietka-opiekuna,
select.komorka-opiekun:focus + .plakietka-opiekuna,
.komorka-opiekun__pole:focus-within .plakietka-opiekuna {
  box-shadow: 0 0 0 2px var(--granat);
}

/* Nazwa programu. Litery C, R i M wyróżnione, bo w „ChRyzostoM" siedzi skrót CRM. */
.nazwa-programu {
  font-weight: 700;
  letter-spacing: .5px;
}

.nazwa-programu__skrot {
  color: var(--turkus);
}

.pasek-boczny__nazwa {
  margin-top: 8px;
  text-align: center;
  font-size: 17px;
  color: #fff;
}

.pasek-boczny__nazwa .nazwa-programu__skrot {
  color: var(--turkus);
}

/* ============ Podsumowanie w jednej linii ============ */
/* Zamiast dużych kafelków nad tabelą: liczby jedno po drugim, mniejszą czcionką. */
.podsumowanie-linia {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
  padding: 9px 14px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--ramka);
  border-radius: 8px;
  font-size: 13px;
}
.podsumowanie-linia__etykieta { color: var(--tekst-slaby); margin-right: 5px; }
.podsumowanie-linia__pozycja--uwaga strong { color: var(--malina); }

/* Numer wewnętrzny zawsze w jednej linii — łamany w pół przestawał być czytelnym
   identyfikatorem. Miejsce oddaje kolumna sprzedawcy, której nazwy i tak się zawijają. */
.komorka-numer { white-space: nowrap; font-weight: 600; }
.komorka-sprzedawca { max-width: 220px; }

/* ── Oś relacji na karcie kontaktu (pkt 8) ──
   Pionowa linia z kropkami: zdarzenia czyta się z góry na dół, od najnowszego.
   Linia biegnie za znacznikami, dlatego znacznik ma własne tło — inaczej prześwitywałaby
   przez ikonę. */
.os-relacji { position: relative; padding-left: 6px; }
.os-relacji::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ramka);
}
.os-relacji__pozycja { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.os-relacji__znacznik {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ramka);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.os-relacji__tresc { min-width: 0; padding-top: 4px; }
.os-relacji__naglowek { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.os-relacji__data { color: var(--tekst-slaby); font-size: 12.5px; white-space: nowrap; min-width: 82px; }
/* Przerwa w kontakcie jest przy czytaniu relacji tak samo ważna jak zdarzenia. */
.os-relacji__przerwa {
  margin: 4px 0 4px 54px;
  color: var(--tekst-slaby);
  font-size: 12.5px;
  font-style: italic;
}

/* Wiersz „etykieta — wartość" na kartach. Etykiety mają wspólną szerokość, żeby wartości
   stały w jednej kolumnie: karta z kilkudziesięcioma polami czytana po skosie ma być
   listą, a nie tekstem ciągłym. */
.wiersz-danych { display: flex; gap: 8px; margin-bottom: 4px; align-items: baseline; }
.wiersz-danych__etykieta { min-width: 210px; flex-shrink: 0; color: var(--tekst-slaby); font-size: 12px; }