/* Custom components and layout bridges */

/* ZIQAVO brand lockup: vector mark + wordmark from public/images/brand (the sidebar is always dark,
   so it uses the -dark variants). */
.brand__mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.user-chip__avatar {
  display: grid;
  width: 2.125rem;
  height: 2.125rem;
  color: light-dark(#44615c, #cfe3dd);
  background: light-dark(#e9efec, #24363c);
  border: 0;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  place-items: center;
}

/* One shared shell for public and authenticated routes. */

.app-body {
  --bs-primary-base: var(--color-brand);
  --bs-primary-bg: var(--color-brand);
  --bs-primary-fg: var(--color-brand-text);
  --bs-primary-bg-subtle: var(--color-brand-soft);
  --bs-primary-bg-muted: var(--color-brand-muted);
  --bs-primary-border: var(--color-brand-border);
  --bs-primary-contrast: var(--color-on-brand);
  --bs-primary-focus-ring: rgb(20 125 112 / 35%);
  --bs-fg-body: light-dark(#172e38, #e5ecef);
  --bs-fg-2: light-dark(#6b7a83, #9fb0b7);
  --bs-border-color: light-dark(#e4eae7, #2a3b44);
  --bs-bg-body: var(--color-surface);

  /* Shared shape and depth scale, aligned with the SCORE prototype: restrained corners
     (5px controls, 9px surfaces), fine lines and very soft shadows. */
  --radius-sm: 0.3125rem;
  --radius-md: 0.4375rem;
  --radius-lg: 0.5625rem;
  --radius-xl: 0.75rem;
  --surface-border: light-dark(#e5e9e9, #26363f);
  --surface-shadow:
    0 1px 2px light-dark(rgb(23 46 56 / 3%), rgb(0 0 0 / 25%)),
    0 3px 15px light-dark(rgb(23 51 60 / 3%), rgb(0 0 0 / 25%));
  --surface-shadow-hover:
    0 2px 4px light-dark(rgb(23 46 56 / 5%), rgb(0 0 0 / 30%)),
    0 10px 24px light-dark(rgb(23 46 56 / 7%), rgb(0 0 0 / 40%));
  --focus-ring: 0 0 0 3px rgb(20 125 112 / 28%);

  /* Typography scale of the prototype: medium-weight Manrope headings, compact UI text. */
  --bs-heading-font-weight: 500;
  --bs-font-size-3xl: clamp(1.75rem, 1.45rem + 0.9vw, 1.95rem);
  --bs-font-size-2xl: clamp(1.35rem, 1.2rem + 0.5vw, 1.5rem);
  --bs-font-size-xl: clamp(1.15rem, 1.05rem + 0.35vw, 1.25rem);
  --bs-font-size-lg: 1.0625rem;

  --bs-btn-input-min-height: 2.75rem;
  --bs-btn-input-padding-x: 1rem;
  --bs-btn-input-font-size: 0.9rem;
  --bs-btn-input-border-radius: 0.6rem;
  --bs-btn-input-sm-min-height: 2.125rem;
  --bs-btn-input-sm-padding-x: 0.75rem;
  --bs-btn-input-sm-font-size: 0.85rem;
  --bs-btn-input-sm-border-radius: var(--radius-sm);
  color: var(--bs-fg-body);
  background: var(--color-canvas);
}

.app-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100dvh;
}

.app-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  align-self: start;
  padding: 1.95rem 0.95rem 1.15rem;
  overflow-x: hidden;
  overflow-y: auto;
  color: #d2dcdf;
  background: #152d37;
  /* The sidebar stays dark in both themes; in dark mode a fine line separates it from the canvas. */
  border-right: 1px solid light-dark(transparent, #26363f);
  scrollbar-color: #587981 #152d37;
  scrollbar-width: thin;
}

.app-sidebar::-webkit-scrollbar {
  width: 0.6rem;
}

.app-sidebar::-webkit-scrollbar-track {
  background: #152d37;
}

.app-sidebar::-webkit-scrollbar-thumb {
  background: #587981;
  border: 2px solid #152d37;
  border-radius: 999px;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: #8dbdb0;
}

/* The brand row spans the same height as the header (min-height 4.75rem, content centred), starting
   at the very top of the sidebar, so the logo lines up with the breadcrumb ("Übersicht"). */
.app-sidebar .brand {
  min-height: 4.75rem;
  margin-top: -1.95rem;
  color: #fff;
  align-self: center;
  justify-content: center;
}

.app-sidebar .nav-link {
  position: relative;
  display: flex;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.375rem;
  color: #b9cbd0;
  font-size: 0.875rem;
  font-weight: 450;
  line-height: 1.3;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  text-decoration: none;
}

/* Long labels wrap instead of widening the sidebar column. */
.app-sidebar__navigation,
.app-nav-group,
.app-nav-module {
  grid-template-columns: minmax(0, 1fr);
}

.app-sidebar .nav-link,
.app-nav-module__title {
  white-space: normal;
}

/* Sections: small uppercase headings like the prototype, no separator lines. */
.app-nav-group {
  display: grid;
  gap: 0.125rem;
  margin-top: 1.1rem;
}

.app-nav-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 0 0 0.25rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0.35rem;
  color: #7f98a2;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  list-style: none;
}

.app-nav-group__title::-webkit-details-marker,
.app-nav-module__title::-webkit-details-marker {
  display: none;
}

/* Drawn chevron: points down when open, right when collapsed. */
.app-nav-group__title::after,
.app-nav-module__title::after {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 160ms ease;
}

.app-nav-group:not([open]) > .app-nav-group__title::after,
.app-nav-module:not([open]) > .app-nav-module__title::after {
  transform: rotate(-45deg);
}

.app-nav-module {
  display: grid;
  gap: 0.125rem;
}

/* Modules with several entries: same look as a link, entries indented on a guide line. */
.app-nav-module__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  cursor: pointer;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.375rem;
  color: #b9cbd0;
  font-size: 0.875rem;
  font-weight: 450;
  line-height: 1.3;
  list-style: none;
}

.app-nav-module__label {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.app-nav-module__title--active {
  color: #e6f6f0;
}

.app-nav-module__title--active .app-nav-link__icon {
  color: #8dbdb0;
}

.app-nav-group__title:hover,
.app-nav-module__title:hover {
  color: #daf3ea;
  background: rgb(255 255 255 / 6%);
}

.app-nav-module:not(.app-nav-module--single) > .nav-link {
  min-height: 2.25rem;
  margin-left: 1.25rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0 0.375rem 0.375rem 0;
  box-shadow: inset 1px 0 0 rgb(210 220 223 / 16%);
  font-size: 0.84rem;
}

.app-sidebar .app-nav-link__icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  color: #8fa9b1;
  transition: color 0.15s ease;
}

.app-sidebar .app-nav-link__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app-sidebar .nav-link > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.app-sidebar .nav-link:hover .app-nav-link__icon,
.app-nav-module__title:hover .app-nav-link__icon {
  color: #b9d6c9;
}

.app-sidebar [hidden] {
  display: none !important;
}

/* Tenant tile with initials, as in the prototype. */
.app-sidebar__workspace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  color: #e6f0f2;
  border: 1px solid #2f4a55;
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 3%);
  font-size: 0.85rem;
}

.app-sidebar__workspace-mark {
  display: inline-flex;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  color: #dafff2;
  background: #2b4b51;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-sidebar__workspace-text {
  min-width: 0;
}

.app-sidebar__workspace-label {
  display: block;
  margin-bottom: 0.1rem;
  color: #7f98a2;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-sidebar__workspace-slug {
  display: block;
  color: #8fa9b1;
  font-size: 0.75rem;
}

.app-sidebar .nav-link:hover {
  color: #daf3ea;
  background: rgb(255 255 255 / 6%);
}

/* Active entry: tinted surface plus accent bar on the left. */
.app-sidebar .nav-link[aria-current="page"] {
  color: #e9fff7;
  background: rgb(141 189 176 / 16%);
  box-shadow: inset 3px 0 0 #8dbdb0;
}

.app-sidebar .nav-link[aria-current="page"] .app-nav-link__icon {
  color: #8dbdb0;
}

.app-sidebar .nav-link:focus-visible,
.app-nav-group__title:focus-visible,
.app-nav-module__title:focus-visible {
  outline: 2px solid #8dbdb0;
  outline-offset: 2px;
}

.app-main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-main > main {
  flex: 1;
}

.app-header {
  min-height: 4.75rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--surface-border);
}

