/* =====================================================================
   Klubman — vizualni sustav
   Isti tokeni i raspored kao DigitOne ITSM / Sidro (tamna tema zadano,
   svijetla preko prekidača). Boje: --sid-*.
   ===================================================================== */

:root {
  --sid-bg: #10161d; --sid-panel: #182029; --sid-elev: #1d262f;
  --sid-teal: #40a4c7; --sid-teal-d: #3691b0; --sid-green: #81d6a2;
  --sid-text: #e8eef4; --sid-muted: #93a4b4; --sid-dim: #6b7a8c;
  --sid-border: #222c36; --sid-border-2: #2b3744;
  --sid-danger: #e35d5b; --sid-danger-d: #cf4b45; --sid-warn: #e0a63a;
  --sid-radius: 12px;
  --sidebar-width: 240px;
  --header-height: 56px;
  --hover: rgba(255,255,255,.03);
  --teal-soft: rgba(64,164,199,.12);
  --green-soft: rgba(129,214,162,.15);
  --warn-soft: rgba(224,166,58,.15);
  --danger-soft: rgba(227,93,91,.15);
  --ok-bg: #13311f; --ok-txt: #9fe0b8; --ok-brd: #1f4d31;
  --err-bg: #361a1a; --err-txt: #f0a6a4; --err-brd: #5a2a2a;
  --wrn-bg: #352a12; --wrn-txt: #e7c17a; --wrn-brd: #574516;
  --inf-bg: #102a33; --inf-txt: #8fd1e3; --inf-brd: #1d4c5b;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --sid-bg: #f2f4f7; --sid-panel: #ffffff; --sid-elev: #ffffff;
  --sid-teal: #1f86a8; --sid-teal-d: #186d89; --sid-green: #2e9e63;
  --sid-text: #101828; --sid-muted: #475467; --sid-dim: #667085;
  --sid-border: #e4e7ec; --sid-border-2: #d0d5dd;
  --sid-danger: #dc3545; --sid-danger-d: #c22b39; --sid-warn: #b7791f;
  --hover: rgba(0,0,0,.035);
  --teal-soft: rgba(31,134,168,.10);
  --ok-bg: #e8f6ee; --ok-txt: #1e6b3f; --ok-brd: #bfe3cd;
  --err-bg: #fdeaea; --err-txt: #8f2b2b; --err-brd: #f2c2c2;
  --wrn-bg: #fdf4e3; --wrn-txt: #8a6414; --wrn-brd: #f0dcae;
  --inf-bg: #e7f4f8; --inf-txt: #1c5c70; --inf-brd: #bfe0ea;
  color-scheme: light;
}
/* Svijetla tema: bočni izbornik ostaje taman (prijedlog A) */
:root[data-theme="light"] .sidebar {
  --sid-bg: #0f1b2a; --sid-panel: #18283c; --sid-text: #ffffff; --sid-muted: #b4c1cf; --sid-dim: #6f8399;
  --sid-border: rgba(255,255,255,.07); --sid-teal: #6cc4e2; --teal-soft: rgba(108,196,226,.14);
  color-scheme: dark;
}
:root[data-theme="light"] .main-header { background: #ffffff; }
:root[data-theme="light"] .ploca, :root[data-theme="light"] .metrika { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sid-bg); color: var(--sid-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'tnum' 0;
}
/* tanka gornja teal -> zelena traka */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: linear-gradient(90deg, var(--sid-teal), var(--sid-green));
}
a { color: var(--sid-teal); text-decoration: none; }
a:hover { color: var(--sid-teal-d); }
h1, h2, h3 { margin: 0; color: var(--sid-text); }
::selection { background: rgba(64,164,199,.3); }
* { scrollbar-color: var(--sid-border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sid-border-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
.tiho { color: var(--sid-muted); }
.jako { font-weight: 600; color: var(--sid-text); }
.jako a { color: var(--sid-text); }
.jako a:hover { color: var(--sid-teal); }

/* =====================================================================
   Raspored: sidebar + glavni dio
   ===================================================================== */
.wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width); background: var(--sid-bg); border-right: 1px solid var(--sid-border);
  position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 1000;
  transition: transform .3s ease; padding-top: 3px;
}
.sidebar-header {
  padding: 16px 20px; border-bottom: 1px solid var(--sid-border);
  display: flex; align-items: center; gap: 12px; color: var(--sid-text);
}
.sidebar-header:hover { color: var(--sid-text); }
.sidebar-header .logo-img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; }
.sidebar-header .logo-icon {
  width: 36px; height: 36px; border-radius: 8px; background: var(--sid-teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: 0 0 auto;
}
.sidebar-header h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.sidebar-header small { display: block; color: var(--sid-muted); font-size: 11px; margin-top: 2px; }

.sidebar-nav { padding: 12px 0; }
.nav-section { margin-bottom: 8px; }
.nav-section-title {
  padding: 8px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--sid-dim);
}
/* odjeljci izbornika kao harmonika */
.nav-section.sklopiv { margin-bottom: 2px; }
button.nav-section-title {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; border-radius: 6px; margin: 0; transition: color .15s;
}
button.nav-section-title:hover { color: var(--sid-text); }
button.nav-section-title .strelica { margin-left: auto; font-size: 11px; transition: transform .2s; }
.nav-section.otvoren > button.nav-section-title { color: var(--sid-muted); }
.nav-section.otvoren > button.nav-section-title .strelica { transform: rotate(180deg); }
.nav-section-title .tockica { width: 6px; height: 6px; border-radius: 50%; background: var(--sid-teal); }
.nav-section.sklopiv > .nav-section-sadrzaj { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-section.sklopiv .nav-unutra { min-height: 0; overflow: hidden; }
.nav-section.sklopiv:not(.otvoren) .nav-unutra { visibility: hidden; transition: visibility 0s .22s; }
.nav-section.sklopiv.otvoren > .nav-section-sadrzaj { grid-template-rows: 1fr; }
.nav-section.bez-animacije > .nav-section-sadrzaj, .nav-section.bez-animacije .nav-unutra, .nav-section.bez-animacije .strelica { transition: none !important; }
.nav-item { margin: 1px 8px; }
.nav-link {
  display: flex; align-items: center; width: 100%; padding: 10px 12px; color: var(--sid-muted);
  border-radius: 6px; border-left: 3px solid transparent; font-size: 13px; font-weight: 500;
  background: none; border-top: 0; border-right: 0; border-bottom: 0; font-family: inherit;
  cursor: pointer; text-align: left; transition: all .15s ease;
}
.nav-link:hover { background: var(--sid-panel); color: var(--sid-text); }
.nav-link.active { background: var(--teal-soft); color: var(--sid-teal); border-left-color: var(--sid-teal); }
.nav-link > i:first-child { width: 20px; margin-right: 10px; font-size: 16px; text-align: center; }
.nav-link .strelica { margin-left: auto; font-size: 11px; transition: transform .2s; }
.nav-grupa.otvorena .strelica { transform: rotate(90deg); }
.nav-pod { display: none; padding: 2px 0 4px 33px; }
.nav-grupa.otvorena .nav-pod { display: block; }
.nav-pod a { display: block; padding: 7px 12px; font-size: 13px; color: var(--sid-muted); border-radius: 6px; }
.nav-pod a:hover { background: var(--sid-panel); color: var(--sid-text); }
.nav-pod a.active { color: var(--sid-teal); font-weight: 600; }

.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }

.main-header {
  height: var(--header-height); background: var(--sid-bg); border-bottom: 1px solid var(--sid-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 100; margin-top: 3px;
}
.header-left, .header-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-title { font-size: 16px; font-weight: 600; color: var(--sid-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--sid-muted); padding: 4px; }

.oznaka-konzole { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--warn-soft); color: var(--sid-warn); }

