:root {
  color-scheme: dark;
  /* Paleta preuzeta s ton.org: duboka mornarička podloga, hladan
     svijetloplavi tekst i jedan jarki plavi naglasak. NE DIRATI boje ovdje
     — samo razmaci/proporcije/tipografija se mijenjaju u ovom fajlu. */
  --bg: #10161f;
  --bg-deep: #0b1119;
  --panel: #151e29;
  --panel-2: #1a2534;
  --border: #223044;
  --border-soft: rgba(255, 255, 255, .07);
  --text: #d9e6f2;
  --text-strong: #ffffff;
  --muted: #93a5b8;
  --accent: #1eaefb;
  --accent-dim: #0098ea;
  --accent-soft: rgba(30, 174, 251, .14);
  --ok: #d9e6f2;
  --warn: #93a5b8;
  --err: #4a5a6d;
  --sidebar-bg: #0c1218;
  --sidebar-active: #14263a;

  /* Hairline: macOS ne crta obrube svugdje nego jednu tanku liniju od ~8%
     bijele. Jedan token da separator nikad ne "podeblja" u kutiju. */
  --hairline: rgba(255, 255, 255, .08);
  --fill-hover: rgba(255, 255, 255, .05);
  --fill-press: rgba(255, 255, 255, .09);
  --focus-ring: 0 0 0 3px rgba(30, 174, 251, .35);

  /* Skala razmaka: 8pt grid s 4pt finim korakom. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Dvije razine zaobljenja, ne četiri: kontrole i plohe. */
  --radius-sm: 6px;    /* inputi, gumbi, redovi liste — macOS control radius */
  --radius-md: 10px;   /* kartice, ploče, sheet — macOS window/sheet radius */
  --radius-lg: 10px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* Tipografija: hijerarhija bojom i težinom, ne veličinom.
     Četiri stupnja, ništa ispod 11px. */
  --fs-title: 22px;      /* naslov viewa */
  --fs-title2: 17px;     /* naslov unutar viewa */
  --fs-body: 13px;       /* tijelo, kontrole, tablice */
  --fs-secondary: 11px;  /* metapodaci, zaglavlja sekcija */
  --lh-body: 1.4;
  --lh-tight: 1.25;

  --ease: cubic-bezier(.32, .72, .35, 1);  /* ease-out, bez bouncea */
}
/* Jedina izmjena u ovom prolazu: cijelo sučelje malo uvećano (kao browser
   zoom) jer je slučajno smanjeno — ništa ispod ovoga se ne dira, ni jedno
   pravilo, ni jedan token. zoom skalira i fontove i px-fiksne visine (28px
   gumbi, 40px logo...) razmjerno, za razliku od transform: scale koji bi
   pokvario position: fixed/100vh. */
html { zoom: 1.08; }
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sprite s ikonama se ne prikazuje. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}

.app { display: flex; min-height: 100vh; }

/* ══════════════════════════════════════════════════════ Sidebar ══ */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  /* "Vibrancy": macOS bočne trake nisu puna boja nego prozirni materijal
     kroz koji se nazire pozadina. HIG ga izrijekom potvrđuje za source list
     koji je primarna navigacija appa — jedino mjesto gdje ga koristimo. */
  background: rgba(12, 18, 24, .72);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  position: sticky;
  top: 0;
  height: 100vh;
}
/* Bazno pravilo nije scopano na sidebar — isti logo stoji i na prijavi. */
.logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-body);
  color: var(--text-strong);
}
.logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.sidebar .logo {
  height: 40px; flex: none;
  padding: 0 var(--sp-3);
  margin-bottom: var(--sp-2);
}

