/*
 * KnowCore global utility header
 * P1.09 E3A3J
 *
 * EINZIGER Layout-Owner für:
 * - Nachrichten
 * - Benachrichtigungen
 * - Sprache
 * - Erscheinungsbild
 *
 * Fachliche Modulaktionen bleiben davon getrennt.
 */

:root {
  --kc-global-utility-button: 44px;
  --kc-global-utility-gap: 6px;
  --kc-global-utility-edge: 12px;

  /*
   * Bereits auf vier globale Aktionen ausgelegt:
   * ✉ 🔔 🌐 ◐
   *
   * Noch nicht sichtbarer Sprachschalter wird später
   * ohne erneute Header-Architektur ergänzt.
   */
  --kc-global-utility-reserve: 232px;
}


/* =========================================================
   GLOBAL UTILITY AREA
   ========================================================= */

.kcGlobalHeaderActions {
  position: fixed;

  top: max(
    var(--kc-global-utility-edge),
    env(safe-area-inset-top)
  );

  right: max(
    var(--kc-global-utility-edge),
    env(safe-area-inset-right)
  );

  left: auto;
  bottom: auto;

  z-index: 20050;

  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;

  gap: var(--kc-global-utility-gap);

  width: max-content;

  max-width: calc(
    100vw
    - max(
      12px,
      env(safe-area-inset-left)
    )
    - max(
      12px,
      env(safe-area-inset-right)
    )
  );

  box-sizing: border-box;

  padding: 4px;

  pointer-events: auto;

  isolation: isolate;
}


.kcGlobalMessageShell,
.kcGlobalNotificationShell,
.kcGlobalLanguageShell,
.kcGlobalAppearanceShell {
  position: relative;

  display: inline-flex;

  flex: 0 0 auto;

  align-items: center;
}


/* Fachliche Reihenfolge */
.kcGlobalMessageShell {
  order: 1;
}

.kcGlobalNotificationShell {
  order: 2;
}

.kcGlobalLanguageShell {
  order: 3;
}

.kcGlobalAppearanceShell {
  order: 4;
}


