/* Shared layout safeguards. Desktop component styling stays with each surface.
   Layers: header 40, menus 50–80 (inside header), drawer 200/210,
   dialogs 1000/1100, acknowledgement 1400, blocking loading 2000. */
:root{--layer-drawer-backdrop:200;--layer-drawer:210;--layer-dialog:1000;--layer-busy:2000}
.mobile-nav-toggle,.mobile-nav-close,.mobile-nav-backdrop{display:none}
.photo-move{display:none}
body.mobile-nav-open,body.ui-dialog-open{overflow:hidden}
.table-wrap{max-width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain}
.table-wrap:focus-visible{outline:2px solid #5b50df;outline-offset:2px}
.modal-backdrop{z-index:var(--layer-dialog)}
#aisella-confirm-overlay{z-index:1100}
.busy-overlay,.global-busy{z-index:var(--layer-busy)}
.modal,#aisella-confirm-overlay>div{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.modal.plan-modal{overflow:hidden}
.modal-actions{flex-wrap:wrap}
.modal :is(input,select,textarea){min-width:0;max-width:100%}
.global-busy-card,.busy-panel{min-width:0;max-width:100%;overflow-wrap:anywhere}
.global-busy-card>div,.busy-panel>div{min-width:0}
.global-spinner,.busy-spinner{flex-shrink:0}
.dashboard-notice{max-height:calc(100dvh - 96px);overflow:auto}
.content,.admin-main,.admin-content,.view,.panel,.page-card,.field,.box,.role-box{min-width:0}
.tenant-summary>div{min-width:0;max-width:100%;overflow-wrap:anywhere}
.panel,.card,.step-panel,.plan-card,.quick-link,.metric-card,.account-view-row{overflow-wrap:anywhere}
.ai-model-row label{min-width:0;max-width:100%;flex-wrap:wrap}
.integration{min-width:0}
.admin-account-wrap,.admin-account-copy{min-width:0}
.admin-account-copy{max-width:180px}
.admin-account-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-slot:focus-visible{outline:3px solid #8175ed;outline-offset:2px}
@media(min-width:761px) and (max-width:1100px){.fields{grid-template-columns:minmax(0,1fr)}}
.result,.notice,.err,.error,.banner,.connected,.pending,.failure,.validation-summary,.store-detail-value,.product-main,.detail-list,.account-summary,.admin-account-summary{overflow-wrap:anywhere}
@media(max-width:850px){
  .shell,.shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}
  .shell .sidebar{position:fixed;inset:0 auto 0 0;width:min(292px,calc(100vw - 32px));height:100vh;height:100dvh;padding:18px;z-index:var(--layer-drawer);visibility:hidden;transform:translateX(-100%);overflow:auto;overscroll-behavior:contain}
  .shell.mobile-nav-open .sidebar{visibility:visible;transform:none}
  .shell .sidebar-brand-row{flex-direction:row;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
  .shell .sidebar-toggle{display:none}
  .shell .store-switcher{display:flex;padding:12px;justify-content:space-between}
  .shell .store-switcher-text{display:flex}
  .shell .store-chevron,.shell .nav a span:last-child,.shell .aisella-word{display:inline}
  .shell .nav{display:block}
  .shell .nav-group{display:block;border-top:1px solid #eef0f4;margin-top:12px;padding-top:16px}
  .shell .nav-group.first{border:0;margin:0;padding:0}
  .shell .nav-label{display:block}
  .shell .nav a{justify-content:flex-start;min-height:44px;padding:10px 12px}
  .shell .nav a.active:before{left:-2px}
  .shell .mobile-nav-toggle,.shell .mobile-nav-close{display:grid}
  .shell .app-topbar{margin-left:-16px;margin-right:-16px;gap:8px;padding:0 12px}
  .shell .page-banner{margin-left:-16px;margin-right:-16px}
  .breadcrumbs{flex:1;min-width:0;flex-wrap:wrap;gap:4px;overflow-wrap:anywhere;font-size:12px}
  .account-area{flex-shrink:0}
  .account-button,.notification-button{min-width:44px;min-height:44px}
  /* Fixed menus are relative to the topbar (its existing backdrop filter). */
  #notification-menu{position:fixed!important;left:12px;right:12px!important;top:58px!important;width:auto!important;max-height:calc(100dvh - 80px);overflow:auto}
  .account-dropdown{max-width:calc(100vw - 24px);max-height:calc(100dvh - 80px);overflow:auto}
  #store-switcher-menu{position:static!important;margin-top:6px;max-height:45dvh;overflow:auto}
  .field{min-width:0;flex-basis:100%}
  .content :is(input,select,textarea){min-width:0;max-width:100%}
  .page-banner .topbar{flex-wrap:wrap}
}
@media(max-width:760px){
  .admin-shell,.admin-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}
  .admin-shell .admin-sidebar{position:fixed;inset:0 auto 0 0;width:min(280px,calc(100vw - 32px));height:100vh;height:100dvh;z-index:var(--layer-drawer);visibility:hidden;transform:translateX(-100%);overflow:auto;overscroll-behavior:contain}
  .admin-shell.mobile-nav-open .admin-sidebar{visibility:visible;transform:none}
  .admin-shell .admin-brand-row,.admin-shell.sidebar-collapsed .admin-brand-row{flex-direction:row;justify-content:space-between;position:sticky;top:0;background:#12182a;z-index:1}
  .admin-shell .sidebar-toggle{display:none}
  .admin-shell .admin-logo-word,.admin-shell .admin-kicker,.admin-shell .admin-nav-label,.admin-shell .admin-sidebar-footer,
  .admin-shell.sidebar-collapsed .admin-logo-word,.admin-shell.sidebar-collapsed .admin-kicker,.admin-shell.sidebar-collapsed .admin-nav-label,.admin-shell.sidebar-collapsed .admin-sidebar-footer{display:block}
  .admin-shell .admin-nav button span:not(.ico):not([hidden]){display:inline}
  .admin-shell .admin-nav button,.admin-shell.sidebar-collapsed .admin-nav button{justify-content:flex-start;min-height:44px;padding:10px 12px}
  .admin-shell .mobile-nav-toggle,.admin-shell .mobile-nav-close{display:grid}
  .admin-topbar{position:sticky;gap:8px}
  .admin-topbar .mobile-nav-toggle{margin-right:auto}
  .admin-account-copy{display:none}
  .admin-account,.admin-notification-button{min-height:44px;min-width:44px}
  .admin-notification-menu{position:fixed;left:12px;right:12px;top:64px;width:auto;max-height:calc(100dvh - 86px);overflow:auto}
  .admin-account-menu{max-width:calc(100vw - 24px);max-height:calc(100dvh - 86px);overflow:auto}
  .admin-hero-inner,.panel-head,.section-meta,.system-row{flex-wrap:wrap;align-items:flex-start}
  .admin-hero-inner>*,.panel-head>*,.section-meta>*,.system-row>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .toolbar :is(input,select){min-width:0;max-width:100%;flex:1 1 180px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .account-view-row{grid-template-columns:minmax(0,1fr);gap:6px;overflow-wrap:anywhere}
  .pagination{flex-wrap:wrap}
  .ai-chain-row>*{min-width:0;max-width:100%}
}
.mobile-nav-toggle,.mobile-nav-close{place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;margin:0;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#344054;font-size:24px;cursor:pointer}
.admin-sidebar .mobile-nav-close{background:transparent;color:#fff;border-color:#536078}
.mobile-nav-toggle:focus-visible,.mobile-nav-close:focus-visible{outline:3px solid #8175ed;outline-offset:2px}
.mobile-nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:var(--layer-drawer-backdrop)}
@media(max-width:700px){
  .account-bar{height:auto;min-height:54px;gap:8px;flex-wrap:wrap;padding:8px 14px}
  .account-bar>div:last-child{flex-wrap:wrap;min-width:0;max-width:100%}
  .account-bar .sign-out{min-height:44px;max-width:100%;white-space:normal}
  main :is(.panel,section){min-width:0}
  .step-panel{padding:18px}
  .two,.start-grid,.provider-grid{grid-template-columns:minmax(0,1fr)}
  .wizard{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .wizard-step{justify-content:center;min-width:0}
  .wizard-step span{flex-shrink:0}
  .wizard-step em{display:none}
  .start-progress-step em{display:block;position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
  .provider,.classification-state,.review>div{flex-wrap:wrap;gap:10px}
  .review>div>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .inline-form{flex-wrap:wrap}
  .inline-form>div{min-width:0;flex-basis:100%}
  .category-chip,.chip,.tag{max-width:100%;overflow-wrap:anywhere}
  .category-chip button,.chip button{flex-shrink:0;min-width:44px;min-height:44px}
  .provider-form :is(input,select,textarea),.step-panel :is(input,select,textarea){min-width:0;max-width:100%}
  .auth-shell{min-height:100dvh}
  .box,.role-card,.start-card,.step-panel{overflow-wrap:anywhere}
  .box :is(input,select,textarea){max-width:100%;min-width:0}
  button,.button,.btn{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  :is(input,select,textarea):not([type=checkbox]):not([type=radio]){font-size:16px}
  .modal-backdrop{padding:12px}
  .modal{max-height:calc(100dvh - 24px)}
  .modal-actions>button,.row-actions>button,.pagination>button,.icon-btn,.photo-delete{min-height:44px}
  .icon-btn{min-width:44px;flex-shrink:0}
  .photo-slot-grid .photo-slot{aspect-ratio:auto;min-height:160px}
  .photo-slot-grid .photo-preview img{height:110px;flex-shrink:0}
  .photo-slot-grid .photo-empty{min-height:160px}
  .photo-preview strong{overflow-wrap:anywhere}
  .modal-head>div{min-width:0}
  .dashboard-notice button,.dashboard-error-banner button{min-height:44px}
}
@media(max-width:850px),(pointer:coarse){
  .photo-move{display:block;margin:0;padding:4px 8px 8px;font-size:12px}
  .photo-move select{display:block;width:100%;min-height:44px;margin-top:4px;font-size:16px}
  .photo-slot-grid .photo-slot{aspect-ratio:auto;min-height:180px}
  .photo-slot-grid .photo-preview img{height:110px;flex-shrink:0}
}
@media(max-width:380px){
  .modal-actions{flex-direction:column;align-items:stretch}
  .admin-content .panel,.ai-route-card{padding:14px}
  .photo-slot-grid{gap:8px}
  .account-bar>div:last-child{flex-basis:100%}
}
/* Google Picker enforces a 566px minimum. Keep its full UI scrollable locally
   on phones instead of clipping controls or widening the onboarding page. */
.picker-dialog-bg{z-index:1000!important}
.picker-dialog{z-index:1100!important}
@media(max-width:600px){
  .picker-dialog{left:12px!important;top:12px!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important}
  .picker-dialog-content{max-width:100%;overflow:auto!important;overscroll-behavior:contain}
  .picker-dialog-content iframe{min-width:566px;max-width:none}
}