/* BookingsQ dashboard — Phase 10. Hand-written, no CSS framework. Same
   palette/type family as the public landing page (app/landing/index.html)
   so the marketing site and the product read as one brand, not two. */

:root {
  --bg: #f5f6f0;
  --surface: #ffffff;
  --surface-dim: #eef0e7;
  --border: #e1e4d9;
  --text: #12231f;
  --text-muted: #5f6a61;

  --pine-900: #0d211b;
  --pine-800: #163a2f;
  --pine-700: #1e4b3e;
  --pine-600: #2f6b57;
  --pine-100: #dce9e2;

  --accent: #e2982f;
  --accent-ink: #1d1305;

  --success: #1a9e5c;
  --success-bg: #e4f7ec;
  --warn: #b8860b;
  --warn-bg: #fdf3dc;
  --danger: #d1453b;
  --danger-bg: #fbe9e8;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(13,33,27,.05), 0 6px 18px -10px rgba(13,33,27,.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pine-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; text-wrap: balance; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--pine-900), #0a1a15 88%);
  color: #d9e4dc;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; text-decoration: none; }
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand-mark { flex-shrink: 0; }
.sidebar .brand-text { line-height: 1.2; }
.sidebar .brand-word {
  font-family: "Fraunces", serif; font-weight: 700; font-size: 17px; color: #fff;
  display: flex; align-items: baseline; gap: 1px;
}
.sidebar .brand-word .q { color: var(--accent); }
.sidebar .brand-tag {
  font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .05em;
  color: #8fa79a; text-transform: uppercase;
}

.sidebar .biz-switch {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px; font-size: 12.5px; color: #cfe0d7;
}
.sidebar .biz-switch .dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--pine-600); color: #eaf3ee;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  flex-shrink: 0; font-family: "Fraunces", serif;
}
.sidebar .biz-switch .biz-name { font-weight: 600; color: #fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .biz-switch a { color: #9fb6ab; font-size: 11px; text-decoration: none; }
.sidebar .biz-switch a:hover { color: #fff; text-decoration: underline; }

.nav-group { margin-bottom: 6px; }
.nav-group-label {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .09em;
  color: #6f8b7d; text-transform: uppercase; padding: 12px 10px 6px;
}
.sidebar nav a.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; color: #cbdad0;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.sidebar nav a.nav-item svg { flex-shrink: 0; opacity: .85; }
.sidebar nav a.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar nav a.nav-item.active { background: var(--pine-600); color: #fff; font-weight: 600; }
.sidebar nav a.nav-item.active svg { opacity: 1; }

.sidebar .sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar .sidebar-footer .biz-switch { margin-bottom: 0; }

.main { flex: 1; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 12px 32px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.topbar .crumb { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.topbar .crumb b { color: var(--text); }
.content { padding: 28px 32px 48px; max-width: 1180px; }

/* ---------- topbar: search / icon buttons / user menu ---------- */
.topbar-search {
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px;
  background: var(--surface-dim); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; color: var(--text-muted);
}
.topbar-search svg { flex-shrink: 0; }
.topbar-search input {
  border: none; background: none; padding: 0; width: 100%; font-size: 13px; color: var(--text);
}
.topbar-search input:focus { outline: none; }

.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 9px; color: var(--text-muted);
  background: transparent; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-dim); color: var(--text); text-decoration: none; border-color: var(--border); }
.badge-dot {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-family: "IBM Plex Sans";
}

/* Native <details>/<summary> dropdowns — no JS needed for the bell/user menu. */
.dropdown { position: relative; flex-shrink: 0; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); min-width: 220px; overflow: hidden;
}
.dropdown-panel a, .dropdown-panel .dropdown-item, .dropdown-panel form button {
  display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 13px;
  color: var(--text); background: none; border: none; border-radius: 0; font-weight: 500;
  box-shadow: none;
}
.dropdown-panel a:hover, .dropdown-panel form button:hover { background: var(--surface-dim); text-decoration: none; transform: none; }
.dropdown-panel .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-panel .dropdown-empty { padding: 12px 14px; color: var(--text-muted); font-size: 12.5px; }

.user-menu > summary { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 9px; }
.user-menu > summary:hover { background: var(--surface-dim); }
.user-menu-label { text-align: left; line-height: 1.25; }
.user-menu-label .user-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu-label .user-role { display: block; font-size: 11px; color: var(--text-muted); }
.user-menu > summary svg:last-child { color: var(--text-muted); }

h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 28px 0 10px; font-family: "IBM Plex Sans"; }
.subtitle { color: var(--text-muted); margin: 0 0 22px; font-size: 13.5px; }

/* ---------- cards / tables ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card > h2:first-child { margin-top: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-dim); }

.empty-state { color: var(--text-muted); padding: 28px 0; text-align: center; font-size: 13.5px; }

/* ---------- forms ---------- */
form.stacked { display: flex; flex-direction: column; gap: 13px; max-width: 480px; }
form.inline { display: inline; }

label { font-weight: 600; font-size: 12.5px; display: block; margin-bottom: 4px; color: var(--text); }
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pine-600); outline-offset: 1px; }
input[type="checkbox"] { width: auto; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row label { margin-bottom: 0; }

/* A fixed, non-editable prefix (the login page's "+91") glued to the left
   of an otherwise-normal text input — real user feedback: typing the
   country code by hand every login was unnecessary friction when this
   product only serves one. */
.input-with-prefix { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 7px; background: #fff; overflow: hidden; }
.input-with-prefix:focus-within { outline: 2px solid var(--pine-600); outline-offset: 1px; }
.input-with-prefix .prefix { display: flex; align-items: center; padding: 9px 10px; background: var(--surface-dim); color: var(--text-muted); font-size: 13.5px; border-right: 1px solid var(--border); }
.input-with-prefix input { border: none; border-radius: 0; flex: 1; min-width: 0; }
.input-with-prefix input:focus { outline: none; }

.field-hint { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

/* ---------- buttons ---------- */
button, .btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1.5px solid transparent;
  padding: 9px 17px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); text-decoration: none; color: var(--accent-ink); }
button.secondary, .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
button.secondary:hover, .btn.secondary:hover { border-color: var(--pine-600); color: var(--pine-700); }
button.danger, .btn.danger { background: var(--danger); color: #fff; }
button.pine, .btn.pine { background: var(--pine-700); color: #fff; }

/* ---------- badges ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.badge.ok { background: var(--success-bg); color: var(--success); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.muted { background: var(--surface-dim); color: var(--text-muted); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }

.flash { padding: 11px 15px; border-radius: 8px; margin-bottom: 18px; font-size: 13.5px; }
.flash.error { background: var(--danger-bg); color: var(--danger); }
.flash.success { background: var(--success-bg); color: var(--success); }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 340px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-brand .brand-word { font-family: "Fraunces", serif; font-weight: 700; font-size: 22px; }
.login-brand .brand-word .q { color: var(--accent); }
.login-card { width: 380px; max-width: calc(100vw - 32px); }
.otp-step { background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.otp-step-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--text); }
.otp-step-2 { margin-bottom: 12px; }
.otp-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #fff; font-size: 12.5px; font-weight: 700; flex: none; }
.otp-step-body { margin: 8px 0 12px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.otp-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 8px; background: #1fa855; color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; box-sizing: border-box; }
.otp-wa-btn:hover { background: #178a45; color: #fff; }
.otp-step-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); }


/* ---------- overview: stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start;
}
.stat-tile .stat-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-tile .stat-num { font-family: "Fraunces", serif; font-size: 25px; font-weight: 600; line-height: 1.1; }
.stat-tile .stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.stat-tile.i-pine .stat-icon { background: var(--pine-100); color: var(--pine-700); }
.stat-tile.i-accent .stat-icon { background: #fbead0; color: var(--accent); }
.stat-tile.i-success .stat-icon { background: var(--success-bg); color: var(--success); }
.stat-tile.i-muted .stat-icon { background: var(--surface-dim); color: var(--text-muted); }

/* quick actions */
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.quick-actions a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px 9px 12px; font-size: 13px; font-weight: 600; color: var(--text);
  text-decoration: none; box-shadow: var(--shadow);
  transition: border-color .12s ease, transform .12s ease;
}
.quick-actions a:hover { border-color: var(--pine-600); transform: translateY(-1px); text-decoration: none; }
.quick-actions a .qa-icon {
  width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--pine-100); color: var(--pine-700); flex-shrink: 0;
}

/* two-column overview grid */
.overview-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .overview-grid { grid-template-columns: 1fr; } }

