/* =========================================================================
   Active-Fizjo — system wizualny panelu rezerwacji
   Marka: granat #1c1e40 (primary) + fiolet #a85f9c (accent).
   Jedno źródło prawdy o wyglądzie — wszystkie ekrany dziedziczą stąd.
   ========================================================================= */

:root {
  /* --- Marka --- */
  --granat:      #1c1e40;   /* primary: nagłówki, panele, akcje główne */
  --granat-2:    #2a2d5c;   /* rozjaśniony granat (hover na granacie, gradient) */
  --fiolet:      #a85f9c;   /* accent marki: aktywne stany, wyróżnienia, wypełnienia */
  --fiolet-2:    #8f4d84;   /* ciemniejszy fiolet: tekst/linki na białym (kontrast AA) */
  --mauve-soft:  #f3eaf1;   /* delikatne tło akcentu (dzisiaj w kalendarzu, hover) */

  /* --- Neutralne (tekst zawsze granatowy, nigdy czarny) --- */
  --ink:    #1e2038;   /* tekst główny */
  --ink-2:  #565d78;   /* tekst drugorzędny */
  --ink-3:  #8890a5;   /* etykiety, wygaszone */
  --tlo:    #f5f4f8;   /* tło strony (lekko ciepłe) */
  --paper:  #ffffff;   /* karty / modale */
  --linia:  #e7e5ef;   /* obramowania */
  --linia-2:#f0eef5;   /* delikatny separator */

  /* --- Semantyczne (statusy) --- */
  --ok:     #1c8a4c;  --ok-bg:    #e6f6ec;
  --uwaga:  #b26a00;  --uwaga-bg: #fff3e0;
  --blad:   #c0392b;  --blad-bg:  #fdeaea;

  /* --- Kształt i głębia --- */
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --cien-1: 0 1px 2px rgba(28,30,64,.05), 0 2px 8px rgba(28,30,64,.05);
  --cien-2: 0 2px 6px rgba(28,30,64,.06), 0 10px 30px rgba(28,30,64,.08);
  --cien-modal: 0 24px 70px rgba(20,22,45,.28);
  --ring: 0 0 0 3px rgba(168,95,156,.28);   /* focus-ring fioletowy */
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--tlo);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Dostępność: widoczny focus tylko przy nawigacji klawiaturą */
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }

/* =========================== Nagłówek + nawigacja =========================== */
header.top {
  background:linear-gradient(180deg,var(--granat-2),var(--granat));
  color:#fff; padding:0 20px; display:flex; align-items:center; gap:20px;
  height:58px; box-shadow:0 1px 0 rgba(255,255,255,.04), 0 2px 14px rgba(20,22,45,.16);
  position:sticky; top:0; z-index:40;
}
/* Logo — monogram AF (placeholder do czasu wgrania prawdziwego znaku) */
header.top .logo {
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--fiolet),#c88bbe);
  box-shadow:0 2px 8px rgba(168,95,156,.4), inset 0 1px 0 rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
