/**
 * Intranet Shell - Trialog Intranet Design
 * Ported from the approved intranet.html design prototype (repo root).
 * All classes and custom properties carry the `in-` prefix so the shell can
 * coexist with the legacy screen stylesheets (.sidebar, .nav-item, .card and
 * friends are already taken by layout.css / components.css).
 * The shell is mounted once by src/main.js; screens render into .in-page.
 */

:root {
  --in-navy-900: #0d1a38;
  --in-navy-800: #132548;
  --in-navy-700: #1b3160;
  --in-navy-600: #26417d;
  --in-navy-500: #33559b;
  --in-blue-500: #3b6fd4;
  --in-blue-400: #5b8ae6;
  --in-blue-100: #e7effb;
  --in-blue-50: #f2f7fd;
  --in-gold: #c9a24b;
  --in-gold-soft: #f3ead4;
  --in-green: #2f9e6b;
  --in-green-soft: #e4f5ec;
  --in-red: #d1495b;
  --in-amber: #e0a43b;
  --in-amber-soft: #fcf1dc;
  --in-purple: #7a5cc9;
  --in-purple-soft: #efeafb;
  --in-teal: #0e9488;
  --in-teal-soft: #dcf3f0;
  --in-ink-900: #141b2b;
  --in-ink-700: #3a4459;
  --in-ink-500: #697389;
  --in-ink-400: #8b93a5;
  --in-line: #e5e9f0;
  --in-line-soft: #eef1f6;
  --in-bg: #f4f6fb;
  --in-card: #ffffff;
  --in-radius: 16px;
  --in-radius-sm: 11px;
  --in-shadow-sm: 0 1px 2px rgba(19, 37, 72, 0.06), 0 1px 3px rgba(19, 37, 72, 0.05);
  --in-shadow-md: 0 6px 20px rgba(19, 37, 72, 0.09);
  --in-shadow-lg: 0 18px 46px rgba(19, 37, 72, 0.16);
  --in-sidebar-w: 264px;
  --in-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --in-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia,
    "Times New Roman", serif;
}

/* ========================================
   APP FRAME
   ======================================== */

.in-app {
  display: flex;
  height: 100vh;
  background: var(--in-bg);
  font-family: var(--in-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--in-ink-900);
  -webkit-font-smoothing: antialiased;
}

/* Element resets stay scoped to the shell's own components - a bare
   `.in-app button` would outrank the legacy screens' .btn classes. */
.in-nav-item,
.in-qa,
.in-side-user {
  color: inherit;
  text-decoration: none;
}

.in-hamburger,
.in-side-user {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.in-nav-item:focus-visible,
.in-qa:focus-visible,
.in-hamburger:focus-visible {
  outline: 2.5px solid var(--in-blue-500);
  outline-offset: 2px;
  border-radius: 9px;
}

.in-nav-item:focus-visible,
.in-side-user:focus-visible {
  outline-color: #9fc0ff;
  outline-offset: -2px;
}

.in-scroll::-webkit-scrollbar,
.in-search-panel::-webkit-scrollbar,
.in-invite-dialog--wide::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.in-scroll::-webkit-scrollbar-thumb,
.in-search-panel::-webkit-scrollbar-thumb,
.in-invite-dialog--wide::-webkit-scrollbar-thumb {
  background: #cdd5e2;
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.in-scroll::-webkit-scrollbar-thumb:hover,
.in-search-panel::-webkit-scrollbar-thumb:hover,
.in-invite-dialog--wide::-webkit-scrollbar-thumb:hover {
  background: #b6c0d2;
  background-clip: padding-box;
}

.in-scroll,
.in-search-panel,
.in-invite-dialog--wide {
  scrollbar-width: thin;
  scrollbar-color: #cdd5e2 transparent;
}

/* The dark sidebar needs a matching dark thumb. */
.in-sidebar.in-scroll::-webkit-scrollbar-thumb,
.in-nav.in-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
}

.in-sidebar.in-scroll::-webkit-scrollbar-thumb:hover,
.in-nav.in-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}

.in-sidebar.in-scroll,
.in-nav.in-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .in-app *,
  .in-sidebar,
  .in-overlay,
  .in-toast,
  .in-toast-ic,
  .in-offline-banner,
  .in-invite-overlay,
  .in-invite-dialog,
  .in-search-panel {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Der Universalselektor oben erfasst KEINE Pseudo-Elemente - der Lichtpuls
     unter der Wortmarke liefe sonst weiter. Er wird hier ganz angehalten und
     auf den ruhenden Goldstrich zurueckgesetzt; der Schein entfaellt. */
  .in-brand::after {
    animation: none !important;
    background-position: 200% 0, 0 0;
    box-shadow: none;
    opacity: 0.85;
    transform: translateX(-50%);
  }

  .in-brand::before {
    animation: none !important;
    opacity: 0;
  }
}

