/*
 * ModActiv Agenda design system
 * A semantic visual layer shared by the operational admin, booking and invite
 * flows. Tenant-controlled landing-page colors intentionally remain untouched.
 */

:root {
  --ma-font-sans: Inter, "SF Pro Text", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ma-text: #27272a;
  --ma-text-strong: #18181b;
  --ma-text-muted: #71717a;
  --ma-text-subtle: #a1a1aa;
  --ma-canvas: #fafafa;
  --ma-surface: #ffffff;
  --ma-surface-raised: #ffffff;
  --ma-surface-soft: #f8f8f9;
  --ma-surface-hover: #f2f2f4;
  --ma-border: #e4e4e7;
  --ma-border-strong: #d4d4d8;
  --ma-accent: #4f46e5;
  --ma-accent-hover: #4338ca;
  --ma-accent-soft: #eef2ff;
  --ma-accent-border: #c7d2fe;
  --ma-success: #16804a;
  --ma-success-soft: #eaf8f0;
  --ma-warning: #9a6700;
  --ma-warning-soft: #fff7df;
  --ma-danger: #c43d4b;
  --ma-danger-soft: #fff0f1;
  --ma-info: #2868c7;
  --ma-info-soft: #eef5ff;
  --ma-nav-bg: #ffffff;
  --ma-nav-text: #71717a;
  --ma-nav-active: #4f46e5;
  --ma-radius-sm: 8px;
  --ma-radius-md: 10px;
  --ma-radius-lg: 12px;
  --ma-radius-xl: 16px;
  --ma-shadow-xs: 0 1px 2px rgb(16 24 40 / 4%);
  --ma-shadow-sm: 0 1px 3px rgb(16 24 40 / 5%), 0 5px 16px rgb(16 24 40 / 4%);
  --ma-shadow-md: 0 18px 45px rgb(16 24 40 / 10%);
  --ma-focus: 0 0 0 3px rgb(79 70 229 / 18%);
  --ma-control-height: 42px;
  --ma-transition: 160ms cubic-bezier(.2, .8, .2, 1);
}

html[data-admin-theme="soft"] {
  --ma-text: #352e2a;
  --ma-text-strong: #241f1c;
  --ma-text-muted: #756b64;
  --ma-text-subtle: #9b8f86;
  --ma-canvas: #f6f2ed;
  --ma-surface: #fffdfa;
  --ma-surface-raised: #fffdfa;
  --ma-surface-soft: #faf6f1;
  --ma-surface-hover: #f3ece4;
  --ma-border: #e3d9ce;
  --ma-border-strong: #d1c2b3;
  --ma-accent: #966044;
  --ma-accent-hover: #7f4e35;
  --ma-accent-soft: #f6e9df;
  --ma-accent-border: #e6cdbc;
  --ma-nav-bg: #fffdfa;
  --ma-nav-text: #756b64;
  --ma-nav-active: #966044;
  --ma-focus: 0 0 0 3px rgb(150 96 68 / 17%);
}

html[data-admin-theme="dark"] {
  color-scheme: dark;
  --ma-text: #e7eaf2;
  --ma-text-strong: #f7f8fc;
  --ma-text-muted: #a0a8ba;
  --ma-text-subtle: #747d91;
  --ma-canvas: #101219;
  --ma-surface: #191c25;
  --ma-surface-raised: #1e222d;
  --ma-surface-soft: #222631;
  --ma-surface-hover: #292e3b;
  --ma-border: #303644;
  --ma-border-strong: #424959;
  --ma-accent: #8582f2;
  --ma-accent-hover: #9693ff;
  --ma-accent-soft: #292948;
  --ma-accent-border: #494a78;
  --ma-success: #80d6a4;
  --ma-success-soft: #183326;
  --ma-warning: #f0c566;
  --ma-warning-soft: #382f19;
  --ma-danger: #ff9ca7;
  --ma-danger-soft: #3d2128;
  --ma-info: #9ac1ff;
  --ma-info-soft: #1c2c46;
  --ma-nav-bg: #191c25;
  --ma-nav-text: #a0a8ba;
  --ma-nav-active: #7470e6;
  --ma-shadow-xs: 0 1px 2px rgb(0 0 0 / 18%);
  --ma-shadow-sm: 0 8px 24px rgb(0 0 0 / 16%);
  --ma-shadow-md: 0 22px 60px rgb(0 0 0 / 40%);
  --ma-focus: 0 0 0 3px rgb(133 130 242 / 25%);
}

.admin-body,
.booking-page,
.invite-page {
  min-height: 100vh;
  color: var(--ma-text);
  background: var(--ma-canvas);
  font-family: var(--ma-font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.admin-body {
  background-image:
    radial-gradient(circle at 8% -10%, rgb(79 70 229 / 6%), transparent 30rem),
    linear-gradient(var(--ma-canvas), var(--ma-canvas));
}

html[data-admin-theme="soft"] .admin-body {
  background-image:
    radial-gradient(circle at 8% -10%, rgb(150 96 68 / 10%), transparent 30rem),
    linear-gradient(var(--ma-canvas), var(--ma-canvas));
}

html[data-admin-theme="dark"] .admin-body {
  background-image:
    radial-gradient(circle at 8% -10%, rgb(94 91 198 / 16%), transparent 30rem),
    linear-gradient(var(--ma-canvas), var(--ma-canvas));
}

.admin-body h1,
.admin-body h2,
.admin-body h3,
.booking-page h1,
.booking-page h2,
.booking-page h3,
.invite-page h1,
.invite-page h2 {
  color: var(--ma-text-strong);
  font-family: var(--ma-font-sans);
  font-weight: 720;
  letter-spacing: -.025em;
}

.admin-body h2,
.booking-page h2,
.invite-page h2 {
  font-size: 1.22rem;
  line-height: 1.25;
}

.admin-body h3,
.booking-page h3 {
  font-size: 1rem;
  letter-spacing: -.012em;
}

.admin-body .muted,
.admin-body .empty,
.booking-page .empty,
.invite-page .muted {
  color: var(--ma-text-muted);
}

.admin-body .brand,
.booking-page .brand,
.invite-page .brand {
  color: var(--ma-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
}

/* Controls */
.admin-body button,
.admin-body input,
.admin-body select,
.admin-body textarea,
.booking-page button,
.booking-page input,
.booking-page select,
.booking-page textarea,
.invite-page button,
.invite-page input,
.invite-page select,
.invite-page textarea {
  min-height: var(--ma-control-height);
  border: 1px solid var(--ma-border-strong);
  border-radius: var(--ma-radius-sm);
  outline: none;
  background: var(--ma-surface);
  color: var(--ma-text);
  transition: border-color var(--ma-transition), background var(--ma-transition),
    color var(--ma-transition), box-shadow var(--ma-transition), transform var(--ma-transition);
}

.admin-body input,
.admin-body select,
.admin-body textarea,
.booking-page input,
.booking-page select,
.booking-page textarea,
.invite-page input,
.invite-page select,
.invite-page textarea {
  width: 100%;
  padding: 9px 12px;
  box-shadow: inset 0 1px 1px rgb(16 24 40 / 2%);
}

.admin-body textarea,
.booking-page textarea,
.invite-page textarea {
  resize: vertical;
  line-height: 1.5;
}

.admin-body input:hover,
.admin-body select:hover,
.admin-body textarea:hover,
.booking-page input:hover,
.booking-page select:hover,
.booking-page textarea:hover,
.invite-page input:hover,
.invite-page select:hover,
.invite-page textarea:hover {
  border-color: var(--ma-text-subtle);
}

.admin-body :is(input, select, textarea):focus,
.booking-page :is(input, select, textarea):focus,
.invite-page :is(input, select, textarea):focus {
  border-color: var(--ma-accent);
  box-shadow: var(--ma-focus);
}

.admin-body :is(input, textarea)::placeholder,
.booking-page :is(input, textarea)::placeholder,
.invite-page :is(input, textarea)::placeholder {
  color: var(--ma-text-subtle);
}

.admin-body label,
.booking-page label,
.invite-page label {
  gap: 7px;
  color: var(--ma-text);
  font-size: .87rem;
  font-weight: 640;
}

.admin-body label small,
.booking-page label small,
.invite-page label small {
  color: var(--ma-text-muted);
  font-weight: 450;
}

.admin-body button,
.booking-page button,
.invite-page button {
  padding: 9px 14px;
  color: var(--ma-text);
  font-weight: 640;
  box-shadow: var(--ma-shadow-xs);
}

.admin-body button:hover:not(:disabled),
.booking-page button:hover:not(:disabled),
.invite-page button:hover:not(:disabled) {
  border-color: var(--ma-border-strong);
  background: var(--ma-surface-hover);
  transform: translateY(-1px);
}

.admin-body button:active:not(:disabled),
.booking-page button:active:not(:disabled),
.invite-page button:active:not(:disabled) {
  transform: translateY(0);
}

.admin-body button:focus-visible,
.admin-body a:focus-visible,
.booking-page button:focus-visible,
.booking-page a:focus-visible,
.invite-page button:focus-visible,
.invite-page a:focus-visible {
  outline: none;
  box-shadow: var(--ma-focus);
}

.admin-body .primary,
.booking-page .primary,
.invite-page .primary,
html[data-admin-theme] .admin-body .primary {
  border-color: var(--ma-accent) !important;
  background: var(--ma-accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 8%), 0 6px 16px rgb(79 70 229 / 18%);
}

.admin-body .primary:hover:not(:disabled),
.booking-page .primary:hover:not(:disabled),
.invite-page .primary:hover:not(:disabled) {
  border-color: var(--ma-accent-hover) !important;
  background: var(--ma-accent-hover) !important;
  box-shadow: 0 8px 20px rgb(79 70 229 / 22%);
}

.admin-body .danger-button {
  border-color: color-mix(in srgb, var(--ma-danger) 28%, var(--ma-border));
  background: var(--ma-danger-soft);
  color: var(--ma-danger);
}

.admin-body button:disabled,
.booking-page button:disabled,
.invite-page button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.admin-body input[type="checkbox"],
.booking-page input[type="checkbox"],
.invite-page input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 17px;
  padding: 0;
  accent-color: var(--ma-accent);
}

.admin-body input[type="color"],
.booking-page input[type="color"],
.invite-page input[type="color"] {
  width: 56px;
  min-height: 36px;
  padding: 3px;
  cursor: pointer;
}

/* Surface system */
.admin-body .card,
.booking-page .card,
.invite-page .card {
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-sm);
}

.admin-body .card {
  padding: 22px;
}

.admin-body .section-heading {
  align-items: flex-start;
  gap: 16px;
}

.admin-body .section-heading h2,
.admin-body .section-heading p {
  margin-top: 0;
}

.admin-body .success,
.admin-body .error,
.booking-page .success,
.booking-page .error,
.invite-page .success,
.invite-page .error {
  border: 1px solid transparent;
  border-radius: var(--ma-radius-md);
  font-size: .9rem;
  font-weight: 600;
}

.admin-body .success,
.booking-page .success,
.invite-page .success {
  border-color: color-mix(in srgb, var(--ma-success) 22%, transparent);
  background: var(--ma-success-soft);
  color: var(--ma-success);
}

.admin-body .error,
.booking-page .error,
.invite-page .error {
  border-color: color-mix(in srgb, var(--ma-danger) 22%, transparent);
  background: var(--ma-danger-soft);
  color: var(--ma-danger);
}

.admin-body .empty {
  margin: 12px 0 0;
  padding: 28px 20px;
  border: 1px dashed var(--ma-border-strong);
  border-radius: var(--ma-radius-md);
  background: var(--ma-surface-soft);
  text-align: center;
}

/* Application shell */
.admin-body .admin-shell {
  width: min(1580px, calc(100% - 40px));
  margin: 20px auto 36px;
}

.admin-body .admin-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  margin: 0 0 20px;
  padding: 16px 18px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--ma-border) 88%, transparent);
  border-radius: var(--ma-radius-lg);
  background: color-mix(in srgb, var(--ma-surface) 92%, transparent);
  box-shadow: var(--ma-shadow-sm);
  backdrop-filter: blur(18px);
}

