/* =============================================================================
   ZMT Account-Theme  ·  Leibniz-Zentrum für Marine Tropenforschung (ZMT)
   Basis: keycloak.v3 (Account-Konsole, React + PatternFly 5)
   Design nach www.leibniz-zmt.de

   Aufbau: mobile first. Die Grundregeln gelten für Telefone, größere
   Darstellungen werden über min-width-Abfragen ergänzt.
   ========================================================================== */

/* --- Schriften (zur Lizenzlage von Rockwell/Avenir siehe README) ---------- */
@font-face {
  font-family: "Rokkitt";
  src: url("../fonts/rokkitt-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Rokkitt";
  src: url("../fonts/rokkitt-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   1 · Design-Tokens (Grundwerte = Telefon)
   ========================================================================== */
:root {
  --zmt-blue:       #0976ba;
  --zmt-blue-dark:  #075e95;
  --zmt-blue-deep:  #064f7d;
  --zmt-cyan:       #008dc6;
  --zmt-blue-pale:  #cee4f1;
  --zmt-ink:        #222221;
  --zmt-text:       #212529;
  --zmt-muted:      #6c757d;
  --zmt-line:       #dee2e6;
  --zmt-surface:    #ffffff;
  --zmt-canvas:     #eef3f7;

  --zmt-font-heading: "Rockwell", "Rokkitt", Georgia, "Times New Roman", Times, serif;
  --zmt-font-body:    "Avenir", "Avenir Next", "Nunito Sans", system-ui, -apple-system,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zmt-radius: 2px;
  --zmt-logo-height: 30px;
  --zmt-tap-target: 2.75rem;

  /* PatternFly-5-Tokens auf die ZMT-Palette umstellen */
  --pf-v5-global--primary-color--100:    var(--zmt-blue);
  --pf-v5-global--primary-color--200:    var(--zmt-blue-dark);
  --pf-v5-global--primary-color--300:    var(--zmt-blue-deep);
  --pf-v5-global--active-color--100:     var(--zmt-blue);
  --pf-v5-global--link--Color:           var(--zmt-blue);
  --pf-v5-global--link--Color--hover:    var(--zmt-blue-dark);
  --pf-v5-global--link--Color--visited:  var(--zmt-blue-dark);
  --pf-v5-global--BorderColor--active:   var(--zmt-blue);
  --pf-v5-global--FontFamily--text:       var(--zmt-font-body);
  --pf-v5-global--FontFamily--sans-serif: var(--zmt-font-body);
  --pf-v5-global--FontFamily--heading:    var(--zmt-font-heading);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--zmt-font-heading);
}

html, body { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--zmt-canvas);
  font-family: var(--zmt-font-body);
  color: var(--zmt-text);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4,
.pf-v5-c-title { font-family: var(--zmt-font-heading); font-weight: 500; }

/* =============================================================================
   2 · Kopfleiste: weiß mit ZMT-Logo, cyanfarbene Kante
   ========================================================================== */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--zmt-surface);
  --pf-v5-c-masthead--Color: var(--zmt-ink);
  --pf-v5-c-masthead--BorderBottomWidth: 0;
  background-color: var(--zmt-surface);
  color: var(--zmt-ink);
  border-bottom: 3px solid var(--zmt-cyan);
  box-shadow: 0 2px 12px rgba(6, 79, 125, .12);
}

/* PatternFly hinterlegt einzelne Bereiche der Kopfleiste im dunklen Schema
   mit einer eigenen Farbe – das ergäbe eine sichtbare Kante. */
.pf-v5-c-masthead > *,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section { background-color: transparent; }

/* Logo skaliert proportional und bleibt auf schmalen Geräten im Rahmen.
   Auf dem Telefon steht die kompakte, gestapelte Fassung. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead .pf-v5-c-brand {
  height: auto;
  width: auto;
  max-height: var(--zmt-logo-height);
  max-width: 52vw;
  object-fit: contain;
  content: url("../img/zmt-logo-compact.svg");
}

/* Bedienelemente der Kopfleiste auf hellem Grund lesbar halten */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead .pf-v5-c-masthead__toggle .pf-v5-c-button { color: var(--zmt-ink); }

.pf-v5-c-masthead .pf-v5-c-button.pf-m-link,
.pf-v5-c-masthead a { color: var(--zmt-blue); }
.pf-v5-c-masthead .pf-v5-c-button.pf-m-link:hover,
.pf-v5-c-masthead a:hover { color: var(--zmt-blue-dark); }

