/*
 * Responsive layout, v152.
 * This is the single owner of page, dialog and navigation geometry.
 * The existing stylesheets retain the brand, calendar appearance and states.
 * Layered important declarations intentionally beat their historical unlayered
 * important declarations. Visibility is first because important layer order
 * is reversed: a hidden form/pane must never be resurrected by a layout rule.
 * Breakpoints: 699px phone, 900px public navigation, 1024px stacked tools.
 * Short viewports are handled by available height, including keyboards.
 */
@layer ui-visibility, ui-layout;

/* The KPI visibility control belongs to the same surface as the cards. */
@layer ui-layout {
  /* Match the calendar shell to the KPI cards above. */
  body.premium-ui.admin-page-body .scheduler-card {
    background:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
    background-image:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
    border-color:#2c2d31 !important;
  }
  body.premium-ui.admin-page-body .dashboard-kpi-toggle {
    background:linear-gradient(145deg,#202124 0%,#151619 100%) !important;
    background-image:linear-gradient(145deg,#202124 0%,#151619 100%) !important;
    border:1px solid #34363b !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.16) !important;
  }
  body.premium-ui.admin-page-body .dashboard-kpi-toggle:hover,
  body.premium-ui.admin-page-body .dashboard-kpi-toggle:focus-visible {
    background:linear-gradient(145deg,#25272a 0%,#181a1d 100%) !important;
    background-image:linear-gradient(145deg,#25272a 0%,#181a1d 100%) !important;
    border-color:#464950 !important;
  }
}

/* Calendar month header sizing and order across desktop, iPad and phone. */
@layer ui-layout {
  .admin-page-body .scheduler-card .admin-toolbar { align-items:center !important; gap:18px !important; }
  .admin-page-body .scheduler-card .admin-toolbar > div:first-child { min-width:0 !important; }
  .admin-page-body .scheduler-card h2 {
    margin:0 !important;
    font-size:clamp(18px,1.65vw,24px) !important;
    line-height:1.15 !important;
  }
  .admin-page-body .scheduler-top-controls {
    display:grid !important;
    grid-template-columns:auto minmax(150px,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; order:0 !important; }
  .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:2 !important; grid-row:1 !important; order:0 !important; width:auto !important; text-align:center !important; }
  .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:3 !important; order:0 !important; }
  .admin-page-body .scheduler-period-label {
    font-size:clamp(18px,2vw,28px) !important;
    line-height:1.1 !important;
    letter-spacing:-.025em !important;
    white-space:nowrap !important;
  }
  .admin-page-body .scheduler-top-controls .admin-pill {
    min-height:38px !important;
    padding:0 11px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }

  @media (max-width:1100px) {
    .admin-page-body .scheduler-card .admin-toolbar { align-items:stretch !important; gap:12px !important; }
    .admin-page-body .scheduler-top-controls {
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
      flex-basis:100% !important;
      width:100% !important;
      gap:8px !important;
    }
    .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:1 / -1 !important; grid-row:1 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; grid-row:2 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:2 !important; grid-row:2 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group { justify-content:stretch !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group .admin-pill { flex:1 1 0 !important; min-width:0 !important; padding-inline:7px !important; }
  }

  @media (max-width:699px) {
    .admin-page-body .scheduler-card .admin-toolbar { gap:10px !important; }
    .admin-page-body .scheduler-card h2 { font-size:18px !important; }
    .admin-page-body .scheduler-period-label { font-size:20px !important; }
    .admin-page-body .scheduler-top-controls { grid-template-columns:minmax(0,1fr) !important; gap:7px !important; }
    .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:1 !important; grid-row:1 !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; grid-row:2 !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:1 !important; grid-row:3 !important; justify-content:stretch !important; }
    .admin-page-body .scheduler-top-controls .admin-pill { min-height:36px !important; font-size:11px !important; }
  }
}

/* Compact mobile compositions for admin tools and notifications. */
@layer ui-layout {
  @media (max-width:699px) {
    .admin-page-body .admin-tools-page-panel {
      padding:14px !important;
      background:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
      border:1px solid #2c2d31 !important;
      border-radius:18px !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      align-items:start !important;
      gap:10px !important;
      margin:0 0 18px !important;
      padding:0 0 14px !important;
      border-bottom:1px solid #2c2d31 !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head > div { min-width:0 !important; }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head h3 {
      margin:4px 0 0 !important;
      font-size:clamp(22px,6vw,30px) !important;
      line-height:1.12 !important;
      letter-spacing:-.035em !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head [data-close-tools-modal] {
      width:auto !important;
      min-width:0 !important;
      min-height:40px !important;
      height:40px !important;
      padding:0 12px !important;
      border-radius:9px !important;
      background:#222327 !important;
      background-image:none !important;
      border:1px solid #3a3c42 !important;
      color:#ecece8 !important;
      font-size:12px !important;
      white-space:nowrap !important;
    }
    .admin-page-body .admin-tools-page-panel :where(input,select,textarea) {
      background:#111214 !important;
      border:1px solid #34363a !important;
      border-radius:12px !important;
      color:#f2f2ef !important;
      min-height:44px !important;
    }
    .admin-page-body .admin-tools-page-panel :where(input,select,textarea):focus {
      border-color:#777b84 !important;
      box-shadow:0 0 0 3px rgb(119 123 132 / 18%) !important;
      outline:0 !important;
    }

    .admin-page-body #notifications-panel {
      width:calc(100% - 20px) !important;
      max-width:560px !important;
      height:min(calc(var(--visible-height) - 20px),760px) !important;
      max-height:calc(var(--visible-height) - 20px) !important;
      display:flex !important;
      flex-direction:column !important;
      padding:0 !important;
      border-radius:18px !important;
      background:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
      border:1px solid #34363a !important;
      overflow:hidden !important;
    }
    .admin-page-body #notifications-panel .notifications-panel-head {
      display:grid !important;
      grid-template-columns:1fr !important;
      align-items:center !important;
      gap:12px !important;
      margin:0 !important;
      padding:16px !important;
      text-align:center !important;
      border-bottom:1px solid #2c2d31 !important;
      background:transparent !important;
    }
    .admin-page-body #notifications-panel .notifications-panel-head > div:first-child { min-width:0 !important; }
    .admin-page-body #notifications-panel .notifications-panel-head h3 {
      margin:4px 0 0 !important;
      font-size:clamp(24px,7vw,30px) !important;
      line-height:1.1 !important;
    }
    .admin-page-body #notifications-panel .notifications-actions {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px !important;
      align-items:center !important;
      gap:6px !important;
      width:100% !important;
      min-width:0 !important;
    }
    .admin-page-body #notifications-panel .notifications-actions .admin-link-btn {
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;
      min-height:42px !important;
      height:42px !important;
      margin:0 !important;
      padding:0 8px !important;
      border-radius:9px !important;
      background:#222327 !important;
      background-image:none !important;
      border:1px solid #3a3c42 !important;
      color:#e4e4e0 !important;
      font-size:11px !important;
      white-space:nowrap !important;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
    }
    .admin-page-body #notifications-panel .notifications-actions #notifications-close {
      width:42px !important;
      padding:0 !important;
      font-size:18px !important;
    }
    .admin-page-body #notifications-panel .notifications-list {
      flex:1 1 auto !important;
      min-height:0 !important;
      width:100% !important;
      max-width:none !important;
      padding:12px !important;
      overflow-x:hidden !important;
      overflow-y:auto !important;
      overscroll-behavior:contain !important;
      -webkit-overflow-scrolling:touch !important;
    }
    .admin-page-body #notifications-panel :is(.notification-item,.notification-empty) {
      width:100% !important;
      max-width:none !important;
      min-width:0 !important;
      margin:0 0 10px !important;
      padding:14px !important;
      box-sizing:border-box !important;
      overflow:visible !important;
      overflow-wrap:anywhere !important;
      background:linear-gradient(180deg,#202124 0%,#191a1d 100%) !important;
      border:1px solid #34363a !important;
      border-radius:14px !important;
    }
    .admin-page-body #notifications-panel .notification-item-actions {
      display:flex !important;
      width:100% !important;
      margin-top:12px !important;
    }
    .admin-page-body #notifications-panel .notification-item-actions .mini-btn {
      width:100% !important;
      min-height:40px !important;
      margin:0 !important;
    }
  }
}

@layer ui-visibility {
  .hidden, [hidden] { display:none !important; }
}