/* Source list: redovi su prozirni, odabir je jedna zaobljena pilula.
   Nema kutija, nema gap-linija — kao Things/Mail sidebar. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--sp-4);
}
.nav-group-label {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  margin: 0;
  font-size: var(--fs-secondary);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 28px;
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-3);
  cursor: pointer;
  color: var(--text);
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-item:hover { background: var(--fill-hover); }
.nav-item:active { background: var(--fill-press); }
.nav-item.active {
  background: var(--accent-dim);
  color: #fff;
  font-weight: 500;
}
.nav-item.active:hover { background: var(--accent-dim); }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-item .icon { opacity: .65; transition: opacity .15s var(--ease); }
.nav-item:hover .icon { opacity: .85; }
.nav-item.active .icon { opacity: 1; }

.sidebar-spacer { flex: 1; }
.sidebar-user {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-secondary);
  color: var(--muted);
}
#sidebarUserEmail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout { color: var(--accent); text-decoration: none; flex-shrink: 0; }
.sidebar-logout:hover { text-decoration: underline; }
.footer-note { color: var(--muted); font-size: var(--fs-secondary); padding: 0 var(--sp-3); }

/* ══════════════════════════════════════════════ Toolbar / sadržaj ══ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* macOS toolbar: niska traka fiksne visine s hairline dnom, ne web navbar. */
.toolbar-bar {
  height: 52px; flex: none;
  display: flex; align-items: center;
  padding: 0 var(--sp-8);
  border-bottom: 1px solid var(--hairline);
  background: rgba(16, 22, 31, .72);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  position: sticky; top: 0; z-index: 20;
}
.breadcrumb {
  color: var(--text-strong);
  font-size: var(--fs-body);
  font-weight: 600;
  margin: 0;
}
.main-scroll { flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-8) var(--sp-12); }

.view { display: none; }
.view.active { display: block; }

/* Naslovi po macOS skali unutar prozora, ne marketing-hero veličina. */
.page-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -.24px;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: 0 0 var(--sp-1);
}
.page-subtitle {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 68ch;
  margin: 0 0 var(--sp-5);
}
.hint {
  color: var(--muted); font-size: var(--fs-secondary);
  line-height: 1.45; max-width: 68ch;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}

/* Zaglavlje grupirane liste: sitno, podebljano, prigušeno — ne novi h1. */
.section-title {
  font-size: var(--fs-secondary);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-8) 0 var(--sp-3);
}
h3.section-title { margin-top: var(--sp-6); }

/* ══════════════════════════════════════════════ Kartice / mreže ══ */
/* Grupirana ploča: ćelije jedne plohe odvojene hairlineom, ne skup kutija. */
.stat-cards, .county-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
@media (max-width: 1400px) { .stat-cards, .county-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .stat-cards, .county-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .stat-cards, .county-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card, .county-card {
  background: var(--panel);
  border: none;
  border-radius: 0;
  padding: var(--sp-4);
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.stat-card:hover, .county-card:hover { background: var(--panel-2); }
.stat-card:active, .county-card:active { background: #1e2838; }
.county-card.selected {
  background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--accent);
}
.county-card.selected .county-name { color: var(--accent); }

/* Broj nosi težinu i veličinu, sve ostalo je 11–13px u prigušenoj boji. */
.stat-card .num { font-size: var(--fs-title); font-weight: 700; color: var(--text-strong); line-height: var(--lh-tight); }
.stat-card .label { color: var(--muted); font-size: var(--fs-body); margin-top: var(--sp-1); }
.stat-card .sub {
  display: flex; flex-wrap: wrap; row-gap: var(--sp-1);
  gap: var(--sp-3); margin-top: var(--sp-3);
  font-size: var(--fs-secondary); color: var(--muted);
}
.stat-card .sub b { color: var(--text-strong); font-weight: 600; }
.stat-card .sub b.bad-num { color: var(--err); font-weight: 600; }
.stat-card .sub .muted-channel, .stat-card .sub .muted-channel b { color: var(--muted); }
.stat-card .sub b.ok-num { color: var(--accent); }
.stat-card .reach-row {
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-secondary);
}
.stat-card .reach-row span { cursor: pointer; transition: color .15s var(--ease); }
.stat-card .reach-row span:first-child b { color: var(--accent); }
.stat-card .reach-row span:hover { color: var(--text); text-decoration: underline; }

.county-name { font-weight: 600; font-size: var(--fs-body); color: var(--text-strong); margin-bottom: var(--sp-1); }
.county-waiting { color: var(--muted); font-size: var(--fs-secondary); }
.county-channels {
  margin-top: var(--sp-2);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-secondary); color: var(--muted);
  white-space: nowrap;
}
.county-channels b { color: var(--text-strong); font-weight: 600; margin-right: 3px; }

