/* ---------------------------------------------------------------------------
   Settings > Calendars, the editor, Share, Troubleshoot, and the booking
   widget — GHL's calendar screens (GHL-TEARDOWN-CALENDARS.md). Uses the app
   tokens from app.css; `--ghl-blue` is GHL's own primary (#155eef-ish), which
   the calendar screens use for selected tabs and primary actions.
--------------------------------------------------------------------------- */
:root {
  --ghl-blue: #155eef;
  --ghl-blue-soft: #eff4ff;
  --ghl-border: #d0d5dd;
  --ghl-text-2: #475467;
}

.gcs { display: flex; flex-direction: column; gap: 0; }
.gcs-toptabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); background: var(--surface); padding: 0 16px; margin: -4px 0 16px; border-radius: var(--radius) var(--radius) 0 0; }
.gcs-toptitle { font-size: 18px; font-weight: 650; margin-right: 18px; padding: 14px 0; }
.gcs-toptab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 16px 12px 13px; color: var(--ghl-text-2); font-weight: 550; }
.gcs-toptab:hover { color: var(--text); }
.gcs-toptab.is-on { color: var(--ghl-blue); border-bottom-color: var(--ghl-blue); }
.gcs-body { min-height: 400px; }
.gcs-h1 { font-size: 26px; font-weight: 650; margin: 8px 0 18px; letter-spacing: -0.01em; }

/* tabs inside panes */
.gcs-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.gcs-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.gcs-tab.is-on { color: var(--ghl-blue); border-bottom-color: var(--ghl-blue); }

