/* Domaćinstvo d.o.o. – boje i tipografija iz mockupa */
:root {
    --ink: #16201D;
    --ink2: #3F4A46;
    --muted: #5A6661;
    --line: #DDE3E0;
    --line2: #EEF1EF;
    --bg: #F4F6F5;
    --card: #FFFFFF;
    --green: #1E7A5F;
    --green-bg: #DDF0E7;
    --warn: #C8792A;
    --warn-bg: #FBEBD9;
    --bad: #B23B2E;
    --bad-bg: #FDECEA;
    --info-bg: #E3ECF7;
    --side: #16201D;
    --side-fg: #B7C4BF;
    --radius: 12px;
    --mono: ui-monospace, "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--bg);
}
a { color: inherit; text-decoration: none; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
small { display: block; color: var(--muted); font-size: 12px; }
code, pre, .mono { font-family: var(--mono); }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; }

/* Raspored */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: #FFFFFF; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 6px 20px; }
.logo { width: 36px; height: 36px; border-radius: 9px; background: var(--green); display: grid; place-items: center; font-weight: 800; }
.brand-t b { display: block; font-size: 15px; }
.brand-t small { color: var(--side-fg); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--side-fg); font-weight: 600; }
.nav a i { font-style: normal; width: 20px; text-align: center; }
.nav a:hover { background: #22302B; color: #FFFFFF; }
.nav a.active { background: #1F3A32; color: #FFFFFF; }
.main { padding: 28px 32px 60px; max-width: 1280px; width: 100%; }

.ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.sub { margin: 4px 0 0; color: var(--muted); }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.grid2 > .card, .stack > .card { margin-bottom: 0; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi b { font-family: var(--mono); font-size: 24px; }
a.kpi:hover { border-color: var(--green); }

/* Trake */
.bar { height: 8px; border-radius: 4px; background: var(--line2); overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.bar i.warn { background: var(--warn); }
.bar i.bad { background: var(--bad); }
.brow { display: flex; gap: 8px; margin-top: 10px; }

/* Dugmad i forme */
.btn { min-height: 38px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--ink); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { background: var(--green); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.x { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.x:hover { background: var(--bg); color: var(--ink); }
input, select { font: inherit; color: var(--ink); min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; width: 100%; }
input:focus, select:focus { outline: 2px solid var(--green); outline-offset: -1px; }
input.num { width: 90px; text-align: right; min-height: 32px; }
.form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.form .f-wide { grid-column: span 2; }
.form .btn { align-self: end; }
.toggle { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.toggle input { width: auto; min-height: 0; }
.note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--green-bg); }
.month { font-weight: 700; min-width: 140px; text-align: center; text-transform: capitalize; }

/* Zadaci i liste */
.task { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.task.done b { text-decoration: line-through; color: var(--muted); }
.check { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--ink); background: #FFFFFF; cursor: pointer; font-weight: 700; color: #FFFFFF; }
.task.done .check { background: var(--green); border-color: var(--green); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.dot.s-warn { background: var(--warn); }

/* Tabele */
.tbl { display: flex; flex-direction: column; }
.tr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 110px 110px 110px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.tr.five { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.4fr) 190px; }
.tr.th { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.r { text-align: right; justify-content: flex-end; }
.actions { display: flex; gap: 4px; align-items: center; }

/* Statusi */
.pill { border: 0; border-radius: 12px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
span.pill { cursor: default; }
.s-ok { background: var(--green-bg); color: #17603F; }
.s-warn { background: var(--warn-bg); color: #8A4B12; }
.s-bad { background: var(--bad-bg); color: var(--bad); }
.s-info { background: var(--info-bg); color: #2C5A8C; }
.t-bad { color: var(--bad) !important; }
.t-warn { color: var(--warn) !important; }

/* Tabovi, računi, čipovi */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--line); border-radius: 10px; width: fit-content; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink2); }
.tabs button.on { background: var(--ink); color: #FFFFFF; }
.cnt { font-family: var(--mono); font-size: 11px; opacity: .7; margin-left: 4px; }
.receipt { padding: 12px 0; border-bottom: 1px solid var(--line2); }
.big { font-size: 16px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line2); }
.chip i { color: var(--muted); }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tools div { padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.tools code { font-weight: 700; font-size: 12px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: var(--bad-bg); color: var(--bad); z-index: 1000; }
#blazor-error-ui .reload { font-weight: 700; text-decoration: underline; }

/* Mobitel: meni ide dolje */
@media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .side { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; padding: 6px; z-index: 50; }
    .brand { display: none; }
    .nav { flex-direction: row; overflow-x: auto; }
    .nav a { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 10px; white-space: nowrap; }
    .main { padding: 18px 16px 96px; }
    .kpis, .kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid2 { grid-template-columns: minmax(0, 1fr); }
    .form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tr, .tr.five { grid-template-columns: minmax(0, 1fr) auto; }
    .tr > span:nth-child(2), .tr > span:nth-child(4) { display: none; }
    .tr.five > span:nth-child(3) { display: none; }
    .tools { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Faza 2 ================= */
.lnk { color: var(--green); font-weight: 600; }
.lnk:hover { text-decoration: underline; }
.small { font-size: 12px; }
.strike { text-decoration: line-through; color: var(--muted); }
.banner { padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: #6E3B0E; margin: 0 0 14px; }
.banner a { font-weight: 700; text-decoration: underline; }
.mini { border: 1px solid var(--line); background: #FFFFFF; border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink2); }
.mini:hover { border-color: var(--ink); color: var(--ink); }
.mini.ok { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.mini-sel { min-height: 26px; width: auto; font-size: 12px; padding: 0 6px; }
.lbtn { display: inline-flex; align-items: center; }

/* Navigacija – grupe */
.nav .ng { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #6F807A; padding: 12px 10px 4px; font-weight: 700; }
.side { overflow-y: auto; }

/* Brzi unos i inbox */
.quick { display: flex; gap: 8px; margin-bottom: 16px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.q-kind { width: 130px; flex-shrink: 0; }
.ib { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); flex-wrap: wrap; }
.ib .acts { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* Oznake oblasti (boje iz mockupa) */
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #ECEFEE; color: #3F4A46; }
.a-pranje { background: #E3ECF7; color: #1D4E89; }
.a-ciscenje { background: #DDF0E7; color: #17603F; }
.a-peglanje { background: #FBEBD9; color: #8A4B12; }
.a-kuhinja { background: #EFE3F5; color: #5E2E7A; }
.a-pregled { background: #ECEFEE; color: #3F4A46; }
.a-vozilo { background: #F8E8C8; color: #7A5410; }
.a-zdravlje { background: #F8DEDC; color: #9B2C22; }
.k-maniri { background: #EFE3F5; color: #5E2E7A; }
.k-kultura-stanovanja { background: #DDF0E7; color: #17603F; }
.k-kuhinja { background: #FBEBD9; color: #8A4B12; }
.k-odijevanje { background: #E3ECF7; color: #1D4E89; }
.k-kucni-trikovi { background: #ECEFEE; color: #3F4A46; }
.k-novac { background: #F8E8C8; color: #7A5410; }
.k-komunikacija { background: #F8DEDC; color: #9B2C22; }

/* Savjet dana */
.tip { background: linear-gradient(180deg, #FFFFFF, #F7FAF8); }
.tip-t { margin: 10px 0 4px; font-size: 18px; }
.tip p { margin: 0; color: var(--ink2); line-height: 1.5; }

/* Kalendar */
.legend { display: flex; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.legend span { display: flex; gap: 6px; align-items: center; }
.ev { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.v-zadatak { background: #B4581A; }
.v-rutina { background: #1E7A5F; }
.v-registar { background: #2F5E9E; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-h { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-d { min-height: 96px; border: 1px solid #E6EBE8; background: #FAFBFA; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; }
.cal-d:hover { border-color: var(--ink2); }
.cal-d.out { background: #F2F4F3; color: #9AA5A1; }
.cal-d.today { border: 2px solid var(--green); background: #E4F2EC; }
.cal-n { font-weight: 700; font-size: 12px; }
.ev-t { font-size: 11px; color: #FFFFFF; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-t.v-zadatak { background: #B4581A; }
.ev-t.v-rutina { background: #1E7A5F; }
.ev-t.v-registar { background: #2F5E9E; }
.ev-t.done { opacity: .45; text-decoration: line-through; }
.ev-more { font-size: 11px; color: var(--muted); }

/* Plan održavanja – sedmica */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.wd { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.wd.today { border: 2px solid var(--green); background: #F1F8F5; }
.wd.past { background: #F4F6F5; }
.wd-h { display: flex; justify-content: space-between; align-items: baseline; }
.wc { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #FFFFFF; display: flex; flex-direction: column; gap: 4px; }
.wc b { font-size: 13px; }
.wc.done { opacity: .55; }
.wc.done b { text-decoration: line-through; }
.wc.carried { border-color: #E0A266; background: #FFF8F0; }
.check.sm { width: 22px; height: 22px; border-radius: 5px; }
.tr.rut { grid-template-columns: minmax(0, 1fr) 150px 120px; }
.tr.rut.off { opacity: .55; }
.tr.norm { grid-template-columns: minmax(0, 1fr) 60px 70px 50px; }

/* Registri */
.regs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.reg:hover { border-color: var(--green); }
.reg-f { margin-top: 6px; gap: 6px; font-size: 12px; }
.tr.dyn { gap: 10px; }
.tr.unconf { opacity: .6; background: repeating-linear-gradient(135deg, transparent 0 8px, #F6F8F7 8px 16px); }
.tr-note { font-size: 12px; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--line2); margin-top: -6px; }
.ph-val { color: #9A4A10 !important; font-style: italic; }

/* Priručnici */
.guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.guide:hover { border-color: var(--green); }
.guide img { width: 100%; height: 110px; object-fit: contain; background: #F7F9F8; border-radius: 8px; margin-bottom: 6px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.step img { width: 100%; height: 150px; object-fit: contain; background: #F7F9F8; border-radius: 8px; }
.step-ph { height: 150px; border-radius: 8px; background: #F7F9F8; display: grid; place-items: center; font-size: 42px; font-weight: 800; color: #C9D2CE; }
.step-n { width: 26px; height: 26px; border-radius: 13px; background: var(--ink); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.step p { margin: 0; line-height: 1.45; }
.warnbox { background: var(--warn-bg); border-color: #EBC9A3; }
.warnbox p { margin: 0; }

@media (max-width: 1100px) {
    .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .regs, .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .nav .ng { display: none; }
    .side { overflow-y: visible; }
    .week, .regs, .guides, .steps { grid-template-columns: minmax(0, 1fr); }
    .cal-d { min-height: 60px; }
    .ev-t { display: none; }
    .cal-d .ev-more { display: none; }
    .tr.dyn { grid-template-columns: minmax(0, 1fr) auto !important; }
    .tr.dyn > span:not(:first-child):not(:last-child) { display: none; }
    .tr.rut { grid-template-columns: minmax(0, 1fr) auto; }
    .tr.rut > span:nth-child(2) { display: none; }
    .q-kind { width: 100px; }
}
@media (max-width: 600px) { .q-kind { display: none; } }

/* ================= Ikone i analitika ================= */
.ico { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.ico.inl { margin-top: -2px; }
.nav a i { display: grid; place-items: center; }
.h-i { display: flex; align-items: center; gap: 8px; }
.h-i .ico { color: var(--green); }
h2.sec { margin: 24px 0 12px; font-size: 18px; }
.kpi.ik { position: relative; padding-left: 62px; }
.kpi-i { width: 36px; height: 36px; border-radius: 10px; background: var(--green-bg); color: #17603F; display: grid; place-items: center; flex-shrink: 0; }
.kpi-i.sm { width: 30px; height: 30px; border-radius: 8px; }
.kpi.ik > .kpi-i { position: absolute; left: 14px; top: 14px; }
.hb-i { width: 30px; height: 30px; border-radius: 8px; background: var(--bg); color: var(--ink2); display: grid; place-items: center; flex-shrink: 0; }
.hb-i.warn { background: var(--warn-bg); color: #8A4B12; }
.hb-i.bad { background: var(--bad-bg); color: var(--bad); }
.hb-i.a-pranje { background: #E3ECF7; color: #1D4E89; }
.hb-i.a-ciscenje { background: #DDF0E7; color: #17603F; }
.hb-i.a-peglanje { background: #FBEBD9; color: #8A4B12; }
.hb-i.a-kuhinja { background: #EFE3F5; color: #5E2E7A; }
.ev-i.v-zadatak { background: #FBEBD9; color: #B4581A; }
.ev-i.v-rutina { background: var(--green-bg); color: #17603F; }
.ev-i.v-registar { background: #E3ECF7; color: #2F5E9E; }
.ib-i { width: 30px; height: 30px; border-radius: 8px; background: var(--info-bg); color: #2C5A8C; display: grid; place-items: center; }
.cat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tag .ico { margin: -2px 2px 0 0; }
.st { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.st-ok { color: #17603F !important; }
.st-warn { color: #8A4B12 !important; }
.st-bad { color: var(--bad) !important; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid3 > .card { margin-bottom: 0; }

/* Horizontalne trake */
.hb { display: flex; flex-direction: column; gap: 10px; }
.hb-r { display: grid; grid-template-columns: 30px minmax(0, 150px) minmax(0, 1fr) 100px; gap: 10px; align-items: center; }
.hb.compact .hb-r { grid-template-columns: 30px minmax(0, 110px) minmax(0, 1fr) 84px; }
.hb-r.wide { grid-template-columns: 30px minmax(0, 2fr) minmax(0, 1fr) 90px !important; }
.hb-n { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-n small { display: inline; font-weight: 400; margin-left: 4px; }
.hb-t { position: relative; height: 14px; }
.hb-lim { position: absolute; left: 0; top: 4px; height: 6px; border-radius: 3px; background: var(--line2); }
.hb-f { position: absolute; left: 0; top: 2px; height: 10px; border-radius: 0 4px 4px 0; background: var(--green); }
.hb-f.warn { background: var(--warn); }
.hb-f.bad { background: var(--bad); }
.hb-tick { position: absolute; top: -2px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: var(--ink2); }
.hb-v { text-align: right; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.hb-v b { font-size: 13px; }
.hb-v small { font-size: 11px; }
.hb-r:hover .hb-f { filter: brightness(1.1); }
.hb-r:hover .hb-n { color: var(--green); }

/* SVG grafikoni */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: #E9EDEB; stroke-width: 1; }
.chart .axisline { stroke: #C9D2CE; stroke-width: 1.5; }
.chart .ax { font-size: 11px; fill: var(--muted); font-family: var(--mono); }
.chart .lbl { font-size: 12px; font-weight: 700; fill: var(--ink); font-family: var(--mono); }
.chart .muted-t { fill: var(--muted); font-weight: 600; }
.chart .serie { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--green); stroke: #FFFFFF; stroke-width: 2; }
.chart .planline { stroke: #9AA5A1; stroke-width: 1.5; }
.chart .projline { stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.chart .cross { stroke: var(--ink2); stroke-width: 1; opacity: 0; }
.chart .hov:hover .cross { opacity: .35; }
.chart .bar-m { fill: var(--green); }
.chart .bar-m.bad { fill: var(--bad); }
.chart .hovb:hover .bar-m { fill: #145A45; }
.chart .today-dot { fill: var(--ink); }
.chart .tl-dot { fill: var(--green); stroke: #FFFFFF; stroke-width: 2; }
.chart .tl-dot.warn { fill: var(--warn); }
.chart .tl-dot.bad { fill: var(--bad); }
.chart.tl { margin: 4px 0 10px; }
.legend .sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.sw-serie { background: var(--green); }
.sw-plan { background: #9AA5A1; height: 2px !important; }
.sw-proj { background: repeating-linear-gradient(90deg, var(--green) 0 4px, transparent 4px 7px); }
.legend .sw.s-ok, .stk-s.s-ok { background: #3FA97C; color: #FFFFFF; }
.legend .sw.s-warn, .stk-s.s-warn { background: #E0A266; color: #4A2808; }
.legend .sw.s-bad, .stk-s.s-bad { background: #D9534A; color: #FFFFFF; }
.legend .sw.s-info, .stk-s.s-info { background: #C9D6E6; color: #2C5A8C; }
.legend .sw[class*="s-"] { height: 10px; width: 10px; border-radius: 3px; }
.legend { flex-wrap: wrap; margin-top: 8px; }

/* Plaćanje */
.pay { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-t { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; flex: 1 1 120px; }

/* Heatmapa */
.heat { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.heat-col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.heat-col small { font-size: 10px; margin-top: 2px; }
.heat-lbl span { height: 22px; font-size: 11px; color: var(--muted); line-height: 22px; }
.hc { width: 22px; height: 22px; border-radius: 5px; display: inline-block; }
.hc.h0 { background: #EEF1EF; }
.hc.h1 { background: #B9E0CD; }
.hc.h2 { background: #73BF9B; }
.hc.h3 { background: #2E8C6A; }
.hc.h4 { background: #17603F; }
.hc.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.hc.fut { opacity: .35; }
.legend .hc { width: 14px; height: 14px; border-radius: 3px; }

/* Složena traka (frižider) */
.stk-r { display: grid; grid-template-columns: 30px 130px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
.stk { display: flex; gap: 2px; height: 24px; }
.stk-s { display: grid; place-items: center; font-size: 11px; font-weight: 700; border-radius: 4px; min-width: 4px; }

@media (max-width: 1100px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
    .nav a i .ico { width: 20px; height: 20px; }
    .hb-r, .hb.compact .hb-r { grid-template-columns: 30px minmax(0, 90px) minmax(0, 1fr) 76px; }
    .stk-r { grid-template-columns: 30px 90px minmax(0, 1fr); }
    .kpi.ik { padding-left: 16px; padding-top: 58px; }
}

/* ================= Raspored frižidera ================= */
.gdje .row { flex-wrap: nowrap; }
.gdje-odg b { color: var(--ink); }
.sel-bar { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #F1F8F5; border: 1px solid #BFE0D1; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sel-bar select { width: auto; min-width: 220px; }
.kuhinja { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.uredjaj-desno { display: flex; flex-direction: column; gap: 16px; }
.uredjaj { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }

/* Frižider: tijelo + vrata */
.friz { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px; }
.friz-tijelo { position: relative; background: linear-gradient(180deg, #F3F8FB, #E6F0F6); border: 2px solid #B9C9D4; border-radius: 16px; padding: 10px 30px 10px 10px; display: flex; flex-direction: column; gap: 0; }
.friz-vrata { background: linear-gradient(180deg, #F6F9FB, #EDF3F7); border: 2px solid #B9C9D4; border-radius: 16px 10px 10px 16px; padding: 10px; position: relative; }
.friz-vrata::before { content: ""; position: absolute; left: -7px; top: 40%; width: 5px; height: 70px; border-radius: 3px; background: #9FB2BF; }
.temp { position: absolute; right: 6px; top: 14px; bottom: 14px; width: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.temp i { flex: 1; width: 4px; border-radius: 2px; margin: 4px 0; background: linear-gradient(180deg, #C9DCEB, #2F5E9E); }
.temp span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; color: var(--muted); letter-spacing: .05em; }

.zona { border-bottom: 3px solid #C6D5DF; padding: 8px 6px 10px; min-height: 66px; transition: background .2s; }
.zona:last-of-type { border-bottom: 0; }
.zona-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.zona-h b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #2F4A5C; }
.zona-h small { font-size: 11px; }
.zona-s { display: flex; flex-wrap: wrap; gap: 5px; }
.zona.hladno { background: linear-gradient(180deg, transparent, rgba(47, 94, 158, .07)); }
.zona.ladica { margin-top: 6px; border: 2px solid #C6D5DF; border-radius: 10px; background: rgba(255, 255, 255, .55); min-height: 90px; }
.zona.vrata { border-bottom: 0; height: 100%; display: flex; flex-direction: column; }
.zona.vrata .zona-s { flex-direction: column; align-items: stretch; }
.zona.vrata .zona-s .nam { border-bottom: 3px solid #C6D5DF; border-radius: 6px 6px 2px 2px; }
.zona.ist { background: #FFF6D6 !important; box-shadow: inset 0 0 0 2px #E0B341; border-radius: 10px; }
.prazno { font-size: 11px; color: #9AA5A1; font-style: italic; }

/* Namirnica kao kartica */
.nam { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px 4px 7px; border-radius: 7px; border: 1px solid #D4DEE4; background: #FFFFFF; font: inherit; font-size: 12px; color: var(--ink); cursor: pointer; text-align: left; }
.nam:hover { border-color: var(--ink2); }
.nam.on { outline: 2px solid var(--green); outline-offset: 1px; }
.nam-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nam-d { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; background: #3FA97C; }
.nam.st-warn .nam-d { background: #E0A266; }
.nam.st-bad .nam-d { background: #D9534A; }
.nam.st-info .nam-d { background: #9DB4CF; }
.nam.st-warn { background: #FFF8F0; border-color: #EBC9A3; }
.nam.savjet .nam-w { color: #B4581A; }
.nam.krivo { border-color: var(--bad); background: var(--bad-bg); }
.nam.krivo .nam-w { color: var(--bad); }

/* Zamrzivač i ostava */
.zamr { background: linear-gradient(180deg, #EEF4FA, #E2ECF5); border: 2px solid #B9C9D4; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.zona.zladica { border: 2px solid #C6D5DF; border-radius: 10px; background: rgba(255, 255, 255, .6); position: relative; }
.zona.zladica::after { content: ""; position: absolute; left: 50%; top: 4px; width: 46px; height: 4px; margin-left: -23px; border-radius: 2px; background: #B9C9D4; }
.ost { display: flex; flex-direction: column; gap: 8px; }
.zona.o-pult { background: #F4EEE6; border: 0; border-top: 6px solid #B89C7A; border-radius: 4px 4px 10px 10px; }
.zona.o-police { background: #FAF6F0; border: 2px solid #D9CBB8; border-radius: 10px; }
.zona.o-korpa { background: #F6F0E4; border: 2px dashed #C9B38F; border-radius: 22px 22px 14px 14px; }

@media (max-width: 1100px) {
    .kuhinja { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .friz { grid-template-columns: minmax(0, 1fr); }
    .friz-vrata::before { display: none; }
    .sel-bar select { min-width: 0; width: 100%; }
}

/* ================= Dnevnik ================= */
.traje { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: #FFF8F0; border: 1px solid #EBC9A3; }
.dn-t { width: 46px; flex-shrink: 0; font-size: 13px; line-height: 1.2; }
.dn-t small { display: inline; }
.form.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form.two .f-wide { grid-column: span 2; }
@media (max-width: 900px) {
    .card > form.row { flex-wrap: wrap; }
    .card > form.row select, .card > form.row input[list] { width: 100% !important; }
}

/* ================= Posao ================= */
.form .f-full { grid-column: 1 / -1; }
textarea { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.proj { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid var(--line2); margin-bottom: 8px; cursor: pointer; }
.proj:hover, .proj.on { border-color: var(--green); background: #F7FBF9; }
.proj .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.izv { padding: 12px 0; border-bottom: 1px solid var(--line2); }
.izv-t { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.45; }
.izv-p { margin: 6px 0 0; color: var(--bad); white-space: pre-wrap; }
.izv-s { margin: 6px 0 0; color: #17603F; white-space: pre-wrap; }
a.mini { display: inline-block; }
.file { min-height: 38px; padding: 6px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); width: 100%; }
.dv-priručnik { background: #EFE3F5; color: #5E2E7A; }
.dv-shema { background: #E3ECF7; color: #1D4E89; }
.dv-izvještaj { background: #FBEBD9; color: #8A4B12; }
.dv-slika { background: #DDF0E7; color: #17603F; }

/* Štampa izvještaja */
.print-izv { max-width: 820px; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 32px 36px; }
.print-izv h1 { font-size: 22px; }
.print-izv table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.print-izv td { border: 1px solid var(--line); padding: 6px 10px; vertical-align: top; }
.print-izv td:first-child { width: 160px; color: var(--muted); font-weight: 600; }
.print-izv h3 { margin-top: 18px; }
.print-izv .tx { white-space: pre-wrap; line-height: 1.5; }
.potpis { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.potpis div { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12px; color: var(--muted); }
@media print {
    .side, .no-print, #blazor-error-ui { display: none !important; }
    .app { display: block; }
    .main { padding: 0; max-width: none; }
    body { background: #FFFFFF; }
    .print-izv { border: 0; padding: 0; }
}

/* ================= Akcije za namirnicu ================= */
.akc { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #F7FAF8; border: 1px solid #BFE0D1; display: flex; flex-direction: column; gap: 10px; }
.akc-h { display: flex; gap: 10px; align-items: center; }
.akc-h b { display: block; font-size: 15px; }
.akc-h small { display: block; font-size: 12px; }
.akc-savjet { margin: 0; font-size: 12.5px; color: #8A4B12; background: var(--warn-bg); padding: 6px 10px; border-radius: 8px; }
.akc-red { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.akc-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 72px; flex-shrink: 0; }
.akc-in { width: 150px; min-height: 34px; }
.akc-red select { width: auto; min-width: 220px; min-height: 34px; }
.akc-bac { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.ghost.bad { color: var(--bad); border-color: var(--bad-bg); }
.btn.ghost.bad:hover { border-color: var(--bad); }
.btn .inl, .btn svg.inl { vertical-align: -3px; margin-right: 4px; }
.pill.off { background: var(--bg); color: var(--ink2); border: 1px solid var(--line); }
.akc-toast { margin-top: 10px; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #FFFFFF; font-size: 13.5px; }
.akc-toast span { flex: 1; }
.akc-toast .btn.ghost { color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.akc-toast .x { color: #FFFFFF; }
button.lnk { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; text-align: left; color: var(--ink); }
button.lnk:hover b { color: var(--green); text-decoration: underline; }
.tr.sel { background: #F1F8F5; }
@media (max-width: 700px) {
    .akc-l { width: 100%; }
    .akc-in, .akc-red select { width: 100%; min-width: 0; }
}

/* ================= Prijedlog za danas ================= */
.prijedlog { border-left: 4px solid var(--green); }
.pd { list-style: none; margin: 10px 0 0; padding: 0; }
.pd-k { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.pd-k:last-child { border-bottom: 0; }
.pd-k b { display: block; font-size: 14px; }
.pd-k small { display: block; font-size: 12px; }
.pd-t { width: 52px; flex-shrink: 0; font-size: 14px; font-weight: 700; }
.pd-t small { color: var(--muted); font-weight: 400; font-size: 11px; }
.pd-n { color: inherit; text-decoration: none; }
.pd-n:hover b { color: var(--green); text-decoration: underline; }
.pd-k.pdv-obrok .hb-i { background: #FBEBD9; color: #8A4B12; }
.pd-k.pdv-pauza, .pd-k.pdv-dnevnik { opacity: .75; }
.pd-k.pdv-rok .hb-i { background: var(--warn-bg); color: #8A4B12; }
.pd-nap { margin: 8px 0 0; font-size: 12.5px; color: #8A4B12; background: var(--warn-bg); padding: 6px 10px; border-radius: 8px; }
@media (max-width: 700px) { .pd-k { flex-wrap: wrap; } .pd-k > .row { width: 100%; justify-content: flex-end; } }

/* ================= Preglednik dokumenata (Posao) ================= */
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; height: calc(100vh - 56px); min-height: 520px; }
.pv.lista-on { grid-template-columns: 290px minmax(0, 1fr); }
.pv-side { display: none !important; }
.pv.lista-on .pv-side { display: flex !important; }
.pv-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pv-side-h { display: flex; justify-content: space-between; align-items: center; }
.pv-zatvori { display: inline-block; font-size: 18px; }
.pv-trazi { min-height: 34px; }
.pv-proj { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.pv-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.pv-lista a { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.pv-lista a:hover { background: var(--bg); }
.pv-lista li.on a { background: #E6F2EC; }
.pv-lista b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-lista small { display: block; font-size: 11px; color: var(--muted); }
.pv-lista .grow { min-width: 0; }
.pv-ext { flex-shrink: 0; width: 38px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: .03em; background: #E8ECEF; color: #44515B; }
.pv-ext.big { width: 72px; height: 50px; font-size: 16px; border-radius: 10px; }
.pv-ext.e-PDF { background: #FBE3E1; color: #A3271C; }
.pv-ext.e-DOCX, .pv-ext.e-DOC { background: #E1EAF8; color: #1D4E89; }
.pv-ext.e-XLSX, .pv-ext.e-XLS, .pv-ext.e-CSV { background: #DDF0E7; color: #17603F; }
.pv-ext.e-JPG, .pv-ext.e-JPEG, .pv-ext.e-PNG { background: #EFE3F5; color: #5E2E7A; }
.pv-ext.e-DWG { background: #FBEBD9; color: #8A4B12; }
.pv-main { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.pv-bar { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; flex-wrap: wrap; }
.pv-naslov { min-width: 0; }
.pv-naslov b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-naslov small { display: block; font-size: 12px; }
.pv-akc { gap: 6px; flex-wrap: wrap; }
.pv-akc a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.pv-br { font-size: 12px; min-width: 36px; text-align: center; }
.pv-meni.on { background: var(--ink); color: #FFFFFF; }
.pv-sadrzaj { flex: 1; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; }
.pv-pdf { flex: 1; width: 100%; height: 100%; border: 0; background: #525659; }
.pv-slika { flex: 1; overflow: auto; display: grid; place-items: center; background: #2B2F33; cursor: zoom-in; }
.pv-slika img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-slika.zoom { cursor: zoom-out; place-items: start; }
.pv-slika.zoom img { max-width: none; max-height: none; }
.pv-video { flex: 1; width: 100%; background: #000; }
.pv-tekst { flex: 1; margin: 0; padding: 16px 18px; overflow: auto; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pv-sadrzaj:has(.pv-tbl-w), .pv-sadrzaj:has(.pv-word) { flex-direction: column; overflow: auto; }
.pv-tabs { margin: 8px 8px 0; }
.pv-tbl-w { overflow: auto; flex: 1; }
.pv-tbl { border-collapse: collapse; font-size: 12.5px; }
.pv-tbl th, .pv-tbl td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; white-space: pre-wrap; }
.pv-tbl thead th, .pv-tbl tbody th { background: #F3F5F4; color: var(--muted); font-weight: 600; font-size: 11px; position: sticky; top: 0; }
.pv-tbl tbody th { position: sticky; left: 0; text-align: right; }
.pv-tbl tr.prvi td { font-weight: 700; background: #FAFBFA; }
.pv-word { padding: 22px 28px; max-width: 860px; line-height: 1.6; font-size: 14.5px; }
.pv-word h2 { font-size: 20px; margin: 18px 0 8px; }
.pv-word h3 { font-size: 17px; margin: 16px 0 6px; }
.pv-word h4 { font-size: 15px; margin: 14px 0 6px; }
.pv-word p { margin: 0 0 10px; white-space: pre-wrap; }
.pv-li { padding-left: 14px; }
.pv-wtbl { margin: 10px 0 14px; }
.pv-wnap { font-size: 12px; margin-top: 18px !important; }
.pv-prazno { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--ink2); }
@media (max-width: 900px) {
    .pv, .pv.lista-on { grid-template-columns: 1fr; height: calc(100vh - 90px); }
    .pv.lista-on .pv-side { position: fixed; inset: 0; z-index: 50; border-radius: 0; }
    .pv-akc { width: 100%; }
}

/* Akcije namirnice: plutajući panel dole, uvijek vidljiv bez obzira gdje je namirnica na stranici */
.akc, .akc-toast { position: fixed; z-index: 60; left: calc(50% + 118px); transform: translateX(-50%); width: min(760px, calc(100vw - 280px)); margin: 0; }
.akc { bottom: 16px; max-height: 72vh; overflow-y: auto; background: #FFFFFF; box-shadow: 0 12px 40px rgba(16, 32, 26, .22), 0 2px 8px rgba(16, 32, 26, .12); }
.akc-toast { bottom: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.akc ~ .akc-toast { bottom: auto; top: 16px; }
@media (max-width: 900px) {
    .akc, .akc-toast { left: 50%; width: calc(100vw - 24px); }
    .akc { bottom: 76px; max-height: 64vh; }
    .akc-toast { bottom: 76px; }
}
.pv-nazad { display: inline-flex; align-items: center; text-decoration: none; }

/* ================= Servisno vozilo ================= */
.vz-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.vz-svg { width: 100%; height: auto; display: block; margin: 6px 0 4px; }
.vz-ime { font-size: 13px; font-weight: 700; fill: #5A6A75; letter-spacing: .04em; }
.vz-reg { font-size: 8px; font-weight: 700; fill: #16201D; }
.vz-t { cursor: pointer; }
.vz-tc { stroke: #FFFFFF; stroke-width: 2.5; }
.vz-br { font-size: 12px; font-weight: 800; fill: #FFFFFF; pointer-events: none; }
.vz-puls { opacity: 0; }
.vz-t.on .vz-puls, .vz-t:hover .vz-puls { opacity: .35; }
.vz-t.st-ok .vz-tc, .vz-t.st-pravilo .vz-tc, .vz-t.st-ok .vz-puls, .vz-t.st-pravilo .vz-puls { fill: #1E7A5F; }
.vz-t.st-uskoro .vz-tc, .vz-t.st-uskoro .vz-puls { fill: #C8792A; }
.vz-t.st-kasni .vz-tc, .vz-t.st-kasni .vz-puls { fill: #B23B2E; }
.vz-t.st-info .vz-tc, .vz-t.st-info .vz-puls { fill: #6B7F8E; }
.vz-t.st-aktivno .vz-tc, .vz-t.st-aktivno .vz-puls { fill: #2F5E9E; }
.vz-t.st-kasni .vz-puls { opacity: .3; animation: vzPuls 1.6s ease-in-out infinite; }
@keyframes vzPuls { 50% { opacity: .05; } }
.sw.vz-s-ok { background: #1E7A5F; } .sw.vz-s-uskoro { background: #C8792A; } .sw.vz-s-kasni { background: #B23B2E; }
.sw.vz-s-info { background: #6B7F8E; } .sw.vz-s-aktivno { background: #2F5E9E; }
.vz-zone { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.vz-zb { border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 4px 10px 4px 4px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vz-zb i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #FFF; font-size: 11px; font-weight: 800; background: #1E7A5F; }
.vz-zb.st-uskoro i { background: #C8792A; } .vz-zb.st-kasni i { background: #B23B2E; } .vz-zb.st-info i { background: #6B7F8E; } .vz-zb.st-aktivno i { background: #2F5E9E; }
.vz-zb.on { border-color: var(--ink); background: #F1F8F5; font-weight: 600; }
.vz-km { margin-top: 10px; } .vz-km input { width: 160px; }
.vz-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.vz-st { padding: 10px 0 10px 12px; border-bottom: 1px solid var(--line2); border-left: 3px solid #1E7A5F; margin-bottom: 2px; }
.vz-st.st-kasni { border-left-color: #B23B2E; } .vz-st.st-uskoro { border-left-color: #C8792A; }
.vz-st.st-info { border-left-color: #6B7F8E; } .vz-st.st-aktivno { border-left-color: #2F5E9E; } .vz-st.st-pravilo { border-left-color: var(--line); }
.vz-st b { display: block; font-size: 14px; } .vz-st small { display: block; font-size: 12px; margin-top: 2px; }
.vz-n { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); font-size: 10px; font-weight: 800; color: var(--ink2); margin-right: 4px; vertical-align: 1px; }
.vz-rok { color: var(--ink2); font-weight: 600; }
.vz-akc { margin-top: 6px; gap: 6px; }
.vz-ed { margin-top: 8px; padding: 10px; background: var(--bg); border-radius: 8px; }
.vz-check { list-style: none; padding: 0; margin: 0 0 12px; }
.vz-check li { padding: 6px 0; border-bottom: 1px solid var(--line2); }
.vz-check label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.vz-check input { width: 18px; height: 18px; }
@media (max-width: 900px) { .vz-grid { grid-template-columns: 1fr; } }

/* ================= Alat (Posao) ================= */
.al-filt { gap: 10px; flex-wrap: wrap; }
.al-tabs { margin: 0; flex-wrap: wrap; }
.al-hint { font-size: 12.5px; margin: 10px 0 4px; }
.al-kat { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); }
.al-lista { list-style: none; margin: 0; padding: 0; }
.al-r { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line2); }
.al-r b { display: block; font-size: 14px; }
.al-r small { display: block; font-size: 12px; }
.al-r.al-imam b, .al-r.al-firma b { color: var(--ink2); }
.al-r.al-treba { background: #FDF6F5; }
.al-pri { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #FFF; }
.al-pri.p-obavezno { background: #B23B2E; }
.al-pri.p-preporuceno { background: #C8792A; }
.al-pri.p-korisno { background: #8A99A3; }
.al-cij { font-size: 12.5px; white-space: nowrap; }
.al-ed { list-style: none; padding: 10px; background: var(--bg); border-radius: 8px; margin: 4px 0 8px; }
.al-chk { flex-direction: row !important; align-items: center; gap: 8px; }
.al-chk input { width: auto; min-height: 0; }
.t-warn { color: #8A4B12; }
.al-filt select { width: auto; min-width: 160px; }

/* ================= Raspored stana ================= */
.stan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.zona.st-z { border: 2px solid #D9CBB8; border-radius: 10px; background: #FFFDF9; margin-bottom: 8px; }
.ormar { background: #EFE5D8; border: 3px solid #B89C7A; border-radius: 10px; padding: 8px; }
.orm-krila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.orm-krilo { display: flex; flex-direction: column; }
.orm-krilo.vjes .zona { min-height: 210px; background-image: linear-gradient(#B89C7A, #B89C7A); background-size: 86% 3px; background-repeat: no-repeat; background-position: center 34px; padding-top: 42px; }
.kuh { background: #F2F4F5; border: 3px solid #9FB2BF; border-radius: 10px; padding: 8px; }
.kuh-gornji .zona { min-height: 90px; }
.kuh-donji { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.zona.sudopera { background: #EEF4F8; border-color: #9FB2BF; }
.kup { background: #EEF5F7; border: 3px solid #8FB3C2; border-radius: 10px; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zona.ogledalo { background: linear-gradient(135deg, #F6FBFD, #DCEBF2); border-color: #8FB3C2; min-height: 100px; }
.zona.tus { background: repeating-linear-gradient(90deg, #F4FAFC, #F4FAFC 10px, #E6F1F5 10px, #E6F1F5 12px); border-color: #8FB3C2; min-height: 120px; }
.zona.ves { border-style: dashed; }
@media (max-width: 1100px) { .stan { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .kuh-donji, .orm-krila, .kup { grid-template-columns: 1fr; } }

/* ================= Slike uz upute ================= */
.pr-gal { margin-bottom: 16px; }
.pr-gal-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; }
.pr-th { margin: 0; cursor: zoom-in; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #FFF; transition: box-shadow .15s, transform .15s; }
.pr-th:hover { box-shadow: 0 6px 18px rgba(16, 32, 26, .14); transform: translateY(-1px); }
.pr-th img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; background: #F4F6F5; }
.pr-th figcaption { font-size: 12px; padding: 7px 9px; color: var(--ink2); border-top: 1px solid var(--line2); }
.step-img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 8px; background: #F4F6F5; }
.pr-lb { position: fixed; inset: 0; z-index: 90; background: rgba(10, 16, 14, .78); display: grid; place-items: center; padding: 16px; }
.pr-lb-in { background: #FFF; border-radius: 12px; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.pr-lb-bar { padding: 8px 12px; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pr-lb-bar a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.pr-lb-in img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; display: block; margin: 0 auto; background: #FFF; }
.pr-filt { margin: 6px 0 10px; }
.lh-guides { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lh-g { padding-top: 0; overflow: hidden; }
.lh-th { display: block; margin: 0 -14px 8px; height: 120px; overflow: hidden; border-bottom: 1px solid var(--line2); background: #F4F6F5; }
.lh-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; margin: 0; }

/* ---------- Katalozi i akcije ---------- */
.kt-lista { list-style: none; margin: 0; padding: 0; }
.kt-r { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line2); }
.kt-r b { display: block; font-size: 14px; }
.kt-r small { display: block; font-size: 12px; }
.kt-zasto { color: var(--green); font-size: 12px; }
.kt-pop { min-width: 46px; text-align: center; padding: 4px 6px; border-radius: 8px; font-weight: 800; font-size: 12.5px; background: var(--warn-bg); color: #8A4B12; flex-shrink: 0; }
.kt-pop.jak { background: var(--bad); color: #FFF; }
.kt-pop.nema { background: var(--line2); color: var(--muted); }
.kt-cij { text-align: right; white-space: nowrap; }
.kt-cij b { font-size: 15px; }
.kt-cij s { display: block; font-size: 12px; }
.kt-gdje { white-space: nowrap; cursor: pointer; border: 0; }
.kt-kat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kt-k { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.kt-k.staro { opacity: .6; }
.kt-pdf iframe { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; background: #525659; }
.kt-trazi { max-width: 320px; }
.kt-tbl td small { display: inline; }
.kt-tbl tr.kt-prep { background: #F3FAF6; }
@media (max-width: 700px) {
    .kt-r { flex-wrap: wrap; }
    .kt-gdje { order: 5; }
}
.kt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.kt-tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px; border-bottom: 1px solid var(--line); }
.kt-tbl td { padding: 6px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.kt-tbl button.lnk { border: 0; background: none; cursor: pointer; padding: 0; }
.kt-tbl td small.muted { margin-left: 5px; }

/* ---------- Plan kupovine i garderoba ---------- */
.pk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.pk-map { width: 100%; height: 400px; align-self: start; position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.pk-komb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-komb li { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pk-komb li.on { border-color: var(--green); background: var(--green-bg); }
.pk-komb li small { font-size: 12px; }
.pk-oz { cursor: default; margin-left: 4px; font-size: 11px; }
.pk-uporedi { margin-top: 12px; }
.pk-uporedi summary { cursor: pointer; font-weight: 600; color: var(--ink2); }
.pk-min { color: var(--green); font-weight: 800; }
.gp-paketi { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 8px; }
.gp-p { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.gp-p h3 { margin: 0; font-size: 15px; }
.gp-ruta { margin-top: 8px; gap: 8px; }
.kt-upl { gap: 10px; margin-top: 10px; align-items: center; }
@media (max-width: 900px) { .pk-grid { grid-template-columns: 1fr; } .pk-map { height: 320px; position: static; } }
.pk-opc { gap: 14px; align-items: center; }

/* ---------- Putovanja ---------- */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.pt { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); border-top: 4px solid #8A99A3; }
.pt.sac { box-shadow: 0 0 0 2px var(--warn) inset; }
.pt-naz { font-size: 15px; line-height: 1.25; }
.pt-kat { cursor: default; background: var(--line2); color: var(--ink2); }
.pt-zv { font-size: 18px; color: var(--warn); }
.pt-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); }
.pt-ter { font-size: 12px; color: var(--ink2); }
.pt-ukl { font-size: 12px; }
.pt-dno { margin-top: auto; padding-top: 6px; gap: 6px; }
.pt-cij { font-size: 16px; }
.pt-advent { border-top-color: #B23B2E; }
.pt-izlet { border-top-color: #1E7A5F; }
.pt-city-break { border-top-color: #2F6DB5; }
.pt-nova-godina { border-top-color: #7A4FB0; }
.pt-skijanje { border-top-color: #5AA9D6; }
.pt-toplo-more { border-top-color: #E0A12B; }
.pt-daleko { border-top-color: #C8792A; }
.pt-opc { gap: 10px; flex-wrap: wrap; align-items: center; }
.pt-opc select { width: auto; }

/* ---------- Garderoba ---------- */
.gr-vel .row { gap: 10px; align-items: center; }
.gr-pot { list-style: none; padding: 10px 4px; border-bottom: 1px solid var(--line2); }
.gr-ak { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gr-a { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 6px; background: var(--bg); border-radius: 8px; }
.gr-a small { font-size: 11.5px; }
.gr-trg { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
.gr-t { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.gr-t.on { border-color: var(--green); background: var(--green-bg); }
.gr-t-l { min-height: 18px; }
.gr-forma { margin: 8px 0 12px; padding: 10px; background: var(--bg); border-radius: 10px; }
.al-r.al-dotrajalo { background: #FDF6F5; }

/* ---------- Tlocrt stana i kuhinjski niz ---------- */
.stan.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tlocrt { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #FFFFFF; overflow-x: auto; }
.tlocrt svg { min-width: 560px; }
.tl-legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.tl-ozn { display: flex; gap: 8px; align-items: center; }
.tl-br { width: 22px; height: 22px; border-radius: 50%; color: #FFFFFF; font-weight: 800; font-size: 12px; display: grid; place-items: center; flex-shrink: 0; }
.uredjaj .kniz, .kniz { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 0.9fr; grid-template-rows: auto 40px auto auto; gap: 6px; margin-top: 10px; }
.kniz .st-z { height: 100%; }
.kn-deko { border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); background: var(--bg); display: flex; flex-direction: column; justify-content: center; }
.kn-deko small { font-size: 11px; color: var(--warn); }
.kn-nadnapom { grid-column: 1; grid-row: 1; }
.kn-vitrina { grid-column: 2; grid-row: 1; }
.kn-uski { grid-column: 3; grid-row: 1; }
.kn-napa { grid-column: 1; grid-row: 2; text-align: center; }
.kn-plocice { grid-column: 2 / 4; grid-row: 2; border-radius: 8px; background: repeating-linear-gradient(90deg, #EEF1EF 0 18px, #FFFFFF 18px 20px), #EEF1EF; }
.kn-ploca { grid-column: 1; grid-row: 3; }
.kn-resoi { display: flex; gap: 6px; margin-bottom: 4px; }
.kn-resoi i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); display: block; }
.kn-sud { grid-column: 3; grid-row: 3; }
.kn-pult { grid-column: 2; grid-row: 3; }
.kn-donji1 { grid-column: 1; grid-row: 4; }
.kn-donji2 { grid-column: 2; grid-row: 4; }
.kn-ladice { grid-column: 3; grid-row: 4; }
.kn-krilo { grid-column: 3; grid-row: 4; display: none; }
.kn-visoki { grid-column: 4; grid-row: 1 / 5; display: flex; flex-direction: column; gap: 6px; }
.kn-v-gore, .kn-v-dole { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; font-size: 12px; color: var(--muted); background: var(--bg); text-align: center; }
.kn-v-friz { flex: 1; border: 2px solid var(--green); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--green-bg); min-height: 140px; }
.kn-v-friz small { font-weight: 500; font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .stan.dva { grid-template-columns: 1fr; } .kniz { grid-template-columns: 1fr 1fr; } .kn-visoki { grid-column: 1 / 3; grid-row: auto; } }

/* Ponude: Outdoors / Eventi / Sport */
.po-dat { font-weight: 700; color: var(--ink); }
.po-akc { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.po-planinarenje { border-top-color: #1E7A5F; }
.po-jedrenje { border-top-color: #2F6DB5; }
.po-kampovanje { border-top-color: #6B8E23; }
.po-pecanje { border-top-color: #3A8FA0; }
.po-kazaliste { border-top-color: #B23B2E; }
.po-kino { border-top-color: #333; }
.po-koncerti { border-top-color: #7A4FB0; }
.po-izlozbe { border-top-color: #C8792A; }
.po-festivali-i-sajmovi { border-top-color: #E0A12B; }
.po-sport-dogadaji { border-top-color: #2F6DB5; }
.po-trcanje { border-top-color: #E0662B; }
.po-kosarka { border-top-color: #C8592A; }
.po-plivanje { border-top-color: #3A8FC0; }
.po-teretana { border-top-color: #555; }
.po-wellness-i-masaza { border-top-color: #A0569B; }
.po-zdravlje { border-top-color: #B23B2E; }
.po-bicikl { border-top-color: #1E7A5F; }
.po-setnja { border-top-color: #6B8E23; }
.po-dozvole { border-top-color: #2F4F6F; }

/* Akcije alata (Bauhaus) */
.aa-lista { list-style: none; margin: 6px 0 0; padding: 0; }
.aa-r { display: flex; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line2); }
.aa-r .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aa-za { color: var(--green); font-weight: 600; font-size: 12px; }
.aa-cij { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

/* Privatni posao */
.pr-kpi { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pr-kpi.on { box-shadow: 0 0 0 2px var(--accent, #2F6DB5) inset; }
.pr-prijedlog { border-left: 4px solid var(--green); }
.pr-koraci { margin: 6px 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pr-koraci li.done { text-decoration: line-through; color: var(--ink2); }
.pr-r .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-vrsta { cursor: default; background: var(--line2); color: var(--ink2); min-width: 70px; text-align: center; }
.pr-prijedlog .pr-vrsta, .pr-prijedlog-r .pr-vrsta { background: var(--green); color: #fff; }
.pr-odluka .pr-vrsta { background: #2F6DB5; color: #fff; }
.pr-ideja .pr-vrsta { background: #E0A12B; color: #fff; }
.pr-trosak .pr-vrsta { background: var(--bad); color: #fff; }
.pr-forma { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr 1fr; gap: 8px; align-items: start; }
.pr-forma textarea { grid-column: 1 / -1; }
.pr-forma .row { grid-column: 1 / -1; gap: 6px; }
@media (max-width: 760px) { .pr-forma { grid-template-columns: 1fr 1fr; } .pr-forma input:first-child { grid-column: 1 / -1; } }
.po-akc .btn, .pr-r .btn { display: inline-flex; align-items: center; height: 30px; white-space: nowrap; }

/* Zdravlje */
.zd-r .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zd-st { cursor: default; min-width: 92px; text-align: center; }
.zd-kasni { background: var(--bad); color: #fff; }
.zd-uskoro { background: var(--warn-bg); color: #8A4B12; }
.zd-upisi-zadnji { background: var(--line2); color: var(--ink2); }
.zd-zakazano { background: #DCE8F7; color: #2F4F6F; }
.zd-u-redu { background: #DDF0E6; color: #1E7A5F; }
.zd-akc { gap: 6px; flex-shrink: 0; }
.zd-akc .btn { display: inline-flex; align-items: center; height: 30px; white-space: nowrap; }
.zd-forma { grid-template-columns: 2fr 1fr 1fr 1.2fr 1.2fr; }
.zd-forma label { display: flex; flex-direction: column; gap: 2px; color: var(--ink2); }
.zd-karton { list-style: none; margin: 0; padding: 0; }
.zd-karton li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--line2); }
.zd-karton .grow { display: flex; flex-direction: column; gap: 2px; }
.zd-dat { font-weight: 700; min-width: 86px; }
.zd-dat small { display: block; font-weight: 400; }
.zd-v { cursor: default; background: var(--line2); color: var(--ink2); }
.zd-rok { width: 140px; }
.zd-best { background: #F0F8F3; }
.zd-usl { font-size: 11.5px; word-break: break-word; }
.t-ok { color: var(--green); font-weight: 700; }

/* Plaća firma – upozorenje, oznake i refundacija */
.note.firma { background: var(--warn-bg); color: #8A4B12; }
.chip.firma { background: var(--warn-bg); border-color: transparent; }
button.chip { font: inherit; font-size: 12px; cursor: pointer; }