@layer ui-layout {
  :root {
    --ui-gutter:clamp(12px, 2.4vw, 32px);
    --ui-dialog-gap:16px;
    --ui-surface:#161616;
    --visible-height:100vh;
    --visible-top:0px;
    --ui-header-height:72px;
  }
  @supports (height:100dvh) { :root { --visible-height:100dvh; } }

  html {
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
    overflow-y:auto !important;
    touch-action:auto !important;
    scrollbar-gutter:stable !important;
    -webkit-text-size-adjust:100%;
  }
  body.premium-ui {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    overflow-x:clip !important;
    overflow-y:visible !important;
    touch-action:auto !important;
  }
  body.premium-ui:not(.admin-page-body) { --ui-surface:var(--book-bg,#efeee8); }
  body.premium-ui *, body.premium-ui *::before, body.premium-ui *::after {
    box-sizing:border-box !important;
  }
  html.ui-scroll-locked {
    overflow-y:hidden !important;
    scroll-behavior:auto !important;
  }
  body.premium-ui.ui-scroll-locked {
    position:fixed !important;
    inset:auto !important;
    top:var(--ui-scroll-top, 0px) !important;
    left:0 !important;
    width:var(--ui-page-width, 100%) !important;
    max-width:100% !important;
    overflow:visible !important;
    touch-action:auto !important;
  }
  .admin-page-root { scroll-behavior:auto !important; }
  body.premium-ui :where(input,select,textarea,button) { font:inherit; }
  body.premium-ui :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    min-width:0 !important;
    max-width:100% !important;
    font-size:16px !important;
  }
  body.premium-ui :where(input[type="date"],input[type="time"]) { width:100% !important; }
  body.premium-ui textarea { resize:vertical; }
  body.premium-ui :where(input,select,textarea,button,a):focus-visible {
    outline:2px solid currentColor !important;
    outline-offset:3px !important;
  }
  body.premium-ui :where(img,video,iframe) { max-width:100%; }
  body.premium-ui :where(.form-group,.form-row,.admin-form-grid,.options-grid,.step-screen) {
    min-width:0 !important;
    max-width:100% !important;
  }
  body.premium-ui :where(.admin-form-grid,.form-row) {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  body.premium-ui .form-group { width:100% !important; }
  body.premium-ui .form-group :where(input,select,textarea) { width:100% !important; }
  body.premium-ui .form-group label { font-size:14px !important; line-height:1.4 !important; }
  body.premium-ui :where(.btn-primary,.btn-next,.btn-back,.btn-outline,.admin-link-btn,.admin-pill,.mini-btn,.close-btn) {
    min-height:44px !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.35 !important;
    touch-action:manipulation !important;
  }

  /* Admin page and header: page content has no internal height/scroll lock. */
  .admin-page-body :where(.admin-page-shell,.admin-wrap,.admin-content-area,.admin-view-pane,#admin-pane-tools,#admin-tools-page-host) {
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    contain:none !important;
    transform:none !important;
    touch-action:auto !important;
  }
  .admin-page-body .admin-page-shell { width:100% !important; padding:0 !important; }
  .admin-page-body .admin-wrap {
    display:block !important;
    width:100% !important;
    max-width:1540px !important;
    margin:0 auto !important;
    padding:24px var(--ui-gutter) 40px !important;
  }
  .admin-page-body .admin-topbar-page {
    position:sticky !important;
    inset:0 0 auto !important;
    z-index:100 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:calc(10px + env(safe-area-inset-top)) max(var(--ui-gutter),env(safe-area-inset-right)) 10px max(var(--ui-gutter),env(safe-area-inset-left)) !important;
    overflow:visible !important;
    transform:none !important;
  }
  .admin-page-body .admin-topbar-layout {
    display:grid !important;
    grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    max-width:1476px !important;
    margin:0 auto !important;
    min-height:44px !important;
    padding:0 !important;
  }
  .admin-page-body .admin-menu-toggle {
    display:flex !important;
    grid-area:1 / 1 !important;
    justify-self:start !important;
    position:static !important;
    transform:none !important;
    margin:0 !important;
    width:44px !important;
    height:44px !important;
    flex:none !important;
    padding:12px 10px !important;
  }
  .admin-page-body .admin-brand {
    grid-area:1 / 2 !important;
    position:static !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .admin-page-body .admin-brand img {
    width:clamp(100px,15vw,150px) !important;
    height:auto !important;
    max-height:42px !important;
    object-fit:contain !important;
  }
  .admin-page-body .admin-top-actions {
    grid-area:1 / 3 !important;
    justify-self:end !important;
    display:flex !important;
    position:static !important;
    transform:none !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .admin-page-body #notifications-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    width:auto !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:8px !important;
    font-size:12px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    transform:none !important;
  }
  .admin-page-body #notifications-toggle::before { content:none !important; display:none !important; }
  .admin-page-body #notifications-badge {
    position:static !important;
    transform:none !important;
    margin:0 !important;
    min-width:18px !important;
    height:auto !important;
    padding:2px 4px !important;
    font-size:11px !important;
    flex:none !important;
  }
  .admin-page-body .premium-login-back {
    grid-area:1 / 1 !important;
    justify-self:start !important;
    position:static !important;
    transform:none !important;
    width:auto !important;
    margin:0 !important;
    font-size:12px !important;
  }
  .admin-page-body.admin-authenticated .premium-login-back { display:none !important; }
  .admin-page-body:not(.admin-authenticated) .admin-top-actions { display:none !important; }
  .admin-page-body .admin-login-card-page {
    width:100% !important;
    max-width:460px !important;
    margin:clamp(16px,8vh,88px) auto !important;
    padding:clamp(20px,4vw,36px) !important;
  }
  .admin-page-body :where(.premium-page-heading,.admin-toolbar,.admin-view-toolbar) {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
  }
  .admin-page-body :where(.premium-page-heading,.admin-toolbar,.admin-view-toolbar) > * { min-width:0 !important; max-width:100% !important; }
  .admin-page-body :where(.admin-toolbar-group,.admin-view-toolbar-actions,.daily-agenda-actions) {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .admin-page-body .admin-search { width:100% !important; max-width:420px !important; flex:1 1 220px !important; }
  .admin-page-body #schedule-date-input { width:auto !important; flex:1 1 150px !important; }
  .admin-page-body .admin-card { min-width:0 !important; max-width:100% !important; padding:clamp(12px,2vw,24px) !important; }
  .admin-page-body :where(.admin-kpis,.analytics-overview-grid) {
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) !important;
    gap:14px !important;
  }
  .admin-page-body .admin-main-grid { display:grid !important; grid-template-columns:minmax(0,1fr) !important; }
  .admin-page-body :where(.analytics-grid,.tools-modal-grid) {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .admin-page-body .analytics-card { min-width:0 !important; }
  .admin-page-body .analytics-card-wide { grid-column:1 / -1 !important; }
  .admin-page-body :where(.client-card,.records-modal-item,.schedule-chip) {
    min-width:0 !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
    overflow-wrap:anywhere !important;
  }
  .admin-page-body :where(.client-card-main,.records-modal-main,.day-agenda-info,.analytics-metric-row) { min-width:0 !important; overflow-wrap:anywhere !important; }
  .admin-page-body :where(.client-card-actions,.records-modal-actions,.drawer-actions,.confirm-actions,.quick-booking-success-actions) {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    max-width:100% !important;
    position:static !important;
  }
  .admin-page-body :where(.client-card-actions,.records-modal-actions,.drawer-actions,.confirm-actions,.quick-booking-success-actions) > * { min-width:0 !important; flex:1 1 auto !important; }
  .admin-page-body .admin-table-wrap { max-width:100% !important; overflow-x:auto !important; }
  .admin-page-body .admin-footer { position:static !important; width:100% !important; padding:20px var(--ui-gutter) calc(20px + env(safe-area-inset-bottom)) !important; overflow-wrap:anywhere !important; }

  /* Drawer navigation scrolls as one surface, even on a short landscape phone. */
  .admin-page-body .premium-sidebar-backdrop {
    position:fixed !important; inset:0 !important; z-index:1000 !important;
    display:none !important; background:rgba(0,0,0,.6) !important;
  }
  .admin-page-body .premium-sidebar-backdrop.active { display:block !important; }
  .admin-page-body #admin-sidebar {
    position:fixed !important;
    inset:auto !important;
    top:var(--visible-top) !important;
    left:0 !important;
    width:min(340px,calc(100% - 24px)) !important;
    max-width:100% !important;
    height:var(--visible-height) !important;
    min-height:0 !important;
    max-height:var(--visible-height) !important;
    z-index:1010 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
    margin:0 !important;
    padding:calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y pinch-zoom !important;
    transform:translateX(-105%) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .2s ease,visibility .2s !important;
    will-change:transform !important;
    contain:none !important;
  }
  .admin-page-body #admin-sidebar.is-open { transform:translateX(0) !important; visibility:visible !important; pointer-events:auto !important; }
  .admin-page-body #admin-sidebar > * { flex:0 0 auto !important; min-width:0 !important; }
  .admin-page-body .premium-sidebar-head { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:12px !important; position:static !important; }
  .admin-page-body .premium-sidebar-account { margin-top:auto !important; padding-top:12px !important; position:static !important; }
  .admin-page-body #admin-sidebar :where(.admin-header-nav,.admin-tools-grid,.admin-topbar-start) {
    display:flex !important; flex-direction:column !important; gap:4px !important;
    width:100% !important; height:auto !important; max-height:none !important;
    overflow:visible !important; position:static !important; margin:0 !important;
  }
  .admin-page-body #admin-sidebar :where(.tool-launch-btn,.admin-header-tab,.admin-topbar-start .admin-link-btn) {
    width:100% !important; min-height:44px !important; height:auto !important;
    padding:12px 8px !important; text-align:left !important;
    font-size:14px !important; line-height:1.45 !important; white-space:normal !important;
  }

  /* Fixed layers are direct children of body; transformed cards cannot trap them. */
  body.premium-ui :where(.overlay,.admin-modal-shell,.admin-drawer,.admin-day-modal,#slot-quick-panel,.confirm-dialog,#notifications-overlay) {
    display:none !important;
    position:fixed !important;
    inset:auto !important;
    top:var(--visible-top) !important;
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:var(--visible-height) !important;
    min-height:0 !important;
    max-height:var(--visible-height) !important;
    padding:max(var(--ui-dialog-gap),env(safe-area-inset-top)) max(var(--ui-dialog-gap),env(safe-area-inset-right)) max(var(--ui-dialog-gap),env(safe-area-inset-bottom)) max(var(--ui-dialog-gap),env(safe-area-inset-left)) !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    overscroll-behavior:contain !important;
    transform:none !important;
    backdrop-filter:none !important;
    pointer-events:none !important;
    transition:none !important;
    z-index:1100 !important;
  }
  body.premium-ui :where(.overlay,.admin-modal-shell,.admin-drawer,.admin-day-modal,#slot-quick-panel,.confirm-dialog,#notifications-overlay).active {
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.premium-ui :where(.overlay,.confirm-dialog,#notifications-overlay) { background:rgba(0,0,0,.64) !important; }
  .admin-page-body #slot-quick-panel { z-index:1120 !important; }
  .admin-page-body #booking-drawer { z-index:1140 !important; }
  .admin-page-body #clients-modal { z-index:1160 !important; }
  .admin-page-body #client-history-modal { z-index:1180 !important; }
  .admin-page-body #notifications-overlay { z-index:1200 !important; }
  .admin-page-body #logout-confirm-dialog { z-index:1240 !important; }
  body.premium-ui :where(.admin-modal-backdrop,.admin-drawer-backdrop,.admin-day-modal-backdrop,.slot-quick-backdrop) {
    position:absolute !important; inset:0 !important; width:100% !important;
    height:100% !important; background:rgba(0,0,0,.64) !important; z-index:0 !important;
  }
  body.premium-ui :where(.booking-modal,.my-bookings-modal,.admin-drawer-panel,.admin-modal-shell .admin-tools-modal-panel,.admin-day-sheet,.slot-quick-dialog,.confirm-box,#notifications-panel) {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    flex:0 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:760px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    padding:clamp(16px,2.5vw,28px) !important;
    transform:none !important;
    animation:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y pinch-zoom !important;
    scroll-behavior:auto !important;
    scroll-padding-block:76px 24px !important;
    contain:none !important;
  }
  body.premium-ui .booking-modal { max-width:860px !important; }
  body.premium-ui :where(.my-bookings-modal,.confirm-box) { max-width:600px !important; }
  .admin-page-body .admin-drawer-panel { max-width:700px !important; }
  .admin-page-body #slot-quick-panel .slot-quick-dialog {
    max-width:820px !important;
    padding:0 !important;
    background:var(--ui-surface) !important;
    border:1px solid #343434 !important;
    border-radius:14px !important;
  }
  .admin-page-body #slot-quick-panel .slot-quick-top { display:none !important; }
  .admin-page-body #slot-quick-panel .slot-quick-grid { display:block !important; width:100% !important; padding:0 !important; margin:0 !important; }
  .admin-page-body #slot-quick-panel :where(.quick-booking-form,.quick-booking-success) {
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 !important;
    padding:clamp(16px,2.5vw,24px) !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .admin-page-body .quick-booking-form > .admin-form-grid { grid-column:auto !important; }
  .admin-page-body #slot-quick-panel .quick-booking-inline-close {
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    min-width:44px !important; width:44px !important; height:44px !important; flex:none !important;
  }
  body.premium-ui :where(.modal-header,.admin-tools-modal-head) {
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    height:auto !important;
    min-height:52px !important;
    margin:0 0 18px !important;
    padding:8px 0 !important;
    /*background:var(--ui-surface) !important;*/
    transform:none !important;
  }
  body.premium-ui :where(.modal-header,.admin-tools-modal-head) > :first-child { min-width:0 !important; overflow-wrap:anywhere !important; }
  body.premium-ui :where(.modal-header,.admin-tools-modal-head) > button { flex:none !important; }
  body.premium-ui .modal-header .close-btn { position:static !important; transform:none !important; width:44px !important; height:44px !important; min-width:44px !important; padding:0 !important; }
  .admin-page-body .quick-booking-date { font-size:clamp(16px,2vw,20px) !important; line-height:1.4 !important; }
  .admin-page-body .quick-booking-form .slot-form-head { display:flex !important; flex-wrap:wrap !important; gap:10px !important; }
  .admin-page-body .quick-booking-form > :where(.form-group,.btn-primary) { width:100% !important; grid-column:auto !important; }
  .admin-page-body .quick-booking-form > .btn-primary { position:static !important; margin-top:16px !important; }
  .admin-page-body .admin-day-sheet { display:flex !important; flex-direction:column !important; overflow:hidden !important; padding:0 !important; }
  .admin-page-body :where(.admin-day-sheet-head,.admin-day-sheet-actions) {
    display:flex !important; flex:0 0 auto !important; position:static !important;
    align-items:center !important; justify-content:space-between !important;
    gap:12px !important; padding:16px !important; min-width:0 !important;
  }
  .admin-page-body .admin-day-sheet-head > div { min-width:0 !important; }
  .admin-page-body .admin-day-sheet-list {
    flex:1 1 auto !important; min-height:0 !important; max-height:none !important;
    overflow-y:auto !important; overflow-x:hidden !important; padding:0 16px !important;
    overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
  }
  .admin-page-body .admin-day-sheet-actions { flex-wrap:wrap !important; }
  .admin-page-body .admin-day-sheet-actions > * { flex:1 1 auto !important; min-width:0 !important; }
  .admin-page-body #notifications-panel {
    display:flex !important; flex-direction:column !important;
    max-width:580px !important; overflow:hidden !important; padding:0 !important;
    border-radius:14px !important; box-shadow:0 16px 60px #0005 !important;
  }
  .admin-page-body .notifications-panel-head {
    display:flex !important; flex-wrap:wrap !important; flex:0 0 auto !important;
    gap:12px !important; position:static !important; padding:16px !important;
  }
  .admin-page-body .notifications-panel-head > div { min-width:0 !important; max-width:100% !important; }
  .admin-page-body .notifications-actions { display:flex !important; flex-wrap:wrap !important; gap:8px !important; }
  .admin-page-body .notifications-list {
    flex:1 1 auto !important; min-height:0 !important; max-height:none !important;
    overflow-y:auto !important; overflow-x:hidden !important; padding:0 16px 16px !important;
    overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important;
  }
  .admin-page-body .notification-item { min-width:0 !important; max-width:100% !important; overflow-wrap:anywhere !important; }
  .admin-page-body :where(.clients-modal-panel .clients-list,.clients-modal-panel .records-modal-list) {
    height:auto !important; max-height:none !important; overflow:visible !important;
  }

  /* Tools stay in the page. Only real dialogs have a bounded scroll surface. */
  .admin-page-body .admin-tools-page-panel {
    position:static !important; inset:auto !important; display:block !important;
    width:100% !important; min-width:0 !important; max-width:100% !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    transform:none !important; overflow:visible !important;
    padding:clamp(12px,2vw,24px) !important; margin:0 !important;
  }
  .admin-page-body .admin-tools-page-panel .admin-tools-modal-head { position:static !important; flex-wrap:wrap !important; }
  .admin-page-body .admin-tools-page-panel :where(.tools-modal-section,.tools-modal-grid,.tools-form-card,.tools-list-card,.records-modal-list,.schedule-chip-list,#showroom-admin-list,#products-admin-list,#services-admin-list,#barbers-admin-list) {
    min-width:0 !important; max-width:100% !important; height:auto !important;
    min-height:0 !important; max-height:none !important; overflow:visible !important;
  }
  .admin-page-body .admin-tools-page-panel :where(.tools-form-card,.tools-list-card) { padding:clamp(12px,2vw,20px) !important; }
  .admin-page-body .weekday-toggle-grid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important; gap:8px !important; }
  .admin-page-body .weekday-toggle-grid label { min-height:44px !important; }

  /* Calendar: retain month/week renderers; wide time grids scroll locally. */
  .admin-page-body :where(.scheduler-board-wrap,.scheduler-board) { width:100% !important; min-width:0 !important; max-width:100% !important; }
  .admin-page-body .scheduler-board-wrap {
    overflow-x:auto !important; overflow-y:auto !important; max-height:none !important;
    -webkit-overflow-scrolling:touch !important; overscroll-behavior-x:contain !important;
    touch-action:pan-x pan-y pinch-zoom !important;
  }
  .admin-page-body .scheduler-board { overflow:visible !important; }
  .admin-page-body .scheduler-grid:not(.scheduler-month-grid) {
    display:grid !important; width:100% !important; min-width:820px !important;
    grid-template-columns:64px repeat(7,minmax(108px,1fr)) !important;
  }
  .admin-page-body .scheduler-grid:not(.scheduler-month-grid) :where(.scheduler-corner,.scheduler-time) {
    min-width:64px !important; width:64px !important; padding-inline:4px !important;
    white-space:nowrap !important; text-align:center !important; overflow:visible !important;
  }
  .admin-page-body .scheduler-month-grid {
    display:grid !important; width:100% !important; min-width:0 !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  }
  .admin-page-body :where(.scheduler-month-cell,.scheduler-month-head) { min-width:0 !important; max-width:100% !important; }
  .admin-page-body .scheduler-top-controls { flex:1 1 520px !important; justify-content:flex-end !important; }
  .admin-page-body .scheduler-period-label { min-width:0 !important; text-align:center !important; white-space:normal !important; }
  .admin-page-body .scheduler-legend { display:flex !important; flex-wrap:wrap !important; gap:10px 16px !important; }
  .admin-page-body :where(.mobile-week-scheduler,.mobile-week-days) { width:100% !important; min-width:0 !important; max-width:100% !important; }
  .admin-page-body .mobile-week-days { display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:3px !important; }
  .admin-page-body .mobile-day-pill { width:100% !important; min-width:0 !important; min-height:54px !important; padding:6px 1px !important; }
  .admin-page-body .mobile-day-pill span { font-size:10px !important; letter-spacing:0 !important; }
  .admin-page-body .mobile-day-pill strong { font-size:16px !important; }
  .admin-page-body :where(.day-agenda,.mobile-agenda-list) { max-height:none !important; overflow:visible !important; }

  /* Public pages and booking steps share fluid widths with the admin. */
  body.premium-ui:not(.admin-page-body) :where(.site-nav,.hero-content,.public-section,.products-section,.showroom-section,.site-footer,footer) {
    min-width:0 !important; max-width:100% !important;
  }
  body.premium-ui:not(.admin-page-body) .hero-luxury { min-height:100svh !important; height:auto !important; padding-inline:var(--ui-gutter) !important; }
  body.premium-ui:not(.admin-page-body) .hero-content { width:100% !important; }
  body.premium-ui:not(.admin-page-body) .hero-logo-main { width:min(600px,85%) !important; height:auto !important; }
  body.premium-ui:not(.admin-page-body) .hero-actions { display:flex !important; flex-wrap:wrap !important; gap:12px !important; }
  body.premium-ui:not(.admin-page-body) :where(.product-showcase,.public-section) {
    width:100% !important; min-width:0 !important; max-width:100% !important;
    padding-inline:max(var(--ui-gutter),calc((100% - 1280px)/2)) !important;
  }
  body.premium-ui:not(.admin-page-body) :where(.product-category,.product-carousel-shell,.product-grid,.showroom-grid,.showroom-card,.product-copy,.showroom-copy) { min-width:0 !important; max-width:100% !important; }
  body.premium-ui:not(.admin-page-body) .product-carousel-shell { display:grid !important; grid-template-columns:44px minmax(0,1fr) 44px !important; align-items:center !important; gap:8px !important; padding:0 !important; }
  body.premium-ui:not(.admin-page-body) .product-grid { display:flex !important; grid-area:1 / 2 !important; width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; touch-action:pan-x pan-y pinch-zoom !important; -webkit-overflow-scrolling:touch !important; }
  body.premium-ui:not(.admin-page-body) .product-carousel-btn { position:static !important; transform:none !important; width:44px !important; min-width:44px !important; height:44px !important; margin:0 !important; }
  body.premium-ui:not(.admin-page-body) .product-carousel-btn--prev { grid-area:1 / 1 !important; }
  body.premium-ui:not(.admin-page-body) .product-carousel-btn--next { grid-area:1 / 3 !important; }
  body.premium-ui:not(.admin-page-body) :where(.product-copy,.showroom-copy,.footer-col,.footer-brand) { overflow-wrap:anywhere !important; min-width:0 !important; }
  body.premium-ui:not(.admin-page-body) #footer { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:32px !important; padding:48px max(var(--ui-gutter),calc((100% - 1280px)/2)) calc(24px + env(safe-area-inset-bottom)) !important; }
  body.premium-ui:not(.admin-page-body) .footer-bottom { grid-column:1 / -1 !important; display:flex !important; flex-wrap:wrap !important; gap:16px !important; justify-content:space-between !important; }
  body.premium-ui .booking-modal .step-screen { height:auto !important; min-height:0 !important; overflow:visible !important; }
  body.premium-ui .booking-modal .step-screen:not(.active) { display:none !important; }
  body.premium-ui .booking-modal .step-screen.active { display:block !important; }
  body.premium-ui :where(.prog-labels,.progress-bar) { display:grid !important; grid-template-columns:repeat(var(--booking-step-count,4),minmax(0,1fr)) !important; width:100% !important; gap:5px !important; position:static !important; }
  body.premium-ui .prog-label { white-space:normal !important; font-size:12px !important; line-height:1.4 !important; text-align:center !important; min-width:0 !important; padding:8px 0 !important; }
  body.premium-ui .prog-step { width:100% !important; }
  body.premium-ui .options-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  body.premium-ui .options-grid > * { min-width:0 !important; max-width:100% !important; height:auto !important; overflow-wrap:anywhere !important; }
  body.premium-ui .calendar-wrap { width:100% !important; min-width:0 !important; max-width:560px !important; margin-inline:auto !important; }
  body.premium-ui .cal-grid { display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; width:100% !important; min-width:0 !important; gap:4px !important; }
  body.premium-ui .cal-day { min-width:0 !important; max-width:100% !important; width:100% !important; min-height:38px !important; }
  body.premium-ui .time-slots { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)) !important; width:100% !important; min-width:0 !important; }
  body.premium-ui .modal-nav { display:flex !important; flex-wrap:wrap !important; justify-content:space-between !important; gap:10px !important; position:static !important; width:100% !important; margin-top:24px !important; }
  body.premium-ui .modal-nav > :where(button,a) { flex:1 1 120px !important; min-width:0 !important; }
  body.premium-ui .modal-nav > span:empty { display:none !important; }
  body.premium-ui .mybooking-card { min-width:0 !important; overflow-wrap:anywhere !important; }
  body.premium-ui .toast { position:fixed !important; z-index:2000 !important; left:50% !important; right:auto !important; bottom:max(16px,env(safe-area-inset-bottom)) !important; width:max-content !important; max-width:calc(100% - 32px) !important; transform:translateX(-50%) !important; white-space:normal !important; overflow-wrap:anywhere !important; pointer-events:none !important; }
  body.premium-ui .flatpickr-calendar { z-index:1800 !important; max-width:calc(100vw - 16px) !important; max-height:calc(var(--visible-height) - 16px) !important; overflow-y:auto !important; }

  @media (max-width:1100px) {
    .admin-page-body .scheduler-top-controls { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; flex-basis:100% !important; width:100% !important; gap:10px !important; }
    .admin-page-body .scheduler-period-label { grid-column:1 / -1 !important; grid-row:1 !important; text-align:left !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { justify-content:flex-end !important; }
  }
  @media (max-width:1024px) {
    .admin-page-body .tools-modal-grid { grid-template-columns:minmax(0,1fr) !important; }
    .admin-page-body :where(.tools-form-card,.tools-list-card) { grid-column:auto !important; }
    .admin-page-body .premium-workspace-label { display:none !important; }
  }
  @media (max-width:900px) {
    body.premium-ui:not(.admin-page-body) .site-nav { padding-inline:max(16px,env(safe-area-inset-left)) !important; }
  }
  @media (max-width:699px) {
    :root { --ui-dialog-gap:10px; }
    .admin-page-body .admin-wrap { padding-top:18px !important; }
    .admin-page-body .admin-topbar-layout { gap:6px !important; grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr) !important; }
    .admin-page-body .admin-brand img { width:104px !important; }
    .admin-page-body #notifications-toggle { font-size:11px !important; padding:6px 0 !important; gap:3px !important; }
    .admin-page-body .premium-login-back { max-width:100% !important; font-size:11px !important; padding:4px !important; }
    .admin-page-body :where(.admin-kpis,.analytics-overview-grid) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
    .admin-page-body .admin-kpi { min-width:0 !important; padding:14px !important; }
    .admin-page-body .analytics-grid { grid-template-columns:minmax(0,1fr) !important; }
    .admin-page-body :where(.client-card,.records-modal-item) { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; }
    .admin-page-body :where(.client-card-actions,.records-modal-actions,.admin-view-toolbar-actions,.daily-agenda-actions) { width:100% !important; }
    .admin-page-body .admin-search { max-width:100% !important; }
    .admin-page-body .scheduler-top-controls { grid-template-columns:minmax(0,1fr) !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group { width:100% !important; justify-content:flex-start !important; }
    .admin-page-body .scheduler-top-controls .admin-pill { flex:1 1 auto !important; min-width:0 !important; padding:8px !important; font-size:12px !important; }
    .admin-page-body .scheduler-month-cell { padding:5px 2px !important; }
    .admin-page-body .scheduler-month-head { font-size:10px !important; letter-spacing:0 !important; padding-inline:1px !important; }
    body.premium-ui :where(.admin-form-grid,.form-row) { grid-template-columns:minmax(0,1fr) !important; }
    body.premium-ui .options-grid { grid-template-columns:minmax(0,1fr) !important; }
    body.premium-ui:not(.admin-page-body) #footer { grid-template-columns:minmax(0,1fr) !important; gap:28px !important; }
    .admin-page-body .admin-day-sheet-head h3 { font-size:18px !important; }
    .admin-page-body .notifications-panel-head { gap:8px !important; }
    .admin-page-body .notifications-actions .admin-link-btn { font-size:12px !important; padding:8px !important; }
    body.premium-ui .step-title-book { font-size:clamp(22px,5vw,28px) !important; line-height:1.25 !important; }
  }
  @media (max-width:360px) {
    .admin-page-body .admin-brand img { width:88px !important; }
    .admin-page-body .admin-topbar-layout { gap:4px !important; }
    .admin-page-body :where(.admin-kpis,.analytics-overview-grid) { grid-template-columns:minmax(0,1fr) !important; }
    body.premium-ui .prog-label { font-size:11px !important; }
  }
  /* Height rules are deliberately independent of width and device labels. */
  @media (max-height:560px) {
    :root { --ui-dialog-gap:8px; }
    .admin-page-body .admin-topbar-page { position:relative !important; }
    body.premium-ui :where(.modal-header,.admin-tools-modal-head) { position:static !important; min-height:44px !important; margin-bottom:12px !important; padding-block:0 !important; }
    .admin-page-body :where(.admin-day-sheet-head,.admin-day-sheet-actions,.notifications-panel-head) { padding:10px 14px !important; }
    .admin-page-body .admin-day-sheet-head :where(p,.admin-day-sheet-eyebrow) { display:none !important; }
    .admin-page-body #admin-sidebar { gap:12px !important; padding-top:10px !important; }
    body.premium-ui:not(.admin-page-body) .hero-luxury { padding-block:100px 40px !important; }
  }
  html.ui-short-viewport body.premium-ui :where(.modal-header,.admin-tools-modal-head) { position:static !important; }
  @media (prefers-reduced-motion:reduce) {
    body.premium-ui *,body.premium-ui *::before,body.premium-ui *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  }
}

