/* Biznis App — tema „Svijetli premium": bijela i topla siva, bakarni naglasak, font Manrope (lokalno, radi offline).
   Mirne površine sa mekim sjenkama; dugmad ostaju velika za rad na gradilištu (rukavice, sunce). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/vendor/fonts/manrope-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  /* nazivi --amber* su ostali iz stare teme; vrijednost je sada bakar */
  --ink: #23201c; --ink-2: #3a352f; --ink-3: #5b544b;
  --amber: #b0703c; --amber-d: #8f5a2e; --amber-l: #f6ece2; --amber-t: #6b3f1b; --amber-g: linear-gradient(135deg, #c48a55, #a3632f);
  --bg: #f6f4f0; --bg-2: #efebe5; --card: #ffffff; --text: #23201c; --muted: #6f685f; --line: #e7e2da; --line-2: #d3ccc1;
  --green: #3f7a4a; --green-l: #e9f2ea; --green-t: #2b5934;
  --red: #b03a35; --red-l: #fbecea; --red-t: #7f2723;
  --yellow: #a86a1c; --yellow-l: #fbf1e2; --yellow-t: #6b430f;
  --blue: #2f5f8a; --blue-l: #e8f0f7; --blue-t: #1f4466;
  --sh-1: 0 1px 2px rgba(35, 32, 28, .05), 0 2px 10px rgba(35, 32, 28, .04);
  --sh-2: 0 12px 34px rgba(35, 32, 28, .10), 0 2px 6px rgba(35, 32, 28, .05);
  --r: 16px; --r-s: 12px; --tap: 54px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font);
  font-family: var(--font);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171513; --bg-2: #1f1c19; --card: #24211d; --text: #f3efe9; --muted: #b3aa9e; --line: #36312b; --line-2: #4a433b;
    --amber: #d39a66; --amber-d: #b77c48; --amber-l: #3a2a1c; --amber-t: #f0cba6;
    --green: #8fc29a; --green-l: #1d2e21; --green-t: #bfe0c6;
    --red: #ef9a94; --red-l: #3d1c1a; --red-t: #f6c6c2;
    --yellow: #e0a964; --yellow-l: #3a2a14; --yellow-t: #f4d3a5;
    --blue: #93bde3; --blue-l: #182736; --blue-t: #c3dbf1;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .3); --sh-2: 0 12px 34px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-size: 16.5px; line-height: 1.5; padding-bottom: calc(74px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "tnum" 0; }
h1, h2, h3, .qty, .stat b, .big-secret, .day b, input.num, .btn, .nav button, .logo-word, th { font-family: var(--font-head); }
h1 { font-size: 1.75rem; font-weight: 750; margin: .4rem 0 .9rem; letter-spacing: -.025em; }
h2 { font-size: .8rem; font-weight: 750; margin: 1.8rem 0 .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
h3 { font-size: .78rem; font-weight: 750; margin: .2rem 0 .55rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
a { color: var(--amber-d); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.dim { opacity: .5; }
.empty { color: var(--muted); text-align: center; padding: 2.8rem 1rem; font-weight: 600; background: var(--card); border: 1px dashed var(--line-2);
  border-radius: var(--r); }
.note { background: var(--amber-l); color: var(--amber-t); border-radius: var(--r-s); padding: .8rem 1rem; font-weight: 600; border: 1px solid rgba(176, 112, 60, .18); }
.error { background: var(--red-l); color: var(--red-t); border-radius: var(--r-s); padding: .7rem .9rem; font-weight: 600; }
.error[hidden] { display: none; }

/* ikone */
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.with-ic { display: inline-flex; align-items: center; gap: .4rem; }
.with-ic .ic { color: var(--muted); }
.with-ic .unit { color: var(--amber); }

/* logo */
.logo-mark { display: inline-flex; align-items: center; gap: .6rem; }
.logo-box { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--amber-g); color: #fff;
  box-shadow: 0 4px 12px rgba(176, 112, 60, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.logo-box .ic { width: 24px; height: 24px; stroke-width: 2; vertical-align: 0; }
.logo-word { display: flex; flex-direction: column; line-height: 1; font-size: 1rem; letter-spacing: .08em; color: var(--text); }
.logo-word b { font-weight: 800; }
.logo-word span { font-size: .66rem; letter-spacing: .38em; color: var(--amber); font-weight: 700; margin-top: 2px; }
.logo-mark.on-dark .logo-word { color: var(--text); }
.logo-mark.on-dark .logo-word span { color: var(--amber); }

/* zaglavlje: svijetlo, staklasto */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
  padding-top: calc(.6rem + env(safe-area-inset-top)); background: rgba(255, 255, 255, .86); color: var(--text);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(176, 112, 60, .08); }
@media (prefers-color-scheme: dark) { .top { background: rgba(23, 21, 19, .86); } }
.who { margin-left: auto; display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--muted); font-weight: 600; }
.top .btn.ghost { color: var(--text); border-color: var(--line); background: var(--card); }
.lang-select { width: auto; min-height: 36px; max-width: 9.5rem; padding: .2rem .5rem; font-size: .85rem; border-radius: 10px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); }
.login-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.login-top .lang-select { max-width: 11rem; }
.sync { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; border-radius: 99px; padding: .3rem .8rem;
  font: 700 .78rem var(--font); cursor: pointer; min-height: 34px; letter-spacing: .02em; }
.sync.ok { background: var(--green-l); color: var(--green-t); border-color: rgba(63, 122, 74, .2); }
.sync.wait { background: var(--amber-l); color: var(--amber-t); border-color: rgba(176, 112, 60, .25); }
.sync.off { background: var(--red-l); color: var(--red-t); border-color: rgba(176, 58, 53, .2); }
body.logged-out .top, body.logged-out .nav { display: none; }
body.logged-out { padding-bottom: 0; }

/* navigacija: dole na telefonu, lijevo na računaru; aktivno = bakar */
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; overflow-x: auto; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); scrollbar-width: none; }
@media (prefers-color-scheme: dark) { .nav { background: rgba(31, 28, 25, .96); } }
.nav button { flex: 1 0 auto; min-width: 74px; min-height: 64px; border: 0; background: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .74rem;
  font-weight: 650; letter-spacing: .01em; cursor: pointer; padding: 0 .45rem; transition: color .15s, background .15s; }