.kcGlobalHeaderButton {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    var(--kc-global-utility-button);

  width:
    var(--kc-global-utility-button);

  min-width:
    var(--kc-global-utility-button);

  height:
    var(--kc-global-utility-button);

  min-height:
    var(--kc-global-utility-button);

  box-sizing: border-box;

  border:
    1px
    solid
    var(
      --border,
      rgba(
        148,
        163,
        184,
        .42
      )
    );

  border-radius: 12px;

  background:
    color-mix(
      in srgb,
      var(--card, #fff) 94%,
      transparent
    );

  color: inherit;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      .08
    );

  cursor: pointer;

  touch-action: manipulation;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


.kcGlobalHeaderButton:hover {
  background:
    color-mix(
      in srgb,
      var(--card, #fff) 84%,
      var(--kc-accent, #2563eb)
    );

  border-color:
    color-mix(
      in srgb,
      var(--border, #cbd5e1) 55%,
      var(--kc-accent, #2563eb)
    );

  box-shadow:
    0 7px 20px
    rgba(
      15,
      23,
      42,
      .12
    );
}


.kcGlobalHeaderButton:active {
  transform:
    translateY(1px);
}


.kcGlobalHeaderButton:focus-visible {
  outline:
    2px
    solid
    var(
      --kc-accent,
      #2563eb
    );

  outline-offset: 2px;
}


.kcGlobalHeaderIcon {
  font-size: 20px;
  line-height: 1;
}


.kcGlobalHeaderBadge {
  position: absolute;

  top: -5px;
  right: -5px;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  border-radius: 999px;

  border: 2px solid #fff;

  background: #dc2626;
  color: #fff;

  font-size: 10px;
  font-weight: 800;
  line-height: 15px;

  text-align: center;
}


/* =========================================================
   DESKTOP MODULE TOPBAR
   ========================================================= */

main.main > header.topbar {
  position: relative;

  box-sizing: border-box;

  padding-right: calc(
    var(--kc-global-utility-reserve)
    + 14px
  );

  column-gap: 16px;
  row-gap: 10px;

  align-items: flex-start;
}


main.main > header.topbar
  > div:first-child {
  min-width: min(
    280px,
    100%
  );

  flex: 1 1 320px;
}


main.main > header.topbar
  > .row:last-child {
  min-width: 0;

  flex: 0 1 auto;

  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


main.main > header.topbar
  > .row:last-child
  > .btn,
main.main > header.topbar
  > .row:last-child
  > button,
main.main > header.topbar
  > .row:last-child
  > a {
  flex: 0 0 auto;
}


/* =========================================================
   ZOOM / KLEINER DESKTOP / TABLET LANDSCAPE

   Browserzoom reduziert die effektive CSS-Breite.
   Deshalb schalten wir bereits bei 1280px auf eine
   eigene Utility-Zeile statt erst auf Telefonbreite.
   ========================================================= */

@media (max-width: 1280px) {

  :root {
    --kc-global-utility-edge: 8px;
  }


  .kcGlobalHeaderActions {
    top: max(
      8px,
      env(safe-area-inset-top)
    );

    right: max(
      10px,
      env(safe-area-inset-right)
    );
  }


  main.main > header.topbar {
    padding-top: calc(
      var(--kc-global-utility-button)
      + max(
        18px,
        env(safe-area-inset-top)
      )
    );

    padding-right: 14px;

    align-items: stretch;
  }


  main.main > header.topbar
    > div:first-child {
    width: 100%;
    max-width: 100%;

    flex: 1 1 100%;
  }


  main.main > header.topbar
    > .row:last-child {
    width: 100%;

    flex: 1 1 100%;

    justify-content: flex-start;
  }
}


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

@media (max-width: 760px) {

  :root {
    --kc-global-utility-button: 42px;
    --kc-global-utility-gap: 5px;
    --kc-global-utility-edge: 6px;
  }


  .kcGlobalHeaderActions {
    top: max(
      6px,
      env(safe-area-inset-top)
    );

    right: max(
      7px,
      env(safe-area-inset-right)
    );

    padding: 3px;
  }


  main.main > header.topbar {
    padding-top: calc(
      var(--kc-global-utility-button)
      + max(
        16px,
        env(safe-area-inset-top)
      )
    );

    padding-right:
      var(
        --kc-topbar-inline-padding,
        12px
      );
  }


  main.main > header.topbar
    > div:first-child,
  main.main > header.topbar
    > .row:last-child {
    width: 100%;
    max-width: 100%;
  }


  main.main > header.topbar
    > .row:last-child {
    justify-content: flex-start;
  }


  main.main > header.topbar
    > .row:last-child
    > .btn,
  main.main > header.topbar
    > .row:last-child
    > button,
  main.main > header.topbar
    > .row:last-child
    > a {
    max-width: 100%;
  }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

  :root {
    --kc-global-utility-button: 40px;
    --kc-global-utility-gap: 4px;
    --kc-global-utility-edge: 5px;
  }


  .kcGlobalHeaderActions {
    right: max(
      5px,
      env(safe-area-inset-right)
    );

    gap: 4px;

    padding: 2px;
  }


  main.main > header.topbar {
    padding-top: calc(
      var(--kc-global-utility-button)
      + max(
        14px,
        env(safe-area-inset-top)
      )
    );
  }
}


/* =========================================================
   COMPACT LANDSCAPE
   ========================================================= */

@media (max-height: 620px) {

  :root {
    --kc-global-utility-button: 40px;
    --kc-global-utility-gap: 4px;
    --kc-global-utility-edge: 4px;
  }


  .kcGlobalHeaderActions {
    top: max(
      4px,
      env(safe-area-inset-top)
    );

    right: max(
      6px,
      env(safe-area-inset-right)
    );

    padding: 2px;
  }


  main.main > header.topbar {
    padding-top: calc(
      var(--kc-global-utility-button)
      + 12px
    );
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .kcGlobalHeaderActions {
    display: none !important;
  }


  main.main > header.topbar {
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
}