/* Final mobile overrides: keep compact order after legacy responsive rules. */
@layer ui-layout {
  @media (max-width:699px) {
    .admin-page-body .admin-tools-page-panel {
      padding:14px !important;
      background:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
      border:1px solid #2c2d31 !important;
      border-radius:18px !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head {
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      align-items:start !important;
      gap:10px !important;
      margin:0 0 18px !important;
      padding:0 0 14px !important;
      border-bottom:1px solid #2c2d31 !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head h3 {
      margin:4px 0 0 !important;
      font-size:clamp(22px,6vw,30px) !important;
      line-height:1.12 !important;
      letter-spacing:-.035em !important;
    }
    .admin-page-body .admin-tools-page-panel .admin-tools-modal-head [data-close-tools-modal] {
      width:auto !important; min-width:0 !important; height:40px !important; min-height:40px !important;
      padding:0 12px !important; border-radius:9px !important;
      background:#222327 !important; background-image:none !important;
      border:1px solid #3a3c42 !important; color:#ecece8 !important;
      font-size:12px !important; white-space:nowrap !important;
    }
    .admin-page-body .admin-tools-page-panel :where(input,select,textarea) {
      background:#111214 !important; border:1px solid #34363a !important;
      border-radius:12px !important; color:#f2f2ef !important; min-height:44px !important;
    }
    .admin-page-body #notifications-panel {
      width:calc(100% - 20px) !important; max-width:560px !important;
      height:min(calc(var(--visible-height) - 20px),760px) !important;
      max-height:calc(var(--visible-height) - 20px) !important;
      display:flex !important; flex-direction:column !important; padding:0 !important;
      border-radius:18px !important; overflow:hidden !important;
      background:linear-gradient(180deg,#191a1d 0%,#151619 100%) !important;
      border:1px solid #34363a !important;
    }
    .admin-page-body #notifications-panel .notifications-panel-head {
      display:grid !important; grid-template-columns:1fr !important; align-items:center !important;
      gap:12px !important; margin:0 !important; padding:16px !important; text-align:center !important;
      border-bottom:1px solid #2c2d31 !important; background:transparent !important;
    }
    .admin-page-body #notifications-panel .notifications-panel-head h3 { margin:4px 0 0 !important; font-size:clamp(24px,7vw,30px) !important; line-height:1.1 !important; }
    .admin-page-body #notifications-panel .notifications-actions {
      display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px !important;
      align-items:center !important; gap:6px !important; width:100% !important; min-width:0 !important;
    }
    .admin-page-body #notifications-panel .notifications-actions .admin-link-btn {
      width:100% !important; min-width:0 !important; max-width:100% !important; height:42px !important; min-height:42px !important;
      margin:0 !important; padding:0 8px !important; border-radius:9px !important;
      background:#222327 !important; background-image:none !important; border:1px solid #3a3c42 !important;
      color:#e4e4e0 !important; font-size:11px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    }
    .admin-page-body #notifications-panel .notifications-actions #notifications-close { width:42px !important; padding:0 !important; font-size:18px !important; }
    .admin-page-body #notifications-panel .notifications-list {
      flex:1 1 auto !important; min-height:0 !important; width:100% !important; max-width:none !important;
      padding:12px !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important;
      -webkit-overflow-scrolling:touch !important;
    }
    .admin-page-body #notifications-panel :is(.notification-item,.notification-empty) {
      width:100% !important; max-width:none !important; min-width:0 !important; box-sizing:border-box !important;
      margin:0 0 10px !important; padding:14px !important; overflow:visible !important; overflow-wrap:anywhere !important;
      background:linear-gradient(180deg,#202124 0%,#191a1d 100%) !important; border:1px solid #34363a !important; border-radius:14px !important;
    }
    .admin-page-body #notifications-panel .notification-item-actions { display:flex !important; width:100% !important; margin-top:12px !important; }
    .admin-page-body #notifications-panel .notification-item-actions .mini-btn { width:100% !important; min-height:40px !important; margin:0 !important; }
  }
}

