/* AIC Services app-wide responsive remediation — 2026-08-07
   Additive UI layer only. No business logic, role, route or database changes. */
:root{
  --aic-mobile-gutter:clamp(12px,3.8vw,20px);
  --aic-touch-target:44px;
  --aic-mobile-radius:14px;
}
html{max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
.app-shell{width:100%;min-width:0;min-height:100vh;min-height:100dvh}
.main,.content,.content>*,.card,.card>*,.grid-2>*,.cards>*,.form>*,form>*{min-width:0}
img,svg,video,canvas,iframe,embed,object{max-width:100%}
img,video{height:auto}
.content{width:100%}
.content p,.content li,.content dd,.content dt,.content address,.content .alert,.content .muted,.content .status,.content .badge,.content td{overflow-wrap:anywhere}
.content a:not(.btn),.content code,.content pre{overflow-wrap:anywhere;word-break:break-word}
.content pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Shared mobile header */
.mobile-brand{display:none;align-items:center;gap:8px;min-width:0;color:var(--aic-dark-purple,#6A2875);font-weight:800;white-space:nowrap}
.mobile-brand img{display:block;width:34px;height:34px;flex:0 0 34px;object-fit:contain;background:#fff;border:1px solid var(--border,#eadff0);border-radius:10px}
.mobile-brand span{overflow:hidden;text-overflow:ellipsis}
.menu-btn,.sidebar-close{min-width:var(--aic-touch-target);min-height:var(--aic-touch-target);touch-action:manipulation}

/* Shared off-canvas sidebar */
.sidebar-close{display:none;position:sticky;top:0;margin:-4px 0 8px auto;width:44px;height:44px;padding:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;font-size:28px;line-height:1;z-index:2}
.sidebar-close:hover,.sidebar-close:focus-visible{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.55)}
.sidebar-overlay{display:none;position:fixed;inset:0;width:100%;height:100vh;height:100dvh;padding:0;margin:0;border:0;border-radius:0;background:rgba(24,14,27,.48);opacity:0;visibility:hidden;pointer-events:none;z-index:90;transition:opacity .18s ease,visibility .18s ease}
.sidebar-overlay:hover,.sidebar-overlay:active,.sidebar-overlay:focus{border:0;background:rgba(24,14,27,.48);box-shadow:none;transform:none;outline:0}

/* Shared controls */
.content input,.content select,.content textarea,.content button,.content .btn{max-width:100%}
.login-card .btn{min-height:44px}
.content input[type="checkbox"],.content input[type="radio"]{width:20px;height:20px;min-width:20px;min-height:20px;padding:0;accent-color:var(--aic-dark-purple,#6A2875)}
.content .checkbox-row,.content .shift-checkbox-row{min-height:44px;align-items:center}
.content input[type="file"]{width:100%;min-width:0;white-space:normal;overflow:hidden}
.content input[type="file"]::file-selector-button{min-height:40px;margin-right:10px;border:1px solid var(--border,#eadff0);border-radius:10px;background:#fff;color:var(--aic-dark-purple,#6A2875);font:inherit;font-weight:700;padding:8px 12px}

/* Data-heavy screens: contain horizontal scrolling inside the table region only. */
.table-wrap,.ac-scroll,.approved-doc-table-wrap,.participant-list-wrap,.medicine-chart-page .table-wrap,.medicine-page .table-wrap,[class*="table-wrap"]{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.table-wrap table,.ac-scroll table,.approved-doc-table-wrap table,[class*="table-wrap"] table{max-width:none}
.content table th,.content table td{vertical-align:top}
.content table td .btn,.content table td button,.content table td input[type="submit"]{min-height:40px}

/* Dialogs and menus */
.confirm-modal-backdrop,[role="dialog"].confirm-modal-backdrop{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-y:auto}
.confirm-modal,[role="dialog"] .confirm-modal{width:min(620px,94vw)!important;max-width:94vw!important;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.actions-popover,.account-dropdown{max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow-y:auto}

/* Visible focus states */
.menu-btn:focus-visible,.sidebar-close:focus-visible,.sidebar .nav-link:focus-visible,.content .btn:focus-visible,.content button:focus-visible,.content input:focus-visible,.content select:focus-visible,.content textarea:focus-visible,.account-trigger:focus-visible,.account-dropdown a:focus-visible{outline:3px solid rgba(176,129,185,.72);outline-offset:2px}

@media(max-width:1023px){
  .main{margin-left:0!important;width:100%!important;max-width:100%!important}
  .sidebar{width:min(86vw,320px)!important;min-width:min(86vw,320px)!important;max-width:min(86vw,320px)!important;height:100vh!important;height:100dvh!important;padding-top:max(12px,env(safe-area-inset-top))!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important;transform:translateX(-104%)!important;transition:transform .2s ease!important;z-index:100!important;overscroll-behavior:contain}
  .sidebar.open{transform:translateX(0)!important}
  .sidebar .nav-link{min-height:44px!important}
  .sidebar-close{display:flex}
  .sidebar-overlay{display:block}
  body.sidebar-open{overflow:hidden}
  body.sidebar-open .sidebar-overlay{opacity:1;visibility:visible;pointer-events:auto}
  .topbar{min-height:64px;height:auto;padding:8px max(var(--aic-mobile-gutter),env(safe-area-inset-right)) 8px max(var(--aic-mobile-gutter),env(safe-area-inset-left));gap:10px}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;flex:0 0 44px;padding:0!important;font-size:22px}
  .mobile-brand{display:flex}
  .search{min-width:0}
  .search input{min-height:44px}
  .top-actions{gap:8px;margin-left:auto;min-width:0}
  .content{padding:20px clamp(16px,2.4vw,24px)}
  h1{font-size:clamp(24px,4vw,30px);line-height:1.18;overflow-wrap:anywhere}
  h2{line-height:1.25}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid-2,.content .grid-2,.content form .grid-2,.content .fields-grid,.content .form-grid,.content .ndis-form-grid,.content .shift-top-grid,.content .medicine-two-column{grid-template-columns:minmax(0,1fr)!important}
  .content .medicine-grid.grid-4,.content .medicine-grid.grid-3,.content .medicine-form-grid-2,.content .medicine-reference-grid,.content .staff-summary-grid,.content .ac-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-heading,.page-actions,.form-actions,.confirm-modal-actions,.approved-doc-toolbar,.staff-details-header,.participant-section-heading,.medicine-chart-page .page-heading{max-width:100%}
}

@media(max-width:767px){
  .topbar{min-height:60px;padding-top:max(7px,env(safe-area-inset-top))}
  .mobile-brand span{font-size:14px}
  .search{display:none}
  .top-actions .badge{display:none}
  .account-trigger{min-height:44px!important;max-width:min(190px,42vw)!important}
  .account-name{max-width:110px!important}
  .content{padding:16px var(--aic-mobile-gutter) max(20px,env(safe-area-inset-bottom))}
  .card{padding:clamp(14px,4vw,18px);border-radius:var(--aic-mobile-radius)}
  .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;gap:12px;margin:16px 0}
  .metric strong{font-size:clamp(28px,9vw,34px)}
  .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.content select,.content textarea{width:100%;max-width:100%;min-height:44px;font-size:16px}
  .content textarea{min-height:120px;resize:vertical}
  .login-card input,.login-card select,.login-card textarea{min-height:44px;font-size:16px}
  .login-card .btn{min-height:44px}
  .content .btn,.content button,.content input[type="submit"],.content input[type="button"]{min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.2;white-space:normal;text-align:center}
  .content form:not(.inline-form),.content .form,.content .stacked-form{max-width:100%}
  .content form:not(.inline-form)>label,.content .form>label,.content .field-full,.content .full-width,.content .full{min-width:0;max-width:100%}
  .content .medicine-grid.grid-4,.content .medicine-grid.grid-3,.content .medicine-form-grid,.content .medicine-form-grid-2,.content .medicine-reference-grid,.content .staff-summary-grid,.content .ac-form-grid,.content .ndis-form-grid,.content .shift-top-grid,.content .participant-list-toolbar,.content .staff-filter-toolbar{grid-template-columns:minmax(0,1fr)!important}
  .content .page-heading,.content .participant-section-heading,.content .staff-details-header,.content .approved-doc-toolbar,.content .team-leader-houses__header{display:flex;flex-direction:column;align-items:stretch!important;gap:10px}
  .content .page-actions,.content .form-actions,.content .confirm-modal-actions,.content .approved-doc-search,.content .actions-row,.content .ac-action-row{display:flex;flex-wrap:wrap;gap:10px;width:100%}
  .content .form-actions .primary,.content .form-actions button[type="submit"],.content .form-actions input[type="submit"],.content form>.btn.primary:last-child,.login-card .btn.primary{width:100%}
  .table-wrap,.ac-scroll,.approved-doc-table-wrap,[class*="table-wrap"]{border-radius:12px;position:relative}
  .table-wrap::after,.ac-scroll::after,[class*="table-wrap"]::after{content:"Swipe table sideways to see more";display:block;position:sticky;left:0;width:fit-content;max-width:100%;margin:8px 0 0;padding:5px 8px;color:var(--muted,#6b7280);background:#fff;border:1px solid var(--border,#eadff0);border-radius:999px;font-size:11px;line-height:1.2;pointer-events:none}
  .table-wrap table,.ac-scroll table,[class*="table-wrap"] table{min-width:max(680px,100%)}
  .content table th,.content table td{padding:10px;font-size:13px}
  .content table td .btn,.content table td button,.content table td input[type="submit"]{min-height:44px}
  .content input[type="file"]::file-selector-button{min-height:44px}
  .content table th{white-space:nowrap}
  .content table td{white-space:normal}
  .content .status,.content .badge{max-width:100%;white-space:normal;line-height:1.25}
  .confirm-modal{width:94vw!important;max-width:94vw!important;border-radius:16px!important}
  .confirm-modal-actions>*{flex:1 1 160px}
  .login-page{min-height:100vh!important;min-height:100dvh!important;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important}
  .login-card{width:min(100%,460px)!important;padding:clamp(20px,6vw,28px)!important;border-radius:18px!important}
  .staff-pagination,.page-links,[class*="pagination"]{max-width:100%}
  .page-links{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
  .topbar{gap:8px}
  .mobile-brand span{display:none}
  .mobile-brand img{width:36px;height:36px;flex-basis:36px}
  .account-name,.account-chevron{display:none!important}
  .account-trigger{width:44px!important;min-width:44px!important;max-width:44px!important;padding:4px!important;justify-content:center}
  .account-avatar{margin:0!important}
  .content{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .cards{grid-template-columns:minmax(0,1fr)!important}
  .content .page-actions>*,.content .participant-section-heading>.btn,.content .staff-details-header>.btn,.content .approved-doc-search>*,.content .approved-doc-search label{max-width:100%}
  .content .form-actions>*{flex:1 1 100%}
  .content input[type="file"]::file-selector-button{display:block;width:100%;margin:0 0 8px}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:1023px){
  .sidebar{padding-top:8px!important;padding-bottom:8px!important}
  .sidebar .brand,.sidebar-brand{min-height:48px!important;margin-bottom:8px!important}
  .sidebar .nav-link{min-height:44px!important;padding-top:8px!important;padding-bottom:8px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}