/* form kit */
.gcs-field { margin-bottom: 16px; min-width: 0; }
.gcs-label { font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.gcs-info { color: var(--dim); font-size: 12px; cursor: help; font-weight: 400; }
.gcs-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.gcs-input { width: 100%; padding: 9px 12px; border: 1px solid var(--ghl-border); border-radius: 8px; background: #fff; font: inherit; color: var(--text); }
.gcs-input:focus { outline: none; border-color: var(--ghl-blue); box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12); }
textarea.gcs-input { resize: vertical; }
.gcs-code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.gcs-static { background: #f9fafb; color: var(--ghl-text-2); }
.gcs-numunit { display: flex; max-width: 320px; }
.gcs-numunit > .gcs-input:first-child { border-radius: 8px 0 0 8px; }
.gcs-numunit > .gcs-input:last-child, .gcs-numunit > .gcs-unit { border-radius: 0 8px 8px 0; border-left: 0; }
.gcs-num { flex: 1.2; }
.gcs-numunit select { flex: 1; }
.gcs-unit { border: 1px solid var(--ghl-border); padding: 9px 12px; background: #f9fafb; }
.gcs-prefixed { display: flex; }
.gcs-prefixed > span { border: 1px solid var(--ghl-border); border-right: 0; border-radius: 8px 0 0 8px; padding: 9px 12px; background: #f9fafb; color: var(--ghl-text-2); white-space: nowrap; }
.gcs-prefixed > .gcs-input { border-radius: 0 8px 8px 0; }
.gcs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gcs-right { display: flex; justify-content: flex-end; margin-top: 12px; }
.gcs-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.gcs-dim { color: var(--muted); font-size: 13px; }
.gcs-err { color: var(--red); font-size: 12.5px; }
.gcs-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.gcs-subhead { font-weight: 650; margin: 16px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcs-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ghl-blue-soft); color: var(--ghl-blue); }
.gcs-note { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 8px 0 14px; }
.gcs-alert { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 6px 0 10px; }
.gcs-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.gcs-icon { background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; color: var(--ghl-text-2); line-height: 1; }
.gcs-icon:hover:not(:disabled) { background: var(--hover); border-color: var(--line); }
.gcs-icon:disabled { opacity: 0.4; cursor: not-allowed; }

/* toggle */
.gcs-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.gcs-switch input { opacity: 0; width: 0; height: 0; }
.gcs-slider { position: absolute; inset: 0; background: #e4e7ec; border-radius: 999px; transition: background 0.15s; cursor: pointer; }
.gcs-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: transform 0.15s; }
.gcs-switch input:checked + .gcs-slider { background: var(--ghl-blue); }
.gcs-switch input:checked + .gcs-slider::before { transform: translateX(16px); }
.gcs-switch input:disabled + .gcs-slider { opacity: 0.45; cursor: not-allowed; }
.gcs-toggle-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; cursor: pointer; }

/* radio cards */
.gcs-radios { display: flex; flex-direction: column; gap: 8px; }
.gcs-radio { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--ghl-border); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.gcs-radio.is-on { border-color: var(--ghl-blue); background: var(--ghl-blue-soft); }
.gcs-radio input { margin-top: 3px; accent-color: var(--ghl-blue); }
.gcs-radio-label { display: block; font-weight: 600; }
.gcs-radio-sub { display: block; font-size: 12.5px; color: var(--muted); }

/* cards */
.gcs-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.gcs-card-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.gcs-card-title { font-size: 16px; font-weight: 650; }
.gcs-card-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* modal */
.gcs-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); display: grid; place-items: start center; padding: 6vh 16px; z-index: 1000; overflow-y: auto; }
.gcs-modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.12), 0 8px 8px -4px rgba(16, 24, 40, 0.05); display: flex; flex-direction: column; max-height: 88vh; }
.gcs-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; border-bottom: 1px solid var(--line-soft); }
.gcs-modal-title { font-size: 18px; font-weight: 650; }
.gcs-modal-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.gcs-modal-body { padding: 18px 24px; overflow-y: auto; }
.gcs-modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.gcs-x { background: none; border: 0; font-size: 16px; color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.gcs-x:hover { background: var(--hover); color: var(--text); }

/* type chooser */
.gcs-typecard { display: flex; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.gcs-typecard:hover { border-color: #1d2939; box-shadow: var(--shadow); }
.gcs-typeicon { font-size: 22px; width: 36px; text-align: center; }
.gcs-typename { display: block; font-weight: 650; margin-bottom: 2px; }
.gcs-typedesc, .gcs-typeeg { display: block; color: var(--muted); font-size: 13.5px; }
.gcs-explore { background: none; border: 0; font-weight: 600; padding: 8px 4px; display: inline-flex; align-items: center; gap: 6px; }
.gcs-chev { display: inline-block; transition: transform 0.15s; }
.is-open > .gcs-chev, .gcs-explore.is-open .gcs-chev { transform: rotate(90deg); }
.gcs-daytoggles { display: flex; gap: 8px; margin: 8px 0 12px; }
.gcs-daytoggle { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--ghl-border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }

/* share */
.gcs-sharemeta { display: flex; gap: 18px; color: var(--ghl-text-2); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.gcs-sharerow { margin-bottom: 18px; }
.gcs-copyrow { display: flex; gap: 8px; }
.gcs-copyrow .btn { white-space: nowrap; }
.gcs-qr { display: flex; justify-content: center; padding: 12px; }

/* editor */
.gcs-edhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; margin-bottom: 18px; }
.gcs-edhead > :first-child { justify-self: start; }
.gcs-edtitle { font-size: 18px; font-weight: 650; text-align: center; }
.gcs-edacts { display: flex; gap: 8px; justify-self: end; }
.gcs-edgrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.gcs-ednav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.gcs-navitem { text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 14px; color: var(--ghl-text-2); font-weight: 550; }
.gcs-navitem:hover { background: var(--hover); color: var(--text); }
.gcs-navitem.is-on { background: var(--ghl-blue-soft); color: var(--ghl-blue); }
.gcs-navsub { padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.gcs-quicktip { margin-top: 14px; padding: 10px 14px; color: var(--muted); font-size: 12.5px; }
.gcs-qt-title { font-weight: 650; color: var(--ghl-text-2); margin-bottom: 4px; }
.gcs-edpane { min-width: 0; }
.gcs-calid { display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: var(--ghl-text-2); font-size: 13px; margin: -8px 0 10px; }
.gcs-logo img { max-width: 180px; max-height: 180px; border-radius: 8px; display: block; margin-bottom: 8px; }
.gcs-upload { border: 1px dashed var(--ghl-border); border-radius: 10px; padding: 18px; text-align: center; color: var(--ghl-text-2); margin-bottom: 8px; }
.gcs-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.gcs-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.gcs-color.is-on { box-shadow: 0 0 0 2px var(--text); }
.gcs-locs { display: flex; flex-direction: column; gap: 8px; }
.gcs-locrow { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 8px; align-items: center; }
.gcs-staffpick { display: flex; flex-wrap: wrap; gap: 8px; }
.gcs-staffopt { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ghl-border); border-radius: 999px; padding: 4px 12px 4px 6px; cursor: pointer; font-size: 13px; }
.gcs-staffrow { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.gcs-staffname { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.gcs-avatar { width: 26px; height: 26px; border-radius: 50%; background: #e0eaff; color: #3538cd; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; flex-shrink: 0; }
.gcs-availcards { display: flex; flex-direction: column; gap: 10px; }
.gcs-availcard { display: grid; grid-template-columns: auto 1fr minmax(200px, 280px); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }

/* weekly editor */
.gcs-week-rows { display: flex; flex-direction: column; }
.gcs-day { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.gcs-day-name { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-top: 8px; }
.gcs-day-name input { accent-color: var(--ghl-blue); }
.gcs-day-ranges { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.gcs-day-ranges > .gcs-dim { padding-top: 7px; }
.gcs-day-acts { display: flex; gap: 2px; padding-top: 4px; }
.gcs-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcs-range select { width: auto; min-width: 120px; }
.gcs-dates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.gcs-date-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 12px; align-items: start; }
.gcs-date-name { font-weight: 600; padding-top: 8px; }
.gcs-empty-sm { color: var(--muted); font-size: 13px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; }

/* notifications */
.gcs-notifs { display: flex; flex-direction: column; gap: 10px; }
.gcs-notif { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.gcs-notif-title { font-weight: 600; }
.gcs-notif-chans { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gcs-notif-when { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.gcs-chan { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ghl-border); background: #f9fafb; color: var(--muted); }
.gcs-chan.is-on { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.gcs-legend { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }

/* widget preview */
.gcs-widgetgrid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.gcs-wpreview { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--wb, #fff); position: sticky; top: 8px; }
.gcs-wp-title { font-weight: 700; font-size: 16px; }
.gcs-wp-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.gcs-wp-meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.gcs-wp-days { display: flex; gap: 6px; margin: 14px 0; }
.gcs-wp-days span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #f2f4f7; }
.gcs-wp-days span.is-on { background: var(--wp, #178af6); color: #fff; }
.gcs-wp-btn { width: 100%; border: 0; border-radius: 8px; padding: 9px; color: #fff; background: var(--wp, #178af6); font-weight: 600; }

/* troubleshoot */
.gcs-tsbox { background: var(--surface); border: 1px solid #b2ccff; border-radius: 12px; overflow: hidden; }
.gcs-tshead { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: #f5f8ff; color: var(--ghl-blue); font-weight: 600; border-bottom: 1px solid #b2ccff; }
.gcs-tsgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; }
.gcs-tsgrid > * { padding: 20px; }
.gcs-tsinfo { border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.gcs-tsname { font-size: 20px; font-weight: 650; }
.gcs-monthnav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 6px 0 12px; }
.gcs-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.gcs-dow { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ghl-text-2); }
.gcs-mday { aspect-ratio: 1; border-radius: 50%; border: 1px dashed #b2ccff; background: #fff; color: var(--ghl-text-2); }
.gcs-mday.is-today { font-weight: 700; }
.gcs-mday.is-on { background: var(--ghl-blue); color: #fff; border-color: var(--ghl-blue); }
.gcs-tsslots { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.gcs-tsslot { border: 1px dashed #98a2b3; border-radius: 8px; padding: 10px; text-align: center; }
.gcs-tsslot.is-ok { border-style: solid; border-color: var(--ghl-blue); }
.gcs-tstime { font-weight: 700; }
.gcs-tsstate { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: 0.02em; }
.gcs-tsslot.is-ok .gcs-tsstate { color: var(--green); }
.gcs-tsbadges { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.gcs-badge { font-size: 10.5px; font-weight: 700; border: 1px solid #344054; border-radius: 4px; padding: 0 5px; cursor: help; }

/* preferences, schedules, connections */
.gcs-prefcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.gcs-prefrow { display: grid; grid-template-columns: 260px minmax(0, 420px); gap: 24px; padding: 16px 0; border-top: 1px solid var(--line); margin-top: 14px; }
.gcs-preflabel { font-weight: 600; color: #344054; }
.gcs-banner { background: #f5f8ff; border: 1px solid #b2ccff; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-weight: 550; }
.gcs-schedhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.gcs-sched > .gcs-row > select { max-width: 320px; }
.gcs-schedcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.gcs-schedcard > .gcs-row .gcs-field { min-width: 220px; margin-bottom: 0; }
.gcs-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; text-align: center; }
.gcs-empty-icon { font-size: 28px; }
.gcs-connrow { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }

/* calendar list ⋮ menu (calendar.js) */
.cals-menu { position: absolute; z-index: 1001; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08); padding: 6px; width: 200px; }
.cals-menuitem { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; }
.cals-menuitem:hover { background: var(--hover); }
.cals-menuitem.is-danger { color: var(--red); }

@media (max-width: 900px) {
  .gcs-edgrid, .gcs-tsgrid, .gcs-widgetgrid, .gcs-prefrow { grid-template-columns: 1fr; }
  .gcs-ednav { position: static; flex-direction: row; flex-wrap: wrap; }
  .gcs-availcard { grid-template-columns: auto 1fr; }
}
.gcs-upload { cursor: pointer; }
.gcs-upload.is-drag { border-color: var(--ghl-blue); background: var(--ghl-blue-soft); }

/* calendar view (calendar.js): view settings, colours, layout switches */
.calv-line.is-sub { border-top-style: dashed; opacity: 0.6; }
.calv-offhours { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #f2f4f7, #f2f4f7 6px, #eaecf0 6px, #eaecf0 12px); pointer-events: none; }
.calv-buffer { position: absolute; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(21, 94, 239, 0.08), rgba(21, 94, 239, 0.08) 4px, transparent 4px, transparent 8px); border: 1px dashed rgba(21, 94, 239, 0.35); pointer-events: none; }
.calv-ev.has-colour { border-left: 4px solid var(--ev); background: color-mix(in srgb, var(--ev) 14%, #fff); }
.cals-menuitem:disabled { color: var(--dim); cursor: not-allowed; }
.calv-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
@media print {
  body.calv-printing .rail, body.calv-printing .topbar, body.calv-printing #banner,
  body.calv-printing .calv-bar, body.calv-printing .calv-tabs, body.calv-printing .calv-panel { display: none !important; }
  body.calv-printing .app { display: block; height: auto; overflow: visible; }
  body.calv-printing .calv-body { max-height: none !important; overflow: visible !important; }
}

/* Book appointment modal (calendar-book.js) */
.gcb .gcs-modal-body { padding-top: 6px; }
.gcb-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.gcb-left { border-right: 1px solid var(--line); padding-right: 24px; }
.gcb-req { color: var(--red); margin-left: 2px; }
.gcb-datebox { background: #f9fafb; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gcb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: #fff; width: fit-content; }
.gcb-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 6px; font-weight: 550; }
.gcb-seg button.is-on { background: var(--ghl-blue-soft); color: var(--ghl-blue); }
.gcb-contact { background: #f9fafb; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.gcb-results { display: flex; flex-direction: column; margin-top: 6px; max-height: 200px; overflow-y: auto; }
.gcb-result { text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line-soft); padding: 8px 10px; }
.gcb-result:hover { background: var(--hover); }
.gcb-chosen { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.gcb-chosen > div { flex: 1; }
.gcb-status { display: flex; align-items: center; gap: 8px; }
.gcb-status select { width: auto; }
@media (max-width: 760px) { .gcb-cols { grid-template-columns: 1fr; } .gcb-left { border-right: 0; padding-right: 0; } }

/* public booking widget (booking-widget.js) — measured from GHL's
   /widget/booking/:id at 1440×900 (GHL-TEARDOWN-CALENDARS.md §3). */
body.gbw-page { background: #fff; }
.gbw-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 64px 16px 16px; font-family: Inter, Roboto, system-ui, sans-serif; color: #607179; }
.gbw-wrap button { font-family: inherit; }
.gbw-ico { display: inline-flex; flex: none; }
.gbw-ico svg { display: block; }
.gbw-card { display: flex; flex-direction: column; width: min(1060px, 100%); min-height: 700px; background: var(--wb, #fff); border: 1px solid rgba(16, 24, 40, 0.1); border-radius: 8px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); overflow: hidden; }
.gbw-card.is-done { min-height: 0; }
.gbw-center { text-align: center; padding: 48px; min-height: 0; }
.gbw-big { display: flex; justify-content: center; color: #98a2b3; margin-bottom: 8px; }
.gbw-manage .gbw-meta { gap: 0; }
.gbw-cols { flex: 1; display: grid; grid-template-columns: 353px minmax(0, 1fr); }
.gbw-card.is-form .gbw-cols { flex: 0 0 600px; }
.gbw-left { padding: 40px 20px 20px; border-right: 1px solid rgba(16, 24, 40, 0.1); }
.gbw-back { display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 30px; padding: 0; border: 1px solid rgba(16, 24, 40, 0.1); border-radius: 50%; background: #fff; color: var(--wp, #155eef); cursor: pointer; }
.gbw-logo { display: block; max-width: 120px; max-height: 120px; margin-bottom: 16px; border-radius: 8px; }
.gbw-title { margin: 10px 0 0; font-size: 22px; font-weight: 500; line-height: 30.8px; color: #101828; }
.gbw-meta { display: flex; flex-direction: column; margin-top: 5px; }
.gbw-inforow { display: flex; align-items: center; gap: 10px; padding: 4.8px 0; color: #667085; }
.gbw-infoval { font-size: 13px; font-weight: 600; line-height: 24px; color: rgba(16, 24, 40, 0.6); }
.gbw-inforow.is-staff { cursor: pointer; }
.gbw-staffsel { border: 0; background: transparent; padding: 0; font: 600 13px/24px Inter, system-ui, sans-serif; color: var(--wp, #155eef); cursor: pointer; }
.gbw-desc { margin-top: 12px; font-size: 14px; line-height: 22px; color: #475467; white-space: pre-wrap; }
.gbw-dim { color: #667085; font-size: 14px; }
.gbw-right { padding: 25px 0 0 25px; }
.gbw-h2 { margin: 0; font-size: 17.6px; font-weight: 500; line-height: 30px; color: #101828; }
.gbw-pick { display: grid; grid-template-columns: 402px minmax(0, 1fr); gap: 7px; }
.gbw-cal { padding-top: 16px; }
.gbw-monthnav { display: flex; align-items: center; justify-content: center; gap: 20px; width: 383px; height: 43px; margin-bottom: 15px; }
.gbw-month { width: 128px; text-align: center; font-size: 15px; font-weight: 500; line-height: 24px; color: #101828; }
.gbw-nav { display: grid; place-items: center; width: 41px; height: 41px; padding: 0; border: 0; border-radius: 50px; background: transparent; color: #667085; cursor: pointer; }
.gbw-nav.is-next { background: color-mix(in srgb, var(--wp, #155eef) 7%, transparent); color: var(--wp, #155eef); }
.gbw-nav:disabled { cursor: not-allowed; }
.gbw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 34px; grid-auto-rows: 56px; width: 383px; }
.gbw-dow { height: 34px; padding-bottom: 10px; text-align: center; font-size: 13px; font-weight: 500; line-height: 24px; color: #101828; align-self: start; }
.gbw-day { display: grid; place-items: center; padding: 5px 0; border: 0; background: none; cursor: default; }
.gbw-day > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 15px; font-weight: 400; line-height: 24px; color: rgba(16, 24, 40, 0.36); }
.gbw-day.is-open { cursor: pointer; }
.gbw-day.is-open > span { background: color-mix(in srgb, var(--wp, #155eef) 7%, transparent); color: var(--wp, #155eef); font-weight: 600; }
.gbw-day.is-open:hover > span { background: color-mix(in srgb, var(--wp, #155eef) 14%, transparent); }
.gbw-day.is-on > span, .gbw-day.is-on:hover > span { background: var(--wp, #155eef); color: #fff; }
.gbw-day:focus-visible { outline: none; }
.gbw-day:focus-visible > span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp, #155eef) 30%, transparent); }
.gbw-grid > .gbw-dow ~ div:empty { display: block; }
.gbw-tz { margin-top: 25px; }
.gbw-label { margin-bottom: 5px; font-size: 14px; font-weight: 500; line-height: 20px; color: #101828; }
.gbw-tzbox { position: relative; display: flex; align-items: center; gap: 10px; width: 360px; height: 40px; padding: 0 40px 0 18px; color: #101828; cursor: pointer; }
.gbw-tztext { font-size: 13px; line-height: 20px; color: #101828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbw-caret { position: absolute; right: 20px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top: 6px solid var(--wp, #155eef); border-bottom: 0; }
.gbw-tzsel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 13px; }
.gbw-slots { display: flex; flex-direction: column; max-height: 544px; margin-top: 72px; padding: 0 31px 8px 0; overflow-y: auto; }
.gbw-slots > .gbw-dim { padding-top: 12px; }
.gbw-slotrow { display: flex; flex: none; gap: 13px; width: 234px; height: 50px; margin-bottom: 19.2px; }
.gbw-slot { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0; border: 1px solid var(--wp, #155eef); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 500; line-height: 25.2px; color: var(--wp, #155eef); cursor: pointer; }
.gbw-slot:hover { background: color-mix(in srgb, var(--wp, #155eef) 5%, #fff); }
.gbw-slotrow.is-on .gbw-slot { flex: 0 0 116px; border-color: transparent; background: rgba(16, 24, 40, 0.6); color: #fff; }
.gbw-seats { font-size: 12px; font-weight: 500; opacity: 0.8; }
.gbw-select { flex: 1; height: 50px; border: 2px solid var(--wp, #155eef); border-radius: 4px; background: var(--wp, #155eef); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; }
.gbw-formcol { padding: 20px 23px 0 31px; }
.gbw-form { display: flex; flex-direction: column; max-width: 631px; }
.gbw-formtitle { margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 30px; color: #101828; }
.gbw-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 297px)); gap: 18px 37px; }
.gbw-field { display: flex; flex-direction: column; margin-bottom: 0; }
.gbw-form > .gbw-field { margin-top: 18px; }
.gbw-flabel { margin-bottom: 8px; font-size: 14px; font-weight: 500; line-height: 25.2px; color: #101828; }
.gbw-inputwrap { position: relative; display: flex; align-items: center; }
.gbw-inputwrap.has-lead .gbw-ico { position: absolute; left: 12px; color: #475467; pointer-events: none; }
.gbw-inputwrap.has-lead .gbw-input { padding-left: 36px; }
.gbw-input { width: 100%; height: 53px; padding: 15px 20px; border: 1px solid rgba(16, 24, 40, 0.6); border-radius: 8px; background: #fff; font: 400 14px/21px Inter, system-ui, sans-serif; color: #101828; }
.gbw-input::placeholder { color: #98a2b3; }
textarea.gbw-input { height: 108px; resize: vertical; }
.gbw-input:focus { outline: none; border-color: var(--wp, #155eef); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp, #155eef) 15%, transparent); }
.gbw-consent { display: flex; gap: 20px; align-items: flex-start; margin-top: 20px; font-size: 14px; font-weight: 500; line-height: 20px; color: #101828; }
.gbw-consent input { width: 15px; height: 15px; margin: 3px 0 0; flex: none; }
.gbw-foot { display: flex; justify-content: flex-end; padding: 36px 20px 20px; }
.gbw-submit { height: 42px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--wp, #155eef); color: #fff; font: 500 14px/25.2px Inter, system-ui, sans-serif; cursor: pointer; }
.gbw-submit:hover { filter: brightness(0.94); }
.gbw-link { border: 0; background: none; color: var(--wp, #155eef); font-weight: 600; padding: 0; text-align: left; cursor: pointer; }
.gbw-link.has-icon { display: inline-flex; align-items: center; gap: 6px; }
.gbw-guests { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.gbw-guest { display: flex; gap: 8px; }
.gbw-x { display: inline-flex; align-items: center; border: 0; background: none; color: #667085; }
.gbw-error { margin-top: 16px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.gbw-ok { color: #067647; background: #ecfdf3; border: 1px solid #abefc6; border-radius: 8px; padding: 10px 12px; }
.gbw-done { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #475467; }
.gbw-check { width: 56px; height: 56px; border-radius: 50%; background: #ecfdf3; color: #079455; display: grid; place-items: center; }
.gbw-done h2 { margin: 0; font-size: 20px; font-weight: 500; color: #101828; }
.gbw-addcal { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.gbw-btn2 { border: 1px solid #d0d5dd; border-radius: 8px; padding: 10px 14px; background: #fff; color: #344054; font-weight: 500; text-decoration: none; cursor: pointer; }
.gbw-btn2.is-danger { color: #b42318; border-color: #fda29b; }
.gbw-manage { padding: 32px; display: flex; flex-direction: column; gap: 14px; max-width: 560px; min-height: 0; }
.gbw-manage .gbw-submit { height: 42px; }
@media (max-width: 1100px) {
  .gbw-pick { grid-template-columns: 1fr; }
  .gbw-slots { margin-top: 16px; max-height: none; padding-right: 0; }
}
@media (max-width: 860px) {
  .gbw-cols { grid-template-columns: 1fr; }
  .gbw-card.is-form .gbw-cols { flex: none; }
  .gbw-left { border-right: 0; border-bottom: 1px solid rgba(16, 24, 40, 0.1); padding: 20px; }
  .gbw-right, .gbw-formcol { padding: 20px; }
  .gbw-wrap { padding: 16px 8px; }
  .gbw-row2 { grid-template-columns: 1fr; }
  .gbw-grid, .gbw-monthnav { width: 100%; grid-template-columns: repeat(7, 1fr); }
  .gbw-tzbox { width: 100%; }
}

/* ===========================================================================
   Calendars page — GHL's calendar view, measured from the live app
   (FullCalendar timegrid + GHL's toolbar and Manage view drawer).
   Scoped under .calv-page so these win over the older .calv-* rules.
=========================================================================== */
.page-body.calv-page { padding: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.calv-page > div:not(.calv-tabs) { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* header strip: "Calendars" inline with the tabs */
.calv-page .calv-tabs { display: flex; align-items: flex-end; gap: 0; margin: 0; padding: 16px 16px 0; background: #fff; border-bottom: 1px solid #eaecf0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); flex: none; }
.calv-page .calv-tabs-title { font-size: 18px; font-weight: 500; color: #1f2937; padding: 0 8px 12px; margin-right: 12px; line-height: 28px; }
.calv-page .calv-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 8px 8px; margin: 0 4px; font-size: 14px; font-weight: 500; color: #4b5563; line-height: 26px; display: inline-flex; align-items: center; gap: 6px; }
.calv-page .calv-tab:hover { color: #1f2937; }
.calv-page .calv-tab.is-on { color: #38a0db; border-bottom-color: #38a0db; }
.calv-page .calv-tabs-sep { width: 1px; height: 28px; background: #d1d5db; margin: 0 6px 10px; }

/* the view */
.calv-page .calv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.calv-page .calv.is-list { overflow-y: auto; padding: 18px 26px 40px; background: var(--bg); }

/* toolbar */
.calv-page .calv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 24px 16px 8px; background: #fff; border-bottom: 1px solid #eaecf0; flex: none; }
.calv-page .calv-bar-left, .calv-page .calv-bar-right { display: flex; align-items: center; gap: 12px; }
.calv-page .calv-btn { height: 36px; padding: 8px 14px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; color: #344054; font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.calv-page .calv-btn:hover { background: #f9fafb; }
.calv-page .calv-nav { display: flex; align-items: center; width: 240px; height: 37px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0; gap: 0; background: #fff; }
.calv-page .calv-navbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: #344054; border-radius: 4px; padding: 0; }
.calv-page .calv-navbtn:hover { background: #f9fafb; }
.calv-page .calv-range { flex: 1; border: 0; background: none; padding: 8px 0; text-align: center; font-size: 14px; font-weight: 600; color: #344054; white-space: nowrap; }
.calv-page .calv-viewsel { position: relative; width: 120px; height: 37px; display: block; }
.calv-page .calv-viewsel select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; padding: 0 30px 0 12px; font: inherit; font-size: 14px; font-weight: 600; color: #344054; cursor: pointer; }
.calv-page .calv-viewsel::after { content: ""; position: absolute; right: 13px; top: 14px; width: 7px; height: 7px; border-right: 1.6px solid #667085; border-bottom: 1.6px solid #667085; transform: rotate(45deg); pointer-events: none; }
.calv-page .calv-viewsel select:focus { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px #d1e0ff; }
.calv-page .calv-manage { height: 37px; display: inline-flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #84adff; border-radius: 8px; background: transparent; color: #004eeb; font-size: 14px; font-weight: 600; }
.calv-page .calv-manage:hover { background: #f5f8ff; }
.calv-page .calv-kebab { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #d0d5dd; border-radius: 8px; background: transparent; color: #344054; padding: 0; }
.calv-page .calv-kebab:hover { background: #f9fafb; }
.calv-page .calv-new { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 8px; background: #155eef; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.calv-page .calv-new:hover { background: #004eeb; }

/* grid + drawer */
.calv-page .calv-main, .calv-page .calv-main.has-panel { flex: 1; min-height: 0; display: flex; gap: 0; align-items: stretch; }
.calv-page .calv-gridhost { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.calv-page .calv-loading, .calv-page .calv-empty { color: #667085; }

/* timegrid */
.calv-page .calv-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; background: #fff; overflow: hidden; color: #607179; font-size: 14px; }
.calv-page .calv-head, .calv-page .calv-allday { display: grid; grid-template-columns: 75px repeat(var(--cols), minmax(0, 1fr)); overflow-y: hidden; scrollbar-gutter: stable; flex: none; min-height: 0; border: 0; }
.calv-page .calv-head > *, .calv-page .calv-allday > * { border-bottom: 1px solid #ddd; }
.calv-page .calv-zone { height: 40px; padding: 4px 2px 0; font-size: 11px; font-weight: 400; line-height: 15px; color: #344054; text-align: center; white-space: pre-line; border-right: 1px solid #ddd; }
.calv-page .calv-dayhead { height: 40px; display: flex; align-items: center; justify-content: center; padding: 6px 2px; border-left: 1px solid #ddd; font-size: 18px; font-weight: 600; color: #344054; cursor: pointer; white-space: nowrap; overflow: hidden; }
.calv-page .calv-dayhead:first-of-type { border-left: 0; }
.calv-page .calv-dayhead.is-today { color: #155eef; }
.calv-page .calv-dayhead.is-person { color: #667085; cursor: default; }
.calv-page .calv-allday { min-height: 43px; }
.calv-page .calv-allday-label { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; font-size: 14px; color: #607179; border-right: 1px solid #ddd; }
.calv-page .calv-allday-cell { border-left: 1px solid #ddd; padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 42px; }
.calv-page .calv-allday-label + .calv-allday-cell { border-left: 0; }
.calv-page .calv-divider { height: 3px; flex: none; background: rgba(208, 208, 208, 0.3); border-bottom: 1px solid #ddd; }
.calv-page .calv-body { flex: 1; min-height: 0; max-height: none; display: block; overflow-y: auto; scrollbar-gutter: stable; }
.calv-page .calv-inner { display: flex; position: relative; }
.calv-page .calv-axis { width: 75px; flex: none; position: relative; border-right: 1px solid #ddd; }
.calv-page .calv-slotlabel { display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; border-top: 1px solid #ddd; box-sizing: border-box; font-size: 14px; color: #607179; white-space: nowrap; }
.calv-page .calv-slotlabel.is-minor { border-top-style: dotted; }
.calv-page .calv-slotlabel span { position: static; background: none; padding: 0; font-size: 14px; color: #607179; }
.calv-page .calv-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.calv-page .calv-lanes { position: absolute; inset: 0; pointer-events: none; }
.calv-page .calv-lane { border-top: 1px solid #ddd; box-sizing: border-box; }
.calv-page .calv-lane.is-minor { border-top-style: dotted; }
.calv-page .calv-col { position: relative; border-left: 1px solid #ddd; background: transparent; cursor: crosshair; }
.calv-page .calv-col:first-of-type { border-left: 0; }
.calv-page .calv-col.is-today { background: transparent; }
.calv-page .calv-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #ff0000; background: none; z-index: 5; pointer-events: none; }
.calv-page .calv-now::before { display: none; }
.calv-page .calv-now-arrow { position: absolute; left: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #ff0000; z-index: 5; }
.calv-page .calv-offhours { background: #f2f4f7; opacity: 0.75; }

/* events (style inferred: no appointments to observe on the live account) */
.calv-page .calv-ev { position: absolute; z-index: 3; box-sizing: border-box; border-radius: 4px; border: 1px solid #b2ccff; border-left: 3px solid #155eef; background: #eff4ff; padding: 2px 5px; font-size: 12px; line-height: 16px; color: #101828; overflow: hidden; box-shadow: 0 0 0 1px #fff; }
.calv-page .calv-ev.has-colour { border-color: color-mix(in srgb, var(--ev) 40%, #fff); border-left-color: var(--ev); background: color-mix(in srgb, var(--ev) 12%, #fff); }
.calv-page .calv-ev-title { font-weight: 600; font-size: 12px; color: #101828; }
.calv-page .calv-ev-time, .calv-page .calv-ev-sub { font-size: 12px; color: #475467; }
.calv-page .calv-ev.is-short { display: flex; gap: 4px; align-items: center; }
.calv-page .calv-ev.is-short .calv-ev-sub { display: none; }
.calv-page .calv-ev.is-allday { position: static; }
.calv-page .calv-block { border-color: #d0d5dd; border-left-color: #98a2b3; background: repeating-linear-gradient(135deg, #f9fafb, #f9fafb 6px, #f2f4f7 6px, #f2f4f7 12px); color: #475467; }
.calv-page .calv-ev.is-cancelled { opacity: 0.5; text-decoration: line-through; }

/* month */
.calv-page .calm { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; background: #fff; overflow-y: auto; }
.calv-page .calm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #ddd; flex: none; }
.calv-page .calm-weekday { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: #667085; text-transform: none; letter-spacing: 0; border-left: 1px solid #ddd; padding: 0; }
.calv-page .calm-weekday:first-child { border-left: 0; }
.calv-page .calm-week { flex: 1; min-height: 116px; border-bottom: 1px solid #ddd; }
.calv-page .calm-cell { border-left: 1px solid #ddd; padding: 0; background: #fff; display: flex; justify-content: flex-end; align-items: flex-start; }
.calv-page .calm-cell:first-child { border-left: 0; }
.calv-page .calm-cell.is-other, .calv-page .calm-cell.is-today { background: #fff; }
.calv-page .calm-daynum { background: none; border: 0; padding: 8px 6px 4px; font-size: 14px; font-weight: 400; color: #344054; border-radius: 0; }
.calv-page .calm-daynum:hover { background: none; text-decoration: underline; }
.calv-page .calm-cell.is-other .calm-daynum { color: #d0d5dd; }
.calv-page .calm-cell.is-today .calm-daynum { color: #155eef; }
.calv-page .calm-bars { top: 32px; }

/* Manage view drawer */
.calv-page .calv-panel { width: 320px; flex: none; position: relative; top: auto; display: flex; flex-direction: column; min-height: 0; padding: 0; border: 0; border-left: 1px solid #eaecf0; border-radius: 0; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); z-index: 5; }
.calv-page .calv-panel-head { height: 40px; flex: none; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 0 8px; border-bottom: 1px solid #eaecf0; }
.calv-page .calv-panel-title { font-size: 16px; font-weight: 600; color: #101828; }
.calv-page .calv-x { border: 0; background: none; color: #667085; padding: 2px; display: grid; place-items: center; border-radius: 4px; }
.calv-page .calv-x:hover { background: #f2f4f7; }
.calv-page .calv-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.calv-page .calv-typebox { margin: 0 8px; padding: 16px; border-radius: 8px; background: #f5f8ff; display: flex; flex-direction: column; gap: 6px; }
.calv-page .calv-typebox-title { font-size: 14px; font-weight: 500; color: #101828; margin-bottom: 2px; }
.calv-page .calv-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #344054; cursor: pointer; }
.calv-page .calv-radio input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; }
.calv-page .calv-filters { padding: 16px 8px 8px; }
.calv-page .calv-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calv-page .calv-filters-title { font-size: 14px; font-weight: 500; color: #101828; }
.calv-page .calv-clear { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font-size: 14px; font-weight: 600; color: #004eeb; }
.calv-page .calv-searchwrap { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; color: #667085; margin-bottom: 8px; }
.calv-page .calv-searchwrap:focus-within { border-color: #84adff; box-shadow: 0 0 0 4px #d1e0ff; }
.calv-page .calv-search { flex: 1; min-width: 0; border: 0; outline: none; padding: 0; margin: 0; font: inherit; font-size: 14px; color: #101828; background: none; }
.calv-page .calv-sec { padding: 4px 0; }
.calv-page .calv-sec + .calv-sec { border-top: 1px solid #eaecf0; margin-top: 8px; padding-top: 12px; }
.calv-page .calv-sec-head { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 4px 0; font-size: 14px; font-weight: 500; color: #101828; text-align: left; }
.calv-page .calv-sec-head svg { color: #344054; transform: none; transition: transform 0.15s; }
.calv-page .calv-sec-head.is-open svg { transform: rotate(180deg); }
.calv-page .calv-count { background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 2px 8px; margin-left: 6px; }
.calv-page .calv-check { display: flex; align-items: center; gap: 6px; padding: 4px 0 4px 4px; font-size: 13px; color: #475467; cursor: pointer; }
.calv-page .calv-check input { width: 16px; height: 16px; margin: 0; accent-color: #155eef; }
.calv-page .calv-seemore { border: 0; background: none; padding: 6px 0 2px; font-size: 13px; font-weight: 600; color: #004eeb; }

/* settings strip: way back to the calendar */
.gcs-back { border: 0; background: none; color: var(--ghl-text-2); padding: 14px 8px 14px 0; display: inline-flex; align-items: center; font-size: 18px; }
.gcs-back:hover { color: var(--text); }

/* ===========================================================================
   Appointment list view — measured from GHL (Naive UI data table + drawers)
=========================================================================== */
.calv-page .calv.is-list { padding: 32px; background: #fcfdfd; font-family: Inter, Roboto, system-ui, sans-serif; }
.calv-page .calv.is-list .calv-main { display: block; }
.calv-page .calv.is-list .calv-gridhost { display: block; }
.apt { color: #475467; }
.apt-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 32px; }
.apt-title { margin: 0; font-family: Roboto, Inter, sans-serif; font-size: 30px; font-weight: 500; line-height: 45px; color: #101828; letter-spacing: 0; }
.apt-tabs { display: flex; align-items: flex-end; gap: 20px; border-bottom: 1px solid #eaecf0; margin: 0 0 14px; padding: 0 4px; }
.apt-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 20px; color: #667085; margin-bottom: -1px; }
.apt-tab:hover { color: #344054; }
.apt-tab.is-on { color: #155eef; border-bottom-color: #155eef; }
.apt-tab.is-broken { color: #b42318; text-decoration: line-through; }
.apt-tabsep { width: 1px; height: 28px; background: #d0d5dd; margin: 0 -6px 4px; align-self: flex-end; }
.apt-addlist { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 0 8px; font-size: 14px; font-weight: 500; color: #667085; }
.apt-addlist svg { width: 14px; height: 14px; }
.apt-addlist:hover { color: #344054; }
.apt-textbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0 0 8px; font-size: 14px; font-weight: 500; color: #344054; }
.apt-bar .apt-textbtn { padding: 0; }
.apt-textbtn:hover { color: #101828; }
.apt-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.apt-chip-btn { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 500; color: #344054; }
.apt-chip-btn:hover { background: #f9fafb; }
.apt-search { width: 235px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); color: #667085; }
.apt-search:focus-within { border-color: #84adff; box-shadow: 0 0 0 4px #d1e0ff; }
.apt-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: #101828; }
.apt-card { background: #fff; border: 1px solid #eaecf0; border-radius: 8px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06); overflow: auto; }
.apt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.apt-table th { position: sticky; top: 0; background: #f9fafb; border-bottom: 1px solid #eaecf0; padding: 12px 24px; text-align: left; font-size: 12px; font-weight: 500; line-height: 18px; color: #667085; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.apt-table th.apt-th-num { width: 52px; }
.apt-table th.apt-th-act, .apt-table td.apt-act { position: sticky; right: 0; width: 52px; padding: 0 12px; background: inherit; border-left: 1px solid #eaecf0; }
.apt-table th.apt-th-act { background: #f9fafb; }
.apt-table td { padding: 16px 24px; border-bottom: 1px solid #eaecf0; vertical-align: middle; color: #475467; line-height: 20px; background: #fff; }
.apt-table tr:last-child td { border-bottom: 0; }
.apt-row { cursor: pointer; }
.apt-row:hover td { background: #f9fafb; }
.apt-num { color: #667085; width: 52px; }
.apt-cell-title { font-weight: 500; color: #101828; }
.apt-strong { color: #101828; font-weight: 500; }
.apt-dim { color: #667085; font-size: 13px; }
.apt-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 16px; font-size: 12px; font-weight: 500; background: #f2f4f7; color: #344054; }
.apt-badge.st-CONFIRMED { background: #ecfdf3; color: #067647; }
.apt-badge.st-SCHEDULED { background: #fffaeb; color: #b54708; }
.apt-badge.st-SHOWED { background: #eff8ff; color: #175cd3; }
.apt-badge.st-NO_SHOW { background: #fef3f2; color: #b42318; }
.apt-badge.st-CANCELLED { background: #fef3f2; color: #b42318; }
.apt-badge.st-INVALID { background: #f2f4f7; color: #475467; }
.apt-kebab { border: 0; background: none; color: #667085; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.apt-kebab:hover { background: #f2f4f7; color: #344054; }
.apt-emptycell { padding: 48px 0 !important; border-bottom: 0 !important; }
.apt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 0 32px; }
.apt-empty-art { margin-bottom: 24px; line-height: 0; }
.apt-empty-title { font-size: 16px; font-weight: 500; line-height: 25.6px; color: #101828; margin-bottom: 5px; }
.apt-empty-text { width: 400px; max-width: 100%; font-size: 14px; line-height: 24px; color: #475467; }
.apt-empty-btn { margin-top: 16px; height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: #155eef; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.apt-empty-btn:hover { background: #004eeb; }
.apt-pager { display: flex; align-items: center; gap: 6px; padding: 12px 24px; border-top: 1px solid #eaecf0; }
.apt-pagebtn { min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: #344054; }
.apt-pagebtn.is-on { background: #f9fafb; color: #155eef; border-color: #84adff; }
.apt-pagebtn:disabled { color: #d0d5dd; cursor: not-allowed; }
.apt-pagesize { height: 36px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 14px; color: #344054; background: #fff; margin-left: 8px; }

/* drawers (Advanced filters, Sort by, Manage columns, Customize list) */
.gdr-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0); transition: background 0.18s; }
.gdr-backdrop.is-in { background: rgba(0, 0, 0, 0.3); }
.gdr { position: absolute; top: 0; right: 0; bottom: 0; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.18s ease-out; box-shadow: 0 6px 16px -9px rgba(0, 0, 0, 0.08), 0 9px 28px rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03); font-family: Inter, Roboto, system-ui, sans-serif; }
.gdr.is-in { transform: none; }
.gdr-head { display: flex; align-items: flex-start; gap: 16px; padding: 16px 24px 16px; border-bottom: 1px solid #eaecf0; }
.gdr-icon { width: 40px; height: 40px; border-radius: 50%; background: #eff4ff; color: #155eef; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 4px #f5f8ff; }
.gdr-titles { flex: 1; min-width: 0; }
.gdr-title { font-size: 20px; font-weight: 500; line-height: 30px; color: #101828; }
.gdr-sub { font-size: 14px; color: #667085; line-height: 20px; }
.gdr-x { border: 0; background: #f2f4f7; color: #667085; width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; padding: 0; }
.gdr-x svg { width: 15px; height: 15px; }
.gdr-body { flex: 1; overflow-y: auto; padding: 24px; }
.gdr-foot { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid #eaecf0; }
.gdr-btn { height: 40px; padding: 0 16px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; font-size: 14px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.gdr-btn.is-primary { background: #155eef; border-color: #155eef; color: #fff; }
.gdr-btn.is-primary:hover { background: #004eeb; }
.gdr-input { height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 15px; color: #333639; background: #fff; min-width: 0; }
.gdr-input.is-static { display: flex; align-items: center; background: #f9fafb; color: #667085; }
.gdr-group { border: 1px solid #eaecf0; border-radius: 8px; background: #f9fafb; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.gdr-rule { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.gdr-rule.is-locked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gdr-val { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gdr-val > .gdr-input { flex: 1; }
.gdr-unit { font-size: 14px; color: #667085; }
.gdr-iconbtn { width: 40px; height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; display: grid; place-items: center; }
.gdr-grouptail { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; }
.gdr-and { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-size: 14px; font-weight: 500; color: #475467; padding: 4px 0; }
.gdr-clear { border: 0; background: none; color: #f87171; font-size: 14px; }
.gdr-add { margin-top: 16px; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: #344054; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.gdr-picks { width: 100%; display: flex; flex-direction: column; }
.gdr-pick { text-align: left; border: 0; border-bottom: 1px solid #eaecf0; background: #fff; padding: 8px 12px; font-size: 14px; color: #344054; }
.gdr-option { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; padding: 9px 12px; border-radius: 6px; font-size: 15px; color: #344054; text-align: left; }
.gdr-option:hover { background: #f9fafb; }
.gdr-option.is-on { background: #f5f8ff; color: #155eef; }
.gdr-check { color: #155eef; display: grid; }
.gdr-colrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; color: #101828; cursor: grab; }
.gdr-colrow.is-drag { opacity: 0.4; }
.gdr-colrow input { width: 16px; height: 16px; margin: 0; accent-color: #155eef; }
.gdr-grip { color: #98a2b3; display: grid; }
.gdr-name { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; color: #667085; margin-bottom: 24px; }
.gdr-name input { flex: 1; border: 0; outline: none; font: inherit; font-size: 15px; color: #101828; }
.gdr-navrow { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid #eaecf0; background: none; padding: 14px 8px; text-align: left; }
.gdr-navrow:hover { background: #f9fafb; }
.gdr-navicon { color: #667085; display: grid; }
.gdr-navlabel { flex: 1; font-size: 16px; font-weight: 500; color: #101828; }
.gdr-navmeta { font-size: 14px; color: #667085; }
.gdr-navchev { display: inline-flex; color: #98a2b3; }
/* neutralise the older .apt-* rules in app.css (a grid layout for rows) */
.calv-page .apt-table { display: table; border: 0; border-radius: 0; overflow: visible; background: none; }
.calv-page .apt-row { display: table-row; grid-template-columns: none; padding: 0; border: 0; gap: 0; font-size: 14px; }
.calv-page .apt-row:hover { background: none; }
.calv-page .apt-num { font-size: 14px; color: #667085; }
.calv-page .apt-cell-title { font-weight: 500; }
.calv-page .apt-empty { border: 0; background: none; border-radius: 0; padding: 0; }
.calv-page .apt-empty-art { font-size: 0; opacity: 1; line-height: 0; margin-bottom: 24px; }
.calv-page .apt-empty-title { font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.calv-page .apt-pager { font-size: 14px; padding: 12px 24px; }
select.gdr-input { appearance: none; -webkit-appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.apt-pagesize { appearance: none; -webkit-appearance: none; padding-right: 30px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }

/* ===========================================================================
   Settings > Calendars, measured from the live app (GHL's calendar-app
   iframe: Naive UI + Tailwind, Inter). Values are GHL's computed styles —
   see GHL-TEARDOWN-CALENDARS.md §2. Scoped to `.gcs` (the settings page)
   and to the modals it opens; the Book modal (.gcb) keeps its own look.
=========================================================================== */
.gcs, .gcs-modal:not(.gcb), .cals-menu { font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: #344054; }
.gcs { min-height: calc(100vh - 104px); background: #fcfdfd; }
.gcs button { font-family: inherit; }
.g-ico { display: inline-flex; flex: none; }
.g-ico svg { display: block; }

/* header strip — the same one the calendar view uses */
.gcs .gcs-toptabs { display: flex; align-items: flex-end; gap: 0; margin: 0; padding: 16px 16px 0; background: #fff; border: 0; border-bottom: 1px solid #eaecf0; border-radius: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); font-family: Roboto, Inter, system-ui, sans-serif; }
.gcs .gcs-toptitle { font-size: 18px; font-weight: 500; color: #1f2937; padding: 0 8px 12px; margin-right: 12px; line-height: 28px; }
.gcs .gcs-toptab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 8px 8px; margin: 0 4px; font-size: 14px; font-weight: 500; color: #4b5563; line-height: 26px; font-family: inherit; }
.gcs .gcs-toptab:hover { color: #1f2937; }
.gcs .gcs-toptab.is-on { color: #38a0db; border-bottom-color: #38a0db; }
.gcs .gcs-body { padding: 32px; min-height: 400px; }
.gcs .gcs-body.is-availability { padding: 0; }
.gcs .gcs-body.is-connections { padding: 16px 32px 32px; }

/* buttons */
.g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; font: 500 14px/20px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.g-btn.is-primary { background: #155eef; border-color: #155eef; color: #fff; }
.g-btn.is-primary:hover:not(:disabled) { background: #004eeb; border-color: #004eeb; }
.g-btn.is-primary:disabled { background: #b2ccff; border-color: #b2ccff; cursor: not-allowed; }
.g-btn.is-outline { background: #fff; border-color: #d0d5dd; color: #344054; }
.g-btn.is-outline:hover:not(:disabled) { background: #f9fafb; }
.g-btn.is-outline:disabled { color: #98a2b3; cursor: not-allowed; }
.g-btn.is-light { background: #eff4ff; border-color: #eff4ff; color: #004eeb; }
.g-btn.is-light:hover:not(:disabled) { background: #e0eaff; border-color: #e0eaff; }
.g-btn.is-sm { padding: 8px; font-size: 13px; }
.g-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: #2563eb; font: 500 14px/20px Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.g-link:hover { color: #004eeb; text-decoration: underline; }
.g-link.is-sm { font-size: 13px; }
.g-link.is-grey { color: #475467; }
.g-link.is-strong { font-weight: 600; color: #004eeb; }
.g-iconbtn { width: 48px; height: 36px; display: inline-grid; place-items: center; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.g-iconbtn:hover { background: #f9fafb; }

/* Naive UI line tabs */
.g-tabs { display: flex; align-items: flex-end; gap: 36px; border-bottom: 1px solid #efeff5; }
.g-tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; font: 600 14px/21px Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
.g-tab:hover { color: #155eef; }
.g-tab.is-on { color: #155eef; border-bottom-color: #155eef; }

/* --- the calendar list (calendar.js renderCalendarAdmin) ------------------ */
.gcs .cals-subtabs { display: flex; gap: 36px; border-bottom: 1px solid #efeff5; margin: 0 0 36px; }
.gcs .cals-subtab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 0; font: 600 14px/21px Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
.gcs .cals-subtab:hover { color: #155eef; }
.gcs .cals-subtab.is-on { color: #155eef; border-bottom-color: #155eef; }
.gcs .cals-main { display: flex; gap: 28px; align-items: flex-start; }
.gcs .cals-right { flex: 1; min-width: 0; }

.gcs .cals-railhost { flex: 0 0 200px; min-width: 0; }
.gcs .cals-rail { width: 200px; display: block; }
.gcs .cals-all { display: block; width: 100%; text-align: left; padding: 10px 8px; margin: 0 0 5px; border: 0; border-radius: 6px; background: none; font-size: 14px; font-weight: 400; line-height: 21px; color: #667085; cursor: pointer; }
.gcs .cals-all.is-on { background: #eff4ff; color: #004eeb; }
.gcs .cals-railsep { border-top: 1px solid #eaecf0; margin-top: 10px; }
.gcs .cals-railhead { padding: 16px 0 8px 4px; margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: #344054; }
.gcs .cals-groups { max-height: 300px; overflow-y: auto; }
.gcs .cals-group { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 5px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14px; line-height: 21px; color: #667085; cursor: pointer; }
.gcs .cals-group:hover { background: #f9fafb; }
.gcs .cals-group.is-on { background: #eff4ff; color: #004eeb; }
.gcs .cals-group-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .cals-count { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 16px; background: #eaecf0; color: #667085; font-size: 10px; line-height: 15px; }
.gcs .cals-newgroup { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 36px; margin-top: 10px; padding: 8px 12px; border: 0; border-radius: 8px; background: #eff4ff; color: #004eeb; font: 500 14px/20px Inter, system-ui, sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.gcs .cals-newgroup:hover { background: #e0eaff; }

.gcs .cals-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: nowrap; }
.gcs .cals-dd { position: relative; display: inline-flex; align-items: center; justify-content: space-between; height: 36px; padding: 8px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); color: #101828; font-size: 14px; line-height: 21px; white-space: nowrap; cursor: pointer; flex: none; }
.gcs .cals-dd:focus-within { border-color: #155eef; }
.gcs .cals-dd-chev { display: flex; margin-left: 8px; color: #d0d5dd; }
.gcs .cals-dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
.gcs .cals-search { display: flex; align-items: center; gap: 8px; width: 218px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); flex: none; font: inherit; }
.gcs .cals-search:focus-within { border-color: #155eef; }
.gcs .cals-search-ico { display: flex; color: #667085; }
.gcs .cals-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 14px/20px Inter, system-ui, sans-serif; color: #101828; padding: 0; }
.gcs .cals-search input::placeholder { color: #667085; }
.gcs .cals-add { flex: none; }
.gcs .cals-add span { font-weight: 400; }

.gcs .cals-card { background: #fff; border: 1px solid #eaecf0; border-radius: 8px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06); overflow: hidden; }
.gcs .cals-scroll { overflow-x: auto; }
.gcs .cals-tbl { width: 100%; min-width: 980px; /* GHL's :scroll-x="980" */ border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.gcs .cals-tbl th { background: #f9fafb; padding: 12px 24px; border-bottom: 1px solid #eaecf0; text-align: left; font-size: 12px; font-weight: 500; line-height: 18px; color: #667085; white-space: nowrap; }
.gcs .cals-tbl td { padding: 10px 24px; border-bottom: 1px solid #eaecf0; font-size: 14px; line-height: 20px; color: #667085; vertical-align: middle; overflow: hidden; }
.gcs .cals-tbl tbody tr:hover td { background: #fcfcfd; }
.gcs .cals-name { font-size: 14px; font-weight: 500; line-height: 20px; color: #344054; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .cals-id { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 12px; color: #98a2b3; }
.gcs .cals-id > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .cals-copy { display: inline-flex; flex: none; padding: 0; border: 0; background: none; color: #98a2b3; cursor: pointer; }
.gcs .cals-copy:hover { color: #155eef; }
.gcs .cals-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 9.33px; border-radius: 14px; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.gcs .cals-tag.is-active { color: #12b76a; background: #ecfdf3; }
.gcs .cals-tag.is-inactive { color: #d92d20; background: rgba(217, 45, 32, 0.08); }
.gcs .cals-date { font-size: 13px; line-height: 20px; color: #475467; }
.gcs .cals-time { margin-top: 4px; font-size: 12px; line-height: 20px; color: #98a2b3; }
.gcs .cals-actions { display: flex; align-items: center; gap: 0; }
.gcs .cals-act { display: flex; align-items: center; width: 38px; padding: 0; border: 0; background: none; color: #667085; cursor: pointer; }
.gcs .cals-act:hover { color: #155eef; }
.gcs .cals-more { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -10px; padding: 0; border: 0; border-radius: 34px; background: none; color: #344054; cursor: pointer; }
.gcs .cals-more:hover { background: #f2f4f7; }
.gcs .cals-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 30px 14px; }
.gcs .cals-pageno { min-width: 28px; height: 28px; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; background: none; font-size: 14px; color: #344054; cursor: pointer; }
.gcs .cals-pageno.is-on { border-color: #155eef; color: #155eef; }
.gcs .cals-card .calv-empty { padding: 48px 24px; color: #667085; }

/* the row ⋮ menu (Naive UI dropdown) */
.cals-menu { position: absolute; z-index: 1001; min-width: 153px; width: auto; padding: 4px 0; background: #fff; border: 0; border-radius: 3px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
.cals-menu .cals-menuitem { display: flex; align-items: center; gap: 8px; width: 100%; height: 29px; padding: 0 12px; border: 0; border-radius: 0; background: none; font: 400 14px/20px Inter, system-ui, sans-serif; color: #344054; text-align: left; white-space: nowrap; cursor: pointer; }
.cals-menu .cals-menuitem svg { flex: none; }
.cals-menu .cals-menuitem:hover { background: #f3f3f5; }
.cals-menu .cals-menuitem.is-danger { color: #dc2626; border-top: 1px solid #eaecf0; height: 30px; }
/* the calendar view's ⋮ (CalendarHeader): medium labels, grey 16px icons, a
   rule above the exports, Naive's 0.5 disabled opacity, and the CSV hint
   stacked under its label in a 150px column (text-xs gray-500) */
.calv-moremenu .cals-menuitem { font-weight: 500; }
.calv-moremenu .cals-menuitem svg { width: 16px; height: 16px; color: #667085; }
.calv-moremenu .cals-menuitem:disabled { opacity: 0.5; cursor: not-allowed; background: none; }
.calv-moremenu .cals-menuitem.has-note { align-items: flex-start; height: auto; padding: 6px 12px; }
.calv-moremenu .cals-menuitem.has-note svg { margin-top: 2px; }
.calv-moremenu .cals-menutext { display: flex; flex-direction: column; max-width: 150px; white-space: normal; }
.calv-moremenu .cals-menunote { font-size: 12px; line-height: 16px; font-weight: 400; color: #667085; }
.calv-moremenu .cals-menudivider { height: 1px; margin: 4px 0; background: #eaecf0; }

/* --- modals (GHL's n-card modal) ------------------------------------------ */
.gcs-modal:not(.gcb) { padding: 24px; border-radius: 12px; box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03); }
.gcs-modal:not(.gcb) .gcs-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0; border: 0; }
.gcs-modal:not(.gcb) .gcs-modal-title { font-size: 18px; font-weight: 500; line-height: 28px; color: #101828; }
.gcs-modal:not(.gcb) .gcs-modal-sub { margin-top: 0; font-size: 14px; line-height: 20px; color: #98a2b3; }
.gcs-modal:not(.gcb) .gcs-x { display: grid; place-items: center; width: 34px; height: 34px; margin: -4px -4px 0 0; padding: 0; border: 0; border-radius: 34px; background: none; color: #667085; cursor: pointer; }
.gcs-modal:not(.gcb) .gcs-x:hover { background: #f2f4f7; color: #344054; }
.gcs-modal-divider { border-top: 1px solid #eaecf0; margin: 20px 0 0; }
.gcs-modal:not(.gcb) .gcs-modal-body { padding: 0; margin-top: 20px; overflow-y: auto; }
.gcs-modal:not(.gcb) .gcs-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 24px 0 0; border: 0; }

/* Choose calendar type */
.gcs-modal.gcs-chooser .gcs-modal-body { margin-top: 0; }
.gcs-typegrid { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.gcs-typecard { display: block; text-align: left; width: calc(48%); min-height: 80px; margin: 16px 8px 0; padding: 8px 12px 24px; border: 1px solid #eaecf0; border-radius: 12px; background: #fff; cursor: pointer; box-sizing: border-box; transition: border-color 0.12s; }
.gcs-typecard:hover, .gcs-typecard:focus-visible { border-color: #60a5fa; outline: none; }
.gcs-typerow { display: flex; gap: 12px; padding: 13px 0 0 1px; }
.gcs-typeicon { display: flex; flex: none; width: 30px; height: 24px; }
.gcs-typename { font-size: 14px; font-weight: 500; line-height: 20px; color: #344054; }
.gcs-typedesc { font-size: 14px; line-height: 22px; color: #98a2b3; }
.gcs-explore { display: inline-flex; align-items: center; gap: 6px; margin: 20px 0 0; padding: 0; border: 0; background: none; font: 400 14px/22px Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
.gcs-explore .g-ico { color: #344054; transition: transform 0.15s; }
.gcs-explore.is-open .g-ico { transform: rotate(90deg); }
.gcs-typegrid.is-more { margin-top: 12px; }
.gcs-typegrid.is-more .gcs-typecard { margin-top: 12px; }
.gcs-important { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; padding: 12px 20px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fcfdfd; font-size: 14px; line-height: 20px; color: #475467; }
.gcs-important .g-ico { margin-right: 8px; color: #344054; }
.gcs-important b { font-weight: 600; color: #344054; }
@media (max-width: 1100px) { .gcs-typecard { width: 100%; } }

/* quick create */
.gcs-rule { border-top: 1px solid #eaecf0; margin: 20px 0; }
.gcs-rule.is-flush { margin: 15px 0 0; }
.gcs-daytoggles { display: flex; gap: 8px; margin: 8px 0 12px; }
.gcs-daytoggle { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: #344054; }
.gcs-hint.is-top { margin: 0 0 4px; }

/* Share */
.gcs-modal.gcs-share .gcs-modal-head { padding-bottom: 8px; }
.gcs-modal.gcs-share .gcs-modal-body { margin-top: 0; }
.gcs-sharemeta { display: flex; gap: 20px; padding: 5px 0 0; margin: 0; border: 0; color: #475467; }
.gcs-sharemeta > span { display: inline-flex; align-items: center; gap: 0; font-size: 14px; line-height: 17px; }
.gcs-sharemeta > span .g-ico { margin-right: 8px; }
.gcs-share .g-tabs { margin-top: 12px; }
.gcs-sharepane { padding-top: 28px; }
.gcs-sharerow + .gcs-sharerow { margin-top: 16px; }
.gcs-sharelabel { margin: 0 0 9px 2px; font-size: 14px; font-weight: 500; line-height: 18px; color: #344054; }
.gcs-sharelabel.is-strong { font-weight: 600; margin-left: 0; }
.gcs-copyrow { display: flex; align-items: center; gap: 8px; }
.gcs-copyrow .gcs-input { flex: 1; min-width: 0; }
.gcs-copybtn { width: 158px; }
.gcs-sharenote { padding: 16px 0; font-size: 14px; line-height: 20px; color: #667085; }
.gcs-sharenote.is-tight { padding: 8px 0 0; }
.gcs-share-h2 { margin: 0; padding: 8px 0; font-size: 14px; font-weight: 600; line-height: 20px; color: #667085; }
.gcs-share .g-link.is-icon { margin-top: 12px; color: #1d4ed8; }
.gcs-embed { margin: 16px 0 0; padding: 24px; background: #eff6ff; color: #15803d; border-radius: 8px; font: 400 14px/22px Inter, system-ui, sans-serif; white-space: pre-wrap; word-break: break-all; }
.gcs-embed-foot { display: flex; justify-content: flex-end; margin-top: 31px; }
.gcs-embed-foot .gcs-copybtn { width: 126px; }
.gcs-qrgrid { display: grid; grid-template-columns: 242px minmax(0, 1fr); align-items: start; }
.gcs-qr { width: 200px; height: 200px; margin: 0 21px; padding: 8px; border: 1px solid #eaecf0; border-radius: 0; display: grid; place-items: center; box-sizing: border-box; }
.gcs-qr svg { width: 100%; height: 100%; }
.gcs-qrtitle { font-size: 16px; font-weight: 600; line-height: 24px; color: #101828; }
.gcs-qrdesc { margin-top: 4px; font-size: 14px; line-height: 20px; color: #475467; }
.gcs-qrlink { display: flex; gap: 22px; margin-top: 24px; }
.gcs-qrlink .gcs-input { flex: 1; min-width: 0; }
.gcs-qrcopy { flex: none; width: 42px; height: 40px; display: grid; place-items: center; border: 1px solid #eff4ff; border-radius: 8px; background: #eff4ff; color: #155eef; cursor: pointer; }
.gcs-qrnote { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 16px; color: #475467; }
.gcs-qrdl { width: 100%; height: 40px; margin-top: 16px; border-radius: 4px; justify-content: space-between; }

/* --- form kit inside the settings page and its modals --------------------- */
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-field { margin: 0 0 24px; min-width: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-label { display: flex; align-items: center; gap: 6px; margin: 0 0 9px 2px; font-size: 14px; font-weight: 500; line-height: 17px; color: #344054; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-label.is-gap { margin-top: 24px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-info { display: inline-flex; color: #667085; cursor: help; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-hint { margin-top: 8px; font-size: 14px; line-height: 20px; color: #667085; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; font: 400 15px/22px Inter, system-ui, sans-serif; color: #101828; box-shadow: none; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input::placeholder { color: #667085; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input:hover { border-color: #b2ccff; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input:focus { outline: none; border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.2); }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input.is-readonly { height: 34px; padding: 0 12px; background: #fafafc; font-size: 14px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-input.is-36 { height: 36px; border-color: #d0d5dd; border-radius: 6px; font-size: 14px; padding: 0 12px; }
:is(.gcs, .gcs-modal:not(.gcb)) textarea.gcs-input { height: auto; min-height: 100px; padding: 8.75px 14px; resize: vertical; }
:is(.gcs, .gcs-modal:not(.gcb)) textarea.gcs-tall { min-height: 114px; }
:is(.gcs, .gcs-modal:not(.gcb)) textarea.gcs-taller { min-height: 138px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
:is(.gcs, .gcs-modal:not(.gcb)) select.gcs-select { appearance: none; -webkit-appearance: none; padding: 0 28px 0 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-numunit { display: flex; width: 322px; max-width: 100%; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-numunit > .gcs-num { flex: 0 0 184px; min-width: 0; border-radius: 8px 0 0 8px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-numunit > select { flex: 1; min-width: 0; margin-left: -1px; border-radius: 0 8px 8px 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-pair .gcs-numunit { width: 306px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-pair .gcs-numunit > .gcs-num { flex-basis: 171px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-numunit.is-compact { width: 193px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-numunit.is-compact > .gcs-num { flex-basis: 86px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-prefixed { display: flex; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-prefixed > span { display: flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid #e0e0e6; border-right: 0; border-radius: 8px 0 0 8px; background: #fafafc; font-size: 15px; color: #344054; white-space: nowrap; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-prefixed > .gcs-input { border-radius: 0 8px 8px 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-w430 { max-width: 430px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-w295 { max-width: 295px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-err { color: #d92d20; font-size: 13px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-note { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 8px 0 14px; }

/* switch — Naive UI's 32×18 rail */
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-slider { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.14); border-radius: 9px; transition: background 0.2s; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-slider::before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: #fff; border-radius: 7px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch input:checked + .gcs-slider { background: #155eef; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch input:checked + .gcs-slider::before { transform: translateX(14px); }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch input:focus-visible + .gcs-slider { box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.3); }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-switch input:disabled + .gcs-slider { opacity: 0.5; cursor: not-allowed; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 14px; font-weight: 400; line-height: 21px; color: #101828; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-row.is-strong { font-weight: 500; color: #344054; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-row.has-desc { align-items: flex-start; margin-bottom: 24px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-row.has-desc .gcs-switch { margin-top: 2px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-label { display: inline-flex; align-items: center; gap: 6px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-desc { display: block; margin-top: 0; font-size: 14px; line-height: 24px; color: #667085; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-toggle-row.has-desc .gcs-toggle-label { display: block; line-height: 24px; }

/* radios — Naive UI's, in a row */
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radios { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radios.is-column { flex-direction: column; gap: 14px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio.is-on { background: none; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio-dot { position: relative; flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #d0d5dd; border-radius: 50%; background: #fff; transition: border-color 0.12s, background 0.12s; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio.is-on .gcs-radio-dot { border-color: #2563eb; background: #2563eb; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio.is-on .gcs-radio-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio input:focus-visible + .gcs-radio-dot { box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.2); }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio-label { display: block; font-size: 14px; font-weight: 500; line-height: 20px; color: #344054; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-radio-sub { display: block; font-size: 13px; line-height: 18px; color: #667085; }

/* avatars */
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: #f2f4f7; color: #475467; font-size: 14px; font-weight: 400; }
.gcs-mini-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef0fb; color: #475467; font-size: 10px; }

/* --- the editor ------------------------------------------------------------ */
.gcs.is-editing { background: #f9fafb; }
.gcs .gcs-edhead { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 62px; margin: 0; padding: 12px; background: #fff; border: 0; border-bottom: 1px solid #d0d5dd; border-radius: 0; }
.gcs .gcs-edback { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0; border: 0; background: none; font-size: 14px; color: #667085; cursor: pointer; }
.gcs .gcs-edback .g-ico { color: #475467; }
.gcs .gcs-edback:hover { color: #344054; }
.gcs .gcs-edtitle { padding-left: 12px; font-size: 18px; font-weight: 400; line-height: 28px; color: #000; text-align: center; }
.gcs .gcs-edacts { justify-self: end; display: flex; align-items: center; gap: 12px; }
.gcs .gcs-edgrid { display: grid; grid-template-columns: 191px minmax(0, 680px); gap: 36px; align-items: start; padding: 44px 24px 48px; }
.gcs .gcs-ednav { position: sticky; top: 106px; display: block; }
.gcs .gcs-navitem { position: relative; display: block; width: 100%; min-height: 41px; margin: 3px 0; padding: 10px 18px 10px 32px; border: 0; border-radius: 0; background: none; text-align: left; font-size: 14px; font-weight: 400; line-height: 21px; color: #667085; cursor: pointer; }
.gcs .gcs-navitem > span { position: relative; }
.gcs .gcs-navitem:hover { color: #344054; background: none; }
.gcs .gcs-navitem.is-on { color: #004eeb; background: none; }
.gcs .gcs-navitem.is-on::before { content: ""; position: absolute; inset: 0 8px; border-radius: 6px; background: rgba(21, 94, 239, 0.1); }
.gcs .gcs-navgroup { display: flex; align-items: center; gap: 6px; height: 26px; margin: 9px 0 6px; padding: 0 0 5px 4px; border: 0; background: none; font-size: 14px; line-height: 21px; color: #667085; cursor: pointer; text-align: left; }
.gcs .gcs-navgroup .gcs-chev { color: #344054; transition: transform 0.15s; }
.gcs .gcs-navgroup.is-open .gcs-chev { transform: rotate(90deg); }
.gcs .gcs-quicktip { margin-top: 16px; padding: 0 18px 0 32px; color: inherit; font-size: inherit; }
.gcs .gcs-qt-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; line-height: 21px; color: #667085; }
.gcs .gcs-qt-text { margin-top: 8px; font-size: 12px; line-height: 20px; color: #98a2b3; }
.gcs .gcs-edpane { min-width: 0; }
.gcs .gcs-card { margin: 0 0 16px; padding: 20px 18px 20px 20px; background: #fff; border: 1px solid #eaecf0; border-radius: 12px; box-shadow: none; }
.gcs .gcs-card-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 16px; padding: 0 0 15px; border-bottom: 1px solid #eaecf0; }
.gcs .gcs-card-title { font-size: 16px; font-weight: 400; line-height: 24px; color: #101828; }
.gcs .gcs-card-desc { margin: 0; font-size: 14px; line-height: 24px; color: #667085; }
.gcs .gcs-card-body > :last-child { margin-bottom: 0; }
.gcs .gcs-card-head > div:first-child { flex: none; }
.gcs .gcs-card-aside { min-width: 0; display: flex; justify-content: flex-end; }
.gcs .gcs-calid { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0 0 4px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; line-height: 16px; color: #667085; cursor: pointer; white-space: nowrap; }
.gcs .gcs-calid > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.gcs .gcs-calid:hover { color: #344054; }

.gcs .gcs-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 150px; margin: 0; padding: 16px; border: 2px solid #eaecf0; border-radius: 12px; background: #fff; text-align: center; color: #101828; cursor: pointer; }
.gcs .gcs-upload:hover, .gcs .gcs-upload.is-drag { border-color: #b2ccff; background: #f5f8ff; }
.gcs .gcs-upload-ring { display: grid; place-items: center; width: 60px; height: 60px; border: 10px solid #f9fafb; border-radius: 50%; background: #f2f4f7; color: #475467; box-sizing: border-box; }
.gcs .gcs-upload-text { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #101828; }
.gcs .gcs-upload-cta { font-weight: 600; color: #2563eb; }
.gcs .gcs-upload-hint { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: #101828; }
.gcs .gcs-logo img { max-width: 180px; max-height: 100px; border-radius: 8px; display: block; margin: 0 auto 8px; }
.gcs .gcs-desc { min-height: 100px; }
.gcs .gcs-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.gcs .gcs-color { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #eaecf0; border-radius: 8px; color: #fff; cursor: pointer; box-shadow: none; }
.gcs .gcs-color.is-on { outline: 2px solid #101828; outline-offset: 1px; }

/* staff & location */
.gcs .gcs-stafftop { display: flex; justify-content: space-between; align-items: center; min-height: 32px; margin: 0 0 8px; }
.gcs .gcs-stafftop .gcs-label { margin: 0; font-weight: 400; color: #000; }
.gcs .gcs-tagwrap { position: relative; }
.gcs .gcs-tagselect { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 32px 5px 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; cursor: pointer; }
.gcs .gcs-tagselect:hover { border-color: #b2ccff; }
.gcs .gcs-tagselect:focus-visible, .gcs .gcs-tagselect[aria-expanded="true"] { outline: none; border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.2); }
.gcs .gcs-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 7px; border: 1px solid #e0e0e6; border-radius: 2px; background: #fafafc; font-size: 14px; font-weight: 500; color: #344054; }
.gcs .gcs-tag-x { display: inline-flex; padding: 0; border: 0; background: none; color: #666; cursor: pointer; }
.gcs .gcs-tag-ph { font-size: 15px; color: #98a2b3; }
.gcs .gcs-tag-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; color: #98a2b3; }
.gcs .gcs-tagpop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow-y: auto; padding: 4px 0; background: #fff; border-radius: 8px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
.gcs .gcs-tagopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; font-size: 14px; color: #344054; cursor: pointer; }
.gcs .gcs-tagopt > span:nth-child(2) { flex: 1; }
.gcs .gcs-tagopt:hover { background: #f3f3f5; }
.gcs .gcs-tagopt.is-on { color: #155eef; }
.gcs .gcs-tagopt .gcs-avatar { font-size: 10px; }
.gcs .gcs-staffrows { margin-top: 36px; }
.gcs .gcs-staffrow { display: grid; grid-template-columns: 224px minmax(0, 1fr); margin: 0 0 40px; padding: 0; border: 0; border-radius: 0; }
.gcs .gcs-staffrow:last-child { margin-bottom: 0; }
.gcs .gcs-staffname { display: flex; align-items: center; gap: 12px; align-self: start; margin: 0; font-size: 14px; font-weight: 400; line-height: 21px; color: #000; }
.gcs .gcs-staffname .gcs-pill { margin-left: 4px; }
.gcs .gcs-staffcfg { display: flex; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #eaecf0; }
.gcs .gcs-staffcfg .gcs-field { margin: 0; }
.gcs .gcs-staffcfg .gcs-label { margin-left: 0; line-height: 21px; margin-bottom: 8px; }
.gcs .gcs-prio { flex: 0 0 150px; }
.gcs .gcs-locfield { flex: 1; min-width: 0; }
.gcs .gcs-locs { display: flex; flex-direction: column; gap: 16px; }
.gcs .gcs-loc { display: flex; flex-direction: column; }
.gcs .gcs-loc-top { display: flex; gap: 17px; }
.gcs .gcs-loc-top select { flex: 0 1 194px; min-width: 0; }
.gcs .gcs-sqbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-top: -3px; padding: 0; border: 0; border-radius: 8px; background: #f2f4f7; color: #000; cursor: pointer; }
.gcs .gcs-sqbtn:hover { background: #eaecf0; }
.gcs .gcs-loc .gcs-loc-value { width: 281px; max-width: 100%; align-self: flex-end; margin-top: 26px; }
.gcs .gcs-loc .gcs-hint { align-self: flex-end; max-width: 281px; }
.gcs .gcs-pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #eff4ff; color: #155eef; }

/* availability */
.gcs .gcs-availhead { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.gcs .gcs-availhead .gcs-label { margin: 0; }
.gcs .gcs-availcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 8px; padding: 12px 0; }
.gcs .gcs-availcard { display: flex; align-items: center; gap: 12px; height: 58px; padding: 8px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.gcs .gcs-availcard:hover { border-color: #155eef; }
.gcs .gcs-availcard .gcs-avatar { color: #344054; }
.gcs .gcs-availtext { display: flex; flex-direction: column; min-width: 0; }
.gcs .gcs-availname { font-size: 14px; line-height: 20px; color: #344054; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .gcs-availsum { margin-top: 4px; font-size: 12px; line-height: 16px; color: #667085; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .gcs-block { margin: 0; padding: 15px 0; border-top: 1px solid #eaecf0; }
.gcs .gcs-card-body > .gcs-block:last-child { padding-bottom: 0; }
.gcs .gcs-block > .gcs-toggle-row:last-child { margin-bottom: 0; }
.gcs .gcs-block-title { margin: 0 0 14px; font-size: 14px; font-weight: 500; line-height: 21px; color: #344054; }
.gcs .gcs-block-desc { margin: -10px 0 14px; font-size: 14px; color: #667085; }
.gcs .gcs-block .gcs-hint { margin-top: -8px; }
.gcs .gcs-block .gcs-pair { margin-top: 16px; }
.gcs .gcs-block textarea { margin-top: 0; }
.gcs .gcs-tz { max-width: 320px; }

/* booking rules */
.gcs .gcs-durations { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; }
.gcs .gcs-durrow { display: flex; align-items: center; gap: 8px; }
.gcs .gcs-stepper { display: flex; align-items: center; gap: 3px; width: 100%; max-width: 310px; height: 40px; padding: 0 6px 0 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; }
.gcs .gcs-stepper:focus-within { border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.2); }
.gcs .gcs-step-input { flex: 1; min-width: 0; height: 34px; border: 0; outline: none; background: none; font: 400 14px/20px Inter, system-ui, sans-serif; color: #333639; -moz-appearance: textfield; }
.gcs .gcs-step-input::-webkit-inner-spin-button, .gcs .gcs-step-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gcs .gcs-step-input::placeholder { color: #98a2b3; }
.gcs .gcs-step { display: grid; place-items: center; width: 28px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: #fff; color: #333639; cursor: pointer; }
.gcs .gcs-step:hover { background: #f2f4f7; }
.gcs .gcs-busywrap { margin-top: 16px; }
.gcs .gcs-busywrap .gcs-toggle-row { margin-bottom: 12px; }
.gcs .gcs-busy { display: flex; align-items: center; width: 314px; max-width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; }
.gcs .gcs-busy input { flex: 1; min-width: 0; height: 34px; border: 0; outline: none; background: none; font: 400 14px/20px Inter, system-ui, sans-serif; color: #333639; padding: 0; }
.gcs .gcs-busy:has(input:disabled) { background: #fafafc; }
.gcs .gcs-busy:has(input:disabled) input, .gcs .gcs-busy:has(input:disabled) .gcs-busy-unit { color: #c2c2c2; }
.gcs .gcs-busy-unit { font-size: 14px; color: #667085; }
.gcs .gcs-busywrap .gcs-hint { margin-top: 0; padding-top: 8px; }

/* form & confirmation */
.gcs .gcs-order { display: flex; align-items: stretch; gap: 8px; }
.gcs .gcs-order-steps { display: flex; flex-direction: column; padding-left: 8px; }
.gcs .gcs-order-steps > div { display: flex; align-items: center; height: 56px; font-size: 14px; font-weight: 500; color: #344054; }
.gcs .gcs-order-list { width: 231px; border: 1px solid #eaecf0; border-radius: 6px; overflow: hidden; }
.gcs .gcs-order-item { display: flex; align-items: center; gap: 0; height: 56px; padding: 0 4px 0 20px; white-space: nowrap; background: #fff; font-size: 14px; font-weight: 500; color: #344054; cursor: grab; }
.gcs .gcs-order-item + .gcs-order-item { border-top: 1px solid #eaecf0; }
.gcs .gcs-order-item > .g-ico { color: #98a2b3; margin-right: 13px; }
.gcs .gcs-order-move { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: #98a2b3; cursor: pointer; }
.gcs .gcs-order-move:hover { background: #f2f4f7; color: #344054; }
.gcs .gcs-card-body > .gcs-radios { margin-bottom: 24px; }

/* payments */
.gcs .gcs-payrow { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.gcs .gcs-badge-err { display: inline-flex; padding: 2px 8px; border-radius: 16px; background: #fee4e2; color: #b42318; font-size: 13px; line-height: 20px; }
.gcs .gcs-payrow .g-link { color: #004eeb; }
.gcs .gcs-paybody { margin-top: 8px; }

/* notifications */
.gcs .gcs-notifs { display: flex; flex-direction: column; }
.gcs .gcs-notif { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 16px; padding: 8px 16px; border: 1px solid #eaecf0; border-radius: 4px; }
.gcs .gcs-notif-ico { display: flex; margin-top: 7px; color: #344054; }
.gcs .gcs-notif-main { flex: 1; min-width: 0; }
.gcs .gcs-notif-top { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.gcs .gcs-notif-top .gcs-roundbtn { margin-left: auto; }
.gcs .gcs-notif-title { flex: 0 1 auto; min-width: 0; max-width: 273px; font-size: 14px; font-weight: 500; line-height: 21px; color: #1d2939; }
.gcs .gcs-notif-chans { display: flex; gap: 8px; flex: none; }
.gcs .gcs-notif-sub { margin-top: 4px; font-size: 13px; line-height: 20px; color: #667085; }
.gcs .gcs-roundbtn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 34px; background: none; color: #344054; cursor: pointer; }
.gcs .gcs-roundbtn:hover { background: #f2f4f7; }
.gcs-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 9.33px; border: 1px solid #e0e0e6; border-radius: 14px; background: #fafafc; font-size: 12px; font-weight: 500; line-height: 18px; color: #344054; white-space: nowrap; }
.gcs-chip.is-on { border-color: #32d583; background: #ecfdf3; color: #12b76a; }
.gcs-chip.is-sm { height: 22px; padding: 0 7.33px; border-radius: 11px; }
.gcs-chip.is-blue { margin-top: 4px; border-color: rgba(21, 94, 239, 0.3); background: rgba(21, 94, 239, 0.1); color: #155eef; }
.gcs .gcs-legend { display: flex; align-items: center; gap: 8px; margin-top: 0; font-size: 14px; line-height: 21px; color: #000; }
.gcs .gcs-notifs .gcs-hint { margin-top: 12px; font-size: 13px; }
.gcs .gcs-expiry { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 14px; line-height: 22px; color: #475467; }

/* widget appearance */
.gcs .gcs-wsub { margin: 0 0 16px; }
.gcs .gcs-wsub-title { font-size: 14px; font-weight: 500; line-height: 21px; color: #101828; }
.gcs .gcs-wsub-desc { font-size: 14px; line-height: 24px; color: #667085; }
.gcs .gcs-wsub-desc.is-sm { font-size: 12px; color: #475467; }
.gcs .gcs-toggle-row + .gcs-wsub, .gcs .gcs-rule + .gcs-wsub { margin-top: 32px; }
.gcs .gcs-card-body > div > .gcs-upload { margin-bottom: 0; }
.gcs .gcs-custom { margin: 20px 0 24px; border: 1px solid #eaecf0; border-radius: 8px; overflow: hidden; }
.gcs .gcs-custom-head { display: flex; gap: 28px; padding: 24px 20px; background: #f9fafb; border-bottom: 1px solid #eaecf0; }
.gcs .gcs-custom-title { font-size: 20px; font-weight: 500; line-height: 28px; color: #344054; }
.gcs .gcs-custom-desc { margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 24px; color: #475467; }
.gcs .gcs-custom-body { padding: 20px 24px; }
.gcs .gcs-custom-sub { margin-bottom: 16px; font-size: 14px; font-weight: 500; line-height: 21px; color: #101828; }
.gcs .gcs-custom-body .gcs-label { font-weight: 400; margin-left: 0; }
.gcs .gcs-custom-body .gcs-field { margin-bottom: 20px; }
.gcs .gcs-colorfield { position: relative; display: flex; align-items: center; gap: 10px; width: 295px; max-width: 100%; height: 42px; padding: 3px 6px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; cursor: pointer; }
.gcs .gcs-colorswatch { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #eaecf0; }
.gcs .gcs-colorhex { font-size: 14px; color: #667085; }
.gcs .gcs-colorfield input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gcs .gcs-custom-foot { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #eaecf0; }
.gcs .gcs-wpreview { flex: none; width: 176px; height: 112px; padding: 10px; overflow: hidden; border: 1px solid #eaecf0; border-radius: 6px; background: var(--wb, #fff); position: static; font-size: 10px; }
.gcs .gcs-wp-title { font-size: 11px; font-weight: 600; color: #101828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcs .gcs-wp-desc, .gcs .gcs-wp-meta { margin-top: 2px; font-size: 9px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcs .gcs-wp-days { display: flex; gap: 4px; margin: 8px 0; }
.gcs .gcs-wp-days span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f2f4f7; font-size: 8px; }
.gcs .gcs-wp-days span.is-on { background: var(--wp, #178af6); color: #fff; }
.gcs .gcs-wp-btn { padding: 4px; border-radius: 4px; background: var(--wp, #178af6); color: #fff; font-size: 9px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; }

/* --- weekly hours (schedules + calendar custom hours) ---------------------- */
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week-col { padding: 24px 0 8px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week-col.is-dates { padding-left: 24px; border-left: 1px solid #eaecf0; }
.gcs .gcs-card .gcs-week { grid-template-columns: minmax(0, 1fr); }
.gcs .gcs-card .gcs-week-col { padding-top: 8px; }
.gcs .gcs-card .gcs-week-col.is-dates { padding: 16px 0 0; border-left: 0; border-top: 1px solid #eaecf0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: #111827; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week-desc { margin: 8px 0 10px; font-size: 13px; line-height: 19.5px; color: #4b5563; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-week-rows { margin-top: 14px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-day { display: flex; align-items: flex-start; padding: 16px 0 9px; border: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-day.is-off { align-items: center; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-day-name { display: flex; align-items: center; gap: 6px; flex: 0 0 70px; margin-top: 25px; padding: 0; font-size: 14px; font-weight: 600; line-height: 24px; color: #101828; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-day.is-off .gcs-day-name { margin-top: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-check { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid #98a2b3; border-radius: 4px; background: #fff no-repeat center / 16px; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-check:checked { border-color: #155eef; background-color: #155eef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-check:focus-visible { box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.2); outline: none; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-day-ranges { display: flex; flex-direction: column; gap: 12px; padding: 0; flex: 1; min-width: 0; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-unavail { font-size: 14px; line-height: 21px; color: #4b5563; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-range { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-range.is-dialog { margin-bottom: 8px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-range-col { display: flex; flex-direction: column; gap: 4px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-range-label { padding-left: 8px; font-size: 14px; line-height: 21px; color: #607179; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-time { display: flex; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-time-in { width: 80px; height: 36px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 6px 0 0 6px; background: #fff; font: 400 14px/20px Inter, system-ui, sans-serif; color: #101828; text-align: center; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-time-in.is-bad { border-color: #f04438; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-time-in:focus, :is(.gcs, .gcs-modal:not(.gcb)) .gcs-time-ap:focus { outline: none; border-color: #155eef; position: relative; z-index: 1; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-time-ap { appearance: none; -webkit-appearance: none; width: 74px; min-width: 0; height: 36px; margin-left: -1px; padding: 0 28px 0 12px; border: 1px solid #d0d5dd; border-radius: 0 6px 6px 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; font: 400 14px/20px Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-range-acts { display: flex; align-items: center; height: 36px; margin-left: -4px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-rowbtn { display: grid; place-items: center; width: 24px; height: 32px; padding: 4px; border: 0; border-radius: 4px; background: none; color: #475467; cursor: pointer; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-rowbtn:hover { background: #f2f4f7; color: #155eef; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-dates { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-date-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f2f4f7; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-date-name { flex: 0 0 120px; margin-top: 30px; font-size: 14px; font-weight: 600; color: #101828; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-date-row > .gcs-rowbtn { margin-top: 27px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-dates-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 0 16px; text-align: center; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-dates-art { display: flex; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-dates-empty-title { margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 20px; color: #111827; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-dates-empty-desc { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #4b5563; }

/* --- Availability tab: schedules ------------------------------------------ */
.gcs .gcs-banner { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid #bfdbfe; border-radius: 0; background: #eff6ff; font-weight: 400; }
.gcs .gcs-banner-new { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 14px; background: #fffaeb; color: #b54708; font-size: 13px; font-weight: 500; }
.gcs .gcs-banner-text { font-size: 15px; font-weight: 500; line-height: 23px; color: #374151; }
.gcs .gcs-banner-link { font-size: 14px; color: #475467; }
.gcs .gcs-banner-x { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 4px; border: 0; background: none; color: #374151; cursor: pointer; }
.gcs .gcs-schedhead { display: flex; justify-content: space-between; align-items: flex-start; margin: 0; padding: 16px; }
.gcs .gcs-schedtitles { display: flex; flex-direction: column; margin-bottom: 12px; }
.gcs .gcs-schedtitle { font-size: 16px; font-weight: 600; line-height: 24px; color: #111827; }
.gcs .gcs-scheddesc { font-size: 14px; line-height: 20px; color: #6b7280; }
.gcs-staffpick { position: relative; display: flex; align-items: center; width: 320px; max-width: 100%; height: 36px; padding: 0 36px 0 12px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; cursor: pointer; }
.gcs-staffpick:focus-within { border-color: #155eef; }
.gcs-staffpick-face { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 20px; color: #101828; white-space: nowrap; overflow: hidden; }
.gcs-staffpick-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; color: #667085; }
.gcs-staffpick-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gcs .gcs-schedcard { margin: 0 16px 16px; padding: 16px 24px; background: #fff; border: 1px solid #eaecf0; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.gcs .gcs-schedtabs { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eaecf0; }
.gcs .gcs-schedtabs .g-tabs { border-bottom: 0; gap: 24px; }
.gcs .gcs-schedtabs .g-tab { color: #475467; }
.gcs .gcs-schedtabs .g-tab.is-on { color: #004eeb; border-bottom-color: #004eeb; }
.gcs .gcs-default { display: inline-flex; padding: 0 8px; border-radius: 9999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 400; line-height: 16px; }
.gcs .gcs-schedbar { display: flex; align-items: flex-end; gap: 16px; padding: 18px 0 24px; border-bottom: 1px solid #eaecf0; }
.gcs .gcs-schedbar .gcs-field { margin: 0; }
.gcs .gcs-schedbar .gcs-label { margin: 0 0 6px; color: #101828; }
.gcs .gcs-sched-f1 { width: 209px; }
.gcs .gcs-sched-f2 { width: 214px; }
.gcs .gcs-activeon { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 12px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font-size: 15px; line-height: 24px; color: #111827; }
.gcs .gcs-activeon .g-ico { color: #98a2b3; }
.gcs .gcs-schedacts { display: flex; align-items: center; }
.gcs .gcs-schedbtn { display: grid; place-items: center; width: 32px; height: 36px; padding: 6px; border: 0; border-radius: 8px; background: none; color: #475467; cursor: pointer; }
.gcs .gcs-schedbtn:hover:not(:disabled) { background: #f2f4f7; }
.gcs .gcs-schedbtn:disabled { color: #d0d5dd; cursor: not-allowed; }

/* --- Preferences ------------------------------------------------------------ */
.gcs .gcs-prefs { max-width: 1152px; }
.gcs .gcs-pagetitle { margin: 0 0 32px; font-size: 30px; font-weight: 500; line-height: 38px; color: #101828; }
.gcs .g-tabs.is-page { margin-bottom: 36px; }
.gcs .gcs-prefhead { margin: 0 0 16px; }
.gcs .gcs-prefrow + .gcs-prefhead { margin-top: 48px; }
.gcs .gcs-preftitle { font-size: 18px; font-weight: 500; line-height: 28px; color: #101828; }
.gcs .gcs-prefdesc { margin-top: 4px; font-size: 14px; line-height: 20px; color: #667085; }
.gcs .gcs-prefrow { display: grid; grid-template-columns: calc(33.333% - 0px) minmax(0, 400px); column-gap: 80px; margin: 0; padding: 24px 0; border-top: 2px solid #eaecf0; }
.gcs .gcs-preflabel { font-size: 14px; font-weight: 400; line-height: 21px; color: #344054; }
.gcs .gcs-preffields .gcs-field:last-child { margin-bottom: 0; }
.gcs .gcs-preffields .gcs-hint { margin-top: 8px; }
.gcs .gcs-svcs { display: flex; flex-direction: column; gap: 8px; }
.gcs .gcs-svc { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 21px; color: #344054; cursor: pointer; }
.gcs .gcs-svc > span:first-child { width: 160px; }
.gcs .gcs-prefsave { display: flex; justify-content: flex-end; margin-top: 24px; }
.gcs .gcs-prefsave .g-btn { height: 40px; }

/* --- Connections ------------------------------------------------------------ */
.gcs .gcs-conn { max-width: 736px; margin: 0 auto; }
.gcs .gcs-conn-top { display: flex; justify-content: space-between; align-items: flex-end; }
.gcs .gcs-conn-top .gcs-label { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 20px; color: #374151; }
.gcs .g-tabs.is-conn { gap: 6px; margin: 22px 0 12px; border-bottom-color: #eaecf0; }
.gcs .g-tabs.is-conn .g-tab { padding: 0 8px 6px; font-weight: 500; line-height: 20px; color: #475467; border-bottom-width: 1px; }
.gcs .g-tabs.is-conn .g-tab.is-on { font-weight: 600; color: #004eeb; border-bottom-color: #004eeb; }
.gcs .gcs-conn-card { margin: 0 0 16px; padding: 16px; background: #fff; border: 1px solid #eaecf0; border-radius: 8px; }
.gcs .gcs-conn-title { font-size: 16px; font-weight: 500; line-height: 24px; color: #111827; }
.gcs .gcs-conn-empty { display: flex; flex-direction: column; align-items: center; padding: 32px 0 32px; text-align: center; }
.gcs .gcs-conn-art { display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #eef2ff 100%); }
.gcs .gcs-conn-art > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(124, 92, 214, 0.35); color: #344054; }
.gcs .gcs-conn-emptytitle { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 24px; color: #111827; }
.gcs .gcs-conn-emptydesc { margin: 4px 0 28px; font-size: 14px; line-height: 24px; color: #6b7280; }
.gcs .gcs-conn-empty .gcs-hint { font-size: 12px; }
.gcs .gcs-private { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; }
.gcs .gcs-private .gcs-switch { width: 36px; height: 20px; }
.gcs .gcs-private .gcs-slider { border-radius: 12px; }
.gcs .gcs-private .gcs-slider::before { width: 16px; height: 16px; border-radius: 8px; }
.gcs .gcs-private .gcs-switch input:checked + .gcs-slider::before { transform: translateX(16px); }
.gcs .gcs-private-text { flex: 1; }
.gcs .gcs-private-title { font-size: 16px; font-weight: 500; line-height: 24px; color: #111827; }
.gcs .gcs-private-desc { font-size: 16px; line-height: 24px; color: #6b7280; }
.gcs .gcs-connrow { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f2f4f7; }
.gcs .gcs-connname { font-size: 14px; font-weight: 500; color: #344054; }

/* troubleshoot sits under the editor-style header */
.gcs .gcs-tswrap { padding: 24px; }

@media (max-width: 1100px) {
  .gcs .gcs-edgrid { grid-template-columns: 191px minmax(0, 1fr); }
  .gcs .cals-main { flex-direction: column; }
  .gcs .cals-rail { width: 100%; flex-basis: auto; }
  .gcs .cals-filters { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .gcs .gcs-edgrid { grid-template-columns: 1fr; padding: 16px; }
  .gcs .gcs-ednav { position: static; }
  .gcs .gcs-staffrow { grid-template-columns: 1fr; gap: 12px; }
  .gcs .gcs-pair, .gcs .gcs-availcards, :is(.gcs, .gcs-modal:not(.gcb)) .gcs-week { grid-template-columns: 1fr; }
  .gcs .gcs-prefrow { grid-template-columns: 1fr; row-gap: 12px; }
  .gcs .gcs-week-col.is-dates { padding-left: 0; border-left: 0; }
  .gcs-qrgrid { grid-template-columns: 1fr; }
}

/* "Count available days only" sits 10px under the date range */
.gcs .gcs-field .gcs-numunit + .gcs-toggle-row { margin: 10px 0 0; }
.gcs .gcs-toggle-label .gcs-info { margin-left: 6px; }

/* ===========================================================================
   Troubleshooting view — GHL's /calendars/:id/troubleshoot, its own tab,
   measured at 1440×900: a 1024px box 96px down, a blue "Troubleshooting
   view" banner, then the booking widget's layout with every slot listed.
=========================================================================== */
body.gts-page { background: #fff; }
.gts-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px 32px; font-family: Inter, Roboto, system-ui, sans-serif; color: #607179; }
.gts-wrap button { font-family: inherit; }
.gts-box { width: min(1024px, 100%); }
.gts-loading, .gts-error { padding: 48px; text-align: center; color: #667085; }
.gts-error { color: #b42318; }
.gts-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #f5f8ff; border: 1px solid #84adff; border-radius: 8px 8px 0 0; }
.gts-headl, .gts-headr { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 21px; color: #004eeb; }
.gts-headr { padding: 0; border: 0; background: none; cursor: pointer; }
.gts-headr:hover { text-decoration: underline; }
.gts-cols { display: grid; grid-template-columns: 341px minmax(0, 1fr); min-height: 700px; border: 1px solid #eaecf0; border-top: 0; border-radius: 0 0 8px 8px; }
.gts-left { padding: 44px 24px 24px; border-right: 1px solid #eaecf0; }
.gts-name { margin: 0; font-size: 22px; font-weight: 500; line-height: 30.8px; color: #101828; }
.gts-meta { display: flex; flex-direction: column; margin-top: 5px; }
.gts-inforow { display: flex; align-items: center; gap: 10px; padding: 4.8px 0; color: #667085; }
.gts-infoval { font-size: 13px; font-weight: 600; line-height: 24px; color: rgba(16, 24, 40, 0.6); }
.gts-staffsel { border: 0; background: transparent; padding: 0; font: 600 13px/24px Inter, system-ui, sans-serif; color: #155eef; cursor: pointer; }
.gts-note { margin-top: 16px; padding: 10px 12px; border: 1px solid #fedf89; border-radius: 8px; background: #fffaeb; color: #93370d; font-size: 13px; }
.gts-right { padding: 25px 0 0 25px; }
.gts-h4 { margin: 0; font-size: 16px; font-weight: 500; line-height: 19.2px; color: #101828; }
.gts-pick { display: grid; grid-template-columns: 383px minmax(0, 1fr); }
.gts-monthnav { display: flex; align-items: center; justify-content: center; gap: 20px; width: 364px; max-width: 100%; height: 41px; margin: 18px 0 21px; }
.gts-month { width: 120px; text-align: center; font-size: 15px; font-weight: 500; line-height: 24px; color: #101828; }
.gts-nav { display: grid; place-items: center; width: 41px; height: 41px; padding: 0; border: 0; border-radius: 50px; background: transparent; color: #667085; cursor: pointer; }
.gts-nav.is-next { background: rgba(21, 94, 239, 0.07); color: #155eef; }
.gts-grid { display: grid; grid-template-columns: repeat(7, 52px); grid-template-rows: 39px; grid-auto-rows: 58px; }
.gts-dow { padding-bottom: 10px; text-align: center; font-size: 13px; font-weight: 500; line-height: 24px; color: #101828; }
.gts-day { display: grid; place-items: center; padding: 7px 0; border: 0; background: none; cursor: pointer; }
.gts-day > span { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px dashed rgba(115, 158, 245, 0.9); border-radius: 50%; font-size: 15px; font-weight: 500; line-height: 24px; color: rgba(116, 120, 130, 0.72); }
.gts-day.is-open > span { border: 1px solid rgba(91, 142, 244, 0.9); background: rgba(21, 94, 239, 0.07); color: #155eef; letter-spacing: 0.8px; }
.gts-day.is-on > span { border-color: rgba(91, 142, 244, 0.9); border-style: solid; background: #155eef; color: #fff; letter-spacing: 0.8px; }
.gts-day.is-today > span::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.gts-day:hover > span { border-style: solid; }
.gts-tz { margin-top: 25px; }
.gts-label { margin-bottom: 5px; font-size: 14px; font-weight: 500; line-height: 20px; color: #101828; }
.gts-tzbox { position: relative; display: flex; align-items: center; gap: 10px; width: 350px; height: 40px; padding: 0 40px 0 18px; font-size: 13px; line-height: 20px; color: #101828; }
.gts-caret { position: absolute; right: 20px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top: 6px solid #155eef; border-bottom: 0; }
.gts-slotcol { min-width: 0; padding-top: 16px; }
.gts-slotlabel { margin: 0 0 24px; font-size: 15px; font-weight: 500; line-height: 24px; color: #101828; }
.gts-slots { display: flex; flex-direction: column; gap: 19px; max-height: 544px; margin: 0; padding: 0 31px 8px 8px; list-style: none; overflow-y: auto; }
.gts-slot { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 230px; min-height: 74px; padding: 5px 10px; border: 1px dashed #98a2b3; border-radius: 4px; background: #fff; }
.gts-slot.is-ok { min-height: 50px; border: 1px solid #155eef; }
.gts-time { font-size: 14px; font-weight: 600; line-height: 21px; color: #1f2937; }
.gts-slot.is-ok .gts-time { color: #155eef; }
.gts-state { margin: 2px 0; font-size: 9px; font-weight: 700; line-height: 13.5px; color: #b42318; }
.gts-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 4px; }
.gts-badge { padding: 1px 6px; border: 1px solid #4b5563; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 15px; color: #4b5563; cursor: help; }
.gts-seats { font-size: 11px; color: #667085; }
.gts-dayoff { padding: 16px 12px; border: 1px dashed #98a2b3; border-radius: 4px; font-size: 13px; text-align: center; color: #475467; }
@media (max-width: 960px) {
  .gts-cols, .gts-pick { grid-template-columns: 1fr; }
  .gts-left { border-right: 0; border-bottom: 1px solid #eaecf0; }
  .gts-wrap { padding: 24px 8px; }
}

/* ===========================================================================
   Settings > Calendars > Service menu · Rooms · Equipment (GHL measured):
   an 18/600 title with search and "Create …" on the right, a table card,
   and GHL's empty state — a ringed icon, a title, a line, "Add new …".
=========================================================================== */
.gcs .cals-subhead { display: flex; justify-content: space-between; align-items: center; margin: -12px 0 16px; }
.gcs .cals-subtitle { font-size: 18px; font-weight: 600; line-height: 27px; color: #101828; }
.gcs .cals-subhead-right { display: flex; align-items: center; gap: 10px; }
.gcs .cals-search.is-200 { width: 200px; }
.gcs .cals-tbl.is-sub { min-width: 0; }
.gcs .cals-sublink { display: inline-block; margin-top: 4px; font-size: 12px; color: #98a2b3; text-decoration: none; }
.gcs .cals-sublink:hover { color: #155eef; text-decoration: underline; }
.gcs .cals-subdesc { margin-top: 4px; font-size: 12px; color: #98a2b3; }
.gcs .cals-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px 49px; text-align: center; }
.gcs .cals-empty-ring { display: grid; place-items: center; width: 46px; height: 46px; border: 8px solid #eff4ff; border-radius: 28px; background: #d1e0ff; color: #155eef; box-sizing: content-box; }
.gcs .cals-empty-title { margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 28px; color: #101828; }
.gcs .cals-empty-desc { font-size: 14px; line-height: 20px; color: #667085; }
.gcs .cals-empty .g-btn { margin-top: 26px; }
.g-btn.is-40 { height: 40px; }

/* Add/edit room · equipment */
.gcs-req { color: #d92d20; font-weight: 400; }
:is(.gcs, .gcs-modal:not(.gcb)) textarea.gcs-input.gcs-short { min-height: 64px; }
:is(.gcs, .gcs-modal:not(.gcb)) .gcs-w220 { max-width: 240px; }
.gcs-modal .gcs-stepper { display: flex; align-items: center; gap: 3px; width: 100%; height: 40px; padding: 0 6px 0 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; }
.gcs-modal .gcs-step-input { flex: 1; min-width: 0; height: 34px; border: 0; outline: none; background: none; font: 400 14px/20px Inter, system-ui, sans-serif; color: #333639; -moz-appearance: textfield; }
.gcs-modal .gcs-step-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gcs-modal .gcs-step { display: grid; place-items: center; width: 28px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: #fff; color: #333639; cursor: pointer; }
.gcs-modal .gcs-step:hover { background: #f2f4f7; }
.gcs-modal .gcs-tagwrap { position: relative; }
.gcs-modal .gcs-tagselect { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 5px 32px 5px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; cursor: pointer; }
.gcs-modal .gcs-tagselect[aria-expanded="true"] { border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.2); }
.gcs-modal .gcs-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 7px; border: 1px solid #e0e0e6; border-radius: 2px; background: #fafafc; font-size: 14px; font-weight: 500; color: #344054; }
.gcs-modal .gcs-tag-x { display: inline-flex; padding: 0; border: 0; background: none; color: #666; cursor: pointer; }
.gcs-modal .gcs-tag-ph { font-size: 15px; color: #667085; }
.gcs-modal .gcs-tag-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; color: #c2c2c2; }
.gcs-modal .gcs-tagpop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 220px; overflow-y: auto; padding: 4px 0; background: #fff; border-radius: 8px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
.gcs-modal .gcs-tagopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; font-size: 14px; color: #344054; cursor: pointer; }
.gcs-modal .gcs-tagopt > span:first-child { flex: 1; }
.gcs-modal .gcs-tagopt:hover { background: #f3f3f5; }
.gcs-modal .gcs-tagopt.is-on { color: #155eef; }
.gcs-tagnone { padding: 12px; text-align: center; font-size: 14px; color: #98a2b3; }

/* the service-menu editor */
.gcs .gsm-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #eaecf0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.gcs .gsm-back { justify-self: start; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 10px 16px; border: 0; border-radius: 3px; background: #fff; font-size: 14px; font-weight: 600; color: #344054; cursor: pointer; }
.gcs .gsm-back:hover { background: #f9fafb; }
.gcs .gsm-title { padding-left: 12px; font-size: 24px; font-weight: 400; line-height: 32px; color: #000; text-align: center; }
.gcs .gsm-acts { justify-self: end; display: flex; align-items: center; gap: 12px; }
.gcs .gsm-share { display: grid; place-items: center; width: 52px; height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #475467; cursor: pointer; }
.gcs .gsm-share:hover { background: #f9fafb; }
.gcs .gsm-grid { display: grid; grid-template-columns: 192px minmax(0, 667px); gap: 56px; justify-content: center; align-items: start; padding: 40px 24px 48px; }
.gcs .gsm-nav { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 12px; }
.gcs .gsm-step { display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 4px 8px; border: 0; border-radius: 4px; background: none; font-size: 14px; font-weight: 400; line-height: 21px; color: #98a2b3; text-align: left; cursor: pointer; }
.gcs .gsm-step:hover:not(:disabled) { color: #475467; }
.gcs .gsm-step.is-on { background: #eff6ff; color: #3b82f6; font-weight: 500; }
.gcs .gsm-step:disabled { cursor: not-allowed; }
.gcs .gsm-pane { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.gcs .gsm-alert { display: flex; gap: 12px; padding: 12px 16px 12px 16px; border: 1px solid #c7dffb; border-radius: 12px; background: #edf5fe; color: #155eef; }
.gcs .gsm-alert-body { flex: 1; padding: 0 0 0 8px; }
.gcs .gsm-alert-title { font-size: 14px; font-weight: 500; line-height: 20px; color: #344054; }
.gcs .gsm-alert-desc { margin-top: 9px; font-size: 14px; line-height: 22px; color: #475467; }
.gcs .gsm-alert-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.gcs .gsm-alert-link { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: #344054; cursor: pointer; }
.gcs .gsm-alert-link:hover { text-decoration: underline; }
.gcs .gsm-alert-x { align-self: flex-start; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #666; cursor: pointer; }
.gcs .gsm-card { padding: 40px; background: #fff; border: 1px solid #eaecf0; border-radius: 12px; }
.gcs .gsm-card .gcs-field { margin-bottom: 28px; }
.gcs .gsm-half { max-width: 384px; }
.gcs .gsm-card > textarea.gsm-half { display: block; width: 100%; margin: 0 0 8px; }
.gcs .gsm-rule { height: 1px; margin: 28px 0 24px; background: #eaecf0; }
.gcs .gsm-options { margin-top: 40px; border: 1px solid #eaecf0; border-radius: 8px; overflow: hidden; }
.gcs .gsm-options-head { padding: 24px 20px 20px; background: #f9fafb; border-bottom: 1px solid #eaecf0; font-size: 20px; font-weight: 500; line-height: 28px; color: #344054; }
.gcs .gsm-options-body { padding: 32px 24px 24px; }
.gcs .gsm-opt { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; cursor: pointer; }
.gcs .gsm-opt-label { display: block; font-size: 14px; line-height: 21px; color: #344054; }
.gcs .gsm-opt-desc { display: block; margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 16px; color: #475467; }
.gcs .gcs-switch.is-big { width: 40px; height: 22px; }
.gcs .gcs-switch.is-big .gcs-slider { border-radius: 11px; }
.gcs .gcs-switch.is-big .gcs-slider::before { width: 18px; height: 18px; border-radius: 9px; }
.gcs .gcs-switch.is-big input:checked + .gcs-slider::before { transform: translateX(18px); }
.gcs .gsm-cardtitle { font-size: 18px; font-weight: 500; line-height: 28px; color: #101828; }
.gcs .gsm-carddesc { margin-top: 4px; font-size: 14px; line-height: 20px; color: #667085; }
.gcs .gsm-tip { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: #f9fafb; font-size: 13px; color: #475467; }
.gcs .gsm-tree { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.gcs .gsm-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: #344054; cursor: pointer; }
.gcs .gsm-check.is-all { font-weight: 500; border-bottom: 1px solid #eaecf0; padding-bottom: 12px; margin-bottom: 4px; }
.gcs .gsm-check.is-group { font-weight: 600; color: #101828; }
.gcs .gsm-cals { padding-left: 28px; }
.gcs .gsm-empty { padding: 40px 0 16px; text-align: center; }
.gcs .gsm-empty-title { font-size: 16px; font-weight: 500; color: #101828; }
.gcs .gsm-empty-desc { margin-top: 4px; font-size: 14px; color: #667085; }
.gcs .gsm-order { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.gcs .gsm-orderrow { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; cursor: grab; }
.gcs .gsm-orderrow > .g-ico { color: #98a2b3; }
.gcs .gsm-ordername { flex: 1; font-size: 14px; font-weight: 500; color: #344054; }
.gcs .gsm-orderdur { font-size: 13px; color: #667085; }
@media (max-width: 960px) {
  .gcs .gsm-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .gcs .gsm-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .gcs .cals-subhead { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* the public service-menu page */
.gbw-card.is-menu { min-height: 0; }
.gbw-card.is-menu .gbw-cols { min-height: 480px; }
.gbw-card.is-menu .gbw-right { padding: 25px 25px 25px; }
.gbw-menu { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.gbw-service { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid #eaecf0; border-radius: 8px; color: inherit; text-decoration: none; }
.gbw-service:hover { border-color: #155eef; background: rgba(21, 94, 239, 0.03); }
.gbw-service-name { font-size: 15px; font-weight: 500; color: #101828; }
.gbw-service-desc { margin-top: 4px; font-size: 13px; color: #667085; }
.gbw-service-meta { display: flex; align-items: center; gap: 12px; flex: none; font-size: 13px; font-weight: 600; color: rgba(16, 24, 40, 0.6); }
.gbw-service-meta .gbw-ico { color: #155eef; }

/* ===========================================================================
   Parity pass (GHL measured 2026-10-20): list rows, the view picker, and the
   appointment drawers — "View details" and "Edit details" with its rail.
=========================================================================== */
.apt-table td { color: #667085; }
.apt-cell-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: #667085; }
.apt-cell-title svg { flex: none; color: #667085; }
.apt-contact { display: inline-flex; align-items: center; gap: 8px; max-width: 196px; padding: 2px 10px 2px 2px; border-radius: 16px; background: #f9fafb; }
.apt-contact-dot { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 9999px; color: #fff; font-size: 10px; line-height: 1; }
.apt-contact-name { font-size: 14px; line-height: 20px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apt-statussel { position: relative; display: inline-flex; align-items: center; width: 152px; height: 40px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; }
.apt-statussel:focus-within { border-color: #155eef; }
.apt-statussel select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 30px 0 12px; border: 0; border-radius: 8px; background: transparent; font: 400 15px/23px Inter, system-ui, sans-serif; color: #333639; cursor: pointer; outline: none; }
.apt-statuschev { position: absolute; right: 10px; display: flex; color: #98a2b3; pointer-events: none; }
.apt-time { max-width: 240px; font-size: 14px; line-height: 20px; color: #667085; }
.apt-kebab { width: 34px; height: 34px; border-radius: 34px; }

/* the view picker — a button and GHL's menu */
.calv-page .calv-viewsel { position: relative; }
.calv-page .calv-viewbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 120px; white-space: nowrap; height: 36px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font: 500 14px/20px Roboto, Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
.calv-page .calv-viewbtn svg { color: #667085; }
.calv-page .calv-viewbtn.is-open { border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.15); }
.calv-viewmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 120px; padding: 4px; background: #fff; border-radius: 6px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
.calv-viewitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font: 400 14px/20px Roboto, Inter, system-ui, sans-serif; color: #344054; text-align: left; cursor: pointer; white-space: nowrap; }
.calv-viewitem:hover { background: #f2f4f7; }
.calv-viewitem.is-on { background: #eff4ff; color: #155eef; }
.calv-viewitem svg { color: #155eef; }

/* the appointment drawers */
.gad-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0); transition: background 0.2s; font-family: Inter, Roboto, system-ui, sans-serif; }
.gad-backdrop.is-open { background: rgba(0, 0, 0, 0.3); }
.gad { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(500px, 100vw); background: #fff; box-shadow: -6px 0 16px -9px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03); transform: translateX(100%); transition: transform 0.22s ease-out; }
.gad-backdrop.is-open .gad { transform: none; }
.gad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 12px 16px 12px 16px; border-bottom: 1px solid #efeff5; }
.gad-title { padding: 5px 0; font-size: 16px; font-weight: 600; line-height: 24px; color: #101828; }
.gad-acts { display: flex; align-items: center; gap: 8px; }
.gad-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: #475467; cursor: pointer; }
.gad-iconbtn:hover { background: #f2f4f7; color: #101828; }
.gad-iconbtn.is-close { border: 1px solid #d0d5dd; width: 28px; height: 28px; color: #666; }
.gad-main { flex: 1; min-height: 0; display: flex; }
.gad-body { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 16px 24px; }
.gad-foot { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid #efeff5; }
.gad-foot:empty { display: none; }
.gad-foot-label { font-size: 14px; font-weight: 500; line-height: 22px; color: #344054; }
.gad-spacer { flex: 1; }
.gad-ico { display: inline-flex; flex: none; }
.gad-ico svg { display: block; }
.gad-chip { display: inline-flex; padding: 4px 8px; border-radius: 9999px; background: #eff4ff; font-size: 14px; font-weight: 500; line-height: 22px; color: #004eeb; }
.gad-name { margin-top: 15px; font-size: 18px; font-weight: 500; line-height: 21px; color: #101828; }
.gad-rule { height: 1px; margin: 21px 0 21px; background: #eaecf0; }
.gad-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.gad-row > .gad-ico { color: #475467; margin-top: 4px; }
.gad-row > div { min-width: 0; }
.gad-grow { flex: 1; }
.gad-label { font-size: 14px; line-height: 20px; color: #667085; }
.gad-label.is-break { margin-top: 7px; word-break: break-all; }
.gad-value { margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 20px; color: #101828; word-break: break-word; }
.gad-value.is-link { color: #2970ff; }
.gad-join { display: flex; align-items: center; justify-content: center; height: 36px; padding: 8px 14px; border-radius: 4px; background: #eff4ff; font-size: 14px; font-weight: 600; color: #004eeb; text-decoration: none; }
.gad-join:hover { background: #e0eaff; }
.gad-status { position: relative; display: inline-flex; align-items: center; gap: 8px; width: 162px; height: 38px; padding: 0 10px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #344054; cursor: pointer; }
.gad-status > .gad-ico:first-child { color: #12b76a; }
.gad-status-text { flex: 1; font-size: 14px; font-weight: 500; line-height: 24px; }
.gad-status-chev { display: flex; color: #98a2b3; }
.gad-status-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gad.has-rail .gad-body { padding-right: 16px; }
.gad-rail { flex: none; display: flex; flex-direction: column; gap: 12px; width: 50px; padding-top: 4px; border-left: 1px solid #efeff5; }
.gad-tab { position: relative; display: grid; place-items: center; width: 100%; height: 40px; padding: 0; border: 0; background: none; color: #667085; cursor: pointer; }
.gad-tab:hover { color: #344054; }
.gad-tab.is-on { color: #004eeb; }
.gad-tab.is-on::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #155eef; }
.gad-field { margin-bottom: 16px; }
.gad-flabel { margin-bottom: 8px; font-size: 14px; font-weight: 500; line-height: 20px; color: #344054; }
.gad-flabel.is-gap { margin-top: 24px; }
.gad-input { display: block; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e0e0e6; border-radius: 8px; background: #fff; font: 400 15px/22px Inter, system-ui, sans-serif; color: #101828; }
.gad-input:focus { outline: none; border-color: #155eef; box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.15); }
.gad-input:disabled { background: #fafafc; color: #344054; }
.gad-input.is-static { display: flex; align-items: center; background: #fff; }
.gad-input.is-mt { margin-top: 12px; }
.gad-select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.gad-area { height: auto; min-height: 80px; padding: 8px 12px; resize: vertical; }
.gad-area.is-tall { min-height: 160px; }
.gad-hint { margin-top: 6px; font-size: 13px; line-height: 18px; color: #667085; }
.gad-hint.is-top { margin: -4px 0 8px; }
.gad-hint.is-box { height: 40px; display: flex; align-items: center; padding: 0 12px; margin: 0; border: 1px dashed #d0d5dd; border-radius: 8px; }
.gad-typerow { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; font-size: 14px; font-weight: 500; color: #344054; }
.gad-typechip { padding: 2px 10px; border-radius: 9999px; background: #eff4ff; color: #155eef; font-weight: 500; }
.gad-timebox { padding: 12px 6px 4px; border-radius: 8px; background: #f9fafb; }
.gad-tzline { margin-bottom: 10px; font-size: 14px; font-weight: 500; color: #344054; }
.gad-seg { display: inline-flex; gap: 4px; margin: 14px 0 12px; padding: 4px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; }
.gad-segbtn { height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: none; font: 500 14px/20px Inter, system-ui, sans-serif; color: #101828; cursor: pointer; }
.gad-segbtn.is-on { background: #eff4ff; color: #155eef; }
.gad-slot { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 8px; }
.gad-radios { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.gad-radio { position: relative; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.gad-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.gad-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1px solid #d0d5dd; border-radius: 50%; background: #fff; }
.gad-radio.is-on .gad-dot { border: 5px solid #155eef; }
.gad-rlabel { display: block; font-size: 15px; line-height: 22px; color: #101828; }
.gad-rsub { display: block; font-size: 12px; line-height: 18px; color: #475467; }
.gad-link { margin-top: 8px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: #155eef; cursor: pointer; }
.gad-link:hover { text-decoration: underline; }
.gad-sechead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; font-weight: 600; line-height: 24px; color: #101828; }
.gad-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 9999px; background: #eff4ff; font-size: 12px; color: #155eef; }
.gad-sub { margin-bottom: 12px; font-size: 14px; color: #667085; }
.gad-people { display: flex; flex-direction: column; gap: 12px; }
.gad-person { display: flex; align-items: center; gap: 12px; }
.gad-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f2f4f7; font-size: 13px; color: #475467; }
.gad-pname { flex: 1; font-size: 14px; font-weight: 500; color: #101828; }
.gad-role { padding: 2px 8px; border-radius: 9999px; background: #ecfdf3; font-size: 12px; color: #067647; }
.gad-card { margin-top: 12px; padding: 16px; border: 1px solid #eaecf0; border-radius: 8px; }
.gad-card.is-center { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gad-cardtitle { font-size: 14px; font-weight: 600; color: #101828; }
.gad-pair { margin-bottom: 12px; }
.gad-pair:last-child { margin-bottom: 0; }
.gad-log { margin: 0; padding: 0 0 0 16px; border-left: 2px solid #eaecf0; list-style: none; }
.gad-log li { position: relative; padding: 0 0 16px 8px; }
.gad-log li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border: 2px solid #155eef; border-radius: 50%; background: #fff; }
.gad-logwhat { font-size: 14px; font-weight: 500; color: #101828; }
.gad-logmeta { margin-top: 2px; font-size: 12px; color: #667085; }
.cals-menu.is-top { z-index: 1100; }
.gcs-backdrop { z-index: 1050; }
.gad-consent .gad-consent-label { margin-top: 12px; font-size: 14px; font-weight: 600; color: #101828; }
.gad-consent .gad-consent-label:first-child { margin-top: 0; }
.gad-consent .gad-consent-text { margin-top: 4px; font-size: 14px; line-height: 20px; color: #475467; }
@media (max-width: 560px) { .gad-foot { flex-wrap: wrap; } }

/* --- booking widget, second depth pass: duration pills, zone search,
   locations, guests count, the no-slots hint, the cancel form --- */
.gbw-durations { margin: 0 0 16px; }
.gbw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gbw-pill { height: 34px; padding: 0 14px; border: 1px solid var(--wp, #155eef); border-radius: 17px; background: #fff; color: var(--wp, #155eef); font: 500 13px/1 Inter, sans-serif; cursor: pointer; }
.gbw-pill.is-on { background: var(--wp, #155eef); color: #fff; }
.gbw-tzpick { position: relative; width: 360px; max-width: 100%; }
.gbw-tzlist { position: absolute; z-index: 5; left: 0; right: 0; top: 44px; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12); }
.gbw-tzopt { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font: 13px/1.3 Inter, sans-serif; color: #101828; cursor: pointer; }
.gbw-tzopt:hover, .gbw-tzopt.is-on { background: color-mix(in srgb, var(--wp, #155eef) 7%, #fff); }
.gbw-noslots { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gbw-locs { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.gbw-loc { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #101828; }
.gbw-logo.is-circle { border-radius: 50%; object-fit: cover; width: 90px; height: 90px; }
.gbw-cancelform { margin-top: 16px; }
.gbw-submit.is-danger { background: #d92d20; }
.gbw-select:disabled, .gbw-submit:disabled { opacity: 0.6; cursor: progress; }

/* --- groups, list confirmations, statuses, connections (calendar-admin.js) */
/* The group rail: a row is the group button plus its ⋮. */
.gcs .cals-grouprow { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
.gcs .cals-grouprow .cals-group { flex: 1; min-width: 0; padding: 5px 5px; }
.gcs .cals-grouprow.is-on { background: #eff4ff; }
.gcs .cals-grouprow.is-off .cals-group-name { color: #98a2b3; }
.gcs .cals-groupmore { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 6px; padding: 0; border: 0; border-radius: 6px; background: none; color: #667085; cursor: pointer; }
.gcs .cals-groupmore:hover, .gcs .cals-groupmore:focus-visible { background: #f2f4f7; color: #344054; outline: none; }

/* "Multiple" durations, and the hover tooltip it shares with "+N". */
.gcs .cals-multi { display: inline-flex; align-items: center; gap: 4px; }
.cals-tipwrap { position: relative; display: inline-flex; align-items: center; color: #667085; cursor: default; }
.cals-tip { display: none; position: absolute; z-index: 20; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 120px; max-width: 280px; padding: 8px 12px; border-radius: 6px; background: #101828; color: #fff; font-size: 12px; line-height: 18px; white-space: normal; box-shadow: 0 4px 8px rgba(16, 24, 40, 0.15); }
.cals-tip ul { margin: 4px 0 0; padding-left: 16px; }
.cals-tip-title { font-weight: 600; }
.cals-tipwrap:hover .cals-tip, .cals-tipwrap:focus-visible .cals-tip { display: block; }
.gcs .cals-svctags { display: flex; flex-wrap: wrap; gap: 6px; }
.gcs .cals-svctag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #eff8ff; color: #175cd3; font-size: 12px; white-space: nowrap; }
.gcs .cals-svctag.is-more { background: #f2f4f7; color: #344054; cursor: pointer; }

/* Confirmations and the group dialogs. */
.g-btn.is-primary.is-danger { background: #d92d20; border-color: #d92d20; }
.g-btn.is-primary.is-danger:hover:not(:disabled) { background: #b42318; border-color: #b42318; }
.gcg-askmsg { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #667085; }
.gcg-askmsg:last-child { margin-bottom: 0; }
.gcg-checkrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; cursor: pointer; }
.gcg-checkbox { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: #155eef; }
.gcg-checktitle { display: block; font-size: 15px; line-height: 22px; color: #344054; }
.gcg-checkdesc { display: block; margin-top: 4px; font-size: 14px; line-height: 22px; color: #667085; }
.gcg-fielderr:empty { display: none; }
.gcg-fielderr { margin-top: 4px; }
.gcg-groupmodal .gcs-field + .gcs-field { margin-top: 16px; }
.gcg-groupmodal textarea.gcs-input { min-height: 72px; resize: vertical; }
.gcg-conflicts { margin-top: 20px; overflow: hidden; border: 1px solid #eaecf0; border-radius: 8px; }
.gcg-conflicts-head, .gcg-conflicts-row { display: flex; }
.gcg-conflicts-head { border-bottom: 1px solid #eaecf0; background: #f9fafb; }
.gcg-conflicts-head > div { flex: 1; padding: 12px 16px; font-size: 12px; font-weight: 500; color: #475467; }
.gcg-conflicts-row + .gcg-conflicts-row { border-top: 1px solid #eaecf0; }
.gcg-conflicts-row > div { flex: 1; padding: 12px 16px; font-size: 14px; color: #475467; }
.gcg-conflicts + .gcg-checkrow { margin-top: 20px; }
.gcg-alert .gcs-modal-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gcg-alert-ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #dcfae6; color: #079455; }
.gcg-order { margin: 0; padding: 10px 0; list-style: none; }
.gcg-orderrow { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid #eaecf0; background: #f2f4f7; font-weight: 600; color: #344054; cursor: move; }
.gcg-orderrow + .gcg-orderrow { border-top: 0; }
.gcg-ordername { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcs .cals-empty-desc:last-child { margin-bottom: 0; }

/* Preferences › Appointment status. */
.gst-head { margin-bottom: 24px; }
.gst-title { font-size: 18px; font-weight: 500; line-height: 28px; color: #101828; }
.gst-sub { font-size: 14px; line-height: 20px; color: #667085; }
.gst-sub .g-link { font-size: 14px; }
.gst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.gst-card { padding: 16px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; }
.gst-cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gst-state { font-size: 16px; font-weight: 600; line-height: 24px; color: #101828; }
.gst-list { margin: 0; padding: 0; list-style: none; }
.gst-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px; }
.gst-row:hover { background: #f9fafb; }
.gst-row.is-editing:hover { background: none; }
.gst-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #344054; }
.gst-lock { display: inline-flex; color: #98a2b3; cursor: help; }
.gst-acts { display: inline-flex; gap: 12px; }
.gst-empty { padding: 6px 8px; font-size: 13px; color: #667085; }
.gst-empty b { font-weight: 600; color: #344054; }
.gst-new { margin-top: 8px; }
.gst-new:disabled { color: #98a2b3; cursor: not-allowed; text-decoration: none; }
.gst-editor { width: 100%; margin-top: 4px; }
.gst-editrow { display: flex; align-items: center; gap: 8px; }
.gst-editrow .gst-input { flex: 1; min-width: 0; }
.gst-err:empty { display: none; }
.gst-archived { margin-top: 12px; padding-top: 8px; border-top: 1px solid #f2f4f7; }
.gst-archtoggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font: 500 13px/20px Inter, system-ui, sans-serif; color: #475467; cursor: pointer; }
.gst-list.is-archived .gst-name { color: #98a2b3; }
.gst-para { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: #475467; }
.gst-impact { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 20px; color: #475467; }
.gst-ack { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #344054; cursor: pointer; }
.gst-help + .gst-help { margin-top: 16px; }
.gst-help-title { font-size: 14px; font-weight: 600; color: #101828; }
.gst-help ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; line-height: 20px; color: #475467; }

/* Connections: provider cards and the activity log. */
.gcs-provider { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f2f4f7; }
.gcs-provider:last-child { border-bottom: 0; }
.gcs-provider-main { flex: 1; min-width: 0; }
.gcs-provider-desc { font-size: 14px; line-height: 20px; color: #475467; }
.gcs-provider-why { margin-top: 2px; font-size: 12px; line-height: 18px; color: #98a2b3; }
.gcs-provider-tag { padding: 2px 8px; border-radius: 16px; background: #ecfdf3; font-size: 12px; font-weight: 500; color: #067647; }
.gcs .gcs-conn-empty.is-compact { padding: 16px 0; }
.gcs .gcs-conn-empty.is-compact .gcs-conn-art { width: 72px; height: 72px; }
.gcs .gcs-conn-empty.is-compact .gcs-conn-emptydesc { margin-bottom: 8px; }
.gcs-actlog-filters { display: flex; gap: 16px; margin-bottom: 16px; }
.gcs-actlog-filters > .gcs-field { flex: 1; min-width: 0; }
.gcs-actlog .gcs-conn-empty { display: flex; flex-direction: column; align-items: center; padding: 24px 0; text-align: center; }
.gcs-actlog .gcs-conn-art { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #eef2ff; }
.gcs-actlog .gcs-conn-emptytitle { margin-top: 8px; font-size: 16px; font-weight: 500; color: #111827; }
.gcs-actlog .gcs-conn-emptydesc { font-size: 14px; color: #6b7280; }
@media (max-width: 560px) { .gcs-actlog-filters { flex-direction: column; } .gst-grid { grid-template-columns: 1fr; } }
.gcs-newconn .gcs-connname { font-size: 14px; font-weight: 500; color: #344054; }

/* ===========================================================================
   Calendar parity pass: event annotation, drag targets, list filters,
   appointment drawers (notes, activity, guests, series), Book drawer extras.
   Owned by calendar.js / calendar-book.js / appointment-drawer.js.
=========================================================================== */

/* GHL's calendar annotation: filled (Confirmed, Showed), outline
   (Unconfirmed, Invalid), outline + strikethrough (Cancelled, No show),
   grey (blocked). --fill is the box colour, --strip the 5px left strip. */
.calv-page .calv-ev.ev-filled, .calv-page .calm-bar.ev-filled, .calv-legend-box.ev-filled { background: var(--fill); border: 1px solid var(--fill); border-left: 5px solid var(--strip, var(--fill)); color: #fff; opacity: 1; text-decoration: none; }
.calv-page .calv-ev.ev-filled .calv-ev-title, .calv-page .calv-ev.ev-filled .calv-ev-time, .calv-page .calv-ev.ev-filled .calv-ev-sub, .calv-page .calm-bar.ev-filled .calm-bar-text { color: #fff; }
.calv-page .calv-ev.ev-outline, .calv-page .calv-ev.ev-strike, .calv-page .calm-bar.ev-outline, .calv-page .calm-bar.ev-strike, .calv-legend-box.ev-outline, .calv-legend-box.ev-strike { background: #fff; border: 1px solid var(--fill); border-left: 5px solid var(--strip, var(--fill)); color: #101828; opacity: 1; }
.calv-page .calv-ev.ev-strike .calv-ev-title, .calv-page .calv-ev.ev-strike .calv-ev-time, .calv-page .calv-ev.ev-strike .calv-ev-sub, .calv-page .calm-bar.ev-strike .calm-bar-text, .calv-legend-box.ev-strike { text-decoration: line-through; }
.calv-page .calv-ev.ev-blocked, .calv-page .calm-bar.ev-blocked, .calv-legend-box.ev-blocked { background: #e1e1e1; border: 1px solid #e1e1e1; border-left: 5px solid #e1e1e1; color: #475467; }
.calv-page .calv-ev.is-recurring .calv-ev-title::after { content: " \21BB"; font-weight: 400; }
.calv-page .calm-bar { cursor: grab; }
.calv-page .calm-cell.is-drop { background: #eff4ff; box-shadow: inset 0 0 0 2px #84adff; }
.calv-legend-row { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #eaecf0; }
.calv-legend-row:last-child { border-bottom: 0; }
.calv-legend-box { position: static !important; flex: none; display: grid; place-items: center; width: 64px; height: 36px; border-radius: 4px; font-size: 12px; font-weight: 600; box-sizing: border-box; }
.calv-legend-head { font-size: 14px; font-weight: 600; color: #101828; }
.calv-legend-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #475467; }
.calv-staffhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.calv-staffhead .gcs-input { flex: 1; }
.calv-staffcolors { max-height: 360px; overflow-y: auto; }
.calv-staffcolor-acts { display: inline-flex; align-items: center; gap: 8px; }

/* list: "New (action required)" is outlined red, as GHL does */
.apt-statussel.is-new { border: 2px solid #f97066; }

/* advanced filters: Is any of, chips */
.gdr-multi { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; padding: 6px 8px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; min-width: 180px; flex: 1; }
.gdr-multirow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #344054; cursor: pointer; }
.gdr-multirow input { margin: 0; accent-color: #155eef; }
.gdr-val-col { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.gdr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gdr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 9999px; background: #eff4ff; color: #004eeb; font-size: 12px; font-weight: 500; }
.gdr-chip-x { border: 0; background: none; color: inherit; font-size: 14px; line-height: 1; padding: 0 4px; cursor: pointer; }

/* appointment drawers */
.g-btn.is-32 { height: 32px; padding: 6px 12px; font-size: 13px; }
.g-btn.is-danger { background: #d92d20; border-color: #d92d20; color: #fff; }
.g-btn.is-danger:hover:not(:disabled) { background: #b42318; border-color: #b42318; }
.gad-series .gcs-modal-body { display: flex; flex-direction: column; gap: 12px; }
.gad-share .gad-sharerow { display: flex; gap: 8px; align-items: center; }
.gad-chip.is-blocked { background: #f2f4f7; color: #344054; }
.gad-dim { color: #667085; font-weight: 400; }
.gad-avatar.is-sm { width: 24px; height: 24px; font-size: 11px; }
.gad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gad-chip.is-person { gap: 6px; align-items: center; padding: 2px 10px 2px 2px; font-size: 13px; background: #f2f4f7; color: #344054; }
.gad-chips.is-readonly { opacity: 0.9; }
.gad-results { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 16px; }
.gad-result { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14px; color: #101828; cursor: pointer; }
.gad-result:hover { background: #f2f4f7; }
.gad-result.is-add { color: #155eef; font-weight: 500; }
.gad-link.is-danger { color: #d92d20; }
.gad-notefilter { display: flex; gap: 16px; margin: 16px 0 8px; }
.gad-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #344054; cursor: pointer; }
.gad-check input { margin: 0; accent-color: #155eef; }
.gad-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.gad-note { padding: 12px; border: 1px solid #eaecf0; border-radius: 8px; }
.gad-notebody { font-size: 14px; line-height: 20px; color: #101828; white-space: pre-wrap; word-break: break-word; }
.gad-notemeta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: #667085; }
.gad-noteacts { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; align-items: center; }
.gad-noteeditor { margin: 8px 0 12px; }
.gad-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 8px; text-align: center; }
.gad-logday + .gad-logday { margin-top: 16px; }
.gad-logdate { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: #344054; }
.gad-logfields { margin-top: 6px; font-size: 13px; }
.gad-logfields summary { cursor: pointer; color: #155eef; font-weight: 500; }
.gad-logtable { width: 100%; margin-top: 6px; border-collapse: collapse; }
.gad-logtable th { width: 38%; padding: 4px 8px 4px 0; text-align: left; font-weight: 500; color: #475467; vertical-align: top; }
.gad-logtable td { padding: 4px 0; color: #101828; word-break: break-word; }
.gad-logfrom { color: #667085; text-decoration: line-through; }
.gad-logto { font-weight: 500; }

/* Book drawer */
.gcs-radios.is-inline { display: flex; gap: 16px; margin: 10px 0; }
.gcb-durations { display: flex; flex-wrap: wrap; gap: 8px; }
.gcb-duration { height: 32px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 9999px; background: #fff; font-size: 13px; font-weight: 500; color: #344054; cursor: pointer; }
.gcb-duration.is-on { border-color: #155eef; background: #eff4ff; color: #155eef; }
.gcb-recur { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #eff4ff; font-size: 13px; color: #004eeb; }
.gcb-recur-count { font-weight: 600; }
.gcb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.gcb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 10px; border-radius: 9999px; background: #f2f4f7; font-size: 13px; color: #344054; }
.gcb-chips.is-readonly .gcb-chip { padding-left: 2px; }
.gcb-result.is-add { color: #155eef; font-weight: 500; }
.gcb-occlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gcb-occ-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #eaecf0; border-radius: 8px; font-size: 13px; }
.gcb-occ-n { color: #667085; }
.gcb-occ-state { color: #067647; font-weight: 500; }
.gcb-occ-row.is-taken .gcb-occ-state { color: #b42318; }
@media (max-width: 560px) { .gcb-recur { flex-direction: column; align-items: flex-start; } .calv-staffhead { flex-direction: column; align-items: stretch; } }

/* --- editor, second depth pass: custom recurrence, logo shape --- */
.gcs-weekdays { display: flex; gap: 8px; }
.gcs-wd { width: 34px; height: 34px; border: 1px solid #d0d5dd; border-radius: 50%; background: #fff; font: 500 13px/1 Inter, sans-serif; color: #344054; cursor: pointer; }
.gcs-wd.is-on { background: #155eef; border-color: #155eef; color: #fff; }
.gcs-logoshape { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.gcs-bullets { margin: 12px 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: #344054; }
.gcs-err { color: #d92d20; font-size: 12px; margin-top: 4px; }
.gcs-copypop { position: absolute; z-index: 60; width: 200px; padding: 12px; border: 1px solid #eaecf0; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(16, 24, 40, 0.14); }
.gcs-copypop-title { font: 600 13px/1.4 Inter, sans-serif; color: #101828; margin-bottom: 6px; }
.gcs-copypop-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; color: #344054; }
.gcs-copypop-acts { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.gcs-datechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gcs-chip-x { margin-left: 4px; border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; }
.gcs-applylist { display: grid; gap: 2px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
button.gcs-activeon { border: 1px solid #d0d5dd; background: #fff; cursor: pointer; }

/* --- Appointment list view: GHL's smart-list tabs, drawer views and rows ---
   (appointment-modal bundle: AppointmentList, UITabs, UISmartList,
   UIManageColumns, UISortFields). */
.apt-tab { max-width: 8rem; }
.apt-tabname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apt-more { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-bottom: 4px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; font-weight: 500; color: #475467; align-self: center; }
.apt-more:hover { background: #f2f4f7; color: #344054; }
.apt-more svg { width: 12px; height: 12px; }
.apt-addlist.is-disabled { color: #d0d5dd; cursor: not-allowed; }
.apt-savebtn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 16px 6px 0; padding: 0 10px 0 14px; border: 0; border-radius: 16px; background: #155eef; color: #fff; font-size: 14px; font-weight: 700; align-self: center; }
.apt-savebtn:hover { background: #004eeb; }
.apt-savebtn svg { width: 18px; height: 18px; }
.apt-savecount { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f04438; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.apt-chip-btn.is-changed { border-color: #84adff; background: #eff4ff; color: #155eef; }

.apt-menu { padding: 4px 0; max-width: 280px; }
.apt-menu .apt-menuicon { display: grid; color: #667085; }
.apt-menu .cals-menuitem:disabled { opacity: 0.5; cursor: not-allowed; }
.apt-menu .cals-menuitem:disabled:hover { background: none; }
.apt-menulist { max-height: 260px; overflow-y: auto; }
.apt-menusearch { display: block; width: calc(100% - 16px); height: 32px; margin: 4px 8px 6px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 6px; font: inherit; font-size: 14px; color: #101828; outline: none; }
.apt-menusearch:focus { border-color: #84adff; box-shadow: 0 0 0 3px #d1e0ff; }
.apt-moremenu { min-width: 220px; }
.apt-moremenu .cals-menuitem span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cals-menu .cals-menuitem:disabled { opacity: 0.5; cursor: not-allowed; }
.cals-menu .cals-menuitem:disabled:hover { background: none; }

.gdr-back { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: none; color: #344054; }
.gdr-back:hover { background: #f2f4f7; }
.gdr-btn { display: inline-flex; align-items: center; gap: 6px; }
.gdr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gdr-name { width: 384px; max-width: 100%; margin-bottom: 32px; }
.gdr-navgroup { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 1px solid #eaecf0; }
.gdr-navgroup.is-last { border-bottom: 0; padding-top: 8px; }
.gdr-navgroup .gdr-navrow { border-bottom: 0; border-radius: 6px; padding: 8px; }
.gdr-navgroup .gdr-navrow:hover { background: #f2f4f7; }
.gdr-navrow.is-delete .gdr-navlabel { flex: 1; }
.gdr-colrow.is-locked { cursor: not-allowed; }
.gdr-colrow.is-locked .gdr-grip { opacity: 0.4; }
.gdr-colname { flex: 1; }
.gdr-lock { display: grid; color: #98a2b3; }

.apt-table th.apt-th-num { width: 100px; }
/* GHL: line-clamp-2, min-w-50 (200px), max-w-60 (240px). */
.apt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; min-width: 200px; max-width: 240px; }
.apt-contact { border: 0; font: inherit; cursor: pointer; text-align: left; }
.apt-contact:hover .apt-contact-name { color: #344054; }
.apt-nocontact { display: inline-grid; margin-left: 8px; color: #d92d20; cursor: help; }
.apt-timecol { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.apt-resched { display: inline-block; padding: 4px 8px; border-radius: 9999px; background: #eff4ff; color: #004eeb; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.apt-statussel.is-busy { opacity: 0.6; }
.apt-pagebtn.is-more { border-color: transparent; background: none; color: #667085; }

.apt-alert { display: flex; align-items: center; gap: 16px; margin: 24px; padding: 16px; border: 1px solid #fda29b; border-radius: 12px; background: #fffbfa; color: #b42318; font-size: 14px; line-height: 20px; }
.apt-alert-text { flex: 1; }
.apt-alert-title { font-weight: 600; }
.apt-alert-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #b42318; font-size: 14px; font-weight: 600; }

.gad-consent .gad-consent-row { display: flex; align-items: flex-start; }
.gad-consent .gad-consent-row .gad-consent-label { width: 16.666%; flex: none; margin: 0; font-size: 14px; font-weight: 500; color: #101828; }
.gad-consent .gad-consent-row .gad-consent-text { flex: 1; margin: 0; }
.gad-consent .gad-consent-divider { margin: 12px 0 8px; border-top: 1px solid #eaecf0; }
/* GHL's appointment-time span: min-w-60 max-w-70. */
.apt-table .apt-time { min-width: 240px; max-width: 280px; }
/* A confirmation asked from inside a list drawer sits above it. */
.gdr-backdrop ~ .dlg-backdrop { z-index: 1200; }
/* The sticky ⋮ column is opaque, as GHL's (`cellProps: backgroundColor
   #ffffff`), with a shadow where the table scrolls under it. */
.apt-table td.apt-act { background: #fff; box-shadow: -6px 0 8px -6px rgba(16, 24, 40, 0.12); }
.apt-table th.apt-th-act { box-shadow: -6px 0 8px -6px rgba(16, 24, 40, 0.12); }
.apt-row:hover td.apt-act { background: #f9fafb; }
/* --- New calendar (CreateCalendarModalWithSchedule.vue) ------------------- */
.gcs-newcal .gcs-adddesc { margin: -8px 0 24px; }
.gcs-newcal .gcs-ruled { border-top: 1px solid #eaecf0; border-bottom: 1px solid #eaecf0; padding: 16px 0 0; margin: 0 0 16px; }
.gcs-newcal .gcs-newcal-dur { align-items: flex-start; gap: 24px; flex-wrap: nowrap; margin: 0; }
.gcs-newcal .gcs-newcal-dur > .is-wide { flex: 2 1 0; }
.gcs-newcal .gcs-newcal-dur > .is-narrow { flex: 1 1 0; }
.gcs-newcal .gcs-newcal-avail { border-bottom: 1px solid #eaecf0; padding-bottom: 8px; }
.gcs-newcal .gcs-newcal-avail > .gcs-hint { margin: 0 0 8px; font-size: 14px; color: #667085; }
.gcs-newcal .gcs-schedpick:not(:empty) { border-top: 2px solid #eaecf0; padding-top: 16px; }
.gcs-schedgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding: 12px 0; }
.gcs-schedcard-mini { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; transition: box-shadow 0.15s; }
.gcs-schedcard-mini:hover { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06); }
.gcs-schedface { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f2f4f7; color: #344054; font-size: 16px; }
.gcs-schedtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gcs-schedname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #344054; line-height: 1.25; }
.gcs-schedavail { font-size: 12px; color: #667085; }
.gcs-newcal .gcs-w256 { width: 256px; margin-top: 20px; }
.gcs-newcal .gcs-newcal-pay { padding-top: 16px; }
.gcs-newcal .gcs-newcal-pay .gcs-paybody { margin-top: 16px; }
.gcs-prefixed.is-suffix > .gcs-input { border-radius: 8px 0 0 8px; }
.gcs-prefixed.is-suffix > span { order: 2; border: 1px solid #d0d5dd; border-left: 0; border-radius: 0 8px 8px 0; }
.gcs-newcal .gcs-advbtn { gap: 8px; }
@media (max-width: 600px) { .gcs-schedgrid { grid-template-columns: 1fr; } .gcs-newcal .gcs-newcal-dur { flex-wrap: wrap; } }

/* --- Success after create (CalendarLinkModal.vue) ------------------------- */
.gcs-linkmodal .gcs-modal-head { padding-bottom: 0; }
.gcs-linkhead { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 40px; text-align: center; }
.gcs-linkring { display: grid; place-items: center; padding: 8px; border: 8px solid #ecfdf3; border-radius: 50%; background: #d1fadf; color: #12b76a; }
.gcs-linktitle { font-size: 16px; color: #101828; }
.gcs-linksub { font-size: 14px; font-weight: 300; color: #98a2b3; }
.gcs-linkrow { display: flex; align-items: center; gap: 16px; }
.gcs-suffixed { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; }
.gcs-suffixed > .gcs-input { flex: 1; min-width: 0; border: 0; box-shadow: none; }
.gcs-suffixcopy { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 0 8px; padding: 0; border: 0; background: none; color: #155eef; font: 400 14px/20px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.gcs-openlink { display: grid; place-items: center; padding: 0; border: 0; background: none; color: #155eef; cursor: pointer; }
.gcs-openlink.is-hidden { visibility: hidden; }

/* --- Select calendar group (SelectMoveTeamModal.vue) ---------------------- */
.gcg-move .gcs-modal-body select { width: 100%; }

/* --- Appointment list › Advanced filters (appointment-filters.js) ---------
   GHL's UICompoundFilter: the group card is gray-50 with a gray-200 border,
   rows inside it are joined by an "AND" divider tag, groups by "OR"; the
   selects are Naive UI's 40px n-select; "Clear filters" is red-400 and only
   shows while the group is hovered or focused. */
.aflt { display: flex; flex-direction: column; align-items: stretch; }
.aflt-group { border: 1px solid #eaecf0; border-radius: 6px; background: #f9fafb; padding: 8px 8px 0; display: flex; flex-direction: column; }
.aflt-row { display: flex; flex-direction: column; gap: 8px; }
.aflt-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.77fr); gap: 8px; align-items: start; }
.aflt-line + .aflt-line { grid-template-columns: minmax(0, 1fr) 40px; }
.aflt-item { display: flex; flex-direction: column; min-width: 0; }
.aflt-error { color: #f04438; font-size: 12px; line-height: 16px; padding-top: 4px; }
.aflt-value { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.aflt-value > .is-wide { flex: 1; }
.aflt-value .aflt-dateop { width: 128px; flex: none; }
.aflt-value .aflt-datepick { flex: 1; min-width: 0; }
.aflt-value .aflt-amount { width: 96px; flex: none; }
.aflt-value .aflt-unit { flex: 1; min-width: 96px; }
.aflt-input { height: 40px; width: 100%; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; color: #101828; background: #fff; outline: none; }
.aflt-input:focus { border-color: #84adff; box-shadow: 0 0 0 4px #eff4ff; }
.aflt-input:disabled { background: #f9fafb; color: #98a2b3; cursor: not-allowed; }
.aflt-input::placeholder { color: #98a2b3; }
.aflt-input.is-invalid, .aflt-sel.is-invalid, .aflt-range.is-invalid { border-color: #fda29b; }
.aflt-range { display: flex; align-items: center; height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; padding: 0 4px; box-sizing: border-box; }
.aflt-range .aflt-input { border: 0; height: 36px; padding: 0 6px; min-width: 0; box-shadow: none; }
.aflt-range-sep { color: #98a2b3; font-size: 13px; flex: none; }
.aflt-sel { position: relative; min-height: 40px; box-sizing: border-box; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; display: flex; align-items: center; padding: 0 32px 0 12px; cursor: pointer; outline: none; font-size: 14px; color: #101828; }
.aflt-sel:hover { border-color: #b2ccff; }
.aflt-sel:focus-visible, .aflt-sel.is-open { border-color: #84adff; box-shadow: 0 0 0 4px #eff4ff; }
.aflt-sel.is-disabled { background: #f9fafb; cursor: not-allowed; border-color: #d0d5dd; box-shadow: none; }
.aflt-sel.is-disabled .aflt-sel-ph { color: #d0d5dd; }
.aflt-sel.is-multi { padding-left: 6px; }
.aflt-sel-face { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; flex: 1; padding: 4px 0; }
.aflt-sel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aflt-sel-ph { color: #98a2b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aflt-sel.is-multi .aflt-sel-ph { padding-left: 6px; }
.aflt-sel-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #98a2b3; display: grid; transition: transform 0.15s; }
.aflt-sel.is-open .aflt-sel-arrow { transform: translateY(-50%) rotate(180deg); }
.aflt-tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 26px; padding: 0 4px 0 8px; border-radius: 6px; background: #f2f4f7; color: #344054; font-size: 13px; }
.aflt-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aflt-tag-x { border: 0; background: none; color: #98a2b3; padding: 2px; display: grid; cursor: pointer; border-radius: 4px; }
.aflt-tag-x:hover { color: #344054; background: #eaecf0; }
.aflt-menu { position: fixed; z-index: 1300; background: #fff; border-radius: 8px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); border: 1px solid #eaecf0; padding: 4px; box-sizing: border-box; font-family: Inter, Roboto, system-ui, sans-serif; }
.aflt-menu-list { max-height: 296px; overflow-y: auto; }
.aflt-menu-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 4px; border-bottom: 1px solid #eaecf0; color: #98a2b3; }
.aflt-menu-search input { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; color: #101828; min-width: 0; }
.aflt-menu-empty { padding: 10px 12px; font-size: 14px; color: #98a2b3; }
.aflt-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #101828; }
.aflt-opt:hover { background: #f9fafb; }
.aflt-opt.is-on { background: #f5f8ff; color: #155eef; }
.aflt-opt.is-disabled { cursor: not-allowed; color: #d0d5dd; background: none; }
.aflt-opt-text { flex: 1; min-width: 0; }
.aflt-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aflt-opt-desc { font-size: 12px; color: #98a2b3; }
.aflt-opt-check { color: #155eef; display: grid; flex: none; }
.aflt-del { width: 40px; height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.aflt-del:hover { background: #f9fafb; color: #d92d20; }
.aflt-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.aflt-divider::before, .aflt-divider::after { content: ''; flex: 1; height: 1px; background: #eaecf0; }
.aflt-divider-tag { font-size: 12px; font-weight: 500; line-height: 18px; color: #344054; background: #eaecf0; border-radius: 4px; padding: 1px 8px; }
.aflt-tail { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 8px; }
.aflt-and { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 6px; margin-left: -2px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #475467; cursor: pointer; }
.aflt-and:hover { color: #344054; background: #f2f4f7; }
.aflt-clear { border: 0; background: transparent; color: #f87171; font-size: 14px; padding: 4px 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease-out; }
.aflt-clear:hover { color: #dc2626; }
.aflt-group:hover .aflt-clear, .aflt-group:focus-within .aflt-clear { opacity: 1; }
.aflt-add { align-self: flex-start; margin-top: 16px; height: 36px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; color: #344054; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); cursor: pointer; }
.aflt-add:hover { background: #f9fafb; }
.aflt-add svg, .aflt-and svg { width: 20px; height: 20px; }
@media (max-width: 520px) {
  .aflt-line { grid-template-columns: minmax(0, 1fr); }
  .aflt-value { flex-wrap: wrap; }
}