/* ========================================
   SIDEBAR
   ======================================== */

.in-sidebar {
  width: var(--in-sidebar-w);
  background: linear-gradient(180deg, var(--in-navy-800), var(--in-navy-900));
  color: #dfe6f2;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  z-index: 60;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.in-brand {
  padding: 26px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
}

/* ----------------------------------------------------------------------
   GOLDENER LICHTPULS unter der Wortmarke - die Signatur des Hauses.
   ----------------------------------------------------------------------
   Ein Zyklus, kein Blinken: Der Strich laedt sich auf, ein helles Licht
   wandert einmal hindurch, dann klingt er ab und RUHT mehrere Sekunden.
   Die Pause ist der eigentliche Grund, warum das hochwertig wirkt - ein
   Element, das ununterbrochen pulsiert, liest sich als Warnung.

   Aufgeteilt auf zwei Ebenen, damit echtes Licht entsteht und nicht nur ein
   heller Balken:
     ::before  weicher Schein, der in die Flaeche ausstrahlt
     ::after   der Strich selbst, durch den das Licht laeuft

   Beide teilen dieselbe Dauer und denselben Versatz, damit Schein und
   Lichtwanderung als EIN Vorgang gelesen werden.

   Der Lauf entsteht ueber background-position auf einer zweiten
   Farbebene - kein wanderndes Kindelement, das man erst wieder
   zurechtschneiden muesste, und die Ebene laesst sich weich auslaufen. */

.in-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  /* Obere Ebene: der wandernde Lichtkern. Untere: der ruhende Goldverlauf.
     Der Kern hat VIELE Stuetzstellen statt der ueblichen drei - ein
     dreistufiger Verlauf faellt linear ab und bekommt dadurch sichtbare
     Kanten. Die Abstufung hier ahmt einen weichen Lichtabfall nach, sodass
     nirgends eine Grenze zu erkennen ist. */
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 250, 238, 0) 26%,
      rgba(255, 250, 238, 0.06) 33%,
      rgba(255, 250, 238, 0.22) 39%,
      rgba(255, 250, 238, 0.55) 45%,
      rgba(255, 252, 244, 0.92) 50%,
      rgba(255, 250, 238, 0.55) 55%,
      rgba(255, 250, 238, 0.22) 61%,
      rgba(255, 250, 238, 0.06) 67%,
      rgba(255, 250, 238, 0) 74%
    ),
    linear-gradient(90deg, transparent, var(--in-gold), transparent);
  background-size: 220% 100%, 100% 100%;
  background-position: -130% 0, 0 0;
  background-repeat: no-repeat;
  /* ENTSCHEIDEND fuer den weichen Ein- und Auslauf: Ohne Maske trifft der
     Lichtkern die harte Kante des Strichs und erscheint dort schlagartig -
     man sieht genau, wo er anfaengt und aufhoert. Die Maske blendet beide
     Ebenen zu den Enden hin aus, sodass das Licht aus dem Nichts kommt und
     ins Nichts geht. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 26%,
    #000 74%,
    rgba(0, 0, 0, 0.35) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 8%,
    #000 26%,
    #000 74%,
    rgba(0, 0, 0, 0.35) 92%,
    transparent 100%
  );
  transform: translateX(-50%);
  opacity: 0.85;
  animation: in-brand-lichtpuls 7.2s cubic-bezier(0.37, 0, 0.28, 1) infinite;
  will-change: background-position, box-shadow, transform;
}

/* Der Schein hinter dem Strich. Liegt bewusst UNTER der Wortmarke (z-index 0
   gegen den Text) und traegt keine eigene Farbe ins Layout - er verschwindet
   in der Ruhephase vollstaendig. */
.in-brand::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 132px;
  height: 15px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(201, 162, 75, 0.5) 0%,
    rgba(201, 162, 75, 0.16) 42%,
    rgba(201, 162, 75, 0) 72%
  );
  opacity: 0;
  animation: in-brand-schein 7.2s cubic-bezier(0.37, 0, 0.28, 1) infinite;
}