/* ══════════════════════════════════════════════════════ Kalendar ══ */
.cal-month-label {
  font-weight: 600; font-size: var(--fs-body); color: var(--text-strong);
  min-width: 150px;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1);
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-secondary); color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.cal-day {
  min-height: 76px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  background: var(--panel);
  transition: background-color .15s var(--ease);
}
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day.today { border-color: var(--accent); }
.cal-day.has-data { background: var(--panel-2); cursor: pointer; }
.cal-day.has-data:hover { background: var(--fill-hover); }
.cal-day-num { font-size: var(--fs-secondary); color: var(--muted); }
.cal-day-total { font-size: var(--fs-title2); font-weight: 700; color: var(--accent); margin-top: var(--sp-1); line-height: var(--lh-tight); }
.cal-day-detail { font-size: var(--fs-secondary); color: var(--muted); margin-top: var(--sp-1); line-height: 1.35; }

/* ══════════════════════════════════════════════════════ Toolbar ══ */
.toolbar {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap; align-items: center;
}
.toolbar-tight { margin-top: var(--sp-3); }
.toolbar-sep {
  width: 1px; align-self: stretch; margin: 0 var(--sp-1);
  background: var(--hairline);
}
#categoryFilter { flex: 0 1 200px; min-width: 150px; }

/* Jedna visina (28px) za sve kontrole u toolbaru — macOS small control. */
.toolbar input, .toolbar select {
  height: 28px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.toolbar input { flex: 1; min-width: 180px; }
.toolbar input::placeholder { color: var(--muted); }
.toolbar select { cursor: pointer; padding-right: var(--sp-2); }
.toolbar input:hover, .toolbar select:hover { border-color: rgba(255, 255, 255, .16); }
.toolbar input:focus, .toolbar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.toolbar input:disabled, .toolbar select:disabled { opacity: .4; cursor: default; }

/* Segmentirana kontrola: dva gumba spojena u jedan element. */
.segmented { display: inline-flex; }
.segmented .btn { border-radius: 0; margin-left: -1px; }
.segmented .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.segmented .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented .btn:focus-visible { position: relative; z-index: 1; }

.filter-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap;
  height: 28px;
  background: var(--accent-soft); border: 1px solid rgba(30, 174, 251, .35); color: var(--text);
  border-radius: var(--radius-pill); padding: 0 var(--sp-3);
  font-size: var(--fs-secondary);
}
.filter-chip .chip-x { cursor: pointer; color: var(--muted); font-weight: 600; transition: color .15s var(--ease); }
.filter-chip .chip-x:hover { color: var(--text-strong); }

/* ══════════════════════════════════════════════════════ Tablica ══ */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: auto;
  /* Thumb ostaje trajno vidljiv (OS default je overlay koji nestane, pa
     tablica šira od ekrana izgleda kao da tu završava), ali u macOS
     proporciji od 11px umjesto Windows-debljine. */
  scrollbar-width: thin;
  scrollbar-color: #2f4a66 transparent;
}
.table-wrap::-webkit-scrollbar { height: 11px; width: 11px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #2f4a66; border-radius: var(--radius-pill);
  border: 3px solid var(--panel); min-width: 40px;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: #3d6289; }

.salon-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.salon-table thead th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  color: var(--muted); font-weight: 600;
  font-size: var(--fs-secondary); letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  white-space: nowrap;
}
.salon-table th.sortable { cursor: pointer; user-select: none; transition: color .15s var(--ease); }
.salon-table th.sortable:hover { color: var(--text); }
.salon-table th.sortable:active { color: var(--text-strong); }
.salon-table th.sortable .arrow { display: inline-block; margin-left: var(--sp-1); opacity: .4; font-size: .8em; }
.salon-table th.sortable.active { color: var(--text); }
.salon-table th.sortable.active .arrow { opacity: 1; color: var(--accent); }