header.top .logo::after {
  content:"AF"; font-size:12px; font-weight:800; letter-spacing:.02em; color:#fff;
}
header.top .logo img { width:100%; height:100%; object-fit:contain; display:block; }
header.top .logo:has(img)::after { content:none; }
header.top .marka { font-size:15px; font-weight:700; letter-spacing:.01em; }
header.top nav { display:flex; gap:3px; margin-left:10px; }
header.top nav a {
  color:#c9cce0; text-decoration:none; font-size:13.5px; font-weight:600;
  padding:8px 13px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:7px;
  transition:background .15s, color .15s;
}
header.top nav a svg { width:16px; height:16px; opacity:.85; }
header.top nav a:hover { background:rgba(255,255,255,.10); color:#fff; }
header.top nav a.aktywny { background:var(--fiolet); color:#fff; box-shadow:0 2px 10px rgba(168,95,156,.4); }
header.top nav a.aktywny svg { opacity:1; }
header.top .spacer { margin-left:auto; }
#btn-wyloguj { margin-left:auto; }

/* =============================== Przyciski =============================== */
.btn {
  border:0; border-radius:var(--r-sm); padding:10px 15px; font-size:14px; cursor:pointer;
  font-weight:600; font-family:inherit; line-height:1.1; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; }
.btn-primary { background:var(--granat); color:#fff; box-shadow:0 2px 10px rgba(28,30,64,.18); }
.btn-primary:hover { background:var(--granat-2); }
.btn-accent { background:var(--fiolet); color:#fff; box-shadow:0 2px 10px rgba(168,95,156,.28); }
.btn-accent:hover { background:var(--fiolet-2); }
.btn-ghost { background:transparent; color:var(--ink-2); }
.btn-ghost:hover { background:var(--tlo); color:var(--ink); }
.btn-mini { padding:6px 11px; font-size:12px; }

/* =============================== Układ =============================== */
.wrap { display:flex; gap:16px; padding:18px; align-items:flex-start; max-width:1280px; margin:0 auto; }
.panel { background:var(--paper); border:1px solid var(--linia); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--cien-1); }
.filtry { width:236px; flex:0 0 auto; }
.filtry h2 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:0 0 10px; font-weight:700; }
.filtry label { display:flex; align-items:center; gap:9px; padding:7px 8px; font-size:14px; cursor:pointer; border-radius:var(--r-sm); transition:background .12s; }
.filtry label:hover { background:var(--tlo); }
.kropka { width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.cal { flex:1 1 auto; min-width:0; }
.podpowiedz { font-size:12px; color:var(--ink-3); margin-top:12px; line-height:1.5; }

/* ============================= FullCalendar ============================= */
#kalendarz { --fc-border-color:var(--linia); --fc-today-bg-color:var(--mauve-soft); --fc-now-indicator-color:var(--fiolet); font-size:13px; }
.fc .fc-toolbar-title { font-size:19px; color:var(--granat); font-weight:700; letter-spacing:-.01em; }
.fc .fc-col-header-cell-cushion { color:var(--ink-2); font-weight:600; padding:8px 4px; }
.fc .fc-button-primary { background:var(--granat); border-color:var(--granat); font-weight:600; box-shadow:none; }
.fc .fc-button-primary:hover { background:var(--granat-2); border-color:var(--granat-2); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background:var(--fiolet); border-color:var(--fiolet); }
.fc .fc-button-primary:focus, .fc .fc-button-primary:focus-visible { box-shadow:var(--ring); }
.fc-event { cursor:pointer; border-radius:6px; border:0; box-shadow:0 1px 3px rgba(28,30,64,.14); }
.fc .ev { line-height:1.25; overflow:hidden; padding:2px 4px; }
.fc .ev-czas { font-size:10px; opacity:.85; }
.fc .ev-tyt { font-weight:600; font-size:11px; white-space:normal; }
.fc .ev-ter { font-size:10px; opacity:.95; font-style:italic; margin-top:1px; }
#kalendarz.bez-terapeuty .ev-ter { display:none; }

/* ============================== Modale ============================== */
.maska { position:fixed; inset:0; background:rgba(20,22,45,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:50; padding:16px; animation:maska-in .16s ease; }
.maska.on { display:flex; }
@keyframes maska-in { from { opacity:0; } to { opacity:1; } }
.modal { background:var(--paper); border-radius:var(--r-lg); padding:24px; width:380px; max-width:100%; box-shadow:var(--cien-modal); max-height:90vh; overflow:auto; position:relative; animation:modal-in .18s cubic-bezier(.2,.8,.3,1); }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
.modal-x { position:absolute; top:14px; right:14px; z-index:2; border:0; background:transparent; font-size:19px; line-height:1; color:var(--ink-3); cursor:pointer; width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s; }
.modal-x:hover { background:var(--tlo); color:var(--granat); }
.modal h3 { margin:0 0 18px; color:var(--granat); font-size:18px; font-weight:700; letter-spacing:-.01em; padding-right:28px; }
.pole { margin-bottom:13px; }
.pole label { display:block; font-size:12px; color:var(--ink-2); margin-bottom:5px; font-weight:600; }
.pole input, .pole select, .pole textarea {
  width:100%; padding:10px 11px; border:1px solid var(--linia); border-radius:var(--r-sm);
  font-size:14px; background:var(--paper); font-family:inherit; color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
}
.pole input:focus, .pole select:focus, .pole textarea:focus { outline:none; border-color:var(--fiolet); box-shadow:var(--ring); }
.pole input::placeholder, .pole textarea::placeholder { color:#aab0c2; }
.pole.dwa { display:flex; gap:12px; } .pole.dwa > div { flex:1; }
.pole input[type=checkbox], .pole input[type=radio] { width:auto; flex:0 0 auto; accent-color:var(--fiolet); }
.akcje { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.komunikat { font-size:13px; color:var(--blad); min-height:16px; margin-top:2px; }

/* Formularz „Nowa wizyta" — stały rozmiar (nie skacze), dwie kolumny, przewijanie wewnątrz */
.wizyta-modal { width:600px; height:600px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.wizyta-modal > h3, .wizyta-modal > .komunikat, .wizyta-modal > .akcje { flex:0 0 auto; }
.wizyta-cols { display:flex; gap:20px; align-items:flex-start; flex:1 1 auto; overflow:auto; padding-right:2px; }
.wizyta-cols .col-l { flex:1 1 0; min-width:0; }
.wizyta-cols .col-r { flex:0 0 250px; }
#f_sloty { max-height:150px; overflow:auto; }
@media (max-width:640px){
  .wizyta-cols { flex-direction:column; gap:0; }
  .wizyta-cols .col-r { flex:none; width:100%; }
}

/* ============================ Karta klienta ============================ */
.klient-modal { width:460px; }
.klient-naglowek { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.klient-awatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--fiolet),#c88bbe); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex:0 0 auto; box-shadow:0 2px 8px rgba(168,95,156,.32); }
.klient-naglowek .imie { font-size:18px; font-weight:700; color:var(--granat); }
.kontakt { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip { background:var(--tlo); border:1px solid var(--linia); border-radius:var(--r-pill); padding:5px 12px; font-size:13px; color:var(--ink-2); }
.sekcja-tyt { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:18px 0 8px; font-weight:700; }
.wiz { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--linia-2); font-size:13px; }
.wiz:last-child { border-bottom:0; }
.wiz .data { width:120px; color:var(--ink-2); flex:0 0 auto; }
.wiz .usl { flex:1 1 auto; }
.wiz .cena { color:var(--ink-3); }
.badge { font-size:11px; padding:3px 9px; border-radius:var(--r-pill); font-weight:600; white-space:nowrap; }
.badge.akceptacja { background:var(--ok-bg); color:var(--ok); }
.badge.anulowana { background:var(--blad-bg); color:var(--blad); }
.badge.nieobecnosc { background:var(--uwaga-bg); color:var(--uwaga); }
.pusto { color:var(--ink-3); font-size:13px; padding:14px 4px; text-align:center; }

/* =========================== Lista / tabele =========================== */
.szukajka { display:flex; gap:10px; margin-bottom:16px; align-items:center; }
.szukajka > div:first-child { color:var(--granat); }
.szukajka input {
  flex:1; padding:11px 13px; border:1px solid var(--linia); border-radius:var(--r); font-size:14px;
  background:var(--paper); color:var(--ink); transition:border-color .14s, box-shadow .14s;
}
.szukajka input:focus { outline:none; border-color:var(--fiolet); box-shadow:var(--ring); }
table.klienci { width:100%; border-collapse:collapse; font-size:14px; }
table.klienci th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:9px 11px; border-bottom:1px solid var(--linia); font-weight:700; }
table.klienci td { padding:12px 11px; border-bottom:1px solid var(--linia-2); }
table.klienci tbody tr { cursor:pointer; transition:background .12s; }
table.klienci tbody tr:hover { background:var(--tlo); }
table.klienci tbody tr:last-child td { border-bottom:0; }
.link { color:var(--granat); font-weight:600; text-decoration:none; }
table.klienci tbody tr:hover .link, a.link:hover { color:var(--fiolet-2); }
.tabela-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===================== Zakładki (kanał / odbiorca / status) ===================== */
.zakladki { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }

.status-btny { display:flex; gap:6px; flex-wrap:wrap; }
.stbtn { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid var(--linia); border-radius:var(--r-sm); background:var(--paper); cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); font-family:inherit; transition:background .12s, color .12s, border-color .12s; }
.stbtn svg { width:15px; height:15px; }
.stbtn:hover { background:var(--tlo); color:var(--ink); }
.stbtn.on { background:var(--fiolet); color:#fff; border-color:var(--fiolet); box-shadow:0 2px 8px rgba(168,95,156,.28); }

/* ======================= Wolne godziny (sloty) ======================= */
.sloty { display:flex; flex-wrap:wrap; gap:7px; }
.slot { padding:7px 11px; border:1px solid var(--linia); border-radius:var(--r-sm); cursor:pointer; font-size:13px; background:var(--paper); color:var(--ink); font-weight:500; transition:background .12s, border-color .12s; }
.slot:hover { background:var(--mauve-soft); border-color:var(--fiolet); }
.slot.wybrany { background:var(--fiolet); color:#fff; border-color:var(--fiolet); font-weight:700; box-shadow:0 2px 8px rgba(168,95,156,.3); }
.sloty-info { font-size:12px; color:var(--ink-3); }

/* ======================= Mini-kalendarz wyboru daty ======================= */
.kal { user-select:none; }
.kal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.kal-head b { color:var(--granat); font-size:14px; text-transform:capitalize; font-weight:700; }
.kal-nav { background:var(--tlo); border:1px solid var(--linia); border-radius:var(--r-sm); width:30px; height:30px; cursor:pointer; font-size:16px; color:var(--granat); transition:background .12s; }
.kal-nav:hover { background:var(--mauve-soft); }
.kal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.kal-grid .dow { text-align:center; font-size:11px; color:var(--ink-3); padding:4px 0; font-weight:600; }
.kal-grid .day { text-align:center; padding:9px 0; border-radius:var(--r-sm); cursor:pointer; font-size:13px; transition:background .1s; }
.kal-grid .day:hover { background:var(--mauve-soft); }
.kal-grid .day.pusty { visibility:hidden; cursor:default; }
.kal-grid .day.wybrany { background:var(--fiolet); color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(168,95,156,.3); }
.kal-grid .day.dzis { box-shadow:inset 0 0 0 1.5px var(--fiolet); }

/* Pole godziny — wyróżnione fioletem (spójne z aktywną datą) */
.pole input.godzina-input {
  width:110px; text-align:center; font-size:16px; letter-spacing:1px; font-weight:700;
  background:var(--fiolet); color:#fff; border-color:var(--fiolet);
}
.pole input.godzina-input:focus { box-shadow:var(--ring); border-color:var(--fiolet); }
.godzina-input::placeholder { color:rgba(255,255,255,.7); }

/* ======================= Numer telefonu: prefiks + cyfry ======================= */
.tel-combo { display:flex; gap:6px; align-items:center; flex:1; min-width:0; }
.tel-prefix { flex:0 0 auto; width:120px; padding:10px 8px; border:1px solid var(--linia); border-radius:var(--r-sm); font-size:14px; background:var(--paper); font-family:inherit; color:var(--ink); }
/* przebij .pole select/input { width:100% } — inaczej prefiks zabiera całą szerokość */
.pole select.tel-prefix, .kontakt-row select.tel-prefix { width:120px; flex:0 0 auto; }
.tel-combo input, .kontakt-row #k_telefon { flex:1 1 auto; min-width:0; width:auto; }

/* ================ Akcje kontaktu (zadzwoń / napisz / kopiuj) ================ */
.kontakt-row { display:flex; gap:6px; align-items:center; }
.kontakt-row input { flex:1; min-width:0; }
.btn-akcja { border:1px solid var(--linia); background:var(--paper); color:var(--fiolet-2); border-radius:var(--r-sm); padding:9px 11px; font-size:13px; cursor:pointer; white-space:nowrap; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:background .12s, border-color .12s; }
.btn-akcja svg { width:15px; height:15px; }
.btn-akcja:hover { background:var(--mauve-soft); border-color:var(--fiolet); }
.btn-akcja.wyl { color:#b8bdcc; pointer-events:none; }
.btn-akcja:disabled { color:#b8bdcc; cursor:default; }

/* ====================== Autouzupełnianie klienta ====================== */
.ac-lista { position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--paper); border:1px solid var(--linia); border-radius:var(--r); box-shadow:var(--cien-2); z-index:20; max-height:230px; overflow:auto; display:none; }
.ac-lista.on { display:block; }
.ac-item { padding:10px 13px; cursor:pointer; font-size:14px; transition:background .1s; }
.ac-item:hover { background:var(--mauve-soft); }
.ac-item small { color:var(--ink-3); margin-left:6px; }
.ac-nowy { color:var(--fiolet-2); font-weight:600; border-top:1px solid var(--linia); }

/* =========================== Widok mobilny =========================== */
@media (max-width:720px){
  header.top { height:auto; min-height:52px; flex-wrap:wrap; padding:8px 12px; gap:6px 8px; }
  header.top .marka { font-size:14px; }
  header.top nav { margin-left:0; gap:2px; }
  header.top nav a { padding:6px 9px; font-size:13px; }
  header.top nav a svg { width:15px; height:15px; }
  header.top .btn { padding:7px 10px; font-size:13px; }

  .wrap { flex-direction:column; padding:10px; gap:10px; }
  .filtry { width:100%; }
  .cal { width:100%; }

  .modal { padding:18px; }
  .pole input, .pole select, .pole textarea, .tel-prefix, .szukajka input { font-size:16px; } /* 16px = brak auto-zoomu iOS */
  .pole.dwa { flex-direction:column; gap:0; }
  .kontakt-row { flex-wrap:wrap; }
  .wizyta-modal { height:auto; }

  table.klienci { min-width:480px; }

  .fc .fc-toolbar-title { font-size:16px; }
  .fc .fc-toolbar.fc-header-toolbar { flex-wrap:wrap; gap:6px 8px; margin-bottom:8px; }
  #kalendarz { font-size:12px; }
}