/* Hair Studio Premier v8.47 - Complete Mobile UI Foundation */
:root{--hsp-mobile-bar:64px;--hsp-touch:44px;--hsp-mobile-gap:12px}
.hsp-mobile-menu-button,.hsp-mobile-sidebar-backdrop{display:none}
.hsp-mobile-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.hsp-mobile-table-scroll>table{min-width:max-content}
.hsp-mobile-scroll-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hsp-mobile-scroll-row>*{flex:0 0 auto}
.hsp-mobile-modal-actions{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:900px){
 html{overflow-x:hidden}body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body.hsp-mobile-nav-open{overflow:hidden}
 .shell{display:block!important;min-height:100dvh!important}
 .main{width:100%!important;min-width:0!important}
 .sidebar{position:fixed!important;z-index:120!important;left:0!important;top:0!important;bottom:0!important;width:min(320px,88vw)!important;height:100dvh!important;padding:calc(14px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))!important;transform:translateX(-105%);transition:transform .2s ease;box-shadow:18px 0 55px rgba(15,23,42,.32);overscroll-behavior:contain!important}
 .sidebar.hsp-mobile-open{transform:translateX(0)}
 .hsp-mobile-sidebar-backdrop{position:fixed;inset:0;z-index:115;background:rgba(15,23,42,.54);backdrop-filter:blur(1px)}
 .hsp-mobile-sidebar-backdrop.open{display:block}
 .sidebar .brand{margin:2px 6px 16px!important}.sidebar .brand-lockup img{max-width:170px!important;max-height:58px!important}.sidebar .nav{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}.sidebar .nav>a,.sidebar .settings-side-menu>summary{min-height:44px!important;display:flex!important;align-items:center!important;padding:10px 12px!important}.sidebar .settings-side-menu{grid-column:auto!important}.sidebar .settings-side-submenu{grid-template-columns:1fr!important;margin:3px 0 6px 8px!important;padding-left:8px!important;border-left:1px solid rgba(203,213,225,.22)!important}.sidebar .settings-side-submenu a{min-height:40px;display:flex;align-items:center}.sidebar .sidefoot{display:block!important;margin-top:16px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
 .topbar{position:sticky!important;top:0!important;z-index:90!important;height:auto!important;min-height:var(--hsp-mobile-bar)!important;padding:7px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left))!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:8px!important;overflow:visible!important;background:color-mix(in srgb,var(--topbar) 96%,transparent)!important;backdrop-filter:blur(10px)}
 .hsp-mobile-menu-button{display:grid!important;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation}
 .topbar>.salon-clock{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;max-width:190px!important;justify-self:start!important;margin:0!important;padding:2px 4px!important}.topbar .salon-clock-time{font-size:19px!important}.topbar .salon-clock-date{font-size:9px!important;margin-top:2px!important;overflow:hidden;text-overflow:ellipsis}.topbar>.account{grid-column:3!important;grid-row:1!important;gap:6px!important}.topbar .user-trigger{grid-template-columns:36px!important}.topbar .user-trigger .owner{display:none}.topbar .location-switch{display:none!important}.topbar>.header-actions{grid-column:1/-1!important;grid-row:2!important;display:flex!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding:1px 0 3px!important;scrollbar-width:none!important;overscroll-behavior-inline:contain}.topbar>.header-actions::-webkit-scrollbar{display:none}.topbar>.header-actions:empty{display:none!important}.topbar>.header-actions>*{flex:0 0 auto!important}
 .user-drawer{position:fixed!important;right:10px!important;left:10px!important;top:calc(var(--hsp-mobile-bar) + env(safe-area-inset-top) + 4px)!important;width:auto!important;max-height:calc(100dvh - var(--hsp-mobile-bar) - 18px)!important;overflow:auto!important;z-index:130!important}
 .content{padding:12px max(10px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;max-width:100%!important;overflow-x:hidden!important}
 .pagehead,.section>.row.between,.card>.row.between{gap:10px!important;align-items:flex-start!important}.pagehead{display:flex!important;flex-direction:column!important}.pagehead>.row{width:100%!important;margin-top:0!important;justify-content:flex-start!important;overflow-x:auto;padding-bottom:2px}.pagehead h1{font-size:24px!important;line-height:1.12!important}.section h2,.card h2{line-height:1.2}
 .card,.section{max-width:100%!important}.section{padding:14px!important}.card{border-radius:13px!important}.grid2,.grid3,.grid4,.three-col,.two-col,.form-grid,.settings-navigation-grid,.business-settings-columns,.business-branding-location-grid,.appearance-color-grid,.insight-grid,.pos-grid,.fd-grid,.fd-dashboard-grid,.comm-grid,.comm-v755-grid,.loyalty-grid,.metric-grid{grid-template-columns:1fr!important}.form-grid .wide,.form-grid .full,.wide,.full{grid-column:auto!important}
 .row{max-width:100%}.row.between{flex-wrap:wrap!important}.row.between>*{min-width:0}.search{max-width:none!important;width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}.search .input{min-width:0}.settings-tabs,.settings-subnav,.report-tabbar,.inner-workspace-tabs,.comm-page-tabs,.sales-nav,.view-toggle-group,.header-calendar-actions{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;padding-bottom:3px;scrollbar-width:none}.settings-tabs::-webkit-scrollbar,.settings-subnav::-webkit-scrollbar,.report-tabbar::-webkit-scrollbar,.inner-workspace-tabs::-webkit-scrollbar,.comm-page-tabs::-webkit-scrollbar,.sales-nav::-webkit-scrollbar,.header-calendar-actions::-webkit-scrollbar{display:none}.settings-tabs>a,.settings-subnav>a,.report-tabbar>a,.inner-workspace-tabs>a,.comm-page-tabs>a{flex:0 0 auto!important}
 button,.btn,a.btn,.view-toggle{touch-action:manipulation}.btn:not(.btn-sm),button:not(.dialog-close):not(.xbtn):not(.notice-close):not(.mini-cal-nav):not(.private-marker-button){min-height:var(--hsp-touch)}
 .input,.select,.textarea,input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{font-size:16px!important;max-width:100%}.textarea,textarea{min-height:96px}
 .field{min-width:0}.checkline{align-items:flex-start!important}.checkline input[type=checkbox],.checkline input[type=radio]{width:20px!important;height:20px!important;flex:0 0 20px!important}
 .hsp-mobile-table-scroll{margin-inline:0;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--panel)}.hsp-mobile-table-scroll>table{margin:0;border:0}.hsp-mobile-table-scroll th,.hsp-mobile-table-scroll td{white-space:nowrap}.hsp-mobile-table-scroll td.wrap,.hsp-mobile-table-scroll .client-col{white-space:normal}
 dialog,.modal-card,.admin-dialog,.salon-dialog{max-width:100%!important}.modal-backdrop{padding:0!important;align-items:flex-end!important}.modal-card{width:100%!important;max-height:92dvh!important;border-radius:18px 18px 0 0!important;padding:16px!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}.admin-dialog,.salon-dialog,dialog.hsp-time-picker,dialog.hsp-time-clock-dialog{width:calc(100vw - 16px)!important;max-width:none!important;max-height:92dvh!important;border-radius:16px!important}.dialog-body,.hsp-time-clock-body,.hsp-time-picker-body{padding:14px!important;max-height:calc(92dvh - 68px);overflow:auto}.dialog-head,.hsp-time-clock-head,.hsp-time-picker-head{padding:13px 14px!important;position:sticky;top:0;z-index:3}.dialog-actions,.hsp-time-clock-actions,.hsp-time-picker-actions{position:sticky;bottom:0;background:var(--panel);padding-top:10px;padding-bottom:max(4px,env(safe-area-inset-bottom));z-index:2}.dialog-actions-left,.dialog-actions-right{width:100%}.dialog-actions .btn,.dialog-actions form,.dialog-actions form .btn{flex:1 1 auto}
 .notice{margin-bottom:10px!important}.empty{padding:24px 12px!important}.metric strong,.metric .num{font-size:22px!important}
 /* Appointments: preserve the information-rich calendar as a controlled horizontal workspace. */
 .appointment-shell{display:grid!important;grid-template-columns:1fr!important;width:100%!important;min-width:0!important}.appointment-left-rail{position:static!important;width:100%!important;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr)!important;overflow-x:auto}.appointment-shell>.calendar-card{width:100%!important;min-width:0!important;overflow-x:auto!important}.salon-calendar-wrap{overflow:auto!important;max-height:calc(100dvh - 205px)!important;min-height:480px!important}.salon-calendar{min-width:max-content}.calendar-key{position:sticky;left:0}.appointment-basics-grid,.segment-row,.repeat-grid{grid-template-columns:1fr!important}.segment-row .mini-actions{grid-column:auto!important;justify-content:start!important}.addon-menu{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:12px!important;min-width:0!important;max-width:none!important;max-height:55dvh;overflow:auto}
 /* Front desk/POS/client workspaces prioritize primary actions and readable cards. */
 .fd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.fd-flow-row{grid-template-columns:74px minmax(0,1fr) auto!important;padding:11px!important}.fd-flow-arrow{display:none!important}.fd-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pos-head,.fd-toolbar,.comm-page-heading{align-items:flex-start!important}.pos-actions,.quick-actions,.wait-actions,.comm-overview-actions{width:100%}.pos-actions .btn,.quick-actions .btn{flex:1 1 auto}.modal-card .form-grid{grid-template-columns:1fr!important}
 .directory-table,.metric-table,.hours-table{max-width:100%}
}