/* Gusti redovi: 13px/1.35 + 6px vertikalno = ~30px, macOS list row. */
.salon-table td {
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  line-height: 1.35;
}
.salon-table td.col-name { min-width: 150px; max-width: 240px; }
.salon-table td.col-category { max-width: 200px; }
.salon-table td.col-address { max-width: 170px; }
/* Jedan red s elipsom umjesto dva — puna vrijednost ostaje u title tooltipu
   ćelije, a redovi zadrže jednaku visinu kroz cijelu tablicu. */
.salon-table .clamp2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-table th:first-child, .salon-table td:first-child { padding-left: var(--sp-4); }
.salon-table th:last-child, .salon-table td:last-child { padding-right: var(--sp-4); }
.salon-table tbody tr { cursor: pointer; transition: background-color .12s var(--ease); }
.salon-table tbody tr:hover { background: var(--fill-hover); }
.salon-table tbody tr:active { background: var(--fill-press); }
.salon-table tbody tr:last-child td { border-bottom: none; }
/* Kontrole u ćeliji prate visinu retka, ne visinu toolbara. */
.salon-table td .btn { height: 22px; padding: 0 var(--sp-2); font-size: var(--fs-secondary); }

.badge {
  display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-pill);
  font-size: var(--fs-secondary); font-weight: 600;
}
.badge.source-zoyya, .badge.source-sredime, .badge.source-mojkvart,
.badge.source-fresha, .badge.source-buker, .badge.source-bing, .badge.source-ceh {
  background: rgba(255, 255, 255, .06); color: var(--muted);
}

