/*
 * HASAD responsive shell
 * Loaded last so mobile and tablet constraints consistently win over the
 * desktop-oriented feature styles without changing desktop composition.
 */
#app,
#app .workspace,
#app .view,
#app .view > *,
#app :is(.card,.panel,.page-head,.department-workspace-main,.department-workspace-content){
  min-inline-size:0;
}
#app :is(img,video,canvas,svg){max-inline-size:100%}
#app :is(h1,h2,h3,h4,p,small,b,strong,a,button,label,td,th){
  overflow-wrap:anywhere;
}
#app .table-wrap{
  inline-size:100%;
  max-inline-size:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
#app .table-wrap > table{min-inline-size:max(100%,680px)}
#app :is(.actions,.page-actions,.panel-actions,.toolbar,.filters,.filter-bar,.report-filter){
  max-inline-size:100%;
}
#app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,button){
  max-inline-size:100%;
}
#app textarea{resize:vertical}

@media (max-width:1024px){
  #app .view{inline-size:100%;max-inline-size:none;padding:18px}
  #app :is(.grid-2,.grid-3,.dashboard-grid,.summary-grid,.details-grid){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #app :is(.page-head,.panel-head){align-items:flex-start}
  #app :is(.actions,.page-actions,.panel-actions,.toolbar,.filters,.filter-bar){
    flex-wrap:wrap;
  }
  #app .full-page-dialog{
    inset-inline:16px!important;
    width:auto!important;
    max-width:none!important;
  }
  #app .work-inbox-shell{
    grid-template-columns:150px minmax(230px,290px) minmax(340px,1fr);
    min-height:calc(100dvh - 150px);
  }
  #app .work-inbox-context{grid-column:1/-1;border-inline-end:0;border-top:1px solid var(--line)}
}