/* Der Strich: das Licht zieht von 0 bis 46 % in EINEM Zug hindurch, danach
   klingt der Schimmer aus, ab 62 % liegt der Strich still.

   background-position steht bewusst nur an den beiden Enden dieses Zugs.
   Wuerde die Eigenschaft auch in den Zwischenschritten gesetzt, liefe die
   Beschleunigungskurve mehrfach hintereinander an - das Licht wuerde auf
   halber Strecke bremsen und wieder anziehen. Genau daher ruehrt der
   abgehackte Eindruck. So bleibt es ein einziger, durchgehender Zug.

   Die minimale Dehnung ueber scaleX laesst den Strich atmen, ohne dass sich
   das Layout bewegt. */
@keyframes in-brand-lichtpuls {
  0% {
    background-position: -130% 0, 0 0;
    box-shadow: 0 0 4px rgba(201, 162, 75, 0.14);
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
  16% {
    box-shadow: 0 0 10px rgba(201, 162, 75, 0.34);
    opacity: 0.9;
    transform: translateX(-50%) scaleX(1.04);
  }
  30% {
    box-shadow:
      0 0 20px rgba(201, 162, 75, 0.6),
      0 0 36px rgba(201, 162, 75, 0.19);
    opacity: 1;
    transform: translateX(-50%) scaleX(1.09);
  }
  46% {
    background-position: 230% 0, 0 0;
    box-shadow: 0 0 14px rgba(201, 162, 75, 0.42);
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1.04);
  }
  62%,
  100% {
    background-position: 230% 0, 0 0;
    box-shadow: 0 0 4px rgba(201, 162, 75, 0.14);
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
}

/* Der Schein laeuft dem Strich einen Hauch nach - Licht breitet sich aus,
   es erscheint nicht gleichzeitig. Genau diese Verzoegerung nimmt dem
   Vorgang das Mechanische. */
@keyframes in-brand-schein {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.82);
  }
  20% {
    opacity: 0.32;
  }
  34% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.06);
  }
  52% {
    opacity: 0.28;
  }
  66%,
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.82);
  }
}

.in-brand .in-brand-mark {
  font-family: var(--in-serif);
  font-size: 26px;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 600;
  line-height: 1;
}

.in-brand .in-brand-sub {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  color: #8fa3c8;
  text-transform: uppercase;
  margin-top: 4px;
}

.in-nav {
  padding: 16px 14px;
  flex: 1;
  overflow-y: auto;
}

.in-nav-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7488ad;
  padding: 14px 12px 8px;
  font-weight: 600;
}

.in-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 11px;
  color: #c2cde2;
  font-weight: 500;
  font-size: 14.5px;
  position: relative;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
  margin-bottom: 2px;
  cursor: pointer;
}

.in-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.in-nav-item:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  transform: translateX(2px);
}

.in-nav-item:hover svg {
  opacity: 1;
  transform: scale(1.06);
}

.in-nav-item.active {
  background: linear-gradient(90deg, rgba(91, 138, 230, 0.26), rgba(91, 138, 230, 0.14));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.in-nav-item.active svg {
  opacity: 1;
}

.in-nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #ddba62, var(--in-gold));
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.45);
  animation: inNavIndicator 0.22s ease;
}