/* Faze kontakta: jedna boja u tri jačine umjesto pet različitih boja. */
.status-badge {
  display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-pill);
  font-size: var(--fs-secondary); font-weight: 600; white-space: nowrap;
  background: rgba(255, 255, 255, .05); color: var(--muted);
}
.status-badge.status-contacted      { background: rgba(30, 174, 251, .10); color: #7cc9f5; }
.status-badge.status-responded      { background: rgba(30, 174, 251, .16); color: #9bd6ff; }
.status-badge.status-interested     { background: rgba(30, 174, 251, .22); color: #bfe6ff; }
.status-badge.status-client         { background: var(--accent); color: #06121c; }
.status-badge.status-not_interested { background: rgba(255, 255, 255, .04); color: #52657a; }

.missing { color: var(--err); }
.present { color: var(--text-strong); }
.empty { color: var(--muted); font-size: var(--fs-body); padding: var(--sp-6) 0; }
.social-links a { color: var(--accent); text-decoration: none; margin-right: var(--sp-2); }
.social-links a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════ Pager ══ */
.pager {
  display: flex; justify-content: center; align-items: center;
  gap: var(--sp-3); margin-top: var(--sp-4);
  color: var(--muted); font-size: var(--fs-secondary);
}

/* ══════════════════════════════════════════════════════ Gumbi ══ */
/* Jedna definicija gumba, pa varijante. Svaka ima hover/pressed/focus/
   disabled — nijedno stanje se ne oslanja na promjenu veličine. */
.btn, .pager button, button.primary, button.danger, #exportCsvBtn, #exportSubsBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover, .pager button:not(:disabled):hover, #exportCsvBtn:hover, #exportSubsBtn:hover {
  background: #1f2c3d; border-color: rgba(255, 255, 255, .14); color: var(--text-strong);
}
.btn:active, .pager button:not(:disabled):active { background: #253345; }
.btn:focus-visible, .pager button:focus-visible,
button.primary:focus-visible, button.danger:focus-visible,
#exportCsvBtn:focus-visible, #exportSubsBtn:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.btn:disabled, .pager button:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { background: var(--panel-2); border-color: var(--hairline); color: var(--text); }

.btn-primary, button.primary {
  background: var(--accent-dim); border-color: var(--accent-dim);
  color: #fff; font-weight: 600;
}
.btn-primary:hover, button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:active, button.primary:active:not(:disabled) { background: #0b86cf; border-color: #0b86cf; }
button.primary:disabled { opacity: .4; cursor: default; }

.btn-open, .btn-sent {
  background: var(--accent-soft); border-color: rgba(30, 174, 251, .3); color: #9bd6ff;
}
.btn-open:hover, .btn-sent:hover { background: rgba(30, 174, 251, .2); border-color: rgba(30, 174, 251, .45); color: #bfe6ff; }
.btn-biz { border-color: rgba(30, 174, 251, .3); }

button.danger { background: transparent; border-color: var(--border); color: var(--muted); }
button.danger:hover:not(:disabled) { background: var(--fill-hover); border-color: var(--err); color: var(--text); }
button.danger:disabled { opacity: .4; cursor: default; }

/* ══════════════════════════════════════════════════════ Admin ══ */
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-4); }
.settings-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.settings-field label { font-size: var(--fs-secondary); color: var(--muted); }
.settings-field .hint { font-size: var(--fs-secondary); color: var(--muted); margin: 0; }
@media (max-width: 900px) { .settings-form { grid-template-columns: 1fr; } }

.admin-controls { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); align-items: center; flex-wrap: wrap; }
.admin-controls select, .admin-controls input, .settings-field input {
  height: 28px;
  background: var(--panel); border: 1px solid var(--hairline); color: var(--text);
  border-radius: var(--radius-sm); padding: 0 var(--sp-3);
  font-family: inherit; font-size: var(--fs-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.admin-controls input:hover, .settings-field input:hover { border-color: rgba(255, 255, 255, .16); }
.admin-controls input:focus, .admin-controls select:focus, .settings-field input:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.admin-controls input[type="number"] { width: 160px; }
.admin-controls input[type="email"], .admin-controls input[type="text"], .admin-controls input[type="password"] { flex: 1; min-width: 160px; }

/* Checkboxi u accentu — jedina "sistemska" kontrola koju ne crtamo sami. */
input[type="checkbox"] { accent-color: var(--accent-dim); width: 14px; height: 14px; cursor: pointer; }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.force-check, .map-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); font-size: var(--fs-body); cursor: pointer;
  height: 28px;
}
.force-check input, .map-check input { padding: 0; }

.save-status { font-size: var(--fs-secondary); color: var(--muted); }
.save-status.error { color: var(--text-strong); }

.crawl-status { font-size: var(--fs-body); color: var(--muted); margin-bottom: var(--sp-3); }
.crawl-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-2); background: var(--muted); }
.crawl-status.running .dot { background: var(--accent); animation: pulse 1.2s infinite; }
.crawl-status.stopped .dot, .crawl-status.error .dot { background: var(--err); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.log-box {
  background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  padding: var(--sp-3); font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-secondary); line-height: 1.5; color: var(--muted);
  height: 420px; overflow-y: auto; white-space: pre-wrap;
}

/* Uređivač poruke u Adminu */
.msg-editor, .queue-msg {
  width: 100%;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  resize: vertical;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.msg-editor:hover, .queue-msg:hover { border-color: rgba(255, 255, 255, .16); }
.msg-editor:focus, .queue-msg:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ══════════════════════════════════════════════════════ Sheet ══ */
/* HIG: standardni neprozirni panel, BEZ vibrancy — ovo je inspektor
   odabranog salona. Sheet klizi odozgo iza toolbara umjesto da iskoči u
   sredini iza tamnog vela; veo je zato blag, tek toliko da odvoji sloj. */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, .28);
  align-items: flex-start; justify-content: center; z-index: 50;
  padding: var(--sp-10) var(--sp-4) var(--sp-8);
  overflow: auto;
}
.modal-backdrop.visible { display: flex; animation: veil .2s var(--ease); }
@keyframes veil { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  padding: var(--sp-6);
  width: min(560px, 92vw);
  margin: auto 0;
  animation: sheet-in .22s var(--ease);
}
@keyframes sheet-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-backdrop.visible { animation: none; }
}
.modal h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-title2); font-weight: 600; color: var(--text-strong); line-height: var(--lh-tight); }
.modal .modal-sub { color: var(--muted); font-size: var(--fs-secondary); margin-bottom: var(--sp-4); word-break: break-all; }
.modal .field-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 28px;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-body);
}
.modal .field-row .k { color: var(--muted); flex: none; }
.modal .field-row .v { text-align: right; word-break: break-word; }
.modal .field-row.editable .v { flex: 1; }
.modal .close-btn {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  background: var(--fill-hover); border: none; border-radius: 50%;
  color: var(--muted); font-size: var(--fs-secondary); line-height: 1; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.modal .close-btn:hover { background: var(--fill-press); color: var(--text-strong); }
.modal .close-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal .history { margin-top: var(--sp-4); }
.modal .history-item { font-size: var(--fs-secondary); color: var(--muted); padding: var(--sp-2) 0; border-bottom: 1px solid var(--hairline); }

/* .contact-input shares the look but is deliberately a separate class —
   "Spremi izmjene" collects .edit-input, and must not pick these up. */
.modal .edit-input, .modal .contact-input {
  width: 100%; min-height: 26px;
  background: var(--bg-deep); border: 1px solid var(--hairline); color: var(--text);
  border-radius: var(--radius-sm); padding: 3px var(--sp-2);
  font-family: inherit; font-size: var(--fs-body); text-align: right;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.modal .edit-input:hover, .modal .contact-input:hover { border-color: rgba(255, 255, 255, .16); }
.modal .edit-input:focus, .modal .contact-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.modal .manual-tag {
  font-size: var(--fs-secondary); color: var(--accent);
  background: var(--accent-soft); border: none;
  border-radius: var(--radius-pill); padding: 1px var(--sp-2); margin-left: var(--sp-2); white-space: nowrap;
}
.modal .modal-actions { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0; }
.modal .save-status { color: var(--accent); }
.modal textarea.edit-input, .modal textarea.contact-input { resize: vertical; text-align: left; }

.contact-box {
  background: var(--bg-deep); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
}
.contact-box-title, .contact-history-title {
  font-size: var(--fs-secondary); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin-bottom: var(--sp-2);
}
.contact-box .field-row:last-of-type { border-bottom: none; }
.contact-box .modal-actions { margin: var(--sp-3) 0 0; }
.contact-meta { font-size: var(--fs-secondary); color: var(--muted); padding-top: var(--sp-2); }

.channel-status-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.chan-status-chip {
  font-size: var(--fs-secondary); padding: 1px var(--sp-2); border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); white-space: nowrap; color: var(--muted);
}
.chan-status-chip.pending { color: var(--muted); }
.chan-status-chip.done { background: var(--accent-soft); border-color: rgba(30, 174, 251, .3); color: #9bd6ff; }
.chip-unmark {
  border: none; background: none; padding: 0; margin-left: var(--sp-1);
  color: inherit; opacity: .6; cursor: pointer; font-size: inherit; line-height: 1;
  transition: opacity .15s var(--ease);
}
.chip-unmark:hover { opacity: 1; }

.contact-history { margin-top: var(--sp-3); border-top: 1px solid var(--hairline); padding-top: var(--sp-3); }

/* ══════════════════════════════════════════════════ Kontaktiranje ══ */
.queue-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.queue-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: border-color .15s var(--ease), opacity .2s var(--ease);
}
.queue-card:hover { border-color: rgba(255, 255, 255, .14); }
.queue-card.done { opacity: .4; }

.queue-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.queue-num {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--fill-hover); color: var(--muted); font-size: var(--fs-secondary);
}
.queue-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.queue-title strong { color: var(--text-strong); font-weight: 600; font-size: var(--fs-body); }
.queue-meta { color: var(--muted); font-size: var(--fs-secondary); }
.queue-value {
  flex: none; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-secondary); color: var(--accent); background: var(--accent-soft);
  padding: 2px var(--sp-2); border-radius: var(--radius-sm);
}