@media (max-width:768px){
  /* HQ-0041: #app redeclares the token (hasad-visual-system.css), so a :root-only override never reached the shell. */
  :root,#app{--hasad-topbar-height:64px}
  body:has(#app:not(.hidden)){min-inline-size:0}
  #app{min-height:100dvh}
  #app .workspace{min-inline-size:0}
  #app .topbar{
    position:sticky;
    inset-block-start:0;
    z-index:60;
    inline-size:100%;
    height:var(--hasad-topbar-height);
    min-height:var(--hasad-topbar-height);
    padding-inline:10px;
    gap:6px;
  }
  #app .topbar-home{min-inline-size:42px}
  #app .topbar-brand-name{display:none}
  #app .top-actions{min-inline-size:0;gap:4px}
  #app .topbar-communication-dock{gap:2px;padding-inline:3px}
  #app :is(.language-button,.messages-button){min-width:42px;min-height:44px}
  #app .language-button b{display:none}
  #app .user-menu{flex:0 0 44px}
  #app .profile-button{
    display:flex;
    justify-content:center;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:3px;
  }
  #app .profile-button > div:not(.avatar),
  #app .profile-button .profile-chevron{display:none}
  #app .profile-button .avatar{width:36px;height:36px}
  #app .profile-menu-panel{
    position:fixed;
    inset-inline:10px;
    inset-block-start:calc(var(--hasad-topbar-height) + 8px);
    width:auto;
    max-height:calc(100dvh - var(--hasad-topbar-height) - 20px);
    overflow-y:auto;
  }
  #app .view,
  #app .view.has-organization-sidebar{
    inline-size:100%;
    min-inline-size:0;
    padding:12px;
  }
  #app .view.has-organization-sidebar{padding:0}
  #app .organization-navigation-stack .department-context-nav{padding-inline:10px}
  #app .organization-sidebar-mobile-toggle{
    min-width:44px;
    min-height:44px;
  }
  #app :is(.grid-2,.grid-3,.dashboard-grid,.summary-grid,.details-grid,.cards,.metric-grid,.development-kpis){
    grid-template-columns:1fr;
  }
  #app :is(.page-head,.panel-head,.daily-report-titlebar){
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  #app :is(.actions,.page-actions,.panel-actions,.toolbar,.filters,.filter-bar,.report-filter){
    inline-size:100%;
    align-items:stretch;
  }
  #app :is(.actions,.page-actions,.panel-actions,.toolbar,.filters,.filter-bar,.report-filter) > :is(button,a,label,input,select){
    min-height:44px;
  }
  #app :is(.modal-form,.form-grid,.legal-simple-form-grid,.value-filter-form){
    grid-template-columns:1fr!important;
  }
  #app :is(.modal-form,.form-grid,.legal-simple-form-grid,.value-filter-form) > *{
    grid-column:auto!important;
    min-inline-size:0;
  }
  #app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    inline-size:100%;
    min-width:0;
    min-height:44px;
    font-size:16px;
  }
  #app button:not(.compact):not(.message-delete-button),
  #app [role="button"]:not(.compact){min-height:44px}
  #app .table-wrap{
    border-radius:9px;
    background:
      linear-gradient(to left,rgba(9,90,71,.12),transparent 18px) right/22px 100% no-repeat,
      linear-gradient(to right,rgba(9,90,71,.12),transparent 18px) left/22px 100% no-repeat,
      #fff;
  }
  #app .table-wrap > table{min-inline-size:640px}
  #app table :is(th,td){white-space:normal}
  #app .full-page-dialog,
  dialog,
  dialog.full-page-dialog{
    inset:0!important;
    inline-size:100vw!important;
    block-size:100dvh!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  dialog .modal-head{
    position:sticky;
    inset-block-start:0;
    z-index:5;
    min-height:60px;
    padding:12px 14px;
    background:#fff;
    border-bottom:1px solid var(--line,#d8e1dd);
  }
  dialog .modal-head .icon-button{
    flex:0 0 44px;
    width:44px;
    height:44px;
  }
  dialog #modal-body{padding:12px 14px 96px}
  #app .back-button{
    inset-inline-end:12px;
    inset-block-end:max(12px,env(safe-area-inset-bottom));
    min-width:48px;
    min-height:48px;
  }

  /* Messaging becomes a list-first mobile flow. */
  #app .work-inbox-shell{
    display:block;
    min-height:calc(100dvh - var(--hasad-topbar-height) - 24px);
    border-radius:12px;
  }
  #app .work-inbox-nav{
    position:static;
    display:flex;
    gap:6px;
    padding:8px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    border-inline-end:0;
    border-bottom:1px solid var(--line);
  }
  #app .work-inbox-nav > button{
    flex:0 0 auto;
    width:auto;
    min-height:44px;
  }
  #app .work-inbox-list{
    display:block;
    max-height:none;
    min-height:calc(100dvh - 220px);
    border:0;
    overflow-y:auto;
  }
  #app .work-inbox-conversation{min-height:64px}
  #app .work-inbox-thread{display:none;min-height:calc(100dvh - var(--hasad-topbar-height) - 24px)}
  #app .work-inbox-context{display:none}
  #app .work-inbox-shell.mobile-thread-open .work-inbox-context{display:block;border-top:1px solid var(--line)}
  #app .work-inbox-shell.mobile-thread-open .work-inbox-nav,
  #app .work-inbox-shell.mobile-thread-open .work-inbox-list{display:none}
  #app .work-inbox-shell.mobile-thread-open .work-inbox-thread{display:grid}
  #app .work-inbox-thread > header{
    position:sticky;
    inset-block-start:0;
    z-index:3;
    padding:10px 12px;
    background:#fff;
  }
  #app .mobile-inbox-back{
    display:inline-grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    color:var(--green);
    font-size:1.25rem;
  }
  html[dir="ltr"] #app .mobile-inbox-back{transform:rotate(180deg)}
  #app .work-inbox-thread > .conversation-thread{
    min-height:0;
    padding:12px;
    scroll-padding-block-end:88px;
  }
  #app .work-inbox-thread .message-bubble{max-width:92%}
  #app .work-inbox-composer{
    position:sticky;
    inset-block-end:0;
    grid-template-columns:minmax(0,1fr) 44px 44px;
    padding:9px;
    padding-block-end:max(9px,env(safe-area-inset-bottom));
  }
  #app .work-inbox-composer :is(button,.attachment-picker){min-width:44px;min-height:44px}
  #app .message-image img{max-width:min(240px,72vw)}
}

@media (min-width:769px){
  #app .mobile-inbox-back{display:none!important}
}

@media (max-width:430px){
  #app .view{padding:9px}
  #app .topbar-logo-wrap{flex:0 0 38px;width:38px;height:38px;aspect-ratio:1}
  #app .topbar-logo-wrap>.topbar-logo{width:100%;height:100%}
  #app .topbar-control-divider{display:none}
  #app .work-inbox-thread > header .actions{width:100%}
  #app .work-inbox-thread > header .actions button{flex:1 1 auto}
  #app .work-inbox-composer{grid-template-columns:minmax(0,1fr) 44px}
  #app .work-inbox-composer > button:last-of-type{grid-column:1/-1;width:100%}
  #app .table-wrap > table{min-inline-size:600px}
}

@media (max-width:350px){
  #app .topbar{padding-inline:6px}
  #app :is(.language-button,.messages-button){min-width:40px}
  #app .view{padding:7px}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:932px){
  #app .work-inbox-thread,
  #app .work-inbox-shell{min-height:calc(100dvh - var(--hasad-topbar-height))}
  dialog,
  dialog.full-page-dialog{height:100dvh!important}
}

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