/* eHotel web: isti vizuelni jezik kao eBar BO web (app.ebar360.com): svetla tema, zeleni akcenat, mentol meni, Poppins */
:root {
    --bg:#fbfdfc; --panel:#fff; --panel2:#f3f7f4; --panel3:#e9efeb; --line:#e3ebe6; --line2:#cfd6d1;
    --fg:#303030; --fg2:#5f6b64; --muted:#8a978f; --acc:#008238; --acc2:#036d31; --acc-svetla:#049e46; --mentol:#eef8f2; --mentol2:#dbf3e5;
    --ok:#1e8e3e; --err:#c0392b; --warn:#b7791f; --info:#1d6fb8;
    --ok-bg:#eef8f2; --err-bg:#fdecea; --warn-bg:#fff4d6; --info-bg:#e8f1fb; --muted-bg:#f0f3f1; --acc-bg:#dbf3e5;
    --r:12px; --rs:8px; --shadow:0 10px 40px rgba(20,40,28,.18);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:13.5px/1.5 Poppins, system-ui, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
a { color:var(--acc2); text-decoration:none; } a:hover { text-decoration:underline; }

.top { position:sticky; top:0; z-index:40; height:54px; display:flex; align-items:center; gap:14px; padding:0 20px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .logo { width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#008238,#049e46); display:grid; place-items:center; font-weight:700; color:#fff; font-size:16px; }
.top .brand { font-weight:600; font-size:16px; white-space:nowrap; } .top .brand span { color:var(--muted); font-weight:400; margin:0 6px; }
.top form { margin-left:auto; display:flex; align-items:center; gap:10px; }
.top .user { display:flex; align-items:center; gap:8px; color:var(--fg2); font-size:13px; }
.top .user .av { width:28px; height:28px; border-radius:50%; background:var(--mentol2); display:grid; place-items:center; font-weight:600; color:var(--acc2); font-size:12px; }
.top form button { background:transparent; border:1px solid var(--line2); color:var(--fg2); padding:5px 12px; }
.top .ham { display:none; width:36px; height:36px; border-radius:var(--rs); border:1px solid var(--line2); background:transparent; color:var(--fg); font-size:19px; padding:0; justify-content:center; }
.top .brzo { display:flex; gap:8px; margin-left:18px; }

.shell { display:flex; min-height:calc(100% - 54px); }
nav.side { width:212px; flex:0 0 212px; padding:12px 10px; border-right:1px solid var(--line); background:var(--mentol); position:sticky; top:54px; height:calc(100vh - 54px); overflow:auto; }
nav.side .grp { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); padding:12px 12px 5px; }
nav.side a { display:flex; align-items:center; gap:10px; padding:8px 12px; margin:1px 0; border-radius:var(--rs); color:var(--fg2); font-size:14px; text-decoration:none; }
nav.side a:hover { background:var(--mentol2); color:var(--fg); }
nav.side a.active { background:var(--panel); color:var(--acc2); font-weight:600; box-shadow:inset 3px 0 0 var(--acc); }
nav.side a svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; flex:0 0 17px; }
nav.side a .n { margin-left:auto; background:var(--warn-bg); color:var(--warn); border-radius:999px; padding:0 7px; font-size:11.5px; font-weight:600; }
main { flex:1; min-width:0; padding:22px 26px 50px; }
main.solo { display:grid; place-items:center; padding:20px; }
main.siroko { padding:16px 18px 30px; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.page-head h1 { margin:0; font-size:22px; font-weight:650; }
.page-head .sub { color:var(--muted); font-size:13.5px; margin-top:2px; }
.page-head .akcije { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
h1 { font-size:22px; margin:0 0 16px; font-weight:650; } h2 { font-size:15.5px; margin:20px 0 10px; font-weight:600; }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:15px 18px 12px; display:flex; flex-direction:column; gap:6px; color:inherit; }
a.stat:hover { border-color:var(--line2); text-decoration:none; }
.stat .n { font-size:28px; font-weight:700; line-height:1.1; } .stat .n small { font-size:13px; color:var(--muted); font-weight:500; margin-left:4px; }
.stat .l { color:var(--fg2); font-size:13.5px; } .stat .f { color:var(--muted); font-size:12.5px; border-top:1px solid var(--line); padding-top:7px; margin-top:4px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:16px; }
.card.pad0 { padding:0; overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-head h2 { margin:0; font-size:15.5px; }
.card-body { padding:14px 18px; }
.kolone { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; align-items:start; }

.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:0 0 16px; overflow-x:auto; }
.tabs a { color:var(--muted); padding:9px 15px; font-size:14px; font-weight:500; white-space:nowrap; border-radius:var(--rs) var(--rs) 0 0; text-decoration:none; }
.tabs a:hover { color:var(--fg); background:var(--panel); }
.tabs a.akt { color:var(--fg); font-weight:600; box-shadow:inset 0 -2px 0 var(--acc); }
.tabs .n { background:var(--panel2); border:1px solid var(--line2); color:var(--muted); border-radius:999px; padding:0 7px; font-size:11.5px; margin-left:5px; }

.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.toolbar { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.polja { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:11px 14px; }
.polja .sire { grid-column:span 2; } .polja .celo { grid-column:1 / -1; }
.polja input, .polja select, .polja textarea { width:100%; min-width:0; }
.kv { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.kv > div { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 13px; }
.kv .k { color:var(--muted); font-size:12px; margin-bottom:2px; } .kv .v { font-weight:600; font-size:15.5px; }

.tbl { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:auto; margin-bottom:16px; }
.tbl > table { margin:0; border:0; border-radius:0; }
table { border-collapse:collapse; width:100%; background:var(--panel); }
th, td { border-bottom:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top; }
th { background:var(--panel2); color:var(--fg2); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(0,130,56,.035); }
tr.zbir td { font-weight:650; background:var(--panel2); }
tr.storno td { color:var(--muted); text-decoration:line-through; }
tr.klik { cursor:pointer; }
.r { text-align:right; } .c { text-align:center; } .nowrap { white-space:nowrap; }
td .sub { display:block; color:var(--muted); font-size:12px; }
.mono { font-family:Consolas, "Cascadia Mono", monospace; font-size:12.5px; }
.title { font-weight:600; color:var(--fg); }

.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge.ok { background:var(--ok-bg); color:var(--ok); } .badge.err { background:var(--err-bg); color:var(--err); }
.badge.warn { background:var(--warn-bg); color:var(--warn); } .badge.muted { background:var(--muted-bg); color:var(--muted); }
.badge.info { background:var(--info-bg); color:var(--info); } .badge.acc { background:var(--acc-bg); color:var(--acc2); }
.stat .n { color:var(--acc2); }
.badge.nodot::before { display:none; }
.ok { color:var(--ok); } .err { color:var(--err); } .warn { color:var(--warn); } .muted { color:var(--muted); } .info { color:var(--info); }
.kanal { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:baseline; }

label { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
label.chk { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--fg2); margin:0; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=search], select, textarea {
    padding:7px 10px; border:1px solid var(--line2); border-radius:var(--rs); font:inherit; min-width:150px; background:var(--panel); color:var(--fg); outline:none; color-scheme:light; }
input:focus, select:focus, textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(0,130,56,.18); }
input.kratko { min-width:0; width:86px; } input.srednje { min-width:0; width:130px; }
input[type=checkbox] { accent-color:var(--acc); width:15px; height:15px; }
button, .btn { padding:7px 14px; border:1px solid var(--acc); background:var(--acc); color:#fff; border-radius:var(--rs); cursor:pointer; font:inherit; font-size:13px; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:6px; line-height:1.3; white-space:nowrap; }
button:hover, .btn:hover { filter:brightness(1.1); text-decoration:none; }
button.sec, .btn.sec { background:var(--panel2); color:var(--fg2); border-color:var(--line2); }
button.ok, .btn.ok { background:var(--acc-svetla); border-color:var(--acc-svetla); color:#fff; }
button.danger, .btn.danger { background:var(--panel); color:var(--err); border-color:var(--err); }
button.sm, .btn.sm { padding:3px 9px; font-size:12px; }
td form, .inl { display:inline; }
.msg { padding:11px 15px; border-radius:var(--rs); margin-bottom:14px; border:1px solid; }
.msg.ok { background:var(--ok-bg); border-color:#bfe3cc; color:#14532d; }
.msg.err { background:var(--err-bg); border-color:#f5c6c2; color:#8a1f14; }
.msg.warn { background:var(--warn-bg); border-color:#f0d58a; color:#6b4a0c; }
code { background:var(--panel2); border:1px solid var(--line); padding:1px 5px; border-radius:5px; font-size:12px; color:var(--fg2); }
p { margin:0 0 12px; }

dialog { border:1px solid var(--line2); border-radius:16px; padding:20px 24px; width:min(760px, 94vw); box-shadow:var(--shadow); background:var(--panel); color:var(--fg); }
dialog.uzak { width:min(460px, 94vw); }
dialog::backdrop { background:rgba(20,40,28,.35); backdrop-filter:blur(2px); }
dialog h2 { margin-top:0; font-size:17px; }
.dlg-akcije { margin-top:16px; display:flex; gap:8px; justify-content:flex-end; }

/* ---------- datum: tekstualno polje dd.mm.gggg + dugme kalendara; izvorno polje type=date je sakriveno ---------- */
.datum { display:inline-flex; gap:4px; align-items:stretch; position:relative; vertical-align:middle; }
.datum > input[type=text] { min-width:0; width:118px; flex:1 1 auto; }
.polja .datum { display:flex; width:100%; }
.datum .datum-dugme { padding:0 8px; font-size:14px; line-height:1; flex:0 0 auto; }
.datum .datum-izvor { position:absolute; right:0; bottom:0; width:1px; height:1px; min-width:0; padding:0; border:0; opacity:0; pointer-events:none; }
input:invalid:not(:placeholder-shown):not(:focus) { border-color:var(--err); }

/* ---------- kalendar ---------- */
.kal-okvir { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:auto; max-height:calc(100vh - 150px); position:relative; }
.kal { position:relative; --w:44px; --lw:138px; min-width:calc(var(--lw) + var(--dana) * var(--w)); user-select:none; }
.kal-red { display:flex; height:34px; border-bottom:1px solid var(--line); position:relative; }
.kal-red .l { position:sticky; left:0; z-index:6; width:var(--lw); flex:0 0 var(--lw); background:var(--panel); border-right:1px solid var(--line2); padding:0 10px; display:flex; align-items:center; gap:7px; font-size:13.5px; white-space:nowrap; overflow:hidden; }
.kal-red .d { width:var(--w); flex:0 0 var(--w); border-right:1px solid var(--line); display:grid; place-items:center; font-size:12px; }
.kal-red .d.vik { background:rgba(0,0,0,.022); } .kal-red .d.danas { background:rgba(0,130,56,.10); }
.kal-zag { position:sticky; top:0; z-index:9; background:var(--panel2); height:44px; }
.kal-zag .l { background:var(--panel2); z-index:10; font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.kal-zag .d { flex-direction:column; display:flex; justify-content:center; line-height:1.15; color:var(--fg2); }
.kal-zag .d small { color:var(--muted); font-size:10.5px; text-transform:uppercase; } .kal-zag .d b { font-size:13.5px; } .kal-zag .d.m1 { border-left:2px solid var(--acc); }
.kal-tip { background:var(--panel2); height:26px; } .kal-tip .l { background:var(--panel2); font-weight:650; font-size:12.5px; color:var(--fg); }
.kal-tip .d { font-size:11.5px; font-weight:600; }
.kal-tip .d.n0 { color:var(--err); background:var(--err-bg); } .kal-tip .d.n1 { color:var(--warn); } .kal-tip .d.nx { color:var(--ok); }
.kal-cena { height:22px; } .kal-cena .l { color:var(--muted); font-size:11.5px; } .kal-cena .d { font-size:10.5px; color:var(--muted); } .kal-cena .d.zatv { color:var(--err); text-decoration:line-through; }
.kal-soba .d { cursor:cell; } .kal-soba .d:hover { background:rgba(0,130,56,.16); }
.kal-soba .l .cist { width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:var(--ok); } .kal-soba .l .cist.c1 { background:var(--warn); } .kal-soba .l .cist.c2 { background:var(--err); }
.kal-soba .l small { color:var(--muted); margin-left:auto; font-size:11px; }
.kal-soba.cilj { outline:2px solid var(--acc); outline-offset:-2px; }
.kal-nerasp .l { color:var(--warn); font-size:12px; }
.traka { position:absolute; top:4px; height:25px; border-radius:7px; padding:0 8px; font-size:12px; line-height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; cursor:grab; z-index:4; box-shadow:0 1px 4px rgba(20,40,28,.25); border-left:4px solid rgba(255,255,255,.55); text-decoration:none; }
.traka:hover { filter:brightness(1.12); text-decoration:none; z-index:5; }
.traka.vuce { opacity:.75; cursor:grabbing; z-index:20; pointer-events:none; }
.t-rez { background:#d1596a; } .t-avans { background:#e0a526; } .t-tu { background:#2f7fd0; } .t-placeno { background:#008238; } .t-otisao { background:#a8b2ac; color:#fff; } .t-dug { background:#b4532a; }
.traka.blok { background:repeating-linear-gradient(45deg,#e3e9e5,#e3e9e5 6px,#f3f7f4 6px,#f3f7f4 12px); color:var(--fg2); box-shadow:none; cursor:default; border-left-color:var(--err); }
.legenda { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--fg2); margin-top:10px; }
.legenda i { display:inline-block; width:13px; height:13px; border-radius:4px; margin-right:6px; vertical-align:-2px; }

/* ---------- domacinstvo ---------- */
.sobe-mreza { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.soba-pl { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; border-top:4px solid var(--ok); }
.soba-pl.c1 { border-top-color:var(--warn); } .soba-pl.c2 { border-top-color:var(--err); }
.soba-pl b { font-size:19px; } .soba-pl .sub { color:var(--muted); font-size:12.5px; min-height:36px; }
.soba-pl form { margin-top:9px; display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- stampa ---------- */
.papir { background:#fff; color:#111; border-radius:8px; padding:34px 40px; max-width:900px; margin:0 auto; font:13px/1.45 "Segoe UI", Arial, sans-serif; }
.papir h1 { font-size:20px; color:#111; margin:0 0 4px; } .papir h2 { color:#111; }
.papir table { background:#fff; border:0; } .papir th { background:#f0f0f0; color:#333; border-bottom:1px solid #999; } .papir td { border-bottom:1px solid #ddd; }
.papir tbody tr:hover td { background:transparent; } .papir .muted { color:#666; } .papir tr.zbir td { background:#f6f6f6; }
.papir .dva { display:flex; justify-content:space-between; gap:30px; margin-bottom:18px; }
.papir.siroka { max-width:none; padding:20px; font-size:11.5px; } .papir.siroka th, .papir.siroka td { padding:4px 6px; }

@media (max-width: 900px) {
    nav.side { display:none; }
    body.meni-otvoren nav.side { display:block; position:fixed; top:54px; left:0; right:0; bottom:0; width:auto; height:auto; z-index:35; background:var(--bg); }
    main { padding:14px 12px 40px; }
    .top { padding:0 12px; gap:10px; } .top .ham { display:inline-flex; align-items:center; } .top .brzo, .top .user span:last-child { display:none; }
}
@media print {
    .top, nav.side, .nestampa, .page-head, .toolbar, .tabs { display:none !important; }
    body, main { background:#fff; padding:0; } .shell { display:block; }
    .papir { border-radius:0; padding:0; max-width:none; }
    @page { margin:12mm; }
}