/* Final calendar header sizing after all legacy media queries. */
@layer ui-layout {
  .admin-page-body .scheduler-card h2 { margin:0 !important; font-size:clamp(18px,1.65vw,24px) !important; line-height:1.15 !important; }
  .admin-page-body .scheduler-top-controls { display:grid !important; grid-template-columns:auto minmax(150px,1fr) auto !important; align-items:center !important; gap:8px !important; min-width:0 !important; flex:1 1 auto !important; }
  .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; grid-row:1 !important; order:0 !important; }
  .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:2 !important; grid-row:1 !important; order:0 !important; width:auto !important; text-align:center !important; font-size:clamp(18px,2vw,28px) !important; line-height:1.1 !important; letter-spacing:-.025em !important; white-space:nowrap !important; }
  .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:3 !important; grid-row:1 !important; order:0 !important; }
  .admin-page-body .scheduler-top-controls .admin-pill { min-height:38px !important; padding:0 11px !important; border-radius:9px !important; font-size:12px !important; }
  @media (max-width:1100px) {
    .admin-page-body .scheduler-top-controls { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; flex-basis:100% !important; width:100% !important; gap:8px !important; }
    .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:1 / -1 !important; grid-row:1 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; grid-row:2 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:2 !important; grid-row:2 !important; width:100% !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group .admin-pill { flex:1 1 0 !important; min-width:0 !important; padding-inline:7px !important; }
  }
  @media (max-width:699px) {
    .admin-page-body .scheduler-card h2 { font-size:18px !important; }
    .admin-page-body .scheduler-period-label { font-size:20px !important; }
    .admin-page-body .scheduler-top-controls { grid-template-columns:minmax(0,1fr) !important; gap:7px !important; }
    .admin-page-body .scheduler-top-controls > .scheduler-period-label { grid-column:1 !important; grid-row:1 !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:first-child { grid-column:1 !important; grid-row:2 !important; }
    .admin-page-body .scheduler-top-controls > .admin-toolbar-group:last-child { grid-column:1 !important; grid-row:3 !important; }
    .admin-page-body .scheduler-top-controls .admin-pill { min-height:36px !important; font-size:11px !important; }
  }
}