/* bar chart (pure CSS, no library — 7 bars max) */
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar-col .bar {
  width: 100%; max-width: 30px; border-radius: 5px 5px 2px 2px;
  background: var(--pine-100);
  position: relative;
}
.bar-col .bar.has-value { background: var(--pine-600); }
.bar-col .bar-label { font-size: 10.5px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; }
.bar-col .bar-value { font-size: 10px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; }

/* schedule timeline */
.timeline { display: flex; flex-direction: column; }
.timeline-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.timeline-row:last-child { border-bottom: none; }
.timeline-time { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--text-muted); width: 62px; flex-shrink: 0; padding-top: 2px; }
.timeline-dot-col { display: flex; flex-direction: column; align-items: center; width: 10px; flex-shrink: 0; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pine-600); margin-top: 5px; flex-shrink: 0; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 600; }
.timeline-sub { font-size: 12px; color: var(--text-muted); }

/* service tiles (icon substitute for photos — no image assets) */
.service-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.service-tile { text-decoration: none; color: var(--text); }
.service-tile .tile-face {
  aspect-ratio: 4/3; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; color: #fff; font-family: "Fraunces", serif; font-size: 26px; font-weight: 600;
  background-size: cover; background-position: center;
}
.service-tile .tile-name { font-size: 12.5px; font-weight: 600; display: block; }
.service-tile .tile-meta { font-size: 11px; color: var(--text-muted); }
.service-tile .tile-add {
  aspect-ratio: 4/3; border-radius: 10px; border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}

