/* Client appointments use a focused list instead of the staff calendar. */
.client-next{max-width:920px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;padding:26px 28px;border-radius:12px;background:linear-gradient(135deg,#243c91,#315ce7);color:#fff;box-shadow:0 12px 30px #315ce71c}
.client-next .eyebrow{color:#cbd6ff}.client-next h2{margin:10px 0 6px;font-size:29px}.client-next p{margin:0;color:#e2e8ff}.client-next button{flex-shrink:0;border-color:#ffffff55;background:#fff;color:#2447bf}
.client-upcoming,.client-empty{max-width:920px}.client-upcoming .panel-head p{margin:5px 0 0;font-size:12px}
.client-appointment-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}.client-appointment-card:last-child{border-bottom:0}
.client-appointment-date{width:48px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;background:#edf1ff;color:#3156cf}.client-appointment-date strong{font-size:19px;line-height:1}.client-appointment-date span{margin-top:4px;font-size:10px;text-transform:uppercase;letter-spacing:.7px}
.client-appointment-copy{min-width:0}.client-appointment-copy strong,.client-appointment-copy span,.client-appointment-copy small{display:block}.client-appointment-copy strong{font-size:13px}.client-appointment-copy span{margin-top:5px;color:var(--muted);font-size:12px}.client-appointment-copy small{margin-top:6px;color:#3156cf;font-size:10px}.client-appointment-card button{padding:8px 12px;font-size:12px}.client-show-all{display:block;margin:14px auto}

@media(max-width:800px){
  .layout{grid-template-rows:max-content minmax(0,1fr);align-content:start}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{display:block;min-width:0;max-width:100%;font-size:16px!important}
  .field,.form-grid>*{min-width:0}
  .sidebar{position:relative;z-index:4;padding:14px 16px;background:#fff;border-bottom:1px solid var(--line)}
  .sidebar .brand{margin:0 0 14px 2px;font-size:20px}.sidebar .brand .mark{width:32px;height:32px;font-size:18px}.sidebar .brand-product{font-size:8px;margin-top:3px}
  .shop-picker.quiet{margin:0 0 10px;padding:4px 0;border:0;font-size:13px}
  .nav{gap:6px;padding-bottom:2px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{min-height:40px;padding:9px 12px;font-size:12px}.nav .icon{display:none}
  .topbar{height:48px;padding:0 16px}.crumb{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.crumb span{margin:0 7px}.topbar-right button{padding:7px 4px}
  .content{padding:22px 16px 36px}.heading{margin-bottom:20px;gap:14px}.heading h1{font-size:29px;line-height:1.08}.heading p{font-size:13px}.heading .primary{width:auto}
  .panel{border-radius:10px}.panel-head{padding:15px 16px}.form-panel{max-width:none;padding:18px 16px}
  dialog{width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 16px);overflow-x:hidden;overflow-y:auto;padding:22px 18px;border-radius:14px}.modal-head{margin-bottom:16px}.modal-head h2{font-size:23px}.slots{grid-template-columns:repeat(3,minmax(0,1fr));max-height:230px}.form-actions{align-items:stretch}.form-actions button{min-height:42px}
  .scroll{margin:0;max-width:100%}.table{min-width:680px}
  .shop-row{gap:14px;padding:16px}.shop-actions{width:100%}.shop-actions button{flex:1}
  .branding-preview{padding:14px}.login-preview-art{min-height:430px}
}

@media(max-width:600px){
  html{-webkit-text-size-adjust:100%}
  dialog{position:fixed;inset:auto 0 0;width:100%;max-width:100%;max-height:calc(100svh - 8px);margin:0;border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  dialog form,dialog .field,dialog .form-grid,dialog .form-grid>*{width:100%;min-width:0;max-width:100%}
  dialog input:not([type="checkbox"]):not([type="radio"]),dialog select,dialog textarea{inline-size:100%;min-inline-size:0;max-inline-size:100%}
  dialog input[type="date"],dialog input[type="time"]{-webkit-appearance:none;appearance:none}
  body[data-role="client"] .sidebar{position:sticky;top:0;padding:11px 16px 10px;box-shadow:0 1px 8px #1d29470a}
  body[data-role="client"] .sidebar .brand{display:none}
  body[data-role="client"] .shop-picker.quiet{text-align:left;margin:0 70px 9px 2px;padding:2px 0;border:0;font-size:14px;line-height:22px}
  body[data-role="client"] .nav{display:grid;grid-template-columns:1fr 1fr;gap:3px;overflow:visible;padding:3px;border-radius:10px;background:#f0f2f7}
  body[data-role="client"] .nav button{justify-content:center;min-height:36px;padding:8px 10px;text-align:center;border:0;border-radius:8px;background:transparent;color:#667080;font-size:12px}
  body[data-role="client"] .nav button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px #1d294714}
  body[data-role="client"] .sidebar-bottom{display:block;position:absolute;top:9px;right:12px;margin:0;padding:0}
  body[data-role="client"] .user-chip{padding:0}
  body[data-role="client"] .user-chip .avatar,body[data-role="client"] .user-chip>div{display:none}
  body[data-role="client"] .user-chip .quiet{padding:5px 4px;color:var(--muted);font-size:0}
  body[data-role="client"] .user-chip .quiet:after{content:'Sign out';font-size:11px}
  body[data-role="client"] .topbar{display:none}
  body[data-role="client"] .content{padding:22px 16px 32px}
  body[data-role="client"] .heading{margin-bottom:18px}
  body[data-role="client"] .heading h1{font-size:27px;letter-spacing:-.8px}
  body[data-role="client"] .heading p{line-height:1.5}
  body[data-role="client"] .heading .primary{margin-top:14px;min-height:43px}
  .heading{display:block}.heading .primary{width:100%;margin-top:16px;min-height:44px}
  .client-next{display:block;padding:22px 20px}.client-next h2{font-size:25px}.client-next button{width:100%;margin-top:20px;min-height:42px}
  .client-empty .empty{padding:34px 20px}.client-empty .empty strong{font-size:21px}.client-empty .empty p{margin:0;font-size:13px}.client-empty-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 16px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:19px}
  .client-appointment-card{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:14px}.client-appointment-card button{grid-column:1/-1;width:100%;min-height:40px}.client-appointment-date{width:44px;height:48px}.client-appointment-copy span{line-height:1.45}.client-show-all{width:calc(100% - 28px)}
  .form-actions{flex-direction:column-reverse}.form-actions button{width:100%;margin:0}.contact-option{align-items:flex-start}
  .booking-intro{font-size:13px}.booking-step{margin:0;padding:17px 0}.booking-step-heading{margin-bottom:12px}.booking-step-heading strong{font-size:15px}.booking-step-heading small{font-size:12px}.booking-summary{position:sticky;bottom:-1px;z-index:2;box-shadow:0 -6px 18px #fff}.booking-date-picker{padding:10px}.booking-date-weekdays,.booking-date-days{gap:3px}.booking-date-days button{height:40px;font-size:13px}.quick-person{padding:14px 12px}.quick-person-actions{display:grid;grid-template-columns:1fr 1fr}.booking-confirm{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));z-index:3;margin:12px -18px calc(-20px - env(safe-area-inset-bottom));padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
  .hours-row{grid-template-columns:1fr 1fr;gap:9px 12px}.hours-row>strong{grid-column:1}.hours-row>label{grid-column:2;justify-self:end}.hours-row>input{grid-row:2;padding:11px}.hours-row>input:nth-of-type(1){grid-column:1}.hours-row>input:nth-of-type(2){grid-column:2}
  .clients-table{min-width:0}.clients-table thead{display:none}.clients-table,.clients-table tbody,.clients-table tr,.clients-table td{display:block;width:100%}.clients-table tr{padding:13px 14px;border-bottom:1px solid var(--line)}.clients-table td{padding:5px 0;border:0}.clients-table .client-actions-cell{width:100%;white-space:normal;padding-top:10px}.client-actions{justify-content:flex-start;flex-wrap:wrap}.client-actions button{flex:1}.clients-table .access-method{margin-top:3px}
  .today-stats{gap:8px}.today-stats section{padding:13px}.today-stats strong{font-size:25px}.attendance-actions{width:100%}
  .login-preview-art{min-height:390px;aspect-ratio:auto}.team-panel .panel-head button{width:100%}
}

@media(max-width:480px){
  .auth{display:flex;min-height:100dvh;flex-direction:column}.auth-art{min-height:150px;padding:20px;background-position:center 35%}.auth-art .brand{font-size:20px}.auth-art .brand .mark{width:32px;height:32px}.auth-story{display:none}.auth-main{flex:1;align-items:flex-start;padding:30px 20px}.auth-box h1{font-size:27px}.auth-box form{margin-top:22px}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{grid-template-columns:1fr}.stat{padding:14px 16px}.calendar-actions{width:100%}.calendar-actions button{flex:1}.legend{gap:10px;flex-wrap:wrap;padding:12px}
  .client-delete{margin-left:0}.shop-actions{display:grid;grid-template-columns:1fr}.email-toggles{align-items:flex-start}
}

@media(max-width:600px){.booking-date-picker.compact{padding:0;border:0}.booking-date-picker.compact .booking-date-toolbar,.booking-date-picker.compact .booking-date-weekdays,.booking-date-picker.compact .booking-date-days,.booking-date-picker.compact .booking-date-key p{display:none}.booking-date-picker.compact .booking-date-key{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:12px 13px;border:1px solid #cfd9f7;border-radius:10px;background:#f5f7ff}.booking-date-picker.compact .booking-date-key strong{padding:0;background:transparent;font-size:13px}.booking-date-key #booking-date-change{display:none}.booking-date-picker.compact #booking-date-change{display:block;padding:8px 11px;font-size:12px}.booking-date-days button{height:44px;font-size:14px}.booking-date-days button.unavailable{text-decoration:none;color:#b6bdca}.slots{max-height:none;overflow:visible;gap:8px}.slots button{min-height:48px;font-size:14px}.slots button.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}.booking-confirm button:disabled{background:#dfe3ec;border-color:#dfe3ec;color:#7c8492;cursor:not-allowed}}
@media(max-width:760px){.whatsapp-layout{grid-template-columns:1fr}.whatsapp-status{margin-top:0}}