.app-header form {
  margin: 0;
}

.app-header__start {
  min-width: 0;
}

.app-header__start .breadcrumb {
  flex-wrap: wrap;
}

.app-header__end {
  flex-shrink: 0;
}

.user-chip {
  color: var(--color-ink-soft);
}

.user-chip:hover {
  color: var(--color-ink);
}

.app-header .btn-text {
  color: var(--color-muted);
  font-size: 0.825rem;
}

.user-chip__name {
  overflow: hidden;
  max-width: 14rem;
  font-size: 0.825rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Content uses the full width beside the sidebar; only extreme screens are capped so lines and
   tables stay scannable. Paragraph-like blocks limit their own measure (section headers, leads). */

.app-content {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2.25rem);
}

/* Pages wrap their content in `.container` (guideline pattern); inside the shell the host already
   limits width and padding, so Bootstrap's fixed container steps would only waste space. */

.app-content .container {
  max-width: none;
  padding-inline: 0;
}

.auth-surface {
  width: 100%;
  max-width: 42rem;
  margin: 1.5rem auto;
}

.app-sidebar[hidden] {
  display: none;
}

.app-body--sidebar-collapsed .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 52rem) {
  .app-shell {
    display: flex;
    flex-direction: column;
  }

  .app-main {
    flex: 1;
    min-height: 0;
  }

  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 1rem;
  }

  /* Stacked above the header on small screens: no header alignment. */
  .app-sidebar .brand {
    min-height: 0;
    margin-top: 0;
  }

  .app-sidebar nav {
    display: flex !important;
    flex-wrap: wrap;
  }

  .app-sidebar nav > .app-nav-group {
    flex: 1 0 100%;
  }

  .app-sidebar > .mt-auto {
    display: none;
  }
}