.grow-panel {
  background: linear-gradient(135deg, var(--pine-700), var(--pine-800));
  color: #eaf3ee; border-radius: var(--radius); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.grow-panel h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.grow-panel p { margin: 0; font-size: 13px; color: #cfe0d7; }
.grow-panel .btn { align-self: flex-start; margin-top: 4px; }

.actions-row { display: flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .topbar-search { display: none; } }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }

/* ---------- page head (icon bubble + title, used by every inner page) ---------- */
.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.page-head-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pine-100); color: var(--pine-700);
}
.page-head h1 { margin: 0 0 3px; }
.page-head .subtitle { margin: 0; }
.page-head-action { margin-left: auto; align-self: center; flex-shrink: 0; }

/* ---------- compact stat strip (mini stat chips atop a list page) ---------- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.stat-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 12px 16px; display: flex; align-items: center; gap: 11px;
  min-width: 140px;
}
.stat-chip-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pine-100); color: var(--pine-700);
}
.stat-chip.tone-success .stat-chip-icon { background: var(--success-bg); color: var(--success); }
.stat-chip.tone-warn .stat-chip-icon { background: var(--warn-bg); color: var(--warn); }
.stat-chip.tone-danger .stat-chip-icon { background: var(--danger-bg); color: var(--danger); }
.stat-chip.tone-accent .stat-chip-icon { background: #fbead0; color: var(--accent); }
.stat-chip-num { font-family: "Fraunces", serif; font-size: 19px; font-weight: 600; line-height: 1.1; }
.stat-chip-label { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* ---------- avatar chips (table name cells) ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-family: "Fraunces", serif; font-weight: 600;
  width: 30px; height: 30px; font-size: 13px;
}
.name-thumb { border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell .name-main { font-weight: 600; line-height: 1.3; }
.name-cell .name-sub { font-size: 12px; color: var(--text-muted); line-height: 1.3; }

/* ---------- tab strip (Services/Open Hours/Plans, Bookings' Calendar/List/Subscriptions) ---------- */
/* Folder-style tabs, so they read as buttons you can switch between rather
   than a caption: each tab is a bordered, filled shape that lifts on hover;
   the active one is "open" (white, pine top edge, joined to the line below). */