@media(max-width:640px){
 .content{padding:10px max(8px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}.section{padding:12px!important}.pagehead h1{font-size:22px!important}.sub{line-height:1.4}.grid4,.fd-metrics,.dashboard-mobile-metrics .dashboard-header-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.appointment-left-rail{grid-template-columns:1fr!important}.fd-action-grid{grid-template-columns:1fr!important}.salon-calendar-wrap{max-height:none!important}.user-drawer{right:6px!important;left:6px!important}
 .hsp-mobile-card-table{display:block!important;border:0!important;background:transparent!important}.hsp-mobile-card-table thead{display:none!important}.hsp-mobile-card-table tbody{display:grid!important;gap:10px!important}.hsp-mobile-card-table tr{display:block!important;border:1px solid var(--line)!important;border-radius:12px!important;background:var(--panel)!important;padding:5px 11px!important;box-shadow:0 2px 8px rgba(16,24,40,.04)}.hsp-mobile-card-table td{display:grid!important;grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr)!important;gap:10px!important;align-items:start!important;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)!important;padding:9px 0!important;background:transparent!important;white-space:normal!important;overflow-wrap:anywhere}.hsp-mobile-card-table td:last-child{border-bottom:0!important}.hsp-mobile-card-table td::before{content:attr(data-hsp-label);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.hsp-mobile-card-table td[colspan]{display:block!important}.hsp-mobile-card-table td[colspan]::before{display:none}.hsp-mobile-card-table form{max-width:100%}
 .hsp-time-picker-grid{grid-template-columns:1fr!important}.hsp-clock-staff-grid{grid-template-columns:1fr!important}
}

