/*
 * HENDAR v0.96.2 / R23 — Component Update U1
 * Master checklist: 04 Header + Sidebar, 05 Navigation/Buttons,
 * 06 Project Bar, 19 shared responsive contract.
 * This file is intentionally loaded last so one governed component layer
 * resolves the legacy cascade without changing business data or workflows.
 */

:root{
  --hdu-sidebar-width:276px;
  --hdu-sidebar-collapsed-width:92px;
  --hdu-topbar-height:76px;
  --hdu-measured-topbar-height:76px;
  --hdu-safe-inline:clamp(10px,1.5vw,24px);
  --hdu-control-size:42px;
  --hdu-gap:10px;
  --hdu-border:var(--ds-border,var(--line,#d8e2e8));
  --hdu-surface:var(--ds-surface,var(--surface,#fff));
  --hdu-text:var(--ds-text,var(--ink,#173042));
  --hdu-muted:var(--ds-muted,var(--muted,#617482));
  --hdu-primary:var(--ds-primary,var(--navy-800,#0b4f86));
  --hdu-shadow:0 10px 30px rgba(6,31,49,.08);
}

html{
  min-width:0;
  max-width:100%;
  overflow-x:clip!important;
  scrollbar-gutter:stable;
}
body{
  min-width:0;
  max-width:100%;
  overflow-x:clip!important;
  text-rendering:optimizeLegibility;
}
body *,body *::before,body *::after{box-sizing:border-box}

/* Shared containment: the document never becomes the horizontal scroller. */
#appShell,.app-shell,.main-content,.view,
.project-workspace-layout,.project-workspace-main,#projectWorkspaceContent,
.section-toolbar,.workspace-hero,.panel,.card,.modal,.modal-body,.form-grid,
.toolbar,.toolbar-actions,.filter-bar,.row-actions,.tabs,fieldset,details{
  min-width:0;
  max-width:100%;
}
:where(h1,h2,h3,h4,h5,p,span,strong,small,label,legend,button,a,th,td){
  min-width:0;
  overflow-wrap:anywhere;
}
:where(input,select,textarea,button){max-width:100%}
img,svg,canvas,video{max-width:100%}

/* Desktop shell: header and rail share the same origin with no floating gap. */
@media (min-width:981px){
  .app-shell:not(.hidden){
    display:grid!important;
    grid-template-columns:var(--hdu-sidebar-width) minmax(0,1fr)!important;
    align-items:start!important;
  }
  .app-shell.sidebar-collapsed:not(.hidden){
    grid-template-columns:var(--hdu-sidebar-collapsed-width) minmax(0,1fr)!important;
  }
  .app-shell:not(.hidden)>.sidebar{
    position:sticky!important;
    inset-block-start:0!important;
    inset-inline-start:0!important;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    align-self:start!important;
  }
  .app-shell:not(.hidden)>.main-content{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
  }
  .sidebar-close-button{display:none!important}
}

/* Sidebar identity: one centred HENDAR symbol, no duplicate word below it. */
.sidebar-brand{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:var(--hdu-topbar-height)!important;
  padding:10px 54px!important;
}
.sidebar-brand-mark{
  display:flex!important;
  width:100%!important;
  min-width:0!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
.sidebar-brand-mark .hendar-symbol{
  display:block!important;
  width:56px!important;
  height:56px!important;
  max-width:56px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:14px!important;
  filter:drop-shadow(0 7px 15px rgba(0,0,0,.18));
}
.sidebar-brand .brand-copy{display:none!important}
.sidebar-close-button{
  position:absolute!important;
  inset-block-start:50%!important;
  inset-inline-end:12px!important;
  translate:0 -50%;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.sidebar-close-button:hover{background:rgba(255,255,255,.16)!important}
.sidebar-close-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sidebar .main-nav{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.sidebar .nav-item,.sidebar .nav-group-toggle{max-width:100%;overflow:hidden}
.sidebar .nav-label,.sidebar .group-copy{min-width:0;white-space:normal;overflow-wrap:anywhere}
.sidebar-collapsed .sidebar-brand{padding-inline:10px!important}
.sidebar-collapsed .sidebar-brand-mark .hendar-symbol{width:50px!important;height:50px!important}

/* Project-manager and lower portals use an alternate sidebar identity card. */
.sidebar .project-portal-identity-button{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) 32px!important;
  align-items:center!important;
  gap:10px!important;
  width:calc(100% - 16px)!important;
  max-width:calc(100% - 16px)!important;
  min-height:96px!important;
  margin:8px!important;
  padding:12px!important;
  overflow:hidden!important;
  text-align:start!important;
}
.sidebar .project-portal-identity-button>.project-portal-image{
  grid-column:1!important;
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
}
.sidebar .project-portal-identity-button>div:nth-child(2){
  grid-column:2!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.sidebar .project-portal-identity-button small,
.sidebar .project-portal-identity-button div>span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.sidebar .project-portal-identity-button strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin-block:4px!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
  line-height:1.35!important;
}
.sidebar .project-portal-identity-button>i{
  grid-column:3!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  width:32px!important;
  height:32px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff!important;
  font-style:normal!important;
  line-height:1!important;
}
.sidebar-collapsed .project-portal-identity-button{grid-template-columns:minmax(0,1fr)!important;width:calc(100% - 12px)!important;margin:6px!important;padding:8px!important}
.sidebar-collapsed .project-portal-identity-button>.project-portal-image{grid-column:1!important;width:52px!important;height:52px!important;min-width:52px!important;margin:auto!important}
.sidebar-collapsed .project-portal-identity-button>div:nth-child(2),
.sidebar-collapsed .project-portal-identity-button>i{display:none!important}

/* Global header: sticky, bounded, three stable zones and no control overlap. */
.app-shell:not(.hidden) .main-content>.topbar{
  position:sticky!important;
  inset-block-start:0!important;
  top:0!important;
  z-index:1200!important;
  isolation:isolate;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(6px,1vw,14px)!important;
  width:100%!important;
  min-width:0!important;
  min-height:var(--hdu-topbar-height)!important;
  height:auto!important;
  margin:0!important;
  padding:9px var(--hdu-safe-inline)!important;
  border-radius:0!important;
  border-block-end:1px solid var(--hdu-border)!important;
  background:color-mix(in srgb,var(--hdu-surface) 92%,transparent)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 5px 20px rgba(8,35,54,.06)!important;
}
.topbar-title{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
  overflow:hidden!important;
}
.topbar-title>div:last-child{min-width:0!important;overflow:hidden!important}
.topbar-title h1,.topbar-title .breadcrumb{
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.topbar-title h1{font-size:clamp(1rem,1.45vw,1.35rem)!important;line-height:1.35!important}
.topbar-actions,.topbar-primary-actions{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:0!important;
  gap:6px!important;
}
.topbar .top-action,.topbar .navigation-back-button,.topbar #openSidebar,
.topbar .sidebar-collapse-button,.topbar-more-menu>summary{
  display:grid!important;
  place-items:center!important;
  flex:0 0 var(--hdu-control-size)!important;
  width:var(--hdu-control-size)!important;
  min-width:var(--hdu-control-size)!important;
  height:var(--hdu-control-size)!important;
  min-height:var(--hdu-control-size)!important;
  padding:0!important;
  border-radius:12px!important;
}
.navigation-back-button svg,.navigation-inline-back svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
html[dir="rtl"] .navigation-back-button svg,
html[dir="rtl"] .navigation-inline-back svg{transform:rotate(180deg)}
html[dir="ltr"] .navigation-back-button svg,
html[dir="ltr"] .navigation-inline-back svg{transform:none}
.navigation-inline-back{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:nowrap}
.topbar-more-menu{position:relative!important;flex:0 0 auto!important;min-width:0!important}
.topbar-more-menu>summary{list-style:none!important;cursor:pointer!important}
.topbar-more-menu>summary::-webkit-details-marker{display:none}
.topbar-more-panel{min-width:0!important;max-width:100%!important}

/* Runtime container measurement wins over coarse viewport breakpoints. */
.topbar-more-menu[data-hdu-mode="inline"]>summary{display:none!important}
.topbar-more-menu[data-hdu-mode="inline"]>.topbar-more-panel{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  overflow:visible!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.topbar-more-menu[data-hdu-mode="menu"]>summary{display:grid!important}
.topbar-more-menu[data-hdu-mode="menu"]:not([open])>.topbar-more-panel{display:none!important}
.topbar-more-menu[data-hdu-mode="menu"][open]>.topbar-more-panel{
  position:fixed!important;
  z-index:1600!important;
  inset-block-start:calc(var(--hdu-measured-topbar-height) + 6px)!important;
  inset-inline:10px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  width:auto!important;
  max-width:none!important;
  max-height:calc(100dvh - var(--hdu-measured-topbar-height) - 22px)!important;
  overflow:auto!important;
  padding:10px!important;
  border:1px solid var(--hdu-border)!important;
  border-radius:15px!important;
  background:var(--hdu-surface)!important;
  color:var(--hdu-text)!important;
  box-shadow:0 22px 70px rgba(3,24,39,.26)!important;
}
.topbar-more-menu[data-hdu-mode="menu"] .topbar-more-panel>.button,
.topbar-more-menu[data-hdu-mode="menu"] .topbar-more-panel>.date-chip{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
  justify-content:center!important;
  white-space:normal!important;
}
.topbar-more-menu[data-hdu-mode="menu"] .topbar-more-panel>.date-chip{grid-column:1/-1;display:flex!important;align-items:center!important}

@media (min-width:1051px){
  .topbar-more-menu>summary{display:none!important}
  .topbar-more-menu>.topbar-more-panel{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .topbar-more-panel>.button{min-height:40px!important;padding:8px 11px!important;white-space:nowrap!important}
}

@media (max-width:1050px){
  .topbar-more-menu>summary{display:grid!important}
  .topbar-more-menu:not([open])>.topbar-more-panel{display:none!important}
  .topbar-more-menu[open]>.topbar-more-panel{
    position:fixed!important;
    z-index:1600!important;
    inset-block-start:calc(var(--hdu-measured-topbar-height) + 6px)!important;
    inset-inline:10px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--hdu-measured-topbar-height) - 22px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    padding:10px!important;
    border:1px solid var(--hdu-border)!important;
    border-radius:15px!important;
    background:var(--hdu-surface)!important;
    color:var(--hdu-text)!important;
    box-shadow:0 22px 70px rgba(3,24,39,.26)!important;
  }
  .topbar-more-panel>.button,.topbar-more-panel>.date-chip{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:0!important;
    justify-content:center!important;
    white-space:normal!important;
  }
  .topbar-more-panel>.date-chip{grid-column:1/-1;display:flex!important;align-items:center!important}
}

/* Project command bar: compact hierarchy, predictable tools and mobile overflow. */
.project-workspace-head{
  position:relative!important;
  display:grid!important;
  grid-template-columns:auto minmax(260px,1fr)!important;
  grid-template-areas:"back title" "tools tools"!important;
  align-items:center!important;
  gap:10px 14px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 0 12px!important;
  padding:14px 16px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--project-color,var(--hdu-primary)) 22%,var(--hdu-border))!important;
  border-radius:18px!important;
  background:linear-gradient(125deg,color-mix(in srgb,var(--project-color,var(--hdu-primary)) 7%,var(--hdu-surface)),var(--hdu-surface) 62%)!important;
  box-shadow:var(--hdu-shadow)!important;
}
.project-workspace-head>#backToProjects{grid-area:back;align-self:start;position:relative;z-index:2}
.project-workspace-title{grid-area:title;min-width:0!important;position:relative;z-index:2}
.project-workspace-title h2{
  max-width:100%!important;
  margin:3px 0 2px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:clamp(1.15rem,1.75vw,1.65rem)!important;
  line-height:1.35!important;
}
.project-workspace-title p{margin:0!important;color:var(--hdu-muted)!important;font-size:.74rem!important;line-height:1.55!important}
.project-workspace-tools{
  grid-area:tools!important;
  position:relative;
  z-index:2;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
  width:100%!important;
}
.project-workspace-tools>input[type="search"]{
  flex:1 1 260px!important;
  width:auto!important;
  min-width:min(260px,100%)!important;
  min-height:42px!important;
}
.project-workspace-tools>.button{
  flex:0 1 auto!important;
  min-width:0!important;
  min-height:42px!important;
  padding:8px 11px!important;
  white-space:normal!important;
}
.project-tools-more{position:relative;flex:0 0 auto;min-width:0}
.project-tools-more>summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:8px 12px;
  list-style:none;
  border:1px solid var(--hdu-border);
  border-radius:11px;
  background:var(--hdu-surface);
  color:var(--hdu-text);
  font-weight:800;
  cursor:pointer;
}
.project-tools-more>summary::-webkit-details-marker{display:none}
.project-tools-more-panel{display:grid;gap:7px;min-width:0}
.project-tools-more:not([open])>.project-tools-more-panel{display:none!important}

/* Buttons and modal actions: cancellation never floats above related actions. */
:where(.button,.row-action,.top-action,.icon-button,.nav-item){touch-action:manipulation}
.modal .form-actions,.modal form>.form-actions{
  min-width:0!important;
  max-width:100%!important;
  align-items:stretch!important;
  gap:8px!important;
}
.modal .form-actions>.button,.modal .form-actions>button{min-width:0!important;white-space:normal!important;line-height:1.45!important}
.modal .form-actions>.close-modal{order:100}
@media (min-width:701px){
  .modal .form-actions,.modal form>.form-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:100%!important;
  }
  .modal .form-actions>.button,.modal .form-actions>button{flex:1 1 auto!important}
  .modal .form-actions>.close-modal{flex:0 1 112px!important}
}

/* Shared responsive component contract. */
:where(.table-card,.project-wide-table,.document-table,.boq-grid-wrap,.boq-full-table,
.boq-sheet-scroll,.boq-spreadsheet-shell,.gantt-sheet-scroll,.gantt-unified-shell,
.advance-sheet-wrap,.reports-table-wrap,.cpay-table-scroll,.hdu-table-region){
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
:where(.table-card,.project-wide-table,.document-table,.boq-grid-wrap,.boq-full-table,
.boq-sheet-scroll,.boq-spreadsheet-shell,.gantt-sheet-scroll,.gantt-unified-shell,
.advance-sheet-wrap,.reports-table-wrap,.cpay-table-scroll)>table{max-width:none}

:where(.toolbar,.toolbar-actions,.section-toolbar,.filter-actions,.report-actions,
.boq-action-cluster,.advance-page-actions,.advance-export-actions,.row-actions,
.project-page-heading,.panel-header){min-width:0;max-width:100%;gap:8px;flex-wrap:wrap}
:where(.tabs,.workspace-tabs,.project-workspace-tabs,.report-tabs,.cpay-tabs){
  min-width:0;
  max-width:100%;
  overflow:visible;
  flex-wrap:wrap;
}
:where(.tabs,.workspace-tabs,.project-workspace-tabs,.report-tabs,.cpay-tabs)>button{
  min-width:0;
  max-width:100%;
  white-space:normal;
}
:where(.form-grid,.filter-grid,.simple-account-grid,.advanced-grid)>*{min-width:0;max-width:100%}
:where(.checkbox-label,label:has(>input[type="checkbox"]),label:has(>input[type="radio"])){min-width:0;white-space:normal}
:where(.checkbox-label,label:has(>input[type="checkbox"]),label:has(>input[type="radio"]):not(.login-role-card))>input[type="checkbox"],
:where(.checkbox-label,label:has(>input[type="checkbox"]),label:has(>input[type="radio"]):not(.login-role-card))>input[type="radio"]{
  flex:0 0 20px;
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  margin:0;
}
.modal-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:3200!important;
  isolation:isolate;
  display:grid!important;
  place-items:center!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-width:100vw!important;
  overflow:auto!important;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
}
.modal-backdrop.hidden{display:none!important}
body.modal-open{overflow:hidden!important}
.modal{
  --modal-width:820px;
  width:min(var(--modal-width,820px),calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  max-height:calc(100dvh - 16px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}
.modal-md{--modal-width:720px}
.modal-lg{--modal-width:1120px}
.modal-xl{--modal-width:1320px}
.modal-xxl{--modal-width:1500px}
#projectPermissionsModal{--modal-width:1320px}
#projectPermissionsModal .simple-account-grid,
#projectPermissionsModal .advanced-grid{min-width:0;max-width:100%}
#projectPermissionsModal .simple-account-grid>*{min-width:0;max-width:100%}
#projectPermissionsModal .user-account-request-actions{
  display:flex!important;
  align-items:stretch!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  min-width:0!important;
  max-width:100%!important;
}
#projectPermissionsModal .user-account-request-actions>.button{flex:1 1 190px;min-width:0!important;white-space:normal!important}
.modal-header{min-width:0!important;gap:10px!important}
.modal-header>div{min-width:0!important}
.modal-header h2,.modal-header p{max-width:100%!important;overflow-wrap:anywhere!important}
.modal-header>.icon-button,.modal-header>.close-modal{flex:0 0 40px!important;width:40px!important;height:40px!important;padding:0!important}

@media (max-width:980px){
  .app-shell,.app-shell.sidebar-collapsed{display:block!important;width:100%!important}
  #sidebar,#sidebar:not(.open){
    position:fixed!important;
    inset-block:0!important;
    inset-inline-start:0!important;
    inset-inline-end:auto!important;
    display:flex!important;
    width:min(304px,calc(100vw - 18px))!important;
    max-width:calc(100vw - 18px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    z-index:1900!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:0!important;
    transition:transform .22s ease,opacity .18s ease,visibility 0s linear .22s!important;
  }
  html[dir="rtl"] #sidebar:not(.open){transform:translateX(104%)!important}
  html[dir="ltr"] #sidebar:not(.open){transform:translateX(-104%)!important}
  #sidebar.open{
    visibility:visible!important;
    pointer-events:auto!important;
    opacity:1!important;
    transform:translateX(0)!important;
    transition-delay:0s!important;
  }
  .sidebar-close-button{display:grid!important}
  #sidebarOverlay{
    position:fixed!important;
    inset:0!important;
    z-index:1800!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  #sidebarOverlay.show{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .main-content{width:100%!important;min-width:0!important}
  .project-workspace-head{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"title back" "tools tools"!important}
  .project-workspace-tools>input[type="search"]{flex-basis:100%!important;width:100%!important;min-width:0!important}
  .project-workspace-tools>.button{flex:1 1 150px!important}
  .project-tools-more{flex:1 1 150px}
  .project-tools-more>summary{width:100%}
  .project-tools-more[open]>.project-tools-more-panel{
    position:absolute;
    z-index:900;
    inset-block-start:calc(100% + 6px);
    inset-inline-end:0;
    width:min(290px,calc(100vw - 28px));
    padding:8px;
    border:1px solid var(--hdu-border);
    border-radius:13px;
    background:var(--hdu-surface);
    box-shadow:0 18px 50px rgba(5,29,45,.2);
  }
  .project-tools-more-panel>.button{width:100%!important;min-height:44px!important}
}

@media (max-width:700px){
  :root{--hdu-topbar-height:64px;--hdu-measured-topbar-height:calc(64px + env(safe-area-inset-top));--hdu-control-size:38px;--hdu-safe-inline:8px}
  .app-shell:not(.hidden) .main-content>.topbar{
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:calc(var(--hdu-topbar-height) + env(safe-area-inset-top))!important;
    padding-block:calc(7px + env(safe-area-inset-top)) 7px!important;
    gap:4px!important;
  }
  .topbar-title{gap:4px!important}
  .topbar-title .navigation-project-home{display:none!important}
  .topbar-title h1{font-size:.92rem!important;max-width:28vw!important}
  .topbar-title .breadcrumb{display:none!important}
  .topbar-actions,.topbar-primary-actions{gap:3px!important}
  .topbar-more-menu[open]>.topbar-more-panel{
    inset-block-start:calc(var(--hdu-measured-topbar-height) + 5px)!important;
  }
  .view{width:100%!important;max-width:100%!important;padding-inline:max(9px,env(safe-area-inset-left)) max(9px,env(safe-area-inset-right))!important}
  .section-toolbar,.project-page-heading,.panel-header{align-items:stretch!important}
  :where(.toolbar-actions,.filter-actions,.report-actions,.boq-action-cluster,.advance-page-actions,.advance-export-actions){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
  :where(.toolbar-actions,.filter-actions,.report-actions,.boq-action-cluster,.advance-page-actions,.advance-export-actions)>.button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    white-space:normal!important;
  }
  :where(.tabs,.workspace-tabs,.project-workspace-tabs,.report-tabs,.cpay-tabs){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  :where(.form-grid,.filter-grid,.simple-account-grid,.advanced-grid){grid-template-columns:minmax(0,1fr)!important}
  :where(.form-grid,.filter-grid,.simple-account-grid,.advanced-grid)>.wide{grid-column:auto!important}
  .project-workspace-head{padding:12px!important;border-radius:15px!important;gap:8px!important}
  .project-workspace-title h2{
    font-size:1.05rem!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    text-overflow:clip!important;
  }
  .project-workspace-title p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .project-workspace-head>#backToProjects{width:42px!important;min-width:42px!important;height:42px!important;padding:0!important}
  .project-workspace-head>#backToProjects span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .project-workspace-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .project-workspace-tools>input[type="search"]{grid-column:1/-1!important;width:100%!important}
  .project-workspace-tools>.button,.project-tools-more{width:100%!important;min-width:0!important}
  .modal{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:14px!important}
  .modal-header{position:sticky!important;inset-block-start:0!important;z-index:20!important;padding:12px!important;background:var(--hdu-surface)!important}
  .modal form>.form-actions{
    position:sticky!important;
    inset-block-end:0!important;
    z-index:19!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-inline:-14px!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--hdu-surface) 96%,transparent)!important;
    border-block-start:1px solid var(--hdu-border)!important;
    box-shadow:0 -8px 24px rgba(8,35,54,.08)!important;
  }
  .modal form>.form-actions>.close-modal:last-child,
  .modal form>.form-actions>.close-modal{grid-column:1/-1!important}
  #projectPermissionsModal .user-account-request-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  #projectPermissionsModal .user-account-request-actions>.button{width:100%!important}
}

@media (max-width:470px){
  .topbar-title>div:last-child{display:none!important}
  .topbar-title{overflow:visible!important}
  .topbar-more-menu[open]>.topbar-more-panel{grid-template-columns:minmax(0,1fr)!important}
  .topbar-more-panel>.date-chip{grid-column:auto}
  :where(.toolbar-actions,.filter-actions,.report-actions,.boq-action-cluster,.advance-page-actions,.advance-export-actions),
  :where(.tabs,.workspace-tabs,.project-workspace-tabs,.report-tabs,.cpay-tabs){grid-template-columns:minmax(0,1fr)!important}
  .project-workspace-tools{grid-template-columns:minmax(0,1fr)!important}
  .project-workspace-tools>input[type="search"]{grid-column:auto!important}
  .modal form>.form-actions{grid-template-columns:minmax(0,1fr)!important}
  .modal form>.form-actions>.close-modal{grid-column:auto!important}
}

@media (orientation:landscape) and (max-height:540px){
  :root{--hdu-topbar-height:56px;--hdu-control-size:36px}
  .app-shell:not(.hidden) .main-content>.topbar{padding-block:4px!important}
  .topbar-title h1,.topbar-title .breadcrumb{display:none!important}
  .topbar-more-menu[open]>.topbar-more-panel{max-height:calc(100dvh - 64px)!important}
  .project-workspace-head{padding-block:9px!important}
  .project-workspace-title p{display:none!important}
  .modal{max-height:100dvh!important;border-radius:0!important}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.sidebar-overlay,.navigation-back-button svg,.navigation-inline-back svg{transition:none!important}
}

@media print{
  .sidebar,.topbar,.sidebar-overlay,.project-tools-more{display:none!important}
  html,body,.app-shell,.main-content,.view{overflow:visible!important;max-width:none!important}
}