/* Empty/loading skeleton */
  .skel{background:linear-gradient(90deg,var(--ink-100) 25%,var(--purple-50) 37%,var(--ink-100) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px;}
  @keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

  @media (max-width:1200px){
    /* Overview takes the full first row, Insights and
       Assistant sit side by side under it (equal height). */
    .grid-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .grid-main > .col-span-2, .grid-main > .assistant{grid-column:1 / -1;}
    .grid-lists{grid-template-columns:repeat(2,minmax(0,1fr));}
    .grid-actions{grid-template-columns:minmax(0,1fr);}
    .service-grid{grid-template-columns:1fr 1fr;}
    .staff-grid{grid-template-columns:1fr 1fr;}
    .mkt-chart-grid{grid-template-columns:1fr;}
    .mkt-kpi-grid{grid-template-columns:repeat(3,1fr);}
    .wizard-option-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:980px){
    .app{grid-template-columns:1fr;}
    .sidebar{position:fixed; left:0; top:0; width:264px; transform:translateX(-100%); transition:transform .25s ease;}
    .sidebar.open{transform:translateX(0);}
    .sidebar-overlay.show{display:block;}
    .menu-toggle{display:flex;}
    .grid-stats{grid-template-columns:1fr 1fr;}
    .grid-stats.grid-stats-5{grid-template-columns:1fr 1fr;}
    .grid-stats.grid-stats-5 .stat-card:last-child{grid-column:1 / -1;}
    .grid-main{grid-template-columns:minmax(0,1fr);}
    .grid-main > *{grid-column:span 1 !important;}
    .grid-main .chart-wrap{flex-basis:200px; min-height:200px;}
    .grid-lists{grid-template-columns:minmax(0,1fr);}
    .grid-actions .qa-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .cust-stats{grid-template-columns:1fr 1fr;}
    .mkt-kpi-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .grid-stats, .cust-stats{grid-template-columns:1fr 1fr; gap:10px;}
    .grid-stats.grid-stats-5{grid-template-columns:1fr 1fr;}
    .grid-stats.grid-stats-5 .stat-card:last-child{grid-column:1 / -1;}
    .grid-stats .stat-card, .cust-stats .stat-card{padding:14px;}
    .grid-stats .stat-top, .cust-stats .stat-top{gap:8px; margin-bottom:8px; align-items:flex-start;}
    .grid-stats .stat-icon, .cust-stats .stat-icon{width:32px;height:32px;border-radius:9px;}
    .grid-stats .stat-icon svg, .cust-stats .stat-icon svg{width:15px;height:15px;}
    .grid-stats .stat-title, .cust-stats .stat-title{font-size:10.8px; line-height:1.3;}
    .grid-stats .stat-value, .cust-stats .stat-value{font-size:18px; margin-bottom:2px;}
    .grid-stats .stat-delta, .cust-stats .stat-delta{font-size:10px;}
    .main{padding:16px 14px 40px;}
    .topbar{flex-direction:column;}
    .topbar-actions{width:100%; justify-content:flex-start;}
    .date-range-wrap{margin-right:auto;}
    .date-range-dropdown{left:0; right:auto;}
    .qa-grid, .grid-actions .qa-grid{grid-template-columns:1fr 1fr;}
    .banner .btn-primary{width:100%; margin-left:0;}
    .form-row-2{grid-template-columns:1fr;}
    .cust-toolbar{flex-direction:column; align-items:stretch;}
    .search-box{max-width:none;}
    .cust-toolbar .btn-primary{margin-left:0 !important;}
    .drawer{width:100%; max-width:100vw;}
    .service-grid{grid-template-columns:1fr;}
    .staff-grid{grid-template-columns:1fr;}
    .mkt-kpi-grid{grid-template-columns:1fr 1fr; gap:10px;}
    .mkt-kpi-card{padding:12px;}
    .mkt-kpi-card .stat-top{gap:8px; margin-bottom:8px; align-items:flex-start;}
    .mkt-kpi-card .stat-icon{width:30px;height:30px;border-radius:9px;}
    .mkt-kpi-card .stat-icon svg{width:14px;height:14px;}
    .mkt-kpi-card .stat-value{font-size:16.5px; margin-bottom:2px;}
    .mkt-kpi-card .stat-title{font-size:10.2px; line-height:1.3;}
    .wizard-steps{flex-wrap:wrap; row-gap:10px;}
    .wizard-connector{display:none;}
    .wizard-option-grid{grid-template-columns:1fr;}
    .funnel-label{width:74px; font-size:11.4px;}
    .auth-card{padding:26px 20px;}
    .ob-service-grid{grid-template-columns:1fr;}
    .ac-card-footer{flex-direction:column; align-items:stretch !important; gap:10px !important;}
    .ac-card-actions{width:100%;}
    .ac-card-actions .btn-secondary{flex:1; display:flex; align-items:center; justify-content:center; gap:6px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }
  :focus-visible{outline:2px solid var(--purple-500); outline-offset:2px;}



/* Staff dashboard mobile-first pass: keep the shell calm and the operational actions close. */
@media (max-width:720px){
  .staff-dashboard-page .main{padding:10px 12px 88px;}
  .staff-dashboard-page .topbar{
    position:sticky; top:0; z-index:32; flex-direction:row; align-items:center;
    gap:8px; margin:0 -12px 12px; padding:8px 12px 10px;
    background:color-mix(in srgb, var(--page-bg) 94%, transparent);
    backdrop-filter:blur(12px);
  }
  .staff-dashboard-page .topbar > div:first-child{min-width:0;}
  .staff-dashboard-page .greet h1{font-size:18px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .staff-dashboard-page .greet p{display:block; margin:3px 0 0; font-size:10.5px; line-height:1.3; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .staff-dashboard-page .topbar-actions{width:auto; gap:6px; flex-shrink:0;}
  .staff-dashboard-page .date-range-wrap,
  .staff-dashboard-page .gsearch-wrap{display:none!important;}
  .staff-dashboard-page .topbar-actions .icon-btn,
  .staff-dashboard-page .topbar-actions .avatar-btn{width:42px; height:42px;}
  .staff-dashboard-page .menu-toggle{width:42px; height:42px; flex-shrink:0;}
  .staff-dashboard-page .sidebar{width:min(292px,88vw); padding:18px 14px;}
}

@media (max-width:420px){
  .staff-dashboard-page .topbar-actions .notif-wrap{display:none;}
  .staff-dashboard-page .greet h1{max-width:190px;}
  .staff-dashboard-page .greet-kicker{font-size:8px; letter-spacing:.12em;}
}

/* STAFF MOBILE-FIRST REFINEMENT: phone layout is the baseline; desktop simply gains room. */
@media (max-width:720px){
  body.staff-dashboard-page .main{padding:12px 14px calc(92px + env(safe-area-inset-bottom,0px));}
  body.staff-dashboard-page .topbar{flex-wrap:nowrap;margin:0 -14px 14px;padding:9px 14px 11px;gap:9px;}
  body.staff-dashboard-page .topbar>div:first-child{display:flex;align-items:center;min-width:0;flex:1;gap:9px;}
  body.staff-dashboard-page .greet{min-width:0;flex:1;}
  body.staff-dashboard-page .greet h1{font-size:clamp(20px,6.5vw,27px);}
  body.staff-dashboard-page .greet p{max-width:100%;font-size:10.8px;}
  body.staff-dashboard-page .topbar-actions{width:auto;display:flex;align-items:center;gap:7px;}
  body.staff-dashboard-page .menu-toggle,
  body.staff-dashboard-page .topbar-actions .icon-btn,
  body.staff-dashboard-page .topbar-actions .avatar-btn{width:42px;height:42px;min-width:42px;border-radius:12px;}
  body.staff-dashboard-page .card{border-radius:16px;}
  body.staff-dashboard-page .card-head{padding:16px 14px 4px;gap:10px;}
  body.staff-dashboard-page .card-head-title{font-size:15px;line-height:1.2;}
  body.staff-dashboard-page .staff-ops-strip{margin-bottom:14px;}
  body.staff-dashboard-page .staff-ops-action{min-height:44px;}
  body.staff-dashboard-page .form-input,
  body.staff-dashboard-page .form-select,
  body.staff-dashboard-page .btn-primary,
  body.staff-dashboard-page .btn-secondary{min-height:44px;}
  body.staff-dashboard-page .drawer{border-radius:18px 18px 0 0;}
  body.staff-dashboard-page .modal{max-height:calc(100dvh - 24px);border-radius:18px;}
}
@media (max-width:480px){
  body.staff-dashboard-page .main{padding-left:12px;padding-right:12px;}
  body.staff-dashboard-page .topbar{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
  body.staff-dashboard-page .greet-sub{display:none;}
  body.staff-dashboard-page .staff-ops-context strong{font-size:16px;}
  body.staff-dashboard-page .staff-ops-actions{grid-template-columns:1fr;}
  body.staff-dashboard-page .staff-auth-card{width:min(100%,430px);margin:0 auto;}
  body.staff-dashboard-page .staff-portal-entry-head h1{font-size:26px;}
}
@media (max-width:360px){
  body.staff-dashboard-page .staff-auth-card{padding-left:16px;padding-right:16px;}
  body.staff-dashboard-page .staff-portal-entry-head h1{font-size:24px;}
  body.staff-dashboard-page .staff-portal-login-links{font-size:11px;}
}
/* END STAFF MOBILE-FIRST REFINEMENT */

/* Mobile-only 2-row topbar (owner/manager pages — staff-dashboard-page has its
   own separate mobile topbar rules above and is intentionally excluded here).
   Desktop layout is completely untouched; this only fires at <=560px.

   Row 1: sidebar/menu icon + heading (left) ............ profile avatar (right)
   Row 2: date range pill (left) ......... search icon, notification icon (right)
   "Set up business" button is hidden on mobile.

   Technique: .topbar-actions is set to display:contents so its children
   (date range / search / notif / account / setup-business) become direct
   flex items of .topbar itself, sitting alongside the existing menu+heading
   wrapper — then `order` places each item into row 1 or row 2, and a
   `.topbar::after` flex item with flex-basis:100% forces the wrap onto a
   second line (no HTML changes needed). */
@media (max-width:560px){
  body:not(.staff-dashboard-page) .topbar{
    display:flex; flex-direction:row; flex-wrap:wrap;
    align-items:center; row-gap:12px; column-gap:10px;
  }
  body:not(.staff-dashboard-page) .topbar > div:first-child{ order:1; flex:1; min-width:0; }
  body:not(.staff-dashboard-page) .topbar-actions{ display:contents; }
  body:not(.staff-dashboard-page) .topbar #accountWrap{ order:2; }
  body:not(.staff-dashboard-page) .topbar::after{ content:""; order:3; flex-basis:100%; height:0; }
  body:not(.staff-dashboard-page) .topbar #dateRangeWrap{ order:4; margin-right:auto; }
  body:not(.staff-dashboard-page) .topbar #gsearchWrap{ order:5; }
  body:not(.staff-dashboard-page) .topbar #bookingsShortcutBtn{ order:6; }
  body:not(.staff-dashboard-page) .topbar #notifWrap{ order:7; }

  /* While the search field is open, hide the Bookings shortcut and the bell so the field gets the whole row
     (the date pill is already collapsed to its icon by global-search.js). Everything returns when search closes. */
  body:not(.staff-dashboard-page) .topbar.gs-open #bookingsShortcutBtn,
  body:not(.staff-dashboard-page) .topbar.gs-open #notifWrap{ display:none; }
  body:not(.staff-dashboard-page) .topbar.gs-open #gsearchWrap{ flex:1; min-width:0; }
  body:not(.staff-dashboard-page) .topbar.gs-open #gsearchWrap.active .gsearch-box{ width:100%; }
  body:not(.staff-dashboard-page) .topbar.gs-open .gsearch-dropdown{ width:100%; }
}

/* Overview ("Today at a glance"): small fixes that sit alongside the main layout rules (components.css / the
   .grid-main / .grid-lists / .grid-actions blocks above). */
body:not(.staff-dashboard-page) #view-dashboard > #bookingRequestsBanner:empty{ display:none; }

/* Tablet (981-1200px): five stat cards in ~700px were clipping their labels: 3 on the first row, 2 (wider) on the second — no blank cell */
@media (min-width:981px) and (max-width:1200px){
  body:not(.staff-dashboard-page) #view-dashboard.active .grid-stats.grid-stats-5{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  body:not(.staff-dashboard-page) #view-dashboard.active .grid-stats.grid-stats-5 > :nth-child(-n+3){ grid-column:span 2; }
  body:not(.staff-dashboard-page) #view-dashboard.active .grid-stats.grid-stats-5 > :nth-child(n+4){ grid-column:span 3; }
}

/* Recent Check-ins (Overview): the rows had no side padding, so the text sat outside the card's rounded edge. */
#checkinActivityList{ padding:4px 20px 18px; }
#checkinActivityList .ci-dash-row{ border-bottom:1px dashed var(--border); }
#checkinActivityList .ci-dash-row-empty{ text-align:center; padding:20px 10px; color:var(--ink-500); }

/* AI card (Insights + Assistant): between 700px and 1200px the card is wide, so its two parts sit side by side
   (insights left, assistant right); below 700px they stack. */
@media (min-width:700px) and (max-width:1200px){
  .assistant.ai-merged{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .ai-merged .ai-assistant-section{border-top:0; border-left:1px solid var(--border);}
}