.tab-strip {
  display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
  overflow-x: auto; scrollbar-width: none;
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-link {
  flex: none; padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--pine-700);
  background: var(--surface-dim); border: 1px solid var(--border); border-bottom: none;
  border-radius: 9px 9px 0 0; margin-bottom: -1px; cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.tab-link:hover {
  background: var(--pine-100); color: var(--pine-900); text-decoration: none;
  box-shadow: inset 0 2px 0 var(--pine-600);
}
.tab-link.active {
  background: var(--surface); color: var(--pine-900); cursor: default;
  box-shadow: inset 0 3px 0 var(--pine-600); border-bottom: 1px solid var(--surface);
}

/* ---------- "+ Add X" button (add_button macro, sits just above its table) ---------- */
.add-btn { display: inline-flex; align-items: center; gap: 7px; }
.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* ---------- small per-row icon actions (archive/expand-hint) ---------- */
.row-actions { display: flex; gap: 4px; align-items: center; }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 7px; }
button.icon-btn.sm { border: 1px solid transparent; }
/* Solid red with a white glyph, at rest — not a pale red-on-pale-pink
   badge. That first attempt (dark red icon on a light pink fill) still
   read as "not visible" once flattened to a real screen/screenshot — the
   contrast between a thin 14px stroke and a barely-tinted background isn't
   reliable at that size. Solid fill + white icon has no such ambiguity at
   any zoom level. Never named class="danger" — see row_actions' comment in
   _ui.html for why that collides with the full-size button style. */
.remove-btn { color: #fff; background: var(--danger); border-color: var(--danger); }
.remove-btn:hover { background: #b23a31; border-color: #b23a31; }
.row-expand-hint { color: var(--text-muted); display: inline-flex; opacity: .6; }

/* ---------- whole-row click-to-expand (_ui.html's row_toggle macro) ---------- */
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--surface-dim); }

/* ---------- Open Hours: rules grouped by day, each as a set of time chips ---------- */
.day-group { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.day-group:last-child { border-bottom: none; }
.day-group-name { width: 90px; flex-shrink: 0; font-weight: 600; padding-top: 6px; }
.day-group-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.time-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12.5px;
}
.time-chip .icon-btn.sm { width: 22px; height: 22px; }
.time-chip.inactive { opacity: .55; }
.day-group-empty { color: var(--text-muted); font-size: 12.5px; padding-top: 6px; }

/* ---------- Bookings calendar (day view: hours down, resources across) ---------- */
.calendar-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.calendar-wrap { overflow-x: auto; }
table.calendar-grid { table-layout: fixed; }
table.calendar-grid th, table.calendar-grid td { border: 1px solid var(--border); vertical-align: top; }
table.calendar-grid th.hour-col, table.calendar-grid td.hour-col {
  width: 64px; font-size: 11.5px; color: var(--text-muted); font-family: "IBM Plex Mono"; white-space: nowrap;
}
table.calendar-grid td { height: 46px; padding: 4px; }
table.calendar-grid th { padding: 8px 10px; background: var(--surface-dim); font-size: 12.5px; }
.cal-booking {
  display: block; border-radius: 6px; padding: 3px 7px; margin-bottom: 3px; font-size: 11.5px;
  background: var(--pine-100); color: var(--pine-800); line-height: 1.35;
}
.cal-booking .cal-pay { display: block; font-size: 10.5px; font-weight: 600; }
.cal-booking.pay-success .cal-pay { color: var(--success); }
.cal-booking.pay-pending .cal-pay, .cal-booking.pay-initiated .cal-pay { color: var(--warn); }

