/* Black Lab: typography, surfaces and motion. Loaded after the component styles. */
@font-face {
  font-family: "Inter"; src: url("./fonts/InterVariable.woff2") format("woff2");
  font-style: normal; font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Manrope"; src: url("./fonts/ManropeVariable.woff2") format("woff2");
  font-style: normal; font-weight: 200 800; font-display: swap;
}
:root {
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Manrope", "Inter", "Segoe UI", sans-serif;
  --bg-primary: #101216; --bg-secondary: #191c22;
  --surface-solid: #22262e; --surface-elevated: #2a2f39;
  --text-primary: #f3f3f5; --text-secondary: #b7bdc9; --text-muted: #979fad;
  --border: #3b424f; --border-subtle: #2d333e;
  --accent: #c73532; --accent-hover: #d5403c; --accent-active: #aa2a29;
  --accent-soft: rgba(215,64,60,.13);
  --radius-lg: 16px; --radius-dialog: 22px; --control-radius: 10px;
  --control-height: 42px; --control-font-size: 14px;
  --font-size-page: 22px; --font-size-body: 14px;
  --font-size-label: 13px; --font-size-caption: 12px; --line-height-body: 1.5;
  --shadow-surface: 0 8px 28px #00000021, inset 0 1px 0 #ffffff05;
  --shadow-dialog: 0 40px 110px #0009, 0 8px 30px #0005, inset 0 1px 0 #ffffff12;
  --motion-fast: 140ms; --motion-normal: 220ms; --motion-slow: 300ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --focus-ring: 0 0 0 3px #d34a4540; --focus-border: #e7726e;
  --cal-off-shift-gradient: linear-gradient(135deg, #352429a6, #211d2380);
  --cal-off-day-gradient: linear-gradient(135deg, #38262da6, #211d2399);
  --cal-shift-edge: #a9575a66;
}
html { scrollbar-gutter: stable; }
body {
  background: radial-gradient(ellipse at 95% 0%, #60293123, transparent 42%),
    radial-gradient(ellipse at 10% 15%, #33445e1c, transparent 40%), var(--bg-primary);
  background-attachment: fixed; font-optical-sizing: auto;
}
button, input, select, textarea { font-family: var(--font); }
h1, h2, h3, .wordmark, .card .value, .client-drawer-stat .value {
  font-family: var(--font-heading); letter-spacing: -.025em;
}
button, .bl-select-trigger, summary, a {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast), border-color var(--motion-fast),
    color var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast);
}
input, select, textarea, .bl-select-trigger, .date-display {
  background-color: #22262e; border-color: #404856;
  box-shadow: inset 0 1px 2px #00000014; color: var(--text-primary);
}
input::placeholder, textarea::placeholder { color: #929cab; opacity: 1; }
input:focus, textarea:focus, .bl-select-trigger:focus-visible, .date-display:focus-visible {
  border-color: var(--focus-border); box-shadow: var(--focus-ring); outline: none;
}
:is(button, a, summary):focus-visible { outline: 2px solid #ee8a83; outline-offset: 3px; }
:is(input,textarea,select)[aria-invalid="true"] { border-color: var(--danger); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[readonly] { border-style: dashed; }
:is(input[inputmode="numeric"],input[type="number"],input[inputmode="decimal"],.finance-cell,.sessions-left,.date-display,.cal-time) {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
button.primary, button[type="submit"]:not(.ghost):not(.danger) {
  background: linear-gradient(180deg, #d33c38, #b52d2d);
  border: 1px solid #e5605947; box-shadow: 0 4px 12px #801c2526, inset 0 1px 0 #ffffff13;
}
button.primary:hover:not(:disabled), button[type="submit"]:not(.ghost):not(.danger):hover:not(:disabled) {
  background: linear-gradient(180deg, #d23c36, #c33431);
  border-color: #ed817859; box-shadow: 0 5px 18px #95212a40, inset 0 1px 0 #ffffff1c;
}
button.primary:active:not(:disabled), button[type="submit"]:not(.ghost):not(.danger):active:not(:disabled) {
  background: var(--accent-active); box-shadow: inset 0 2px 4px #0002;
}
button.ghost { color: var(--text-secondary); }
button.ghost:hover:not(:disabled) { color: var(--text-primary); background-color: #ffffff09; }
button.danger { background: #dc606011; border-color: #dc606033; color: #ffaaa5; }
.topbar { background: #14171deb; border-color: var(--border-subtle); backdrop-filter: blur(18px); gap: 12px; }
.wordmark { font-family: var(--font-heading); }
.wordmark__black { color: #f3f3f5; }
.wordmark--nav { font-size: 22px; }
.tabs { gap: 5px; }
.tab { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; padding: 10px 12px; white-space: nowrap; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; }
.tab.active { background: linear-gradient(110deg, #c7353222, #c7353208); border-color: #cb555733; color: #fff; }
.tab.active .nav-icon { color: #f07d75; opacity: 1; }
.tab.active::after { height: 2px; background: #df625a; bottom: 0; left: 12px; right: 12px; }
#signed-in-name { color: var(--text-secondary); font-size: 12px; }
#notifications-btn.has-unread { border-color: #9a514d66; background: #c7353209; }
main { padding: 24px 28px 32px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(24px, 2.1vw, 30px); font-weight: 750; line-height: 1.2; margin: 0 0 7px; }
.page-heading p { color: var(--text-secondary); font-size: 13px; margin: 0; }
.page-heading::after { content: ""; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg,#d04b44,transparent); align-self: center; }
.toolbar { padding: 16px; margin-bottom: 18px; border: 1px solid var(--border-subtle); border-radius: 14px; background: #191c22d9; gap: 12px; }
.toolbar-filter { gap: 7px; }
.toolbar > input[type="search"] { flex: 1 1 260px; width: auto; min-width: 200px; }
.toolbar .primary { margin-left: auto; order: 10; }
.table-wrap { background: linear-gradient(160deg,#1e2229,#191c22); border-color: var(--border-subtle); border-radius: 16px; }
th { background: #242933; color: #bbc3cf; padding: 13px 16px; font-size: 12px; font-weight: 550; letter-spacing: .015em; }
td { padding: 13px 16px; font-size: 13px; line-height: 1.5; border-bottom-color: #30364299; }
tbody tr > td { transition: background-color var(--motion-fast), box-shadow var(--motion-fast); }
tbody tr:hover > td, tbody tr:focus-within > td { background-color: #ffffff06; }
tbody tr:hover > td:first-child, tbody tr:focus-within > td:first-child { box-shadow: inset 2px 0 0 #d96760; }
.client-name-link { text-decoration: none; font-weight: 600; }
.client-name-link:hover, .client-name-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.status-chip { padding: 3px 8px; font-size: 11px; font-weight: 550; letter-spacing: 0; }
.table-actions .ghost { padding: 6px 10px; font-size: 12px; border-color: #ffffff0a; }
.table-empty, .operations-empty { padding: 40px 24px; line-height: 1.6; }
#services-list.table-wrap { background: transparent; border: 0; box-shadow: none; }
#services-list.services-groups { padding: 0; gap: 0; }
#services-list .service-group { background: #1a1e25; border: 1px solid var(--border-subtle); border-radius: 16px; overflow: auto; margin: 0 0 20px; padding: 0; }
#services-list .service-group-header { padding: 17px 18px; background: linear-gradient(120deg,#292b34,#20252e); }
#services-list .service-group-header h3 { font-size: 17px; }
#services-list thead th { background: #242933; border-color: var(--border-subtle); }
#services-list tbody td { height: 54px; }
#services-list tbody tr:hover td, #services-list tbody tr:focus-within td { background: #ffffff07; }
#services-list .amount-sale { color: var(--text-primary); }
.calendar-sidebar { background: linear-gradient(165deg, #24262e, #191d24); border-color: var(--border-subtle); box-shadow: var(--shadow-surface); }
.calendar-month-toolbar strong { font-family: var(--font-heading); font-weight: 650; }
.calendar-month-day { font-variant-numeric: tabular-nums; }
.calendar-month-day[aria-pressed="true"] { box-shadow: 0 3px 12px #b8333333; }
.calendar-workspace .calendar-toolbar { background: #191d24b3; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px; gap: 8px; }
.calendar-workspace .calendar-toolbar .date-display { min-width: 160px; }
.calendar-workspace .calendar-toolbar .calendar-staff-filter { flex-basis: 200px; }
.appt-payment-legends { flex-basis: 100%; gap: 8px 14px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.appt-payment-legend { font-size: 11px; }
.appt-payment-legend::before { width: 6px; height: 6px; border-radius: 50%; }
.calendar-view-options { gap: 10px; }
.calendar-staff-notices > * { background: #20242ccc; border-color: var(--border-subtle); }
.calendar-drag-hint { color: var(--text-muted); font-size: 11px; }
.calendar-scroll { border-color: var(--border-subtle); border-radius: 16px; box-shadow: var(--shadow-surface); }
.cal-header-cell { background: linear-gradient(180deg, #252a34, #20252e); }
.cal-staff-name { font-family: var(--font-heading); font-weight: 700; }
.calendar-workspace .appt[data-payment-tone]:not([data-payment-tone="none"]):not(.is-filtered) {
  background: linear-gradient(110deg, color-mix(in srgb, var(--payment-color) 12%, #202630), #202630);
  border: 1px solid color-mix(in srgb, var(--payment-color) 45%, #303642);
  border-left: 3px solid var(--payment-color); box-shadow: 0 3px 10px #0002;
}
.calendar-workspace .appt[data-payment-tone]:not([data-payment-tone="none"]):not(.is-filtered):hover {
  filter: none; border-color: var(--payment-color); box-shadow: 0 4px 14px #0005;
}
.appt-payment-chip { border-color: transparent; background: color-mix(in srgb, var(--payment-color) 14%, #202630); }
.calendar-workspace .appt:not(.is-tiny):not(.is-compact) .appt-client-link { font-weight: 650; font-size: 13px; }
.appt-service, .appt-time { color: var(--text-secondary); }
.cards { gap: 16px; }
.card { padding: 22px; border-color: var(--border-subtle); background: linear-gradient(145deg,#262a33,#1b1f26); box-shadow: var(--shadow-surface); }
.card .value { color: var(--text-primary); font-size: 30px; font-weight: 650; letter-spacing: -.04em; }
.card .label { font-size: 12px; line-height: 1.45; margin-top: 9px; color: var(--text-secondary); }
#dashboard-cards > .card:first-child { background: linear-gradient(135deg,#4b2a30,#252129 80%); border-color: #82504d6b; }
.report-section, .settings-section { border-color: var(--border-subtle); background: linear-gradient(150deg,#1f232b,#191d24); border-radius: 16px; box-shadow: var(--shadow-surface); }
.report-section h3, .settings-section h3 { font-size: 16px; font-weight: 700; }
.bar-fill { background: linear-gradient(90deg, #ab3534, #e16c5f); }
dialog, .booking-dialog, dialog.client-drawer { background: #1c2028; border: 1px solid #4a515e; border-radius: var(--radius-dialog); box-shadow: var(--shadow-dialog); }
dialog::backdrop, .booking-dialog::backdrop, dialog.client-drawer::backdrop { background: #080a10b8; backdrop-filter: blur(5px); }
.booking-dialog .dialog-header, .client-drawer-header { background: linear-gradient(120deg,#292e39,#242832); border-bottom-color: #3b424f; padding: 18px 22px; }
.dialog-header h2, .client-drawer-header h2 { font-family: var(--font-heading); font-size: 21px; line-height: 1.3; font-weight: 750; }
.booking-dialog .dialog-body { background: #1c2028; padding: 20px 22px; gap: 16px; }
.booking-dialog .dialog-footer, .dialog-actions { background: #20242c; border-top-color: #353b47; padding: 15px 22px; }
.dialog-header > .icon-btn, .client-drawer-close { border-radius: 50%; background: #ffffff05; color: var(--text-secondary); }
.booking-dialog .dialog-body label, .booking-col label { color: #c0c6d0; }
.dialog-field { gap: 7px; }
.booking-col h3 { font-family: var(--font-heading); }
#appointment-dialog .booking-col--schedule { background: #191d24; }
#appointment-dialog .booking-col--services { background: #1c2028; }
#appointment-dialog .booking-col--client { background: #222731; }
#appointment-dialog .booking-col h3 { color: #e1e3e9; font-size: 14px; font-weight: 700; }
#appointment-dialog .appointment-item { background: #232832; border-color: #3e4552; border-radius: 14px; padding: 16px; }
#appointment-dialog .appointment-item[data-payment-tone]:not([data-payment-tone="none"]) {
  background: linear-gradient(120deg, color-mix(in srgb, var(--payment-color) 6%, #232832), #232832);
  border-color: color-mix(in srgb, var(--payment-color) 35%, #3e4552);
  border-left: 3px solid var(--payment-color);
}
.appt-group-segment[data-payment-tone]:not([data-payment-tone="none"]) { background: transparent; }
#appointment-dialog .appointment-item-head { padding-bottom: 10px; border-bottom: 1px solid #ffffff09; }
#appointment-dialog .appointment-item-head strong { font-family: var(--font-heading); font-size: 14px; }
#appointment-dialog .appointment-item-calc { padding-top: 14px; }
#appointment-dialog .appointment-item-price-hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
#appointment-dialog .booking-time-summary { background: #c7353210; border-color: #ae555447; font-weight: 550; }
.appointment-payment-panel { background: linear-gradient(145deg,#2b303b,#242933); border-color: #495261; border-radius: 14px; }
.appointment-payment-panel[data-payment-tone]:not([data-payment-tone="none"]) { background: color-mix(in srgb, var(--payment-color) 8%, #252b35); border-color: color-mix(in srgb, var(--payment-color) 42%, #3b4351); }
button.btn-abonement-action { background: #2b333e; border-color: #454f5e; color: #e1e6ed; box-shadow: none; }
button.btn-abonement-action:hover:not(:disabled) { background: #35404c; border-color: #69778a; }
.client-drawer-stat { background: #242933; border-color: var(--border-subtle); }
.bl-select-list, .date-popover, .calendar-slot-menu, .calendar-status-options { background: #292f3a; border-color: #4a5362; box-shadow: 0 16px 40px #0006, inset 0 1px 0 #ffffff08; border-radius: 13px; }
.bl-select-option { transition: background-color var(--motion-fast); }
.bl-select-option:hover, .bl-select-option.is-active { background-color: #ffffff0d; }
.login-card { background: linear-gradient(145deg,#272a34,#1b1f27); border-color: #424654; box-shadow: var(--shadow-dialog); border-radius: 24px; padding: 36px; }
.login-card p { color: var(--text-secondary); }

/* Animate the view itself without delaying navigation, requests or native focus. */
@keyframes bl-view-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes bl-panel-enter { from { opacity: 0; } to { opacity: 1; } }
.view:not(.hidden) { animation: bl-panel-enter var(--motion-normal) var(--motion-ease); }
.view:not(.hidden) .page-heading h1 { animation: bl-view-enter var(--motion-slow) var(--motion-ease); }
.bl-select-list:not(.hidden), .date-popover:not(.hidden), .calendar-slot-menu:not(.hidden) { animation: bl-view-enter var(--motion-fast) var(--motion-ease); }
/* Native dialog close still happens immediately. The browser retains the painted
   top layer for the exit transition, with no timers or patched close methods. */
@supports (transition-behavior: allow-discrete) {
  dialog, .booking-dialog, dialog.client-drawer {
    opacity: 0;
    transition: opacity var(--motion-normal) var(--motion-ease),
      display var(--motion-normal) allow-discrete, overlay var(--motion-normal) allow-discrete;
  }
  dialog[open], .booking-dialog[open], dialog.client-drawer[open] { opacity: 1; }
  dialog::backdrop { opacity: 0; transition: opacity var(--motion-normal), display var(--motion-normal) allow-discrete, overlay var(--motion-normal) allow-discrete; }
  dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog[open], .booking-dialog[open], dialog.client-drawer[open] { opacity: 0; }
    dialog[open]::backdrop { opacity: 0; }
  }
}
@supports not (transition-behavior: allow-discrete) {
  dialog[open] { animation: bl-panel-enter var(--motion-normal) var(--motion-ease); }
}
@media (min-width: 1180px) {
  .topbar { position: fixed; inset: 0 auto 0 0; width: 200px; flex-flow: column nowrap; align-items: stretch; padding: 28px 14px 18px; border-right: 1px solid var(--border-subtle); border-bottom: 0; background: linear-gradient(160deg,#1c1e26fa,#15181efc 55%); }
  .brand { justify-content: center; margin: 0 0 32px; flex-shrink: 0; }
  .wordmark--nav .wordmark__suffix { display: none; }
  .tabs { flex: 1; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .tab { width: 100%; min-height: 45px; justify-content: flex-start; }
  .tab.active::after { inset: 12px auto 12px -1px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  #signed-in-name { padding: 16px 12px 0; border-top: 1px solid var(--border-subtle); }
  #notifications-btn, #logout-btn { text-align: left; padding: 10px 12px; }
  #logout-btn { font-size: 12px; min-height: 36px; }
  .app > main { margin-left: 200px; }
  .calendar-workspace { grid-template-columns: 200px minmax(0,1fr); gap: 18px; }
}
@media (max-width: 1179px) {
  .topbar { padding: 12px 20px; }
  .tabs { order: 5; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 3px; }
  .topbar .brand { margin-right: auto; }
  main { padding: 22px 20px; }
}
@media (max-width: 700px) {
  main { padding: 20px 12px; }
  .topbar { position: relative; padding: 12px; gap: 8px; }
  .wordmark--nav { font-size: 20px; }
  .topbar #signed-in-name { display: none; }
  .topbar #notifications-btn, .topbar #logout-btn { font-size: 11px; padding: 8px; }
  .tab { font-size: 12px; gap: 7px; padding: 10px; }
  .nav-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { font-size: 12px; }
  .toolbar { padding: 12px; gap: 10px; }
  .toolbar .primary { margin-left: 0; }
  .toolbar > input[type="search"] { flex-basis: 100%; min-width: 0; }
  input, select, textarea, .bl-select-trigger { font-size: 16px; }
  .calendar-workspace .calendar-toolbar .date-display { min-width: 0; }
  .calendar-workspace .calendar-toolbar .calendar-staff-filter { flex-basis: 180px; }
  .card { padding: 18px; }
  .card .value { font-size: 26px; }
  .booking-dialog .dialog-header, .client-drawer-header { padding: 15px 16px; }
  .dialog-header h2, .client-drawer-header h2 { font-size: 18px; }
  .booking-dialog .dialog-body { padding: 16px; }
  .booking-dialog .dialog-footer, .dialog-actions { padding: 12px 16px; }
  #appointment-dialog .appointment-item { padding: 12px; }
  dialog::backdrop { backdrop-filter: blur(3px); }
}
@media (pointer: coarse) {
  :is(button,.bl-select-trigger,summary) { min-height: 44px; }
  .calendar-month-day { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --text-secondary: #d9dee7; --text-muted: #c6cfdd; --border-subtle: #596371; }
}

/* Quick day scheduling: pick an employee, clocks or a complete shift. */
#schedule-dialog.booking-dialog { width: min(600px, calc(100vw - 24px)); }
#schedule-dialog .dialog-body { display: flex; flex-direction: column; gap: 16px; }
#schedule-dialog .schedule-staff-field, #schedule-dialog .schedule-clock-pair label,
#schedule-dialog .schedule-manual-fields label { display: grid; gap: 7px; min-width: 0; }
#schedule-dialog .schedule-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 0; border: 0; }
#schedule-dialog .schedule-row.hidden { display: none; }
.schedule-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.schedule-row-heading strong { font-family: var(--font-heading); font-size: 16px; }
.schedule-row-heading .muted { margin-top: 3px; }
.schedule-clock-pair { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr); gap: 10px; align-items: end; }
.schedule-clock-separator { align-self: end; padding-bottom: 12px; color: var(--text-muted); }
.schedule-clock-pair .bl-select-trigger { min-height: 46px; font-size: 16px; font-variant-numeric: tabular-nums; }
.schedule-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
button.schedule-preset { padding: 10px 6px; min-height: 40px; border: 1px solid #414958; background: #252c36; color: var(--text-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
button.schedule-preset[aria-pressed="true"] { background: var(--accent-soft); border-color: #c75a55; color: #ffd4ce; }
.schedule-selection-summary { margin: 0; padding: 12px 14px; border: 1px solid #424b5a; background: #262d37; border-radius: 10px; font-variant-numeric: tabular-nums; }
.schedule-selection-summary.is-error { color: #ffaaa5; border-color: #a85859; }
.schedule-manual summary { color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.schedule-manual-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
#schedule-dialog[data-extension="1"] .schedule-row + .schedule-row { border-top: 1px solid var(--border-subtle); padding-top: 18px; }
@media (max-width: 420px) {
  #schedule-dialog .dialog-header { padding-inline: 14px; }
  #schedule-dialog .dialog-header h2 { font-size: 17px; }
  .schedule-row-heading { flex-wrap: wrap; gap: 8px; }
  .schedule-presets { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Booking: clock lists, duration modes and one-click service selection. */
#appointment-dialog .booking-columns { grid-template-columns: 220px minmax(0,1fr) 300px; }
.booking-time-picker { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;min-width:0; }
.booking-time-picker label { display:grid;gap:6px;min-width:0; }
.booking-duration-choice { grid-column:1 / -1; }
#appointment-dialog .booking-time-picker .bl-select-trigger { padding-inline:10px;font-variant-numeric:tabular-nums; }
#appointment-dialog .appointment-manual-time { font-size:12px;min-width:0; }
#appointment-dialog .appointment-manual-time[open] > .appointment-time-editor { margin-top:10px; }
.booking-duration-mode { display:grid;gap:8px;background:#242a34;border:1px solid #3e4654;border-radius:12px;padding:12px 14px; }
#appointment-dialog .booking-duration-toggle { display:flex;align-items:center;gap:10px;color:#eef0f5;font-size:13px;line-height:1.4;cursor:pointer; }
#appointment-dialog .booking-duration-toggle input { appearance:none;flex:0 0 36px;width:36px;height:21px;min-height:0;margin:0;border:1px solid #778293;border-radius:20px;background:#4a5361;padding:2px;position:relative;transition:background 160ms ease; }
#appointment-dialog .booking-duration-toggle input::after { content:'';display:block;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform 160ms ease; }
#appointment-dialog .booking-duration-toggle input:checked { background:#bd3534;border-color:#da6462; }
#appointment-dialog .booking-duration-toggle input:checked::after { transform:translateX(15px); }
#appointment-dialog .booking-duration-toggle input:focus-visible { outline:2px solid #e48e89;outline-offset:3px; }
#appointment-duration-mode-hint { margin:0;font-size:12px;line-height:1.45; }
.booking-service-picker { display:grid;gap:12px;padding:14px;border:1px solid #3e4552;border-radius:14px;background:#20252f; }
.booking-service-picker-head { font-family:var(--font-heading);font-size:14px; }
.booking-service-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
#appointment-dialog .booking-service-card { display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;min-width:0;padding:12px;background:#2a303b;border:1px solid #4a5260;border-radius:10px;color:#eef0f5; }
#appointment-dialog .booking-service-card:hover { background:#333944;border-color:#a06162;transform:translateY(-1px); }
.booking-service-card strong { font-size:12px;line-height:1.4;font-weight:600;overflow-wrap:anywhere; }
.booking-service-card span { color:#b8c0cd;font-size:11px;line-height:1.45; }
.booking-service-card .booking-service-card-action { color:#efaaa6;margin-top:auto; }
.booking-service-cards > .muted { grid-column:1 / -1;margin:0; }
#appointment-dialog .booking-exact-duration { font-size:11px;margin-top:5px; }
.booking-exact-duration summary { cursor:pointer;color:#b3bdcc; }
.booking-exact-duration[open] input { margin-top:6px; }
#appointment-dialog .appointment-item.is-empty .appointment-item-calc,
#appointment-dialog .appointment-item.is-empty .appt-sessions-field,
#appointment-dialog .appointment-item.is-empty .appointment-item-grid > label:last-child { display:none; }
#appointment-dialog .appointment-item-price-hint { display:none; }
#appointment-dialog .appointment-item-duration-control > span { display:none; }
#appointment-dialog .appointment-item-head strong { line-height:1.4; }
@media (min-width:1440px) { #appointment-dialog .booking-columns { grid-template-columns:240px minmax(0,1fr) 330px; } }
@media (max-width:1100px) {
  #appointment-dialog .booking-columns { grid-template-columns:190px minmax(0,1fr) 260px; }
  .booking-service-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  #appointment-dialog .booking-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appointment-dialog .booking-col--schedule > .booking-time-picker { grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .booking-duration-choice { grid-column:auto; }
}
@media (max-width:600px) {
  #appointment-dialog .booking-columns { grid-template-columns:minmax(0,1fr); }
  #appointment-dialog .booking-col--schedule > .booking-time-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .booking-duration-choice { grid-column:1 / -1; }
  .booking-service-card strong { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { .booking-duration-toggle input,.booking-duration-toggle input::after { transition:none!important; } }

#appointment-dialog .booking-item-settings { margin-top:8px; }
#appointment-dialog .booking-item-settings > summary,
#appointment-dialog .booking-item-duration-settings > summary { font-size:12px;color:#bec7d6;cursor:pointer;padding:4px 0; }
#appointment-dialog .booking-item-settings[open] .appointment-item-grid { margin-top:10px; }
#appointment-dialog .booking-item-duration-settings { grid-column:1 / -1; }
#appointment-dialog .booking-item-duration-settings[open] .appointment-item-duration-control { margin-top:8px; }
#appointment-dialog .appointment-item-timing { font-size:12px;color:#b4bece; }