/* Final responsive layer for CSA and OMS; all colors stay in the existing palette. */
.settings-body>* ,.settings-side-col,.settings-side-card,.settings-section-box,
.settings-stat,.account-mini>div:last-child,.settings-row>div:first-child,
.service-item>div,.settings-workspace-head>div{min-width:0}
.settings-stat b{font-size:20px;line-height:1.4;overflow-wrap:anywhere;word-break:normal}
.settings-side-col .settings-stat-grid{grid-template-columns:minmax(0,1fr);gap:8px}
.settings-side-col .settings-stat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:12px 14px}
.settings-side-col .settings-stat small{flex:0 1 auto;line-height:1.5}
.settings-side-col .settings-stat b{flex:1 1 120px;min-width:120px;max-width:100%;margin:0;text-align:right;font-size:17px}
.account-mini .account-avatar{flex:0 0 58px}
.account-mini b,.account-mini small,.session-item small{overflow-wrap:anywhere}
.settings-grid-two .settings-stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,144px),1fr))}
.settings-workspace-head .settings-workspace-icon{flex:0 0 46px}
.csa-table-wrap,.schedule-table,.table-wrap,.table-container,.cost-box,.attendance-box,.approval-table-wrap{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}

@media(max-width:980px){
  /* OMS uses a short, scrollable navigation bar above its existing mobile content. */
  .app-shell .sidebar{height:auto!important;max-height:none!important;min-height:0!important;position:relative}
  .app-shell .nav-list-grouped{display:flex!important;flex-direction:row;flex-wrap:nowrap;flex:0 0 auto!important;gap:8px!important;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0 10px!important;margin:0!important}
  .app-shell .nav-list-grouped .nav-group{display:contents}
  .app-shell .nav-list-grouped .nav-group.hidden{display:none!important}
  .app-shell .nav-list-grouped .nav-group-title{display:none}
  .app-shell .nav-list-grouped .page-nav-item{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 12px!important}
  .app-shell .sidebar-bottom-menu{display:flex;flex-wrap:wrap;gap:8px}
  .app-shell .sidebar-bottom-menu button{flex:1 1 120px;min-width:0;width:auto;margin:0!important}
}
@media(max-width:820px){
  /* Keep the mobile drawer above the backdrop and the page stacking context. */
  .csa-site-layout .sidebar{z-index:40}
  .csa-site-layout .sidebar-overlay{z-index:35}
  .csa-site-layout .app,.csa-site-layout .app.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}
  .csa-site-layout .sidebar{width:min(288px,calc(100vw - 32px));height:100dvh;gap:12px}
  .csa-site-layout .sidebar .brand{flex:0 0 auto}
  .csa-site-layout .sidebar .nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .csa-site-layout .sidebar .nav a{min-height:44px;flex-shrink:0}
  .csa-site-layout .sidebar-bottom{display:grid!important;flex:0 0 auto;gap:8px;margin-top:0}
  .csa-site-layout .sidebar-bottom .upgrade{padding:12px;min-height:0}
  .csa-site-layout .sidebar-bottom .upgrade p{font-size:11px}
  .csa-site-layout .sidebar-bottom .csa-staff-sidebar{margin-top:0;min-height:44px}
  .csa-site-layout .topbar .csa-account-entry{display:flex!important;justify-content:center;width:48px;min-width:48px;max-width:48px;height:48px;padding:6px}
  .csa-site-layout .topbar .csa-account-entry>div:last-child{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .csa-site-layout .topbar .csa-admin-link{display:none}
}
@media(max-width:640px){
  main,.main-panel,.panel,.card,.csa-panel,.csa-data-frame{min-width:0}
  .csa-site-layout .main{width:100%;min-width:0}
  .csa-site-layout .main :is(input,textarea,select){font-size:16px;min-width:0;max-width:100%}
  .csa-site-layout .topbar{flex-wrap:nowrap}
  .csa-site-layout .topbar .search{padding:8px 10px;flex:1 1 0}
  .csa-site-layout .topbar .search input{font-size:16px}
  .csa-site-layout .topbar .theme-switcher,.csa-site-layout .topbar .profile{flex-shrink:0}
  .settings-side-card,.settings-section-box{padding:16px}
  .settings-side-col .settings-stat b{font-size:16px}
  .settings-row{gap:10px;padding:12px}
  .settings-row b{font-size:13px}
  .settings-workspace-head h2{font-size:26px;line-height:1.25;overflow-wrap:anywhere}
  .settings-workspace-content{padding:16px}
  .settings-workspace-content :is(input,textarea,select){font-size:16px;min-width:0}
  .settings-tab{gap:8px;padding:10px}
  .settings-tab-ico{width:32px;height:32px;padding:8px;flex:0 0 32px}
  .settings-tab b{font-size:12px}
  .settings-tab small{font-size:10px}
  .settings-actions{gap:8px}
  .settings-actions button{padding:0 10px;font-size:12px;min-height:44px}
  .security-score{align-items:flex-start;gap:12px}
  .settings-side-col .score-ring{width:72px;height:72px}
  .service-item{flex-wrap:wrap;gap:10px}
  .service-item .service-meta{width:100%;justify-content:flex-start;margin-left:0}
  .csa-settings-auth{margin:14px 16px 0;padding:12px}
  .csa-auth-actions{flex-wrap:wrap;max-width:100%}
  .csa-auth-actions a{min-height:44px}
  .csa-admin-title,.csa-admin-title>div,.csa-admin-nav{min-width:0}
  .csa-admin-title h1{font-size:24px;overflow-wrap:anywhere}
  .csa-admin-filters{grid-template-columns:minmax(0,1fr)}
  .csa-admin-filters label:first-child{grid-column:auto}
  .csa-admin-pager{flex-wrap:wrap;justify-content:flex-start}
  .csa-admin-pager>span{width:100%}
  .csa-admin-editor,.csa-modal{padding:10px}
  .csa-admin-editor>.csa-panel,.csa-data-dialog>.csa-data-frame{width:100%;max-width:100%;max-height:calc(100dvh - 20px)}
  .csa-admin-editor header{align-items:flex-start}
  .csa-data-frame>header{align-items:flex-start}
  .csa-panel :is(input,textarea,select){font-size:16px;min-width:0;max-width:100%}
  .csa-login .csa-auth-panel :is(input,textarea,select){font-size:16px}
  .csa-auth-panel .csa-auth-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .csa-login-back{font-size:12px;min-width:0}
  .csa-checkbox{align-items:flex-start;line-height:1.5}
  .csa-checkbox input{flex:0 0 auto;margin-top:3px!important}
  .csa-toast{left:12px;right:12px;bottom:12px;max-width:none;padding:12px 14px;overflow-wrap:anywhere}
  .content-hero-actions,.media-hero-actions{flex-wrap:wrap}
  .content-hero-actions>*,.media-hero-actions>*{flex:1 1 130px;min-width:0}
  .composer-footer,.composer-actions{min-width:0;flex-wrap:wrap}
  .composer-actions>*{min-width:0}
  .app-shell .main-panel{padding:12px}
  .app-shell .panel{padding:14px}
  .app-shell :is(.topbar-copy,.section-head,.user-actions,.top-actions){min-width:0}
  .app-shell :is(.top-actions,.user-actions,.section-head.row){flex-wrap:wrap;gap:8px}
  .app-shell :is(input,textarea,select),.login-card :is(input,textarea,select){font-size:16px;min-width:0;max-width:100%}
  .app-shell :is(.form-grid.two,.form-grid.three,.output-summary,.user-card){grid-template-columns:minmax(0,1fr)}
  .app-shell :is(.gallery-grid,.image-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .app-shell :is(h1,h2,h3),.app-shell :is(.user-name,.file-name,.brand-name){overflow-wrap:anywhere}
}