@keyframes inNavIndicator {
  from {
    transform: translateY(-50%) scaleY(0.3);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
}

.in-side-foot {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.in-side-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  transition: 0.16s;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.in-side-user:hover {
  background: rgba(255, 255, 255, 0.07);
}

.in-side-user .in-user-name {
  font-size: 13.5px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}

.in-side-user .in-user-role {
  font-size: 11.5px;
  color: #8fa3c8;
}

/* Initials avatar - the prototype's photo avatar is replaced app-wide. */
.in-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--in-blue-500), var(--in-navy-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* ========================================
   MAIN COLUMN & TOPBAR
   ======================================== */

.in-main {
  flex: 1;
  margin-left: var(--in-sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.in-topbar {
  height: 70px;
  background: #fff;
  border-bottom: 1px solid var(--in-line);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 40;
  /* Soft edge towards the scrolling content column below. */
  box-shadow: 0 2px 10px rgba(13, 26, 56, 0.04);
}

.in-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  color: var(--in-navy-800);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.in-hamburger:hover {
  background: var(--in-line-soft);
}

.in-search {
  position: relative;
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--in-bg);
  border: 1px solid var(--in-line);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  transition: 0.16s;
}

.in-search:focus-within {
  border-color: var(--in-blue-400);
  background: #fff;
  box-shadow: 0 0 0 3px var(--in-blue-100), 0 4px 14px rgba(13, 26, 56, 0.06);
}

.in-search:focus-within svg {
  color: var(--in-blue-500);
}

.in-search input {
  border: none;
  background: none;
  outline: none;
  flex: 1;
  color: var(--in-ink-900);
  font-family: inherit;
  font-size: 14.5px;
}

.in-search input:disabled {
  cursor: default;
}

.in-search svg {
  width: 18px;
  height: 18px;
  color: var(--in-ink-400);
  flex-shrink: 0;
}

.in-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Kontomenue in der hellen Topbar.
   Die Grundgestaltung (.user-menu, layout.css) stammt vom dunklen Kopf des
   Organigramms: Name, Rollenschild und Pfeil sind dort weiss. In der weissen
   Topbar waren sie dadurch unsichtbar - sichtbar blieb nur das Kuerzel, der
   Rest wirkte wie eine leere Flaeche. */
.in-topbar .user-menu-trigger {
  color: var(--in-ink-900);
  height: 42px;
}

.in-topbar .user-menu-trigger:hover,
.in-topbar .user-menu.open .user-menu-trigger {
  background: var(--in-line-soft);
}

.in-topbar .user-name {
  color: var(--in-ink-900);
  font-size: 13.5px;
  max-width: 160px;
}

.in-topbar .user-menu .user-badge {
  color: var(--in-blue-500);
  background: var(--in-blue-50);
}

.in-topbar .user-menu-arrow {
  border-top-color: var(--in-ink-400);
}

.in-topbar .user-avatar {
  border-radius: 10px;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.in-content {
  padding: 30px;
  /* Volle Breite statt zentrierter 1280er-Spalte: Auf breiten Schirmen blieb
     links und rechts Flaeche liegen, waehrend Tabellen und Baeume innen
     gedraengt standen (Vorgabe Daniel Lippa, 27.07.2026). */
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* base.css sets body{overflow:hidden} for the legacy full-screen views,
     so the content column is the intranet's scroll container. */
  min-height: 0;
  overflow-y: auto;
}

/* Full-bleed mode for legacy full-screen views (org chart, revenue, catalog,
   profile) that bring their own headers and page chrome. */
.in-content.in-content--flush {
  padding: 0;
  max-width: none;
  margin: 0;
}

.in-page {
  animation: inFade 0.35s ease;
  flex: 1;
  min-width: 0;
}

@keyframes inFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.in-page-head {
  margin-bottom: 24px;
}

.in-page-head h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--in-ink-900);
}

.in-page-head p {
  color: var(--in-ink-500);
  margin-top: 4px;
  font-size: 14.5px;
}

.in-eyebrow {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--in-blue-500);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ========================================
   CARDS & DASHBOARD BUILDING BLOCKS
   ======================================== */

.in-card {
  background: var(--in-card);
  border: 1px solid var(--in-line);
  border-radius: var(--in-radius);
  box-shadow: var(--in-shadow-sm);
}

.in-card-pad {
  padding: 22px;
}

.in-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--in-line-soft);
}

.in-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--in-ink-900);
}

.in-sec {
  margin-bottom: 22px;
}

.in-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.in-sec-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--in-ink-900);
}

.in-sec-head .in-sec-hint {
  font-size: 13px;
  color: var(--in-ink-500);
}

/* Quick-access cards (dashboard) */
.in-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.in-qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--in-line);
  border-radius: var(--in-radius-sm);
  background: #fff;
  text-align: left;
  transition: 0.16s;
  cursor: pointer;
}

.in-qa:hover {
  border-color: var(--in-blue-400);
  box-shadow: var(--in-shadow-md);
  transform: translateY(-2px);
}

.in-qa .in-qa-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-qa .in-qa-ic svg {
  width: 20px;
  height: 20px;
}

.in-qa .in-qa-t {
  font-weight: 650;
  font-size: 14px;
  color: var(--in-ink-900);
}

.in-qa .in-qa-d {
  font-size: 12.5px;
  color: var(--in-ink-500);
}

.in-qa-ic.tone-blue {
  background: var(--in-blue-100);
  color: var(--in-blue-500);
}

.in-qa-ic.tone-gold {
  background: var(--in-gold-soft);
  color: var(--in-gold);
}

.in-qa-ic.tone-green {
  background: var(--in-green-soft);
  color: var(--in-green);
}

.in-qa-ic.tone-purple {
  background: var(--in-purple-soft);
  color: var(--in-purple);
}

.in-qa-ic.tone-teal {
  background: var(--in-teal-soft);
  color: var(--in-teal);
}

/* ========================================
   MOBILE
   ======================================== */

.in-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 26, 56, 0.4);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

.in-overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1080px) {
  .in-qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .in-sidebar {
    transform: translateX(-100%);
  }

  .in-sidebar.open {
    transform: none;
  }

  .in-main {
    margin-left: 0;
  }

  .in-hamburger {
    display: flex;
  }

  .in-content {
    padding: 20px;
  }

  .in-content.in-content--flush {
    padding: 0;
  }
}

