:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1d2433; --muted:#6b7385; --line:#e3e6ec;
  --brand:#1f3a5f; --brand2:#2f5d8a; --accent:#c8a45a;
  --ok:#1f8a4c; --warn:#b7791f; --bad:#c0392b; --info:#2f6fb0;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.45rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.2rem 0 .6rem}
h3{font-size:1rem;margin:.8rem 0 .4rem}
small,.muted{color:var(--muted)}

/* gornja traka */
.top{background:var(--brand);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.top-in{display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:30px;width:auto;display:block}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}
.nav a{color:#dfe7f1;padding:.35rem .6rem;border-radius:7px;white-space:nowrap}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.top select{background:var(--brand2);color:#fff;border:0;border-radius:7px;padding:.35rem .5rem;font:inherit}
.user{font-size:.85rem;color:#c9d4e3;white-space:nowrap}
.user button{background:none;border:0;color:#fff;cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}

main{padding:1rem;max-width:1500px;margin:0 auto}

/* kartice i mreže */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem}
.kpi b{display:block;font-size:1.6rem;line-height:1.1}
.kpi span{color:var(--muted);font-size:.85rem}
a.kpi{text-decoration:none;color:inherit;display:block;transition:border-color .12s,box-shadow .12s}
a.kpi:hover{border-color:var(--accent,#c8a45a);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.between{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}

/* tabele */
table{width:100%;border-collapse:collapse}
th,td{padding:.45rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:600;background:#fafbfc}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.sum td{font-weight:700;background:#f3f5f8}
tr.sub td{font-weight:600}
.neg{color:var(--bad)}
.pos{color:var(--ok)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* forme */
form p{margin:.4rem 0}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.15rem}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid #cfd4dd;border-radius:8px;font:inherit;background:#fff}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid #9bbbe0;border-color:var(--brand2)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem .8rem}
.fields .wide{grid-column:1/-1}
.errorlist{color:var(--bad);margin:.2rem 0;padding-left:1rem;font-size:.85rem}
.btn{display:inline-block;background:var(--brand2);color:#fff;border:0;border-radius:8px;padding:.5rem .9rem;font:inherit;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand);text-decoration:none}
.btn.ok{background:var(--ok)} .btn.bad{background:var(--bad)} .btn.warn{background:var(--warn)}
.btn.light{background:#e9edf3;color:var(--ink)}
.btn.sm{padding:.3rem .6rem;font-size:.85rem}
.inline{display:inline}

/* poruke */
.msgs{list-style:none;padding:0;margin:0 0 1rem}
.msgs li{padding:.6rem .9rem;border-radius:8px;margin-bottom:.4rem;background:#e8f1fb;border-left:4px solid var(--info)}
.msgs .success{background:#e7f6ec;border-color:var(--ok)}
.msgs .error{background:#fdecea;border-color:var(--bad)}
.msgs .warning{background:#fff6e5;border-color:var(--warn)}

/* oznake */
.tag{display:inline-block;padding:.08rem .5rem;border-radius:20px;font-size:.78rem;font-weight:600;background:#eef1f5;color:#445}
.st-confirmed{background:#e3eefb;color:#1d4f8a}
.st-in_house{background:#e2f5e9;color:#17663a}
.st-checked_out{background:#eceff3;color:#556}
.st-cancelled,.st-no_show{background:#fbe6e4;color:#9b2c20}
/* boje statusa kao u Prosoftu */
.rs-clean{background:#d8e4bc;color:#2f4a12}
.rs-dirty{background:#ffc94d;color:#4a3300}
.rs-inspected{background:#fff;color:#334;box-shadow:inset 0 0 0 1px #b8bfcc}
.rs-ooo{background:#595959;color:#fff}
.rs-oos{background:#9a9a9a;color:#fff}

/* plan soba */
.plan{border-collapse:separate;border-spacing:0;font-size:.82rem;min-width:900px}
.plan th,.plan td{border-bottom:1px solid var(--line);border-right:1px solid #eef0f4;padding:0;height:34px}
.plan th{padding:.3rem .2rem;text-align:center;position:sticky;top:0;background:#fafbfc;z-index:2;text-transform:none;letter-spacing:0}
.plan th.today{background:#fff4d6}
.plan th.we{background:#f3f4f7}
.plan td.room{position:sticky;left:0;background:#fff;z-index:1;padding:.2rem .5rem;white-space:nowrap;min-width:90px;border-right:2px solid var(--line)}
.plan td.room b{font-size:.92rem}
.plan td.free a{display:block;height:100%;min-height:33px}
.plan td.free a:hover{background:#eef5ff}
.plan td.we{background:#fafafc}
.plan td.today{background:#fffbea}
.bar{display:block;margin:3px 2px;padding:.25rem .45rem;border-radius:6px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;height:27px;line-height:1.35}
.bar:hover{text-decoration:none;filter:brightness(1.08)}
.bar.confirmed{background:#3f9ae6}
.bar.in_house{background:#c00000}
.bar.checked_out{background:#b4bac4}
.bar.cl{border-top-left-radius:0;border-bottom-left-radius:0}
.bar.cr{border-top-right-radius:0;border-bottom-right-radius:0}
.plan td.room.rs-clean,.plan td.room.rs-dirty,.plan td.room.rs-ooo,.plan td.room.rs-oos{box-shadow:none}
.plan td.room.rs-inspected{box-shadow:none;background:#fff}
.legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--muted);align-items:center}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:.3rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.plan tfoot td{text-align:center;font-size:.75rem;color:var(--muted);padding:.2rem 0}

/* domaćinstvo – kartice za telefon */
.hk{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.hk .card{margin:0;padding:.75rem}
.hk .num{font-size:1.4rem;font-weight:700}
.hk form{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}
.hk form .btn{flex:1;padding:.55rem .3rem;font-size:.85rem}

/* štampa */
@media print{
  .top,.noprint,.msgs{display:none!important}
  body{background:#fff}
  main{padding:0}
  .card{border:0;padding:0}
}

@media (max-width:800px){
  .menu-btn{display:block}
  .nav{display:none;flex-basis:100%;flex-direction:column}
  .nav.open{display:flex}
  main{padding:.7rem}
  h1{font-size:1.25rem}
  .kpi b{font-size:1.3rem}
}

.login{max-width:360px;margin:12vh auto;background:#fff;padding:2rem;border-radius:14px;border:1px solid var(--line)}
.login h1{text-align:center}

/* Kartice-dugmad (Knjigovodstvo i sl.) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-bottom:1rem}
.cards .tile{display:flex;flex-direction:column;gap:.25rem;margin:0;min-height:64px;justify-content:center}
.tile b{font-size:1.02rem;color:var(--ink)}
.tile span{font-size:.85rem;color:var(--muted)}
.tile.off{opacity:.55;pointer-events:none}
a.tile:hover{border-color:var(--brand2)}