.padajuci { position: relative; }
.padajuci-meni {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 1100;
  background: var(--sid-panel); border: 1px solid var(--sid-border-2); border-radius: 8px; padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.padajuci.otvoren .padajuci-meni { display: block; }
.padajuci-meni a, .padajuci-meni button {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 14px; font-size: 13px; border-radius: 4px; color: var(--sid-text); cursor: pointer;
}
.padajuci-meni a:hover, .padajuci-meni button:hover { background: var(--sid-elev); color: var(--sid-teal); }
.padajuci-meni .crveno { color: var(--sid-danger); }
.padajuci-meni hr { border: 0; border-top: 1px solid var(--sid-border); margin: 6px 0; }
.padajuci-meni form { margin: 0; }
.padajuci-meni .aktivna-tema { color: var(--sid-teal); }

.tema-gumb {
  width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--sid-border-2); background: transparent;
  color: var(--sid-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.tema-gumb:hover { color: var(--sid-text); }

.user-menu { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 4px; background: none; border: 0; font-family: inherit; }
.user-info { text-align: right; }
.user-name { font-size: 13px; font-weight: 600; color: var(--sid-text); }
.user-role { font-size: 11px; color: var(--sid-muted); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sid-teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: 0 0 auto;
}

.content-wrapper { padding: 24px; flex: 1; }

.posjet {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 24px;
  background: var(--wrn-bg); color: var(--wrn-txt); border-bottom: 1px solid var(--wrn-brd); font-size: 13px;
}
.posjet strong { color: var(--wrn-txt); }
.posjet form { margin: 0 0 0 auto; }
button.veza { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline; color: var(--wrn-txt); }

.sidebar-zavjesa { display: none; }

/* =====================================================================
   Naslov stranice, metrike, ploče
   ===================================================================== */
.naslov-red { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.naslov-red h1 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.naslov-red .pod { margin: 4px 0 0; color: var(--sid-muted); font-size: 13.5px; }
.akcije-red { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.akcije-red form { margin: 0; }

.metrike { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.metrika { background: var(--sid-panel); border: 1px solid var(--sid-border); border-radius: var(--sid-radius); padding: 16px 18px; display: flex; flex-direction: column; }
.metrika .opis { order: -1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sid-muted); }
.metrika .vrijednost { font-size: 26px; font-weight: 700; color: var(--sid-text); line-height: 1.25; margin-top: 4px; }

.ploca { background: var(--sid-panel); border: 1px solid var(--sid-border); border-radius: var(--sid-radius); margin-bottom: 20px; overflow: hidden; }
.ploca > .vrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--sid-border); }
.ploca > .vrh h2 { font-size: 15px; font-weight: 600; }
.ploca > .vrh .tiho { font-size: 12.5px; }
.ploca.opasna { border-color: var(--err-brd); }
.ploca.opasna > .vrh h2 { color: var(--sid-danger); }

.stupci { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.stupac { display: flex; flex-direction: column; }

.nista { padding: 36px 20px; text-align: center; color: var(--sid-muted); font-size: 13.5px; }

/* =====================================================================
   Tablice
   ===================================================================== */
.tablica { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablica thead th {
  text-align: left; padding: 11px 16px; color: var(--sid-dim); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--sid-border); white-space: nowrap;
}
.tablica tbody td { padding: 13px 16px; border-bottom: 1px solid var(--sid-border); vertical-align: middle; color: var(--sid-text); }
.tablica tbody tr:last-child td { border-bottom: 0; }
.tablica tbody tr:hover { background: var(--hover); }
.tablica td.akcije, .tablica th.akcije { text-align: right; white-space: nowrap; }
.tablica td.akcije form { display: inline; margin: 0; }
.tablica td.istek { color: var(--sid-danger); font-weight: 600; }
.tablica .tiho { font-size: 12px; }
tr.ugasen td { opacity: .55; }
.ugasen { opacity: .55; }

.stranice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--sid-border); font-size: 13px; }
.u-nizu { display: inline-flex; gap: 6px; align-items: center; }

/* =====================================================================
   Gumbi
   ===================================================================== */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
  font-size: 13px; font-weight: 500; font-family: inherit; line-height: 1.3; border-radius: 6px; cursor: pointer;
  background: var(--sid-elev); border: 1px solid var(--sid-border-2); color: var(--sid-text);
  white-space: nowrap; transition: all .15s ease; text-decoration: none;
}
.gumb:hover { background: var(--sid-border); color: var(--sid-text); }
:root[data-theme="light"] .gumb { background: #eef1f5; }
:root[data-theme="light"] .gumb:hover { background: #e3e8ee; }
.gumb-glavni, :root[data-theme="light"] .gumb-glavni { background: var(--sid-teal); border-color: var(--sid-teal); color: #fff; }
.gumb-glavni:hover, :root[data-theme="light"] .gumb-glavni:hover { background: var(--sid-teal-d); border-color: var(--sid-teal-d); color: #fff; }
.gumb-opasno, :root[data-theme="light"] .gumb-opasno { background: var(--sid-danger); border-color: var(--sid-danger); color: #fff; }
.gumb-opasno:hover, :root[data-theme="light"] .gumb-opasno:hover { background: var(--sid-danger-d); border-color: var(--sid-danger-d); color: #fff; }
.gumb-signal { background: var(--sid-warn); border-color: var(--sid-warn); color: #1f1505; font-weight: 600; }
.gumb-tih, :root[data-theme="light"] .gumb-tih { background: transparent; border-color: transparent; color: var(--sid-muted); }
.gumb-tih:hover, :root[data-theme="light"] .gumb-tih:hover { background: var(--sid-elev); color: var(--sid-text); }
.gumb-nizak { padding: 5px 10px; font-size: 12px; }
.gumb-puni { width: 100%; padding: 10px 16px; }
.gumb.ugasen { pointer-events: none; }
.ikona-gumb { all: unset; cursor: pointer; color: var(--sid-muted); padding: 2px 6px; border-radius: 4px; }
.ikona-gumb:hover { color: var(--sid-danger); background: var(--sid-elev); }

/* =====================================================================
   Obrasci
   ===================================================================== */
.obrazac { padding: 6px 18px 18px; }
.polje { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.polje label { font-size: 13px; font-weight: 500; color: var(--sid-text); }
.polje label .tiho { font-weight: 400; font-size: 12px; }
.polje .pomoc { font-size: 12px; color: var(--sid-muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=date], input[type=tel], select, textarea {
  width: 100%; font-family: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  background: var(--sid-elev); border: 1px solid var(--sid-border-2); color: var(--sid-text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--sid-dim); }
input[readonly] { opacity: .7; cursor: default; }
input:focus, select:focus, textarea:focus { border-color: var(--sid-teal); box-shadow: 0 0 0 3px rgba(64,164,199,.2); }
select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393a4b4'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px;
}
input[type=checkbox] { accent-color: var(--sid-teal); width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.6); }
:root[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator { filter: none; }

.mreza-polja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.mreza-polja .s2 { grid-column: span 2; }
.polja { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.odsjek { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 18px 0 4px; border-top: 1px solid var(--sid-border); }
.odsjek:first-child { border-top: 0; }
.odsjek > h3 { font-size: 13.5px; font-weight: 600; padding-top: 4px; }
.odsjek > h3 .uz { display: block; font-size: 12px; font-weight: 400; color: var(--sid-muted); margin-top: 2px; }
.odsjek > p, .odsjek > .gumb { grid-column: 2; }
.odsjek > .gumb { justify-self: start; }

.obrazac-vrh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 14px 0 6px; }
.obrazac-vrh .imena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 16px; }

.spremanje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 20px; }
.spremanje .biljeska { margin-left: auto; font-size: 12.5px; color: var(--sid-muted); }

/* Grb */
.grb-okvir {
  width: 104px; height: 104px; border-radius: 12px; border: 1px dashed var(--sid-border-2); background: var(--sid-elev);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer;
}
.grb-okvir.nad { border-color: var(--sid-teal); background: var(--teal-soft); }
.grb-okvir img { width: 88%; height: 88%; object-fit: contain; }
.grb-okvir .slova { font-size: 30px; font-weight: 700; color: var(--sid-muted); }
.grb-okvir .natuknica { position: absolute; bottom: 0; left: 0; right: 0; font-size: 10.5px; text-align: center; padding: 3px; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s; }
.grb-okvir:hover .natuknica { opacity: 1; }
.grb-akcije { display: flex; gap: 6px; margin-top: 8px; }
.grb-akcije .gumb { padding: 5px 10px; font-size: 12px; }

/* =====================================================================
   Značke, napomene
   ===================================================================== */
.znak { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; background: var(--sid-elev); color: var(--sid-muted); white-space: nowrap; vertical-align: middle; }
.znak.dobra { background: var(--green-soft); color: var(--sid-green); }
.znak.ceka  { background: var(--warn-soft); color: var(--sid-warn); }
.znak.losa  { background: var(--danger-soft); color: var(--sid-danger); }
.znak.radna { background: var(--teal-soft); color: var(--sid-teal); }
.znak.tamna { background: var(--sid-elev); color: var(--sid-muted); border: 1px solid var(--sid-border-2); }
.naslov-red h1 .znak { font-size: 11.5px; }

.napomena { border-radius: var(--sid-radius); padding: 12px 16px; margin-bottom: 18px; font-size: 13px; border: 1px solid transparent; }
.napomena.uspjeh { background: var(--ok-bg); color: var(--ok-txt); border-color: var(--ok-brd); }
.napomena.greska { background: var(--err-bg); color: var(--err-txt); border-color: var(--err-brd); }
.napomena.info   { background: var(--inf-bg); color: var(--inf-txt); border-color: var(--inf-brd); }
.napomena .tiho { color: inherit; opacity: .8; }

.tajna {
  display: inline-block; background: var(--sid-elev); border: 1px solid var(--sid-border-2); border-radius: 6px;
  padding: 3px 10px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 15px; color: var(--sid-text);
  user-select: all; margin: 0 6px;
}
.lozinka-jednom .tiho { margin-top: 4px; }

/* =====================================================================
   Sažetci, caffe, moduli, ostalo
   ===================================================================== */
.par-redak { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13.5px; }
.par-redak span { color: var(--sid-muted); }
.par-redak strong { color: var(--sid-text); font-weight: 600; text-align: right; }
.sazetak .par-redak { border-bottom: 1px solid var(--sid-border); }
.sazetak .par-redak:last-of-type { border-bottom: 0; }
.crta { border: 0; border-top: 1px solid var(--sid-border); margin: 14px 0; }

.caffe-unos { display: flex; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--sid-border); }
.caffe-unos input { flex: 1; }
.caffe-red { padding: 13px 18px; border-bottom: 1px solid var(--sid-border); }
.caffe-red:last-child { border-bottom: 0; }
.caffe-red .tko { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.caffe-red .tko form { margin: 0; }
.caffe-red .krug { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-soft); color: var(--sid-teal); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.caffe-red .tko strong { font-size: 13px; color: var(--sid-text); }
.caffe-red .tko time { font-size: 11.5px; color: var(--sid-dim); margin-left: auto; }
.caffe-red p { margin: 0; font-size: 13.5px; }

.popis-modula { list-style: none; margin: 0; padding: 4px 18px 10px; }
.popis-modula li { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; border-bottom: 1px solid var(--sid-border); }
.popis-modula li:last-child { border-bottom: 0; }
.popis-modula strong { font-size: 13.5px; font-weight: 600; }
.popis-modula span { color: var(--sid-muted); font-size: 12.5px; }

.moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 16px 18px; }
.modul { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 12px; border: 1px solid var(--sid-border-2); border-radius: 10px; background: var(--sid-elev); cursor: pointer; }
.modul.ukljucen { border-color: var(--sid-teal); background: var(--teal-soft); }
.modul.jezgra { opacity: .75; cursor: default; }
.modul input[type=checkbox] { margin: 3px 0 0; }
.modul strong { font-size: 13.5px; font-weight: 600; }
.modul .opis { grid-column: 2; font-size: 12px; color: var(--sid-muted); }
.modul .ovisi { grid-column: 2; font-size: 11.5px; color: var(--sid-dim); }
.modul .rok { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sid-muted); white-space: nowrap; margin-top: 2px; }
.modul .rok input[type=date] { width: 140px; padding: 4px 8px; font-size: 12px; border-radius: 6px; }
.paketi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px 0; }
.paketi + form .paketi, form > .paketi:last-child { padding: 0 18px 16px; }

.opasna-zona { padding: 14px 18px 18px; }
.opasna-zona p { margin: 0 0 12px; font-size: 13px; }
.opasna-zona form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.opasna-zona input { flex: 1; min-width: 200px; }

.alati { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.alati input[type=search] { width: 240px; }
.alati select { width: auto; min-width: 150px; }

.u-izradi { text-align: center; padding: 48px 24px; }
.u-izradi > i.bi { font-size: 40px; color: var(--sid-dim); }
.u-izradi h2 { margin: 12px 0 6px; font-size: 18px; }
.u-izradi p { margin: 0 0 18px; }

/* =====================================================================
   Prijava
   ===================================================================== */
.vrata { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--sid-bg); }
.vrata-panel {
  width: 100%; max-width: 400px; background: var(--sid-panel); border: 1px solid var(--sid-border-2);
  border-radius: 12px; padding: 36px 34px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
:root[data-theme="light"] .vrata-panel { box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.vrata-znak { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.vrata-znak img { width: 52px; height: 52px; }
.vrata-znak span { font-weight: 700; letter-spacing: .08em; font-size: 18px; color: var(--sid-text); }
.vrata-panel h1 { font-size: 20px; font-weight: 700; text-align: center; }
.vrata-panel .uvod { text-align: center; color: var(--sid-muted); margin: 6px 0 22px; font-size: 13.5px; }

/* =====================================================================
   Igrači: avatar, profil, kartice, kontakti, skrbnici
   ===================================================================== */
.mali { font-size: 12px; }
.mreza-polja .s4 { grid-column: 1 / -1; }
textarea { resize: vertical; min-height: 60px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--sid-teal); font-weight: 600; font-size: 14px;
}
.avatar.z { background: rgba(196, 98, 160, .14); color: #c4629f; }
.avatar.malen { width: 32px; height: 32px; font-size: 12px; }
.avatar.velik { width: 84px; height: 84px; font-size: 28px; border: 3px solid var(--sid-panel); box-shadow: 0 0 0 1px var(--sid-border-2); }

.osoba-redak { display: flex; align-items: center; gap: 10px; color: inherit; }
.osoba-redak:hover .jako { color: var(--sid-teal); }
.osoba-redak > span { display: flex; flex-direction: column; min-width: 0; }

.profil-glava {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--sid-panel); border: 1px solid var(--sid-border); border-radius: var(--sid-radius);
  padding: 20px 22px; margin-bottom: 16px;
}
:root[data-theme="light"] .profil-glava { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); }
.profil-ime { flex: 1 1 260px; min-width: 0; }
.profil-ime h1 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profil-pod { display: flex; gap: 14px; flex-wrap: wrap; color: var(--sid-muted); font-size: 13px; margin-top: 4px; }
.profil-pod i { margin-right: 3px; }
.profil-momcadi { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.profil-akcije { margin-left: auto; }

.kartice { display: flex; gap: 2px; border-bottom: 1px solid var(--sid-border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.kartice a {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; white-space: nowrap;
  color: var(--sid-muted); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kartice a:hover { color: var(--sid-text); }
.kartice a.active { color: var(--sid-teal); border-bottom-color: var(--sid-teal); }

.kontakt-red { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--sid-border); }
.kontakt-red:last-child { border-bottom: 0; }
.kontakt-red.osoba-redak { flex-direction: row; }
.kontakt-ime { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kontakt-veze { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13px; }
.kontakt-veze i { margin-right: 4px; }
.kontakt-napomena { flex-direction: row; align-items: center; gap: 10px; }
.ploca .biljeska { padding: 10px 0; border-bottom: 1px solid var(--sid-border); }
.ploca .biljeska:last-child { border-bottom: 0; }
.ploca .biljeska p { margin: 4px 0 0; }

.grb-okvir.okrugao { border-radius: 50%; }
.grb-okvir.okrugao img { width: 100%; height: 100%; object-fit: cover; }
.grb-okvir .slova i { font-size: 22px; margin-left: 4px; }

.skrbnik-red { display: grid; grid-template-columns: minmax(0, 1.3fr) 110px 130px minmax(0, 1.3fr) minmax(0, 1fr) 28px; gap: 0 12px; align-items: end; }
.skrbnik-red .ikona-gumb { margin-bottom: 22px; text-align: center; }
.kvacice { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.kvacice label {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--sid-border-2); background: var(--sid-elev); font-size: 13px;
}
.kvacice label:has(input:checked) { border-color: var(--sid-teal); background: var(--teal-soft); }

/* =====================================================================
   Polje za datum i kalendar (hrvatski, ne ovisi o jeziku preglednika)
   ===================================================================== */
.datum-omot { position: relative; display: block; }
.datum-omot input.datum { padding-right: 40px; }
.datum-gumb {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 30px;
  border: 0; background: none; color: var(--sid-muted); cursor: pointer; border-radius: 6px; font-size: 15px;
}
.datum-gumb:hover { color: var(--sid-teal); background: var(--teal-soft); }
.kalendar {
  display: none; position: absolute; z-index: 1300; width: 296px; padding: 12px;
  background: var(--sid-panel); border: 1px solid var(--sid-border-2); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35); color: var(--sid-text);
}
:root[data-theme="light"] .kalendar { box-shadow: 0 14px 40px rgba(16,24,40,.16); }
.kalendar.otvoren { display: block; }
.kal-vrh { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.kal-vrh select { padding: 6px 8px; font-size: 13px; }
.kal-vrh .kal-mj { flex: 1.4; }
.kal-vrh .kal-god { flex: 1; }
.kal-str { border: 0; background: none; color: var(--sid-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.kal-str:hover { background: var(--sid-elev); color: var(--sid-text); }
.kal-dani, .kal-mreza { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-dani span { text-align: center; font-size: 11px; font-weight: 600; color: var(--sid-dim); padding: 4px 0; text-transform: uppercase; }
.kal-mreza button {
  height: 36px; border: 0; border-radius: 8px; background: none; color: var(--sid-text);
  font-family: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.kal-mreza button:hover { background: var(--sid-elev); }
.kal-mreza button.drugi { color: var(--sid-dim); }
.kal-mreza button.danas { box-shadow: inset 0 0 0 1px var(--sid-teal); }
.kal-mreza button.odabran { background: var(--sid-teal); color: #fff; font-weight: 600; }
.kal-mreza button:disabled { opacity: .3; cursor: default; background: none; }
.kal-dno { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sid-border); }
.kal-dno button { flex: 1; border: 1px solid var(--sid-border-2); background: var(--sid-elev); color: var(--sid-text); border-radius: 8px; padding: 7px; font-family: inherit; font-size: 12.5px; cursor: pointer; }
.kal-dno button:hover { color: var(--sid-teal); }
.kal-dno .kal-zatvori { display: none; }
.kal-zavjesa { display: none; }
/* mobitel: kalendar kao ploča odozdo */
.kalendar.dno {
  position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto;
  border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.kalendar.dno .kal-mreza button { height: 44px; font-size: 15px; }
.kalendar.dno .kal-vrh select { font-size: 16px; padding: 9px 10px; }
.kalendar.dno .kal-dno button { padding: 11px; font-size: 14px; }
.kalendar.dno .kal-zatvori { display: block; }
.kal-zavjesa.otvoren { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1250; }

.obrazac-vrh .imena.jednako { grid-template-columns: repeat(2, minmax(0, 300px)); }
.kvacica-red { display: flex !important; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; }
.kvacica-red input { margin-top: 3px; }
.kvacica-red .pomoc { display: block; font-weight: 400; margin-top: 2px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sid-teal); flex: 0 0 auto; }

/* =====================================================================
   Prijedlozi dok tipkaš i poštanski broj
   ===================================================================== */
.predlozi-omot { position: relative; }
.predlozi {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1200;
  list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto;
  background: var(--sid-panel); border: 1px solid var(--sid-border-2); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
:root[data-theme="light"] .predlozi { box-shadow: 0 12px 30px rgba(16,24,40,.14); }
.predlozi.otvoren { display: block; }
.predlozi li { padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: var(--sid-text); }
.predlozi li strong { color: var(--sid-teal); font-weight: 600; }
.predlozi li:hover, .predlozi li.aktivan { background: var(--teal-soft); }
input.popunjeno { border-color: var(--sid-green); box-shadow: 0 0 0 3px var(--green-soft); }
.posta-napomena:empty { display: none; }
.posta-napomena { color: var(--sid-warn); }

/* =====================================================================
   Momčadi, treneri, lokacije
   ===================================================================== */
.boja-tocka { width: 12px; height: 12px; border-radius: 50%; background: var(--boja); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--boja) 22%, transparent); }
.momcad-redak { display: flex; align-items: center; gap: 12px; color: inherit; }
.momcad-redak > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.momcad-redak:hover .jako { color: var(--sid-teal); }
.kontakt-red.momcad-redak { flex-direction: row; }
.momcad-glava { border-top: 4px solid var(--boja); }
.momcad-znak {
  width: 72px; height: 72px; border-radius: 16px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff; background: var(--boja);
}
.avatar.trener { background: rgba(224, 166, 58, .16); color: var(--sid-warn); }

.stozer-popis { display: flex; flex-direction: column; gap: 6px; }
.stozer-red {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 190px; align-items: center; gap: 12px;
  padding: 8px 10px; border: 1px solid var(--sid-border); border-radius: 10px; cursor: default;
}
.stozer-red.odabran { border-color: var(--sid-teal); background: var(--teal-soft); }
.stozer-ime { display: flex; flex-direction: column; font-weight: 500; }
.stozer-red select { padding: 7px 10px; }

.boje { display: flex; flex-wrap: wrap; gap: 10px; }
.boja { position: relative; cursor: pointer; }
.boja input { position: absolute; opacity: 0; pointer-events: none; }
.boja span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--boja); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); transition: transform .12s; }
.boja:hover span { transform: scale(1.1); }
.boja input:checked + span { box-shadow: 0 0 0 3px var(--sid-panel), 0 0 0 5px var(--boja); }
.boja input:focus-visible + span { outline: 2px solid var(--sid-teal); outline-offset: 4px; }

.kartice-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.kartice-mreza .ploca { margin-bottom: 0; }
.ploca.lokacija h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ploca.lokacija h2 i { color: var(--sid-teal); }

/* =====================================================================
   Termini lokacija
   ===================================================================== */
.termin-red {
  display: grid; grid-template-columns: 150px 100px 100px minmax(0, 1fr) 28px; gap: 0 12px; align-items: end;
}
.termin-red .ikona-gumb { margin-bottom: 22px; text-align: center; }
.vrijeme-polje { font-variant-numeric: tabular-nums; text-align: center; letter-spacing: .02em; }
input.neispravno { border-color: var(--sid-danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.termin-dodjela { grid-column: 1 / -1; margin: -8px 0 12px; }
.termini-tjedan { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.termin-dan { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: start; }
.termin-dan .dan { font-weight: 600; font-size: 12px; color: var(--sid-muted); text-transform: uppercase; padding-top: 3px; }
.termin-stavka { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; }
.termin-stavka .vrijeme { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 92px; }
.znak.momcad-znak-mali { background: color-mix(in srgb, var(--boja) 16%, transparent); color: var(--boja); }
:root[data-theme="light"] .znak.momcad-znak-mali { color: color-mix(in srgb, var(--boja) 75%, #000); }
.termini-lokacija { margin-bottom: 14px; }
.termini-lokacija-naziv { font-weight: 600; font-size: 13px; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.termini-lokacija-naziv i { color: var(--sid-teal); }
.termin-izbor { align-items: flex-start !important; }
.termin-izbor > span { display: flex; flex-direction: column; line-height: 1.35; font-variant-numeric: tabular-nums; }
.termin-izbor .dijeli { font-size: 11.5px; color: var(--sid-warn); }
.termin-popis { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Kalendar: tjedna mreža (dan -> trake lokacija -> blokovi u boji momčadi)
   ===================================================================== */
.kal-metrike .metrika.upozori .vrijednost { color: var(--sid-warn); }
.kal-metrike .metrika.opasno .vrijednost { color: var(--sid-danger); }
.kal-metrike .metrika.dobro .vrijednost { color: var(--sid-green); }
.traka-napretka { display: block; height: 6px; border-radius: 4px; background: var(--sid-elev); overflow: hidden; margin-top: 8px; }
.traka-napretka > span { display: block; height: 100%; background: var(--sid-teal); border-radius: 4px; }
.traka-napretka.boja > span { background: var(--boja); }
.kal-sukobi ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.kal-sukobi li { margin: 4px 0; display: flex; gap: 8px; }

.kal-filteri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.kal-filteri select { width: auto; min-width: 170px; }
.kal-moje { margin: 0 6px; }
.kal-legenda { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.kal-legenda-red { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; }
.kal-lok { color: var(--sid-muted); }
.kal-lok b, .kal-slovo {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; white-space: nowrap;
  background: var(--sid-elev); border: 1px solid var(--sid-border-2); color: var(--sid-text); font-size: 10.5px; font-weight: 700; margin-right: 3px;
}
.kal-momcad {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sid-border); background: var(--sid-panel);
  color: var(--sid-text); border-radius: 20px; padding: 4px 10px 4px 8px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.kal-momcad i { width: 10px; height: 10px; border-radius: 50%; background: var(--boja); }
.kal-momcad:hover, .kal-momcad.aktivna { border-color: var(--boja); background: color-mix(in srgb, var(--boja) 12%, transparent); }

.prekidac-prikaza { display: inline-flex; border: 1px solid var(--sid-border-2); border-radius: 8px; overflow: hidden; }
.prekidac-prikaza .gumb { border: 0; border-radius: 0; background: transparent; }
.prekidac-prikaza .gumb.active { background: var(--teal-soft); color: var(--sid-teal); }

.raspored { overflow: clip; }
.rsp-glava, .rsp-tijelo { display: grid; grid-template-columns: var(--stupci, 52px repeat(7, minmax(0, 1fr))); }
.rsp-klizac { overflow-x: auto; overscroll-behavior-x: contain; position: relative; }
.raspored { position: relative; }
.raspored.klizi::after, .raspored.klizi-lijevo::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; z-index: 6;
}
.raspored.klizi::after { right: 0; background: linear-gradient(to left, color-mix(in srgb, var(--sid-bg) 70%, transparent), transparent); }
.raspored.klizi-lijevo::before { left: 52px; background: linear-gradient(to right, color-mix(in srgb, var(--sid-bg) 70%, transparent), transparent); }
.rsp-unutra { min-width: var(--min-sirina, 0); }
.rsp-glava { border-bottom: 1px solid var(--sid-border); background: var(--sid-panel); }
.rsp-dan-glava { padding: 10px 6px 6px; text-align: center; border-left: 1px solid var(--sid-border); display: flex; flex-direction: column; gap: 1px; }
.rsp-dan-glava strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsp-dan-glava.danas strong { color: var(--sid-teal); }
.rsp-trake-glava { display: grid; grid-template-columns: repeat(var(--trake), 1fr); gap: 2px; margin-top: 6px; }
.rsp-trake-glava span {
  font-size: 10.5px; font-weight: 700; color: var(--sid-muted); background: var(--sid-elev); border-radius: 4px; padding: 1px 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: default;
}
.rsp-tijelo { height: calc(var(--visina) + 10px); position: relative; padding-bottom: 10px; }
.rsp-crte { position: absolute; left: 52px; right: 0; top: 0; bottom: 10px; pointer-events: none; }
.rsp-crta { position: absolute; left: 0; right: 0; height: 1px; background: var(--sid-border); }
.rsp-crta.pola { background: color-mix(in srgb, var(--sid-border) 45%, transparent); }
.rsp-praznina {
  position: absolute; left: -52px; right: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--sid-dim) 10%, transparent) 6px 12px);
  border-top: 1px dashed var(--sid-border-2); border-bottom: 1px dashed var(--sid-border-2);
}
.rsp-praznina span { font-size: 11px; color: var(--sid-dim); background: var(--sid-panel); padding: 1px 8px; border-radius: 10px; }
.rsp-os { position: sticky; left: 0; z-index: 4; background: var(--sid-panel); }
.rsp-kut { position: sticky; left: 0; z-index: 4; background: var(--sid-panel); }
.rsp-os span {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 11px; color: var(--sid-dim); font-variant-numeric: tabular-nums;
}
.rsp-os span:first-child { transform: translateY(-2px); }
.rsp-dan {
  position: relative; border-left: 1px solid var(--sid-border); display: grid; grid-template-columns: repeat(var(--trake), minmax(0, 1fr)); gap: 2px; padding: 0 2px;
}
.rsp-dan.danas { background-color: color-mix(in srgb, var(--sid-teal) 5%, transparent); }
.rsp-traka { position: relative; min-width: 0; }
.rsp-traka + .rsp-traka { box-shadow: -1px 0 0 color-mix(in srgb, var(--sid-border) 60%, transparent); }

.rsp-blok {
  position: absolute; left: 1px; right: 1px;
  border: 0; border-radius: 6px; padding: 3px 5px 3px 8px; cursor: pointer; text-align: left; font: inherit; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; color: var(--sid-text);
  background: color-mix(in srgb, var(--boja) 22%, var(--sid-panel));
  transition: transform .12s, box-shadow .12s, opacity .15s;
}
.rsp-blok::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--boja); }
.rsp-blok.dijeljen { background: var(--sid-elev); }
.rsp-blok.dijeljen::before { background: var(--pruge); }
.rsp-blok:hover, .rsp-blok:focus-visible { z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.25); transform: translateY(-1px); outline: none; }
.rsp-blok.slobodan {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--sid-dim) 14%, transparent) 6px 12px);
  border: 1.5px dashed var(--sid-border-2); color: var(--sid-muted);
}
.rsp-blok.slobodan::before { display: none; }
.rsp-blok.sukob { box-shadow: 0 0 0 2px var(--sid-danger); }
.rsp-blok.prigusen, .kal-stavka.prigusen { opacity: .18; }
.rsp-vrijeme { font-size: 10.5px; font-weight: 600; color: var(--sid-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsp-ime { font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsp-znak-sukoba { position: absolute; right: 4px; top: 3px; color: var(--sid-danger); font-size: 11px; }
.rsp-sad { position: absolute; left: 0; right: 0; height: 2px; background: var(--sid-danger); z-index: 4; pointer-events: none; }
.rsp-sad::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sid-danger); }
/* u uskim trakama skrati sadržaj */

.rsp-slovo { margin-left: 5px; font-size: 9.5px; padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--sid-text) 10%, transparent); color: var(--sid-muted); }
.rsp-blok.nizak .rsp-ime { -webkit-line-clamp: 1; }
.rsp-blok.bez-trenera .rsp-trener { display: none; }
.rsp-blok.dijeljen.nizak .rsp-ime { font-size: 10.5px; }
.rsp-blok.dijeljen .rsp-ime { font-size: 10.5px; letter-spacing: -.1px; }
.rsp-blok.mini { flex-direction: row; flex-wrap: nowrap; align-items: center; column-gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.rsp-blok.mini .rsp-do, .rsp-blok.mini .rsp-trener { display: none; }
.rsp-blok.mini .rsp-ime { -webkit-line-clamp: 1; white-space: nowrap; display: block; text-overflow: ellipsis; }
.rsp-blok .rsp-ime { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rsp-trener { font-size: 10.5px; color: var(--sid-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 3px; align-items: center; }
.rsp-trener i { font-size: 9px; opacity: .8; }
.rsp-blok.dijeljen .rsp-ime + .rsp-trener { margin-bottom: 2px; }
.kal-trener { font-weight: 400; font-size: 12px; color: var(--sid-muted); margin-left: 6px; }

/* Popis po danima */
.kal-popis { display: none; }
[data-kal-prikaz="popis"] .raspored { display: none; }
[data-kal-prikaz="popis"] .kal-popis { display: block; }
[data-kal-prikaz="popis"] .kal-dani { display: none; }
.kal-dani { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--sid-border); }
.kal-dani button {
  border: 0; background: none; font: inherit; font-weight: 600; font-size: 13px; color: var(--sid-muted); padding: 12px 0 10px;
  border-bottom: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.kal-dani button span { font-size: 10.5px; font-weight: 500; min-height: 14px; }
.kal-dani button.prazan { opacity: .45; }
.kal-dani button.active { color: var(--sid-teal); border-bottom-color: var(--sid-teal); }
.kal-popis-dan { padding: 6px 0; }
.kal-popis-dan h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--sid-muted); padding: 10px 18px 4px; display: flex; gap: 8px; align-items: center; }
.kal-stavka {
  display: flex; gap: 14px; align-items: center; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left;
  padding: 10px 18px; border-bottom: 1px solid var(--sid-border); cursor: pointer; position: relative;
}
.kal-stavka:hover { background: var(--hover); }
.kal-stavka.sukob { box-shadow: inset 3px 0 0 var(--sid-danger); }
.kal-vrijeme { display: flex; flex-direction: column; min-width: 50px; font-variant-numeric: tabular-nums; }
.kal-vrijeme span { color: var(--sid-muted); font-size: 12px; }
.kal-sadrzaj { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kal-momcadi { display: flex; flex-wrap: wrap; gap: 6px; }
.kal-momcad-oznaka { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.kal-momcad-oznaka i { width: 10px; height: 10px; border-radius: 3px; background: var(--boja); }
.kal-stavka.slobodan .kal-vrijeme strong { color: var(--sid-muted); }

/* Detalji termina */
.kal-detalji {
  position: absolute; z-index: 1300; width: 320px; background: var(--sid-panel); border: 1px solid var(--sid-border-2);
  border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.35); padding: 14px 16px;
}
.kal-detalji[hidden], .kal-zavjesa[hidden] { display: none; }
.kal-detalji-zatvori { position: absolute; right: 8px; top: 8px; }
.kal-detalji-glava { display: flex; flex-direction: column; margin-bottom: 8px; padding-right: 24px; }
.kal-detalji-red { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--sid-border); font-size: 13px; }
.kal-detalji-red > i, .kal-detalji-red > .boja-tocka { margin-top: 3px; flex: 0 0 auto; }
.kal-detalji-red.sukob { color: var(--sid-danger); }
.kal-detalji-akcije { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.kal-traka-red { padding: 8px 0; }
.kal-traka-naslov { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; }
.kal-traka-naslov > span:first-child { display: flex; align-items: center; gap: 6px; }
.kal-donje { margin-top: 4px; }

/* izbor uloga korisnika */
.uloge-izbor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uloga-kartica {
  display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--sid-border-2);
  border-radius: 10px; cursor: pointer; background: var(--sid-elev); font-weight: 400 !important;
}
.uloga-kartica input { margin-top: 3px; }
.uloga-kartica > span { display: flex; flex-direction: column; gap: 2px; }
.uloga-kartica:has(input:checked) { border-color: var(--sid-teal); background: var(--teal-soft); }
.racuni-trenera { display: flex; flex-direction: column; }
.racun-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--sid-border); }
.racun-red:last-of-type { border-bottom: 0; }
.lozinke-popis { margin: 6px 0 0; padding: 0; list-style: none; }
.lozinke-popis li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0; }

/* =====================================================================
   Uloge i prava
   ===================================================================== */
.uloge-popis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.uloga-blok { margin: 0; }
.uloga-glava { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.uloga-glava .akcije-red { margin-left: auto; flex-wrap: nowrap; }
.uloga-ikona {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 17px;
  background: var(--sid-elev); color: var(--sid-muted); border: 1px solid var(--sid-border-2);
}
.uloga-ikona.admin { background: var(--teal-soft); color: var(--sid-teal); border-color: transparent; }
.uloga-ikona.trener { background: var(--green-soft); color: var(--sid-green); border-color: transparent; }
.uloga-ime { min-width: 0; }
.uloga-ime h2 { font-size: 15px; margin: 0 0 4px; }
.uloga-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.uloga-meta a.znak { text-decoration: none; }
.uloga-opis, .uloga-sazetak { margin: 0; padding: 0 18px 12px; color: var(--sid-muted); font-size: 13px; }
.uloga-prava { list-style: none; margin: 0; padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--sid-border); padding-top: 12px; }
.uloga-prava li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.uloga-prava li > i { color: var(--sid-dim); width: 16px; }

.predlosci { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; }
.predlosci a.znak { text-decoration: none; }
.prava-mreza { display: flex; flex-direction: column; }
.pravo-red {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 18px; border-bottom: 1px solid var(--sid-border);
}
.pravo-red:last-child { border-bottom: 0; }
.pravo-naziv { display: flex; gap: 10px; align-items: flex-start; padding-top: 7px; }
.pravo-naziv > i { color: var(--sid-teal); font-size: 16px; }
.pravo-naziv > span { display: flex; flex-direction: column; gap: 2px; }
.pravo-izbor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pravo-izbor .kvacice label { align-items: flex-start; }
.pravo-izbor .kvacice label input { margin-top: 2px; }
.pravo-izbor .kvacice label > span { display: flex; flex-direction: column; gap: 1px; }
.pravo-opis { font-size: 11.5px; color: var(--sid-dim); }
.pravo-red.prazan .pravo-naziv strong { color: var(--sid-muted); }
.pravo-red.prazan .pravo-opseg { opacity: .45; }
.pravo-opseg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prekidac-opsega { display: inline-flex; border: 1px solid var(--sid-border-2); border-radius: 8px; overflow: hidden; }
.prekidac-opsega label { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.prekidac-opsega input { position: absolute; opacity: 0; pointer-events: none; }
.prekidac-opsega span { padding: 6px 12px; font-size: 12.5px; color: var(--sid-muted); }
.prekidac-opsega label + label span { border-left: 1px solid var(--sid-border-2); }
.prekidac-opsega input:checked + span { background: var(--teal-soft); color: var(--sid-teal); font-weight: 500; }
.prekidac-opsega input:focus-visible + span { outline: 2px solid var(--sid-teal); outline-offset: -2px; }
.pravo-brzo { display: inline-flex; border: 1px solid var(--sid-border-2); border-radius: 8px; overflow: hidden; align-self: start; margin-top: 2px; }
.pravo-brzo button { border: 0; background: transparent; color: var(--sid-muted); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; }
.pravo-brzo button + button { border-left: 1px solid var(--sid-border-2); }
.pravo-brzo button:hover { background: var(--sid-elev); color: var(--sid-text); }
.pravo-fiksno { background: color-mix(in srgb, var(--sid-elev) 50%, transparent); }
.prava-pomoc { padding: 0 18px 16px; margin: 0; }
.napomena-prava { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border: 1px dashed var(--sid-border-2); border-radius: var(--sid-radius); color: var(--sid-muted); font-size: 13px; margin-bottom: 16px; }
.opasna-zona { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--sid-border); }
@media (max-width: 1100px) {
  .uloge-popis { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .pravo-red { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
  .pravo-naziv { padding-top: 4px; }
  .pravo-izbor { grid-column: 1 / -1; grid-row: 2; }
  .pravo-izbor .kvacice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pravo-izbor .kvacice label { padding: 10px 12px; }
  .prekidac-opsega { display: flex; width: 100%; }
  .prekidac-opsega label { flex: 1; }
  .prekidac-opsega span { width: 100%; text-align: center; padding: 9px 8px; }
  .pravo-brzo button { padding: 8px 10px; }
  .prava-sve { width: 100%; }
  .uloga-glava { flex-wrap: wrap; }
  .uloga-glava .akcije-red { margin-left: 50px; }
}

/* E-pošta (SMTP) */
.smtp-stanje { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border: 1px solid var(--sid-border); border-radius: var(--sid-radius); background: var(--sid-panel); }
.smtp-brojac { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.smtp-nacini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kvacica-mala { display: inline-flex !important; gap: 6px; align-items: center; font-size: 12px !important; font-weight: 400 !important; color: var(--sid-muted); margin-top: 6px; }
.smtp-test { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.smtp-test .polje { width: 100%; }
.smtp-test-red { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.smtp-test-red .polje { width: auto; flex: 1; min-width: 220px; margin: 0; }
.smtp-test-red .pomoc { width: 100%; margin: 0; }
.vrata-dno { margin: 16px 0 0; text-align: center; font-size: 13px; }
@media (max-width: 768px) { .smtp-nacini { grid-template-columns: minmax(0, 1fr); } .smtp-brojac { margin-left: 0; } }

/* Treninzi i prisutnost */
.tjedan-traka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; }
.tjedan-filter { margin-left: auto; }
.tjedan-filter select { min-width: 200px; }
.treninzi-dani { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.treninzi-dani .ploca { margin: 0; }
.trening-dan.danas { border-color: var(--sid-teal); }
.trening-red {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center;
  padding: 11px 16px 11px 14px; border-top: 1px solid var(--sid-border); color: inherit; text-decoration: none; position: relative;
}
.trening-red::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--boja); }
.trening-red:hover { background: var(--sid-elev); }
.trening-red.otkazan .trening-glavno, .trening-red.otkazan .trening-vrijeme { opacity: .5; text-decoration: line-through; }
.trening-vrijeme { display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.trening-glavno { display: flex; flex-direction: column; min-width: 0; }
.trening-glavno .tiho { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trening-s-datumom > .tiho { display: block; padding: 8px 16px 0; }
.trening-s-datumom .trening-red { border-top: 0; }
.trening-s-datumom + .trening-s-datumom { border-top: 1px solid var(--sid-border); }
.generiraj-traka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; border: 1px dashed var(--sid-border-2); border-radius: var(--sid-radius); font-size: 13px; }
.generiraj-traka .datum-omot { width: 160px; }
.trening-datum-kocka { width: 64px; height: 64px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  background: color-mix(in srgb, var(--boja) 16%, transparent); color: var(--boja); border: 1px solid color-mix(in srgb, var(--boja) 40%, transparent); }
.trening-datum-kocka strong { font-size: 24px; line-height: 1; }
.trening-datum-kocka span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.prisutnost-vrh { flex-wrap: wrap; gap: 10px; }
.prisutnost-zbroj { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.prisutnost-popis { display: flex; flex-direction: column; }
.prisutnost-red { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, 220px); gap: 12px; align-items: center; padding: 8px 18px; border-top: 1px solid var(--sid-border); }
.prisutnost-red:has(input[value="prisutan"]:checked) { background: color-mix(in srgb, var(--sid-green) 6%, transparent); }
.prisutnost-izbor { display: inline-flex; border: 1px solid var(--sid-border-2); border-radius: 10px; overflow: hidden; }
.prisutnost-izbor label { margin: 0; cursor: pointer; }
.prisutnost-izbor input { position: absolute; opacity: 0; pointer-events: none; }
.prisutnost-izbor span { display: grid; place-items: center; width: 44px; height: 38px; font-weight: 600; font-size: 14px; color: var(--sid-muted); }
.prisutnost-izbor label + label span { border-left: 1px solid var(--sid-border-2); }
.prisutnost-izbor input:focus-visible + span { outline: 2px solid var(--sid-teal); outline-offset: -2px; }
.prisutnost-izbor .p-dobra input:checked + span { background: var(--sid-green); color: #fff; }
.prisutnost-izbor .p-ceka input:checked + span { background: var(--sid-warn); color: #fff; }
.prisutnost-izbor .p-losa input:checked + span { background: var(--sid-danger); color: #fff; }
.prisutnost-izbor .p-tamna input:checked + span { background: var(--sid-dim); color: #fff; }
.prisutnost-izbor input:disabled + span { cursor: default; }
.prisutnost-napomena { font-size: 13px !important; padding: 6px 10px !important; }
.prisutnost-legenda { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 18px 14px; border-top: 1px solid var(--sid-border); }
.prisutnost-zbroj .znak b { font-weight: 700; margin-left: 2px; }
@media (max-width: 768px) {
  .tjedan-filter { margin-left: 0; width: 100%; }
  .tjedan-filter select { width: 100%; }
  .treninzi-dani { grid-template-columns: minmax(0, 1fr); }
  .trening-red { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .trening-red > .bi-chevron-right { display: none; }
  .prisutnost-red { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; row-gap: 6px; }
  .prisutnost-napomena { grid-column: 1 / -1; }
  .prisutnost-napomena:placeholder-shown:not(:focus) { display: none; }
  .prisutnost-izbor span { width: 40px; height: 42px; }
  .prisutnost-zbroj { margin-left: 0; width: 100%; }
}

/* kartice profila igrača */
.metrike.metrike-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mjeseci-graf { display: flex; gap: 10px; align-items: flex-end; padding: 16px 18px; overflow-x: auto; }
.mjesec-stupac { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 38px; }
.mjesec-traka { width: 22px; height: 90px; border-radius: 6px; background: var(--sid-elev); display: flex; align-items: flex-end; overflow: hidden; }
.mjesec-traka span { display: block; width: 100%; background: var(--sid-teal); border-radius: 6px 6px 0 0; }
.mjesec-posto { font-size: 11px; color: var(--sid-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .metrike.metrike-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Utakmice */
.utakmica-red { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px 11px 14px;
  border-top: 1px solid var(--sid-border); color: inherit; text-decoration: none; position: relative; }
.utakmica-red:first-child { border-top: 0; }
.utakmica-red::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--boja); }
.utakmica-red:hover { background: var(--sid-elev); }
.utakmica-red.otkazan .trening-glavno { opacity: .5; text-decoration: line-through; }
.utakmica-datum { display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.utakmica-datum .tiho { font-size: 12px; }
.rezultat { display: inline-block; min-width: 54px; text-align: center; padding: 4px 10px; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sid-elev); }
.rezultat.pobjeda { background: var(--green-soft); color: var(--sid-green); }
.rezultat.poraz { background: var(--danger-soft); color: var(--sid-danger); }
.utakmica-glava { padding: 18px 20px; border-top: 4px solid var(--boja); }
.utakmica-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.utakmica-par { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; margin: 18px 0; }
.utakmica-par .ekipa { font-size: 20px; font-weight: 600; text-align: right; }
.utakmica-par .ekipa:last-child { text-align: left; }
.utakmica-par .ekipa.nasa { color: var(--sid-teal); }
.rezultat-veliki { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 4px 18px; border-radius: 14px; background: var(--sid-elev); }
.rezultat-veliki.pobjeda { color: var(--sid-green); }
.rezultat-veliki.poraz { color: var(--sid-danger); }
.rezultat-unos { display: flex; align-items: center; gap: 12px; }
.rezultat-unos input { width: 90px; font-size: 22px !important; text-align: center; font-weight: 700; }
.rezultat-unos span { font-size: 22px; font-weight: 700; }
.sastav-tablica { display: flex; flex-direction: column; }
.sastav-red { display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 64px 64px 64px; gap: 8px; align-items: center; padding: 7px 18px; border-top: 1px solid var(--sid-border); }
.sastav-red input[type=number] { padding: 6px 8px; text-align: center; }
.sastav-red:not(.nastupio):not(.sastav-zaglavlje) input[type=number], .sastav-red:not(.nastupio) .sastav-disk { opacity: .35; }
.sastav-red.nastupio { background: color-mix(in srgb, var(--sid-teal) 5%, transparent); }
.sastav-zaglavlje { border-top: 0; padding-top: 10px; padding-bottom: 4px; }
.sastav-zaglavlje span:not(:first-child) { text-align: center; }
.sastav-red .osoba-redak { cursor: pointer; }
.sastav-disk { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; }
@media (max-width: 768px) {
  .utakmica-par { gap: 10px; }
  .utakmica-par .ekipa { font-size: 15px; }
  .rezultat-veliki { font-size: 28px; padding: 4px 12px; }
  .sastav-red { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 10px 14px; }
  .sastav-red .osoba-redak { grid-column: 1 / -1; }
  .sastav-zaglavlje span:first-child { display: none; }
  .sastav-red:not(.nastupio):not(.sastav-zaglavlje) > :not(.osoba-redak) { display: none; }
}

/* Obavijesti */
.boja-tocka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--boja); }
.primatelji-vrste { margin-top: 12px; }
.primatelji-broj { margin: 12px 0 0; font-size: 13px; }
.primatelji-broj strong { font-size: 15px; }
.greska-polja { color: var(--sid-danger); font-size: 13px; margin: 6px 0 0; }
[data-svi]:checked ~ * [data-momcadi], form:has([data-svi]:checked) [data-momcadi] { opacity: .4; pointer-events: none; }

/* Financije */
.iznosi-popis { display: flex; flex-direction: column; }
.iznos-red { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sid-border); font-weight: 400 !important; }
.iznos-red > span:first-child { display: flex; align-items: center; gap: 8px; }
.iznos-polje { display: inline-flex; align-items: center; gap: 6px; color: var(--sid-muted); }
.iznos-polje input { width: 110px; text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.uplata-iznos { margin-left: auto; font-variant-numeric: tabular-nums; }
.u-redu { display: inline; }
.poveznica-gumb { border: 0; background: none; color: var(--sid-danger); cursor: pointer; font: inherit; padding: 0 0 0 6px; text-decoration: underline; }
.kontakt-red .akcije-red { margin-top: 6px; }

/* Liječnički, testiranje, izvještaji */
.metrika-poveznica { color: inherit; text-decoration: none; }
.metrika-poveznica:hover, .metrika-poveznica.odabrana { border-color: var(--sid-teal); }
.lijecnicki-red { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 12px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--sid-border); }
.lijecnicki-red:first-child { border-top: 0; }
.lijecnicki-unos { display: flex; gap: 6px; align-items: center; }
.lijecnicki-unos .datum-omot { width: 150px; }
.test-tablica-omot { overflow-x: auto; }
.test-tablica input { width: 84px; text-align: center; padding: 6px 8px; }
.test-tablica th { white-space: nowrap; }
.testovi-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.testovi-mreza .ploca { margin: 0; }
.test-brojke { display: flex; gap: 18px; padding: 12px 18px 0; }
.test-brojke > div { display: flex; flex-direction: column; }
.test-brojke strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.test-brojke .bolje { color: var(--sid-green); }
.test-brojke .losije { color: var(--sid-danger); }
.test-graf { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 12px 18px 16px; }
.test-graf > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; flex: 1; max-width: 46px; }
.test-graf i { display: block; width: 100%; background: var(--sid-teal); border-radius: 5px 5px 0 0; }
.test-graf small { font-size: 10px; color: var(--sid-muted); }
.izvjestaj-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: -6px 0 16px; }
.izvjestaj-filter .polje { margin: 0; min-width: 150px; }
.posto-traka { display: inline-block; width: 70px; height: 6px; border-radius: 4px; background: var(--sid-elev); vertical-align: middle; overflow: hidden; }
.posto-traka span { display: block; height: 100%; background: var(--sid-teal); }
.tablica tr.ukupno td { font-weight: 700; border-top: 2px solid var(--sid-border-2); }
.fin-graf { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 18px; }
.fin-stupac { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.fin-trake { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fin-trake span { width: 40%; max-width: 16px; border-radius: 4px 4px 0 0; min-height: 2px; }
.fin-trake .z { background: var(--sid-dim); }
.fin-trake .u { background: var(--sid-green); }
.fin-stupac small { font-size: 10px; color: var(--sid-muted); }
@media (max-width: 768px) {
  .lijecnicki-red { grid-template-columns: minmax(0, 1fr) auto; }
  .lijecnicki-unos { grid-column: 1 / -1; }
  .fin-graf { gap: 4px; padding: 12px; }
}
@media print {
  .sidebar, .main-header, .ne-ispis, .mobile-toggle, .posjet { display: none !important; }
  .main-content { margin: 0 !important; }
  body { background: #fff; }
}

/* Javni upis */
body.javno { background: var(--sid-bg); }
.javno-omot { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.javno-glava { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.javno-grb { width: 44px; height: 44px; border-radius: 12px; background: var(--sid-teal); color: #fff; display: grid; place-items: center; font-weight: 700; }
.javno-naslov { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--sid-muted); margin: 20px 0 10px; }
.javno-naslov:first-child { margin-top: 0; }
.javno-dno { text-align: center; margin-top: 24px; }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kopiraj-red { display: flex; gap: 8px; flex-wrap: wrap; }
.kopiraj-red input { flex: 1; min-width: 220px; }
.razlog-polje { flex: 1; min-width: 200px; }
/* CRM */
.novi-partner { padding: 0; }
.novi-partner summary, .crm-novi-ugovor summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--sid-teal); list-style: none; }
.novi-partner summary::-webkit-details-marker, .crm-novi-ugovor summary::-webkit-details-marker { display: none; }
.crm-ploca { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 10px; padding-bottom: 8px; align-items: start; }
.moduli-cipovi { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 18px; }
@media (max-width: 1200px) { .crm-ploca { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; } }
@media (max-width: 768px) { .crm-ploca { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } .crm-stupac:not(:has(.crm-kartica)) { display: none; } }
.crm-stupac { background: var(--sid-panel); border: 1px solid var(--sid-border); border-top: 3px solid var(--boja); border-radius: var(--sid-radius); padding: 10px; min-height: 120px; }
.crm-stupac-glava { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; padding: 2px 4px 10px; }
.crm-kartica { background: var(--sid-elev); border: 1px solid var(--sid-border); border-radius: 10px; padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.crm-kartica a { color: inherit; text-decoration: none; }
.crm-kartica select { margin-top: 4px; font-size: 12px !important; padding: 4px 8px !important; }
.crm-korak { color: var(--sid-muted); }
.crm-korak.kasni { color: var(--sid-danger); }
.crm-aktivnost .kontakt-ime i { color: var(--sid-teal); }
.protucinidba { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.protucinidba button { border: 0; background: none; color: var(--sid-teal); cursor: pointer; padding: 0; font-size: 15px; }
.protucinidba.gotovo span { text-decoration: line-through; color: var(--sid-muted); }

/* Naslovnica */
.pocetna-signali { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.signal { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--sid-radius); background: var(--warn-soft); color: var(--sid-text); text-decoration: none; border: 1px solid transparent; }
.signal i { color: var(--sid-warn); font-size: 18px; }
.signal.losa { background: var(--danger-soft); }
.signal.losa i { color: var(--sid-danger); }
.signal:hover { border-color: var(--sid-border-2); }

/* =====================================================================
   Tablet i mobitel
   ===================================================================== */
@media (max-width: 1200px) {
  .odsjek { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .stupci { grid-template-columns: minmax(0, 1fr); }
  .mreza-polja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skrbnik-red {
    grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; padding: 0 36px 6px 0;
    border-bottom: 1px dashed var(--sid-border); margin-bottom: 12px;
  }
  .skrbnik-red .ikona-gumb { position: absolute; top: 28px; right: 0; margin: 0; padding: 6px 8px; }
}
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-otvoren .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.sidebar-otvoren .sidebar-zavjesa { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
  body.sidebar-otvoren { overflow: hidden; }
  .main-content { margin-left: 0; }
  .mobile-toggle { display: block; }
  .nav-link { padding: 12px; }
  .profil-akcije { margin-left: 0; width: 100%; }
  /* lijepljeni gumbi za spremanje na dnu dugih obrazaca (tablet i mobitel) */
  .spremanje.lijepi {
    position: sticky; bottom: 0; z-index: 50; margin: 0 -24px; padding: 10px 24px calc(10px + env(safe-area-inset-bottom));
    background: var(--sid-bg); border-top: 1px solid var(--sid-border);
  }
}
@media (max-width: 768px) {
  /* 16px sprječava da iOS zumira stranicu pri dodiru polja */
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
  input[type=date], input[type=tel], select, textarea { font-size: 16px; padding: 10px 12px; }
  .gumb { min-height: 40px; padding: 9px 14px; }
  .gumb-nizak { min-height: 34px; }
  .content-wrapper { padding: 14px; }
  .main-header { padding: 0 12px; }
  .header-right { gap: 8px; }
  .user-info { display: none; }
  .oznaka-konzole { display: none; }

  .naslov-red { margin-bottom: 14px; }
  .naslov-red h1 { font-size: 20px; }
  .naslov-red .akcije-red { width: 100%; }
  .naslov-red .akcije-red .gumb { flex: 1; }

  .ploca { margin-bottom: 14px; }
  .ploca > .vrh { padding: 14px; }
  .obrazac { padding: 4px 14px 14px; }
  .alati { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .alati input[type=search] { width: 100%; grid-column: 1 / -1; }
  .alati select { min-width: 0; }
  .alati .gumb { grid-column: 1 / -1; }

  .odsjek { grid-template-columns: 1fr; gap: 6px; }
  .odsjek > p, .odsjek > .gumb { grid-column: 1; }
  .mreza-polja, .obrazac-vrh .imena, .obrazac-vrh .imena.jednako { grid-template-columns: minmax(0, 1fr); }
  .mreza-polja .s2 { grid-column: span 1; }
  .obrazac-vrh { grid-template-columns: 1fr; justify-items: start; }
  .obrazac-vrh .imena { width: 100%; }
  .obrazac-vrh > div:first-child { display: flex; align-items: center; gap: 14px; }
  .obrazac-vrh .grb-okvir.okrugao { width: 72px; height: 72px; }
  .obrazac-vrh .grb-akcije { margin-top: 0; }
  .kvacice label { flex: 1 1 100%; padding: 10px 12px; }

  .spremanje.lijepi { margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .spremanje.lijepi .gumb-glavni { flex: 1; }
  .spremanje .biljeska { margin-left: 0; width: 100%; }

  /* tablice postaju kartice */
  .tablica.sloziva thead { display: none; }
  .tablica.sloziva, .tablica.sloziva tbody { display: block; }
  .tablica.sloziva tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--sid-border); position: relative; }
  .tablica.sloziva tbody tr:last-child { border-bottom: 0; }
  .tablica.sloziva tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .tablica.sloziva tbody td::before { content: attr(data-oznaka); color: var(--sid-muted); font-size: 12px; text-align: left; flex: 0 0 auto; }
  .tablica.sloziva tbody td > * { min-width: 0; }
  .tablica.sloziva tbody td:first-child { display: block; text-align: left; padding: 0 44px 6px 0; }
  .tablica.sloziva tbody td:first-child::before { content: none; }
  .tablica.sloziva tbody td.akcije { position: absolute; top: 10px; right: 10px; padding: 0; }
  .tablica.sloziva tbody td.akcije::before { content: none; }
  .tablica.sloziva tbody td:empty { display: none; }
  .tablica.sloziva .znak { white-space: normal; }

  .profil-glava { padding: 16px; gap: 14px; }
  .profil-ime h1 { font-size: 19px; }
  .avatar.velik { width: 64px; height: 64px; font-size: 22px; }
  .profil-akcije { display: grid; grid-template-columns: 1fr 1fr; }
  .profil-akcije form, .profil-akcije form .gumb { width: 100%; }
  .profil-akcije > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .kartice { margin: 0 -14px 14px; padding: 0 8px; }
  .kartice a { padding: 12px; }

  .skrbnik-red { grid-template-columns: minmax(0, 1fr); }
  .kontakt-veze { flex-direction: column; }
  .predlozi li { padding: 12px; font-size: 15px; }
  .raspored { display: none; }
  .kal-popis, [data-kal-prikaz="popis"] .kal-popis { display: block; }
  [data-kal-prikaz] .kal-dani { display: grid; }
  .kal-popis-dan { display: none; }
  .kal-popis-dan.odabran { display: block; }
  .kal-popis-dan h3 { display: none; }
  .prekidac-prikaza { display: none; }
  .kal-filteri { display: grid; grid-template-columns: 1fr 1fr; }
  .kal-filteri select { min-width: 0; }
  .kal-filteri select[name=lokacija] { grid-column: 1 / -1; }
  .kal-detalji { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .kal-zavjesa:not([hidden]) { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1250; }
  .stozer-red { grid-template-columns: 32px minmax(0, 1fr); }
  .uloge-izbor, .racun-red { grid-template-columns: minmax(0, 1fr); }
  .termin-red { grid-template-columns: 1fr 1fr; padding: 0 36px 6px 0; position: relative; border-bottom: 1px dashed var(--sid-border); margin-bottom: 12px; }
  .termin-red > .polje:nth-child(2), .termin-red > .polje:nth-child(5) { grid-column: 1 / -1; }
  .termin-red .ikona-gumb { position: absolute; top: 28px; right: 0; margin: 0; padding: 6px 8px; }
  .termin-izbor { flex: 1 1 calc(50% - 10px) !important; }
  .stozer-red select { grid-column: 1 / -1; }
  .momcad-znak { width: 56px; height: 56px; font-size: 24px; border-radius: 12px; }
  .kartice-mreza { grid-template-columns: minmax(0, 1fr); }
  .kontakt-veze a { padding: 4px 0; }
}
@media (max-width: 420px) {
  .page-title { font-size: 15px; }
  .tema-gumb { width: 34px; }
}

/* =====================================================================
   Kalendar s datumima (v0.13): navigacija, stanja blokova, mjesec
   ===================================================================== */
.kal-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kal-prikazi { display: inline-flex; border: 1px solid var(--sid-border-2); border-radius: 8px; overflow: hidden; background: var(--sid-panel); }
.kal-prikazi .gumb { border: 0; border-radius: 0; background: transparent; }
.kal-prikazi .gumb + .gumb { border-left: 1px solid var(--sid-border-2); }
.kal-prikazi .gumb.active { background: var(--teal-soft); color: var(--sid-teal); font-weight: 600; }
.kal-razdoblje { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kal-razdoblje .ikona-gumb { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sid-border-2); border-radius: 8px; padding: 0; background: var(--sid-panel); }
.kal-razdoblje .ikona-gumb:hover { color: var(--sid-teal); }
.kal-naslov { font-size: 16px; margin: 0 6px; white-space: nowrap; }
.kal-naslov .tiho { font-weight: 400; font-size: 14px; }
.kal-skok .datum-omot { width: 150px; }
.kal-skok input.datum { padding-top: 6px; padding-bottom: 6px; }
.rsp-dan-veza { color: inherit; text-decoration: none; }
.rsp-dan-veza:hover strong { color: var(--sid-teal); text-decoration: underline; }
.rsp-blok.otkazan { opacity: .55; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--sid-danger) 12%, transparent) 6px 12px), var(--sid-elev); }
.rsp-blok.otkazan .rsp-ime { text-decoration: line-through; }
.rsp-blok.utakmica { background: color-mix(in srgb, var(--boja) 34%, var(--sid-panel)); box-shadow: inset 0 0 0 1.5px var(--boja); }
.rsp-blok.utakmica .rsp-vrijeme i { color: var(--sid-warn); }
.rsp-stanje { color: var(--sid-green); margin-left: 3px; }
.raspored.jedan-dan .rsp-ime { font-size: 13px; -webkit-line-clamp: 3; }
.raspored.jedan-dan .rsp-trener { font-size: 12px; }
.raspored.jedan-dan .rsp-vrijeme { font-size: 11.5px; }
.raspored.jedan-dan .rsp-trake-glava span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-dani button small { display: block; font-size: 10px; font-weight: 500; color: var(--sid-muted); }
.kal-stavka.otkazan .kal-vrijeme strong, .kal-momcad-oznaka.otkazan { text-decoration: line-through; opacity: .7; }
.kal-momcad-oznaka .znak { margin-left: 6px; text-decoration: none; }
.kal-momcad-oznaka > span { display: inline; }
.kal-momcad-oznaka .bi-trophy-fill { color: var(--sid-warn); }
.kal-detalji-red .znak { margin-left: 6px; }

.kmj { overflow: hidden; }
.kmj-glava, .kmj-mreza { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kmj-glava span { padding: 8px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sid-muted); border-bottom: 1px solid var(--sid-border); }
.kmj-dan { min-height: 118px; padding: 6px; border-right: 1px solid var(--sid-border); border-bottom: 1px solid var(--sid-border); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kmj-dan:nth-child(7n) { border-right: 0; }
.kmj-dan.vikend { background: color-mix(in srgb, var(--sid-text) 2.5%, transparent); }
.kmj-dan.drugi .kmj-broj, .kmj-dan.drugi .kmj-stavke { opacity: .45; }
.kmj-broj { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--sid-text); text-decoration: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.kmj-broj:hover { background: var(--sid-elev); }
.kmj-dan.danas .kmj-broj { background: var(--sid-teal); color: #fff; }
.kmj-stavke { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kmj-stavka {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 5px; align-items: baseline; min-width: 0;
  font-size: 11.5px; line-height: 1.35; padding: 1px 5px; border-radius: 4px; border-left: 3px solid var(--boja);
  background: color-mix(in srgb, var(--boja) 14%, transparent);
}
.kmj-stavka:hover, .kmj-stavka:focus-visible { background: color-mix(in srgb, var(--boja) 26%, transparent); }
.kmj-stavka.otkazan { text-decoration: line-through; opacity: .55; }
.kmj-stavka.utakmica { font-weight: 600; }
.kmj-stavka.utakmica i { color: var(--sid-warn); }
.kmj-stavka.prigusen { opacity: .18; }
.kmj-vr { color: var(--sid-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.kmj-ime { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kmj-vise { font-size: 11.5px; color: var(--sid-teal); padding: 1px 5px; text-decoration: none; }
.kmj-vise:hover { text-decoration: underline; }
.kmj-tocke { display: none; }

@media (max-width: 768px) {
  .kal-nav { flex-direction: column; align-items: stretch; }
  .kal-prikazi { display: grid; grid-template-columns: repeat(4, 1fr); }
  .kal-prikazi .gumb { justify-content: center; padding-left: 4px; padding-right: 4px; }
  .kal-razdoblje { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); }
  .kal-naslov { grid-column: 1 / -1; order: -1; margin: 0; font-size: 15px; white-space: normal; text-align: center; }
  .kal-skok { justify-self: end; }
  .kal-skok .datum-omot { width: 140px; }
  .samo-siroko, .kal-legenda-lokacije { display: none; }
  .kmj-dan { min-height: 58px; padding: 4px 2px; align-items: center; }
  .kmj-stavke { display: none; }
  .kmj-tocke { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; align-items: center; text-decoration: none; }
  .kmj-tocke i { width: 7px; height: 7px; border-radius: 50%; background: var(--boja); }
  .kmj-tocke small { width: 100%; text-align: center; font-size: 10px; color: var(--sid-muted); }
  .kmj-glava span { padding: 6px 2px; text-align: center; font-size: 10.5px; }
}
.kal-promjene ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.kal-promjene li { margin: 4px 0; }
.kal-promjena { margin-left: 6px; }
.kal-promjena.kraj { color: var(--sid-muted); }

/* Popis treninga (v0.13.1) */
.treninzi-popis { padding: 0; overflow: hidden; }
.treninzi-dan-naslov { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 8px; background: var(--sid-elev); border-top: 1px solid var(--sid-border); }
.treninzi-dan-naslov:first-child { border-top: 0; }
.treninzi-dan-naslov .tiho.mali { margin-left: auto; }
.treninzi-dan-naslov.danas strong { color: var(--sid-teal); }
.treninzi-dan-naslov.prosli { opacity: .85; }
.trening-red.stavka { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.trening-red.stavka:hover { background: transparent; }
.trening-red.stavka .jako { color: inherit; text-decoration: none; }
.trening-red.stavka a.jako:hover { color: var(--sid-teal); text-decoration: underline; }
.trening-akcija { display: flex; justify-content: flex-end; min-width: 0; }
.trening-akcija form { margin: 0; }
.trening-akcija .gumb { white-space: nowrap; }
.tjedan-filter { display: flex; gap: 10px; align-items: center; }
@media (max-width: 768px) {
  .trening-red.stavka { grid-template-columns: 46px minmax(0, 1fr) auto; row-gap: 8px; }
  .trening-red.stavka .trening-akcija { grid-column: 2 / -1; justify-content: flex-start; }
  .trening-red.stavka .trening-akcija .gumb { width: 100%; justify-content: center; }
  .trening-akcija form { width: 100%; }
  .tjedan-filter { flex-wrap: wrap; }
}
.kartica-broj { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--sid-warn) 22%, transparent); color: var(--sid-warn); }
.vise-red { display: flex; justify-content: center; margin: -4px 0 18px; }
.rsp-treneri { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.rsp-treneri .rsp-trener { display: flex; }
/* E-pošta: pružatelji */
.smtp-predlosci { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.smtp-predlosci .pomoc { flex-basis: 100%; margin: 2px 0 0; }
.povezani-racun { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--sid-border-2); border-radius: 10px; background: var(--sid-elev); }
.povezani-racun > div { flex: 1; min-width: 180px; }
.koristi-red { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--sid-border-2); border-radius: 10px; }
.koristi-red:has(input:checked) { border-color: var(--sid-teal); background: var(--teal-soft); }
details.upute { margin-top: 12px; font-size: 13px; color: var(--sid-muted); }
details.upute summary { cursor: pointer; color: var(--sid-teal); }
details.upute ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.kartica-aktivna { width: 7px; height: 7px; border-radius: 50%; background: var(--sid-green); display: inline-block; margin-left: 6px; vertical-align: middle; }
.oauth-uri { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oauth-uri code { padding: 4px 8px; border-radius: 6px; background: var(--sid-elev); user-select: all; word-break: break-all; }
[hidden] { display: none !important; }
.rsp-blok > * { flex-shrink: 0; }
/* Prijava vanjskim računima */
.vanjski-gumbi { display: grid; gap: 8px; margin: 4px 0; }
.vanjski-gumb { display: flex !important; align-items: center; justify-content: center; gap: 10px; background: var(--sid-elev); border: 1px solid var(--sid-border-2); font-weight: 600; }
.vanjski-gumb i { font-size: 17px; }
.vanjski-gumb.preporucen { border-color: var(--sid-teal); box-shadow: 0 0 0 1px var(--sid-teal); }
.vanjski-google i { color: #ea4335; }
.vanjski-microsoft i { color: #00a4ef; }
.vrata-ili { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--sid-muted); font-size: 12.5px; }
.vrata-ili::before, .vrata-ili::after { content: ""; flex: 1; height: 1px; background: var(--sid-border); }
.nacini-prijave { display: grid; gap: 8px; margin: 6px 0 18px; }
.nacin-prijave { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--sid-border-2); border-radius: 10px; background: var(--sid-elev); }
.nacin-prijave > i { font-size: 18px; width: 22px; text-align: center; }
.nacin-prijave > div { flex: 1; min-width: 0; }
.nacin-prijave form { margin: 0; }
.vrata-podnaslov { font-size: 15px; margin: 18px 0 8px; }
.vrata-dno-gumbi { display: grid; gap: 8px; margin-top: 14px; }
/* SMTP čarobnjak */
.carobnjak .vrh h2 i { color: var(--sid-teal); margin-right: 4px; }
.carobnjak-obrazac { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.carobnjak-obrazac .polje { margin: 0; }
.carobnjak-rezultat { margin: 0 18px 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--sid-border-2); font-size: 13.5px; }
.carobnjak-rezultat.uspjeh { border-color: color-mix(in srgb, var(--sid-green) 50%, transparent); background: color-mix(in srgb, var(--sid-green) 10%, transparent); }
.carobnjak-rezultat.uspjeh .bi { color: var(--sid-green); }
.carobnjak-rezultat.neuspjeh .bi-x-circle-fill { color: var(--sid-danger); }
.carobnjak-rezultat ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.carobnjak-rezultat li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.carobnjak-savjet { color: var(--sid-warn); }
.smtp-predlosci { margin: 12px 0 0; }
@media (max-width: 768px) {
  .carobnjak-obrazac { grid-template-columns: minmax(0, 1fr); }
  .carobnjak-obrazac .gumb { width: 100%; justify-content: center; }
}

/* Gumbi u zadnjem stupcu tablice: visina retka umanjena za 2 px gore i dolje (na računalu; na mobitelu su kartice). */
@media (min-width: 769px) {
  .tablica tbody td.akcije { height: 1px; padding: 2px 12px; font-size: 0; line-height: 0; }
  .tablica tbody td.akcije > a, .tablica tbody td.akcije > button, .tablica tbody td.akcije > form {
    display: inline-flex; vertical-align: top; height: 100%; margin: 0 0 0 6px; align-items: stretch;
  }
  .tablica tbody td.akcije > a:first-child, .tablica tbody td.akcije > button:first-child, .tablica tbody td.akcije > form:first-child { margin-left: 0; }
  .tablica tbody td.akcije .gumb { min-height: 32px; min-width: 40px; padding-top: 0; padding-bottom: 0; align-items: center; box-sizing: border-box; font-size: 13px; line-height: 1.3; }
  .tablica tbody td.akcije > form .gumb { height: auto; }
}