/* V155 — calendar period title sits above the navigation on every device. */
@layer ui-layout {
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:10px !important;
    align-items:center !important;
    min-width:0 !important;
  }

  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .scheduler-period-label {
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    order:0 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 4px 2px !important;
    text-align:center !important;
    font-size:clamp(20px,1.7vw,25px) !important;
    line-height:1.1 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }

  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child {
    grid-column:1 !important;
    grid-row:2 !important;
    order:0 !important;
    width:auto !important;
    min-width:0 !important;
    justify-self:start !important;
    justify-content:flex-start !important;
  }

  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:last-child {
    grid-column:2 !important;
    grid-row:2 !important;
    order:0 !important;
    width:auto !important;
    min-width:0 !important;
    justify-self:end !important;
    justify-content:flex-end !important;
  }

  @media (max-width:1100px) {
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls {
      width:100% !important;
      flex-basis:100% !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      row-gap:9px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child {
      width:100% !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child .admin-pill {
      flex:1 1 0 !important;
      min-width:0 !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-period-label {
      font-size:22px !important;
    }
  }

  @media (max-width:699px) {
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls {
      grid-template-columns:minmax(0,1fr) !important;
      grid-template-rows:auto auto auto !important;
      gap:7px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .scheduler-period-label {
      grid-column:1 !important;
      grid-row:1 !important;
      font-size:20px !important;
      padding-bottom:2px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child {
      grid-column:1 !important;
      grid-row:2 !important;
      width:100% !important;
      justify-self:stretch !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:last-child {
      grid-column:1 !important;
      grid-row:3 !important;
      width:100% !important;
      justify-self:stretch !important;
      justify-content:stretch !important;
    }
  }
}

/* V156 — hard fix for iPad/tablet landscape calendar header overlap.
   Keep the calendar heading, period and controls on dedicated rows. */
@layer ui-layout {
  body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:12px !important;
    width:100% !important;
  }
  body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar > div:first-child {
    width:100% !important;
    min-width:0 !important;
  }
  body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar > .scheduler-top-controls {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    gap:9px 12px !important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .scheduler-period-label {
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    text-align:left !important;
    justify-self:stretch !important;
    padding:0 !important;
    font-size:clamp(18px,2.15vw,24px) !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child {
    grid-column:1 !important;
    grid-row:2 !important;
    width:auto !important;
    min-width:0 !important;
    justify-self:start !important;
    display:flex !important;
    flex-wrap:nowrap !important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:last-child {
    grid-column:2 !important;
    grid-row:2 !important;
    width:auto !important;
    min-width:0 !important;
    justify-self:end !important;
    display:flex !important;
    flex-wrap:nowrap !important;
  }
  @media (min-width:700px) and (max-width:1180px) {
    body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar { gap:10px !important; }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .scheduler-period-label {
      font-size:20px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls .admin-pill {
      min-height:36px !important;
      padding-inline:9px !important;
      font-size:11px !important;
    }
  }
  @media (max-width:699px) {
    body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar { gap:9px !important; }
    body.premium-ui.admin-page-body .scheduler-card > .admin-toolbar > .scheduler-top-controls {
      grid-template-columns:minmax(0,1fr) !important;
      grid-template-rows:auto auto auto !important;
      gap:7px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .scheduler-period-label {
      grid-column:1 !important; grid-row:1 !important; text-align:center !important; font-size:19px !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:first-child {
      grid-column:1 !important; grid-row:2 !important; width:100% !important; justify-self:stretch !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group:last-child {
      grid-column:1 !important; grid-row:3 !important; width:100% !important; justify-self:stretch !important;
    }
    body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls > .admin-toolbar-group .admin-pill { flex:1 1 0 !important; }
  }
}

/* V157 — public customer booking modal: true full screen + fixed clean header. */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #booking-overlay {
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:max(10px,env(safe-area-inset-top)) clamp(16px,3vw,42px) max(18px,env(safe-area-inset-bottom)) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-padding-top:76px !important;
  }

  /* Keep the title/close row pinned while only the booking content scrolls. */
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
    position:sticky !important;
    top:0 !important;
    z-index:30 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    min-height:54px !important;
    margin:0 0 14px !important;
    padding:4px 0 8px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transform:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::before,
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::after {
    content:none !important;
    display:none !important;
    background:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-logo {
    margin:0 !important;
    line-height:1.2 !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-header .close-btn {
    position:static !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    margin:0 !important;
    transform:none !important;
  }

  /* Keep the booking itself readable on wide desktop while the modal remains full screen. */
  body.premium-ui:not(.admin-page-body) #booking-overlay :is(.progress-bar,.prog-labels,.step-screen) {
    width:min(100%,920px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  @media (max-width:699px) {
    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
      padding:max(6px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)) !important;
      scroll-padding-top:68px !important;
    }
    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
      min-height:50px !important;
      margin-bottom:10px !important;
      padding:2px 0 6px !important;
    }
  }

  /* Do not let short landscape viewports downgrade the pinned customer header. */
  @media (max-height:560px) {
    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
      position:sticky !important;
      top:0 !important;
      min-height:46px !important;
      margin-bottom:8px !important;
      padding:0 0 4px !important;
    }
  }

  html.ui-short-viewport body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
    position:sticky !important;
    top:0 !important;
  }
}

/* === v158: public booking + my bookings true full-screen sheet, no dark frame, pinned clean header === */
body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay){
  padding:0 !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
}

body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay).overlay.active{
  background:#f5f5f1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  height:100% !important;
  min-height:100dvh !important;
  max-height:none !important;
  margin:0 !important;
  padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#f5f5f1 !important;
  color:#17181a !important;
  display:flex !important;
  flex-direction:column !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > :not(.modal-header),
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > :not(.modal-header){
  width:min(100%, 980px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-lookup-grid,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-actions,
body.premium-ui:not(.admin-page-body) #mybookings-overlay #my-bookings-list{
  width:min(100%, 820px) !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header{
  position:sticky !important;
  top:0 !important;
  z-index:60 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:min(100%, 980px) !important;
  margin:0 auto 18px !important;
  padding:0 0 10px !important;
  min-height:48px !important;
  background:#f5f5f1 !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid rgba(23,24,26,.08) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::before,
body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::after,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::before,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::after{
  content:none !important;
  display:none !important;
}

body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .modal-logo{
  margin:0 !important;
  color:#555650 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  line-height:1.2 !important;
}

body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .close-btn{
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#ecebe6 !important;
  color:#1b1c1e !important;
  border:1px solid rgba(23,24,26,.10) !important;
  box-shadow:none !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav{
  width:min(100%, 980px) !important;
  margin:18px auto 0 !important;
  padding:12px 0 max(4px, env(safe-area-inset-bottom)) !important;
  position:sticky !important;
  bottom:0 !important;
  z-index:40 !important;
  background:linear-gradient(180deg, rgba(245,245,241,0), rgba(245,245,241,.92) 24%, #f5f5f1 100%) !important;
  border-top:0 !important;
  box-shadow:none !important;
}

body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-lookup-grid,
body.premium-ui:not(.admin-page-body) #mybookings-overlay #my-bookings-list,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-actions{
  margin-left:auto !important;
  margin-right:auto !important;
}

body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
  background:#f5f5f1 !important;
}

body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-lookup-grid{
  padding:0 !important;
  gap:14px !important;
}

@media (max-width: 900px){
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
    padding:max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header{
    margin-bottom:14px !important;
    padding:0 0 8px !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav{
    padding-top:10px !important;
  }
}

@media (max-width: 640px){
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > :not(.modal-header),
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > :not(.modal-header){
    width:100% !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header,
  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav{
    width:100% !important;
  }
}

/* === v159: desktop public modals return to centered compact dialog, keep clean pinned header === */
@media (min-width: 901px){
  body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay){
    padding:24px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay).overlay.active{
    background:rgba(15,16,18,.58) !important;
    backdrop-filter:blur(10px) saturate(108%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(108%) !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
    width:min(100%, 720px) !important;
    max-width:720px !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:min(860px, calc(100dvh - 48px)) !important;
    margin:0 auto !important;
    padding:20px 22px 20px !important;
    border:1px solid rgba(23,24,26,.10) !important;
    border-radius:26px !important;
    box-shadow:0 34px 100px rgba(0,0,0,.28) !important;
    background:#f5f5f1 !important;
    color:#17181a !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > :not(.modal-header),
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > :not(.modal-header){
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header{
    position:sticky !important;
    top:0 !important;
    z-index:60 !important;
    width:100% !important;
    margin:0 0 18px !important;
    padding:0 0 12px !important;
    min-height:50px !important;
    background:#f5f5f1 !important;
    background-image:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(23,24,26,.08) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::before,
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::after,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::before,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::after{
    content:none !important;
    display:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav{
    width:100% !important;
    margin:18px 0 0 !important;
    padding:12px 0 0 !important;
    position:sticky !important;
    bottom:0 !important;
    z-index:40 !important;
    background:linear-gradient(180deg, rgba(245,245,241,0), rgba(245,245,241,.92) 24%, #f5f5f1 100%) !important;
    box-shadow:none !important;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-lookup-grid,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-actions,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay #my-bookings-list{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* === v160: mobile pinned booking header must fully cover scrolling calendar/content === */
@media (max-width: 900px){
  body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .booking-modal,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
    position:relative !important;
    isolation:isolate !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
    isolation:isolate !important;
    overflow:visible !important;
    background-color:#f5f5f1 !important;
    background-image:none !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Opaque cover behind the title + X. Same colour as the modal, so it does not look like a separate header. */
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::before,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:-1 !important;
    top:calc(-1 * max(10px, env(safe-area-inset-top))) !important;
    left:calc(-1 * max(14px, env(safe-area-inset-left))) !important;
    right:calc(-1 * max(14px, env(safe-area-inset-right))) !important;
    bottom:-1px !important;
    background:#f5f5f1 !important;
    pointer-events:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::after,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:1px !important;
    background:rgba(23,24,26,.08) !important;
    pointer-events:none !important;
  }

  body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .modal-logo,
  body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .close-btn{
    position:relative !important;
    z-index:2 !important;
  }

  /* Never let calendar/time content paint over the pinned header. */
  body.premium-ui:not(.admin-page-body) #booking-overlay :is(.progress-bar,.prog-labels,.step-screen,.calendar-wrap,.cal-header,.cal-grid,#time-section,.time-slots,.modal-nav){
    position:relative;
    z-index:1;
  }
  body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav{
    position:sticky !important;
    z-index:40 !important;
  }
}

/* === v161: truly fixed public modal header via dedicated inner scroll area === */
body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header{
  flex:0 0 auto !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  z-index:5 !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable both-edges;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll > *,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll > *{
  max-width:100% !important;
}

body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll > .progress-bar,
body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll > .prog-labels,
body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll > .step-screen,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll > .my-bookings-lookup-grid,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll > .my-bookings-actions,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll > #my-bookings-list{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* === v162: my-bookings header truly pinned — moved INSIDE @layer ui-layout ===
   Root cause of v161 not working: this file intentionally uses CSS Cascade
   Layers ("Layered important declarations intentionally beat their historical
   unlayered important declarations" — see file header). The v161 header fix
   above was written *outside* any @layer, so it lost to the older layered
   rule (~line 593) that makes .my-bookings-modal itself overflow-y:auto.
   This block re-applies the same fix from inside @layer ui-layout, appended
   after every other ui-layout block in this file, so it wins on equal
   specificity via normal same-layer cascade order. */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal {
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal > .modal-header {
    flex:0 0 auto !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:5 !important;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll {
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable both-edges;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal-scroll > * {
    max-width:100% !important;
  }
}


/* v165 — compact tools panel corners */
body.premium-ui.admin-page-body .admin-tools-page-panel {
  border-radius:5px !important;
}

/* v166 — tool page titles: no coloured header background */
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head > div,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head :is(h3,.admin-sub) {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head::before,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head::after,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head > div::before,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head > div::after,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head h3::before,
body.premium-ui.admin-page-body .admin-tools-page-panel .admin-tools-modal-head h3::after {
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* === v167: booking modal keeps the fixed header AND restores its real inner scroll ===
   The shared @layer rule made .booking-modal itself the scroll container. app.js
   intentionally scrolls .booking-modal-scroll, so the automatic jumps after choosing
   a service/date stopped moving the visible modal. Keep only the inner body scrollable. */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
    flex:0 0 auto !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:5 !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll {
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y pinch-zoom !important;
    scroll-behavior:auto !important;
    scroll-padding-block:18px 28px !important;
  }
}

/* === v168: booking title/X are permanently outside the scrolling content ===
   Only .booking-modal-scroll is allowed to move. This prevents the header from
   ever riding over the booking steps while keeping the restored auto-scroll. */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
    flex:0 0 auto !important;
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    z-index:100 !important;
    transform:none !important;
    translate:none !important;
    width:100% !important;
    margin:0 !important;
    padding:0 0 12px !important;
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    background:#f5f5f1 !important;
    background-image:none !important;
    border:0 !important;
    border-bottom:1px solid rgba(23,24,26,.08) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:auto !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::before,
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header::after {
    content:none !important;
    display:none !important;
  }

  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll {
    position:relative !important;
    z-index:1 !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    margin:0 !important;
    padding-top:14px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y pinch-zoom !important;
    scroll-padding-top:18px !important;
    scroll-padding-bottom:28px !important;
    clip-path:inset(0) !important;
  }

  /* Anything that scrolls is clipped by the inner body and can never paint over title/X. */
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll > * {
    position:relative;
    z-index:1;
  }

  @media (max-width:900px) {
    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
      min-height:50px !important;
      padding:0 0 10px !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll {
      padding-top:12px !important;
    }
  }
}

/* === v169: public booking is a centered modal on desktop only === */
@layer ui-layout {
  @media (min-width: 901px) {
    body.premium-ui:not(.admin-page-body) #booking-overlay {
      padding:32px !important;
      align-items:center !important;
      justify-content:center !important;
      overflow:hidden !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
      width:min(720px, calc(100vw - 64px)) !important;
      max-width:720px !important;
      height:min(820px, calc(100dvh - 64px)) !important;
      max-height:calc(100dvh - 64px) !important;
      min-height:0 !important;
      margin:auto !important;
      border-radius:18px !important;
      box-shadow:0 28px 90px rgba(0,0,0,.42) !important;
      overflow:hidden !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal > .modal-header {
      border-radius:18px 18px 0 0 !important;
    }
  }
}

/* === v170: cleaner desktop booking modal — wider spacing, hidden scrollbar === */
@layer ui-layout {
  @media (min-width: 901px) {
    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal {
      width:min(820px, calc(100vw - 64px)) !important;
      max-width:820px !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll {
      scrollbar-width:none !important;
      -ms-overflow-style:none !important;
      scrollbar-gutter:auto !important;
      padding-left:8px !important;
      padding-right:8px !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal-scroll::-webkit-scrollbar {
      width:0 !important;
      height:0 !important;
      display:none !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .time-slots {
      gap:10px !important;
    }

    body.premium-ui:not(.admin-page-body) #booking-overlay .modal-nav {
      gap:14px !important;
    }
  }
}

/* === V23: manual booking colors, standalone clients, mobile calendar polish === */
body.premium-ui.admin-page-body .booking-color-picker{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-top:7px!important;
}
body.premium-ui.admin-page-body .booking-color-option{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;
  min-width:0!important;min-height:42px!important;padding:7px 9px!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:10px!important;background:#17181b!important;color:#c9c9cc!important;box-shadow:none!important;font:inherit!important;cursor:pointer!important;
}
body.premium-ui.admin-page-body .booking-color-option span{width:16px!important;height:16px!important;flex:0 0 16px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.22)!important;background:#34c759!important}
body.premium-ui.admin-page-body .booking-color-option small{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.premium-ui.admin-page-body .booking-color-option.is-default span{background:linear-gradient(135deg,#34c759 0 49%,#ff9f0a 50% 100%)!important}
body.premium-ui.admin-page-body .booking-color-option.is-yellow span{background:#ffd60a!important}
body.premium-ui.admin-page-body .booking-color-option.is-orange span{background:#ff9f0a!important}
body.premium-ui.admin-page-body .booking-color-option.is-blue span{background:#0a84ff!important}
body.premium-ui.admin-page-body .booking-color-option.is-purple span{background:#bf5af2!important}
body.premium-ui.admin-page-body .booking-color-option.is-pink span{background:#ff375f!important}
body.premium-ui.admin-page-body .booking-color-option.is-red span{background:#ff453a!important}
body.premium-ui.admin-page-body .booking-color-option.is-gray span{background:#8e8e93!important}
body.premium-ui.admin-page-body .booking-color-option.active{border-color:#f1f1f1!important;background:#232428!important;color:#fff!important;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset!important}

body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-yellow{--manual-booking-color:#ffd60a}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-orange{--manual-booking-color:#ff9f0a}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-blue{--manual-booking-color:#0a84ff}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-purple{--manual-booking-color:#bf5af2}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-pink{--manual-booking-color:#ff375f}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-red{--manual-booking-color:#ff453a}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-gray{--manual-booking-color:#8e8e93}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.scheduler-month-pill.is-booking-pill)[class*="booking-color-"]{box-shadow:inset 3px 0 0 var(--manual-booking-color)!important}
body.premium-ui.admin-page-body :is(.ios-calendar-agenda-item,.mobile-agenda-card)[class*="booking-color-"]::before{background:var(--manual-booking-color)!important}
body.premium-ui.admin-page-body .admin-day-row[class*="booking-color-"]{--day-accent:var(--manual-booking-color)!important}

body.premium-ui.admin-page-body .clients-modal-toolbar{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important}
body.premium-ui.admin-page-body .clients-modal-toolbar .admin-search{flex:1 1 260px!important}
body.premium-ui.admin-page-body .client-add-open{white-space:nowrap!important}
body.premium-ui.admin-page-body .client-form-helper{margin:0 0 14px!important;color:#92959b!important;font-size:12px!important;line-height:1.5!important}
body.premium-ui.admin-page-body .client-note{display:block!important;margin-top:4px!important;color:#b2b4ba!important;font-style:italic!important}
body.premium-ui.admin-page-body #add-client-modal.active{z-index:3400!important}

@media (max-width:767px), (pointer:coarse) and (max-width:1000px) and (max-height:699px){
  body.premium-ui.admin-page-body .scheduler-card{padding:12px!important;border-radius:14px!important}
  body.premium-ui.admin-page-body .scheduler-card>.admin-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;align-items:start!important}
  body.premium-ui.admin-page-body .scheduler-card>.admin-toolbar>div:first-child{display:none!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-period-label{grid-row:1!important;grid-column:1!important;font-size:19px!important;line-height:1.15!important;text-align:center!important;white-space:normal!important;padding:2px 0 3px!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:first-child{grid-row:2!important;grid-column:1!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:last-child{grid-row:3!important;grid-column:1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%!important;min-width:0!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls .admin-pill{width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:0 6px!important;border-radius:8px!important;font-size:11px!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-legend{display:none!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-board-wrap{border:0!important;background:transparent!important;border-radius:0!important;padding:0!important;overflow:visible!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-quick-actions{display:none!important}

  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month{gap:2px!important;background:transparent!important;border:0!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-head{height:24px!important;min-height:24px!important;padding:4px 0!important;font-size:9px!important;color:#858991!important;background:transparent!important;border:0!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-cell{min-height:64px!important;padding:4px 2px!important;border:1px solid rgba(255,255,255,.055)!important;background:#17181c!important;border-radius:5px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-cell.is-selected{border-color:rgba(255,255,255,.6)!important;background:#202126!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-date{font-size:12px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-add{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;border-radius:5px!important;font-size:15px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-pill{min-height:22px!important;padding:3px 4px 3px 7px!important;border-radius:4px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-pill span{font-size:8px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-pill strong{font-size:8.5px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-pill em{display:none!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-empty{font-size:0!important;min-height:20px!important;padding:0!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-empty::after{content:'+'!important;font-size:15px!important;color:#777b82!important}

  body.premium-ui.admin-page-body .mobile-week-days{position:sticky!important;top:0!important;z-index:4!important;padding:4px 0 9px!important;background:#111216!important;border-radius:7px!important}
  body.premium-ui.admin-page-body .mobile-day-panel-head{position:sticky!important;top:62px!important;z-index:3!important;background:#111216!important;padding:8px 0 10px!important}
  body.premium-ui.admin-page-body .mobile-agenda-list{max-height:240px!important;padding-right:2px!important}
  body.premium-ui.admin-page-body .mobile-agenda-card{min-height:58px!important;padding:10px 11px 10px 14px!important;border-radius:8px!important}
  body.premium-ui.admin-page-body .mobile-quick-slots{padding-bottom:8px!important}

  body.premium-ui.admin-page-body .booking-color-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.premium-ui.admin-page-body .client-add-open{width:100%!important}
  body.premium-ui.admin-page-body .add-client-panel{width:calc(100% - 16px)!important;max-height:calc(var(--visible-height) - 16px)!important;overflow-y:auto!important}
}

@media (orientation:landscape) and (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .scheduler-card{padding:9px 11px!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-period-label{grid-column:1 / -1!important;grid-row:1!important;font-size:16px!important;padding:0!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:first-child{grid-column:1!important;grid-row:2!important;display:flex!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:last-child{grid-column:2!important;grid-row:2!important;display:flex!important;width:auto!important}
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls .admin-pill{height:34px!important;min-height:34px!important;font-size:10px!important}
  body.premium-ui.admin-page-body .mobile-week-scheduler{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr)!important;align-items:start!important;gap:10px!important}
  body.premium-ui.admin-page-body .mobile-week-days{position:static!important;grid-column:1!important;grid-row:1!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;padding:0 0 8px!important}
  body.premium-ui.admin-page-body .mobile-day-panel{grid-column:1 / -1!important;grid-row:2!important;display:grid!important;grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr)!important;gap:10px!important}
  body.premium-ui.admin-page-body .mobile-day-panel-head{position:static!important;grid-column:1 / -1!important;padding:0 0 7px!important}
  body.premium-ui.admin-page-body .mobile-agenda-list{grid-column:1!important;max-height:145px!important}
  body.premium-ui.admin-page-body .mobile-quick-slots-title{grid-column:2!important;grid-row:2!important;margin:0!important;align-self:start!important}
  body.premium-ui.admin-page-body .mobile-quick-slots{grid-column:2!important;grid-row:3!important;align-self:start!important;max-height:112px!important;overflow-y:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow-x:hidden!important}
  body.premium-ui.admin-page-body .mobile-slot-plus{width:100%!important;min-width:0!important;flex:none!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-cell{min-height:48px!important;padding:2px!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-pill{display:none!important}
  body.premium-ui.admin-page-body .scheduler-month-grid.is-compact-touch-month .scheduler-month-count-badge{display:inline-flex!important}
}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-yellow{border-left:3px solid #ffd60a!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-orange{border-left:3px solid #ff9f0a!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-blue{border-left:3px solid #0a84ff!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-purple{border-left:3px solid #bf5af2!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-pink{border-left:3px solid #ff375f!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-red{border-left:3px solid #ff453a!important}
body.premium-ui.admin-page-body .daily-agenda-card .agenda-item.booking-color-gray{border-left:3px solid #8e8e93!important}

/* ==========================================================================\n   Client history — flat premium timeline (v24)\n   ========================================================================== */
body.premium-ui.admin-page-body #client-history-modal .admin-tools-modal-panel{
  border-radius:12px!important;
}
body.premium-ui.admin-page-body #client-history-list{
  display:block!important;
  padding:0!important;
  border-top:1px solid rgba(255,255,255,.075)!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-item{
  --history-accent:#777b83;
  position:relative!important;
  display:block!important;
  margin:0!important;
  padding:15px 4px 15px 15px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-item:last-child{
  border-bottom:0!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-item::before{
  content:''!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  bottom:16px!important;
  width:2px!important;
  background:var(--history-accent)!important;
  border-radius:0!important;
}
body.premium-ui.admin-page-body #client-history-list .history-status-confirmed{--history-accent:#30d158}
body.premium-ui.admin-page-body #client-history-list .history-status-pending{--history-accent:#ff9f0a}
body.premium-ui.admin-page-body #client-history-list .history-status-completed{--history-accent:#0a84ff}
body.premium-ui.admin-page-body #client-history-list .history-status-rescheduled{--history-accent:#bf5af2}
body.premium-ui.admin-page-body #client-history-list .history-status-cancelled{--history-accent:#ff453a}
body.premium-ui.admin-page-body #client-history-list .client-history-main{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-topline{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:12px!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-topline strong{
  min-width:0!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:-.01em!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-status{
  flex:0 0 auto!important;
  color:#9ea2aa!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-meta{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-top:5px!important;
  color:#b8bbc2!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-time{
  color:#fff!important;
  font-weight:650!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-time::before{
  content:'•'!important;
  display:inline-block!important;
  margin-right:8px!important;
  color:#555a62!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-note{
  display:block!important;
  margin-top:6px!important;
  color:#8f939b!important;
  font-size:10px!important;
  line-height:1.4!important;
  font-style:normal!important;
}
body.premium-ui.admin-page-body #client-history-list .client-history-note.is-empty{
  color:#666b73!important;
}

@media (max-width:699px){
  body.premium-ui.admin-page-body #client-history-modal .admin-tools-modal-panel{
    border-radius:8px!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-item{
    padding:13px 2px 13px 13px!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-item::before{
    top:14px!important;
    bottom:14px!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-topline{
    align-items:flex-start!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-topline strong{
    font-size:12.5px!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-status{
    font-size:8.5px!important;
  }
  body.premium-ui.admin-page-body #client-history-list .client-history-meta{
    flex-wrap:wrap!important;
    gap:5px!important;
    font-size:10px!important;
  }
}

/* V35 — admin modal headers must scroll normally, never follow content */
body.premium-ui.admin-page-body :is(
  #admin-tools-modal .admin-tools-modal-head,
  #clients-modal .admin-tools-modal-head,
  #add-client-modal .admin-tools-modal-head,
  #client-history-modal .admin-tools-modal-head,
  #slot-quick-panel .slot-quick-top,
  #slot-quick-panel .quick-booking-topline,
  #admin-day-modal .admin-day-sheet-head,
  #notifications-overlay .notifications-panel-head
){
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:auto!important;
  transform:none!important;
  flex-shrink:0!important;
}

/* Prevent old pinned-header effects from visually covering modal content. */
body.premium-ui.admin-page-body :is(
  #admin-tools-modal .admin-tools-modal-head,
  #clients-modal .admin-tools-modal-head,
  #add-client-modal .admin-tools-modal-head,
  #client-history-modal .admin-tools-modal-head,
  #slot-quick-panel .slot-quick-top,
  #slot-quick-panel .quick-booking-topline,
  #admin-day-modal .admin-day-sheet-head,
  #notifications-overlay .notifications-panel-head
){
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* === V25: tablet week view — real custom appointment colors + reliable tap === */
/* Color tokens are shared by every week renderer, including the iOS timeline variant. */
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-yellow{--manual-booking-color:#ffd60a;--manual-booking-rgb:255,214,10}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-orange{--manual-booking-color:#ff9f0a;--manual-booking-rgb:255,159,10}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-blue{--manual-booking-color:#0a84ff;--manual-booking-rgb:10,132,255}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-purple{--manual-booking-color:#bf5af2;--manual-booking-rgb:191,90,242}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-pink{--manual-booking-color:#ff375f;--manual-booking-rgb:255,55,95}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-red{--manual-booking-color:#ff453a;--manual-booking-rgb:255,69,58}
body.premium-ui.admin-page-body :is(.scheduler-item.booking,.ios-timeline-event,.scheduler-month-pill.is-booking-pill,.ios-calendar-agenda-item,.mobile-agenda-card,.admin-day-row).booking-color-gray{--manual-booking-color:#8e8e93;--manual-booking-rgb:142,142,147}

/* Desktop/tablet week grid: manual color changes the actual card, not only the left rail. */
body.premium-ui.admin-page-body .scheduler-grid:not(.scheduler-month-grid) .scheduler-item.booking[class*="booking-color-"]{
  background:rgba(var(--manual-booking-rgb),.24)!important;
  border-color:rgba(var(--manual-booking-rgb),.58)!important;
  box-shadow:inset 4px 0 0 var(--manual-booking-color)!important;
}

/* Timeline week renderer gets the same visual color treatment. */
body.premium-ui.admin-page-body .ios-timeline-event[class*="booking-color-"]{
  background:rgba(var(--manual-booking-rgb),.24)!important;
  border-color:rgba(var(--manual-booking-rgb),.58)!important;
}
body.premium-ui.admin-page-body .ios-timeline-event[class*="booking-color-"]::before{
  background:var(--manual-booking-color)!important;
}

/* Tablet/iPad tap target and feedback. Kept outside pointer media queries so Safari layout detection cannot skip it. */
@media (min-width:700px) and (max-width:1366px){
  body.premium-ui.admin-page-body .scheduler-grid:not(.scheduler-month-grid) .scheduler-item.booking[data-edit],
  body.premium-ui.admin-page-body .ios-timeline-event[data-edit]{
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:transform .12s ease,filter .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  body.premium-ui.admin-page-body .scheduler-grid:not(.scheduler-month-grid) .scheduler-item.booking[data-edit]:active,
  body.premium-ui.admin-page-body .scheduler-grid:not(.scheduler-month-grid) .scheduler-item.booking.is-tablet-selected,
  body.premium-ui.admin-page-body .ios-timeline-event[data-edit]:active,
  body.premium-ui.admin-page-body .ios-timeline-event.is-tablet-selected{
    transform:scale(.97)!important;
    filter:brightness(1.12)!important;
    outline:2px solid rgba(255,255,255,.72)!important;
    outline-offset:-2px!important;
  }
}

/* === V32: iPhone-like phone Week calendar / real half-hour schedule === */
@media (max-width:767px), (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .ios-week-iphone-v32{
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }

  /* iPhone Calendar-style 7-day strip: no bulky cards, one compact row. */
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-strip-wrap{
    overflow:visible!important;
    padding:0 1px 2px!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-strip{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-chip{
    min-width:0!important;
    min-height:62px!important;
    padding:4px 1px 5px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:grid!important;
    grid-template-rows:14px 34px 8px!important;
    place-items:center!important;
    gap:0!important;
    opacity:1!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-label{
    font-size:9px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    color:#8e8e93!important;
    text-transform:uppercase!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-number{
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:600!important;
    color:#f5f5f7!important;
    background:transparent!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-chip.is-today:not(.active) .ios-week-day-number{
    color:#ff453a!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-chip.active .ios-week-day-number{
    background:#ff453a!important;
    color:#fff!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-chip.is-blackout{
    opacity:.48!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-indicators{
    height:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-indicators i{
    width:3px!important;
    height:3px!important;
    border-radius:50%!important;
    background:transparent!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-indicators i.has-bookings{
    background:#8e8e93!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-chip.active .ios-week-day-indicators i.has-bookings{
    background:#ff453a!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-day-indicators i.is-closed{
    background:#48484a!important;
  }

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-title-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    align-items:center!important;
    gap:10px!important;
    min-height:44px!important;
    padding:2px 2px 6px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-title-copy{
    min-width:0!important;
    display:grid!important;
    gap:3px!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-title-copy strong{
    min-width:0!important;
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:700!important;
    color:#f5f5f7!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-transform:none!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-title-copy span{
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:600!important;
    color:#8e8e93!important;
    font-variant-numeric:tabular-nums!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-add-btn{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:transparent!important;
    color:#ff453a!important;
    font-size:27px!important;
    line-height:1!important;
    font-weight:300!important;
    box-shadow:none!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-add-btn:active{
    background:rgba(255,69,58,.12)!important;
  }

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-timeline-shell{
    border-top:0!important;
    padding-top:4px!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-timeline{
    position:relative!important;
    padding-left:0!important;
    min-width:0!important;
  }

  /* Every 30 minutes is now a first-class visible row. */
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-half-hour-row{
    position:absolute!important;
    left:0!important;
    right:0!important;
    height:0!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-hour-label{
    position:absolute!important;
    left:0!important;
    top:-7px!important;
    width:48px!important;
    text-align:right!important;
    padding-right:7px!important;
    color:#6f737a!important;
    font-size:9px!important;
    line-height:14px!important;
    font-weight:500!important;
    letter-spacing:0!important;
    font-variant-numeric:tabular-nums!important;
    background:#0b0c0f!important;
    z-index:1!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-half-hour-row.is-hour .ios-hour-label{
    color:#a0a3a9!important;
    font-weight:600!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-hour-line{
    position:absolute!important;
    left:52px!important;
    right:0!important;
    top:0!important;
    height:1px!important;
    background:rgba(255,255,255,.055)!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-half-hour-row.is-hour .ios-hour-line{
    background:rgba(255,255,255,.10)!important;
  }

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-drop-slot{
    position:absolute!important;
    left:54px!important;
    right:0!important;
    z-index:1!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    touch-action:manipulation!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-drop-slot:active{
    background:rgba(255,255,255,.025)!important;
  }

  /* Appointment canvas begins after the time gutter. Overlapping appointments split side-by-side. */
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-event-layer{
    position:absolute!important;
    left:56px!important;
    right:2px!important;
    top:0!important;
    bottom:0!important;
    z-index:3!important;
    pointer-events:none!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event{
    position:absolute!important;
    left:var(--event-left,0%)!important;
    right:auto!important;
    width:calc(var(--event-width,100%) - 3px)!important;
    min-width:0!important;
    margin-left:1px!important;
    padding:6px 7px 5px 9px!important;
    border:0!important;
    border-radius:6px!important;
    display:grid!important;
    align-content:start!important;
    gap:2px!important;
    background:rgba(74,74,80,.60)!important;
    color:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    z-index:3!important;
    pointer-events:auto!important;
    text-align:left!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event::before{
    content:''!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:3px!important;
    border-radius:6px 0 0 6px!important;
    background:#8e8e93!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.calendar-status-confirmed::before{background:#34c759!important}
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.calendar-status-pending::before{background:#ff9f0a!important}
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.calendar-status-completed::before{background:#0a84ff!important}
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.calendar-status-rescheduled::before{background:#bf5af2!important}
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-break::before,
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-blocked::before{background:#8e8e93!important}
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event[class*="booking-color-"]::before{background:var(--manual-booking-color)!important}

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event[class*="booking-color-"]{
    background:rgba(var(--manual-booking-rgb),.22)!important;
    border:0!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-break{
    background:rgba(99,99,102,.28)!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-blocked{
    background:rgba(99,99,102,.38)!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-time{
    color:#d1d1d6!important;
    font-size:9px!important;
    line-height:1.05!important;
    font-weight:600!important;
    font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event strong{
    color:#fff!important;
    font-size:11px!important;
    line-height:1.08!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event small{
    color:#c7c7cc!important;
    font-size:9px!important;
    line-height:1.05!important;
    font-weight:500!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-compact-event{
    grid-template-columns:1fr!important;
    gap:1px!important;
    padding-top:5px!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-timeline-event.is-compact-event small{
    display:none!important;
  }

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-current-line{
    position:absolute!important;
    left:50px!important;
    right:0!important;
    height:0!important;
    z-index:5!important;
    pointer-events:none!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-current-line i{
    position:absolute!important;
    left:6px!important;
    right:0!important;
    top:0!important;
    height:1.5px!important;
    background:#ff453a!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-current-line i::before{
    content:''!important;
    position:absolute!important;
    left:-4px!important;
    top:-3px!important;
    width:7px!important;
    height:7px!important;
    border-radius:50%!important;
    background:#ff453a!important;
  }
  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-current-line span{
    position:absolute!important;
    left:-50px!important;
    top:-7px!important;
    width:46px!important;
    min-height:14px!important;
    padding:0 5px!important;
    border-radius:0!important;
    background:#0b0c0f!important;
    color:#ff453a!important;
    font-size:9px!important;
    line-height:14px!important;
    font-weight:700!important;
    text-align:right!important;
    font-variant-numeric:tabular-nums!important;
  }

  body.premium-ui.admin-page-body .ios-week-iphone-v32 .ios-week-empty-state{
    border:0!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    padding:28px 16px!important;
  }
}


/* === V33: fluid/clean phone Week calendar across 320–767px === */
@media (max-width:767px), (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .scheduler-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:clamp(8px,2.8vw,12px)!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-board-wrap,
  body.premium-ui.admin-page-body .scheduler-card .scheduler-board{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.premium-ui.admin-page-body .mobile-week-responsive-v33{
    --week-time-gutter:clamp(44px,13vw,56px);
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:clamp(7px,2.2vw,10px)!important;
    overflow:hidden!important;
  }

  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-strip-wrap{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding:0!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-strip{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:0!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-chip{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:clamp(52px,16vw,62px)!important;
    padding:clamp(3px,1vw,5px) 0 4px!important;
    grid-template-rows:clamp(11px,3.6vw,14px) clamp(29px,9vw,34px) 7px!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-label{
    max-width:100%!important;
    font-size:clamp(7.5px,2.45vw,9px)!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-number{
    width:clamp(27px,8.7vw,32px)!important;
    height:clamp(27px,8.7vw,32px)!important;
    font-size:clamp(14px,4.8vw,17px)!important;
  }

  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-row{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) clamp(30px,9vw,34px)!important;
    gap:clamp(6px,2.5vw,10px)!important;
    min-height:clamp(40px,12vw,46px)!important;
    padding:3px 1px 7px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-copy{
    min-width:0!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-copy strong{
    max-width:100%!important;
    font-size:clamp(13px,4.3vw,16px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-copy span{
    max-width:100%!important;
    font-size:clamp(8.5px,2.8vw,10px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-add-btn{
    width:clamp(30px,9vw,34px)!important;
    height:clamp(30px,9vw,34px)!important;
    min-width:clamp(30px,9vw,34px)!important;
    min-height:clamp(30px,9vw,34px)!important;
    font-size:clamp(23px,7.4vw,27px)!important;
  }

  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline-shell,
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-hour-label{
    width:calc(var(--week-time-gutter) - 6px)!important;
    padding-right:5px!important;
    font-size:clamp(8px,2.45vw,9px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-hour-line{
    left:var(--week-time-gutter)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-drop-slot{
    left:calc(var(--week-time-gutter) + 2px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-event-layer{
    left:calc(var(--week-time-gutter) + 4px)!important;
    right:1px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event{
    width:calc(var(--event-width,100%) - 2px)!important;
    margin-left:1px!important;
    padding:clamp(5px,1.7vw,7px) clamp(5px,1.8vw,8px) 5px clamp(8px,2.4vw,10px)!important;
    border-radius:clamp(5px,1.8vw,7px)!important;
    gap:1px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-time{
    font-size:clamp(8px,2.45vw,9px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event strong{
    font-size:clamp(9.5px,3.1vw,11px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event small{
    font-size:clamp(8px,2.45vw,9px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-current-line{
    left:calc(var(--week-time-gutter) - 2px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-current-line span{
    left:calc((var(--week-time-gutter) - 2px) * -1)!important;
    width:calc(var(--week-time-gutter) - 4px)!important;
    padding:0 4px!important;
    font-size:clamp(8px,2.45vw,9px)!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-empty-state{
    width:100%!important;
    min-width:0!important;
    padding:clamp(20px,7vw,28px) clamp(12px,4vw,16px)!important;
  }
}

/* Small Android/iPhone widths: remove non-essential detail before anything can collide. */
@media (max-width:380px){
  body.premium-ui.admin-page-body .mobile-week-responsive-v33{
    --week-time-gutter:44px;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-chip{
    min-height:52px!important;
    grid-template-rows:11px 29px 6px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-number{
    width:27px!important;
    height:27px!important;
    font-size:14px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-copy strong{
    font-size:13px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event small{
    display:none!important;
  }
}

@media (max-width:340px){
  body.premium-ui.admin-page-body .scheduler-card{
    padding:7px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-label{
    font-size:7px!important;
    letter-spacing:-.02em!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-number{
    width:25px!important;
    height:25px!important;
    font-size:13px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-copy span{
    font-size:8px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event strong{
    font-size:9.5px!important;
  }
}

/* Phone landscape stays dense and clean instead of becoming a stretched tablet grid. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-chip{
    min-height:46px!important;
    grid-template-rows:10px 25px 5px!important;
    padding:2px 0 3px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-day-number{
    width:25px!important;
    height:25px!important;
    font-size:13px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-title-row{
    min-height:38px!important;
    padding-bottom:5px!important;
  }
}

/* === V34: booking drawer mobile responsive repair ===
   Fixes generic mobile button width rules squeezing the reschedule summary
   and keeps the booking editor clean from 320px to large phones. */
@media (max-width: 699px){
  body.premium-ui.admin-page-body #booking-drawer{
    padding:0!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }

  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-panel{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:94dvh!important;
    margin:0!important;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:22px 22px 0 0!important;
    overscroll-behavior:contain!important;
  }

  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 12px!important;
    padding:2px 0 12px!important;
    background:transparent!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head > div{
    min-width:0!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head h3{
    margin:2px 0 0!important;
    font-size:20px!important;
    line-height:1.12!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head .admin-link-btn{
    width:auto!important;
    min-width:84px!important;
    max-width:none!important;
    min-height:40px!important;
    padding:0 13px!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  body.premium-ui.admin-page-body #drawer-form,
  body.premium-ui.admin-page-body #drawer-form > *,
  body.premium-ui.admin-page-body #drawer-form .admin-form-grid,
  body.premium-ui.admin-page-body #drawer-form .form-group{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.premium-ui.admin-page-body #drawer-form{
    width:100%!important;
    gap:12px!important;
    overflow:visible!important;
  }
  body.premium-ui.admin-page-body #drawer-form .admin-form-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    padding:8px!important;
  }
  body.premium-ui.admin-page-body #drawer-form .form-group,
  body.premium-ui.admin-page-body #drawer-form .admin-form-grid .form-group{
    width:100%!important;
    margin:0!important;
    padding:10px!important;
  }
  body.premium-ui.admin-page-body #drawer-form :is(input,select,textarea){
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  body.premium-ui.admin-page-body #drawer-form .booking-color-field{
    width:100%!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-picker{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-option{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:54px!important;
    padding:7px 4px!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-option small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Main broken area in the screenshot: never let the button consume the date column. */
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-card{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-head > div{
    display:grid!important;
    gap:5px!important;
    min-width:0!important;
    width:100%!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-label{
    display:block!important;
    width:auto!important;
    white-space:normal!important;
  }
  body.premium-ui.admin-page-body #drawer-form #drawer-reschedule-current{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.4!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-toggle{
    width:auto!important;
    min-width:88px!important;
    max-width:none!important;
    min-height:42px!important;
    padding:0 14px!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
    justify-self:end!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-fields{
    width:100%!important;
    min-width:0!important;
  }

  /* Bottom actions should be part of the normal flow, never cover notes/content. */
  body.premium-ui.admin-page-body #drawer-form .drawer-actions{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    margin:2px 0 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-actions :is(.admin-link-btn,.btn-primary){
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
  }
}

@media (max-width: 430px){
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-panel{
    padding-left:11px!important;
    padding-right:11px!important;
    border-radius:18px 18px 0 0!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-picker{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-option{
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:7px 9px!important;
  }
  body.premium-ui.admin-page-body #drawer-form .booking-color-option small{
    font-size:10px!important;
  }
}

@media (max-width: 350px){
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head .admin-link-btn{
    min-width:72px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-head{
    grid-template-columns:1fr!important;
  }
  body.premium-ui.admin-page-body #drawer-form .drawer-reschedule-toggle{
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* === V35: mobile Week scroll + booking drawer header cleanup === */
@media (max-width:767px), (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  /* The phone Week timeline owns vertical scrolling so every half-hour stays reachable. */
  body.premium-ui.admin-page-body .mobile-week-responsive-v33{
    overflow:visible!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline-shell{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:min(62dvh,620px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
    scrollbar-gutter:stable!important;
    padding:4px 0 max(16px,env(safe-area-inset-bottom))!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    touch-action:pan-y!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-drop-slot,
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-timeline-event{
    touch-action:pan-y!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline-shell::-webkit-scrollbar{
    width:4px!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline-shell::-webkit-scrollbar-track{
    background:transparent!important;
  }
  body.premium-ui.admin-page-body .mobile-week-responsive-v33 .ios-week-timeline-shell::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.18)!important;
    border-radius:999px!important;
  }
}

@media (max-width:699px){
  /* Booking drawer header scrolls away with the form: never sticky/fixed. */
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:4px 2px 12px!important;
    background:transparent!important;
    border-
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-title-wrap{
    display:grid!important;
    gap:4px!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head .admin-sub{
    margin:0!important;
    font-size:8.5px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
    color:#858991!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-head h3{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:clamp(18px,5.3vw,22px)!important;
    line-height:1.08!important;
    font-weight:750!important;
    letter-spacing:-.025em!important;
    color:#f3f4f6!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-close{
    display:grid!important;
    place-items:center!important;
    justify-self:end!important;
    align-self:start!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:50%!important;
    background:#1a1d22!important;
    color:#f2f3f5!important;
    box-shadow:none!important;
    line-height:1!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-close-icon{
    display:block!important;
    margin-top:-1px!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:300!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-close-text{
    display:none!important;
  }
  body.premium-ui.admin-page-body #booking-drawer .admin-drawer-panel{
    scroll-padding-top:0!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* ==========================================================================\n   V38 — Untitled UI inspired mobile WEEK view\n   Real seven-day time grid, mobile swipe, existing UNAVERAGE logic/colors.\n   ========================================================================== */
@media (max-width:767px), (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .scheduler-card{
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-board-wrap,
  body.premium-ui.admin-page-body .scheduler-card .scheduler-board{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  body.premium-ui.admin-page-body .untitled-mobile-week-v1{
    --week-time-gutter:52px;
    --week-day-width:132px;
    --week-surface:#0d0e10;
    --week-surface-raised:#111216;
    --week-border:rgba(255,255,255,.075);
    --week-border-strong:rgba(255,255,255,.12);
    --week-muted:#858891;
    --week-text:#f4f4f5;
    --week-accent:#ff453a;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body.premium-ui.admin-page-body .untitled-week-scroll{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    max-height:min(69dvh,720px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(255,255,255,.18) transparent!important;
    background:var(--week-surface)!important;
    border:1px solid var(--week-border-strong)!important;
    border-radius:12px!important;
    box-shadow:0 1px 0 rgba(255,255,255,.02) inset!important;
    touch-action:pan-x pan-y!important;
  }
  body.premium-ui.admin-page-body .untitled-week-scroll::-webkit-scrollbar{width:5px!important;height:5px!important}
  body.premium-ui.admin-page-body .untitled-week-scroll::-webkit-scrollbar-track{background:transparent!important}
  body.premium-ui.admin-page-body .untitled-week-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)!important;border-radius:999px!important}

  body.premium-ui.admin-page-body .untitled-week-canvas{
    position:relative!important;
    width:calc(var(--week-time-gutter) + (7 * var(--week-day-width)))!important;
    min-width:calc(var(--week-time-gutter) + (7 * var(--week-day-width)))!important;
    background:var(--week-surface)!important;
  }

  /* Week header */
  body.premium-ui.admin-page-body .untitled-week-head{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:var(--week-time-gutter) repeat(7,var(--week-day-width))!important;
    height:62px!important;
    background:rgba(13,14,16,.96)!important;
    border-bottom:1px solid var(--week-border-strong)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-time-head{
    position:sticky!important;
    left:0!important;
    z-index:24!important;
    width:var(--week-time-gutter)!important;
    background:rgba(13,14,16,.98)!important;
    border-right:1px solid var(--week-border)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:15px 26px 11px!important;
    place-items:center!important;
    align-content:center!important;
    gap:0!important;
    width:var(--week-day-width)!important;
    height:62px!important;
    min-width:var(--week-day-width)!important;
    padding:5px 6px 4px!important;
    margin:0!important;
    border:0!important;
    border-right:1px solid var(--week-border)!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--week-text)!important;
    box-shadow:none!important;
    text-align:center!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head>span{
    font-size:9px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:.055em!important;
    text-transform:uppercase!important;
    color:var(--week-muted)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head>strong{
    display:grid!important;
    place-items:center!important;
    min-width:27px!important;
    height:27px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:650!important;
    color:#ececef!important;
    font-variant-numeric:tabular-nums!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head.is-selected{
    background:rgba(255,255,255,.025)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head.is-selected>strong{
    background:#f3f4f6!important;
    color:#101114!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head.is-today:not(.is-selected)>strong{
    color:var(--week-accent)!important;
    box-shadow:0 0 0 1px rgba(255,69,58,.32) inset!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head.is-closed{opacity:.55!important}
  body.premium-ui.admin-page-body .untitled-week-count{
    display:block!important;
    min-width:0!important;
    height:10px!important;
    font-size:8px!important;
    line-height:10px!important;
    font-style:normal!important;
    font-weight:700!important;
    color:#72757d!important;
  }
  body.premium-ui.admin-page-body .untitled-week-count.has-count{color:#a7a9af!important}

  /* Time ruler + seven day columns */
  body.premium-ui.admin-page-body .untitled-week-body{
    position:relative!important;
    display:grid!important;
    grid-template-columns:var(--week-time-gutter) calc(7 * var(--week-day-width))!important;
    width:calc(var(--week-time-gutter) + (7 * var(--week-day-width)))!important;
    min-width:calc(var(--week-time-gutter) + (7 * var(--week-day-width)))!important;
  }
  body.premium-ui.admin-page-body .untitled-week-time-gutter{
    position:sticky!important;
    left:0!important;
    z-index:12!important;
    width:var(--week-time-gutter)!important;
    height:100%!important;
    background:var(--week-surface)!important;
    border-right:1px solid var(--week-border-strong)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-time-gutter>span{
    position:absolute!important;
    left:0!important;
    width:100%!important;
    transform:translateY(-7px)!important;
    padding-right:8px!important;
    text-align:right!important;
    color:#777a82!important;
    background:var(--week-surface)!important;
    font-size:9px!important;
    line-height:14px!important;
    font-weight:600!important;
    letter-spacing:-.01em!important;
    font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;
  }
  body.premium-ui.admin-page-body .untitled-week-days{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(7,var(--week-day-width))!important;
    width:calc(7 * var(--week-day-width))!important;
    height:100%!important;
    min-width:calc(7 * var(--week-day-width))!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-column{
    position:relative!important;
    width:var(--week-day-width)!important;
    height:100%!important;
    min-width:var(--week-day-width)!important;
    border-right:1px solid var(--week-border)!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-column.is-selected{
    background:rgba(255,255,255,.012)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-day-column.is-closed{
    background:rgba(255,255,255,.012)!important;
  }

  body.premium-ui.admin-page-body .untitled-week-slot{
    position:absolute!important;
    left:0!important;
    right:0!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.045)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
  body.premium-ui.admin-page-body .untitled-week-slot.is-hour{
    border-top-color:rgba(255,255,255,.09)!important;
  }
  body.premium-ui.admin-page-body button.untitled-week-slot:active{
    background:rgba(255,255,255,.035)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-slot.is-disabled{
    pointer-events:none!important;
  }

  body.premium-ui.admin-page-body .untitled-week-closed-note{
    position:absolute!important;
    top:12px!important;
    left:8px!important;
    right:8px!important;
    z-index:2!important;
    display:grid!important;
    gap:2px!important;
    padding:8px 9px!important;
    border:1px dashed rgba(255,255,255,.10)!important;
    border-radius:7px!important;
    background:rgba(255,255,255,.025)!important;
    color:#84878e!important;
    pointer-events:none!important;
  }
  body.premium-ui.admin-page-body .untitled-week-closed-note strong{
    font-size:9px!important;
    line-height:1.1!important;
    font-weight:750!important;
    color:#a1a3aa!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
  }
  body.premium-ui.admin-page-body .untitled-week-closed-note span{
    font-size:8px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Duration-sized event cards. Existing booking colors/status classes still drive the accents. */
  body.premium-ui.admin-page-body .untitled-week-event.ios-timeline-event{
    position:absolute!important;
    z-index:5!important;
    left:calc(var(--event-left,0%) + 2px)!important;
    width:calc(var(--event-width,100%) - 4px)!important;
    min-width:0!important;
    margin:0!important;
    padding:6px 7px 6px 9px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:7px!important;
    display:grid!important;
    align-content:start!important;
    gap:2px!important;
    overflow:hidden!important;
    background:#282a30!important;
    color:#fff!important;
    box-shadow:0 1px 2px rgba(0,0,0,.22)!important;
    text-align:left!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event.ios-timeline-event::before{
    content:''!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:3px!important;
    background:#8e8e93!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-confirmed{background:rgba(52,199,89,.13)!important;border-color:rgba(52,199,89,.25)!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-confirmed::before{background:#34c759!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-pending{background:rgba(255,159,10,.13)!important;border-color:rgba(255,159,10,.25)!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-pending::before{background:#ff9f0a!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-completed{background:rgba(10,132,255,.13)!important;border-color:rgba(10,132,255,.25)!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-completed::before{background:#0a84ff!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-rescheduled{background:rgba(191,90,242,.13)!important;border-color:rgba(191,90,242,.25)!important}
  body.premium-ui.admin-page-body .untitled-week-event.calendar-status-rescheduled::before{background:#bf5af2!important}
  body.premium-ui.admin-page-body .untitled-week-event.is-break{background:rgba(142,142,147,.12)!important;border-color:rgba(142,142,147,.20)!important}
  body.premium-ui.admin-page-body .untitled-week-event.is-break::before,
  body.premium-ui.admin-page-body .untitled-week-event.is-blocked::before{background:#8e8e93!important}
  body.premium-ui.admin-page-body .untitled-week-event.is-blocked{background:rgba(142,142,147,.16)!important;border-color:rgba(142,142,147,.25)!important}
  body.premium-ui.admin-page-body .untitled-week-event[class*="booking-color-"]{
    background:rgba(var(--manual-booking-rgb),.17)!important;
    border-color:rgba(var(--manual-booking-rgb),.34)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event[class*="booking-color-"]::before{background:var(--manual-booking-color)!important}
  body.premium-ui.admin-page-body .untitled-week-event .ios-timeline-time{
    display:block!important;
    min-width:0!important;
    color:rgba(255,255,255,.72)!important;
    font-size:8px!important;
    line-height:1.05!important;
    font-weight:650!important;
    font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event strong{
    display:block!important;
    min-width:0!important;
    color:#f7f7f8!important;
    font-size:10px!important;
    line-height:1.08!important;
    font-weight:750!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event small{
    display:block!important;
    min-width:0!important;
    color:rgba(255,255,255,.58)!important;
    font-size:8px!important;
    line-height:1.05!important;
    font-weight:500!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event.is-compact-event{
    grid-template-rows:auto auto!important;
    gap:1px!important;
    padding-top:5px!important;
  }
  body.premium-ui.admin-page-body .untitled-week-event.is-compact-event small{display:none!important}
  body.premium-ui.admin-page-body .untitled-week-event:active{
    filter:brightness(1.14)!important;
    transform:scale(.985)!important;
  }

  /* Current time marker across the whole week. */
  body.premium-ui.admin-page-body .untitled-week-now-line{
    position:absolute!important;
    left:0!important;
    right:0!important;
    z-index:9!important;
    height:0!important;
    pointer-events:none!important;
  }
  body.premium-ui.admin-page-body .untitled-week-now-line>i{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:0!important;
    height:1.5px!important;
    background:var(--week-accent)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-now-line>i::before{
    content:''!important;
    position:absolute!important;
    left:-4px!important;
    top:-3px!important;
    width:7px!important;
    height:7px!important;
    border-radius:50%!important;
    background:var(--week-accent)!important;
  }
  body.premium-ui.admin-page-body .untitled-week-now-line>span{
    position:absolute!important;
    left:calc(var(--week-time-gutter) * -1)!important;
    top:-7px!important;
    width:calc(var(--week-time-gutter) - 5px)!important;
    height:14px!important;
    padding-right:5px!important;
    background:var(--week-surface)!important;
    color:var(--week-accent)!important;
    font-size:8px!important;
    line-height:14px!important;
    font-weight:750!important;
    text-align:right!important;
    font-variant-numeric:tabular-nums!important;
  }

  /* Toolbar: same controls/logic, cleaner mobile hierarchy like the reference calendar. */
  body.premium-ui.admin-page-body .scheduler-card>.admin-toolbar{
    margin-bottom:10px!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-period-label{
    text-align:left!important;
    font-size:17px!important;
    line-height:1.15!important;
    font-weight:720!important;
    letter-spacing:-.02em!important;
    color:#f2f3f5!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:first-child,
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls>.admin-toolbar-group:last-child{
    border:1px solid rgba(255,255,255,.09)!important;
    background:#0f1013!important;
    border-radius:9px!important;
    padding:3px!important;
    gap:3px!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls .admin-pill{
    border:0!important;
    border-radius:6px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.premium-ui.admin-page-body .scheduler-card .scheduler-top-controls .admin-pill.active{
    background:#22242a!important;
    color:#fff!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.07) inset!important;
  }
}

@media (max-width:390px){
  body.premium-ui.admin-page-body .untitled-mobile-week-v1{
    --week-time-gutter:48px;
    --week-day-width:124px;
  }
  body.premium-ui.admin-page-body .untitled-week-day-head{height:58px!important;grid-template-rows:14px 25px 10px!important}
  body.premium-ui.admin-page-body .untitled-week-head{height:58px!important}
  body.premium-ui.admin-page-body .untitled-week-day-head>strong{min-width:25px!important;height:25px!important;font-size:13px!important}
  body.premium-ui.admin-page-body .untitled-week-event.ios-timeline-event{padding:5px 6px 5px 8px!important}
  body.premium-ui.admin-page-body .untitled-week-event strong{font-size:9.5px!important}
}

@media (orientation:landscape) and (pointer:coarse) and (max-width:1000px) and (max-height:560px){
  body.premium-ui.admin-page-body .untitled-mobile-week-v1{
    --week-time-gutter:50px;
    --week-day-width:138px;
  }
  body.premium-ui.admin-page-body .untitled-week-scroll{max-height:min(72dvh,520px)!important}
}

/* V41 — customer portal layout must live inside ui-layout because this stylesheet
   intentionally gives layered !important declarations priority over historical overrides. */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal {
    display:flex !important;
    flex-direction:column !important;
    width:min(100%,780px) !important;
    max-width:780px !important;
    height:min(88vh,820px) !important;
    min-height:0 !important;
    max-height:820px !important;
    padding:0 !important;
    overflow:hidden !important;
    touch-action:pan-y pinch-zoom !important;
  }
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal > .customer-portal-modal-header {
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-scroll {
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    padding:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scroll-padding-block:0 !important;
  }
  @media (max-width:900px) {
    body.premium-ui:not(.admin-page-body) #mybookings-overlay {
      padding:0 !important;
      align-items:stretch !important;
      justify-content:stretch !important;
    }
    body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal {
      width:100% !important;
      max-width:none !important;
      height:var(--visible-height) !important;
      max-height:var(--visible-height) !important;
      border-radius:0 !important;
    }
  }
}

/* =========================================================
   V43 — FLAT PUBLIC UI + NESTED CUSTOMER BOOKING
   Reduce bubble/pill styling and keep customer dashboard open
   when the booking flow is launched from inside the portal.
   ========================================================= */

/* The booking flow must sit above the still-open customer portal. */
body.premium-ui:not(.admin-page-body) #mybookings-overlay{z-index:1100!important}
body.premium-ui:not(.admin-page-body) #booking-overlay{z-index:1120!important}

/* Hero CTAs: premium rectangle, not pill/bubble. */
body.premium-ui:not(.admin-page-body) #hero .hero-actions-lux :is(.btn-primary,.btn-outline){
  border-radius:5px!important;
  box-shadow:none!important;
}
body.premium-ui:not(.admin-page-body) #hero .hero-actions-lux :is(.btn-primary,.btn-outline):hover{
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}

/* Public booking/customer dialogs: flatter surfaces. */
@media (min-width:901px){
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal,
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal{
    border-radius:0!important;
  }
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .my-bookings-modal:not(.customer-portal-modal){
    border-radius:4px!important;
  }
}
body.premium-ui:not(.admin-page-body) :is(#booking-overlay,#mybookings-overlay) .close-btn{
  border-radius:5px!important;
}

/* Booking flow controls: keep hierarchy, lose the bubble feeling. */
body.premium-ui:not(.admin-page-body) #booking-overlay :is(.option-card,.calendar-wrap,.booking-summary,.double-booking-box,.second-appointment-box){
  border-radius:6px!important;
}
body.premium-ui:not(.admin-page-body) #booking-overlay :is(.time-slot,.cal-day,.cal-nav,input,select,textarea,.btn-next,.btn-back,.btn-primary,.btn-outline){
  border-radius:4px!important;
}
body.premium-ui:not(.admin-page-body) #booking-overlay .option-card.selected::after{
  border-radius:3px!important;
}

/* Customer portal: editorial/flat rather than cards made of bubbles. */
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal{
  border-radius:0!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay :is(#customer-login-phone,#customer-login-password,.customer-portal-primary){
  border-radius:4px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-login-error,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-cancel-confirm,
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-booking-empty{
  border-radius:4px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-booking-stack{
  border-radius:5px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-booking-date{
  border-radius:4px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-booking-status{
  border-radius:3px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-cancel-confirm button{
  border-radius:4px!important;
}

/* With helper copy removed, make login spacing deliberate rather than leaving a visual gap. */
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-login-copy{
  margin-bottom:22px!important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-field-label-row{
  justify-content:flex-start!important;
}

/* Mobile customer portal is full-screen, so no sheet rounding at all. */
@media (max-width:900px){
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal,
  body.premium-ui:not(.admin-page-body) #booking-overlay .booking-modal{
    border-radius:0!important;
  }
}

/* =========================================================
   V47 — CUSTOMER PORTAL HEADER INSET
   Keep the My Bookings header comfortably inside the modal frame.
   ========================================================= */
@layer ui-layout {
  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal > .customer-portal-modal-header {
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:22px 30px 18px !important;
    gap:18px !important;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal > .customer-portal-modal-header > :first-child {
    min-width:0 !important;
  }

  body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal > .customer-portal-modal-header .close-btn {
    flex:0 0 auto !important;
    margin:0 !important;
  }

  @media (max-width:900px) {
    body.premium-ui:not(.admin-page-body) #mybookings-overlay .customer-portal-modal > .customer-portal-modal-header {
      padding:calc(16px + env(safe-area-inset-top)) 20px 16px !important;
    }
  }
}


/* =========================================================
   V48 — CUSTOMER PORTAL NESTED BOOKING STACK + CANCEL ACTION
   Booking launched from "Κλείσε ξανά" must always be above
   the still-open customer dashboard.
   ========================================================= */
body.premium-ui:not(.admin-page-body) #mybookings-overlay,
body.premium-ui:not(.admin-page-body) #booking-overlay {
  position:fixed !important;
  inset:0 !important;
}
body.premium-ui:not(.admin-page-body) #mybookings-overlay {
  z-index:1400 !important;
}
body.premium-ui:not(.admin-page-body) #booking-overlay {
  z-index:1420 !important;
}
body.premium-ui:not(.admin-page-body).customer-portal-booking-open #mybookings-overlay {
  z-index:1400 !important;
}
body.premium-ui:not(.admin-page-body).customer-portal-booking-open #booking-overlay.active {
  z-index:1500 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}