@media (max-width: 640px) {
  .in-qa-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Global search dropdown (topbar) + offline banner
   ============================================================ */

.in-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--in-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.06), 0 16px 40px rgba(13, 26, 56, 0.16);
  max-height: min(420px, 60vh);
  overflow-y: auto;
  z-index: 60;
  padding: 6px;
  transform-origin: top center;
  animation: inPanelIn 0.18s ease;
}
@keyframes inPanelIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.in-search-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--in-ink-400);
  padding: 10px 10px 5px;
}
.in-search-group:not(:first-child) {
  margin-top: 5px;
  padding-top: 11px;
  border-top: 1px solid var(--in-line-soft);
}
.in-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.16s ease;
}
.in-search-item:hover,
.in-search-item.active {
  background: var(--in-blue-50);
}
.in-search-item.active {
  box-shadow: inset 2.5px 0 0 var(--in-blue-400);
}
.in-search-item.active .in-search-title {
  color: var(--in-navy-700);
}
.in-search-item:focus-visible {
  outline: 2px solid var(--in-blue-400);
  outline-offset: -2px;
}
.in-search-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--in-ink-900);
}
.in-search-sub {
  font-size: 12px;
  color: var(--in-ink-500);
}
.in-search-empty {
  padding: 18px 12px 16px;
  font-size: 13.5px;
  color: var(--in-ink-500);
  text-align: center;
}
.in-search-empty::before {
  content: "· · ·";
  display: block;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--in-ink-400);
  margin-bottom: 4px;
}

.in-offline-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--in-navy-800);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.2), 0 10px 28px rgba(13, 26, 56, 0.28);
  z-index: 120;
  max-width: min(92vw, 560px);
  text-align: center;
  animation: inBannerIn 0.25s ease;
}

@keyframes inBannerIn {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ============================================================
   Einladungs-Dialog (Admin-Versand über Microsoft-365-Postfach)
   ============================================================ */

.in-invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 26, 56, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 140;
  padding: 16px;
  animation: inOverlayIn 0.2s ease;
}
@keyframes inOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.in-invite-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(13, 26, 56, 0.08), 0 24px 64px rgba(13, 26, 56, 0.3);
  padding: 24px;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: inDialogIn 0.22s ease;
}
@keyframes inDialogIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.in-invite-dialog h3 {
  font-size: 18px;
  color: var(--in-ink-900);
}
.in-invite-hint {
  font-size: 13.5px;
  color: var(--in-ink-500);
  line-height: 1.5;
}
.in-invite-input,
.in-invite-note {
  border: 1px solid var(--in-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--in-ink-900);
  resize: vertical;
}
.in-invite-input:focus,
.in-invite-note:focus {
  outline: none;
  border-color: var(--in-blue-400);
  box-shadow: 0 0 0 3px var(--in-blue-100);
}
.in-invite-error {
  font-size: 13px;
  color: var(--in-red);
}
.in-invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.in-invite-cancel {
  border: 1px solid var(--in-line);
  background: #fff;
  color: var(--in-ink-700);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.in-invite-cancel:hover {
  background: var(--in-blue-50);
  border-color: var(--in-blue-400);
}
.in-invite-cancel:focus-visible,
.in-invite-mailto:focus-visible,
.in-invite-reset:focus-visible {
  outline: 2px solid var(--in-blue-400);
  outline-offset: 2px;
  border-radius: 6px;
}
.in-invite-mailto {
  border: none;
  background: none;
  color: var(--in-ink-500);
  font-family: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.in-invite-mailto:hover {
  color: var(--in-blue-500);
}

/* Erweiterter Einladungs-Dialog: bearbeitbare E-Mail-Vorlage */
.in-invite-dialog--wide {
  width: min(640px, 100%);
  max-height: min(86vh, 780px);
  overflow-y: auto;
}
.in-invite-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.in-invite-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--in-ink-400);
}
.in-invite-body {
  border: 1px solid var(--in-line);
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--in-ink-900);
  resize: vertical;
  min-height: 220px;
}
.in-invite-body:focus {
  outline: none;
  border-color: var(--in-blue-400);
  box-shadow: 0 0 0 3px var(--in-blue-100);
}
.in-invite-reset {
  border: none;
  background: none;
  color: var(--in-ink-500);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.in-invite-reset:hover {
  color: var(--in-blue-500);
}
.in-invite-actions-spacer {
  flex: 1;
}

/* Profilbild in Sidebar-Footer und Nutzermenü */
.in-av img,
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}