/* Therappy — Flat pravac (redizajn 2026-10, paket v2). Učitava se posle Tailwind-a u oba layout-a.
   Osnovne boje (--bg-*, --text-*, --border-color, --message-bg-sent) definišu layout-i;
   ovde su samo novi tokeni i Flat pomoćne klase.
   Princip: polja, čipovi, obaveštenja, sekundarna dugmad i pločice su TONSKE površine (--bg-secondary,
   bez vidljivog okvira); sekcije se odvajaju razmakom i naslovima, ne linijama; tačke su samo potpis
   granice fiksnog dela (rub sidepanela i vrh lepljivog podnožja). */

/* Sistemski delovi (AutoFill ikonica u poljima, kalendar, skrol) prate temu aplikacije */
:root { color-scheme: light; }
html.dark, [data-theme="dark"] { color-scheme: dark; }
/* Safari crta ključ/torzo kao masku sa fiksno crnom pozadinom; color-scheme to ne menja */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button { background-color: var(--text-secondary) !important; }

:root {
  --message-bg-sent: #32393A; /* primarno dugme; isto kao u layouts/app (ovde i za PIN ekrane) */
  --on-primary: #F0EFEA;   /* tekst na primarnom dugmetu */
  --danger: #EF4444;       /* SAMO okviri, nikad tekst (kontrast) */
  --danger-ink: #991B1B;   /* tekst greške, broj 10 na slajderu */
}
html.dark, [data-theme="dark"] {
  --message-bg-sent: #D6D3CB;
  --on-primary: #1E2120;
  --danger-ink: #FCA5A5;
}

:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
/* Naslov modala prima fokus pri otvaranju (umesto ×): bez okvira */
dialog [tabindex="-1"]:focus { outline: none; }

/* Atribut hidden mora da pobedi utility klase (npr. "flex") */
[hidden] { display: none !important; }

/* Tonska površina — osnovni gradivni element Flat pravca */
.f-fill { background: var(--bg-secondary); border: 2px solid transparent; }
a.f-fill:hover, button.f-fill:hover { background: var(--border-color); }

/* Tihe tačke (r 1.2px, --border-color) na 8px: granica fiksnog dela */
.f-rail-t {
  padding-top: 18px;
  background: radial-gradient(circle, var(--border-color) 1.2px, transparent 1.6px) 0 0 / 8px 8px repeat-x, var(--bg-primary);
}
.f-rail {
  width: 8px; flex: none; background-color: var(--bg-primary);
  background-image: radial-gradient(circle, var(--border-color) 1.2px, transparent 1.6px);
  background-size: 8px 8px; background-repeat: repeat-y;
}
/* Sidepanel (layouts/app): ista boja kao podloga, tačke uz desnu ivicu umesto linije */
.f-rail-edge {
  padding-right: 8px;
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle, var(--border-color) 1.2px, transparent 1.6px);
  background-size: 8px 8px; background-repeat: repeat-y; background-position: right top;
}

/* Polja za unos: tonska podloga bez vidljivog okvira; fokus = puna linija u boji teksta */
.f-input {
  width: 100%; box-sizing: border-box; background: var(--bg-secondary); color: var(--text-primary);
  border: 2px solid transparent; border-radius: 8px; padding: 10px 12px;
  font-family: inherit; letter-spacing: inherit; font-weight: 300;
  font-size: 16px; line-height: 1.6; outline: none; resize: vertical;   /* 16px: iOS ne zumira */
}
.f-input:focus { border-color: var(--text-primary); }
.f-input[aria-invalid="true"] { border-color: var(--danger); }
.f-input::placeholder { color: var(--text-secondary); opacity: .8; }

/* Dugmad */
.f-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 8px; background: var(--message-bg-sent); color: var(--on-primary);
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .5px; cursor: pointer; text-decoration: none;
}
.f-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.f-btn-primary:hover { opacity: .85; }
.f-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg-secondary); border: 2px solid transparent; border-radius: 6px; color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .5px; cursor: pointer; text-decoration: none;
}
.f-btn-secondary:hover { background: var(--border-color); }