.admin-body .admin-identity {
  min-width: 0;
  padding-left: 13px;
  border-left: 3px solid var(--ma-accent);
}

.admin-body .admin-header h1 {
  max-width: 36ch;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 1.34rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .active-account {
  margin: 2px 0 0;
  color: var(--ma-text-muted);
  font-size: .78rem;
}

.admin-body .admin-header-actions {
  gap: 10px;
}

.admin-body .admin-utility-buttons {
  gap: 7px;
}

.admin-body .admin-header-actions button,
.admin-body .admin-theme-picker select {
  min-height: 40px;
  border-color: var(--ma-border);
  border-radius: 10px;
  background: var(--ma-surface);
}

.admin-body .admin-header-actions button {
  color: var(--ma-text-muted);
  box-shadow: none;
}

.admin-body .admin-header-actions button:hover {
  color: var(--ma-text-strong);
}

.admin-body .admin-theme-picker {
  color: var(--ma-text-muted);
  font-size: .72rem;
  font-weight: 700;
}

.admin-body .admin-theme-picker select {
  color: var(--ma-text);
  font-size: .78rem;
  font-weight: 650;
}

.admin-body #dashboard:not([hidden]) {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 0;
  align-items: start;
}

.admin-body #dashboard > .demo-banner {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 18px;
}

.admin-body #dashboard > .admin-tabs {
  grid-column: 1;
  grid-row: 2;
}

.admin-body #dashboard > .tab-panel {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.admin-body .admin-tabs {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  background: var(--ma-nav-bg);
  box-shadow: var(--ma-shadow-sm);
  backdrop-filter: blur(18px);
}

.admin-body .admin-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ma-nav-text);
  font-size: .87rem;
  text-align: left;
  box-shadow: none;
}

.admin-body .admin-tab svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.admin-body .admin-tab:hover:not(:disabled) {
  border-color: transparent;
  background: var(--ma-surface-hover);
  color: var(--ma-text-strong);
  transform: none;
}

.admin-body .admin-tab.active,
html[data-admin-theme] .admin-body .admin-tab.active {
  border-color: rgb(255 255 255 / 9%) !important;
  background: var(--ma-nav-active) !important;
  color: #fff !important;
  box-shadow: none;
}

/* Page-level hierarchy. Primary actions live where the user reads the page title. */
.admin-body .workspace-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 18px;
  padding: 2px 2px 16px;
  border-bottom: 1px solid var(--ma-border);
}

.admin-body .workspace-heading h2 {
  margin: 2px 0 3px;
  font-size: 1.55rem;
}

.admin-body .workspace-heading p {
  max-width: 70ch;
  margin: 0;
  color: var(--ma-text-muted);
}

.admin-body .workspace-kicker {
  color: var(--ma-accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-body .workspace-primary-action {
  flex: 0 0 auto;
  min-height: 43px;
  white-space: nowrap;
}

.admin-body .tab-panel {
  animation: ma-panel-enter 220ms ease-out both;
}

@keyframes ma-panel-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Authentication */
.admin-body .login-card,
.invite-page .invite-account-card {
  width: min(460px, 100%);
  max-width: none;
  margin: clamp(48px, 10vh, 110px) auto;
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--ma-radius-xl);
  box-shadow: var(--ma-shadow-md);
}

.admin-body .login-card::before,
.invite-page .invite-account-card::before {
  display: block;
  width: 44px;
  height: 5px;
  margin-bottom: 25px;
  border-radius: 99px;
  background: var(--ma-accent);
  content: "";
}

.admin-body .login-card h2,
.invite-page .invite-account-card h1 {
  margin-bottom: 8px;
  font-size: 1.65rem;
}

.admin-body .login-card .primary,
.invite-page .invite-account-card .primary {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
}

.admin-body .auth-link,
.invite-page .auth-link {
  color: var(--ma-accent);
  font-weight: 650;
  text-decoration: none;
}

.invite-page {
  background-image:
    radial-gradient(circle at 20% 0, rgb(79 70 229 / 13%), transparent 28rem),
    radial-gradient(circle at 100% 80%, rgb(56 189 248 / 8%), transparent 24rem);
}

/* Calendar workspace */
.admin-body .calendar-controls-tile {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-lg);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-sm);
}

.admin-body .calendar-controls-summary {
  min-height: 62px;
  padding: 10px 12px 10px 16px;
}

.admin-body .calendar-picker {
  color: var(--ma-text-muted);
  font-size: .78rem;
}

.admin-body .calendar-picker select {
  min-width: min(360px, 46vw);
  margin-left: 7px;
  font-size: .86rem;
}

.admin-body .calendar-controls-details {
  gap: 10px;
  padding: 11px 12px;
  border-color: var(--ma-border);
  background: var(--ma-surface-soft);
}

.admin-body .view-tabs {
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ma-border);
  border-radius: 10px;
  background: var(--ma-surface);
}

.admin-body .view-tabs button {
  min-height: 34px;
  padding: 6px 11px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-body .view-tabs button.active,
html[data-admin-theme] .admin-body .view-tabs button.active {
  background: var(--ma-accent-soft) !important;
  color: var(--ma-accent) !important;
  box-shadow: inset 0 0 0 1px var(--ma-accent-border);
}

.admin-body .calendar-navigation strong {
  color: var(--ma-text-strong);
  font-size: .88rem;
  font-weight: 720;
  text-align: center;
}

.admin-body .drag-help {
  color: var(--ma-text-subtle);
  font-size: .72rem;
}

.admin-body .outlook-calendar {
  overflow: auto;
  border-color: var(--ma-border);
  border-radius: 8px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-sm);
  scrollbar-gutter: stable;
}

.admin-body .outlook-calendar.outlook-time-grid,
.admin-body .outlook-calendar.outlook-month-grid {
  overflow: auto;
}

.admin-body .time-axis,
.admin-body .time-corner,
.admin-body .time-day-header,
.admin-body .month-day {
  border-color: var(--ma-border);
  background: var(--ma-surface);
  color: var(--ma-text);
}

.admin-body .time-day-header {
  font-size: .8rem;
  font-weight: 650;
}

.admin-body .time-day-header strong {
  color: var(--ma-text-strong);
}

.admin-body .time-label {
  color: var(--ma-text-subtle);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}

/* Hour labels sit centred on their line; the first line is the top edge under the sticky day
   row, so that label goes just below it instead of being half hidden. */
.admin-body .time-corner + .time-label {
  padding-top: 3px;
  transform: none;
}

.admin-body .time-day,
.admin-body .time-slot,
.admin-body .month-day,
.admin-body .month-weekday {
  border-color: var(--ma-border);
}

/* Like Teams: working hours plain, the rest of the day shaded. Past time is hatched on top, so both stay readable. */
.admin-body .time-day-body {
  background: color-mix(in srgb, var(--ma-text-subtle) 16%, var(--ma-surface));
}

.admin-body .working-hours {
  background: var(--ma-surface);
  border-color: var(--ma-border);
}

/* Slots are buttons; without this the generic button fill hides the shading underneath. */
.admin-body .time-slot,
html[data-admin-theme] .admin-body .time-slot {
  background: transparent;
}

.admin-body .time-slot.past-slot,
.admin-body .time-slot.past-slot:hover,
html[data-admin-theme] .admin-body .time-slot.past-slot,
html[data-admin-theme] .admin-body .time-slot.past-slot:hover {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ma-text-subtle) 22%, transparent) 6px 7px);
  opacity: 1;
}

.admin-body .time-slot:hover:not(:disabled),
.admin-body .month-day:hover:not(.past-day) {
  background: var(--ma-accent-soft);
}

/* Current time on today's column: an arrow head on the left edge, then the line. Above events, below the sticky header. */
.admin-body .now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: #e5383b;
  pointer-events: none;
}

.admin-body .now-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  border-block: 6px solid transparent;
  border-left: 9px solid #e5383b;
}

.admin-body .positioned-event {
  border-radius: 7px;
  box-shadow: 0 2px 7px rgb(16 24 40 / 12%);
  transition: filter var(--ma-transition), box-shadow var(--ma-transition), transform var(--ma-transition);
}

.admin-body .positioned-event:hover {
  z-index: 8;
  box-shadow: 0 8px 20px rgb(16 24 40 / 18%);
  transform: translateY(-1px);
}

.admin-body .calendar-fab {
  position: fixed;
  z-index: 70;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 1.65rem;
  box-shadow: 0 12px 28px rgb(79 70 229 / 34%);
}

.admin-body .calendar-fab span {
  transform: translateY(-1px);
}

/* Content layouts */
.admin-body .services-layout,
.admin-body .quick-messages-layout,
.admin-body .site-editor-layout {
  gap: 18px;
}

.admin-body .services-layout {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.admin-body .services-layout > .card,
.admin-body .management-top-grid > .card,
.admin-body .site-editor-layout .card {
  margin-top: 0;
}

.admin-body .service-manage-row,
.admin-body .management-row,
.admin-body .quick-message-row {
  border-color: var(--ma-border);
  transition: background var(--ma-transition);
}

.admin-body .service-manage-row:hover,
.admin-body .management-row:hover,
.admin-body .quick-message-row:hover {
  background: var(--ma-surface-soft);
}

.admin-body .service-manage-row,
.admin-body .management-row,
.admin-body .quick-message-row {
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: var(--ma-radius-sm);
}

.admin-body .clients-workspace {
  display: block;
  margin-top: 0;
}

.admin-body .clients-workspace > .card {
  width: 100%;
  margin: 0 0 12px;
}

.admin-body .client-search-tile {
  padding: 16px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-body .client-search-tile .client-search-field {
  max-width: 680px;
}

.admin-body .client-filters-card {
  box-shadow: none;
}

.admin-body .client-filters {
  gap: 12px;
}

.admin-body .client-service-tags span,
.admin-body .visibility-badge,
.admin-body .publication-badge,
.admin-body .user-status,
.admin-body .detail-type {
  border-radius: 999px;
  font-weight: 740;
  letter-spacing: .01em;
}

.admin-body .client-service-tags span {
  background: var(--ma-accent-soft);
  color: var(--ma-accent) !important;
}

/* Clients are a true full-width list. Action availability never changes row width. */
.admin-body .clients-list {
  display: block;
  width: 100%;
  border-top: 1px solid var(--ma-border);
}

.admin-body .client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--ma-border);
  border-radius: 0;
  background: transparent;
}

