/* Calendar.co — "Devet puteva do istog kalendara" (tokovi) */
.tokovi { display: none; }
html.js .tokovi { display: block; margin: clamp(26px, 3.5vw, 40px) 0 clamp(28px, 4vw, 48px); }

.tk {
  --tk-rh: 38px;
  --tk-plava: #2a5080;
  --tk-zelena: #2d7a3a;
  --tk-ai: #cc44ee;
  --tk-linija: rgba(19, 36, 52, .10);
  position: relative;
  background: #fff;
  border: 1px solid var(--tk-linija);
  border-radius: 20px;
  box-shadow: var(--senka-2, 0 18px 48px -18px rgba(19, 36, 52, .22));
  padding: clamp(14px, 2.6vw, 30px);
  overflow: hidden;
  text-align: left;
}
.tk::before { /* blaga mrežasta podloga */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(19, 36, 52, .07) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%);
  mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.tk-sema {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 290px) minmax(70px, 1fr) minmax(0, 640px);
  align-items: center;
}
.tk-put-svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
.tk-put { fill: none; stroke: rgba(42, 80, 128, .25); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tk-sjaj { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }

/* izvori */
.tk-izvori { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.tk-grupa-naslov {
  font: 500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mastilo-2, #5B7288); margin: 4px 2px 4px; display: flex; align-items: center; gap: 8px;
}
.tk-grupa-naslov:not(:first-child) { margin-top: 14px; }
.tk-grupa-naslov::after { content: ""; flex: 1; height: 1px; background: var(--tk-linija); }
.tk-pilula {
  position: relative; display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--tk-linija); border-radius: 12px;
  padding: 6px 12px 6px 6px; min-height: 42px;
  font: 700 14px/1.15 "Archivo", sans-serif; color: var(--mastilo, #132434);
  box-shadow: 0 1px 2px rgba(19, 36, 52, .04);
  will-change: transform;
}
.tk-ikona {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tk-c, var(--tk-plava)); background: color-mix(in srgb, var(--tk-c, #2a5080) 11%, #fff);
  transition: background .3s, color .3s;
}
.tk-ikona svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk-pilula.tk-ai .tk-ikona { color: #b030d8; background: linear-gradient(135deg, rgba(255, 133, 179, .22), rgba(119, 34, 204, .16)); }
.tk-naziv { flex: 1; min-width: 0; }
.tk-kratko { display: none; }
.tk-br { font: 500 10.5px/1 "IBM Plex Mono", monospace; color: rgba(91, 114, 136, .75); }
.tk-pilula.tk-puls { border-color: var(--tk-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-c) 16%, transparent), 0 6px 18px -8px var(--tk-c); }
.tk-pilula { transition: border-color .35s, box-shadow .45s; }

.tk-razmak { min-height: 40px; }

/* kalendar */
.tk-kal-omot { position: relative; z-index: 0; min-width: 0; }
.tk-hub {
  position: absolute; z-index: 2; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tk-plava);
  margin: -7px 0 0 -7px; left: 0; top: 50%;
  box-shadow: 0 0 0 5px rgba(42, 80, 128, .10);
}
.tk-kal {
  background: #fff; border: 1px solid var(--tk-linija); border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(19, 36, 52, .28);
}
.tk-kal-glava {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--tk-linija); background: var(--podloga-2, #F5F8FB);
}
.tk-salon { display: flex; align-items: center; gap: 9px; font: 800 14px/1 "Archivo", sans-serif; color: var(--mastilo, #132434); min-width: 0; }
.tk-salon i { flex: none; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #f07a2a, #e0559a); display: block; }
.tk-salon span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-dan { font: 500 11.5px/1 "IBM Plex Mono", monospace; color: var(--mastilo, #132434); background: #fff; border: 1px solid var(--tk-linija); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.tk-dan b { color: var(--tk-plava); font-weight: 600; }

.tk-tabela { display: grid; grid-template-columns: 42px repeat(var(--tk-kol, 5), minmax(0, 1fr)); }
.tk-osoblje { display: contents; }
.tk-osoba {
  border-top: 3px solid var(--tk-c); padding: 8px 4px 7px; text-align: center;
  font: 700 11.5px/1 "Archivo", sans-serif; color: var(--mastilo, #132434);
  border-bottom: 1px solid var(--tk-linija); border-left: 1px solid var(--tk-linija);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-osoba-prazna { border-bottom: 1px solid var(--tk-linija); }
.tk-sati { position: relative; height: calc(var(--tk-rh) * 10); }
.tk-sat { position: absolute; right: 7px; font: 500 9.5px/1 "IBM Plex Mono", monospace; color: rgba(91, 114, 136, .8); transform: translateY(-50%); }
.tk-kol {
  position: relative; height: calc(var(--tk-rh) * 10); border-left: 1px solid var(--tk-linija);
  background-image: linear-gradient(to bottom, var(--tk-linija) 1px, transparent 1px);
  background-size: 100% calc(var(--tk-rh) * 2);
}
.tk-kol::after { /* isprekidana linija na pola sata */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(19, 36, 52, .04) 1px, transparent 1px);
  background-size: 100% var(--tk-rh);
}
.tk-blok {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  border-radius: 7px; border: 1px solid #7cc78c; border-left: 3px solid #3f9d52;
  background: linear-gradient(180deg, #b6e6bf, #a3dcae);
  padding: 4px 5px 3px 6px; overflow: hidden; color: #17421f;
  box-shadow: 0 4px 10px -6px rgba(35, 110, 55, .6);
  font: 600 10.5px/1.25 "Nunito", sans-serif;
}
.tk-bl-t { display: block; overflow: hidden; padding-right: 26px; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.tk-bl-t b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tk-bl-tag {
  position: absolute; right: 4px; top: 4px; font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .04em;
  font-style: normal; color: #2d7a3a; background: rgba(255, 255, 255, .8); padding: 2px 3px; border-radius: 4px;
}
.tk-podnozje {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--tk-linija); background: var(--podloga-2, #F5F8FB);
  font: 500 10.5px/1.2 "IBM Plex Mono", monospace; color: var(--mastilo-2, #5B7288);
}
.tk-podnozje b { color: var(--mastilo, #132434); font-weight: 600; }
.tk-podnozje .tk-ok b { color: var(--tk-zelena); }

.tk-zauz {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; opacity: 0;
  font: 600 10px/1 "IBM Plex Mono", monospace; color: #b02020; background: #fff;
  border: 1px solid rgba(176, 32, 32, .35); border-radius: 6px; padding: 5px 7px;
  box-shadow: 0 8px 18px -8px rgba(176, 32, 32, .45);
}
.tk-zauz b { color: var(--tk-zelena); font-weight: 600; }

/* mobilni raspored */
@media (max-width: 759px) {
  .tk { --tk-rh: 36px; padding: 14px 12px 12px; border-radius: 16px; }
  .tk-sema { grid-template-columns: minmax(0, 1fr); }
  .tk-izvori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .tk-grupa-naslov { display: none; }
  .tk-pilula { flex-direction: column; gap: 5px; padding: 8px 4px 7px; text-align: center; min-height: 0; font-size: 11.5px; }
  .tk-ikona { width: 32px; height: 32px; }
  .tk-naziv { display: none; }
  .tk-kratko { display: block; font: 700 11.5px/1.1 "Archivo", sans-serif; }
  .tk-br { position: absolute; top: 5px; left: 7px; font-size: 8.5px; }
  .tk-razmak { min-height: 64px; }
  .tk-hub { left: 50%; top: 0; }
  .tk-tabela { grid-template-columns: 34px repeat(var(--tk-kol, 3), minmax(0, 1fr)); }
  .tk-osoba.tk-skrij-m, .tk-kol.tk-skrij-m { display: none; }
  .tk-kal-glava { padding: 10px 11px; }
  .tk-salon { font-size: 13px; }
  .tk-dan { font-size: 10.5px; padding: 5px 8px; }
  .tk-blok { left: 2px; right: 2px; font-size: 9.5px; padding: 3px 3px 2px 5px; }
  .tk-bl-t { padding-right: 0; }
  .tk-blok { padding-bottom: 14px; }
  .tk-bl-tag { top: auto; bottom: 3px; font-size: 7px; }
  .tk-sat { right: 5px; font-size: 8.5px; }
  .tk-podnozje { padding: 8px 11px; font-size: 9.5px; }
}
@media (min-width: 760px) and (max-width: 1000px) {
  .tk-sema { grid-template-columns: 200px minmax(40px, 1fr) minmax(0, 1fr); }
  .tk-br { display: none; }
  .tk-blok { font-size: 9.5px; }
}
