/* Stay Manager — stilovi sučelja */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f0f2f7;
  --text: #172033;
  --muted: #5d6677;
  --border: #e1e5ee;
  --primary: #1d4ed8;
  --primary-hover: #1a43b8;
  --primary-soft: #e8eefc;
  --danger: #c0262d;
  --danger-soft: #fdecec;
  --warning: #a35a00;
  --warning-soft: #fff4e2;
  --success: #0d7a50;
  --success-soft: #e6f6ee;
  --info-soft: #eaf2ff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --radius: 12px;
  --radius-sm: 8px;
  --ch-direct: #0f9d76;
  --ch-booking: #1b4fb8;
  --ch-airbnb: #e0485a;
  --ch-vrbo: #6d3fc0;
  --ch-other: #57606f;
  --ch-blocked: #7b8494;
  --gold: #c9a24a;
  --gold-soft: #f6e7bf;
  --nav-bg: linear-gradient(90deg, #08142e, #0e2350 60%, #0b1a3a);
  /* boje tvrtke (Postavke → Izgled) ih mogu promijeniti; ovo su zadane */
  --on-primary: #fff;
  --nav-ink: #e9eefb;
  --nav-ink-2: rgba(226, 232, 246, .82);
  --nav-ink-hover: #fff;
  --nav-line: rgba(226, 232, 246, .3);
  --nav-hover: rgba(255, 255, 255, .08);
  --nav-border: rgba(201, 162, 74, .35);
  --accent: #ddb057;
  --accent-ink: #f6dc96;
  --accent-soft: rgba(201, 162, 74, .16);
  --on-accent: #13203d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #10131a;
    --surface: #181c25;
    --surface-2: #1f2430;
    --text: #e8ebf2;
    --muted: #9aa3b5;
    --border: #2b3140;
    --primary: #5b8cff;
    --primary-hover: #7aa2ff;
    --primary-soft: #1d2a4d;
    --danger: #ff6b6b;
    --danger-soft: #3a1d22;
    --warning: #f0b14a;
    --warning-soft: #3a2c15;
    --success: #4ccb94;
    --success-soft: #16352a;
    --info-soft: #1b2944;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10131a;
    --surface: #181c25;
    --surface-2: #1f2430;
    --text: #e8ebf2;
    --muted: #9aa3b5;
    --border: #2b3140;
    --primary: #5b8cff;
    --primary-hover: #7aa2ff;
    --primary-soft: #1d2a4d;
    --danger: #ff6b6b;
    --danger-soft: #3a1d22;
    --warning: #f0b14a;
    --warning-soft: #3a2c15;
    --success: #4ccb94;
    --success-soft: #16352a;
    --info-soft: #1b2944;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; }
p { margin: 0 0 .75rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- gornja traka ---------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
  color: var(--nav-ink); box-shadow: 0 1px 8px rgba(5, 12, 30, .25); }
.topbar-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .45rem 1rem; }
.brand { display: flex; align-items: center; gap: .45rem; flex: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: auto; height: 32px; }
.brand-word { width: auto; height: 32px; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 800; }
.mainnav { display: flex; gap: .15rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a { color: var(--nav-ink-2); padding: .45rem .7rem; border-radius: var(--radius-sm); white-space: nowrap; font-weight: 500; }
.mainnav a:hover { background: var(--nav-hover); color: var(--nav-ink-hover); text-decoration: none; }
.mainnav a.active { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.count-pill { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .35em; border-radius: 1em;
  background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; vertical-align: .1em; }
.usermenu { display: flex; align-items: center; gap: .5rem; }
.topbar .dropdown summary { color: var(--nav-ink); border-color: var(--nav-line); }
.topbar .dropdown-menu { color: var(--text); }
.bell { position: relative; color: var(--nav-ink-2); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.bell:hover { background: var(--nav-hover); }
.bell .count { position: absolute; top: 2px; right: 0; background: var(--danger); color: #fff; font-size: .7rem; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; padding: .4rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); font-weight: 500; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .6rem; min-width: 200px; display: grid; gap: .4rem; z-index: 60; }

@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: .35rem .75rem; }
  .mainnav { order: 3; flex-basis: 100%; }
  .brand-name, .brand-word { display: none; }
  .usermenu { margin-left: auto; }
}

/* --- raspored ---------------------------------------------------------------------- */
.container { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.container-wide { max-width: 1680px; }
.narrow-container { max-width: 760px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.crumbs { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.card.narrow { max-width: 760px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.card-warning { border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); background: var(--warning-soft); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-2.tight, .grid-3.tight { gap: 0 .9rem; }
.grid-2 > .card, .grid-3 > .card { margin-bottom: 0; }
.grid-2 + .grid-2, .grid-2 + .card, .card + .grid-2 { margin-top: 1rem; }
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > .card + .card { margin-top: 0; }
  h1 { font-size: 1.35rem; }
  .card { padding: 1rem; }
}

/* --- gumbi --------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; line-height: 1.2; text-decoration: none; white-space: nowrap; min-height: 38px; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-small { padding: .3rem .6rem; font-size: .84rem; min-height: 32px; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-align: left; }
.inline-form { display: inline; margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.row-actions { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.danger-zone { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

/* --- obrasci ----------------------------------------------------------------------- */
.field { margin-bottom: .85rem; min-width: 0; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.field-check label { font-weight: 500; display: flex; gap: .5rem; align-items: flex-start; }
.field-check input { margin-top: .25rem; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .65rem; min-height: 40px; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--primary); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent); }
input:disabled, select:disabled, textarea:disabled, fieldset:disabled input, fieldset:disabled select { background: var(--surface-2); color: var(--muted); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.help { color: var(--muted); font-size: .82rem; margin-top: .25rem; }
.req { color: var(--danger); }
.input-small { max-width: 120px; margin-left: auto; text-align: right; }
.form-inline { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1rem; }
.form-inline .field { margin-bottom: 0; }
.form-inline .grow, .filters .grow { flex: 1 1 260px; }
.filters { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; padding-bottom: .3rem; }
.filters .field { margin-bottom: .6rem; }
.copy-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.copy-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; }
.copy-label { min-width: 110px; font-size: .85rem; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.color-options { display: flex; gap: .4rem; flex-wrap: wrap; }
.color-option input { position: absolute; opacity: 0; }
.color-option span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.color-option input:checked + span { box-shadow: 0 0 0 2px var(--text); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: middle; }
details summary { cursor: pointer; }
details.small { margin-top: .75rem; }
.help-box ul { margin: .5rem 0; padding-left: 1.2rem; }

/* --- tablice i popisi ------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -.2rem; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: .5rem .55rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: .6rem .55rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table tfoot td { border-bottom: 0; border-top: 2px solid var(--border); }
.table .num, .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.row-conflict { background: var(--danger-soft); }
.row-cancelled td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.row-cancelled td .badge, .row-cancelled td a { text-decoration: none; }
.row-done td { color: var(--muted); }
.row-overdue { background: var(--danger-soft); }
tr.inactive td { color: var(--muted); }
.actions-cell { white-space: nowrap; }
@media (max-width: 700px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border-bottom: 1px solid var(--border); padding: .55rem 0; }
  .table-stack td { border: 0; padding: .2rem .2rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .8rem; text-align: left; flex: 0 0 auto; padding-top: .1rem; }
  .table-stack td:first-child { font-size: 1rem; }
  .table-stack td.actions-cell, .table-stack td.right:not([data-label]) { justify-content: flex-end; padding-top: .4rem; }
  .table-stack td.actions-cell .row-actions { justify-content: flex-end; }
  .table-stack tfoot, .table-stack tfoot tr, .table-stack tfoot td { display: table-cell; }
  .table-stack tfoot { display: block; }
  .table-stack tfoot tr { display: flex; justify-content: space-between; }
  .table-stack tfoot td:empty { display: none; }
  .table-stack .num { text-align: right; }
  .table-wrap { margin: 0; }
}
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }
.list-main { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.list li > span:last-child:not(.badge) { white-space: nowrap; }
a.list-main:hover { text-decoration: none; }
a.list-main:hover strong { color: var(--primary); }
.list li.overdue strong { color: var(--danger); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.dl dt { color: var(--muted); font-size: .9rem; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; }
.steps { margin: 0; padding-left: 1.3rem; display: grid; gap: .4rem; }

/* --- oznake ------------------------------------------------------------------------------ */
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.badge-confirmed { background: var(--success-soft); color: var(--success); }
.badge-tentative { background: var(--warning-soft); color: var(--warning); }
.badge-blocked { background: var(--surface-2); color: var(--muted); }
.badge-cancelled { background: var(--danger-soft); color: var(--danger); }
.ev-checked_in, .ev-checked_out { background: var(--success-soft); color: var(--success); }
.ev-queued, .ev-checkout_queued, .ev-cancel_queued { background: var(--info-soft); color: var(--primary); }
.ev-error { background: var(--danger-soft); color: var(--danger); }
.ev-none { background: var(--warning-soft); color: var(--warning); }
.ev-cancelled { background: var(--surface-2); color: var(--muted); }
.chip { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .55rem; border-radius: 6px; color: #fff; background: var(--ch-other); vertical-align: middle; }
.chip-direct { background: var(--ch-direct); }
.chip-booking { background: var(--ch-booking); }
.chip-airbnb { background: var(--ch-airbnb); }
.chip-vrbo { background: var(--ch-vrbo); }
.chip-other { background: var(--ch-other); }
.chip-blocked { background: repeating-linear-gradient(135deg, var(--ch-blocked) 0 6px, color-mix(in srgb, var(--ch-blocked) 75%, #fff) 6px 12px); }
.chip-conflict { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.legend { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.legend .muted { margin-left: .5rem; }

/* --- poruke ------------------------------------------------------------------------------ */
.flashes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.flash, .alert { padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid transparent; }
.flash-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.flash-error, .alert-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.flash-warning, .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.flash-info, .alert-info { background: var(--info-soft); color: var(--text); border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.alert { margin-bottom: 1rem; }
.alert ul { margin: .4rem 0; padding-left: 1.2rem; }
.alert a { color: inherit; text-decoration: underline; }
.alert-split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }

/* --- početna --------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; color: var(--text); box-shadow: var(--shadow); }
a.stat:hover { text-decoration: none; border-color: var(--primary); }
.stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .84rem; }
.stat-alert { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: var(--danger-soft); }
.stat-alert .stat-value { color: var(--danger); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onboarding { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); }
.notif-conflict span:first-child, .notif-evisitor_error span:first-child { color: var(--danger); }
.empty { text-align: center; padding: 2rem 1rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tabs a { padding: .55rem .85rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs a:hover { text-decoration: none; color: var(--text); }

/* --- kalendar -------------------------------------------------------------------------- */
.cal-controls input[type="date"] { width: auto; min-height: 38px; }
.cal { --day-w: 44px; --label-w: 180px; --row-h: 46px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-loading { padding: 2rem; text-align: center; color: var(--muted); }
.cal-scroll { overflow: auto; max-height: calc(100vh - 210px); min-height: 220px; }
.cal-grid { position: relative; }
.cal-head { display: flex; position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); }
.cal-corner { position: sticky; left: 0; z-index: 7; width: var(--label-w); min-width: var(--label-w); background: var(--surface); padding: .5rem .75rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; border-right: 1px solid var(--border); display: flex; align-items: flex-end; }
.cal-days { display: flex; }
.cal-day { width: var(--day-w); min-width: var(--day-w); text-align: center; padding: .3rem 0 .35rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; position: relative; line-height: 1.15; }
.cal-day .dow { font-size: .68rem; color: var(--muted); text-transform: uppercase; }
.cal-day .dom { font-weight: 600; font-size: .9rem; }
.cal-day .month { position: absolute; top: 1px; left: 3px; font-size: .62rem; color: var(--primary); font-weight: 700; text-transform: uppercase; }
.cal-day.month-start { padding-top: .85rem; }
.cal-day.weekend { background: var(--surface-2); }
.cal-day.today { background: var(--primary-soft); }
.cal-day.today .dom { color: var(--primary); }
.cal-row { display: flex; height: var(--row-h); border-bottom: 1px solid var(--border); }
.cal-label { position: sticky; left: 0; z-index: 5; width: var(--label-w); min-width: var(--label-w); background: var(--surface); border-right: 1px solid var(--border); border-left: 4px solid transparent; padding: .3rem .6rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.cal-label strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-label .muted { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cells { position: relative; display: flex; }
.cal-cell { width: var(--day-w); min-width: var(--day-w); border-right: 1px solid var(--border); cursor: pointer; }
.cal-cell.weekend { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.cal-cell.today { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.cal-cell:hover { background: var(--primary-soft); }
.cal-bar { position: absolute; top: 7px; height: calc(var(--row-h) - 14px); border-radius: 7px; color: #fff; padding: 0 .45rem; display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; overflow: hidden; white-space: nowrap; cursor: pointer; user-select: none; touch-action: pan-x pan-y; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: box-shadow .15s; z-index: 2; }
.cal-bar:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cal-bar .bar-name { overflow: hidden; text-overflow: ellipsis; }
.cal-bar .bar-meta { font-weight: 500; opacity: .85; font-size: .72rem; margin-left: auto; }
.cal-bar.tentative { opacity: .75; outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: -4px; }
.cal-bar.from-ical::after { content: "⇄"; font-size: .7rem; opacity: .8; margin-left: auto; }
.cal-bar.conflict { box-shadow: 0 0 0 3px var(--danger); background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .25) 7px 14px); }
.cal-bar.clip-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.clip-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar.dragging { opacity: .85; z-index: 10; cursor: grabbing; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); touch-action: none; }
#cal-message { margin-top: .75rem; }
.cal-bar.stacked { font-size: .7rem; padding: 0 .35rem; border-radius: 5px; }
.cal-bar.stacked .bar-meta { display: none; }

/* --- prijava / registracija -------------------------------------------------------- */
.auth-page .container { min-height: 100vh; display: grid; place-items: center; }
.auth-card { width: min(420px, 100%); padding: 1.6rem; }
.auth-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: 1rem; }
.error-card { text-align: center; padding: 2.5rem 1rem; margin: 2rem auto; }
.error-code { font-size: 3rem; font-weight: 800; color: var(--muted); }

/* --- samoprijava gostiju -------------------------------------------------------------- */
.public-head { background: var(--surface); border-bottom: 1px solid var(--border); }
.public-head-inner { max-width: 760px; margin: 0 auto; padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lang-switch { display: flex; gap: .25rem; }
.lang-switch a { padding: .3rem .6rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; }
.lang-switch a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.mrz-card { border-style: dashed; }
.mrz-status { margin-top: .6rem; font-size: .9rem; min-height: 1.2em; }
.mrz-status.ok { color: var(--success); }
.mrz-status.warning { color: var(--warning); }
.mrz-status.error { color: var(--danger); }
.mrz-paste { display: inline-block; }
.mrz-paste[open] { display: block; width: 100%; }
.mrz-paste textarea { margin: .5rem 0; }
.public-page form .actions { margin-top: 1rem; }

@media print {
  .topbar, .page-actions, .actions, .row-actions, .danger-zone, .filters, .flashes { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; padding: 0; }
}

/* administracija servera */
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .stats.stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-value.stat-text { font-size: 1.25rem; padding: .2rem 0 .15rem; }
.stat-ok .stat-value { color: var(--success); }
.code-block { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .9rem; overflow-x: auto; margin: .4rem 0 0; white-space: pre; }
.usermenu .version { font-size: .75rem; color: var(--muted); padding-top: .35rem; border-top: 1px solid var(--border); margin-top: .35rem; }

/* --- računi i fiskalizacija ----------------------------------------------------------- */
.items-table th { padding: .45rem .35rem; }
.items-table td { vertical-align: middle; padding: .35rem .35rem; }
.items-table td.item-name { min-width: 220px; width: 100%; }
.items-table select { text-align: left; }
.items-table input, .items-table select { min-height: 36px; padding: .35rem .5rem; }
.items-table select[name="item_unit"] { width: 112px; }
.items-table select[name="item_tax"] { width: 132px; }
.items-table input[name="item_quantity"] { width: 70px; }
.items-table input[name="item_price"] { width: 108px; }
.items-table input[name="item_discount"] { width: 70px; }
.items-table .input-small, .items-table .input-tiny { max-width: none; }
.input-tiny { max-width: 78px; margin-left: auto; text-align: right; }
.item-total { font-weight: 600; min-width: 92px; }
.recap { grid-template-columns: minmax(0, 1fr) max-content; }
.recap dd { text-align: right; }
.recap-narrow { max-width: 480px; margin-left: auto; margin-top: .75rem; }
.recap .recap-total { font-weight: 700; font-size: 1.06rem; color: var(--text); padding-top: .45rem; border-top: 1px solid var(--border); }
.sticky-actions { position: sticky; bottom: .5rem; z-index: 20; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1rem; padding: .7rem .9rem; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(16, 24, 40, .10); }
.premises { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .85rem .2rem; margin-bottom: .75rem; }
.premises.inactive { opacity: .7; }
.premises-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.list li.inactive .list-main strong { color: var(--muted); }
.notif-fiscal_error span:first-child { color: var(--danger); }
.add-service summary { font-weight: 600; color: var(--primary); margin-top: .6rem; }
.list-total { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-top: .55rem; border-top: 1px solid var(--border); font-size: .92rem; }
.list-total strong { font-variant-numeric: tabular-nums; }
.text-warn { color: var(--warning); }
.table tr.row-active td { background: var(--primary-soft); }
.field-narrow { width: 6.5rem; }
.field-narrow input { width: 100%; }
.add-service form { margin-top: .75rem; }
.steps.small { gap: .5rem; }
.steps + p { margin-top: .9rem; }
@media (max-width: 700px) {
  .items-table thead { display: none; }
  .items-table, .items-table tbody { display: block; width: 100%; }
  .items-table tr[data-item] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem .5rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
  .items-table tr[data-item]:hover { background: none; }
  .items-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .items-table td.item-name { grid-column: 1 / 3; grid-row: 1; min-width: 0; width: auto; }
  .items-table td.right { grid-column: 3; grid-row: 1; justify-self: end; }
  .items-table select[name], .items-table input[name] { width: 100%; }
  .items-table td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; color: var(--muted); margin-bottom: .1rem; text-align: left; }
  .items-table .input-small, .items-table .input-tiny, .items-table select.input-small { max-width: none; }
  .items-table td.item-total { align-self: end; padding-bottom: .5rem; text-align: right; }
  .items-table td.right { align-self: end; padding-bottom: .1rem; }
  .sticky-actions { bottom: 0; border-radius: var(--radius) var(--radius) 0 0; justify-content: stretch; }
  .sticky-actions .btn { flex: 1 1 auto; }
}
@media print { .sticky-actions { display: none !important; } }
@media (max-width: 700px) {
  .table-stack td.item-pos { display: none; }
  .table-stack td.item-desc { justify-content: flex-start; text-align: left; font-weight: 600; padding-bottom: .35rem; }
}

/* --- početna: pločice -------------------------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.stack { display: grid; gap: 1rem; align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1rem 1rem; min-width: 0; display: flex; flex-direction: column; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-bottom: .75rem; min-width: 0; }
.panel-head h2 { margin: 0; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; flex: 1 1 6.5rem; min-width: 0; }
.panel-head .period { margin-left: auto; }
.panel-ico { color: var(--muted); display: inline-flex; }
.panel-ico .ico { width: 20px; height: 20px; }
.period { width: auto; min-height: 30px; padding: .15rem 1.6rem .15rem .2rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background-color: transparent; font-size: .85rem; color: var(--text); max-width: 11rem; }
.panel-body { flex: 1 1 auto; min-width: 0; }
.panel-body.split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.panel-note { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); }
.panel-sum { margin: .15rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-compact .panel-head { margin-bottom: .35rem; }
.panel-alert { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.panel-accent { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.panel-accent .panel-head h2, .panel-accent .panel-ico { color: var(--warning); }

.ring { --pct: 0; --ring: var(--primary); width: 150px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: conic-gradient(var(--success) calc(var(--pct) * 1%), var(--ring) 0); }
.ring-soft { --ring: color-mix(in srgb, var(--primary) 35%, var(--surface)); }
.ring-inner { width: calc(100% - 22px); aspect-ratio: 1; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }
.ring-label { color: var(--primary); font-size: .9rem; }
.ring-value { color: var(--primary); font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
a.ring:hover { text-decoration: none; filter: brightness(1.03); }

.tiles { display: grid; gap: .6rem; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico label value" "ico extra extra"; align-items: center; gap: .1rem .7rem; padding: .75rem .9rem; border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); border: 1px solid transparent; min-width: 0; }
.tile:hover { text-decoration: none; border-color: currentColor; }
.tile-ico { grid-area: ico; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.tile-ico .ico { width: 22px; height: 22px; }
.tile-label { grid-area: label; font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.tile-value { grid-area: value; font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-extra { grid-area: extra; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .9; }
.tile-sub { font-weight: 500; }
.tiles-3 .tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "label" "value" "extra"; justify-items: center; text-align: center; gap: .35rem; padding: 1rem .6rem; }
.tiles-3 .tile-sep { display: none; }
.tiles-3 .tile-sub { display: block; }
.tile-warn { background: var(--warning-soft); color: var(--warning); }
.tile-ok { background: var(--primary-soft); color: var(--primary); }
.tile-info { background: var(--info-soft); color: var(--primary); }
.tile-dark { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: color-mix(in srgb, var(--primary) 70%, var(--text)); }
.tile-bad { background: var(--danger-soft); color: var(--danger); }
.big-number { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.1; color: var(--primary); font-variant-numeric: tabular-nums; }
a.big-number:hover { text-decoration: none; opacity: .85; }
.big-number.is-warn { color: var(--warning); }
.big-number.is-bad { color: var(--danger); }
.meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: .45rem; }
.meter span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.mini-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .84rem; }
.payment-form { align-items: flex-end; }
@media (max-width: 1100px) {
  .span-6 { grid-column: span 12; }
  .span-3, .span-4 { grid-column: span 6; }
  .span-2 { grid-column: span 4; }
}
@media (max-width: 700px) {
  .board { gap: .75rem; }
  .span-2, .span-3, .span-4, .span-6 { grid-column: span 12; }
  .panel-body.split { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .panel-body.split .tiles { width: 100%; }
  .ring { width: 132px; }
  .tiles-3 { grid-template-columns: minmax(0, 1fr); }
  .tiles-3 .tile { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico label value" "ico extra extra"; justify-items: stretch; text-align: left; padding: .75rem .9rem; }
  .tiles-3 .tile-sep, .tiles-3 .tile-sub { display: inline; }
}

/* --- izvješća ---------------------------------------------------------------------------------- */
.period-form { flex-wrap: wrap; }
.period-form .presets { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .35rem; }
.preset { display: inline-block; padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; color: var(--text); background: var(--surface); }
.preset:hover { text-decoration: none; border-color: var(--primary); }
.preset.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.field-narrow-time { width: 8.5rem; }
.field-narrow-time input { width: 100%; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.report-grid h3:first-child, .card > h3:first-of-type { margin-top: 0; }
.card h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; }
.report-table tfoot td { font-weight: 700; border-top: 2px solid var(--text); }
.report-table tr.group-row td { font-weight: 700; background: var(--surface-2); }
.report-table tr.sub-row td:first-child { padding-left: 1.4rem; color: var(--muted); }
.cash-summary { grid-template-columns: auto auto; justify-content: start; column-gap: 2rem; }
.cash-summary dd { text-align: right; }
@media (max-width: 900px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- Prijava: Stay Manager (izgledi Bazen, Terasa, Salon, Vila) ------------------------------ */
.sm-auth {
  --gold-1: #f6dc96; --gold-2: #ddb057; --gold-3: #b8862f;
  --ink: #eef2fb; --ink-2: rgba(222, 229, 245, .8);
  margin: 0; min-height: 100vh; background: #060e22; color: var(--ink); color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
}
.sm-stage { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; }
.sm-stage::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--art) 30% 30% / cover no-repeat;
  filter: blur(26px) brightness(.45) saturate(1.1); }
.sm-frame { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding-bottom: 24px; }
/* traka s velikim logom: visina je --hero-h, slika se mjeri tako da područje loga stane u traku */
.sm-hero { --hero-h: clamp(220px, 40vh, 380px); --hero-s: calc(var(--hero-h) * .76);
  width: min(100%, calc(var(--hero-h) * 1.18)); height: var(--hero-h);
  background-image: var(--art); background-repeat: no-repeat;
  background-size: auto calc(var(--hero-k) * var(--hero-s));
  background-position: calc(50% + var(--hero-x) * var(--hero-s)) calc(var(--hero-y) * var(--hero-s) + var(--hero-h) * .03);
  -webkit-mask-image: linear-gradient(#000 66%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(#000 66%, transparent),
  linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.sm-card { position: relative; width: min(440px, calc(100% - 32px)); margin: -30px auto 0; padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 32, 68, .9), rgba(7, 16, 38, .94));
  border: 1px solid rgba(190, 206, 240, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.sm-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 4px; }
.sm-logo { display: none; height: auto; }
.sm-title, .sm-title-mobile { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.005em; }
.sm-title { display: none; }
.sm-lead { margin: 0; color: var(--ink-2); font-size: .95em; }
.sm-ico { display: block; flex: none; }

.sm-input { position: relative; display: flex; align-items: center; margin: 0; }
.sm-input > .sm-ico { position: absolute; left: .95em; width: 1.3em; height: 1.3em; color: rgba(225, 232, 248, .85); pointer-events: none; }
.sm-input input { width: 100%; min-height: 0; height: 3.3em; margin: 0; padding: 0 3em 0 2.95em; border-radius: .6em;
  border: 1px solid rgba(190, 206, 240, .32); background: rgba(5, 13, 32, .55); color: var(--ink);
  font: inherit; font-size: 1em; outline: none; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.sm-input-plain input { padding-left: .95em; }
.sm-input input::placeholder { color: rgba(205, 214, 234, .72); opacity: 1; }
.sm-input input:focus { border-color: var(--gold-2); outline: none; box-shadow: 0 0 0 3px rgba(221, 176, 87, .22); }
.sm-input input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #0b1834 inset; caret-color: var(--ink); }
.sm-eye { position: absolute; right: .55em; display: grid; place-items: center; width: 2.3em; height: 2.3em; padding: 0;
  border: 0; border-radius: .5em; background: none; color: rgba(225, 232, 248, .85); cursor: pointer; }
.sm-eye:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sm-eye .sm-ico { width: 1.35em; height: 1.35em; }
.sm-eye .sm-ico + .sm-ico, .sm-eye[aria-pressed="true"] .sm-ico:first-child { display: none; }
.sm-eye[aria-pressed="true"] .sm-ico + .sm-ico { display: block; }

.sm-row { display: flex; align-items: center; justify-content: space-between; gap: .4em .8em; flex-wrap: wrap; font-size: .95em; }
.sm-check { position: relative; display: inline-flex; align-items: center; gap: .6em; cursor: pointer; user-select: none; }
.sm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sm-box { display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: .28em; border: 1.5px solid rgba(225, 232, 248, .75); }
.sm-check input:checked + .sm-box { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); border-color: var(--gold-2); }
.sm-check input:checked + .sm-box::after { content: ""; width: .36em; height: .68em; border: solid #13203d; border-width: 0 .17em .17em 0;
  transform: translateY(-.08em) rotate(45deg); }
.sm-check input:focus-visible + .sm-box { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.sm-link { color: var(--ink); text-decoration: none; }
.sm-link:hover { text-decoration: underline; }
.sm-link-gold { color: var(--gold-1); }

.sm-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: .55em; width: 100%; height: 3.3em;
  border: 0; border-radius: .6em; cursor: pointer; font: inherit; font-size: 1.12em; font-weight: 700; letter-spacing: .02em; color: #151b2b;
  background: linear-gradient(180deg, #f7df9c 0%, #e2b85e 50%, #c4923a 100%);
  box-shadow: 0 8px 22px rgba(196, 146, 58, .32), inset 0 1px 0 rgba(255, 255, 255, .55); transition: filter .15s, transform .05s; }
.sm-btn:hover { filter: brightness(1.06); }
.sm-btn:active { transform: translateY(1px); }
.sm-btn:focus-visible { outline: 3px solid rgba(246, 220, 150, .6); outline-offset: 2px; }
.sm-btn .sm-ico { width: 1.3em; height: 1.3em; }
.sm-btn-arrow-end .sm-ico { position: absolute; right: 1.3em; }
.sm-btn[disabled] { cursor: default; }
.sm-or { display: flex; align-items: center; gap: .8em; color: var(--ink-2); font-size: .9em; }
.sm-or::before, .sm-or::after { content: ""; flex: 1; height: 1px; background: rgba(200, 212, 240, .22); }
.sm-btn-outline { display: flex; align-items: center; justify-content: center; gap: .6em; height: 3.3em; border-radius: .6em;
  border: 1px solid rgba(200, 212, 240, .35); background: rgba(5, 13, 32, .35); color: var(--ink); text-decoration: none; }
.sm-btn-outline:hover { border-color: var(--gold-2); text-decoration: none; }
.sm-btn-outline .sm-ico { width: 1.35em; height: 1.35em; }
.sm-note { margin: 0; text-align: center; font-size: .92em; color: var(--ink-2); }
.sm-note .sm-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }
.sm-shortcuts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: .5em 0 0; padding: 1em 0 0;
  border-top: 1px solid rgba(200, 212, 240, .14); }
.sm-shortcuts li { display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .76em; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; }
.sm-shortcuts li + li { border-left: 1px solid rgba(200, 212, 240, .2); }
.sm-shortcuts .sm-ico { width: 2.5em; height: 2.5em; color: #f4f6fb; }
.sm-flashes { display: flex; flex-direction: column; gap: .4em; }
.sm-flash { padding: .6em .85em; border-radius: .55em; border: 1px solid; font-size: .9em; }
.sm-flash-error { background: rgba(160, 30, 40, .38); border-color: rgba(255, 120, 120, .45); }
.sm-flash-success { background: rgba(20, 120, 80, .34); border-color: rgba(120, 230, 170, .4); }
.sm-flash-info { background: rgba(40, 80, 160, .38); border-color: rgba(140, 180, 255, .4); }
.sm-field { display: flex; flex-direction: column; gap: .3em; }
.sm-field label { font-size: .9em; color: var(--ink-2); }
.sm-help { font-size: .8em; color: rgba(205, 214, 234, .66); }
.sm-preview-note { margin: 0; text-align: center; font-size: .8em; color: var(--ink-2); }
.sm-preview-note a { color: var(--gold-1); }

/* stranice bez slike u kartici (nova lozinka, prvo postavljanje, registracija) */
.sm-mobile-logo .sm-logo { display: block; width: min(230px, 70%); margin: 0 auto 4px; }
.sm-free .sm-hero, .sm-free .sm-title-mobile { display: none; }
.sm-free .sm-stage::before { inset: -20px; filter: blur(4px) brightness(.42); }
.sm-free .sm-frame { justify-content: center; padding: 32px 0; }
.sm-free .sm-card { margin: 0 auto; }
.sm-free .sm-card-wide { width: min(520px, calc(100% - 32px)); }
.sm-free .sm-logo { display: block; width: 190px; max-width: 60%; margin: 0 auto 6px; }
.sm-free .sm-title { display: block; }

/* veliki zaslon: prava kartica točno prekriva karticu nacrtanu na dizajnu */
@media (min-width: 1100px) and (min-height: 620px) {
  .sm-login .sm-stage { display: grid; place-items: center; }
  .sm-login .sm-frame { display: block; width: min(100vw, calc(100vh * 1672 / 941)); aspect-ratio: 1672 / 941; min-height: 0; padding: 0;
    background: var(--art) center / 100% 100% no-repeat; container-type: inline-size; }
  .sm-login .sm-hero, .sm-login .sm-title-mobile, .sm-login .sm-lead-mobile { display: none; }
  .sm-login .sm-card { position: absolute; left: var(--l); top: var(--t); width: var(--w); min-height: var(--h); margin: 0;
    font-size: 1.0167cqw; padding: 2em 2.55em; gap: .95em; border-radius: 1.85em; justify-content: center;
    background: linear-gradient(180deg, rgba(14, 29, 62, .9), rgba(7, 16, 38, .93)); }
  .sm-login .sm-head { gap: .3em; margin-bottom: .35em; }
  .sm-login .sm-logo { display: block; width: var(--logo-w); max-width: 100%; margin: 0 auto .2em; }
  .sm-login .sm-title { display: block; margin: .25em 0 0; font-size: 1.5em; }
  .sm-login .sm-align-left .sm-head { align-items: flex-start; text-align: left; }
  .sm-login .sm-align-left .sm-logo { margin-left: -.2em; }
  .sm-login .sm-card.sm-gold { border-color: rgba(232, 196, 110, .6);
    box-shadow: 0 0 34px rgba(230, 180, 80, .22), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .sm-login .sm-card.sm-glass { background: linear-gradient(180deg, rgba(14, 29, 62, .8), rgba(7, 16, 38, .86)); }
}

/* --- korisnici, uloge i prava ----------------------------------------------------------------- */
.nowrap { white-space: nowrap; }
.narrow-wide { max-width: 860px; }
.role { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.role-master_admin { background: linear-gradient(180deg, #f6dc96, #ddb057); color: #13203d; border-color: #c9a24a; }
.role-administrator { background: #13234a; color: #f1f4fb; border-color: #13234a; }
.role-direktor, .role-vlasnik { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.role-spremacica { background: var(--success-soft); color: var(--success); border-color: transparent; }
.role-help { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .6rem 0 0; }
.role-help dt { font-weight: 600; }
.role-help dd { margin: 0; color: var(--muted); }
.perm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem 1.2rem; }
.perm-group { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .8rem .7rem; margin: 0; min-width: 0; }
.perm-group legend { font-weight: 600; padding: 0 .3rem; }
.perm { display: flex; gap: .55rem; align-items: flex-start; padding: .3rem 0; font-size: .92rem; }
.perm input { margin-top: .2rem; }
.perm-denied span:first-of-type { color: var(--warning); }
.perm-matrix th, .perm-matrix td { vertical-align: middle; }
.perm-matrix .center { text-align: center; }
.perm-matrix-group th { background: var(--surface-2); text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.perm-matrix td.perm-changed { background: var(--warning-soft); }
.perm-matrix input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
.perm-list { list-style: none; padding: 0; margin: .5rem 0; columns: 2 220px; }
.perm-list li { break-inside: avoid; padding: .1rem 0; }
.perm-list li.no { color: var(--muted); }
.perm-list li.yes { color: var(--text); }

/* --- izgled -------------------------------------------------------------------------------------- */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: .8rem 0 1rem; }
.look-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .5rem .5rem .7rem; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.look-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.look-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.look-card input { position: absolute; top: .9rem; left: .9rem; width: 1.2rem; height: 1.2rem; accent-color: var(--gold); }
.look-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.look-name { font-weight: 600; }
.theme-options, .recipient-groups { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .8rem; }
.chip-check { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .92rem; }
.chip-check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* --- poruke ------------------------------------------------------------------------------------- */
.recipients { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .9rem .8rem; margin: 0 0 1rem; }
.recipients legend { font-weight: 600; padding: 0 .3rem; }
.recipient-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem 1rem; }
.recipient-role .field-check { margin: .15rem 0; }
.threads li.unread strong { color: var(--text); }
.threads li.unread { background: color-mix(in srgb, var(--gold-soft) 35%, transparent); }
.list li.unread .list-main > strong:first-child::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem;
  border-radius: 50%; background: var(--gold); vertical-align: .12em; }
.chat { display: flex; flex-direction: column; gap: .7rem; margin: 0 0 1rem; }
.chat-msg { max-width: min(680px, 88%); padding: .6rem .85rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.chat-msg.new { border-color: var(--gold); }
.chat-msg header { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .2rem; }
.chat-msg header time { margin-left: auto; }
.reply textarea { min-height: 5rem; }
.messages-peek { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }

/* --- boje programa (Postavke → Izgled) ------------------------------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .7rem; margin: .8rem 0; }
.brand-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: .7rem .75rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.brand-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.brand-card input { position: absolute; top: .65rem; right: .65rem; width: 1.05rem; height: 1.05rem; }
.brand-swatches { display: flex; height: 28px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(16, 24, 40, .16); margin-right: 1.6rem; }
.brand-swatches span { flex: 1; }
.brand-swatches span:first-child { flex: 2; }
.brand-card-name { font-weight: 600; font-size: .9rem; }
.brand-custom { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin: .2rem 0 1rem; }
.brand-color { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.brand-color input { width: 44px; height: 34px; min-height: 0; padding: 2px; cursor: pointer; }
.brand-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-width: 560px;
  --bp-primary: var(--primary); --bp-on-primary: var(--on-primary); --bp-nav: #0b1a3a; --bp-nav-ink: #e9eefb; --bp-accent: var(--accent); --bp-on-accent: var(--on-accent); }
.bp-bar { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; background: var(--bp-nav); color: var(--bp-nav-ink); font-size: .85rem; }
.bp-logo { width: 54px; height: 20px; border-radius: 5px; background: url("../img/brand-wordmark.webp") center / contain no-repeat #0b1a3a; margin-right: .4rem; }
.bp-link { padding: .25rem .55rem; border-radius: 6px; opacity: .85; }
.bp-active { opacity: 1; box-shadow: inset 0 -2px 0 var(--bp-accent); background: color-mix(in srgb, var(--bp-accent) 18%, transparent); }
.bp-pill { margin-left: auto; min-width: 1.4em; text-align: center; border-radius: 1em; background: var(--bp-accent); color: var(--bp-on-accent); font-weight: 700; font-size: .75rem; }
.bp-body { padding: .8rem .7rem; background: var(--bg); display: flex; gap: 1rem; align-items: center; }
.bp-btn { padding: .4rem .8rem; border-radius: 8px; background: var(--bp-primary); color: var(--bp-on-primary); font-weight: 600; font-size: .9rem; }
.bp-a { color: var(--bp-primary); text-decoration: underline; }

/* --- cijene smještaja i kanali ------------------------------------------------------------------ */
.rates-table th { white-space: normal; vertical-align: bottom; }
.rates-table td { vertical-align: middle; }
.input-price { width: 104px; min-height: 36px; padding: .35rem .5rem; text-align: right; margin-left: auto; display: block; }
.input-color { width: 64px; height: 40px; padding: 3px; cursor: pointer; }
.season-form { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.season-form h3 { margin-top: .5rem; }
.quote-box { margin: -.35rem 0 .85rem; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--info-soft);
  font-size: .88rem; }
.quote-box.warn { background: var(--warning-soft); color: var(--warning); }
.quote-box[hidden] { display: none; }
.price-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .4rem; padding: .55rem .75rem;
  border-radius: var(--radius-sm); background: var(--info-soft); font-size: .9rem; }
.price-suggest .btn { margin-left: auto; }
.cal-bar .bar-tag { flex: none; display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .25em;
  border-radius: 4px; background: rgba(255, 255, 255, .26); font-size: .66rem; font-weight: 800; letter-spacing: .02em; }
.legend .chip { cursor: default; }