/* Hamburger und Benutzermenü als ausreichend große Trefferfläche */
.pf-v5-c-masthead__toggle .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  min-height: var(--zmt-tap-target);
  min-width: var(--zmt-tap-target);
}

/* =============================================================================
   3 · Seitennavigation (auf dem Telefon eingeklappt, ab lg dauerhaft sichtbar)
   ========================================================================== */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--zmt-surface);
  background-color: var(--zmt-surface);
  border-right: 1px solid var(--zmt-line);
}

/* PatternFly liefert die Navigation in der dunklen Variante aus (weiße
   Schrift, dunkler Balken für den aktiven Eintrag). Auf der hellen ZMT-
   Seitenleiste wäre sie unsichtbar, deshalb werden die Farben gesetzt. */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--zmt-text);
  --pf-v5-c-nav__link--hover--Color: var(--zmt-blue);
  --pf-v5-c-nav__link--focus--Color: var(--zmt-blue);
  --pf-v5-c-nav__link--active--Color: var(--zmt-blue);
  --pf-v5-c-nav__link--m-current--Color: var(--zmt-blue);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--zmt-blue-pale);
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(9, 118, 186, .08);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(9, 118, 186, .08);
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(9, 118, 186, .08);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--zmt-blue);
  --pf-v5-c-nav__link--before--BorderColor: var(--zmt-line);
  --pf-v5-c-nav__item--before--BorderColor: var(--zmt-line);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link,
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle {
  color: var(--zmt-text);
  background-color: transparent;
  font-weight: 500;
  min-height: var(--zmt-tap-target);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus {
  color: var(--zmt-blue);
  background-color: rgba(9, 118, 186, .08);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: var(--zmt-blue);
  background-color: var(--zmt-blue-pale);
  font-weight: 600;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after { border-color: var(--zmt-blue); }
.pf-v5-c-page__sidebar .pf-v5-c-nav__item::before,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::before { border-color: var(--zmt-line); }

/* =============================================================================
   4 · Inhaltsfläche
   ========================================================================== */
.pf-v5-c-page { min-height: 100vh; min-height: 100dvh; }
.pf-v5-c-page__main,
.pf-v5-c-page__main-section { background-color: var(--zmt-canvas); }
.pf-v5-c-page__main-section.pf-m-light { background-color: var(--zmt-surface); }

.pf-v5-c-card {
  border-radius: var(--zmt-radius);
  box-shadow: 0 1px 4px rgba(6, 79, 125, .10);
}
.pf-v5-c-card__title,
.pf-v5-c-card__title-text { font-family: var(--zmt-font-heading); font-weight: 500; }

.pf-v5-c-page__main-section:first-of-type .pf-v5-c-title.pf-m-2xl,
.pf-v5-c-page__main-section:first-of-type .pf-v5-c-title.pf-m-xl { color: var(--zmt-blue-deep); }

/* Breite Tabellen auf schmalen Geräten waagerecht scrollbar halten,
   statt die Seite zu sprengen */
.pf-v5-c-table,
.pf-v5-c-data-list { max-width: 100%; }
.pf-v5-c-table__wrapper, .pf-v5-c-scroll-outer-wrapper { overflow-x: auto; }

/* =============================================================================
   5 · Schaltflächen, Formulare, Reiter
   ========================================================================== */
.pf-v5-c-button {
  border-radius: var(--zmt-radius);
  font-family: var(--zmt-font-body);
  font-weight: 600;
}
.pf-v5-c-form__actions .pf-v5-c-button,
.pf-v5-c-button.pf-m-block { min-height: var(--zmt-tap-target); }

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--zmt-blue);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--zmt-blue-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--zmt-blue-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--zmt-blue-dark);
  background-color: var(--zmt-blue);
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-v5-c-button.pf-m-primary:active { background-color: var(--zmt-blue-dark); }

.pf-v5-c-button.pf-m-secondary { color: var(--zmt-blue); border-color: var(--zmt-blue); }
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-secondary:focus {
  color: var(--zmt-blue-dark);
  border-color: var(--zmt-blue-dark);
  background-color: var(--zmt-blue-pale);
}
.pf-v5-c-button.pf-m-link { color: var(--zmt-blue); }
.pf-v5-c-button.pf-m-link:hover { color: var(--zmt-blue-dark); }

.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: var(--zmt-radius);
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--zmt-blue);
  --pf-v5-c-form-control--hover--BorderBottomColor: var(--zmt-blue);
}
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea { font-size: max(1rem, 16px); }
.pf-v5-c-form__label-text { font-weight: 600; }