/* Bedž brojača */
.f-badge {
  min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; border-radius: 9999px;
  background: var(--message-bg-sent); color: var(--on-primary);
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.f-badge.hidden { display: none; }

/* Slajder jačine (nativni input[type=range]) */
.f-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
.f-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--text-primary) var(--fill, 50%), var(--border-color) var(--fill, 50%));
}
.f-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border-color); }
.f-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--text-primary); }
.f-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 9999px;
  background: var(--text-primary); border: 3px solid var(--bg-primary); box-sizing: border-box;
}
.f-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 9999px; background: var(--text-primary); border: 3px solid var(--bg-primary); box-sizing: border-box; }

/* PIN ćelije: idle tonska bez okvira, active puna linija, error crveni okvir */
.f-pin-cell {
  height: 56px; box-sizing: border-box; border-radius: 8px; background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400;
  border: 2px solid transparent; color: var(--text-primary);
}
.f-pin-cell[data-state="active"] { border-color: var(--text-primary); }
.f-pin-cell[data-state="error"]  { border-color: var(--danger); }

/* Pravila PIN-a (štiklirana lista) */
.f-rule { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.f-rule-mark {
  flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 9999px; border: 1.5px solid var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--on-primary);
}
.f-rule[data-ok="1"] { color: var(--text-primary); }
.f-rule[data-ok="1"] .f-rule-mark { border: 0; background: var(--message-bg-sent); }
.f-rule[data-ok="1"] .f-rule-mark::after { content: "✓"; }

/* Poruka o poklapanju PIN-a */
[data-pin-match][data-state="none"] { display: none; }
[data-pin-match] [data-when] { display: none; }
[data-pin-match][data-state="error"] { color: var(--danger-ink); }
[data-pin-match][data-state="ok"] { color: var(--text-secondary); }
[data-pin-match][data-state="error"] [data-when="error"],
[data-pin-match][data-state="ok"] [data-when="ok"] { display: inline; }

/* Indeks sekcija dnevnika: tonske ćelije, trenutna = tamna (primarna) ćelija */
.f-index-cell {
  min-width: 52px; height: 44px; padding: 0 8px; box-sizing: border-box; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text-secondary);
  background: var(--bg-secondary); border: 2px solid transparent;
}
.f-index-cell:hover { background: var(--border-color); }
.f-index-cell[data-filled="1"] { color: var(--text-primary); }
.f-index-cell[aria-current="step"] { background: var(--message-bg-sent); border-color: var(--message-bg-sent); color: var(--on-primary); }
.f-index-cell[aria-current="step"] .f-check { stroke: var(--on-primary); }
.f-index-cell .f-check { display: none; }
.f-index-cell[data-filled="1"] .f-check { display: inline; }

/* Obaveštenje: tonska podloga bez okvira */
.f-notice { background: var(--bg-secondary); border-radius: 8px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }

/* Skala kao dugmići (raspon različit od 1–10) */
.f-scale-cell { position: relative; cursor: pointer; }
.f-scale-cell span {
  min-width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); border: 2px solid transparent; font-size: 15px; color: var(--text-primary);
}
.f-scale-cell:hover span { background: var(--border-color); }
.f-scale-cell input:checked + span { background: var(--message-bg-sent); color: var(--on-primary); border-color: var(--message-bg-sent); font-weight: 500; }
.f-scale-cell input:focus-visible + span { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* Izbor više opcija */
.f-check-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; box-sizing: border-box;
  background: var(--bg-secondary); border: 2px solid transparent; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.f-check-row input { width: 18px; height: 18px; accent-color: var(--text-primary); flex: none; }
.f-check-row:has(input:checked) { border-color: var(--text-primary); }

/* Male oznake u dnevniku ishrane (*, P, L, D) */
.f-mini-check { position: relative; cursor: pointer; }
.f-mini-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-mini-check span {
  width: 44px; height: 44px; box-sizing: border-box; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); border: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--text-secondary);
}
.f-mini-check input:checked + span { background: var(--message-bg-sent); color: var(--on-primary); border-color: var(--message-bg-sent); }
.f-mini-check input:focus-visible + span { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* Lista klijenata: redovi bez linija (radijus 8px), pločice tonske */
.f-client-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px; border-radius: 8px; text-decoration: none; color: var(--text-primary); }
.f-client-row:hover { background-color: var(--bg-secondary); }
.f-tile {
  background: var(--bg-secondary); border: 2px solid transparent; border-radius: 8px; padding: 18px; min-height: 140px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--text-primary);
}
.f-tile:hover { background-color: var(--border-color); }
.f-more > summary::-webkit-details-marker { display: none; }
.f-menu {
  background: var(--bg-secondary); border-radius: 8px; padding: 6px; box-shadow: 0 0 0 2px var(--bg-primary);
}
.f-menu-item {
  width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; text-align: left;
  font-family: inherit; font-size: 14px; color: var(--text-primary); cursor: pointer;
}
.f-menu-item:hover { background-color: var(--border-color); }

/* Naslov stranice na desktopu: 24/400, red naslova u visini prve stavke sidepanela */
.f-page-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 400; }
@media (min-width: 768px) { .f-page-top { padding-top: 98px !important; } }

/* ===== Talas 2 (paket talas2): upitnik, ponovljivi redovi, prazan slajder ===== */

/* Prazan slajder: dok klijent ne pomeri, nema kružića ni popune (JS postavlja data-empty) */
.f-range[data-empty]::-webkit-slider-thumb { opacity: 0; }
.f-range[data-empty]::-moz-range-thumb { opacity: 0; }
.f-range[data-empty]::-moz-range-progress { background: transparent; }
.f-range[data-empty] { --fill: 0%; }
.f-range { touch-action: pan-y; }

