@media screen and (max-width: 760px) {
  html {
    font-size: 15px !important;
  }

  body {
    margin: 0 !important;
    font-size: 13px !important;
  }

  .content {
    padding: 8px !important;
  }

  .sidebar {
    max-height: 34vh !important;
    max-height: 34dvh !important;
    padding: 6px !important;
    gap: 6px !important;
  }

  .nav-item {
    min-height: 38px !important;
    padding: 0 4px !important;
  }

  .hub-customer-context.sidebar-customer-picker {
    margin: 0 0 8px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .hub-customer-context .sidebar-customer-list {
    min-height: 54px !important;
  }

  .hub-customer-context .customer-item,
  body[data-view="dashboard"] #dashboardView > .sidebar-customer-picker .customer-item {
    flex-basis: min(62vw, 220px) !important;
    min-height: 50px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 5px !important;
  }

  .hub-customer-context .customer-avatar,
  body[data-view="dashboard"] #dashboardView > .sidebar-customer-picker .customer-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .hub-shell-ready .app-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .hub-shell-ready .hub-app-card {
    min-height: 126px !important;
    aspect-ratio: auto !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }

  .hub-shell-ready .hub-app-card .app-logo,
  .hub-shell-ready .app-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .customer-open-points {
    gap: 10px !important;
    padding: 12px !important;
  }

  .open-points-ring {
    width: 78px !important;
    height: 78px !important;
  }

  .open-points-ring::after {
    inset: 10px !important;
  }

  .open-points-ring strong {
    font-size: 20px !important;
  }

  .open-points-copy strong {
    font-size: 16px !important;
  }

  .customer-editor-card {
    min-height: auto !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .customer-editor-logo {
    width: 52px !important;
    height: 52px !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-header {
    min-height: 72px !important;
    margin: 6px 6px 0 !important;
    border-radius: 12px !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-header .topbar-actions {
    right: 6px !important;
    bottom: 6px !important;
    gap: 4px !important;
    max-width: calc(100% - 12px) !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-header .hub-back-button,
  body.hub-shell-ready[class*="-shell"] .hub-shell-header #logoutButton {
    min-height: 26px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-navigation {
    padding: 6px !important;
    border-bottom: 1px solid rgba(245, 164, 0, 0.28) !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-navigation .brand {
    display: none !important;
  }

  body.hub-shell-ready[class*="-shell"] [class$="-shell-nav"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-nav-item {
    min-height: 34px !important;
    gap: 5px !important;
    padding: 4px 5px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-nav-item::before {
    top: 7px !important;
    bottom: 7px !important;
    left: 4px !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-navigation .icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body.hub-shell-ready[class*="-shell"] .hub-shell-navigation .icon svg {
    width: 80% !important;
    height: 80% !important;
  }

  body.hub-shell-ready[class*="-shell"] [class$="-shell-main"] {
    padding: 6px !important;
  }

  .hub-app-context-row {
    margin: 0 0 6px !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 10px !important;
  }

  .hub-app-context-control {
    gap: 4px !important;
  }

  .hub-app-context-kicker {
    font-size: 9.5px !important;
  }

  .hub-app-context-row select {
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  .hub-app-context-summary {
    display: none !important;
  }

  body.hub-shell-ready[class*="-shell"] [class$="-shell-frame-card"] {
    height: 64vh !important;
    height: 64dvh !important;
    min-height: 420px !important;
    max-height: 720px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  body.hub-shell-ready[class*="-shell"] iframe[class$="-shell-frame"] {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* customer-search-2026-06-04: compact searchable picker. */
@media screen and (max-width: 960px) {
  .hub-customer-search,
  .hub-customer-toggle {
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .hub-customer-search {
    border-radius: 8px 0 0 8px !important;
  }

  .hub-customer-toggle {
    border-radius: 0 8px 8px 0 !important;
  }

  .hub-customer-results {
    max-height: 54vh !important;
  }

  .hub-customer-result {
    min-height: 46px !important;
    padding: 8px !important;
  }
}

/* Hub size contract 2026-06-29.
   This file is loaded last by the Hub entry, so these rules intentionally
   win over older dashboard/sidebar sizing without touching app data. */
body.hub-shell-ready {
  --hub-main-sidebar-width: clamp(196px, calc(214px * var(--hub-ui-scale, 1)), 232px);
  --hub-main-nav-height: clamp(34px, calc(42px * var(--hub-ui-scale, 1)), 50px);
  --hub-main-nav-font: clamp(11px, calc(12px * var(--hub-ui-scale, 1)), 13px);
  --hub-main-icon-size: clamp(26px, calc(30px * var(--hub-ui-scale, 1)), 34px);
  --hub-main-card-min: clamp(108px, calc(138px * var(--hub-ui-scale, 1)), 152px);
  --hub-main-card-title: clamp(11px, calc(12px * var(--hub-ui-scale, 1)), 13px);
}

body.hub-shell-ready .shell {
  grid-template-columns: var(--hub-main-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready .sidebar {
  width: auto !important;
  min-width: 0 !important;
  padding: clamp(10px, calc(12px * var(--hub-ui-scale, 1)), 16px) 10px !important;
  gap: clamp(10px, calc(12px * var(--hub-ui-scale, 1)), 16px) !important;
}

body.hub-shell-ready .sidebar nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(5px, calc(6px * var(--hub-ui-scale, 1)), 8px) !important;
}

body.hub-shell-ready .sidebar .nav-item {
  min-height: var(--hub-main-nav-height) !important;
  padding: 0 clamp(8px, calc(10px * var(--hub-ui-scale, 1)), 12px) !important;
  gap: clamp(7px, calc(8px * var(--hub-ui-scale, 1)), 10px) !important;
  border-radius: clamp(8px, calc(10px * var(--hub-ui-scale, 1)), 12px) !important;
  font-size: var(--hub-main-nav-font) !important;
}

body.hub-shell-ready .sidebar .nav-item .icon {
  width: var(--hub-main-icon-size) !important;
  height: var(--hub-main-icon-size) !important;
  flex: 0 0 var(--hub-main-icon-size) !important;
}

body.hub-shell-ready .sidebar .brand-logo {
  width: min(clamp(92px, calc(118px * var(--hub-ui-scale, 1)), 136px), 100%) !important;
  max-height: clamp(92px, calc(118px * var(--hub-ui-scale, 1)), 136px) !important;
}

body.hub-shell-ready .sidebar .brand,
body.hub-shell-ready .sidebar .runtime-status,
body.hub-shell-ready .sidebar .sidebar-info {
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
}

body.hub-shell-ready .topbar {
  min-height: clamp(64px, calc(74px * var(--hub-ui-scale, 1)), 86px) !important;
  height: clamp(64px, calc(74px * var(--hub-ui-scale, 1)), 86px) !important;
  max-height: clamp(64px, calc(74px * var(--hub-ui-scale, 1)), 86px) !important;
  padding: clamp(10px, calc(14px * var(--hub-ui-scale, 1)), 18px) !important;
  overflow: hidden !important;
}

body.hub-shell-ready .app-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--hub-main-card-min), 1fr)) !important;
  gap: clamp(9px, calc(12px * var(--hub-ui-scale, 1)), 14px) !important;
}

body.hub-shell-ready .app-row.hub-app-card,
body.hub-shell-ready .hub-app-card {
  min-height: calc(var(--hub-main-card-min) * 0.88) !important;
  aspect-ratio: 1.16 / 1 !important;
  padding: clamp(8px, calc(10px * var(--hub-ui-scale, 1)), 12px) !important;
  gap: clamp(6px, calc(8px * var(--hub-ui-scale, 1)), 10px) !important;
}

body.hub-shell-ready .hub-app-card .app-logo {
  width: clamp(44px, calc(58px * var(--hub-ui-scale, 1)), 66px) !important;
  height: clamp(44px, calc(58px * var(--hub-ui-scale, 1)), 66px) !important;
}

body.hub-shell-ready .hub-app-card .app-title strong {
  font-size: var(--hub-main-card-title) !important;
  line-height: 1.18 !important;
}

body.hub-shell-ready .hub-app-card .app-title span,
body.hub-shell-ready .hub-app-card .state,
body.hub-shell-ready .hub-app-card .port {
  font-size: clamp(9px, calc(10px * var(--hub-ui-scale, 1)), 11px) !important;
}

/* Shell uniformity contract 2026-06-29.
   Keep Hub pages and integrated app shells visually aligned without touching
   app business logic or PDF output. */
body.hub-shell-ready[data-view] {
  --hub-main-sidebar-width: clamp(196px, calc(214px * var(--hub-ui-scale, 1)), 232px);
  --hub-main-nav-height: clamp(34px, calc(42px * var(--hub-ui-scale, 1)), 50px);
  --hub-main-nav-font: clamp(11px, calc(12px * var(--hub-ui-scale, 1)), 13px);
  --hub-main-icon-size: clamp(26px, calc(30px * var(--hub-ui-scale, 1)), 34px);
}

body.hub-shell-ready[data-view] .shell {
  grid-template-columns: var(--hub-main-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready[data-view] .topbar.hub-shell-header {
  min-height: clamp(84px, calc(96px * var(--hub-ui-scale, 1)), 108px) !important;
  height: clamp(84px, calc(96px * var(--hub-ui-scale, 1)), 108px) !important;
  max-height: clamp(84px, calc(96px * var(--hub-ui-scale, 1)), 108px) !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  margin-bottom: 10px !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.58)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), transparent 38%, rgba(0, 0, 0, 0.48)),
    var(--hub-page-header-image, var(--hub-shell-header-image, url("/assets/customer-background.png"))) !important;
  background-size: cover !important;
  background-position: center !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item {
  min-height: var(--hub-main-nav-height) !important;
  font-size: var(--hub-main-nav-font) !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon {
  width: var(--hub-main-icon-size) !important;
  height: var(--hub-main-icon-size) !important;
  flex-basis: var(--hub-main-icon-size) !important;
}

body.hub-shell-ready:not([data-view]) {
  --hub-app-sidebar-width: clamp(196px, calc(214px * var(--hub-ui-scale, 1)), 232px);
  --hub-app-header-height: clamp(78px, calc(92px * var(--hub-ui-scale, 1)), 104px);
  --hub-app-nav-height: clamp(34px, calc(38px * var(--hub-ui-scale, 1)), 44px);
  --hub-app-nav-font: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px);
  --hub-app-icon-size: clamp(23px, calc(26px * var(--hub-ui-scale, 1)), 30px);
  --hub-app-context-height: clamp(42px, calc(50px * var(--hub-ui-scale, 1)), 58px);
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
  width: var(--hub-app-sidebar-width) !important;
  min-width: var(--hub-app-sidebar-width) !important;
  max-width: var(--hub-app-sidebar-width) !important;
  padding: 8px !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header {
  min-height: var(--hub-app-header-height) !important;
  height: var(--hub-app-header-height) !important;
  max-height: var(--hub-app-header-height) !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  border-radius: 16px !important;
  margin-bottom: 8px !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand {
  padding: 8px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand-logo,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .app-brand-icon {
  width: 52px !important;
  height: 52px !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand strong {
  font-size: clamp(11px, calc(12px * var(--hub-ui-scale, 1)), 13px) !important;
  line-height: 1.08 !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand span {
  font-size: clamp(8px, calc(9px * var(--hub-ui-scale, 1)), 10px) !important;
  line-height: 1.1 !important;
}

body.hub-shell-ready:not([data-view]) .hub-nav-item {
  min-height: var(--hub-app-nav-height) !important;
  padding: 5px 7px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  font-size: var(--hub-app-nav-font) !important;
  line-height: 1.12 !important;
}

body.hub-shell-ready:not([data-view]) .hub-nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-nav-item svg {
  width: var(--hub-app-icon-size) !important;
  height: var(--hub-app-icon-size) !important;
  flex-basis: var(--hub-app-icon-size) !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row {
  min-height: var(--hub-app-context-height) !important;
  height: var(--hub-app-context-height) !important;
  box-sizing: border-box !important;
  padding: 6px 9px !important;
  gap: 8px !important;
  border-radius: 13px !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row .hub-customer-logo,
body.hub-shell-ready:not([data-view]) .hub-app-context-row img {
  max-width: 38px !important;
  max-height: 38px !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-kicker {
  font-size: clamp(8px, calc(9px * var(--hub-ui-scale, 1)), 10px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row select,
body.hub-shell-ready:not([data-view]) .hub-app-context-row button {
  min-height: clamp(28px, calc(31px * var(--hub-ui-scale, 1)), 34px) !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
}

body.hub-shell-ready:not([data-view]) :is(
  .audit-shell-main,
  .begehung-shell-main,
  .gbu-shell-main,
  .zertifikate-shell-main,
  .qualimatrix-shell-main,
  .arbeitsanweisung-shell-main,
  .org-handbuch-shell-main,
  .monatsbericht-shell-main,
  .projektradar-shell-main,
  .routenplaner-shell-main,
  .prueffristen-shell-main,
  .todo-shell-main,
  .organigramm-shell-main
) {
  padding: 8px 10px 10px 0 !important;
}

body.hub-shell-ready:not([data-view]) [class$="-shell-frame-card"] {
  border-radius: 13px !important;
}

/* Final chrome convergence 2026-06-29.
   This intentionally lives at the very end because older shell files still
   contain broad "not dashboard" selectors. Keep all chrome dimensions here. */
body.hub-shell-ready[data-view] .topbar,
body.hub-shell-ready[data-view] .topbar.hub-shell-header {
  min-height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  max-height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  box-sizing: border-box !important;
  padding: clamp(9px, calc(11px * var(--hub-ui-scale, 1)), 14px) !important;
  overflow: hidden !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
  min-height: clamp(34px, calc(38px * var(--hub-ui-scale, 1)), 42px) !important;
  padding: 5px 8px !important;
  gap: 7px !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item svg {
  width: clamp(22px, calc(25px * var(--hub-ui-scale, 1)), 28px) !important;
  height: clamp(22px, calc(25px * var(--hub-ui-scale, 1)), 28px) !important;
  flex: 0 0 clamp(22px, calc(25px * var(--hub-ui-scale, 1)), 28px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header {
  min-height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  max-height: clamp(78px, calc(88px * var(--hub-ui-scale, 1)), 100px) !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  overflow: hidden !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row {
  min-height: clamp(42px, calc(48px * var(--hub-ui-scale, 1)), 54px) !important;
  height: clamp(42px, calc(48px * var(--hub-ui-scale, 1)), 54px) !important;
  max-height: clamp(42px, calc(48px * var(--hub-ui-scale, 1)), 54px) !important;
  box-sizing: border-box !important;
  padding: 5px 8px !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row select,
body.hub-shell-ready:not([data-view]) .hub-app-context-row button {
  min-height: clamp(27px, calc(30px * var(--hub-ui-scale, 1)), 33px) !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
}

body.hub-shell-ready .app-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, calc(126px * var(--hub-ui-scale, 1)), 146px), 1fr)) !important;
}

body.hub-shell-ready .hub-app-card {
  min-height: clamp(94px, calc(116px * var(--hub-ui-scale, 1)), 132px) !important;
  padding: clamp(7px, calc(9px * var(--hub-ui-scale, 1)), 11px) !important;
}

body.hub-shell-ready .hub-app-card .app-logo {
  width: clamp(38px, calc(48px * var(--hub-ui-scale, 1)), 58px) !important;
  height: clamp(38px, calc(48px * var(--hub-ui-scale, 1)), 58px) !important;
}

body.hub-shell-ready .hub-app-card .app-title strong {
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
}

/* Stable shell sizing contract 2026-06-30.
   Keep Hub pages and integrated app shells on one visual scale. This file is
   loaded last, so these values are the single final override for chrome size. */
body.hub-shell-ready {
  --hub-unified-sidebar-width: clamp(188px, calc(200px * var(--hub-ui-scale, 1)), 216px);
  --hub-unified-header-height: clamp(72px, calc(82px * var(--hub-ui-scale, 1)), 94px);
  --hub-unified-nav-height: clamp(34px, calc(38px * var(--hub-ui-scale, 1)), 42px);
  --hub-unified-nav-font: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px);
  --hub-unified-icon-size: clamp(22px, calc(25px * var(--hub-ui-scale, 1)), 28px);
  --hub-unified-card-min: clamp(104px, calc(122px * var(--hub-ui-scale, 1)), 138px);
}

body.hub-shell-ready[data-view] {
  --hub-main-sidebar-width: var(--hub-unified-sidebar-width);
}

body.hub-shell-ready[data-view] .shell {
  grid-template-columns: var(--hub-unified-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready:not([data-view]) {
  --hub-app-sidebar-width: var(--hub-unified-sidebar-width);
  --audit-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --arbeitsanweisung-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --begehung-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --gbu-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --monatsbericht-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --org-handbuch-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --organigramm-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --projektradar-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --prueffristen-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --qualimatrix-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --routenplaner-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --todo-shell-sidebar-width: var(--hub-unified-sidebar-width);
  --zert-shell-sidebar-width: var(--hub-unified-sidebar-width);
  grid-template-columns: var(--hub-unified-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready[data-view] .topbar,
body.hub-shell-ready[data-view] .topbar.hub-shell-header,
body.hub-shell-ready:not([data-view]) .hub-shell-header {
  min-height: var(--hub-unified-header-height) !important;
  height: var(--hub-unified-header-height) !important;
  max-height: var(--hub-unified-header-height) !important;
  box-sizing: border-box !important;
  padding: clamp(7px, calc(9px * var(--hub-ui-scale, 1)), 11px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
  min-height: var(--hub-unified-nav-height) !important;
  padding: 5px 8px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  font-size: var(--hub-unified-nav-font) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item svg {
  width: var(--hub-unified-icon-size) !important;
  height: var(--hub-unified-icon-size) !important;
  flex: 0 0 var(--hub-unified-icon-size) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
  width: var(--hub-unified-sidebar-width) !important;
  min-width: var(--hub-unified-sidebar-width) !important;
  max-width: var(--hub-unified-sidebar-width) !important;
  padding: 8px !important;
}

body.hub-shell-ready[data-view] .sidebar .brand-logo {
  width: clamp(72px, calc(88px * var(--hub-ui-scale, 1)), 104px) !important;
  height: auto !important;
  max-height: clamp(72px, calc(88px * var(--hub-ui-scale, 1)), 104px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand-logo,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .app-brand-icon {
  width: clamp(44px, calc(48px * var(--hub-ui-scale, 1)), 54px) !important;
  height: clamp(44px, calc(48px * var(--hub-ui-scale, 1)), 54px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand strong {
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
  line-height: 1.08 !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand span {
  font-size: clamp(8px, calc(8.5px * var(--hub-ui-scale, 1)), 9.5px) !important;
  line-height: 1.1 !important;
}

body.hub-shell-ready .app-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--hub-unified-card-min), 1fr)) !important;
  gap: clamp(8px, calc(10px * var(--hub-ui-scale, 1)), 12px) !important;
}

body.hub-shell-ready .hub-app-card {
  min-height: clamp(88px, calc(108px * var(--hub-ui-scale, 1)), 124px) !important;
  padding: clamp(7px, calc(8px * var(--hub-ui-scale, 1)), 10px) !important;
}

body.hub-shell-ready .hub-app-card .app-logo {
  width: clamp(34px, calc(43px * var(--hub-ui-scale, 1)), 52px) !important;
  height: clamp(34px, calc(43px * var(--hub-ui-scale, 1)), 52px) !important;
}

body.hub-shell-ready .hub-app-card .app-title strong {
  font-size: clamp(9.5px, calc(10.5px * var(--hub-ui-scale, 1)), 11.5px) !important;
  line-height: 1.16 !important;
}

/* Hub icon clarity and dashboard tile readability 2026-06-30.
   This belongs in the final CSS layer so old app/page overrides cannot make
   the dashboard illegible again. It changes presentation only. */
body.hub-shell-ready[data-view] .sidebar .nav-item {
  font-weight: 780 !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon {
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 194, 71, 0.12), transparent 62%),
    rgba(245, 164, 0, 0.08) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 194, 71, 0.12),
    0 0 12px rgba(245, 164, 0, 0.12) !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon::after {
  content: none !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  opacity: 1 !important;
  -webkit-mask: var(--hub-nav-icon-mask) center / contain no-repeat;
  mask: var(--hub-nav-icon-mask) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 178, 31, 0.55));
}

body.hub-shell-ready[data-view] .sidebar .icon-dashboard {
  --hub-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

body.hub-shell-ready[data-view] .sidebar .icon-customers {
  --hub-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.8 19c.8-3.2 2.8-5 5.2-5s4.4 1.8 5.2 5'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M14.8 15.2c1.8.4 3.2 1.7 3.8 3.8'/%3E%3C/svg%3E");
}

body.hub-shell-ready[data-view] .sidebar .icon-backups {
  --hub-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M8 8V5h8v3'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3Cpath d='M18 5l2 2-2 2'/%3E%3C/svg%3E");
}

body.hub-shell-ready[data-view] .sidebar .icon-settings {
  --hub-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.6 3.1 3.4.6-2.4 2.4.6 3.4L12 10.9 8.8 12.5l.6-3.4L7 6.7l3.4-.6L12 3z'/%3E%3Ccircle cx='12' cy='16' r='4'/%3E%3Cpath d='M12 20v1.5M12 10.5V12M7.8 18.2l-1.1 1.1M17.3 19.3l-1.1-1.1'/%3E%3C/svg%3E");
}

body.hub-shell-ready[data-view] .sidebar .icon-legal {
  --hub-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v14H7z'/%3E%3Cpath d='M15 3v5h5'/%3E%3Cpath d='M10 12h6M10 16h6M10 20h4'/%3E%3C/svg%3E");
}

body.hub-shell-ready[data-view="dashboard"] .app-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(clamp(118px, calc(136px * var(--hub-ui-scale, 1)), 158px), 1fr)) !important;
  gap: clamp(9px, calc(11px * var(--hub-ui-scale, 1)), 13px) !important;
}

body.hub-shell-ready[data-view="dashboard"] .hub-app-card {
  min-height: clamp(108px, calc(126px * var(--hub-ui-scale, 1)), 146px) !important;
  aspect-ratio: 1.12 / 1 !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(6px, calc(8px * var(--hub-ui-scale, 1)), 10px) !important;
}

body.hub-shell-ready[data-view="dashboard"] .hub-app-card .app-logo {
  width: clamp(38px, calc(47px * var(--hub-ui-scale, 1)), 56px) !important;
  height: clamp(38px, calc(47px * var(--hub-ui-scale, 1)), 56px) !important;
  flex: 0 0 auto !important;
}

body.hub-shell-ready[data-view="dashboard"] .hub-app-card .app-title {
  display: grid !important;
  gap: 2px !important;
  width: min(100%, 132px) !important;
  min-width: 0 !important;
}

body.hub-shell-ready[data-view="dashboard"] .hub-app-card .app-title strong {
  display: -webkit-box !important;
  font-size: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px) !important;
  line-height: 1.14 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

body.hub-shell-ready[data-view="dashboard"] .hub-app-card .app-title span {
  display: -webkit-box !important;
  margin-top: 1px !important;
  color: rgba(255, 235, 195, 0.82) !important;
  font-size: clamp(8.5px, calc(9.4px * var(--hub-ui-scale, 1)), 10px) !important;
  line-height: 1.12 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* shell-layout-guard-20260701:
   Keep integrated app chrome in one grid contract. This file is loaded last,
   so the sidebar width, header/main column and customer picker stacking stay
   aligned even when an app shell still has older local sizing rules. */
body.hub-shell-ready:not([data-view]) {
  --hub-shell-final-sidebar-width: var(--hub-unified-sidebar-width, var(--hub-app-sidebar-width, 200px));
  grid-template-columns: var(--hub-shell-final-sidebar-width) minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  width: var(--hub-shell-final-sidebar-width) !important;
  min-width: var(--hub-shell-final-sidebar-width) !important;
  max-width: var(--hub-shell-final-sidebar-width) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 20 !important;
  overflow-x: hidden !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header,
body.hub-shell-ready:not([data-view]) main[class$="-shell-main"] {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header {
  z-index: 12 !important;
}

body.hub-shell-ready:not([data-view]) main[class$="-shell-main"] {
  z-index: 6 !important;
  overflow: visible !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row,
body.hub-shell-ready:not([data-view]) .hub-app-context-searchable {
  position: relative !important;
  z-index: 120 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body.hub-shell-ready:not([data-view]) .hub-customer-combobox {
  position: relative !important;
  z-index: 121 !important;
}

body.hub-shell-ready:not([data-view]) .hub-customer-results {
  z-index: 5000 !important;
}

body.hub-shell-ready:not([data-view]) [class$="-shell-frame-card"] {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.hub-shell-ready:not([data-view]) iframe[class$="-shell-frame"] {
  position: relative !important;
  z-index: 1 !important;
}

/* final-shell-uniformity-20260701:
   Last-resort chrome contract for Hub and integrated app shells. Keep this
   presentation-only so small app fixes cannot change sidebar/header scale. */
body.hub-shell-ready {
  --hub-unified-sidebar-width: clamp(188px, calc(200px * var(--hub-ui-scale, 1)), 216px);
  --hub-unified-header-height: clamp(72px, calc(82px * var(--hub-ui-scale, 1)), 94px);
  --hub-unified-nav-height: clamp(34px, calc(38px * var(--hub-ui-scale, 1)), 42px);
  --hub-unified-nav-font: clamp(10px, calc(11px * var(--hub-ui-scale, 1)), 12px);
  --hub-unified-icon-size: clamp(22px, calc(25px * var(--hub-ui-scale, 1)), 28px);
}

body.hub-shell-ready,
body.hub-shell-ready :is(.hub-shell-header, .hub-shell-navigation, [class$="-shell-main"]) {
  font-size: calc(13px * var(--hub-ui-scale, 1)) !important;
}

body.hub-shell-ready[data-view] .shell,
body.hub-shell-ready:not([data-view]) {
  grid-template-columns: var(--hub-unified-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready[data-view] .sidebar,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
  box-sizing: border-box !important;
  width: var(--hub-unified-sidebar-width) !important;
  min-width: var(--hub-unified-sidebar-width) !important;
  max-width: var(--hub-unified-sidebar-width) !important;
}

body.hub-shell-ready[data-view] .content,
body.hub-shell-ready[data-view] .hub-main,
body.hub-shell-ready[data-view] main,
body.hub-shell-ready:not([data-view]) .hub-shell-header,
body.hub-shell-ready:not([data-view]) main[class$="-shell-main"] {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.hub-shell-ready[data-view] .topbar,
body.hub-shell-ready[data-view] .topbar.hub-shell-header,
body.hub-shell-ready:not([data-view]) .hub-shell-header {
  min-height: var(--hub-unified-header-height) !important;
  height: var(--hub-unified-header-height) !important;
  max-height: var(--hub-unified-header-height) !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
  min-height: var(--hub-unified-nav-height) !important;
  font-size: var(--hub-unified-nav-font) !important;
}

body.hub-shell-ready[data-view] .sidebar .nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item svg {
  width: var(--hub-unified-icon-size) !important;
  height: var(--hub-unified-icon-size) !important;
  flex: 0 0 var(--hub-unified-icon-size) !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row,
body.hub-shell-ready:not([data-view]) .hub-app-context-searchable,
body.hub-shell-ready:not([data-view]) .hub-customer-combobox {
  z-index: 5000 !important;
}

/* customer-rail-layout-20260702:
   The searchable app customer picker has two rows: search/select and cards.
   Older compact shell rules forced the context row to ~54px, so the cards
   overlapped the app content below. Keep this override scoped to that picker. */
body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  height: auto !important;
  min-height: clamp(116px, calc(126px * var(--hub-ui-scale, 1)), 144px) !important;
  max-height: none !important;
  margin-bottom: 12px !important;
  padding: 10px 12px !important;
  overflow: visible !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable .hub-app-context-control {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 8px 10px !important;
  min-width: 0 !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable .hub-customer-card-rail {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 2px !important;
}

body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable .hub-app-context-summary {
  display: none !important;
}

/* app-sidebar-content-balance-20260702:
   Hub dashboard sizing is intentionally left untouched. Integrated apps need
   a slimmer navigation rail so the actual tool area stays usable on laptop and
   browser-window widths. Keep this as the last app-only shell contract. */
body.hub-shell-ready:not([data-view]) {
  --hub-app-compact-sidebar-width: clamp(132px, calc(152px * var(--hub-ui-scale, 1)), 168px);
  --hub-shell-final-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --hub-app-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --audit-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --arbeitsanweisung-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --begehung-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --gbu-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --monatsbericht-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --org-handbuch-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --organigramm-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --projektradar-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --prueffristen-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --qualimatrix-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --routenplaner-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --todo-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  --zert-shell-sidebar-width: var(--hub-app-compact-sidebar-width) !important;
  grid-template-columns: var(--hub-app-compact-sidebar-width) minmax(0, 1fr) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
  width: var(--hub-app-compact-sidebar-width) !important;
  min-width: var(--hub-app-compact-sidebar-width) !important;
  max-width: var(--hub-app-compact-sidebar-width) !important;
  padding: clamp(5px, calc(7px * var(--hub-ui-scale, 1)), 8px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand {
  min-height: auto !important;
  padding: clamp(7px, calc(9px * var(--hub-ui-scale, 1)), 10px) 6px !important;
  gap: 5px !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand-logo,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .app-brand-icon {
  width: clamp(40px, calc(48px * var(--hub-ui-scale, 1)), 56px) !important;
  height: clamp(40px, calc(48px * var(--hub-ui-scale, 1)), 56px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand strong {
  font-size: clamp(9px, calc(10px * var(--hub-ui-scale, 1)), 11px) !important;
  line-height: 1.12 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand span {
  font-size: clamp(7.5px, calc(8.2px * var(--hub-ui-scale, 1)), 9px) !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
  min-height: clamp(30px, calc(34px * var(--hub-ui-scale, 1)), 38px) !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  font-size: clamp(9px, calc(10px * var(--hub-ui-scale, 1)), 11px) !important;
  line-height: 1.12 !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item .icon,
body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item svg {
  width: clamp(18px, calc(21px * var(--hub-ui-scale, 1)), 24px) !important;
  height: clamp(18px, calc(21px * var(--hub-ui-scale, 1)), 24px) !important;
  flex-basis: clamp(18px, calc(21px * var(--hub-ui-scale, 1)), 24px) !important;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header,
body.hub-shell-ready:not([data-view]) main[class$="-shell-main"],
body.hub-shell-ready:not([data-view]) [class$="-shell-frame-card"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 980px) {
  body.hub-shell-ready:not([data-view]) {
    --hub-app-compact-sidebar-width: clamp(104px, 17vw, 128px);
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand-logo,
  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .app-brand-icon {
    width: 38px !important;
    height: 38px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
    padding-inline: 4px !important;
    gap: 4px !important;
    font-size: 8.8px !important;
  }
}

/* mobile-app-shell-20260713:
   Integrated apps use one full-width work surface on phones. The navigation
   becomes a horizontal touch rail; only the embedded app owns vertical
   scrolling. This block intentionally comes last because the desktop shell
   convergence rules above otherwise restore a narrow left rail on phones. */
@media screen and (max-width: 760px) {
  body.hub-shell-ready:not([data-view]) {
    --hub-app-compact-sidebar-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 62px auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: calc(100% - 12px) !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    margin: 6px 6px 0 !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .topbar-actions {
    right: 6px !important;
    bottom: 6px !important;
    max-width: calc(100% - 12px) !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .hub-back-button,
  body.hub-shell-ready:not([data-view]) .hub-shell-header #logoutButton {
    min-height: 40px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    max-height: 58px !important;
    padding: 5px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(245, 164, 0, 0.34) !important;
    scrollbar-width: thin !important;
    overscroll-behavior-x: contain !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .brand {
    display: none !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation nav,
  body.hub-shell-ready:not([data-view]) .hub-shell-navigation [class$="-shell-nav"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-shell-navigation nav[class$="-shell-nav"] {
    display: flex !important;
    grid-template-columns: none !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 104px !important;
    min-height: 42px !important;
    padding: 5px 9px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-shell-navigation nav[class$="-shell-nav"] > .hub-nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item .icon,
  body.hub-shell-ready:not([data-view]) .hub-shell-navigation .hub-nav-item svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body.hub-shell-ready:not([data-view]) main[class$="-shell-main"] {
    display: flex !important;
    flex-direction: column !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-app-context-row,
  body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 0 6px !important;
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    overflow: visible !important;
    flex: 0 0 48px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-app-context-row .hub-app-context-control,
  body.hub-shell-ready:not([data-view]) .hub-app-context-row.hub-app-context-searchable .hub-app-context-control {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-app-context-kicker {
    flex: 0 0 auto !important;
    font-size: 9px !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-customer-combobox,
  body.hub-shell-ready:not([data-view]) .hub-app-context-row select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-app-context-row .hub-customer-card-rail,
  body.hub-shell-ready:not([data-view]) .hub-app-context-row .hub-app-context-summary {
    display: none !important;
  }

  body.hub-shell-ready:not([data-view]) [class$="-shell-frame-card"] {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }

  body.hub-shell-ready:not([data-view]) [class$="-shell-frame-card"] > iframe[class$="-shell-frame"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border: 0 !important;
  }

  html body.hub-shell-ready:not([data-view]) main[class$="-shell-main"] [class$="-shell-frame-card"] > iframe[class$="-shell-frame"] {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    transform: none !important;
    transform-origin: center !important;
  }
}

/* hub-mobile-root-workspace-20260714
   Root Hub only. Integrated app wrappers intentionally have no data-view. */
@media screen and (max-width: 760px) {
  html body.hub-shell-ready[data-view] .shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
  }

  html body.hub-shell-ready[data-view] .sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    inset: 0 0 auto !important;
    z-index: 100 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid rgba(245, 164, 0, 0.42) !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .brand,
  html body.hub-shell-ready[data-view] .sidebar .runtime-status,
  html body.hub-shell-ready[data-view] .sidebar .sidebar-info,
  html body.hub-shell-ready[data-view] .sidebar > .sidebar-customer-picker {
    display: none !important;
  }

  html body.hub-shell-ready[data-view] .sidebar nav {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 44px !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item {
    display: grid !important;
    grid-template-columns: 24px auto !important;
    flex: 0 0 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 9px !important;
    gap: 7px !important;
    border: 1px solid rgba(245, 164, 0, 0.2) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item.active {
    border-color: rgba(245, 164, 0, 0.72) !important;
    background: rgba(245, 164, 0, 0.18) !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item .icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item span:last-child {
    display: block !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  html body.hub-shell-ready[data-view] .content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100dvh - 56px) !important;
    padding: 8px !important;
  }

  html body.hub-shell-ready[data-view] .topbar,
  html body.hub-shell-ready[data-view] .topbar.hub-shell-header {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    margin: 0 0 8px !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
  }

  html body.hub-shell-ready[data-view] .topbar-actions {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  html body.hub-shell-ready[data-view] .topbar-actions > * {
    min-width: 0 !important;
    font-size: 10px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.sidebar-customer-picker {
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 7px !important;
  }

  html body.hub-shell-ready[data-view="dashboard"] #dashboardView {
    width: 100% !important;
    padding: 8px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: 34px 48px !important;
    gap: 6px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: center !important;
    height: 34px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 34px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-list {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context .customer-item {
    flex: 0 0 min(82vw, 292px) !important;
    min-height: 46px !important;
    height: 46px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 4px 7px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context .customer-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  html body.hub-shell-ready[data-view] .app-tile-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body.hub-shell-ready[data-view] .app-row.hub-app-card,
  html body.hub-shell-ready[data-view] .hub-app-card {
    width: 100% !important;
    min-height: 96px !important;
    height: 96px !important;
    aspect-ratio: auto !important;
    padding: 7px !important;
    gap: 5px !important;
    border-radius: 7px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-logo {
    width: 36px !important;
    height: 36px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title {
    gap: 2px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title strong {
    font-size: 11px !important;
    line-height: 1.14 !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title span {
    font-size: 9px !important;
    line-height: 1.12 !important;
    -webkit-line-clamp: 1 !important;
  }
}

body.hub-shell-ready .hub-app-context-row[hidden] {
  display: none !important;
}

/* Mobile Hub workflow: customer context first, apps always one clear tap away. */
@media (max-width: 760px) {
  html body.hub-shell-ready[data-view] .sidebar {
    overflow: hidden !important;
  }

  html body.hub-shell-ready[data-view] .sidebar nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 19px 12px !important;
    justify-items: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 3px 2px !important;
    gap: 3px !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item .icon {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }

  html body.hub-shell-ready[data-view] .sidebar .nav-item span:last-child {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    font-size: 9px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.sidebar-customer-picker {
    padding: 6px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 46px !important;
    gap: 6px !important;
  }

  html body.hub-shell-ready[data-view] .mobile-customer-picker-toggle {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 112px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid rgba(245, 164, 0, 0.72) !important;
    border-radius: 6px !important;
    background: #181713 !important;
    color: #fff6dc !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html body.hub-shell-ready[data-view] .mobile-customer-picker-chevron {
    font-size: 17px !important;
    line-height: 1 !important;
    transition: transform 160ms ease !important;
  }

  html body.hub-shell-ready[data-view] .is-mobile-expanded .mobile-customer-picker-chevron {
    transform: rotate(180deg) !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-head,
  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-search {
    display: none !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-picker-tools .sidebar-customer-list {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    min-height: 46px !important;
    max-height: 46px !important;
    overflow: hidden !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context .customer-item {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 4px 7px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.has-mobile-customer:not(.is-mobile-expanded) .customer-item:not(.active) {
    display: none !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context:not(.has-mobile-customer):not(.is-mobile-expanded) .sidebar-customer-list {
    display: grid !important;
    place-items: center !important;
    border: 1px dashed rgba(245, 164, 0, 0.42) !important;
    border-radius: 6px !important;
    color: #e8dfca !important;
    font-size: 12px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context:not(.has-mobile-customer):not(.is-mobile-expanded) .sidebar-customer-list::before {
    content: "Noch kein Kunde ausgewählt" !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context:not(.has-mobile-customer):not(.is-mobile-expanded) .customer-item,
  html body.hub-shell-ready[data-view] .hub-customer-context:not(.has-mobile-customer):not(.is-mobile-expanded) .sidebar-customer-empty {
    display: none !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.is-mobile-expanded .hub-customer-picker-tools {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px 44px minmax(46px, auto) !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.is-mobile-expanded .mobile-customer-picker-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.is-mobile-expanded .sidebar-customer-search {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 44px !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.is-mobile-expanded .sidebar-customer-list {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-height: 46px !important;
    max-height: min(46dvh, 380px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    align-items: flex-start !important;
  }

  html body.hub-shell-ready[data-view] .hub-customer-context.is-mobile-expanded .customer-item {
    display: grid !important;
    flex: 0 0 58px !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.hub-shell-ready[data-view] .app-tile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body.hub-shell-ready[data-view] .app-row.hub-app-card,
  html body.hub-shell-ready[data-view] .hub-app-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 24px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 72px !important;
    height: 72px !important;
    padding: 9px 10px !important;
    gap: 10px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card::after {
    content: ">" !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    color: #f5a400 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 4px !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title strong {
    display: -webkit-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .app-title span {
    display: -webkit-box !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 1 !important;
  }

  html body.hub-shell-ready[data-view] .hub-app-card .tag-strip,
  html body.hub-shell-ready[data-view] .hub-app-card .state,
  html body.hub-shell-ready[data-view] .hub-app-card .row-actions {
    display: none !important;
  }

  html body.hub-shell-ready[data-view="customers"] .customer-editor-card {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  html body.hub-shell-ready[data-view="customers"] .customer-editor-logo {
    width: 52px !important;
    height: 52px !important;
  }

  html body.hub-shell-ready[data-view="customers"] .customer-editor-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  html body.hub-shell-ready[data-view="customers"] .customer-editor-actions button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  html body.hub-shell-ready[data-view="customers"] .customer-apps-button {
    background: #f5a400 !important;
    color: #111 !important;
    border-color: #ffc54b !important;
  }
}

/* Customer-bound app shells: one compact mobile context row without overlap. */
@media (max-width: 760px) {
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 62px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-app-context-logo,
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-app-context-control,
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-app-context-summary,
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-app-context-native-select,
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-customer-combobox,
  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked > .hub-customer-card-rail {
    display: none !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-context {
    position: static !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 102px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    gap: 7px !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-logo {
    grid-column: 1 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 7px !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-kicker {
    display: none !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-copy strong {
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-locked-copy small {
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.hub-shell-ready:not([data-view]) .hub-app-context-row.is-customer-locked .hub-customer-change-btn {
    grid-column: 3 !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}