/* ---------- mobile responsiveness (2026-09-19, real user request: "mobile
   dashboard web version is not responsive") ---------- */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  /* .sidebar's own unconditional `display: flex` (defined above, always
     applies at every width) has higher cascade priority than the
     browser's default [hidden] rule regardless of viewport — so without
     this combined selector (higher specificity than `.sidebar` alone),
     the `hidden` attribute this template now sets on #sidebar would have
     no visible effect at any width, mobile included. */
  .sidebar[hidden] { display: none; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 260px; max-width: 82vw;
    box-shadow: 0 0 32px rgba(0,0,0,.35); overflow-y: auto;
  }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 55; background: rgba(13,33,27,.45);
  }
  /* Only shown while the sidebar itself is open — plain CSS, no extra JS
     state beyond the one `hidden` attribute dashboard.js already toggles. */
  #sidebar:not([hidden]) ~ .sidebar-backdrop { display: block; }

  .topbar { padding: 10px 16px; gap: 10px; }
  .topbar .crumb { display: none; }
  .content { padding: 16px 14px 40px; }
  .page-head { flex-wrap: wrap; }
  .stat-strip { gap: 8px; }
  .stat-chip { min-width: 0; flex: 1 1 45%; }

  /* Data tables collapse into stacked "cards" (one per row, each cell
     labelled by its column header — dashboard.js copies each <th>'s text into
     the matching cells' data-label) instead of scrolling sideways. The
     calendar grid is a genuine 2-D grid and keeps scrolling. */
  .card { padding: 14px; }
  table:not(.calendar-grid) { display: block; }
  table:not(.calendar-grid) thead { display: none; }
  table:not(.calendar-grid) tbody { display: block; }
  table:not(.calendar-grid) tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  table:not(.calendar-grid) tr:last-child { border-bottom: none; }
  table:not(.calendar-grid) tr[hidden] { display: none; }
  table:not(.calendar-grid) td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    border: none; padding: 4px 2px; text-align: right; white-space: normal;
  }
  table:not(.calendar-grid) td[data-label]::before {
    content: attr(data-label); flex: none; color: var(--text-muted); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; text-align: left;
  }
  table:not(.calendar-grid) td[colspan] { display: block; text-align: left; }
  table:not(.calendar-grid) .row-expand-hint { display: none; }
  table.calendar-grid { display: block; overflow-x: auto; white-space: nowrap; }
}
.cal-booking.pay-failed .cal-pay { color: var(--danger); }

/* Sales / bills (pilot item #10): quantity grids and inline money inputs. */
form.stacked.wide { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qty-cell { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.money-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.money-row > input, .money-row > select { flex: 1 1 110px; min-width: 0; }
form.inline.money-row { display: inline-flex; }
form.inline.money-row > input { max-width: 90px; }

/* Bill page: two columns — the bill + payments on the left, the actions
   (add items, discount, record payment) on the right; one column on phones. */
.bill-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bill-col { display: flex; flex-direction: column; min-width: 0; }
.bill-col > .card { margin-bottom: 18px; }
.bill-layout form.stacked { max-width: none; }
/* Labelled fields side by side, with real gaps (never glued together). */
.field-row { display: grid; gap: 10px; align-items: end; }
.field-row > div { min-width: 0; }
.field-row.row-item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 72px; }
.field-row.row-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field-row.row-discount { grid-template-columns: minmax(0, 1fr) 90px; }
@media (max-width: 980px) {
  .bill-layout { grid-template-columns: minmax(0, 1fr); }
}
.field-row + .field-row { margin-top: 8px; }

/* Reports: month picker + clickable totals that open their detail. */
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.report-head select { width: auto; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.report-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
.report-tile:hover { border-color: var(--pine-600); }
.report-tile .stat-num { font-size: 20px; }
.detail-table { margin: 4px 0 6px; background: var(--surface-dim); border-radius: 7px; }
.detail-table td { font-size: 12.5px; }
.day-picks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.day-picks .checkbox-row { font-weight: 500; }
.report-tile.active { border-color: var(--pine-600); background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--pine-600); }
.report-tile.active .stat-label { color: var(--pine-700); }

/* Settings: cards flow into two columns on wide screens (2026-09-27: "use the
   space"); one column on narrow ones. */
.settings-grid { columns: 2 440px; column-gap: 18px; }
.settings-grid > .card { break-inside: avoid; display: inline-block; width: 100%; }
.settings-grid form.stacked { max-width: none; }
.detail-table th { font-size: 10.5px; }
.reconcile { margin: 12px 2px 0; font-size: 13px; color: var(--text-muted); }
.reconcile b { color: var(--text); }
.paid-line { white-space: nowrap; }
.paid-line + .paid-line { margin-top: 2px; }