.queue-msg-wrap { position: relative; }
.btn-copy-msg {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  height: 22px; padding: 0 var(--sp-2);
  font-size: var(--fs-secondary);
  border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--hairline);
  color: var(--muted); cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.btn-copy-msg:hover { color: var(--text-strong); border-color: rgba(255, 255, 255, .18); }
.btn-copy-msg:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.queue-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.queue-status { color: var(--accent); font-size: var(--fs-secondary); }
.queue-status.error { color: var(--text-strong); }
.queue-others { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-secondary); color: var(--muted); }

/* Kanali: oznaka nosi jednu punu boju platforme, bez gradijenta i sjaja. */
.chan-chip {
  display: inline-flex; align-items: center; height: 20px;
  margin-left: var(--sp-2); padding: 0 var(--sp-2);
  border-radius: var(--radius-sm); color: #fff; text-decoration: none;
  font-size: var(--fs-secondary); font-weight: 600; border: none;
  transition: filter .15s var(--ease);
}
.chan-chip.ch-instagram { background: #c13584; }
.chan-chip.ch-facebook  { background: #1877f2; }
.chan-chip.ch-email     { background: #2f9e6b; }
.chan-chip.ch-whatsapp  { background: #25d366; color: #08331b; }
.chan-chip:hover { filter: brightness(1.12); }
.chan-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.queue-channels { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-3); }
.chan-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 32px; padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm); background: transparent;
  border-bottom: 1px solid var(--hairline);
  transition: background-color .15s var(--ease);
}
.chan-row:last-child { border-bottom: none; }
.chan-row:hover { background: var(--fill-hover); }
.chan-row.done { opacity: .5; }
.chan-row .chan-chip { margin-left: 0; }
.chan-row-actions { display: flex; align-items: center; gap: var(--sp-3); }
.chan-biz-toggle { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-secondary); color: var(--muted); cursor: pointer; white-space: nowrap; }
.chan-mark-btn { height: 24px; font-size: var(--fs-secondary); padding: 0 var(--sp-2); }
.chan-mark-btn:disabled { opacity: .4; cursor: not-allowed; }
.chan-done-tag { font-size: var(--fs-secondary); color: var(--accent); font-weight: 600; }

