:root{
  --blue:#1a68b3; --blue-dark:#14548f; --blue-soft:#e8eff8;
  --ink:#12233a; --muted:#5b7089; --line:#c9d9ec;
  --red:#e0574a; --green:#1e8a4c; --orange:#e08a1e; --bg:#eceff5;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--blue-dark)}

/* ---------------------------------------------------------- topbar */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar-in{max-width:1240px;margin:0 auto;padding:8px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand img{height:38px;display:block}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mainnav a{
  padding:8px 12px;border-radius:9px;text-decoration:none;color:var(--blue-dark);
  font-weight:700;font-size:14px;white-space:nowrap;
}
.mainnav a:hover{background:var(--blue-soft)}
.mainnav a.on{background:var(--blue);color:#fff}
.userbox{display:flex;align-items:center;gap:8px;font-size:13px}
.uname{font-weight:700}
.urole{color:var(--muted)}
.logout{background:var(--blue-soft);padding:7px 12px;border-radius:9px;text-decoration:none;font-weight:700}

.wrap{max-width:1240px;margin:0 auto;padding:18px 14px 90px}

/* ----------------------------------------------------------- kartice */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(20,60,110,.06)}
.panel h2{margin:0 0 14px;font-size:17px;color:var(--blue-dark)}
.panel h3{margin:18px 0 10px;font-size:15px;color:var(--blue-dark)}
.cols2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.cols2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cols-side{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1020px){.cols-side{grid-template-columns:minmax(0,1fr) 420px;align-items:start}
  .sticky{position:sticky;top:74px}}

/* ------------------------------------------------------------ forme */
label.f{display:block;margin:0 0 14px}
label.f>span,.lbl{display:block;font-weight:700;color:var(--blue-dark);font-size:13.5px;margin-bottom:6px}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=tel],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;outline:none;min-height:44px}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,104,179,.15)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.row3{grid-template-columns:1fr 1fr}}
.hint{font-size:12px;color:#7a8a9d;margin:-8px 0 12px}
.check{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--blue-dark);margin:0 0 14px;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;accent-color:var(--blue)}

button,.btn{border:0;border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer;
  background:var(--blue);color:#fff;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;text-align:center}
button.ghost,.btn.ghost{background:var(--blue-soft);color:var(--blue-dark)}
button.danger,.btn.danger{background:var(--red)}
button.ok,.btn.ok{background:var(--green)}
button.sm,.btn.sm{padding:7px 11px;min-height:36px;font-size:13px;border-radius:8px}
button:active{transform:translateY(1px)}
button[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.grid-btn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wide{grid-column:1/-1}

/* ------------------------------------------------------------ flash */
.flash{padding:12px 16px;border-radius:10px;font-weight:700;margin-bottom:16px}
.flash.ok{background:#dff3e6;color:#14663a;border:1px solid #a9dcc0}
.flash.err{background:#fde3e0;color:#8c261b;border:1px solid #f3b3ab}

/* ---------------------------------------------------------- tabele */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.tbl th,table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.tbl th{background:var(--blue-soft);color:var(--blue-dark);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
table.tbl tr:hover td{background:#f7fafd}
table.tbl td.num,table.tbl th.num{text-align:right;white-space:nowrap}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.tag.green{background:#dff3e6;color:#14663a}
.tag.red{background:#fde3e0;color:#8c261b}
.tag.gray{background:#e9edf3;color:#5b7089}
.tag.orange{background:#fdf0dc;color:#8a5610}
.tag.blue{background:var(--blue-soft);color:var(--blue-dark)}

/* --------------------------------------------------------- statistika */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.kpi .k{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.kpi .v{font-size:24px;font-weight:800;color:var(--blue-dark);margin-top:4px}
.bar{height:8px;border-radius:6px;background:var(--blue);min-width:2px}

/* ------------------------------------------------ bukerske velike kocke */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(min-width:700px){.tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.tile{
  border:0;border-radius:16px;min-height:112px;padding:14px;color:#fff;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  text-align:left;box-shadow:0 2px 6px rgba(20,60,110,.15);font-weight:800;font-size:19px;line-height:1.2;
  transition:transform .08s}
.tile:active{transform:scale(.98)}
.tile.on{outline:4px solid #12233a;outline-offset:2px}
.tile small{font-weight:700;font-size:12.5px;opacity:.92;display:block}
.tile .seats{background:rgba(255,255,255,.22);padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800}
.tile.private{background:repeating-linear-gradient(135deg,#2c3e70,#2c3e70 12px,#365087 12px,#365087 24px)}
.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paybtn{border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;min-height:62px;
  font-weight:800;font-size:14px;padding:8px;line-height:1.2}
.paybtn.on{color:#fff}
.paybtn.on[data-m=cash]{background:var(--green);border-color:var(--green)}
.paybtn.on[data-m=link]{background:#0f9d8f;border-color:#0f9d8f}
.paybtn.on[data-m=card]{background:#7b5cd6;border-color:#7b5cd6}
.paybtn.on[data-m=onboard]{background:var(--red);border-color:var(--red)}

/* --------------------------------------------------------- pregled karte */
.ticketbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.ticketbox canvas{width:100%;height:auto;display:block;border-radius:8px}

/* ------------------------------------------------------------- skener */
#scanwrap{position:relative;background:#000;border-radius:12px;overflow:hidden}
#scanvid{width:100%;display:block;max-height:60vh;object-fit:cover}
.scanhint{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;padding:8px 12px;font-size:13px;text-align:center}

/* ------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;background:rgba(10,25,45,.55);display:flex;align-items:center;justify-content:center;
  padding:18px;z-index:100}
.modal[hidden]{display:none}
.modal .box{background:#fff;border-radius:16px;padding:20px;max-width:480px;width:100%;
  border-top:10px solid var(--blue);max-height:90vh;overflow:auto}
.modal .box.red{border-top-color:var(--red)}
.modal .box.orange{border-top-color:var(--orange)}
.modal h3{margin:0 0 10px;font-size:19px}
.modal .box.red h3{color:var(--red)}
.modal .box.orange h3{color:#8a5610}

.itemrow{display:grid;grid-template-columns:1fr;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:10px;background:#fbfcfe}
@media(min-width:760px){.itemrow{grid-template-columns:1.3fr 1.3fr .6fr .8fr auto;align-items:end}}
.itemrow .del{background:var(--blue-soft);color:var(--red);min-height:44px}
.totline{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.totline.big{font-size:20px;font-weight:800;color:var(--blue-dark);border-bottom:0;padding-top:12px}
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* -------------------------------------------------------------- login */
.loginwrap{max-width:400px;margin:8vh auto;padding:0 16px}
.loginwrap .panel{padding:26px}
.loginwrap img{display:block;margin:0 auto 18px;max-width:220px}

/* -------------------------------------------------------------- print */
@media print{
  .topbar,.noprint{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .panel{border:0;box-shadow:none;padding:0;margin:0}
}