.nav .ic { width: 23px; height: 23px; }
.nav button.active { color: var(--amber-d); box-shadow: inset 0 2px 0 var(--amber); }
.nav button:hover { color: var(--text); }

.view { max-width: 1060px; margin: 0 auto; padding: 1.1rem; outline: none; }
.center { min-height: 92vh; display: grid; place-items: center; padding: 1rem; }
.login-bg { min-height: 100vh; background:
    radial-gradient(1200px 600px at 85% -10%, rgba(196, 138, 85, .28), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(176, 112, 60, .16), transparent 60%),
    linear-gradient(rgba(35, 32, 28, .035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(35, 32, 28, .035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg); }
body.logged-out .view { max-width: none; padding: 0; }

/* kartice: meka sjenka; lijevo tanka traka u boji statusa */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.05rem 1.15rem; margin: .7rem 0; box-shadow: var(--sh-1); }
.list { display: flex; flex-direction: column; gap: .6rem; }
.entry { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: .9rem 1.1rem .9rem 1.25rem; color: var(--text); font: inherit; cursor: pointer; box-shadow: inset 4px 0 0 var(--line-2), var(--sh-1);
  transition: transform .12s, box-shadow .12s; }
.entry:hover { box-shadow: inset 4px 0 0 var(--line-2), var(--sh-2); }
.entry:active { background: var(--amber-l); }
.st-na_cekanju, .st-lokalno { box-shadow: inset 4px 0 0 var(--amber), var(--sh-1) !important; }
.st-potvrdjeno, .st-zakljucano { box-shadow: inset 4px 0 0 var(--green), var(--sh-1) !important; }
.st-vraceno { box-shadow: inset 4px 0 0 var(--red), var(--sh-1) !important; border-color: rgba(176, 58, 53, .35); }
.st-radi { box-shadow: inset 4px 0 0 var(--blue), var(--sh-1) !important; }
.st-ceka_potvrdu { box-shadow: inset 4px 0 0 var(--amber), var(--sh-1) !important; }
.card.st-na_cekanju, .card.st-potvrdjeno, .card.st-vraceno, .card.site { padding-left: 1.3rem; }
.card.warn { border-color: rgba(176, 58, 53, .45); }
.entry-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.entry-top b { font-size: 1.04rem; font-weight: 700; }
.qty { font-weight: 750; white-space: nowrap; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.reason { color: var(--red); font-weight: 700; margin: .35rem 0; display: flex; gap: .4rem; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 99px; padding: .2rem .7rem; font-size: .78rem;
  font-weight: 650; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.chip .ic { width: 14px; height: 14px; }
.chip.green { background: var(--green-l); color: var(--green-t); border-color: transparent; }
.chip.red { background: var(--red-l); color: var(--red-t); border-color: transparent; }
.chip.yellow { background: var(--yellow-l); color: var(--yellow-t); border-color: transparent; }
.chip.blue { background: var(--blue-l); color: var(--blue-t); border-color: transparent; }
.chip.grey { background: var(--amber-l); color: var(--amber-t); border-color: transparent; }

/* brojke: glavna kartica tamna sa bakarnim brojem, ostale svijetle */
.stat { background: linear-gradient(135deg, #2a2621 0%, #3b342c 100%); color: #f3efe9; border: 0; position: relative; overflow: hidden;
  box-shadow: var(--sh-2); }
.stat::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 154, 102, .32), transparent 65%); pointer-events: none; }
.stat small { color: #cfc6ba; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.stat b { display: block; font-size: 2.3rem; font-weight: 750; letter-spacing: -.02em; color: #e7b98f; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: .7rem 0; }
.stats .card { margin: 0; }
.stats .stat { grid-column: 1 / -1; }
.stats .card:not(.stat) b { display: block; font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats .card:not(.stat) small { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; }
.dayhead { margin-top: 1.4rem; }
.clock { padding-left: 1.2rem; }
.sig-canvas { display: block; width: 100%; height: 200px; border: 1.5px dashed var(--line-2); border-radius: var(--r-s); background: #fff;
  touch-action: none; cursor: crosshair; }
.doc-alert { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; color: var(--text);
  background: var(--amber-l); border: 1px solid rgba(176, 112, 60, .4); cursor: pointer; }
.doc-alert b { flex: 1; }
.nowrap { white-space: nowrap; }

/* BIM: tlocrt, 3D */
.bim-wrap { background: #fdfcfa; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem; margin: .7rem 0; box-shadow: var(--sh-1); }
.bim-svg { display: block; width: 100%; height: auto; max-height: 74vh; }
.bim-plan text { font-family: var(--font); }
.bim-frame { display: block; width: 100%; height: min(68vh, 640px); min-height: 340px; border: 0; border-radius: var(--r-s); background: #f4f1ea; }
.bim-room { cursor: pointer; }
.bim-room > path:first-child { transition: filter .12s; }
.bim-room:hover > path:first-child, .bim-room:focus > path:first-child { filter: brightness(.95) saturate(1.15); }
.bim-room:focus { outline: none; }
.bim-tools { margin: .2rem 0 .3rem; }
.bim-tools .btn.on { background: var(--amber-l); color: var(--amber-t); border-color: rgba(176, 112, 60, .35); }
.bim-status { margin: .4rem .2rem; }
.legend-prazno::before, .legend-u_radu::before, .legend-potvrdjeno::before { content: ""; width: .8rem; height: .8rem;
  border-radius: 4px; border: 1px solid rgba(35, 32, 28, .25); display: inline-block; }
.legend-prazno::before { background: #ebe7df; }
.legend-u_radu::before { background: #f0c99a; }
.legend-potvrdjeno::before { background: #b9d3b4; }
.clock h3 { color: var(--text); display: flex; align-items: center; gap: .45rem; }
.clock-line b { font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.clock-sum { font-size: 1rem; color: var(--muted); margin-top: .15rem; font-weight: 600; }
.clock-actions .btn { flex: 1 1 auto; }

/* dugmad */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .5rem 1.05rem;
  border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card); color: var(--text); font-size: .97rem;
  font-weight: 700; letter-spacing: .01em; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(35, 32, 28, .05);
  transition: background .15s, box-shadow .15s, border-color .15s, transform .08s; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--amber-g); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(176, 112, 60, .32), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.primary:hover { box-shadow: 0 8px 22px rgba(176, 112, 60, .42), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.primary:active { background: var(--amber-d); }
.btn.danger { color: var(--red); border-color: rgba(176, 58, 53, .45); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.small { min-height: 38px; padding: .3rem .8rem; font-size: .88rem; }
.btn.big { min-height: var(--tap); font-size: 1.08rem; }
.btn.huge { min-height: 68px; font-size: 1.2rem; margin: .4rem 0 1rem; text-transform: uppercase; letter-spacing: .1em; border-radius: var(--r);
  background: var(--amber-g); color: #fff; border: 0; box-shadow: 0 12px 28px rgba(176, 112, 60, .38), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn.huge:active { transform: translateY(2px); box-shadow: 0 6px 16px rgba(176, 112, 60, .35); }
.btn.huge .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.btn.wide { width: 100%; }
.link { border: 0; background: none; color: var(--amber-d); cursor: pointer; font: inherit; font-size: .85rem; padding: .2rem; font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; align-items: center; }
.actions > input { flex: 1 1 200px; }
.actions > .row2 { flex: 1 1 100%; }

/* forme */
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 650; font-size: .86rem; margin: .55rem 0; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { label { color: var(--muted); } }
label.check { flex-direction: row; align-items: center; gap: .6rem; font-weight: 550; color: var(--text); }
label.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--amber); }
input, select, textarea { font: inherit; font-size: 16.5px; color: var(--text); background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: .62rem .8rem; min-height: 50px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 4px rgba(176, 112, 60, .16); }
.btn:focus-visible, .opt:focus-visible, .tile:focus-visible, .entry:focus-visible, .nav button:focus-visible, .sync:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; }
input.num { font-size: 1.7rem; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.row2 > label { margin: .3rem 0; }
.inline { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .5rem 0; }
.inline input, .inline select { width: auto; flex: 1 1 140px; }
.w4 { max-width: 80px; flex: 0 0 80px !important; }
.w6 { max-width: 110px; }
.filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; margin-bottom: .7rem; }
.filters > * { flex: 1 1 160px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .2rem .8rem; }

/* prijava */
.login { width: min(440px, 100%); border: 1px solid var(--line); padding: 1.7rem 1.6rem; border-radius: 22px; box-shadow: var(--sh-2);
  background: rgba(255, 255, 255, .94); }
@media (prefers-color-scheme: dark) { .login { background: var(--card); } }
.login h1 { margin-top: 0; }
.login-head { margin-bottom: .8rem; }
.login-head .logo-box { width: 46px; height: 46px; border-radius: 13px; }
.login-head .logo-word { font-size: 1.25rem; }
.login-head p { margin: .7rem 0 0; color: var(--muted); }
.pin-input { font-size: 2.1rem; text-align: center; letter-spacing: .45rem; font-weight: 750; }

/* unos: koraci */
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .95rem; margin: .7rem 0; box-shadow: var(--sh-1); }
.pick { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .45rem; }
.opt { min-height: var(--tap); padding: .5rem 1rem; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card);
  color: var(--text); font: inherit; font-weight: 650; cursor: pointer; transition: border-color .12s, background .12s; }
.opt:hover, .tile:hover, .tab:hover { border-color: var(--ink-3); }
.pick.small .opt { min-height: 46px; font-size: .94rem; }
.opt.on, .tile.on { border-color: var(--amber); background: var(--amber-l); color: var(--amber-t); box-shadow: 0 0 0 1px var(--amber) inset; }
.tab.on { border-color: var(--ink); background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .tab.on { background: var(--amber); border-color: var(--amber); color: #1b1815; } }
.tabs { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .6rem; scrollbar-width: none; }
.tab { flex: 0 0 auto; border: 1px solid var(--line-2); background: var(--card); border-radius: 99px; padding: .4rem .95rem; font: inherit;
  font-weight: 650; font-size: .92rem; color: var(--text); cursor: pointer; min-height: 42px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .55rem; }
.tile { min-height: 96px; border: 1px solid var(--line-2); background: var(--card); border-radius: var(--r); padding: .6rem; font: inherit;
  font-weight: 650; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 4px; line-height: 1.2; box-shadow: var(--sh-1); }
.tile small { color: var(--muted); font-weight: 550; }
.tile.on small { color: var(--amber-t); }
.tile-ic { width: 28px; height: 28px; color: var(--amber); margin-bottom: 2px; stroke-width: 1.6; }
.tile.on .tile-ic { color: var(--amber-d); }
.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 14px; margin-bottom: .6rem; }
.seg button { flex: 1; min-height: 46px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 650; font-size: .95rem;
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--sh-1); }
.gps { display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-s); margin: .5rem 0; font-weight: 650; }
.gps.ok { background: var(--green-l); color: var(--green-t); }
.gps.warn { background: var(--red-l); color: var(--red-t); }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.thumbs img { width: 86px; height: 86px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); display: block; box-shadow: var(--sh-1); }
.thumb { position: relative; }
.thumb .x { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card);
  background: var(--red); color: #fff; font-size: 1.1rem; cursor: pointer; }
.daybar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .35rem; box-shadow: var(--sh-1); }
.daybar .btn { min-width: 52px; }
.daybar .btn .ic { width: 22px; height: 22px; }
.day { text-align: center; }
.day b { font-size: 1.15rem; font-weight: 750; text-transform: capitalize; letter-spacing: -.01em; }
.day small { display: block; color: var(--muted); }

/* poslovođa */
.group { margin: 1.3rem 0; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-2); padding-bottom: .5rem; }
.group-head b { font-size: 1.08rem; font-weight: 750; letter-spacing: -.01em; }
.review .actions .btn { flex: 1 1 auto; }

/* tabele (vlasnik) */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin: .6rem 0; box-shadow: var(--sh-1); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .62rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--bg); color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
tbody tr:hover td { background: #fbf8f4; }
@media (prefers-color-scheme: dark) { tbody tr:hover td { background: var(--bg-2); } }
tbody tr:last-child td { border-bottom: 0; }
td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td input { min-height: 40px; padding: .3rem .5rem; font-size: .95rem; }
details > summary { cursor: pointer; padding: .2rem 0; min-height: 38px; }
details > summary b { font-size: 1.06rem; font-weight: 750; }
.tree ul { margin: .2rem 0; padding-left: 1.2rem; }
.tree li { margin: .25rem 0; }
.adder { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: .6rem; margin: .45rem 0; display: flex; flex-direction: column; gap: .4rem; }
.secret { border: 1px solid rgba(176, 112, 60, .35); background: var(--amber-l); color: var(--amber-t); }
.big-secret { font-size: 2.2rem; font-weight: 800; letter-spacing: .2rem; margin: .3rem 0; user-select: all; color: var(--text); font-variant-numeric: tabular-nums; }

/* početna vlasnika: pregled */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.dash-head h1 { margin-bottom: .2rem; }
.dash-head p { margin: 0 0 .9rem; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--sh-1); position: relative; }
.kpi small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .67rem; font-weight: 750; }
.kpi b { display: block; font-size: 1.75rem; font-weight: 750; letter-spacing: -.025em; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kpi span { display: block; color: var(--muted); font-size: .84rem; margin-top: .1rem; }
.kpi.lux { background: linear-gradient(135deg, #2a2621 0%, #3b342c 100%); border: 0; color: #f3efe9; box-shadow: var(--sh-2); overflow: hidden; }
.kpi.lux::after { content: ""; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 154, 102, .35), transparent 65%); }
.kpi.lux small, .kpi.lux span { color: #cfc6ba; }
.kpi.lux b { color: #e7b98f; }
.kpi .ic { position: absolute; right: 1rem; top: 1rem; width: 22px; height: 22px; color: var(--amber); opacity: .85; }
.panels { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 900px) { .panels { grid-template-columns: 1.4fr 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; box-shadow: var(--sh-1); min-width: 0; }
.panel h3 { margin-top: 0; }
.chart { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--font); fill: var(--muted); }
.bars-h { display: flex; flex-direction: column; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: baseline; font-size: .9rem; }
.bar-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-row .track { grid-column: 1 / -1; height: 8px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.bar-row .fill { display: block; height: 100%; border-radius: 99px; background: var(--amber-g); }
.bar-row .fill.green { background: linear-gradient(90deg, #6aa577, #3f7a4a); }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--ink); color: #fff; padding: .8rem 1.15rem; border-radius: 14px; max-width: 92vw; font-weight: 650;
  border-left: 4px solid var(--amber); box-shadow: var(--sh-2); }
.toast.ok { border-left-color: #8fc29a; }
.toast.err { background: #7f2723; border-left-color: #f6c6c2; }
.toast[hidden] { display: none; }

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 236px; }
  .nav { top: 0; bottom: 0; right: auto; width: 236px; flex-direction: column; padding: 76px .7rem 1rem; overflow-y: auto; gap: 2px;
    border-top: 0; border-right: 1px solid var(--line); background: #fbfaf7; }
  @media (prefers-color-scheme: dark) { .nav { background: var(--bg-2); } }
  .nav button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: .75rem; min-height: 46px; font-size: .95rem;
    padding: 0 .85rem; border-radius: 12px; }
  .nav button:hover { background: var(--bg-2); }
  .nav button.active { box-shadow: none; background: var(--amber-l); color: var(--amber-t); }
  .nav button.active .ic { color: var(--amber); }
  .top { margin-left: -236px; padding-left: 1.1rem; }
  body.logged-out { padding-left: 0; }
  .toast { bottom: 26px; }
  .view { padding: 1.6rem 1.8rem; }
}
@media (max-width: 420px) {
  .row2 { grid-template-columns: 1fr; }
  #who, .top .logo-word, #logout span { display: none; }
  .lang-select { max-width: 6.5rem; }
  h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* pregled: kpi kao dugme, prsten napretka */
button.kpi { font: inherit; text-align: left; cursor: pointer; color: inherit; width: 100%; transition: box-shadow .15s, transform .08s; }
button.kpi:hover { box-shadow: var(--sh-2); }
.ring-row { display: flex; align-items: center; gap: .9rem; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: .55rem 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ring-row:last-child { border-bottom: 0; }
.ring-row b { display: block; font-weight: 700; }
.ring { width: 76px; flex: 0 0 76px; color: var(--text); }
.bar-row > span:first-child { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .kpi.lux { grid-column: 1 / -1; }
  .kpi { padding: .85rem .9rem; }
  .kpi b { font-size: 1.4rem; }
  .kpi .ic { display: none; }
}
@media (max-width: 720px) {
  .bim-wrap:has(.bim-plan) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bim-plan { min-width: 680px; max-height: none; }
}
/* prijava na uskom ekranu: kartica ne smije biti šira od ekrana (izbor jezika se sužava) */
.center { grid-template-columns: minmax(0, 440px); justify-content: center; }
.login { width: 100%; min-width: 0; }
.login-top .lang-select { min-width: 0; flex: 0 1 11rem; }

/* --- troškovnik --- */
td.prog { min-width: 150px; }
td.opis { min-width: 230px; }
td .chip { white-space: nowrap; }
.prog-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
td .track, .plan-card .track { display: block; height: 7px; background: var(--bg-2); border-radius: 99px; overflow: hidden; margin: .3rem 0; }
td .fill { display: block; height: 100%; border-radius: 99px; background: var(--amber-g); }
td .fill.green { background: linear-gradient(90deg, #6aa577, #3f7a4a); }
td .fill.red { background: linear-gradient(90deg, #d26a63, #b03a35); }
tr.over td { background: var(--red-l); }
tfoot td { font-weight: 750; border-top: 2px solid var(--line-2); }

/* --- kalendar --- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin: .4rem 0 .6rem; }
.cal-head { text-align: center; font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .2rem 0; }
.cal-head.we { color: var(--amber-d); }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .2rem; min-height: 96px; min-width: 0;
  padding: .45rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-1); }
.cal-cell.pad { background: transparent; border-style: dashed; box-shadow: none; cursor: default; }
.cal-cell.we { background: var(--bg-2); }
.cal-cell:hover { border-color: var(--line-2); }
.cal-cell.today .cal-day { background: var(--amber); color: #fff; }
.cal-cell.sel { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-l), var(--sh-1); }
.cal-day { align-self: flex-start; min-width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; border-radius: 99px;
  font-weight: 750; font-variant-numeric: tabular-nums; }
.cal-plan { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; gap: .15rem; font-size: .74rem; font-weight: 750; color: var(--blue-t); }
.cal-plan .ic { width: 13px; height: 13px; }
.cal-names { display: flex; flex-direction: column; font-size: .74rem; line-height: 1.25; color: var(--ink-3); overflow: hidden; }
.cal-names span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-marks { margin-top: auto; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.cal-h { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mark { display: inline-block; width: 9px; height: 9px; border-radius: 99px; vertical-align: middle; }
.mark.green { background: var(--green); }
.mark.yellow { background: var(--yellow); }
.mark.red { background: var(--red); }
.mark.red-o { border: 2px solid var(--red); width: 9px; height: 9px; box-sizing: border-box; }
.ic.mark-ic { width: 13px; height: 13px; color: var(--muted); vertical-align: middle; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.day-panel { margin-top: .8rem; }
.day-panel h2 { margin: 0; text-transform: capitalize; }
.plan-site { margin: .5rem 0 .8rem; }
.plan-list { list-style: none; padding: 0; margin: .35rem 0 0; }
.plan-list li { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.plan-list li:last-child { border-bottom: 0; }
.plan-list li .btn { margin-left: auto; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .2rem .8rem; margin: .4rem 0; }
.plan-card .plan-today { margin-top: .5rem; padding: .6rem .8rem; border-radius: var(--r-s); background: var(--blue-l); color: var(--blue-t); }
@media (max-width: 640px) {
  .cal { gap: .2rem; }
  .cal-cell { min-height: 58px; padding: .3rem; }
  .cal-names, .cal-h { display: none; }
  .cal-plan { position: static; font-size: .68rem; }
  .cal-day { min-width: 1.4rem; height: 1.4rem; font-size: .85rem; }
  .cal-head { font-size: .6rem; letter-spacing: .02em; }
}
.plan-card .plan-list li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .1rem .5rem; }
.plan-card .plan-list li > :nth-child(3) { grid-column: 2; }

/* --- ograda radilišta --- */
.fence-map { position: relative; z-index: 0; isolation: isolate; height: 360px; border-radius: var(--r-s); border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); margin: .4rem 0 .8rem; }
.fence-map .leaflet-container { font: inherit; }
.sketch-box { display: flex; justify-content: center; margin: .5rem 0 .2rem; }
.fence-sketch { width: 100%; max-width: 360px; height: auto; background: var(--bg-2); border-radius: var(--r-s); }
.fence-area { fill: rgba(176, 112, 60, .16); stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; }
.fence-line { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 6 4; }
.fence-pt { fill: var(--card); stroke: var(--amber-d); stroke-width: 2.5; }
.fence-no { font-size: 12px; font-weight: 750; fill: var(--ink-3); }
.fence-scale { stroke: var(--ink-3); stroke-width: 2; }
.pt-list { margin: .3rem 0; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }
.pt-list li { padding: .1rem 0; }
.radio-list { display: grid; gap: .2rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .65rem; }
@media (max-width: 420px) { .row3 { grid-template-columns: 1fr; } }
.ic.mark-ic.over { color: var(--yellow); }
.ic.mark-ic.out { color: var(--red); }
.cal-cell.hol .cal-day { box-shadow: inset 0 0 0 2px var(--yellow); }
td.days { min-width: 260px; }

/* --- pregled: grafikoni (boje kroz klase, rade i u tamnom režimu) --- */
.dash h3 { display: flex; align-items: center; gap: .45rem; }
.dash h3 .ic { width: 16px; height: 16px; color: var(--amber); }
.panels + .panels { margin-top: .75rem; }
@media (min-width: 900px) { .panels.even { grid-template-columns: 1fr 1fr; } }
.chart-box { position: relative; min-height: 240px; }
.chart .grid { stroke: currentColor; stroke-opacity: .07; }
.chart .axis { stroke: currentColor; stroke-opacity: .22; }
.chart .g-top { stop-color: #c99260; }
.chart .g-bot { stop-color: #a3632f; }
.chart .a-top { stop-color: var(--blue); stop-opacity: .22; }
.chart .a-bot { stop-color: var(--blue); stop-opacity: 0; }
.chart .bar { fill: url(#barg); transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow .55s cubic-bezier(.2, .8, .2, 1) both;
  transition: opacity .15s; }
.chart .bar.zero { fill: transparent; }
.chart .bar.today { filter: drop-shadow(0 3px 6px rgba(176, 112, 60, .35)); }
.days-chart:has(.bar.on) .bar:not(.on) { opacity: .45; }
.chart .hover-band { fill: currentColor; fill-opacity: .045; }
.chart .hrs-line { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .hrs-area { fill: url(#areag); }
.chart .hrs-dot { fill: var(--card); stroke: var(--blue); stroke-width: 2; }
.chart .hrs-dot.on { stroke-width: 4; }
.chart text.hrs-t { fill: var(--blue); }
.chart text.today-t { fill: var(--amber-d); font-weight: 750; }
.days-chart { touch-action: pan-y; cursor: crosshair; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-tip { position: absolute; z-index: 2; pointer-events: none; min-width: 160px; display: flex; flex-direction: column; gap: .15rem;
  background: var(--ink); color: #fff; border-radius: 12px; padding: .55rem .75rem; font-size: .82rem; box-shadow: var(--sh-2); }
.chart-tip[hidden] { display: none; }
.chart-tip > b { text-transform: capitalize; font-size: .86rem; margin-bottom: .1rem; }
.tip-row { display: flex; align-items: center; gap: .4rem; }
.tip-row b { margin-left: auto; padding-left: .8rem; font-variant-numeric: tabular-nums; }
.tip-row.muted { color: #cfc6ba; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .55rem; font-size: .82rem; color: var(--muted); font-weight: 600; }
.legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.legend.col { flex-direction: column; list-style: none; padding: 0; margin: 0; gap: .55rem; flex: 1; min-width: 150px; }
.legend.col li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .5rem; color: var(--text); font-size: .9rem; }
.legend.col b { font-variant-numeric: tabular-nums; }
.legend.col small { color: var(--muted); min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; background: var(--line-2); }
.sw.bar-sw { background: var(--amber-g); }
.sw.hrs-sw { height: 3px; width: 14px; border-radius: 2px; background: var(--blue); }
.sw.green { background: var(--green); }
.sw.amber { background: var(--amber); }
.sw.red { background: var(--red); }
.sw.blue { background: var(--blue); }
.ring-bg { fill: none; stroke: currentColor; stroke-opacity: .09; stroke-width: 12; }
.ring-fg { fill: none; stroke: var(--amber); stroke-width: 12; stroke-linecap: round; }
.ring-fg.done { stroke: var(--green); }
.chart .ring-t { fill: var(--text); }
.donut { width: 150px; flex: 0 0 150px; color: var(--text); }
.donut .ring-bg { stroke-width: 16; }
.donut .seg { fill: none; stroke-width: 16; }
.donut .seg.green { stroke: var(--green); }
.donut .seg.amber { stroke: var(--amber); }
.donut .seg.red { stroke: var(--red); }
.donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: .3rem;
  border-radius: var(--r-s); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bar-row .fill { width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bar-row .fill.amber { background: var(--amber-g); }
.bar-row .fill.blue { background: linear-gradient(90deg, #5d8bb5, #2f5f8a); }
.bar-row .fill.red { background: linear-gradient(90deg, #d26a63, #b03a35); }
.track.stack { display: flex; }
.track.stack .fill { border-radius: 0; }
.track.tall { height: 10px; }
.bar-row.with-av { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.bar-row.with-av .track { grid-column: 2 / -1; }
.bar-row.with-av > .av { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800;
  background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); }
.bar-row.with-av > .av.first { background: var(--amber-g); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(176, 112, 60, .3); }
.bar-row.as-btn { width: calc(100% + .8rem); background: none; border: 0; padding: .35rem .4rem; margin: 0 -.4rem; border-radius: 10px; font: inherit;
  color: inherit; text-align: left; cursor: pointer; }
.bar-row.as-btn:hover, .donut-wrap:hover, .ring-row:hover { background: var(--bg); }
.bar-sub { grid-column: 1 / -1; font-size: .8rem; font-variant-numeric: tabular-nums; }
.kpi .kpi-ic { position: absolute; margin: 0; right: .9rem; top: .9rem; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--amber-l); }
.kpi .kpi-ic .ic { position: static; width: 19px; height: 19px; opacity: 1; }
.kpi.lux .kpi-ic { background: rgba(231, 185, 143, .14); }
.kpi.lux .kpi-ic .ic { color: #e7b98f; }
.kpi small { padding-right: 2.6rem; }
.kpi.attn { box-shadow: inset 0 3px 0 var(--amber), var(--sh-1); }
.kpi.warn { box-shadow: inset 0 3px 0 var(--red), var(--sh-1); }
.kpi.warn .kpi-ic { background: var(--red-l); }
.kpi.warn .kpi-ic .ic { color: var(--red); }
.kpi .trend { display: inline; font-weight: 750; margin: 0; }
.trend.up { color: #9fd3a9; }
.trend.down { color: #f2a8a2; }
.kpi .trend > span { display: inline; font-weight: 500; color: #cfc6ba; }
.badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 99px;
  background: #fff; color: var(--amber-d); font-size: .78rem; font-weight: 800; }
@media (max-width: 560px) {
  .kpi .kpi-ic { display: none; }
  .kpi small { padding-right: 0; }
  .donut { width: 120px; flex-basis: 120px; }
  .chart-box { min-height: 200px; }
}

/* --- cijela aplikacija: dorada --- */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#view > * { animation: view-in .28s ease-out both; }
body { background: radial-gradient(900px 340px at 70% -120px, rgba(196, 138, 85, .10), transparent 70%) no-repeat, var(--bg); }
::selection { background: rgba(176, 112, 60, .25); }
.view h1::after { content: ""; display: block; width: 34px; height: 3px; margin-top: .45rem; border-radius: 3px; background: var(--amber-g); }
.login h1::after { display: none; }
.empty { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.empty::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: var(--amber-l) center / 26px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0703c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v12H4z'/%3E%3Cpath d='M4 7l2.5-3h11L20 7'/%3E%3Cpath d='M9.5 11.5h5'/%3E%3C/svg%3E"); }
.table-wrap { max-height: 78vh; }
.table-wrap thead th { position: sticky; top: 0; z-index: 1; }
tbody tr:nth-child(even) td { background: rgba(35, 32, 28, .018); }
.entry:hover { transform: translateY(-1px); }
.card, .panel, .kpi { transition: box-shadow .15s; }
/* meni: grupe na računaru, aktivna stavka sa trakom; na telefonu aktivna ikona dobija pozadinu */
.nav-group { display: none; }
.nav button .ic { transition: background .15s, color .15s; }
@media (max-width: 899px) {
  .nav button.active { box-shadow: none; }
  .nav button .ic { width: 44px; height: 28px; padding: 3px 11px; border-radius: 99px; }
  .nav button.active .ic { background: var(--amber-l); color: var(--amber-d); }
}
@media (min-width: 900px) {
  .nav-group { display: block; margin: .9rem .85rem .25rem; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); opacity: .8; }
  .nav-group:first-child { margin-top: 0; }
  .nav button { position: relative; }
  .nav button.active::before { content: ""; position: absolute; left: -.7rem; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--amber); }
}
/* kalendar: imena kao pilule */
.cal-names { gap: 2px; }
.cal-names span { background: var(--blue-l); color: var(--blue-t); border-radius: 6px; padding: 0 .3rem; font-weight: 600; font-size: .7rem; }
.cal-cell { transition: border-color .12s, box-shadow .12s; }
.cal-cell:not(.pad):hover { box-shadow: var(--sh-2); }
@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(900px 340px at 70% -120px, rgba(211, 154, 102, .08), transparent 70%) no-repeat, var(--bg); }
  tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
  .chart .g-top { stop-color: #e0ac7c; }
  .chart .g-bot { stop-color: #b77c48; }
  .chart-tip { background: #3a352f; }
  .badge { background: #1b1815; }
}

/* --- oglasi i reklame --- */
.ad-search { margin: .2rem 0 .8rem; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.ad-grid .card { margin: 0; }
.ad { display: flex; flex-direction: column; gap: .35rem; }
.ad.ad-posao { box-shadow: inset 0 3px 0 var(--blue), var(--sh-1); }
.ad.ad-ponuda { box-shadow: inset 0 3px 0 var(--green), var(--sh-1); }
.ad.ad-potraznja { box-shadow: inset 0 3px 0 var(--yellow), var(--sh-1); }
.ad-top { margin-top: 0; }
.ad-price { margin-left: auto; font-weight: 800; color: var(--amber-d); font-variant-numeric: tabular-nums; }
.ad-title { margin: .1rem 0 0; font-size: 1.1rem; text-transform: none; letter-spacing: -.01em; color: var(--text); font-weight: 750; }
.ad-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--muted); font-size: .88rem; font-weight: 600; }
.ad-meta .ic { width: 15px; height: 15px; }
.ad-desc { margin: .2rem 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink-2); }
@media (prefers-color-scheme: dark) { .ad-desc { color: var(--text); } }
.ad-foot { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--line); }
.ad-foot > small { margin-right: auto; }
.replies { list-style: none; padding: 0; margin: .5rem 0 0; }
.replies li { padding: .6rem .2rem; border-top: 1px solid var(--line); }
.replies p { margin: .25rem 0; white-space: pre-line; overflow-wrap: anywhere; }
.badge.dark { background: var(--amber); color: #fff; margin-left: .2rem; }
.promo { position: relative; margin: .9rem 0; padding: .9rem 1.1rem; border-radius: var(--r); border: 1px dashed rgba(176, 112, 60, .45);
  background: linear-gradient(135deg, var(--amber-l), var(--card) 70%); display: flex; flex-direction: column; gap: .25rem; }
.promo[hidden] { display: none; }
.promo small { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.promo b { font-size: 1.05rem; }
.promo p { margin: 0; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { .promo p { color: var(--muted); } }
.promo .btn { align-self: flex-start; margin-top: .35rem; }
tr.dim td { opacity: .55; }

/* oglasi: filteri po zemlji, kategoriji i naslovu; izbor zemalja pri objavi */
.ad-filters { display: flex; flex-direction: column; gap: .35rem; margin: .2rem 0 .6rem; }
.ad-filter-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: .5rem; }
.ad-filter-row .ad-search { margin: 0; }
.ad-filters label.check { margin: .1rem 0; }
.cat-chips { margin: .2rem 0 0; padding-bottom: .2rem; }
.chip-btn { flex: 0 0 auto; border: 1px solid var(--line-2); background: var(--card); color: var(--text); border-radius: 99px;
  padding: .35rem .85rem; min-height: 38px; font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.chip-btn:hover { border-color: var(--ink-3); }
.chip-btn.on { background: var(--amber-l); color: var(--amber-t); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.chip-btn b { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--muted); }
.chip-btn.on b { color: var(--amber-d); }
.chip-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.country-pick { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 210px; overflow-y: auto; padding: .2rem 0; }
.field-block { margin: .55rem 0; }
.field-label { display: block; font-weight: 650; font-size: .86rem; color: var(--ink-3); margin-bottom: .3rem; }
@media (prefers-color-scheme: dark) { .field-label { color: var(--muted); } }
.ad-countries { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cc { display: inline-block; padding: .05rem .4rem; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .cc { color: var(--muted); } }
.ad-count { margin: .2rem 0 .5rem; }
@media (max-width: 640px) {
  .ad-filter-row { grid-template-columns: 1fr 1fr; }
  .ad-filter-row .ad-search { grid-column: 1 / -1; }
}
/* --- pravno i zaštita podataka --- */
.legal-card { width: min(760px, 100%); }
.center.legal-page { grid-template-columns: minmax(0, 760px); align-items: start; padding-top: 2rem; }
.legal-doc { line-height: 1.6; }
.legal-doc h1 { font-size: 1.35rem; margin: .4rem 0 .8rem; }
.legal-doc h2 { margin: 1.4rem 0 .5rem; color: var(--text); letter-spacing: .06em; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3rem; margin: .4rem 0 .8rem; }
.legal-doc li { margin: .25rem 0; }
.legal-doc li > ul { margin: .2rem 0; }
.legal-doc p { margin: .5rem 0; }
.legal-doc .table-wrap { box-shadow: none; }
.legal-doc td { font-size: .88rem; }
.legal-check { margin: 1rem 0 .6rem; padding: .7rem .8rem; border-radius: var(--r-s); background: var(--amber-l); color: var(--amber-t); }
.login-legal { text-align: center; margin: .9rem 0 0; color: var(--muted); font-size: .85rem; }
.login-legal .link { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media print {
  .top, .nav, .tabs, .no-print, .toast { display: none !important; }
  body { padding: 0 !important; background: #fff; }
  .card { box-shadow: none; border: 0; }
}