/* ══════════════════════════════════════════════════════════ Karta ══ */
#mapCanvas {
  height: 68vh; min-height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--bg);
}
.map-legend { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-secondary); color: var(--text); }
.map-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255, 255, 255, .3); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text-strong); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); }
.leaflet-popup-content { font-size: var(--fs-body); line-height: 1.45; }
.leaflet-popup-content a { color: var(--accent); }
/* OpenStreetMap podloga je svijetla; invertiranje je uklapa u tamno sučelje,
   a hue-rotate vraća vodu i zelenilo u prirodne tonove. Filtar ide samo na
   pločice — točke i skočni prozori ostaju netaknuti. */
#mapCanvas .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }

/* ══════════════════════════════════════════════════════ Prijava ══ */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  width: 100%; max-width: 320px; padding: var(--sp-7);
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.login-logo { justify-content: center; height: auto; margin: 0 0 var(--sp-2); padding: 0; }
.login-field { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-secondary); color: var(--muted); }
.login-field input {
  height: 30px;
  background: var(--bg-deep); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 0 var(--sp-3); color: var(--text-strong);
  font-family: inherit; font-size: var(--fs-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.login-field input:hover { border-color: rgba(255, 255, 255, .16); }
.login-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.login-submit { height: 30px; width: 100%; margin-top: var(--sp-1); }
.login-error {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline); color: var(--text-strong);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-secondary);
}