/* Shared layout styles stay external to satisfy style-src self. */

.brand__wordmark {
  display: block;
  width: auto;
  height: 1.15rem;
  margin-top: 0.15rem;
}

/* Footer: branded wordmark centred, build info right. The footer follows the theme, so the light or
   dark wordmark is shown accordingly. */
.app-footer {
  display: grid;
  min-height: 3.5rem;
  font-size: 0.72rem;
  background: var(--color-surface);
  border-top-color: var(--surface-border) !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.app-footer__brand {
  display: flex;
  grid-column: 2;
}

.app-footer__wordmark {
  display: block;
  width: auto;
  height: 0.85rem;
}

.app-footer__wordmark--dark,
[data-bs-theme="dark"] .app-footer__wordmark--light {
  display: none;
}

[data-bs-theme="dark"] .app-footer__wordmark--dark {
  display: block;
}

.app-footer__build {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}

@media (max-width: 36rem) {
  .app-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.25rem;
  }

  .app-footer__brand,
  .app-footer__build {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 36rem) {
  /* Avatar and the profile link's aria-label remain; the name would push "Abmelden" off-screen. */

  .user-chip__name {
    display: none;
  }

  /* Phones: only the current page stays in the breadcrumb so it never runs under the header
     controls (theme switch, review mode, avatar). */
  .app-header__start .breadcrumb-item:not(:last-child),
  .app-header__start .breadcrumb-divider {
    display: none;
  }

  .app-header__start .breadcrumb-link {
    overflow-wrap: anywhere;
  }
}