/* Booking Hub v32 — unified UI/UX and verified typography */
:root {
  --hub-font: "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --hub-canvas: #f5f7fb;
  --hub-surface: #ffffff;
  --hub-surface-subtle: #f8fafc;
  --hub-line: #dfe4ec;
  --hub-line-strong: #cbd3df;
  --hub-text: #172033;
  --hub-text-secondary: #526076;
  --hub-text-muted: #77849a;
  --hub-blue: #1769d2;
  --hub-blue-soft: #eaf2ff;
  --hub-focus: #0b57d0;
  --hub-radius-sm: 7px;
  --hub-radius: 10px;
  --hub-shadow-float: 0 16px 42px rgba(23,32,51,.16), 0 2px 8px rgba(23,32,51,.08);
}

html { font-size: 16px; }
body {
  font-family: var(--hub-font) !important;
  font-weight: 400;
  color: var(--hub-text);
  background: var(--hub-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: var(--hub-font) !important; }
button, select { font-weight: 500; }
input, textarea { font-weight: 400; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--hub-focus); outline-offset: 2px; }

/* Main Booking Hub — the compiled screen uses inline layout styles, so these
   rules establish a consistent typographic and interaction layer safely. */
#root { color: var(--hub-text); font-family: var(--hub-font); }
#root > div:not(.hub-login) { background: var(--hub-canvas) !important; }
#root button {
  min-height: 34px;
  font-weight: 500 !important;
  letter-spacing: 0;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
#root button:hover:not(:disabled) { border-color: var(--hub-line-strong) !important; }
#root button:active:not(:disabled) { transform: translateY(1px); }
#root input, #root select, #root textarea { color: var(--hub-text) !important; }
#root [style*="font-weight: 650"] { font-weight: 600 !important; }
#root [style*="font-weight: 600"] { font-weight: 600 !important; }
#root [style*="font-weight: 500"] { font-weight: 500 !important; }
#root [style*="font-weight: 400"] { font-weight: 400 !important; }

/* Enquiry daily sheet */
.app { background: var(--hub-surface); }
.topbar.clean {
  min-height: 52px;
  padding-inline: 16px;
  border-color: var(--hub-line);
  box-shadow: 0 1px 0 rgba(23,32,51,.02);
}
.brandhome { gap: 8px; }
.brandhome strong { color: var(--hub-text); font-size: 15px; font-weight: 600; }
.brandhome span { color: var(--hub-text-secondary); font-weight: 400; }
.brandhome .version { color: var(--hub-text-muted); }
.navtab.active { color: var(--hub-blue); font-weight: 600; }
.headicon, .btn, .ownerselect, .datecontrol, .filter, .bulkselect {
  border-radius: var(--hub-radius-sm);
}
.headicon, .btn { min-height: 34px; font-weight: 500; }
.headicon:hover, .btn:hover:not(:disabled) { background: var(--hub-surface-subtle); }
.btn.primary { background: var(--hub-blue); border-color: var(--hub-blue); font-weight: 600; }
.daybar.clean { min-height: 54px; padding: 8px 16px; border-color: var(--hub-line); }
.daybar.clean .sheettitle strong { color: var(--hub-text); font-size: 15px; font-weight: 600; }
.daybar.clean .sheettitle span { color: var(--hub-text-muted); font-size: 12px; font-weight: 400; }
.datecontrol, .ownerselect { height: 34px; border-color: var(--hub-line-strong); }
.datecontrol input, .ownerselect { font-size: 13px; font-weight: 500; }
.sheetbar { min-height: 44px; padding: 5px 16px; background: var(--hub-surface-subtle); border-color: var(--hub-line); }
.filtersummary, .status, .selectedcount { font-size: 12px; font-weight: 400; }
.grid { font-size: 13px; }
.grid th {
  height: 38px;
  padding: 8px 10px;
  color: var(--hub-text-secondary);
  background: #f7f9fc;
  border-color: var(--hub-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.grid td { height: 38px; border-color: #e8ecf2; }
.data-cell { height: 38px; padding: 8px 10px; font-weight: 400; }
.name, .quickadd { font-weight: 600; }
.pill, .dueflag.overdue, .dueflag.today { font-weight: 600; }
.quickrow td { background: #f9fbff !important; }
.quickinput { height: 34px; font-size: 13px; font-weight: 400; }
.iconbtn { min-height: 30px; font-size: 12px; font-weight: 500; }
.modal { border: 1px solid var(--hub-line); border-radius: 14px; box-shadow: var(--hub-shadow-float); }
.modal h3 { color: var(--hub-text); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.modal h4, .field label, .queuepickerhead strong { font-weight: 600; }
.modal p, .field label, .settingsnote { font-size: 13px; }
.field input, .field textarea, .field select { min-height: 38px; border-color: var(--hub-line-strong); font-size: 14px; }
.contextmenu { border-color: var(--hub-line); border-radius: 10px; box-shadow: var(--hub-shadow-float); }
.contextmenu button { min-height: 34px; font-size: 13px; font-weight: 500; }
.toast { border-radius: 9px; font-size: 13px; font-weight: 500; }
.footerhint { font-size: 11px; }

/* TWI Forms */
.shell { color: var(--hub-text); }
.brand { font-size: 16px; font-weight: 600; }
.brand span { font-weight: 400; }
.title, .hero h1 { font-weight: 600; }
.field label, .data-cell label { font-weight: 600; }
.admission-name { font-weight: 500; }
.section, .form-card, .queuepicker { border-color: var(--hub-line); box-shadow: 0 1px 3px rgba(23,32,51,.04); }
.section-title, .form-name { font-weight: 600; }
.badge { font-weight: 600; }

@media (max-width: 760px) {
  #root button { min-height: 38px; }
  .topbar.clean { min-height: 50px; padding-inline: 8px; }
  .daybar.clean { padding: 7px 8px; }
  .sheetbar { padding-inline: 8px; }
  .grid { font-size: 12.5px; }
  .grid th { font-size: 12px; }
  .grid td, .data-cell { height: 40px; }
  .quickinput, .editinput, .editselect { font-size: 16px; }
  .modal h3 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}