/* Ponuđeni odgovor (radio / checkbox): tonski red ≥48px; izabran = taman */
.f-opt {
  display: flex; align-items: flex-start; gap: 12px; min-height: 48px; box-sizing: border-box; position: relative;
  padding: 12px 14px; border-radius: 8px; border: 2px solid transparent; background: var(--bg-secondary); color: var(--text-primary);
  font-size: 15px; line-height: 1.45; cursor: pointer;
}
.f-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-opt .f-mark { width: 18px; height: 18px; margin-top: 1px; flex: none; box-sizing: border-box; border: 2px solid var(--text-secondary); border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.f-opt .f-mark.is-box { border-radius: 4px; }
.f-opt:has(input:checked) { background: var(--message-bg-sent); color: var(--on-primary); }
.f-opt:has(input:checked) .f-mark { border-color: var(--on-primary); }
.f-opt:has(input:checked) .f-mark::after { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--on-primary); }
.f-opt:has(input:checked) .f-mark.is-box::after { width: 10px; height: 6px; border-radius: 0; background: none; border: solid var(--on-primary); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.f-opt:has(input:focus-visible), .f-scale:has(input:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* Skala: red jednakih tonskih dugmadi 44px, samo broj; izabran = taman */
.f-scale-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.f-scale {
  position: relative; height: 44px; border-radius: 8px; border: 2px solid transparent; box-sizing: border-box;
  background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; font-weight: 400;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.f-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-scale:has(input:checked) { background: var(--message-bg-sent); color: var(--on-primary); }

/* Neodgovoreno pri pokušaju slanja: okvir --danger, oznaka u --danger-ink (u redu pitanja, bez pomeranja) */
[data-question][data-missing] .f-scale,
[data-question][data-missing] .f-opt,
[data-question][data-missing] .f-input { border-color: var(--danger); }
[data-question] [data-missing-label] { display: none; font-size: 12px; font-weight: 500; color: var(--danger-ink); white-space: nowrap; }
[data-question][data-missing] [data-missing-label] { display: inline; }

/* Napredak: traka 4px */
.f-progress { height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.f-progress > span { display: block; height: 100%; background: var(--text-primary); width: var(--p, 0%); transition: width .2s; }

/* Ponovljivi red (sat / dan / stavka): sklopljen = tonska pločica 56px sa sažetkom */
.f-row-head {
  width: 100%; min-height: 56px; box-sizing: border-box; padding: 8px 12px; border: 0; border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary); display: flex; align-items: center; gap: 12px;
  text-align: left; cursor: pointer; font-family: inherit; letter-spacing: inherit;
}
.f-row-head:hover { background: var(--border-color); }
[data-repeat-row][data-open] > .f-row-head { background: transparent; padding: 0; min-height: 44px; }
[data-repeat-row][data-open] > .f-row-head svg { transform: rotate(180deg); }
[data-repeat-row] > [data-row-body] { display: none; }
[data-repeat-row][data-open] > [data-row-body] { display: flex; }
[data-repeat-row][data-open] [data-row-summary] { display: none; }

/* ===== Talas 3 (paket talas3): status sesije, modal, kalendar, segmentirani izbor ===== */

/* Oznaka statusa sesije: OBLIK nosi značenje (ne boja); uz nju uvek ide tekst ili aria-label */
.f-status { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; box-sizing: border-box; border: 1.5px solid var(--text-primary); }
.f-status[data-status="confirmed"] { background: var(--text-primary); }
.f-status[data-status="pending"]   { background: transparent; }
.f-status[data-status="cancelled"] { height: 2px; border: 0; background: var(--text-secondary); }
[data-session-status="cancelled"] { color: var(--text-secondary); text-decoration: line-through; }

/* Modal (nativni <dialog>): bez senke, zatamnjenje kao mobilni meni */
.f-modal { border: 0; padding: 24px; border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); width: min(540px, calc(100vw - 32px)); box-sizing: border-box; font-family: 'Outfit', sans-serif; letter-spacing: .5px; }
.f-modal.is-wide { width: min(640px, calc(100vw - 32px)); }
.f-modal::backdrop { background: rgba(0, 0, 0, .35); }
dialog:not([data-mode="cancel"]):not([data-mode="del"]) [data-mode-show]:not([data-mode-show="base"]),
dialog[data-mode="cancel"] [data-mode-show]:not([data-mode-show="cancel"]),
dialog[data-mode="del"] [data-mode-show]:not([data-mode-show="del"]) { display: none !important; }

/* Mesec: ćelija dana tonska; danas = taman broj; van meseca providna */
.f-day { min-height: 0; padding: 8px 6px 6px; box-sizing: border-box; border-radius: 8px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 4px; cursor: pointer; overflow: hidden; }
.f-day:hover { outline: 2px solid var(--border-color); outline-offset: -2px; }
.f-day[data-outside] { background: transparent; color: var(--text-secondary); }
.f-day [data-today-num] { background: var(--message-bg-sent); color: var(--on-primary); font-weight: 500; }
.f-day-session { height: 24px; flex: none; padding: 0 4px; border-radius: 6px; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 6px; font-size: 13px; font-family: inherit; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
.f-day-session:hover { background: var(--border-color); }

/* Satnica (Dan / Nedelja): kolona tonska, satne trake su prekidi u boji podloge. 1h = 56px, 08–21h */
.f-tcol { position: relative; border-radius: 8px; background: var(--bg-secondary); cursor: crosshair; touch-action: none; user-select: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, var(--bg-primary) 54px, var(--bg-primary) 56px); }
.f-block { position: absolute; left: 4px; right: 4px; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 1.5px solid transparent;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; line-height: 1.25; text-align: left; overflow: hidden; cursor: pointer; font-size: 12px; font-family: inherit; }
.f-block[data-status="confirmed"] { background: var(--message-bg-sent); border-color: var(--message-bg-sent); color: var(--on-primary); }
.f-block[data-status="pending"]   { background: var(--bg-primary); border-color: var(--text-primary); color: var(--text-primary); }
.f-block[data-status="cancelled"] { background: transparent; border-color: var(--border-color); color: var(--text-secondary); text-decoration: line-through; }
.f-sel { position: absolute; left: 4px; right: 4px; box-sizing: border-box; border-radius: 6px; border: 2px dashed var(--text-primary); background: var(--bg-primary); padding: 6px 8px; font-size: 12px; font-weight: 500; pointer-events: none; }
.f-now { position: absolute; left: -4px; right: 0; height: 2px; background: var(--text-primary); pointer-events: none; z-index: 3; }
.f-now::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 9999px; background: var(--text-primary); }
/* Brza kartica: bez senke; odvaja je obris 2px --border-color */
.f-pop { position: absolute; z-index: 20; width: 320px; box-sizing: border-box; padding: 16px; border-radius: 12px; background: var(--bg-primary); box-shadow: 0 0 0 2px var(--border-color); display: flex; flex-direction: column; gap: 12px; }

/* Segmentirani izbor (prikaz) */
.f-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--bg-secondary); }
.f-seg > * { height: 38px; padding: 0 14px; border-radius: 6px; border: 0; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.f-seg > [aria-selected="true"], .f-seg > [aria-pressed="true"], .f-seg > :has(input:checked) { background: var(--bg-primary); color: var(--text-primary); }
.f-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }


/* ===== LISTE — dodato (jedan obrazac za sve liste) ===== */
/* Red liste: tonska pločica 64px, razmak 4px. Ceo red je klikabilan preko .f-li-link (::after pokriva red); dugmad su iznad (z-index). */
.f-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.f-list-group { display: flex; flex-direction: column; gap: 8px; }
.f-list-h { margin: 0; padding: 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.f-li { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; box-sizing: border-box; padding: 10px 12px 10px 16px; border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); }
.f-li:has(.f-li-link):hover { background: var(--border-color); }
.f-li-link { color: inherit; text-decoration: none; }
.f-li-link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.f-li-link:focus-visible { outline: none; }
.f-li:has(.f-li-link:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.f-li button, .f-li .f-act, .f-li form { position: relative; z-index: 1; }
.f-li-lead { width: 88px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.f-li-date { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.f-li-day { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.f-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.f-li-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.f-li-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.f-li-tag { flex: none; font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }   /* kategorija, Sistemski, Neaktivan, status linka — tekst, ne čip */
.f-new { flex: none; height: 20px; padding: 0 8px; border-radius: 9999px; background: var(--message-bg-sent); color: var(--on-primary); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.f-li-desc { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* opis: 1 red, skraćen */
.f-li-meta { width: 200px; flex: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-secondary); }
.f-li-meta > *, .f-li-meta-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-li-meta-m { display: none; font-size: 12px; color: var(--text-secondary); }
.f-li-meta-m > * + *::before { content: " · "; color: var(--text-secondary); font-weight: 300; }
[data-warn="1"] { color: var(--danger-ink); }                      /* npr. poslednja prijava posle 30 dana */
[data-warn="2"] { color: var(--danger-ink); font-weight: 500; }    /* posle 60 dana */
.f-li-value { width: 64px; flex: none; text-align: right; display: flex; flex-direction: column; }
.f-li-value > :first-child { font-size: 18px; line-height: 24px; font-weight: 400; font-variant-numeric: tabular-nums; }
.f-li-value > :nth-child(2) { font-size: 11px; color: var(--text-secondary); }
.f-li-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.f-act { height: 36px; padding: 0 12px; border-radius: 6px; border: 0; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.f-act:hover { background: var(--bg-primary); opacity: 1; }
.f-act.is-danger { color: var(--danger-ink); }
.f-act[data-placeholder] { visibility: hidden; }                   /* red bez te radnje: mesto ostaje, kolone se poravnavaju */
/* Kraj reda (2c): strelica › svuda; tamno dugme sa glagolom samo kad nešto čeka */
.f-li-end { width: 32px; flex: none; display: flex; justify-content: flex-end; align-items: center; }
.f-li-end[data-wide] { width: 136px; }
.f-li-chev { width: 32px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.f-li-todo { height: 36px; min-width: 80px; padding: 0 16px; box-sizing: border-box; border-radius: 6px; background: var(--message-bg-sent); color: var(--on-primary); font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; position: relative; z-index: 1; }
.f-li-todo:hover { opacity: .9; }
.f-li-todo-m { display: none; min-width: 0; padding: 0 14px; flex: none; }
.f-li-more, .f-li-arrow { display: none; width: 44px; height: 44px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font-size: 18px; align-items: center; justify-content: center; cursor: pointer; }
.f-li-arrow { color: var(--text-secondary); }
/* Potvrda brisanja u redu (desktop) */
.f-li-confirm { display: none; flex: 1; min-width: 0; align-items: center; gap: 8px; }
.f-li[data-confirm] > :not(.f-li-lead):not(.f-li-confirm) { display: none; }
.f-li[data-confirm] .f-li-confirm { display: flex; }
.f-btn-sm { height: 36px; padding: 0 14px; border-radius: 6px; border: 0; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; }
.f-btn-danger { border: 2px solid var(--danger); background: transparent; color: var(--danger-ink); }

/* Statistika: jedan red malih tonskih pločica */
.f-stats { display: flex; gap: 8px; }
.f-stat { width: 184px; box-sizing: border-box; padding: 12px 16px; border-radius: 8px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 2px; }
.f-stat > :first-child { font-size: 22px; line-height: 28px; font-weight: 400; font-variant-numeric: tabular-nums; }
.f-stat > :last-child { font-size: 12px; color: var(--text-secondary); }

/* Paginacija */
.f-pag { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.f-pag-btn { min-width: 36px; height: 36px; padding: 0 10px; box-sizing: border-box; border-radius: 6px; border: 0; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.f-pag-btn[aria-current="page"] { background: var(--message-bg-sent); color: var(--on-primary); }
.f-pag-btn[aria-disabled="true"] { color: var(--text-secondary); pointer-events: none; }

/* Donji panel sporednih radnji (telefon): nativni <dialog> */
.f-sheet { margin: auto 0 0; width: 100%; max-width: 100%; box-sizing: border-box; border: 0; border-radius: 12px 12px 0 0; padding: 8px 16px 32px; background: var(--bg-primary); color: var(--text-primary); }
.f-sheet::backdrop { background: rgba(0, 0, 0, .35); }
.f-sheet-item { width: 100%; height: 52px; padding: 0 16px; box-sizing: border-box; border-radius: 8px; border: 0; background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; font-weight: 400; text-align: left; text-decoration: none; display: flex; align-items: center; cursor: pointer; }
.f-sheet-item.is-danger { color: var(--danger-ink); }

@media (max-width: 767px) {
  .f-li { gap: 12px; padding: 10px 4px 10px 14px; }
  .f-li-lead { width: 64px; }
  .f-li-date { font-size: 14px; }
  .f-li-day { font-size: 11px; }
  .f-li-meta, .f-li-acts { display: none; }
  .f-li-meta-m { display: block; }
  .f-li-value { width: auto; padding: 0 4px; }
  .f-li-value > :first-child { font-size: 16px; }
  .f-li-value > :nth-child(2) { display: none; }
  .f-li-more, .f-li-arrow { display: inline-flex; }
  .f-li-todo-m { display: inline-flex; }
  .f-li[data-confirm] > :not(.f-li-lead):not(.f-li-confirm) { display: revert; }
  .f-stats { gap: 6px; }
  .f-stat { width: auto; flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .f-stat > :first-child { font-size: 18px; line-height: 24px; }
  .f-stat > :last-child { font-size: 11px; line-height: 1.3; }
  .f-pag [data-pag-pages], .f-pag [data-pag-range] { display: none; }
  .f-pag-btn { height: 44px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
}

/* Pozivni linkovi: kolone (Klijent · Status · PIN · Pristup · Poslednja prijava) u redu liste.
   Prelomi po širini sadržaja (container query): uže → PIN ide uz Pristup; još uže → telefonski red sa ⋯. */
.f-inv { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
.f-inv-row, .f-inv-head { display: grid; grid-template-columns: minmax(140px, 1.6fr) 92px 44px minmax(130px, 1fr) 110px; gap: 16px; align-items: center; }
.f-inv-row { flex: 1; min-width: 0; }
.f-inv-head { padding: 0 172px 0 16px; font-size: 12px; color: var(--text-secondary); }
.f-inv .f-li-acts { width: 144px; justify-content: flex-end; }
.f-inv-c { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-inv-m, .f-inv-pin { display: none; }
.f-inv-m { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 860px) {
  .f-inv-row, .f-inv-head { grid-template-columns: minmax(140px, 1.6fr) 92px minmax(150px, 1fr) 100px; }
  .f-inv [data-col="pin"] { display: none; }
  .f-inv-pin { display: inline; }
}
@container (max-width: 640px) {
  .f-inv-head { display: none; }
  .f-inv-row { display: block; }
  .f-inv-c { display: none; }
  .f-inv-m { display: block; }
  .f-inv .f-li-acts { display: none; }
  .f-inv .f-li-more { display: inline-flex; }
}

/* Dashboard: hitnost stavke u tri nijanse crvene (3 = najhitnije); uz boju uvek ide i tekst (visoka/srednja/niska) */
:root { --sev-1: #F3D6D3; --sev-1-ink: #7A1E1E; --sev-2: #C9514B; --sev-2-ink: #FFFFFF; --sev-3: #8E1B1B; --sev-3-ink: #FFFFFF; }
html.dark { --sev-1: #4A2725; --sev-1-ink: #F4C9C5; --sev-2: #A3403B; --sev-2-ink: #FFF3F2; --sev-3: #E46B64; --sev-3-ink: #2A0B0A; }
.f-sev { flex: none; width: 72px; height: 22px; border-radius: 9999px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .3px; }
.f-sev[data-sev="1"] { background: var(--sev-1); color: var(--sev-1-ink); }
.f-sev[data-sev="2"] { background: var(--sev-2); color: var(--sev-2-ink); }
.f-sev[data-sev="3"] { background: var(--sev-3); color: var(--sev-3-ink); }
.f-sev-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.f-sev-dot[data-sev="1"] { background: var(--sev-1); box-shadow: inset 0 0 0 1px var(--sev-2); }
.f-sev-dot[data-sev="2"] { background: var(--sev-2); }
.f-sev-dot[data-sev="3"] { background: var(--sev-3); }
.f-att { position: relative; overflow: hidden; border: 0; }
.f-att[data-sev]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.f-att[data-sev="1"]::before { background: var(--sev-1); }
.f-att[data-sev="2"]::before { background: var(--sev-2); }
.f-att[data-sev="3"]::before { background: var(--sev-3); }
/* Priprema za sesiju: dve kolone koje se same izjednačavaju (blokovi se ne lome) */
.f-prep-cols { column-gap: 48px; }
.f-prep-cols > .contents > * { break-inside: avoid; margin-bottom: 32px; min-width: 0; }
@media (min-width: 1024px) { .f-prep-cols { column-count: 2; } }

/* Predlozi dok se kuca (pretraga klijenata): padajuća lista ispod polja */
.f-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown, 50); margin: 0; padding: 4px; list-style: none; border-radius: 8px; background: var(--bg-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); display: flex; flex-direction: column; gap: 2px; }
.f-suggest [role="option"] { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.f-suggest [role="option"] span + span { font-size: 12px; color: var(--text-secondary); }
.f-suggest [role="option"][data-keyword] { font-weight: 500; }
.f-suggest [role="option"][aria-selected="true"], .f-suggest [role="option"]:hover { background: var(--bg-secondary); }