.admin-body .client-main,
.admin-body .client-main:hover,
.admin-body .client-main:focus-visible {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--ma-text);
  text-align: left;
  box-shadow: none !important;
  transform: none !important;
}

.admin-body .client-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 240px;
}

.admin-body .client-row-actions button {
  min-width: 72px;
}

.admin-body .client-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.admin-body .client-action svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-body .management-intro {
  margin: 2px 0 18px;
}

.admin-body .management-intro h2 {
  margin-bottom: 4px;
  font-size: 1.45rem;
}

.admin-body .management-top-grid {
  gap: 18px;
}

.admin-body .company-home-tile {
  border-color: var(--ma-accent-border);
  background: var(--ma-surface);
}

.admin-body .company-tile-heading,
.admin-body .company-home-tile .company-legal-note {
  border-color: var(--ma-border);
}

.admin-body .company-home-tile .company-legal-note,
.admin-body .company-home-tile .company-missing-fields,
.admin-body .integration-notice,
.admin-body .sms-preview,
.admin-body .attendance-actions,
.admin-body .client-attendance-summary,
.admin-body .client-booking-block {
  border: 1px solid var(--ma-border);
  background: var(--ma-surface-soft);
  color: var(--ma-text);
}

.admin-body .calendar-management-grid {
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
}

.admin-body .calendar-manage-tile {
  border-color: var(--ma-border);
  border-radius: var(--ma-radius-md);
  background: var(--ma-surface-soft);
  transition: border-color var(--ma-transition), box-shadow var(--ma-transition), transform var(--ma-transition);
}

.admin-body .calendar-manage-tile:hover {
  border-color: var(--ma-border-strong);
  box-shadow: var(--ma-shadow-sm);
  transform: translateY(-2px);
}

.admin-body .calendar-add-tile {
  min-height: 164px;
  border-color: var(--ma-accent-border);
  border-radius: var(--ma-radius-md);
  background: var(--ma-accent-soft);
  color: var(--ma-accent);
}

.admin-body .schedule-card .weekdays,
.admin-body .service-calendar-choices,
.admin-body .site-block-builder,
.admin-body .site-block-card,
.admin-body .site-add-menu,
.admin-body .sms-preview {
  border-color: var(--ma-border);
  background: var(--ma-surface-soft);
  color: var(--ma-text);
}

.admin-body .sms-balance {
  border: 1px solid var(--ma-accent-border);
  background: var(--ma-accent-soft);
  color: var(--ma-accent);
}

.admin-body .site-live-preview-card {
  box-shadow: var(--ma-shadow-md);
}

.admin-body .site-preview-stage {
  border-color: var(--ma-border-strong);
  background:
    linear-gradient(45deg, var(--ma-surface-soft) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(-45deg, var(--ma-surface-soft) 25%, transparent 25%) 0 0 / 18px 18px,
    var(--ma-surface);
}

/* Dialogs and overlays */
.admin-body dialog,
.booking-page dialog {
  max-height: min(88vh, 900px);
  padding: 26px;
  overflow: auto;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius-xl);
  background: var(--ma-surface-raised);
  color: var(--ma-text);
  box-shadow: var(--ma-shadow-md);
}

.admin-body dialog::backdrop,
.booking-page dialog::backdrop {
  background: rgb(12 17 29 / 56%);
  backdrop-filter: blur(4px);
}

.admin-body dialog[open],
.booking-page dialog[open] {
  animation: ma-dialog-in 180ms ease-out both;
}

@keyframes ma-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-body dialog .close,
.booking-page dialog .close {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--ma-surface-soft);
  color: var(--ma-text-muted);
  box-shadow: none;
}

.admin-body .dialog-actions,
.booking-page .dialog-actions {
  padding-top: 16px;
  border-top: 1px solid var(--ma-border);
}

.admin-body .appointment-context-menu,
.admin-body .client-autocomplete {
  border-color: var(--ma-border);
  border-radius: var(--ma-radius-md);
  background: var(--ma-surface-raised);
  color: var(--ma-text);
  box-shadow: var(--ma-shadow-md);
}

.admin-body .context-submenu-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-body .context-submenu-trigger[aria-expanded="true"] {
  background: var(--ma-accent-soft);
  color: var(--ma-accent);
}

.admin-body .context-submenu-chevron {
  display: inline;
  padding: 0;
  color: var(--ma-text-subtle);
  font-size: .9rem;
}

