:root{
  --bg:#f5f6f8;
  --card:#ffffff;
  --text:#111;
  --muted:#666;
  --border:#e6e6e9;
  --primary:#2563eb;
  --danger:#dc2626;
  --success:#16a34a;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--text)}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:18px}
.container.narrow{max-width:860px}
.page{min-height:100vh;background-size:cover;background-position:center}

.card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:16px}
.row{display:flex; align-items:center}
.row.space-between{justify-content:space-between}
.row.gap{gap:10px}
.row.wrap{flex-wrap:wrap}
.inline{display:inline}
.mt{margin-top:12px}
.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--border); margin:14px 0}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.65);backdrop-filter:blur(8px)}
body.dark .topbar{background:rgba(15,23,42,.75)}
.topbar .left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar .right{display:flex; align-items:center; gap:10px}
.topbar.simple{border:none;background:transparent;padding:0 0 14px 0}
.brand{font-weight:800}

.btn{border:1px solid var(--border); background:transparent; color:var(--text); padding:8px 12px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.btn.primary{background:var(--primary); color:white; border-color:transparent}
.btn.danger{background:var(--danger); color:white; border-color:transparent}
.btn.ghost{background:transparent}
.alert{padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(0,0,0,.03)}
.alert.danger{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08)}
.alert.success{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

label{display:block;margin-top:10px;font-weight:600}
input,select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text)}

/* Form controls that should not be full width */
input[type=checkbox], input[type=radio]{width:auto}

/* Privacy consent row (guest booking form) */
.privacy-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.privacy-row input[type=checkbox]{width:16px;height:16px;margin:0;flex:0 0 auto}
.privacy-row span{font-weight:600}
.chip{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:999px; margin-top:10px}

.hero{position:relative;background-size:cover;background-position:center}
.hero::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,var(--hero-fade,.45));border-radius:inherit}
.hero-content{position:relative;z-index:1}
.hero h1{margin:0;font-size:26px}
.hero p{margin:8px 0 0 0}

.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}
.cal-head{font-weight:700;color:var(--muted);text-align:center}
.cal-cell{border:1px solid var(--border);border-radius:14px;min-height:64px;background:rgba(22,163,74,.08);cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-end;padding:8px}
.cal-cell .d{font-weight:700}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.past{opacity:.45;cursor:not-allowed}
.cal-cell.partial{background:linear-gradient(135deg, rgba(22,163,74,.08) 0%, rgba(22,163,74,.08) 60%, rgba(22,163,74,.22) 60%, rgba(22,163,74,.22) 75%, rgba(22,163,74,.08) 75%)}
.cal-cell.vacation{background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.35)}

#timeList{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}
.time-btn{padding:10px 12px;border-radius:12px;border:1px solid var(--border);cursor:pointer;background:transparent}
.time-btn.free{background:rgba(22,163,74,.08)}
.time-btn.busy{background:rgba(220,38,38,.08)}

.today-list{display:flex;flex-direction:column;gap:10px}
.today-item{display:flex;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.today-item.past{background:rgba(22,163,74,.08)}
.today-item.future{background:rgba(234,179,8,.10)}

.pending-list{display:flex;flex-direction:column;gap:10px}
.pending-item{border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.pending-item .meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pending-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.table .tr{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.table .tr.head{border-top:none;color:var(--muted);font-weight:700}

.bang{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:999px;background:var(--danger);color:#fff;font-weight:800;font-size:12px;animation:blink 1s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* Compact checkboxes */
.chip.compact{padding:6px 10px;font-size:13px}
.chip.compact input[type=checkbox]{width:16px;height:16px;transform:translateY(1px)}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);padding:18px;z-index:999}
.modal-card{width:min(520px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px}

/* Keep procedure rows on one line */
.proc-row{flex-wrap:nowrap}
.proc-row input{max-width:100%}

.proc-row > div{display:block}


/* Guest: no free times -> grey */
.calendar[data-moderator="0"] .cal-cell.full{background:rgba(0,0,0,.06);}

.day.off{background:#ffb3b3 !important;}
.day.full{background:#fde68a !important;}

.cal-cell.off{background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.25)}
.cal-cell.full{background:rgba(245,158,11,.22); border-color:rgba(245,158,11,.35)}

.time-grid{display:flex;flex-wrap:wrap;gap:8px}

.stats-grid{display:grid;grid-template-columns:1fr 90px 90px 90px;gap:12px;align-items:center}
.stats-head{padding:8px 0;margin-top:6px}
.stats-row{padding:8px 0}
.t-right{text-align:right}