/* Standalone/public surfaces */
@media(max-width:720px){
 body[data-hsp-public-mobile="v8.47"]{font-size:16px!important}.hsp-public-mobile-wrap{padding:14px 10px calc(28px + env(safe-area-inset-bottom))!important}.hsp-public-mobile-card{padding:15px!important;border-radius:14px!important}.hsp-public-mobile-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.hsp-public-mobile-actions .btn,.hsp-public-mobile-actions button{width:100%!important;min-height:46px!important}.hsp-public-mobile-grid{grid-template-columns:1fr!important}.hsp-public-mobile-sticky{position:static!important}.hsp-public-mobile-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:430px){.hsp-public-mobile-slots{grid-template-columns:1fr!important}}
@media(max-width:720px){
 body[data-hsp-public-mobile="v8.47"] .wrap{max-width:100%!important;margin:0!important;padding:14px 10px calc(28px + env(safe-area-inset-bottom))!important}
 body[data-hsp-public-mobile="v8.47"] .hero{border-radius:14px!important;padding:20px 16px!important;margin-bottom:12px!important}
 body[data-hsp-public-mobile="v8.47"] .hero h1{font-size:25px!important;line-height:1.12!important}
 body[data-hsp-public-mobile="v8.47"] .card{padding:15px!important;border-radius:14px!important;margin-bottom:12px!important}
 body[data-hsp-public-mobile="v8.47"] .grid,body[data-hsp-public-mobile="v8.47"] .grid2,body[data-hsp-public-mobile="v8.47"] .grid3,body[data-hsp-public-mobile="v8.47"] .form-grid{grid-template-columns:1fr!important}
 body[data-hsp-public-mobile="v8.47"] .row{flex-wrap:wrap!important}
 body[data-hsp-public-mobile="v8.47"] .row>*{min-width:0}
 body[data-hsp-public-mobile="v8.47"] .summary{position:static!important}
 body[data-hsp-public-mobile="v8.47"] .service-list{grid-template-columns:1fr!important}
 body[data-hsp-public-mobile="v8.47"] .slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body[data-hsp-public-mobile="v8.47"] .input,body[data-hsp-public-mobile="v8.47"] .select,body[data-hsp-public-mobile="v8.47"] .textarea,body[data-hsp-public-mobile="v8.47"] input,body[data-hsp-public-mobile="v8.47"] select,body[data-hsp-public-mobile="v8.47"] textarea{font-size:16px!important;max-width:100%!important}
 body[data-hsp-public-mobile="v8.47"] .btn,body[data-hsp-public-mobile="v8.47"] button{min-height:46px;touch-action:manipulation}
 body[data-hsp-public-mobile="v8.47"] table{font-size:13px}
 body[data-hsp-public-mobile="v8.47"] .hsp-mobile-table-scroll{border:1px solid #e4e7ec;border-radius:10px}
}
@media(max-width:430px){body[data-hsp-public-mobile="v8.47"] .slot-grid{grid-template-columns:1fr!important}}