.admin-body .appointment-context-menu button.is-confirmed,
.admin-body .appointment-context-menu button.context-confirm-action.is-confirmed {
  background: var(--ma-success-soft, #e1f7e9);
  color: var(--ma-success, #176b38);
  font-weight: 700;
}

.admin-body .appointment-context-menu button.is-confirmed:hover,
.admin-body .appointment-context-menu button.context-confirm-action.is-confirmed:hover {
  background: color-mix(in srgb, var(--ma-success, #176b38) 20%, var(--ma-success-soft, #e1f7e9));
}

.admin-body .client-contact-actions button.is-confirmed {
  border-color: color-mix(in srgb, var(--ma-success, #176b38) 45%, var(--ma-border));
  background: var(--ma-success-soft, #e1f7e9);
  color: var(--ma-success, #176b38);
  font-weight: 700;
}

.admin-body .demo-banner {
  border-color: color-mix(in srgb, var(--ma-warning) 25%, var(--ma-border));
  background: var(--ma-warning-soft);
  color: var(--ma-warning);
  box-shadow: none;
}

.admin-body .admin-auth-only[hidden],
.admin-body #profileEmailRow[hidden],
.admin-body [hidden] {
  display: none !important;
}

.admin-body .admin-shell > #message:not(:empty) {
  position: fixed;
  z-index: 1000;
  top: 18px;
  right: 18px;
  width: min(390px, calc(100vw - 36px));
  filter: drop-shadow(0 14px 28px rgb(16 24 40 / 18%));
}

/* Public booking flow */
.booking-page {
  background-image:
    radial-gradient(circle at 15% 0, rgb(79 70 229 / 10%), transparent 30rem),
    radial-gradient(circle at 100% 90%, rgb(45 164 220 / 7%), transparent 28rem);
}

.booking-page .shell {
  width: min(1220px, calc(100% - 40px));
  margin: clamp(24px, 5vw, 54px) auto;
}

.booking-page .booking-header {
  max-width: 720px;
  margin-bottom: 28px;
}

.booking-page .booking-header h1 {
  margin: 6px 0 8px;
  font-size: clamp(2rem, 4vw, 3.15rem);
}

.booking-page .booking-header p {
  margin: 0;
  color: var(--ma-text-muted);
  font-size: 1.03rem;
}

.booking-page .service-controls {
  position: sticky;
  z-index: 20;
  top: 14px;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px;
  background: color-mix(in srgb, var(--ma-surface) 92%, transparent);
  backdrop-filter: blur(18px);
}

.booking-page .service-controls > label {
  min-width: 210px;
  margin: 0;
}

.booking-page .view-tabs {
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ma-border);
  border-radius: 10px;
  background: var(--ma-surface-soft);
}

.booking-page .view-tabs button {
  min-height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.booking-page .view-tabs button.active {
  background: var(--ma-accent) !important;
  color: #fff !important;
}

.booking-page .nav {
  margin-left: auto;
  color: var(--ma-text-strong);
  font-variant-numeric: tabular-nums;
}

.booking-page .nav button {
  width: 42px;
  padding-inline: 0;
}

.booking-page .calendar-grid {
  gap: 12px;
}

.booking-page .day {
  border-color: var(--ma-border);
  border-radius: var(--ma-radius-lg);
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-sm);
}

.booking-page .day h3 {
  color: var(--ma-text-strong);
  font-size: .9rem;
}

.booking-page .slot {
  border: 1px solid var(--ma-accent-border);
  background: var(--ma-accent-soft);
  color: var(--ma-accent);
  font-weight: 700;
  box-shadow: none;
}

.booking-page .slot:hover {
  border-color: var(--ma-accent) !important;
  background: var(--ma-accent) !important;
  color: #fff !important;
}

.booking-page #booking .primary {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
}

/* Section bar scroll dots: zero-width sticky edges, so showing them never moves the tabs. */
.admin-body .admin-tabs .tabs-scroll {
  position: sticky;
  z-index: 3;
  flex: 0 0 0;
  align-self: stretch;
  width: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.admin-body .admin-tabs .tabs-scroll-start {
  left: 0;
  margin-right: -4px;
}

.admin-body .admin-tabs .tabs-scroll-end {
  right: 0;
  margin-left: -4px;
}

.admin-body .admin-tabs .tabs-scroll > span {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 44px;
  color: var(--tabs-dots-color, rgb(255 255 255 / 92%));
  /* No box: a glow in the bar colour keeps the dots readable over a label behind them. */
  filter: drop-shadow(0 0 2px var(--tabs-dots-glow, #111827)) drop-shadow(0 0 5px var(--tabs-dots-glow, #111827));
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}

.admin-body .admin-tabs .tabs-scroll-start > span {
  left: 0;
}

.admin-body .admin-tabs .tabs-scroll-end > span {
  right: 0;
}

.admin-body .admin-tabs .tabs-scroll svg {
  width: 8px;
  height: 30px;
  fill: currentColor;
}

.admin-body .admin-tabs.has-more-right .tabs-scroll-end,
.admin-body .admin-tabs.has-more-left .tabs-scroll-start {
  pointer-events: auto;
}

.admin-body .admin-tabs.has-more-right .tabs-scroll-end > span,
.admin-body .admin-tabs.has-more-left .tabs-scroll-start > span {
  opacity: 1;
}

/* Phone held sideways: the bar is a rail on the left that scrolls down; the dots sit at the
   bottom (and at the top once at the end), lying across the rail. */
.admin-body .admin-tabs.is-vertical .tabs-scroll {
  flex: 0 0 0;
  width: auto;
  height: 0;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll-start {
  top: 0;
  left: auto;
  margin: 0 0 -2px;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll-end {
  right: auto;
  bottom: 0;
  margin: -2px 0 0;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll > span {
  right: 0;
  left: 0;
  width: auto;
  height: 18px;
  transform: none;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll-start > span {
  top: 0;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll-end > span {
  top: auto;
  bottom: 0;
}

.admin-body .admin-tabs.is-vertical .tabs-scroll svg {
  transform: rotate(90deg);
}

/* The warm and dark themes paint the bar themselves, not through --ma-nav-bg. */
html[data-admin-theme="soft"] .admin-body .admin-tabs {
  --tabs-dots-color: #5c4a3f;
  --tabs-dots-glow: #fffdf9;
}

html[data-admin-theme="dark"] .admin-body .admin-tabs {
  --tabs-dots-glow: #1b1e28;
}

@media (min-width: 1121px) {
  .admin-body .admin-tabs .tabs-scroll {
    display: none;
  }
}

/* Responsive shell */
@media (max-width: 1120px) {
  .admin-body #dashboard:not([hidden]) {
    display: block;
  }

  .admin-body .admin-tabs {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin-bottom: 18px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .admin-body .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-body .admin-tab {
    justify-content: center;
    width: auto;
    min-width: max-content;
    padding-inline: 12px;
  }

  .admin-body .services-layout {
    grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  }
}

@media (max-width: 850px) {
  .admin-body .admin-shell {
    width: min(100% - 24px, 1580px);
    margin-top: 12px;
  }

  .admin-body .admin-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding: 14px;
  }

  .admin-body .admin-identity {
    width: 100%;
  }

  .admin-body .admin-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }

  .admin-body .admin-utility-buttons {
    justify-content: flex-end;
  }

  .admin-body .services-layout {
    grid-template-columns: 1fr;
  }

  .booking-page .service-controls {
    position: static;
  }

  .booking-page .service-controls > label {
    flex: 1 1 220px;
  }

  .booking-page .nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .admin-body {
    padding-bottom: 78px;
  }

  .admin-body .admin-shell {
    width: min(100% - 16px, 1580px);
    margin: 8px auto 20px;
  }

  .admin-body .admin-header {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
  }

  .admin-body .admin-identity {
    width: 100%;
  }

  .admin-body .admin-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .admin-body .admin-utility-buttons {
    justify-content: flex-start;
  }

  .admin-body .admin-theme-picker {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    white-space: nowrap;
  }

  .admin-body .admin-theme-picker > span {
    display: none;
  }

  .admin-body .admin-utility-buttons {
    max-width: calc(100vw - 142px);
    overflow-x: auto;
  }

  .admin-body .admin-utility-buttons button {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
  }

  .admin-body .admin-utility-buttons .header-action-label {
    display: none;
  }

  .admin-body .admin-tabs {
    position: fixed;
    inset: auto 8px 8px;
    z-index: 900;
    margin: 0;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 14px 38px rgb(16 24 40 / 24%);
    background: var(--ma-nav-bg);
  }

  .admin-body .calendar-fab {
    right: max(15px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }

  .admin-body .admin-tab {
    flex: 1 0 72px;
    flex-direction: column;
    gap: 2px;
    min-width: 72px;
    min-height: 54px;
    padding: 5px 7px;
    font-size: .66rem;
  }

  .admin-body .admin-tab svg {
    width: 19px;
    height: 19px;
  }

  .admin-body .card {
    padding: 17px;
    border-radius: 14px;
  }

  .admin-body .calendar-controls-details {
    align-items: stretch;
  }

  .admin-body .calendar-picker {
    width: calc(100% - 48px);
  }

  .admin-body .calendar-picker select {
    width: 100%;
    min-width: 0;
    margin: 5px 0 0;
  }

  .admin-body .calendar-navigation {
    display: grid;
    grid-template-columns: 1fr 42px 42px;
    width: 100%;
  }

  .admin-body .calendar-navigation strong {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 4px;
  }

  .admin-body .calendar-navigation #adminToday {
    grid-column: 1;
  }

  .admin-body .drag-help {
    display: none;
  }

  .admin-body dialog,
  .booking-page dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    padding: 20px 17px;
    border-radius: 18px;
  }

  .admin-body .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-body .dialog-actions button {
    width: 100%;
  }

  .admin-body .service-manage-row,
  .admin-body .management-row,
  .admin-body .quick-message-row {
    margin-inline: -5px;
    padding-inline: 5px;
  }

  .admin-body .workspace-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 13px;
    padding-inline: 2px;
  }

  .admin-body .workspace-primary-action {
    width: 100%;
  }

  /* Clients on a phone: the list starts on the first screen. The letters scroll on one
     row, the results card drops the title repeated from the page heading, and each client is a
     compact row: tapping it opens the details, WhatsApp/Email are icons on the right. */
  .admin-body #clientsTab .workspace-heading p {
    display: none;
  }

  .admin-body .client-search-tile {
    padding: 2px 2px 0;
  }

  .admin-body .client-search-tile .client-search-field span,
  .admin-body .client-alphabet-wrap > span {
    font-size: .8rem;
  }

  .admin-body .client-alphabet-wrap {
    margin-top: 10px;
  }

  .admin-body .client-alphabet {
    flex-wrap: nowrap;
    margin-inline: -2px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .admin-body .client-alphabet::-webkit-scrollbar {
    display: none;
  }

  .admin-body .client-alphabet button {
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
  }

  .admin-body .client-filters-card {
    padding: 12px 14px;
  }

  .admin-body .client-filters-header h2 {
    margin: 0;
    font-size: 1.02rem;
  }

  .admin-body .client-filters-header p {
    display: none;
  }

  .admin-body .client-filters-header .client-filters-expand {
    width: 38px;
    height: 38px;
    min-height: 0;
  }

  .admin-body .clients-results-card {
    padding: 4px 14px 12px;
  }

  .admin-body .clients-results-card > .section-heading {
    display: none;
  }

  .admin-body .clients-list {
    border-top: 0;
  }

  .admin-body .client-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
  }

  .admin-body .client-row:last-child {
    border-bottom: 0;
  }

  .admin-body .client-main {
    gap: 3px;
  }

  .admin-body .client-main > strong {
    font-size: 1rem;
    line-height: 1.25;
  }

  .admin-body .client-main > span,
  .admin-body .client-main > small {
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .admin-body .client-service-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 3px 0 1px;
    overflow: hidden;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  .admin-body .client-service-tags span {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: .7rem;
  }

  .admin-body .client-attendance-mini {
    display: none;
  }

  .admin-body .client-attendance-mini.has-no-show {
    display: flex;
    font-size: .76rem;
  }

  .admin-body .client-attendance-mini.has-no-show > span:not(.no-show-count) {
    display: none;
  }

  .admin-body .client-row-history .client-first,
  .admin-body .client-row-history .client-no-next {
    display: none;
  }

  .admin-body .client-row-history .client-next {
    color: var(--ma-accent);
    font-weight: 700;
  }

  .admin-body .client-row-actions {
    display: flex;
    gap: 6px;
    min-width: 0;
    margin: 0;
  }

  .admin-body .client-row-actions .client-action {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 0;
    height: 42px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
  }

  .admin-body .client-row-actions .client-action svg {
    width: 20px;
    height: 20px;
  }

  .admin-body .client-row-actions .client-action span,
  .admin-body .client-row-actions .client-details-button {
    display: none;
  }

  .admin-body .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-page .shell {
    width: min(100% - 20px, 1220px);
    margin: 24px auto;
  }

  .booking-page .booking-header {
    margin-bottom: 20px;
  }

  .booking-page .booking-header h1 {
    font-size: 2rem;
  }

  .booking-page .service-controls {
    align-items: stretch;
    padding: 12px;
  }

  .booking-page .service-controls > label,
  .booking-page .view-tabs,
  .booking-page .nav {
    width: 100%;
  }

  .booking-page .service-controls > label {
    flex: 1 1 100%;
    min-width: 0;
  }

  .booking-page .view-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .booking-page .view-tabs button {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
  }

  .booking-page .calendar-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile calendar interaction corrections. */
.admin-body .event-compact-client {
  font: inherit;
  font-weight: 750;
}

.admin-body .event-compact-service {
  color: inherit;
  font-size: .68rem;
  font-weight: 580;
  opacity: .82;
}

.admin-body .month-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

.admin-body .month-event-pill {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2px 6px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--calendar-color, var(--ma-accent));
  border-radius: 5px;
  background: color-mix(in srgb, var(--calendar-color, var(--ma-accent)) 16%, var(--ma-surface));
  color: color-mix(in srgb, var(--calendar-color, var(--ma-accent)) 78%, black);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.admin-body .month-event-pill span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-body .month-event-pill.block-event {
  background: color-mix(in srgb, var(--ma-text-muted) 14%, var(--ma-surface));
  color: var(--ma-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-body .month-event-pill.is-cancelled {
  color: var(--ma-text-subtle);
  text-decoration: line-through;
  opacity: .72;
}

.admin-body .month-event-pill:hover {
  filter: brightness(0.97);
}

.admin-body .month-event-pill.detailed {
  padding: 7px 10px;
  font-size: .8rem;
}

.admin-body .month-event-pill.detailed small {
  overflow: hidden;
  color: var(--ma-text-muted);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.admin-body .month-more {
  width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ma-text-muted);
  font-size: .68rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.admin-body .month-more:hover,
.admin-body .month-more:focus-visible {
  background: var(--ma-accent-soft);
  color: var(--ma-accent);
}

.admin-body .month-day-popup {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ma-border);
  border-radius: 12px;
  background: var(--ma-surface);
  box-shadow: 0 18px 44px rgb(15 23 42 / 34%);
}

.admin-body .month-day-popup-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ma-border);
  color: var(--ma-text-strong);
  font-size: .84rem;
  font-weight: 750;
  text-transform: capitalize;
}

.admin-body .month-day-popup-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  overflow-y: auto;
}

.admin-body .calendar-drag-armed {
  z-index: 12;
  filter: saturate(1.12);
  transform: scale(1.045);
  transform-origin: center;
  box-shadow: 0 12px 28px rgb(15 23 42 / 26%);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.admin-body .calendar-drag-armed > .outlook-event {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--calendar-color, var(--ma-accent)) 70%, white);
}

.admin-body .event-quick-menu {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
  display: none;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 0 5px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--calendar-color, var(--ma-accent)) 84%, #111827) !important;
  box-shadow: 0 5px 14px rgb(15 23 42 / 28%);
  color: #fff !important;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
}

.admin-body .calendar-event-selected .event-quick-menu,
.admin-body .calendar-event-selected.event-quick-menu {
  display: grid;
}

.admin-body {
  /* factorul de "pop out" pentru programarea selectata dintr-un grup
     suprapus - usor de ajustat fara sa umbli prin restul regulilor */
  --calendar-select-pop-scale: 1.3;
}

.admin-body .outlook-time-grid {
  /* pan-x pan-y (fara pinch-zoom) lasa scroll-ul nativ sa functioneze pe
     zonele goale ale grilei, dar opreste browserul sa faca zoom nativ pe
     pagina cand utilizatorul apropie doua degete - gestul e interceptat
     integral de bindCalendarZoomGestures (vezi admin.js) */
  touch-action: pan-x pan-y;
}

.admin-body .positioned-event.calendar-event-selected {
  left: 3px !important;
  width: calc(100% - 6px) !important;
}

/* coloana de ore si header-ele de zi sunt sticky si trebuie sa ramana
   mereu deasupra continutului care trece pe sub ele la scroll orizontal/
   vertical - inclusiv al unei programari cu pop-out (z-index:15) */
.admin-body .time-axis {
  z-index: 20;
}

.admin-body .time-corner,
.admin-body .time-day-header {
  z-index: 21;
}

.admin-body .calendar-event-selected {
  z-index: 15;
  min-height: 46px !important;
  overflow: visible;
  touch-action: none !important;
  /* doar pe verticala: pe orizontala evenimentul e deja latimea zilei
     (regula de mai sus), iar o scalare uniforma l-ar impinge in afara
     ecranului in view-ul de o singura zi, unde nu are unde sa creasca */
  transform: scaleY(var(--calendar-select-pop-scale));
  transform-origin: top;
  transition: transform 160ms ease, box-shadow 160ms ease, left 160ms ease, width 160ms ease;
  box-shadow: 0 14px 32px rgb(15 23 42 / 40%);
}

.admin-body .calendar-event-selected > .outlook-event,
.admin-body .calendar-event-selected.outlook-event {
  padding-right: 34px;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--calendar-color, var(--ma-accent)) 85%, black);
}

.admin-body .calendar-event-selected .resize-handle {
  left: 3px;
  right: 3px;
  height: 18px;
}

.admin-body .calendar-event-selected .resize-handle::after {
  top: 6px;
  width: 30px;
  height: 3px;
  opacity: .9;
}

@media (hover: none) and (pointer: coarse) {
  .admin-body .positioned-event,
  .admin-body .month-events [data-event-key] {
    cursor: default;
    /* touch-action ramane none (mostenit din regula de baza): pe touch,
       browserul decide de la primul milimetru de miscare daca gestul e
       scroll, inainte sa apuce JS-ul sa intervina, indiferent cat de
       tarziu ar "arma" un hold-timer. Cu touch-action:none browserul nu
       mai incearca deloc sa faca scroll nativ pe evenimente - scroll-ul
       inainte de armare e simulat manual in JS (bindTimeGridInteraction /
       bindMonthGridInteraction), care poate decide corect intre scroll si
       mutare pe baza duratei de apasare. */
    user-select: none;
    -webkit-touch-callout: none;
  }

  .admin-body .positioned-event > .outlook-event {
    padding: 4px 5px;
    white-space: normal;
  }

  .admin-body .positioned-event .outlook-event strong {
    display: block;
    overflow: hidden;
    font-size: .7rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-body .positioned-event .event-compact-client {
    display: block;
    max-width: calc(100% - 17px);
    margin: 2px 0 0 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-body .positioned-event .event-compact-service {
    display: block;
    margin: 2px 0 0 17px;
    overflow: hidden;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1320px) {
  .admin-body .management-top-grid {
    grid-template-columns: minmax(430px, 1.18fr) minmax(360px, 1fr);
    grid-auto-rows: auto;
  }

  .admin-body .management-top-grid > .company-home-tile {
    grid-row: span 2;
  }
}

/* Premium product refresh (2026-09)
 * A brand-forward visual layer. Structure, IDs, controls and interaction hooks
 * remain unchanged so this layer can evolve independently from application logic.
 */
:root {
  --ma-text: #344054;
  --ma-text-strong: #101828;
  --ma-text-muted: #667085;
  --ma-text-subtle: #98a2b3;
  --ma-canvas: #f4f6fa;
  --ma-surface-soft: #f8fafc;
  --ma-surface-hover: #f1f4f9;
  --ma-border: #e4e7ec;
  --ma-border-strong: #d0d5dd;
  --ma-accent: #6157e7;
  --ma-accent-hover: #5046d2;
  --ma-accent-soft: #f0efff;
  --ma-accent-border: #d8d5ff;
  --ma-nav-bg: #111827;
  --ma-nav-text: #aeb8ca;
  --ma-nav-active: #655cf0;
  --ma-radius-sm: 10px;
  --ma-radius-md: 12px;
  --ma-radius-lg: 16px;
  --ma-radius-xl: 20px;
  --ma-shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
  --ma-shadow-sm: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 30px rgb(16 24 40 / 5%);
  --ma-shadow-md: 0 24px 64px rgb(15 23 42 / 16%);
  --ma-focus: 0 0 0 3px rgb(97 87 231 / 22%);
  --ma-control-height: 44px;
}

html[data-admin-theme="soft"] {
  --ma-canvas: #f5f1ec;
  --ma-surface-soft: #faf7f3;
  --ma-nav-bg: #302a27;
  --ma-nav-text: #c8bbb2;
  --ma-nav-active: #a66746;
}

html[data-admin-theme="dark"] {
  --ma-canvas: #0c1018;
  --ma-surface: #171c27;
  --ma-surface-raised: #1b2230;
  --ma-surface-soft: #202735;
  --ma-surface-hover: #293141;
  --ma-border: #2c3545;
  --ma-border-strong: #414b5e;
  --ma-nav-bg: #070b12;
  --ma-nav-text: #9ca8ba;
  --ma-nav-active: #7169ee;
}

.admin-body,
.booking-page,
.invite-page {
  letter-spacing: -.006em;
}

.admin-body {
  background-color: var(--ma-canvas);
  background-image:
    radial-gradient(circle at 78% -18%, rgb(99 91 255 / 10%), transparent 34rem),
    linear-gradient(90deg, rgb(16 24 40 / 2%) 1px, transparent 1px),
    linear-gradient(rgb(16 24 40 / 2%) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

.admin-body :is(button, input, select, textarea):focus-visible,
.booking-page :is(button, input, select, textarea):focus-visible,
.invite-page :is(button, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ma-accent) 82%, white);
  outline-offset: 2px;
  box-shadow: var(--ma-focus);
}

.admin-body .brand,
.booking-page .brand,
.invite-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: inherit;
  font-size: .69rem;
  letter-spacing: .14em;
}

.admin-body .admin-shell {
  width: min(1620px, calc(100% - 32px));
  margin: 16px auto 40px;
}

.admin-body .admin-header {
  min-height: 76px;
  margin-bottom: 16px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 0, rgb(111 103 255 / 22%), transparent 22rem),
    linear-gradient(135deg, #111827, #0b1220);
  color: #fff;
  box-shadow: 0 18px 46px rgb(15 23 42 / 16%);
}

.admin-body .admin-identity {
  padding-left: 0;
  border-left: 0;
}

.admin-body .admin-header h1 {
  margin-top: 5px;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 690;
  letter-spacing: -.02em;
}

.admin-body .active-account,
.admin-body .admin-theme-picker {
  color: #aeb8ca;
}

.admin-body .admin-header-actions button {
  border-color: rgb(255 255 255 / 13%);
  background: rgb(255 255 255 / 7%);
  color: #d9dfeb;
}

.admin-body .admin-header-actions button:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

.admin-body .admin-theme-picker select {
  border-color: rgb(255 255 255 / 14%);
  background: #fff;
  color: #1d2939;
}

html[data-admin-theme="soft"] .admin-body .admin-header {
  background:
    radial-gradient(circle at 82% 0, rgb(193 125 87 / 24%), transparent 22rem),
    linear-gradient(135deg, #352c28, #241f1d);
}

html[data-admin-theme="dark"] .admin-body .admin-header {
  border-color: #252d3a;
  background:
    radial-gradient(circle at 82% 0, rgb(113 105 238 / 22%), transparent 22rem),
    linear-gradient(135deg, #111722, #080c13);
}

.admin-body #dashboard:not([hidden]) {
  grid-template-columns: 244px minmax(0, 1fr);
  column-gap: 20px;
}

.admin-body .admin-tabs {
  top: 16px;
  gap: 4px;
  padding: 14px 10px 12px;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% -10%, rgb(111 103 255 / 17%), transparent 14rem),
    var(--ma-nav-bg);
  box-shadow: 0 18px 40px rgb(15 23 42 / 13%);
}

.admin-body .admin-tabs::before {
  margin: 0 10px 8px;
  color: #78859a;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  content: "Spațiu de lucru";
}

.admin-body .admin-tab {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--ma-nav-text);
  font-size: .86rem;
  font-weight: 620;
}

.admin-body .admin-tab svg {
  width: 19px;
  height: 19px;
  opacity: .9;
}

.admin-body .admin-tab:hover:not(:disabled) {
  background: rgb(255 255 255 / 7%);
  color: #f3f5f9;
}

.admin-body .admin-tab.active,
html[data-admin-theme] .admin-body .admin-tab.active {
  border-color: rgb(255 255 255 / 12%) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ma-nav-active) 92%, white), var(--ma-nav-active)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ma-nav-active) 32%, transparent);
}

.admin-body .workspace-heading {
  margin: 3px 0 20px;
  padding: 10px 4px 18px;
  border-bottom-color: color-mix(in srgb, var(--ma-border) 78%, transparent);
}

.admin-body .workspace-heading h2,
.admin-body .management-intro h2 {
  font-size: 1.72rem;
  font-weight: 720;
}

.admin-body .workspace-kicker {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 4px 8px;
  border: 1px solid var(--ma-accent-border);
  border-radius: 999px;
  background: var(--ma-accent-soft);
  font-size: .61rem;
}

.admin-body .card {
  border-color: color-mix(in srgb, var(--ma-border) 94%, transparent);
  border-radius: 16px;
  box-shadow: var(--ma-shadow-sm);
}

.admin-body .calendar-controls-tile {
  border-radius: 16px 16px 10px 10px;
  box-shadow: var(--ma-shadow-sm);
}

.admin-body .calendar-controls-summary {
  min-height: 66px;
  padding-inline: 18px 12px;
}

.admin-body .calendar-controls-details {
  padding: 12px 14px;
}

.admin-body .outlook-calendar {
  border-radius: 10px 10px 16px 16px;
  box-shadow: 0 18px 40px rgb(16 24 40 / 6%);
}

.admin-body .calendar-fab {
  background: linear-gradient(145deg, #746cf5, var(--ma-accent)) !important;
  box-shadow: 0 16px 34px rgb(97 87 231 / 38%);
}

.admin-body .login-card,
.invite-page .invite-account-card {
  position: relative;
  width: min(480px, 100%);
  padding: clamp(30px, 4vw, 42px);
  overflow: hidden;
  border-color: rgb(208 213 221 / 84%);
  background:
    radial-gradient(circle at 100% 0, rgb(97 87 231 / 9%), transparent 15rem),
    var(--ma-surface);
}

.admin-body .login-card::before,
.invite-page .invite-account-card::before {
  width: 52px;
  height: 6px;
  margin-bottom: 28px;
  background: linear-gradient(90deg, var(--ma-accent), #9b8cff);
  box-shadow: 0 5px 14px rgb(97 87 231 / 24%);
}

.admin-body .login-card h2,
.invite-page .invite-account-card h1 {
  font-size: 1.82rem;
}

.booking-page {
  background-color: #f5f7fb;
  background-image:
    radial-gradient(circle at 12% -4%, rgb(97 87 231 / 13%), transparent 32rem),
    radial-gradient(circle at 95% 32%, rgb(45 164 220 / 7%), transparent 26rem);
}

.booking-page .shell {
  width: min(1240px, calc(100% - 40px));
  margin: clamp(20px, 4vw, 44px) auto;
}

.booking-page .booking-header {
  position: relative;
  max-width: none;
  margin-bottom: 18px;
  padding: clamp(26px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 84% -35%, rgb(126 118 255 / 42%), transparent 25rem),
    radial-gradient(circle at 100% 120%, rgb(51 179 211 / 20%), transparent 22rem),
    linear-gradient(135deg, #111827, #0b1220);
  box-shadow: 0 24px 60px rgb(15 23 42 / 18%);
}

.booking-page .booking-header::after {
  position: absolute;
  top: -88px;
  right: 6%;
  width: 240px;
  height: 240px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgb(255 255 255 / 3%), 0 0 0 76px rgb(255 255 255 / 2%);
  content: "";
  pointer-events: none;
}

.booking-page .booking-header .brand,
.booking-page .booking-header h1,
.booking-page .booking-header p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.booking-page .booking-header .brand {
  color: #c9c6ff;
}

.booking-page .booking-header h1 {
  max-width: 18ch;
  margin: 14px 0 8px;
  font-size: clamp(2.2rem, 5vw, 3.65rem);
  line-height: 1.03;
}

.booking-page .booking-header p {
  color: #bdc6d5;
}

.booking-page .service-controls {
  top: 12px;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgb(16 24 40 / 8%);
}

.booking-page .day {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 26px rgb(16 24 40 / 5%);
  transition: border-color var(--ma-transition), box-shadow var(--ma-transition), transform var(--ma-transition);
}

.booking-page .day:hover {
  border-color: var(--ma-accent-border);
  box-shadow: 0 16px 34px rgb(16 24 40 / 9%);
  transform: translateY(-2px);
}

.booking-page .slot {
  min-height: 42px;
  border-radius: 10px;
}

@media (max-width: 1120px) {
  .admin-body .admin-tabs {
    border-color: rgb(255 255 255 / 8%);
    background: var(--ma-nav-bg);
  }

  .admin-body .admin-tabs::before {
    display: none;
  }

  .admin-body .admin-tab:hover:not(:disabled) {
    background: rgb(255 255 255 / 7%);
  }
}

@media (max-width: 620px) {
  .admin-body .admin-shell {
    width: min(100% - 12px, 1620px);
    margin-top: 6px;
  }

  .admin-body .admin-header {
    padding: 14px;
    border-radius: 16px;
  }

  .admin-body .admin-tabs {
    inset: auto 6px 6px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 17px;
    background:
      radial-gradient(circle at 30% -40%, rgb(111 103 255 / 22%), transparent 13rem),
      var(--ma-nav-bg);
  }

  .admin-body .admin-tab {
    color: var(--ma-nav-text);
  }

  .admin-body .workspace-heading h2,
  .admin-body .management-intro h2 {
    font-size: 1.48rem;
  }

  .booking-page .shell {
    width: min(100% - 16px, 1240px);
    margin: 8px auto 24px;
  }

  .booking-page .booking-header {
    padding: 24px 20px 26px;
    border-radius: 18px;
  }

  .booking-page .booking-header h1 {
    font-size: 2.2rem;
  }

  .booking-page .service-controls {
    border-radius: 14px;
  }
}

/* This correction intentionally comes last: the premium theme above must not
 * reintroduce the older stacked mobile header. */
@media (max-width: 620px) {
  .admin-body .admin-shell {
    width: 100%;
    margin: 0 0 20px;
  }

  .admin-body .admin-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    padding: max(12px, env(safe-area-inset-top)) 12px 12px;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0 0 12px 12px;
  }

  .admin-body .admin-identity {
    min-width: 0;
  }

  .admin-body .admin-header h1 {
    margin-top: 3px;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-body .admin-header .brand {
    overflow: hidden;
    font-size: .61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-body .admin-header-actions {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    min-width: 0;
  }

  .admin-body .admin-utility-buttons {
    justify-content: flex-end;
    max-width: none;
    gap: 6px;
    overflow: visible;
  }

  .admin-body .admin-utility-buttons button {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .admin-body .admin-theme-picker select {
    width: 118px;
    min-width: 118px;
    min-height: 36px;
    height: 36px;
    padding: 5px 28px 5px 10px;
    font-size: .74rem;
  }

  .admin-body .admin-header-actions .header-action-icon {
    width: 18px;
    height: 18px;
  }

  .admin-body .drag-help {
    display: block;
    color: var(--ma-text-muted);
    font-size: .7rem;
    line-height: 1.35;
  }

  .admin-body .calendar-fab {
    z-index: 850;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .admin-body .admin-tabs {
    right: 8px;
    left: 8px;
    width: auto;
    height: 64px;
    padding: 4px;
    border-radius: 14px;
    align-items: stretch;
  }

  .admin-body .admin-tab {
    min-height: 54px;
    height: 54px;
    padding: 3px 5px;
    gap: 1px;
    font-size: .62rem;
    line-height: 1.05;
  }

  .admin-body .admin-tab svg {
    width: 17px;
    height: 17px;
  }
}

/* Phone held sideways: the header, the tab bar and the calendar controls together were taller than the screen, leaving
   no room for the calendar itself. Everything shrinks to one slim row each. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .admin-body { padding-bottom: 0; }
  .admin-body .admin-shell { margin: 6px 8px 6px 72px; width: auto; max-width: none; }
  /* The tab bar becomes a slim vertical rail on the left, giving the calendar the full height. */
  .admin-body .admin-tabs { position: fixed; inset: 0 auto 0 0; z-index: 900; display: flex !important; flex-direction: column; flex-wrap: nowrap !important; gap: 2px; width: 64px; margin: 0; padding: 6px 4px; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; scrollbar-width: none; }
  .admin-body .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-body .admin-tabs > .admin-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto !important; width: 100%; min-width: 0; min-height: 46px; padding: 5px 2px; gap: 2px; font-size: .58rem; line-height: 1.1; text-align: center; white-space: normal !important; border-radius: 10px; }
  .admin-body .admin-tab svg { width: 18px; height: 18px; }
  .admin-body .admin-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 5px 10px; border-radius: 12px; gap: 10px; min-height: 0; }
  .admin-body .admin-header .brand, .admin-body .admin-header .active-account { display: none; }
  .admin-body .admin-header h1 { margin: 0; font-size: 1rem; line-height: 1.2; }
  .admin-body .admin-header-actions { gap: 6px; flex-wrap: nowrap; }
  .admin-body .admin-utility-buttons { display: flex; gap: 6px; }
  .admin-body .admin-header-actions button { min-height: 32px; padding: 4px 10px; font-size: .8rem; border-radius: 10px; }
  .admin-body .admin-header-actions .header-action-icon svg { width: 16px; height: 16px; }
  .admin-body .admin-theme-picker { gap: 5px; }
  .admin-body .admin-theme-picker span { display: none; }
  .admin-body .admin-theme-picker select { min-height: 32px; padding: 3px 8px; font-size: .8rem; }
  .admin-body .calendar-controls-tile { padding: 5px 8px; border-radius: 12px; margin: 0 0 6px; }
  .admin-body .calendar-controls-tile { display: flex; align-items: center; gap: 8px; }
  .admin-body .calendar-controls-tile .calendar-controls-summary { display: flex; flex: 0 1 190px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; }
  .admin-body .calendar-controls-tile .calendar-picker { display: block; width: 100%; max-width: none; font-size: 0; }
  .admin-body .calendar-controls-tile .calendar-picker select { width: 100%; min-width: 0; margin: 0; min-height: 30px; padding: 3px 8px; font-size: .78rem; }
  .admin-body .calendar-controls-tile .calendar-controls-expand { display: none; }
  .admin-body .calendar-controls-tile .calendar-controls-details { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
  .admin-body .calendar-controls-tile .drag-help { display: none; }
  .admin-body .calendar-controls-tile button, .admin-body .calendar-controls-tile .view-tabs button { min-height: 30px; padding: 3px 9px; font-size: .78rem; }
  .admin-body .calendar-controls-tile .calendar-navigation { display: flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; }
  .admin-body .calendar-controls-tile .calendar-navigation strong { font-size: .8rem; }
  .admin-body .admin-header-actions .header-action-label { display: none; }
  .admin-body .admin-header-actions .push-notifications-button[aria-pressed="false"]::after, .admin-body .admin-header-actions button { white-space: nowrap; }
  .admin-body .calendar-controls-tile .calendar-hours-toggle { white-space: nowrap; }
  .admin-body .calendar-controls-tile .calendar-controls-details { flex-wrap: wrap; row-gap: 4px; }
  .admin-body .calendar-controls-tile .calendar-controls-summary { flex: 0 0 150px; }
  .admin-body .admin-header-actions { flex-direction: row; flex: 0 0 auto; width: auto; align-items: center; }
  .admin-body .admin-utility-buttons { flex-direction: row; flex-wrap: nowrap; }
  .admin-body .calendar-fab { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 46px; height: 46px; z-index: 850; }
  /* thinner day headers and a single tidy control row */
  .admin-body .time-corner, .admin-body .time-day-header { height: 28px; }
  .admin-body .time-day-header { font-size: .72rem; gap: 5px; }
  .admin-body .time-day-header strong { width: 20px; height: 20px; font-size: .7rem; }
  .admin-body .time-label { font-size: .62rem; }
  .admin-body .calendar-controls-tile .calendar-controls-details { flex-wrap: nowrap; }
  .admin-body .calendar-controls-tile .calendar-controls-summary { flex: 0 1 130px; margin-right: 4px; }
  .admin-body .calendar-controls-tile button, .admin-body .calendar-controls-tile .view-tabs button { white-space: nowrap; padding: 3px 7px; font-size: .72rem; }
  .admin-body .calendar-controls-tile .calendar-navigation strong { font-size: .72rem; min-width: 0; }
  .admin-body .calendar-controls-tile #adminPrevious, .admin-body .calendar-controls-tile #adminNext { min-width: 38px; min-height: 36px; font-size: 1.15rem; padding: 2px 8px; }
  .admin-body .calendar-controls-tile .view-tabs button, .admin-body .calendar-controls-tile #adminToday, .admin-body .calendar-controls-tile .calendar-hours-toggle { min-height: 36px; }
}

/* Phone held upright: the open calendar controls took half the screen and the header carried three lines of text. Both
   shrink so the calendar gets the room; the controls stay collapsible. */
@media (max-width: 760px) and (orientation: portrait) {
  .admin-body .admin-header { padding: 8px 12px; margin-bottom: 8px; }
  .admin-body .admin-header .brand, .admin-body .admin-header .active-account { display: none; }
  .admin-body .admin-header { min-height: 0; align-items: center; grid-template-rows: auto; }
  .admin-body .admin-header .admin-identity { min-width: 0; align-self: center; }
  /* A long company name wraps to two lines and only then is cut with an ellipsis. */
  .admin-body .admin-header h1 { margin: 0; font-size: 1.05rem; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
  .admin-body .calendar-controls-tile { padding: 6px 8px; }
  .admin-body .calendar-controls-tile .calendar-controls-summary { min-height: 0; padding: 0; margin: 0; gap: 8px; align-items: center; }
  .admin-body .calendar-controls-tile .calendar-picker select { min-height: 40px; padding-block: 4px; }
  .admin-body .calendar-controls-tile .calendar-controls-expand { width: 40px; height: 40px; min-width: 40px; }
  /* Rows: view switch / previous - date range - next / today + whole-day toggle. Buttons are at least 44px for a finger. */
  .admin-body .calendar-controls-tile .calendar-controls-details { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "views views views" "prev range next" "today toggle toggle"; gap: 6px; margin-top: 6px; padding: 6px 0 0; }
  .admin-body .calendar-controls-tile .calendar-controls-details[hidden] { display: none; }
  .admin-body .calendar-controls-tile .view-tabs { grid-area: views; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; }
  .admin-body .calendar-controls-tile .view-tabs button { min-height: 40px; }
  .admin-body .calendar-controls-tile .calendar-navigation { display: contents; }
  .admin-body .calendar-controls-tile #adminPrevious { grid-area: prev; }
  .admin-body .calendar-controls-tile #adminNext { grid-area: next; }
  .admin-body .calendar-controls-tile #adminToday { grid-area: today; }
  .admin-body .calendar-controls-tile .calendar-navigation strong { grid-area: range; align-self: center; margin: 0; text-align: center; font-size: .85rem; min-width: 0; }
  .admin-body .calendar-controls-tile .calendar-hours-toggle { grid-area: toggle; width: 100%; white-space: nowrap; }
  .admin-body .calendar-controls-tile .calendar-navigation button, .admin-body .calendar-controls-tile .calendar-hours-toggle { min-height: 44px; min-width: 44px; padding: 4px 14px; font-size: .9rem; }
  .admin-body .calendar-controls-tile #adminPrevious, .admin-body .calendar-controls-tile #adminNext { font-size: 1.3rem; padding-inline: 10px; }
  .admin-body .calendar-controls-tile .drag-help { display: none; }
  /* Slimmer rows: calendar picker without its label, day headers at 36px. */
  .admin-body .calendar-controls-tile { padding: 5px 6px; }
  .admin-body .calendar-controls-tile .calendar-picker { flex: 1 1 auto; width: auto; min-width: 0; font-size: 0; }
  .admin-body .calendar-controls-tile .calendar-picker select { width: 100%; min-height: 36px; margin: 0; font-size: .85rem; }
  .admin-body .time-corner, .admin-body .time-day-header { height: 36px; }
  .admin-body .time-day-header strong { width: 24px; height: 24px; font-size: .8rem; }
  /* The fold button says what it holds ("Săpt. · 19–25 oct") so it reads as a menu, not a stray arrow. */
  .admin-body .calendar-controls-tile .calendar-controls-expand { display: flex; align-items: center; gap: 4px; width: auto; height: 36px; min-width: 0; padding: 0 8px 0 10px; border: 1px solid color-mix(in srgb, var(--ma-accent) 35%, transparent); border-radius: 10px; background: var(--ma-accent-soft); color: var(--ma-accent); font-size: .78rem; font-weight: 650; white-space: nowrap; }
  .admin-body .calendar-controls-tile .calendar-controls-label { display: inline; }
  .admin-body .calendar-controls-tile .calendar-controls-expand svg { width: 16px; height: 16px; }
  .admin-body .calendar-controls-tile .calendar-controls-details { gap: 5px; margin-top: 5px; padding-top: 5px; }
  .admin-body .calendar-controls-tile .view-tabs { padding: 2px; }
  .admin-body .calendar-controls-tile .view-tabs button { min-height: 32px; padding-block: 2px; }
  .admin-body .calendar-controls-tile .calendar-navigation button, .admin-body .calendar-controls-tile .calendar-hours-toggle { min-height: 36px; padding-block: 2px; }
}

.admin-body .calendar-controls-label { display: none; }

/* New-event dialog on a phone: two fields per row where they fit, shorter notes box, tighter spacing. Was ~1090px tall. */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .admin-body dialog.event-dialog { padding: 14px 14px 12px; }
  .admin-body .event-dialog form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: start; }
  .admin-body .event-dialog form > h2 { grid-column: 1 / -1; margin: 0 40px 2px 0; font-size: 1.1rem; }
  .admin-body .event-dialog form > label[hidden], .admin-body .event-dialog form > div[hidden] { display: none; }
  .admin-body .event-dialog #appointmentFields, .admin-body .event-dialog #blockFields, .admin-body .event-dialog #eventDialogMessage, .admin-body .event-dialog .dialog-actions, .admin-body .event-dialog .form-columns { grid-column: 1 / -1; }
  .admin-body .event-dialog #appointmentFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .admin-body .event-dialog #appointmentFields > label, .admin-body .event-dialog #appointmentFields > .client-autocomplete-field, .admin-body .event-dialog #appointmentFields > .form-columns { grid-column: 1 / -1; }
  .admin-body .event-dialog .form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0; }
  .admin-body .event-dialog label { gap: 4px; margin: 0; font-size: .8rem; line-height: 1.2; }
  .admin-body .event-dialog label small { font-size: .68rem; line-height: 1.2; }
  .admin-body .event-dialog input, .admin-body .event-dialog select { min-height: 40px; padding-block: 6px; }
  .admin-body .event-dialog select { font-size: .8rem; padding-inline: 8px 22px; }
  .admin-body .event-dialog input[type="datetime-local"] { padding-inline: 8px; font-size: .78rem; }
  .admin-body .event-dialog textarea { min-height: 0; height: 60px; padding-block: 6px; resize: none; }
  .admin-body .event-dialog .dialog-actions { display: flex; gap: 8px; margin: 2px 0 0; }
  .admin-body .event-dialog .dialog-actions button { flex: 1 1 0; min-height: 44px; }
  .admin-body .event-dialog .dialog-actions .primary { flex: 2 1 0; }
  /* start / end stay one per row: two date-time fields do not fit side by side on a phone */
  .admin-body .event-dialog .form-columns { align-items: end; }
  .admin-body .event-dialog input[type="datetime-local"] { width: 100%; min-width: 0; max-width: 100%; font-size: .85rem; }
  .admin-body .event-dialog form { position: relative; }
  .admin-body .event-dialog form > .close { position: absolute; top: 0; right: 0; width: 36px; height: 36px; margin: 0; }
}

/* Start / end stay one per row on a narrow upright phone: two date-time fields do not fit side by side there. */
@media (max-width: 760px) and (orientation: portrait) {
  .admin-body .event-dialog form > .form-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Constructorul de blocuri al paginii publice ---- */
.admin-body .site-builder-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-body .site-builder-heading { flex-wrap: wrap; gap: 10px; }
.admin-body .site-add-menu { width: min(320px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; }
.admin-body .site-add-menu button { display: grid; gap: 1px; padding: 9px 10px; min-height: 44px; border-radius: 8px; }
.admin-body .site-add-menu button strong { font-size: .88rem; }
.admin-body .site-add-menu button small { color: var(--ma-text-muted, #6b7280); font-size: .75rem; font-weight: 500; }
.admin-body .site-menu-group { display: block; padding: 8px 10px 4px; color: var(--ma-text-muted, #6b7280); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.admin-body .site-item-list { display: grid; gap: 8px; margin: 8px 0; }
.admin-body .site-item-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 40px; gap: 8px; align-items: start; }
.admin-body .site-item-row.site-item-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 40px; }
.admin-body .site-item-row textarea { min-height: 70px; }
.admin-body .site-item-row button { min-height: 40px; padding: 0; }
.admin-body .site-item-add { width: auto; }
.admin-body .site-auto-note { margin: 8px 0 0; font-size: .82rem; }
.admin-body .site-contact-options { gap: 6px; }
@media (max-width: 760px) {
  .admin-body .site-item-row, .admin-body .site-item-row.site-item-faq { grid-template-columns: minmax(0, 1fr) 40px; }
  .admin-body .site-item-row input:first-child { grid-column: 1; }
  .admin-body .site-item-row input:nth-child(2), .admin-body .site-item-row textarea { grid-column: 1; }
  .admin-body .site-item-row button { grid-column: 2; grid-row: 1; }
  .admin-body .site-add-menu { right: auto; left: 0; }
}

/* Dialogul "Generează pagina cu AI": compact, un singur câmp, fără casete de avertizare. */
.admin-body dialog.site-ai-dialog { width: min(560px, calc(100vw - 24px)); padding: 24px; }
.admin-body .site-ai-dialog form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.admin-body .site-ai-dialog form > * { grid-column: 1 / -1; }
.admin-body .site-ai-dialog .close { position: absolute; top: -6px; right: -6px; margin: 0; }
.admin-body .site-ai-dialog h2 { margin: 0 40px 0 0; font-size: 1.25rem; }
.admin-body .site-ai-dialog p { margin: 0; }
.admin-body .site-ai-dialog textarea { min-height: 0; height: 130px; resize: vertical; }
.admin-body .site-ai-hint { color: var(--ma-text-muted, #6b7280); font-size: .78rem; line-height: 1.4; }
.admin-body .site-ai-dialog .dialog-actions { margin: 4px 0 0; }
.admin-body .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .admin-body dialog.site-ai-dialog { padding: 16px; }
  .admin-body .site-ai-dialog textarea { height: 110px; }
  .admin-body .site-ai-dialog .dialog-actions button { min-height: 44px; }
}
.admin-body .site-warning { padding: 8px 10px; border-radius: 8px; color: #8a5a00; background: #fff6e0; }

/* ---- Selector de culoare propriu (color-picker.js) ---- */
.cp { position: absolute; z-index: 2000; width: 272px; padding: 12px; display: grid; gap: 10px; border: 1px solid var(--ma-border, #d8dde6); border-radius: 14px; background: var(--ma-surface, #fff); color: var(--ma-text, #1c2026); box-shadow: 0 18px 50px rgb(16 24 40 / 28%); outline: none; touch-action: none; }
.cp-area { position: relative; height: 150px; border-radius: 10px; cursor: crosshair; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--cp-hue, #f00)); touch-action: none; }
.cp-knob { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 40%); pointer-events: none; }
.cp input.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important; box-shadow: none; }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 45%), 0 2px 6px rgb(0 0 0 / 40%); cursor: pointer; }
.cp-hue::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 45%); cursor: pointer; }
.cp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cp-preview { width: 36px; height: 36px; border: 1px solid var(--ma-border, #d8dde6); border-radius: 9px; }
.cp .cp-hex { min-width: 0; height: 36px; padding: 0 10px; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; text-transform: lowercase; }
.cp .cp-done { min-height: 36px; padding: 0 14px; }
.cp-presets { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.cp .cp-preset { aspect-ratio: 1; min-height: 0; padding: 0; border: 1px solid rgb(0 0 0 / 18%); border-radius: 8px; box-shadow: none; }
.cp .cp-preset.on { outline: 2px solid var(--ma-accent, #5b5bd6); outline-offset: 2px; }
.cp-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgb(8 12 20 / 45%); }
.cp.cp-sheet { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); top: auto; width: auto; z-index: 2000; padding: 14px; }
.cp.cp-sheet .cp-area { height: 170px; }
.cp.cp-sheet input.cp-hue { height: 22px; }
.cp.cp-sheet .cp-row, .cp.cp-sheet .cp-done { min-height: 44px; }
.cp.cp-sheet .cp-hex { height: 44px; }
.cp.cp-sheet .cp-presets { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }

/* ---- Pagina de programare: culorile paginii publice (clasa booking-themed, pusă de server) ---- */
.booking-themed { color: var(--bk-on-canvas, var(--ma-text)); background: var(--ma-canvas) !important; background-image: none !important; }
.booking-themed .card, .booking-themed .day, .booking-themed dialog { color: var(--ma-text); }
.booking-themed .booking-header { border-color: color-mix(in srgb, var(--ma-accent) 40%, #fff); background: radial-gradient(circle at 84% -35%, color-mix(in srgb, var(--ma-accent) 55%, transparent), transparent 25rem), linear-gradient(135deg, color-mix(in srgb, var(--ma-accent) 62%, #000), color-mix(in srgb, var(--ma-accent) 34%, #000)); }
.booking-themed .booking-header, .booking-themed .booking-header h1, .booking-themed .booking-header p, .booking-themed .booking-header .brand { color: #fff; }
.booking-themed .slot { background: var(--ma-accent-soft); color: color-mix(in srgb, var(--ma-accent) 70%, var(--ma-text-strong)); border: 1px solid var(--ma-accent-border); }
.booking-themed .slot:hover, .booking-themed .primary, .booking-themed .active, .booking-themed .view-tabs button.active { background: var(--ma-accent) !important; color: var(--bk-on-accent, #fff) !important; border-color: var(--ma-accent) !important; }
.booking-themed .day h3 { color: var(--ma-text-strong); }
.booking-themed .public-legal-footer, .booking-themed .public-legal-footer * { color: var(--bk-on-canvas-muted, var(--ma-text-muted)); }
.booking-themed .public-legal-footer a { color: var(--ma-accent); }
.booking-themed dialog { background: var(--ma-surface); border-color: var(--ma-border); }
.booking-themed dialog a { color: color-mix(in srgb, var(--ma-accent) 65%, var(--ma-text-strong)); }
.booking-themed dialog::backdrop { background: rgb(8 12 20 / 62%); }

/* ---- Pagina de programare pe un telefon culcat: antet, comenzi și intervale subțiri, ca să încapă programările pe ecran ---- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .booking-page .shell { margin-top: 6px; padding: 0 10px 14px; }
  .booking-page .booking-header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 10px 18px; border-radius: 14px; }
  .booking-page .booking-header::after, .booking-page .booking-header p { display: none; }
  .booking-page .booking-header .brand { margin: 0; padding-right: 14px; border-right: 1px solid rgb(255 255 255 / 35%); font-size: .62rem; line-height: 1.2; }
  .booking-page .booking-header h1 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
  .booking-page .service-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 8px; padding: 8px 12px; border-radius: 14px; }
  .booking-page .service-controls > label { flex: 1 1 150px; min-width: 0; gap: 3px; font-size: .74rem; }
  .booking-page .service-controls select { min-height: 36px; height: 36px; padding-block: 2px; font-size: .86rem; }
  .booking-page .service-controls .view-tabs { flex: 0 0 auto; }
  .booking-page .service-controls .view-tabs button, .booking-page .service-controls .nav button { min-height: 36px; padding: 0 12px; font-size: .84rem; }
  .booking-page .service-controls .nav { flex: 0 1 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .booking-page .service-controls .nav strong { font-size: .8rem; white-space: nowrap; }
  .booking-page .calendar-grid { gap: 8px; }
  .booking-page .day { padding: 8px 8px 10px; border-radius: 12px; }
  .booking-page .day h3 { margin: 0 0 6px; font-size: .84rem; }
  .booking-page .slot { min-height: 34px; margin: 4px 0; padding: 4px 8px; border-radius: 9px; }
  .booking-page .service-slot { grid-template-columns: 1fr; }
  .booking-page .service-slot strong { font-size: .95rem; text-align: center; }
  .booking-page .service-slot { grid-template-columns: 1fr; gap: 0; justify-items: center; min-height: 40px; }
  .booking-page .service-slot span { display: block; max-width: 100%; font-size: .62rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .booking-page #message:empty { display: none; }
}

/* ---- Fereastra „Confirmă programarea": două câmpuri pe rând unde încap ---- */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .booking-page dialog#booking { padding: 12px 14px; }
  .booking-page #bookingForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; align-items: start; }
  .booking-page #bookingForm > h2, .booking-page #bookingForm > p, .booking-page #bookingForm > .form-columns, .booking-page #bookingForm > label.legal-acceptance, .booking-page #bookingForm > .dialog-actions, .booking-page #bookingForm > #bookingMessage { grid-column: 1 / -1; }
  .booking-page #bookingForm > h2 { margin: 0 40px 0 0; font-size: 1rem; }
  .booking-page #bookingForm > p { margin: 0; font-size: .86rem; line-height: 1.35; }
  .booking-page #bookingForm .form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0; }
  .booking-page #bookingForm label { margin: 0; gap: 4px; font-size: .8rem; }
  .booking-page #bookingForm input:not([type="checkbox"]), .booking-page #bookingForm select { min-height: 38px; padding-block: 4px; }
  .booking-page #bookingForm textarea { min-height: 0; height: 40px; resize: none; }
  .booking-page #bookingForm > label:has(textarea) { grid-column: 1 / -1; }
  .booking-page #bookingForm label small { display: none; }
  /* butoanele rămân la vedere cât timp restul formularului se derulează */
  .booking-page #bookingForm .dialog-actions { position: sticky; bottom: -12px; display: flex; gap: 8px; margin: 0 -14px -12px; padding: 8px 14px 12px; background: var(--ma-surface, #fff); border-top: 1px solid var(--ma-border, #e4e4e7); }
  .booking-page #bookingForm .dialog-actions button { flex: 1 1 0; min-height: 44px; }
  .booking-page #bookingForm > .close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; margin: 0; }
}

/* Zilele lucrătoare ale săptămânii pe un singur rând (inclusiv sâmbăta), nu 5 + 1 dedesubt */
@media (min-width: 700px) {
  .booking-page .calendar-grid.week-row { grid-template-columns: repeat(var(--day-count, 5), minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1100px) {
  .booking-page .week-row .service-slot { grid-template-columns: 1fr; gap: 0; justify-items: center; text-align: center; }
  .booking-page .week-row .service-slot span { max-width: 100%; font-size: .66rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .booking-page .week-row .day h3 { font-size: .84rem; }
}

/* ---- Pagina de programare: zi aleasă + orele ei (în loc de toate orele tuturor zilelor) ---- */
.booking-page .home-link { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: 10px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; background: rgb(255 255 255 / 10%); }
.booking-page .home-link:hover { background: rgb(255 255 255 / 20%); }
.booking-page .booking-header { display: flex; flex-direction: column; }
.booking-picker { display: grid; gap: 14px; }
.booking-picker .day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.booking-picker .day-chip { flex: 1 0 74px; display: grid; justify-items: center; gap: 1px; min-height: 0; padding: 10px 6px; border: 1px solid var(--ma-border, #e4e4e7); border-radius: 14px; background: var(--ma-surface, #fff); color: var(--ma-text-strong, #18181b); box-shadow: var(--ma-shadow-xs, none); scroll-snap-align: start; }
.booking-picker .day-chip .dow { color: var(--ma-text-muted, #71717a); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.booking-picker .day-chip strong { font-size: 1.35rem; line-height: 1.15; }
.booking-picker .day-chip small { color: var(--ma-text-muted, #71717a); font-size: .7rem; }
.booking-picker .day-chip:disabled { opacity: .45; cursor: not-allowed; }
.booking-picker .day-chip.today strong::after, .booking-picker .month-cell.today strong::after { content: ""; display: block; width: 5px; height: 5px; margin: 1px auto 0; border-radius: 50%; background: var(--ma-accent, #4f46e5); }
.booking-picker .day-chip.on, .booking-picker .month-cell.on { border-color: var(--ma-accent, #4f46e5); background: var(--ma-accent, #4f46e5); color: var(--bk-on-accent, #fff); box-shadow: 0 8px 22px color-mix(in srgb, var(--ma-accent, #4f46e5) 35%, transparent); }
.booking-picker .day-chip.on .dow, .booking-picker .day-chip.on small, .booking-picker .month-cell.on small { color: inherit; opacity: .9; }
.booking-picker .day-chip.on.today strong::after, .booking-picker .month-cell.on.today strong::after { background: currentColor; }
.booking-picker .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.booking-picker .month-dow { padding: 4px 0; color: var(--ma-text-muted, #71717a); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.booking-picker .month-cell { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 52px; padding: 4px 2px; border: 1px solid var(--ma-border, #e4e4e7); border-radius: 12px; background: var(--ma-surface, #fff); color: var(--ma-text-strong, #18181b); }
.booking-picker .month-cell strong { font-size: 1rem; line-height: 1.15; }
.booking-picker .month-cell small { min-height: 12px; color: var(--ma-text-muted, #71717a); font-size: .64rem; }
.booking-picker .month-cell:disabled { opacity: .35; cursor: not-allowed; }
.booking-picker .booking-times { display: grid; gap: 10px; scroll-margin-top: 12px; }
.booking-picker .times-title { margin: 0; font-size: 1.05rem; text-transform: capitalize; }
.booking-picker .times-title small { margin-left: 8px; color: var(--ma-text-muted, #71717a); font-size: .8rem; font-weight: 500; text-transform: none; }
.booking-picker .times-part { margin: 6px 0 -2px; color: var(--ma-text-muted, #71717a); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.booking-picker .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.booking-picker .time-grid .service-slot { grid-template-columns: 1fr; gap: 0; justify-items: center; min-height: 52px; margin: 0; padding: 6px 8px; }
.booking-picker .time-grid .service-slot strong { font-size: 1.05rem; }
.booking-picker .time-grid .service-slot span { max-width: 100%; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .booking-picker .day-chip { flex-basis: 66px; padding: 8px 4px; }
  .booking-picker .time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .booking-page .home-link { align-self: auto; margin: 0 10px 0 0; padding: 4px 10px; font-size: .72rem; }
  .booking-page .booking-header { flex-direction: row; }
  .booking-picker { gap: 8px; }
  .booking-picker .day-chip { padding: 5px 4px; border-radius: 10px; }
  .booking-picker .day-chip strong { font-size: 1.05rem; }
  .booking-picker .day-chip small { display: none; }
  .booking-picker .time-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .booking-picker .time-grid .service-slot { min-height: 40px; padding: 3px 6px; }
  .booking-picker .month-cell { min-height: 38px; }
  .booking-picker .month-grid { max-width: 420px; gap: 4px; }
}

.booking-picker.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

/* Bara de filtre a paginii de programare: controale de aceeași înălțime, aliniate pe aceeași linie de jos, cu spațiere egală.
 * Butoanele nu mai fac zoom la dublu-tap, ca apăsările rapide pe săgeți să nu nimerească alt control. */
.booking-page .service-controls button { touch-action: manipulation; }
.booking-page .service-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 12px 14px; padding: 14px 16px; }
.booking-page .service-controls > label { flex: 1 1 200px; min-width: 0; margin: 0; }
.booking-page .service-controls select { height: 44px; min-height: 44px; }
.booking-page .service-controls .view-tabs { flex: 0 0 auto; box-sizing: border-box; height: 44px; align-items: stretch; }
.booking-page .service-controls .view-tabs button { min-height: 0; height: 100%; padding: 0 16px; }
.booking-page .service-controls .nav { flex: 0 0 auto; align-items: center; gap: 10px; margin-left: auto; height: 44px; }
.booking-page .service-controls .nav button { box-sizing: border-box; width: 44px; height: 44px; min-height: 44px; padding: 0; }
.booking-page .service-controls .nav strong { min-width: 9.5rem; text-align: center; white-space: nowrap; }
@media (max-width: 900px) and (min-width: 621px) { .booking-page .service-controls .nav { margin-left: 0; width: 100%; justify-content: center; } }
@media (max-width: 620px) {
  .booking-page .service-controls { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .booking-page .service-controls .view-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .booking-page .service-controls .nav { margin: 0; width: 100%; display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; }
  .booking-page .service-controls .nav button { width: 100%; }
  .booking-page .service-controls .nav strong { min-width: 0; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .booking-page .service-controls { align-items: flex-end; gap: 8px 10px; padding: 8px 12px; }
  .booking-page .service-controls > label { flex: 1 1 110px; }
  .booking-page .service-controls select, .booking-page .service-controls .view-tabs, .booking-page .service-controls .nav, .booking-page .service-controls .nav button { height: 38px; min-height: 38px; }
  .booking-page .service-controls .nav button { width: 38px; }
  .booking-page .service-controls .nav { width: auto; margin-left: auto; }
  .booking-page .service-controls .nav strong { min-width: 0; font-size: .8rem; }
  .booking-page .service-controls .view-tabs button { padding: 0 12px; }
}