/* Booking system: room colours, tabs, segmented choices, month calendar, report charts. Loaded on every page via
   partials/head.php (small, and the booking pages use several layouts). */

/* ---------- Room colours (categorical slots 1-8, validated for CVD on the card surface in both themes) ---------- */
.rc-0 { --rc: #94a3b8; } .rc-1 { --rc: #2a78d6; } .rc-2 { --rc: #eb6834; } .rc-3 { --rc: #1baf7a; } .rc-4 { --rc: #eda100; }
.rc-5 { --rc: #e87ba4; } .rc-6 { --rc: #008300; } .rc-7 { --rc: #6250d6; } .rc-8 { --rc: #e34948; }
html[data-theme="dark"] .rc-0 { --rc: #64748b; } html[data-theme="dark"] .rc-1 { --rc: #3987e5; } html[data-theme="dark"] .rc-2 { --rc: #d95926; }
html[data-theme="dark"] .rc-3 { --rc: #199e70; } html[data-theme="dark"] .rc-4 { --rc: #c98500; } html[data-theme="dark"] .rc-5 { --rc: #d55181; }
html[data-theme="dark"] .rc-7 { --rc: #9085e9; } html[data-theme="dark"] .rc-8 { --rc: #e66767; }

/* ---------- Tabs of the booking system ---------- */
.booking-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; border-bottom: 1px solid #e2e8f0; padding-bottom: .6rem; }
.booking-tab { padding: .45rem .85rem; border-radius: .5rem; font-size: .875rem; color: #475569; transition: background .15s, color .15s; }
.booking-tab:hover { background: #f1f5f9; color: #0f172a; }
.booking-tab.is-active { background: #e0f2fe; color: #0369a1; font-weight: 600; }
.booking-tab-cta { margin-left: auto; }
html[data-theme="dark"] .booking-tabs { border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .booking-tab { color: #94a3b8; }
html[data-theme="dark"] .booking-tab:hover { background: rgba(148, 163, 184, .08); color: #f1f5f9; }
html[data-theme="dark"] .booking-tab.is-active { background: rgba(56, 189, 248, .15); color: #7dd3fc; }

/* ---------- Segmented choice (used / not used, onsite / online) ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: block; padding: .7rem 1rem; text-align: center; font-size: .9rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #f8fafc; color: #334155; transition: background .15s, border-color .15s, color .15s; }
.seg-opt:hover span { border-color: #0284C7; }
.seg-opt input:checked + span { background: #0284C7; border-color: #0284C7; color: #fff; font-weight: 600; }
.seg-opt input:focus-visible + span { outline: 2px solid #0284C7; outline-offset: 2px; }
html[data-theme="dark"] .seg-opt span { background: #0b1222; border-color: rgba(148, 163, 184, .26); color: #cbd5e1; }
html[data-theme="dark"] .seg-opt:hover span { border-color: #38bdf8; }
html[data-theme="dark"] .seg-opt input:checked + span { background: #0284C7; border-color: #38bdf8; color: #fff; }

/* ---------- Month calendar (assets/js/booking-month.js) ---------- */
.mcal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mcal-title { min-width: 11rem; text-align: center; font-size: 1.15rem; font-weight: 600; color: #0f172a; }
.mcal-stamp { margin-left: auto; font-size: .75rem; color: #64748b; }
.mcal-stamp.is-error { color: #be123c; }
.mcal-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .9rem 0; padding: 0; list-style: none; font-size: .78rem; color: #475569; }
.mcal-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mcal-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 999px; background: var(--rc); flex: none; }
.mcal-dash { display: inline-block; width: 1.2rem; height: .7rem; border: 1.5px dashed #64748b; border-radius: .2rem; }
.mcal-grid { border: 1px solid #e2e8f0; border-radius: .75rem; overflow: hidden; }
.mcal-head, .mcal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mcal-head { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.mcal-dow { padding: .5rem; text-align: center; font-size: .8rem; font-weight: 600; color: #475569; }
.mcal-dow.is-weekend { color: #94a3b8; }
.mcal-cell { position: relative; display: flex; flex-direction: column; gap: .25rem; min-height: 6.6rem; padding: .35rem; text-align: left; background: #fff; border: 0; border-right: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; cursor: pointer; transition: background .15s; font: inherit; color: inherit; }
.mcal-cell:nth-child(7n) { border-right: 0; }
.mcal-cell:hover { background: #f8fafc; }
.mcal-cell.is-other { background: #fafbfc; }
.mcal-cell.is-other .mcal-num { color: #cbd5e1; }
.mcal-cell.is-past .mcal-chips { opacity: .7; }
.mcal-cell.is-selected { box-shadow: inset 0 0 0 2px #0284C7; z-index: 1; }
.mcal-cell:focus-visible { outline: 2px solid #0284C7; outline-offset: -2px; }
.mcal-num { align-self: flex-end; display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #334155; }
.mcal-cell.is-today .mcal-num { background: #0284C7; color: #fff; }
.mcal-chips { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.mcal-chip { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: .12rem .4rem; border-radius: .3rem; font-size: .7rem; line-height: 1.35; color: #0f172a; background: color-mix(in srgb, var(--rc) 16%, #fff); border-left: 3px solid var(--rc); }
.mcal-chip b { font-weight: 600; }
.mcal-chip.is-pending { background: transparent; border: 1.5px dashed var(--rc); border-left: 3px solid var(--rc); }
.mcal-chip.is-mine { box-shadow: inset 0 0 0 1px var(--rc); }
.mcal-more { font-size: .7rem; font-weight: 600; color: #0369a1; padding-left: .2rem; }
.mcal-count { display: none; }
.mcal-detail { margin-top: 1.1rem; }
.mcal-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.mcal-detail-head h3 { font-size: 1rem; font-weight: 600; color: #0f172a; }
.mcal-list { margin: .7rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.mcal-item { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .75rem; align-items: start; padding: .7rem .9rem; border: 1px solid #e2e8f0; border-left: 4px solid var(--rc); border-radius: .6rem; background: #fff; }
.mcal-item.is-pending { border-left-style: dashed; }
.mcal-time { font-size: .85rem; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.mcal-room { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: #0f172a; }
.mcal-what { margin-top: .15rem; font-size: .85rem; color: #334155; }
.mcal-who { margin-top: .1rem; font-size: .75rem; color: #64748b; }
.mcal-status { font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.mcal-status.is-approved { background: #d1fae5; color: #047857; }
.mcal-status.is-pending { background: #fef3c7; color: #b45309; }
.mcal-empty { padding: 1rem; text-align: center; font-size: .85rem; color: #94a3b8; border: 1px dashed #cbd5e1; border-radius: .6rem; }
@media (max-width: 767px) {
  .mcal-cell { min-height: 3.4rem; align-items: center; }
  .mcal-num { align-self: center; }
  .mcal-chips { display: none; }
  .mcal-count { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: #0284C7; color: #fff; font-size: .65rem; font-weight: 700; }
  .mcal-item { grid-template-columns: 1fr; }
  .mcal-title { min-width: 0; flex: 1; }
}
html[data-theme="dark"] .mcal-title, html[data-theme="dark"] .mcal-detail-head h3, html[data-theme="dark"] .mcal-time, html[data-theme="dark"] .mcal-room { color: #f1f5f9; }
html[data-theme="dark"] .mcal-legend, html[data-theme="dark"] .mcal-dow { color: #94a3b8; }
html[data-theme="dark"] .mcal-grid { border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .mcal-head { background: #0f1a2e; border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .mcal-cell { background: #131e35; border-color: rgba(148, 163, 184, .1); }
html[data-theme="dark"] .mcal-cell:hover { background: #18243e; }
html[data-theme="dark"] .mcal-cell.is-other { background: #0f1a2e; }
html[data-theme="dark"] .mcal-cell.is-other .mcal-num { color: #475569; }
html[data-theme="dark"] .mcal-num { color: #cbd5e1; }
html[data-theme="dark"] .mcal-cell.is-selected { box-shadow: inset 0 0 0 2px #38bdf8; }
html[data-theme="dark"] .mcal-chip { color: #e2e8f0; background: color-mix(in srgb, var(--rc) 22%, #131e35); }
html[data-theme="dark"] .mcal-chip.is-pending { background: transparent; }
html[data-theme="dark"] .mcal-more { color: #7dd3fc; }
html[data-theme="dark"] .mcal-item { background: #0f1a2e; border-color: rgba(148, 163, 184, .16); border-left-color: var(--rc); }
html[data-theme="dark"] .mcal-what { color: #cbd5e1; }
html[data-theme="dark"] .mcal-who { color: #94a3b8; }
html[data-theme="dark"] .mcal-status.is-approved { background: rgba(52, 211, 153, .15); color: #6ee7b7; }
html[data-theme="dark"] .mcal-status.is-pending { background: rgba(251, 191, 36, .15); color: #fcd34d; }
html[data-theme="dark"] .mcal-empty { border-color: rgba(148, 163, 184, .26); }

/* ---------- Booking report (admin/reports/bookings) ---------- */
.rpt-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.rpt-kpi .lbl { font-size: .8rem; color: #64748b; }
.rpt-kpi .val { margin-top: .25rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #0f172a; }
.rpt-kpi .sub { margin-top: .15rem; font-size: .75rem; color: #64748b; }
.rpt-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt-grid .wide { grid-column: span 2; }
.rpt-chart h2 { font-size: 1rem; font-weight: 600; color: #0f172a; }
.rpt-chart .sub { margin-top: .1rem; font-size: .78rem; color: #64748b; }
.rpt-canvas { position: relative; height: 18rem; margin-top: .8rem; }
.rpt-canvas.tall { height: 22rem; }
.rpt-empty { display: grid; place-items: center; height: 100%; font-size: .85rem; color: #94a3b8; }
.rpt-kpi .val.is-text { font-size: 1.05rem; line-height: 1.45; }
.rpt-summary { cursor: pointer; font-size: .8rem; color: #64748b; }
html[data-theme="dark"] .rpt-summary { color: #94a3b8; }
.rpt-table th { padding: .3rem 1rem .3rem 0; font-size: .75rem; font-weight: 600; color: #64748b; }
.rpt-table td { padding: .3rem 1rem .3rem 0; border-top: 1px solid #eef2f7; }
.rpt-table td + td { font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .rpt-table th { color: #94a3b8; }
html[data-theme="dark"] .rpt-table td { border-color: rgba(148, 163, 184, .12); }
@media (max-width: 1023px) { .rpt-grid { grid-template-columns: 1fr; } .rpt-grid .wide { grid-column: span 1; } }
html[data-theme="dark"] .rpt-kpi .val, html[data-theme="dark"] .rpt-chart h2 { color: #f1f5f9; }
html[data-theme="dark"] .rpt-kpi .lbl, html[data-theme="dark"] .rpt-kpi .sub, html[data-theme="dark"] .rpt-chart .sub { color: #94a3b8; }