/* Shared image fitting for integrated app headers.
   Header geometry stays owned by the Hub shell; artwork keeps its proportions. */
body.hub-shell-ready:not([data-view]) .hub-shell-header {
  background-size:
    100% 100%,
    100% 100%,
    var(--hub-app-header-image-size, cover) !important;
  background-position:
    center,
    center,
    var(--hub-app-header-image-position, center) !important;
  background-repeat: no-repeat !important;
}

/* On extremely wide desktops the artwork keeps its proportions and receives
   a calm extension instead of stretching embedded logos and text. Header
   height and spacing remain owned by the Hub shell. */
html body.hub-shell-ready[data-view] .topbar.hub-shell-header {
  background-repeat: no-repeat !important;
}

html body.hub-shell-ready .topbar.hub-shell-header[data-hub-header-fit-mode="framed"] {
  background-color: #c8d6de !important;
}

html body.hub-shell-ready[data-view] .topbar.hub-shell-header[data-hub-header-fit-mode="framed"] {
  background-size:
    100% 100%,
    100% 100%,
    var(--hub-dashboard-header-image-size, 100% 100%) !important;
  background-position:
    center,
    center,
    var(--hub-dashboard-header-image-position, center) !important;
  background-repeat: no-repeat !important;
}

/* Keep the quota available without covering the title embedded in the banner. */
body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  width: 112px;
  min-height: 32px;
  padding: 3px 6px 5px 4px;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__icon {
  width: 24px;
  height: 22px;
  font-size: 9px;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__copy small,
body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__copy [data-ai-usage-full] {
  display: none;
}

body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__copy [data-ai-usage-mobile] {
  display: inline;
}

@media (max-width: 760px) {
  body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger {
    grid-template-columns: 1fr;
    width: 38px;
    min-width: 38px;
    padding-inline: 6px;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__copy {
    display: none;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .ai-usage-trigger__icon {
    justify-self: center;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .hub-back-button {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: 0 !important;
  }

  body.hub-shell-ready:not([data-view]) .hub-shell-header .hub-back-button::before {
    margin: 0;
    font-size: 18px;
  }
}

/* Clean integrated app header. App artwork remains available for reports and
   branding settings, but no longer consumes workspace height in the UI. */
@media screen {
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header {
    min-height: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    margin: 8px 10px 8px 0 !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    align-items: center !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 8px !important;
    background: #11161e !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header::before,
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header::after {
    display: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .topbar-actions {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    transform: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .hub-back-button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 7px !important;
    background: #1a212b !important;
    color: #f8fafc !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .hub-back-button:hover {
    border-color: rgba(245, 164, 0, 0.72) !important;
    background: #222a36 !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation {
    border-right: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: #0b1118 !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation > .brand {
    padding: 10px 6px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(245, 164, 0, 0.36) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .brand-logo {
    width: 44px !important;
    height: 44px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .app-brand-icon svg {
    width: 40px !important;
    height: 40px !important;
    filter: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .hub-nav-item {
    min-height: 38px !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .hub-nav-item:hover {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: #141b24 !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .hub-nav-item.active {
    border-color: rgba(79, 142, 232, 0.38) !important;
    background: #182230 !important;
  }
}

@media screen and (max-width: 760px) {
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header {
    margin: 6px !important;
    padding: 6px 8px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .topbar-actions {
    gap: 5px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .hub-back-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-header .hub-back-button::before {
    margin: 0 !important;
    font-size: 18px !important;
  }
}

/* Between tablet and full desktop the shell still owns a left navigation
   rail. App-local tablet rules must not turn that narrow rail into a
   multi-column menu. */
@media screen and (min-width: 761px) and (max-width: 920px) {
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation nav,
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation [class$="-shell-nav"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 3px !important;
    margin: 5px 0 0 !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .hub-nav-item,
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation nav[class$="-shell-nav"] > .hub-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
    padding: 4px 6px !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }
}

/* Auf niedrigen Desktop-Fenstern muss die komplette Fachnavigation sichtbar
   bleiben. Die kompaktere Geometrie aendert weder Reihenfolge noch Funktion. */
@media screen and (min-width: 921px) and (max-height: 700px) {
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation {
    padding: 5px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation > .brand {
    min-height: 62px !important;
    padding: 5px 4px 7px !important;
    gap: 2px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .app-brand-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation nav,
  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation [class$="-shell-nav"] {
    gap: 2px !important;
    margin-top: 5px !important;
  }

  html body.hub-shell-ready:not([data-view]):not(.print-mode) .hub-shell-navigation .hub-nav-item {
    min-height: 34px !important;
    padding: 3px 6px !important;
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

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

/* Integrated apps follow the browser page instead of trapping the user in a
   second, fixed-height scroll area. Dialogs may still own their local scroll. */
html[data-app-frame-flow="page"],
html[data-app-frame-flow="page"] body[data-app-frame-flow="page"] {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html[data-app-frame-flow="page"] body[data-app-frame-flow="page"] {
  min-height: 100dvh !important;
  align-content: start !important;
}

body[data-app-frame-flow="page"] [class$="-shell-main"] {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-app-frame-flow="page"] [class$="-shell-frame-card"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-app-frame-flow="page"] iframe[class*="-shell-frame"] {
  display: block !important;
  width: 100% !important;
  height: var(--app-frame-content-height, 640px) !important;
  min-height: min(640px, calc(100dvh - 96px)) !important;
  max-height: none !important;
  overflow: hidden !important;
}

@media screen and (min-width: 921px) {
  body[data-app-frame-flow="page"] .hub-shell-navigation {
    align-self: stretch !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
  }
}