.pf-v5-c-tabs {
  --pf-v5-c-tabs__link--m-current--Color: var(--zmt-blue);
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--zmt-blue);
}
.pf-v5-c-switch { --pf-v5-c-switch--m-checked__toggle--BackgroundColor: var(--zmt-blue); }
.pf-v5-c-label.pf-m-blue { --pf-v5-c-label--m-blue--BackgroundColor: var(--zmt-blue-pale); }

a { color: var(--zmt-blue); text-decoration: none; }
a:hover, a:focus { color: var(--zmt-blue-dark); text-decoration: underline; }

/* Ladeanzeige vor dem Start der React-Anwendung */
.keycloak__loading-container {
  background-color: var(--zmt-canvas) !important;
  color: var(--zmt-blue-deep) !important;
}
.keycloak__loading-container #loading-text { font-family: var(--zmt-font-heading); }

/* =============================================================================
   6 · Ab 768px: größeres Logo
   ========================================================================== */
@media (min-width: 768px) {
  :root { --zmt-logo-height: 44px; }
  .pf-v5-c-masthead__brand img,
  .pf-v5-c-masthead .pf-v5-c-brand {
    max-width: 320px;
    /* „none“ gibt das über theme.properties (logo=…) gesetzte Bild frei */
    content: none;
  }
}

/* =============================================================================
   7 · Dunkles Farbschema (folgt der Systemeinstellung)
   ========================================================================== */
.pf-v5-theme-dark {
  --zmt-surface: #1b1d21;
  --zmt-canvas:  #121417;
  --zmt-text:    #e4e6e8;
  --zmt-muted:   #9aa2a8;
  --zmt-line:    #3c4146;
  --zmt-ink:     #e4e6e8;
  --zmt-blue-pale: #123c57;
}
.pf-v5-theme-dark .pf-v5-c-masthead {
  background-color: #141517;
  border-bottom-color: var(--zmt-blue);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
/* Helle Logovariante auf dunklem Grund */
.pf-v5-theme-dark .pf-v5-c-masthead__brand img { content: url("../img/zmt-logo-compact-inverse.svg"); }
.pf-v5-theme-dark .pf-v5-c-page__sidebar { background-color: #141517; border-right-color: var(--zmt-line); }
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__link,
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__toggle { color: var(--zmt-text); }
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus { color: #6fc0ef; }
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover,
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: #6fc0ef;
  background-color: rgba(9, 118, 186, .22);
}
.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary:hover { background-color: rgba(9, 118, 186, .18); }
.pf-v5-theme-dark .keycloak__loading-container { color: #6fc0ef !important; }

@media (min-width: 768px) {
  .pf-v5-theme-dark .pf-v5-c-masthead__brand img { content: url("../img/zmt-logo-inverse.svg"); }
}


/* Dieselben Werte noch einmal über die Systemabfrage: greift auch dann,
   wenn Keycloak die Klasse pf-v5-theme-dark nicht setzt. */
@media (prefers-color-scheme: dark) {
  :root {
    --zmt-surface: #1b1d21;
    --zmt-canvas:  #121417;
    --zmt-text:    #e4e6e8;
    --zmt-muted:   #9aa2a8;
    --zmt-line:    #3c4146;
    --zmt-ink:     #e4e6e8;
    --zmt-blue-pale: #123c57;
  }
  .pf-v5-c-masthead {
    background-color: #141517;
    border-bottom-color: var(--zmt-blue);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  }
  /* Helle Logovariante auf dunklem Grund */
  .pf-v5-c-masthead__brand img { content: url("../img/zmt-logo-compact-inverse.svg"); }
  .pf-v5-c-page__sidebar { background-color: #141517; border-right-color: var(--zmt-line); }
  .pf-v5-c-page__sidebar .pf-v5-c-nav__link,
  .pf-v5-c-page__sidebar .pf-v5-c-nav__toggle { color: var(--zmt-text); }
  .pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
  .pf-v5-c-page__sidebar .pf-v5-c-nav__link:focus { color: #6fc0ef; }
  .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
  .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover,
  .pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    color: #6fc0ef;
    background-color: rgba(9, 118, 186, .22);
  }
  .pf-v5-c-button.pf-m-secondary:hover { background-color: rgba(9, 118, 186, .18); }
  .keycloak__loading-container { color: #6fc0ef !important; }

  @media (min-width: 768px) {
    .pf-v5-c-masthead__brand img { content: url("../img/zmt-logo-inverse.svg"); }
  }
}

/* =============================================================================
   8 · Bedienhilfen
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:focus-visible { outline: 3px solid var(--zmt-cyan); outline-offset: 2px; }