/* ==========================================================================
   assets/style.css – motywy, układ, mapa, tabela, stopka, cookies
   ========================================================================== */

   -------------------------------------------------------------------------- */

/* ==========================================================================
   1) Zmienne globalne i wysokości stałych elementów
   --------------------------------------------------------------------------
   Te zmienne kontrolują kolory, rozmiary i zachowanie motywów (Light/Dark).
   ========================================================================== */

:root {
  --header-h: 64px;             /* wysokość nagłówka – używana przez sticky */
  --menu-h: 44px;               /* wysokość paska menu – dla offsetów */

  /* ---- Motyw Light (domyślny) ---- */
  --bg: #ffffff;                /* kolor tła strony */
  --fg: #00529B;                /* kolor podstawowego tekstu - jak logo RTGMS */
  --muted: #475569;             /* kolor „przygaszony” (opisy, podteksty) */
  --primary: #0ea5e9;           /* kolor akcentu (linki, CTA) */
  --primary-contrast: #ffffff;  /* kolor tekstu na tle primary */

  --card: #f8fafc;              /* tło kart/kontenerów */
  --border: #e2e8f0;            /* kolor obramowań */
  --menu-bg: #f1f5f9;           /* tło paska menu */
  --menu-active: #0ea5e9;       /* kolor aktywnego linku w menu */

  --cookie-bg: #ffffff;     /* ⟵ pełna biel w jasnym motywie */
  --cookie-fg: #0b1220;     /* ⟵ ciemny tekst (czytelny na białym) */

  --link-color: var(--primary); /* globalny kolor linków */
  --map-border: #cbd5e1;        /* ramka wokół mapy */

  /* ---- ADMIN - DataTable (Light) ---- */
  --table-bg: #f8fafc;          /* tło tabeli */
  --table-fg: #0f172a;          /* tekst tabeli - czarne */
  --table-border: #e2e8f0;      /* obramowania komórek */
  --table-header-bg: #eef2f7;   /* tło nagłówka tabeli */
  --table-stripe-bg: #f1f5f9;   /* tło co drugiego wiersza (paski) */
  --table-hover-bg: #eaf6ff;    /* tło wiersza w stanie hover */

  /* ---- DataTable tooltips (Light) ---- */
  --dt-tip-bg: #ffffff;
  --dt-tip-fg: #111827;
  --dt-tip-border: #d1d5db;
  --dt-tip-shadow: 0 6px 16px rgba(0,0,0,.18);

  /* zmin: branding */
  --logo-h: 60px;               /* wysokość RTGMS w headerze */
  --esa-h: 2cm;                 /* ⟵ USTAWIONE NA 2 cm (ESA) */
  --branding-gap: 10px;         /* odstęp między ESA a RTGMS */
}

/* ==========================================================================
   2) Motyw Dark
   --------------------------------------------------------------------------
   Dodanie klasy .theme--dark do #app-container przełącza kolory na ciemne.
   [AUTH] Dodatkowo wspieramy body.dark dla stron logowania/rejestracji.
   ========================================================================== */
.theme--dark,
body.dark {  /* [AUTH] */
  --bg: #0b1220;                /* ciemne tło strony */
  --fg: #e2e8f0;                /* jasny tekst */
  --muted: #94a3b8;             /* przygaszony tekst w dark */
  --primary: #22d3ee;           /* akcent w dark (jasny cyjan) */
  --primary-contrast: #0b1220;  /* tekst na tle primary (ciemny) */

  --card: #0f172a;              /* tło kart w dark */
  --border: #1e293b;            /* obramowania w dark */
  --menu-bg: #0b1325;           /* tło menu w dark */
  --menu-active: #22d3ee;       /* aktywny link w menu */

  --cookie-bg: #000000;     /* ⟵ pełna czerń w ciemnym motywie */
  --cookie-fg: #e2e8f0;     /* ⟵ jasny tekst */

  --map-border: #243042;        /* ramka mapy w dark */

  /* ---- ADMIN: DataTable (Dark) ---- */
  --table-bg: #0d1324;          /* tło tabeli w dark */
  --table-fg: #e2e8f0;          /* tekst tabeli w dark */
  --table-border: #1e293b;      /* obramowania komórek w dark */
  --table-header-bg: #111a2e;   /* tło nagłówka tabeli w dark */
  --table-stripe-bg: #131f39;   /* paski wierszy w dark */
  --table-hover-bg: #172338;    /* tło hover wiersza w dark */

  /* ---- DataTable tooltips (Dark) ---- */
  --dt-tip-bg: #111827;
  --dt-tip-fg: #e5e7eb;
  --dt-tip-border: #374151;
  --dt-tip-shadow: 0 8px 22px rgba(0,0,0,.45);
}


/* ==========================================================================
   3) Reset i baza
   ========================================================================== */

* { box-sizing: border-box; }   /* ułatwia kontrolę rozmiarów (padding w środku) */

html, body, #app-container {    /* pełna wysokość widoku dla kontenerów */
  height: 100%;
}

body {
  margin: 0;                    /* usuwa domyślne marginesy */
  background: var(--bg);        /* tło zależne od motywu */
  color: var(--fg);             /* tekst zależny od motywu */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
}

/* ==========================================================================
   4) Header (sticky nad wszystkim)
   ========================================================================== */

.header {
  position: sticky;             /* przylepia nagłówek do górnej krawędzi */
  top: 0;                       /* pozycja przyklejenia */
  z-index: 10000;               /* warstwa ponad mapą i overlayami */
  display: flex;                /* układ w poziomie */
  align-items: center;          /* wyrównanie pionowe elementów */
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  isolation: isolate;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 2cm;                     /* zmin: odstęp RTGMS ↔ tytuł = 1 cm */
}

/* zmin: kontener brandingu (ESA + RTGMS) */
.branding{
  display: inline-flex;
  align-items: center;
  gap: var(--branding-gap);
}

/* zmin: obraz logo ESA – wysokość sterowana --esa-h = 2 cm
   (TUTAJ zmieniłem rozmiar ESA) */
.branding__esa{
  display: inline-flex;
  align-items: center;
}
.branding__esa img{
  display: block;
  height: var(--esa-h);         /* zmin: 2 cm */
  width: auto;
  object-fit: contain;
}

/* zmin: przełączanie wersji ESA po motywie – zgodne z app_.py
   (ukryj oba, pokaż właściwy wariant) */
.logo-esa--light,
.logo-esa--dark{ display: none !important; }          /* [zmin] baza */
#app-container.theme--light .logo-esa--light{ display:inline-block !important; }
#app-container.theme--dark  .logo-esa--dark { display:inline-block !important; }
body.dark .logo-esa--light{ display:none !important; }  /* [AUTH] */
body.dark .logo-esa--dark { display:inline-block !important; }

/* istniejący „logo” (RTGMS) – zachowany, lekko wsunięty do środka */
.logo {
  width: 100px;
  height: 60px;
  border-radius: 9999px;
  color: var(--primary-contrast);
  display: grid;
  margin-top: -16px;
  place-items: center;
}
/* zmin: RTGMS w kontekście brandingu – odsuń nieco od ESA */
.branding .logo{ margin-left: 6px; }  /* „trochę do środka” – bez centrowania */

.title {
  font-family: "Helvetica Neue", Arial, Inter, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  margin-top: 20px;
  color: var(--fg);
}

.header__right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* --- Przyciski i przełączniki w nagłówku --- */

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 10px;
  padding: .4rem .6rem;
  cursor: pointer;
  transition: 120ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: var(--muted);
}
.btn--primary {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}

/* Przyciski językowe – spójne z resztą UI */
.btn--lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;              /* odstęp między flagą a PL/EN */
  font-size: 1rem;
  padding: 4px 10px;     /* możesz dopasować do swoich btn */
  border-radius: 9999px; /* „pigułka”, jak w switch */
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
}

/* Flaga / emoji – trochę większa */
.btn-lang__icon {
  font-size: 1.2em;
  line-height: 1;
}

/* Kod języka PL / EN – nieco mniejszy, uppercase */
.btn-lang__code {
  font-size: 0.85em;
  text-transform: uppercase;
}

/* Przełącznik motywu */
.switch {
  width: 44px;
  height: 36px;
  border-radius: 9999px;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1rem;
}

/* ==========================================================================
   5) tooltip dla modułu low_spectrum
   ========================================================================== */

.alarm-info-block {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.alarm-param-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: 0.9rem;
}

.alarm-param-label {
  font-weight: 500;
  cursor: help;              /* kursor z ? sugeruje tooltip */
  text-decoration: underline dotted;
}

.alarm-param-value {
  text-align: right;
  white-space: nowrap;
}

/* ==========================================================================
   5) Menu (sticky pod headerem)
   ========================================================================== */

.menu {
  position: sticky;
  top: var(--header-h);
  z-index: 9500;
  display: flex;
  gap: .25rem;
  padding: .5rem .5rem;
  background: var(--menu-bg);
  border-bottom: 1px solid var(--border);
}

.menu__link {
  padding: .5rem .8rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
}
.menu__link:hover { background: var(--card); }
.menu__link--active {
  color: var(--menu-active);
  background: rgba(14, 165, 233, .12);
}

/* zmin: AKTYWNE MENU – różne tło zależnie od motywu (DARK = biała czcionka) */
#app-container:not(.theme--dark) .menu__link--active,
body:not(.dark) .menu__link--active{
  background: rgba(15,23,42,.08);  /* ciemniejsze tło w jasnym */
  color: inherit;                  /* zostaw kolor w light */
}
#app-container.theme--dark .menu__link--active,
.theme--dark .menu__link--active,
body.dark .menu__link--active{
  background: rgba(255,255,255,.12);  /* jaśniejsze tło w ciemnym */
  color: #fff;                         /* zmin: W DARK – ZAWSZE białe */
}
/* zmin: zachowaj kolor/tło także przy hoverze aktywnego */
#app-container:not(.theme--dark) .menu__link--active:hover,
body:not(.dark) .menu__link--active:hover{
  background: rgba(15,23,42,.08);
  color: inherit;
}
#app-container.theme--dark .menu__link--active:hover,
.theme--dark .menu__link--active:hover,
body.dark .menu__link--active:hover{
  background: rgba(255,255,255,.12);
  color: #fff;  /* zmin */
}

/* ==========================================================================
   6) Main (treść główna)
   ========================================================================== */

.main {
  padding: 1rem;
  min-height: calc(100vh - var(--header-h) - var(--menu-h) - 120px); /* widoczny viewport */
}

/* ==========================================================================
   7) Grid 2×2 – układ sekcji na stronie /monitoring-high
   ========================================================================== */

.grid-2x2 {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(400px, auto) minmax(400px, auto) minmax(700px, auto);
}
.grid-item { min-height: 0; }



/* ==========================================================================
   7) Grid 2×2 – układ sekcji na stronie mapa
   ========================================================================== */

.grid-menu_map {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: minmax(40vh, auto) auto;  /* wysokość mapy w menu home 500px */

}

.grid-item {
  min-height: 0;
}

.grid-item--full {
  grid-column: 1 / -1;
}

/* === MAPA + TABLE (60/40) === */
.grid-menu_map--split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); /* ~30% / 70% */
  gap: .7rem;
  align-items: stretch;
  grid-auto-rows: minmax(0, auto);
}

/* grid-item na stronie MAP – karta ma się rozciągać w pionie */
.grid-menu_map--split .grid-item {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* sama karta w grid-item wypełnia cały wiersz */
.grid-menu_map--split .grid-item > .card {
  flex: 1 1 auto;
  min-height: 0;
}

/* wnętrza kart (mapa + panel boczny) są flex-kolumną o pełnej wysokości */
.grid-menu_map--split .card--map .card__content,
.grid-menu_map--split .card--map .card__body,
.grid-menu_map--split .card--side .card__content,
.grid-menu_map--split .card--side .card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* komponent MAPY i TABELI mogą rosnąć do pełnej wysokości */
.grid-menu_map--split .card--map .card__body > *,
.grid-menu_map--split .card--side .card__body > * {
  flex: 1 1 auto;
  min-height: 0;
}

/* podstawowe reguły rozciągania DataTable */
.datatable--stretch,
.datatable--stretch .dash-table-container {
  height: 100% !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* doprecyzowanie dla panelu bocznego na stronie MAP (po ID) */
.grid-menu_map--split .card--side #main-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* wrapper z klasą datatable--stretch zajmuje całe dostępne miejsce */
.grid-menu_map--split .card--side #main-table-wrapper .datatable--stretch {
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
}

/* cała piramida wrapperów DataTable ma 100% wysokości i brak max-height */
.grid-menu_map--split .card--side #main-table-wrapper .dash-table-container,
.grid-menu_map--split .card--side #main-table-wrapper .dash-spreadsheet-container,
.grid-menu_map--split .card--side #main-table-wrapper .dash-spreadsheet-inner {
  height: 100% !important;
  max-height: none !important;
  min-height: 0;
}

/* kontener z komórkami dostaje flex, żeby scrollować w pionie */
.grid-menu_map--split .card--side #main-table-wrapper .dash-spreadsheet-container {
  flex: 1 1 auto;
}


/* ==========================================================================
   7a) Grid grid-menu_high – układ sekcji na stronie /monitoring-high
   ========================================================================== */
.grid-menu_high {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* dalej 50/50 dla reszty */
  grid-template-rows:
    minmax(400px, auto)
    minmax(30px, auto)
    minmax(400px, auto)
    minmax(400px, auto)
    minmax(700px, auto);
  grid-auto-flow: dense;
}

.grid-item { min-height: 0; }
.grid-item--full { grid-column: 1 / -1; }
.grid-item--row2 { grid-row: 2; }

/* Pierwszy wiersz – osobny grid 30/70 */
.grid-high-top {
  display: grid;
  grid-template-columns: 3fr 7fr;  /* 30% / 70% */
  gap: .7rem;
}

.grid-high-top__table { min-width: 0; }
.grid-high-top__map   { min-width: 0; }

/* ==========================================================================
   7b) Grid grid-menu_medium – układ sekcji na stronie /monitoring-medium
   ========================================================================== */

/* Kontener: 2 kolumny, 3 wiersze z różną wysokością */
.grid-menu_medium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:
    minmax(100px, auto)   /* było 400px -> mniejsze */
    minmax(100px, auto)   /* było 400px -> mniejsze */
    minmax(300px, auto)
    minmax(300px, auto)
    minmax(300px, auto);
  gap: 1rem;
  align-items: stretch;
}


/* Drobne jakości życia (opcjonalnie, ale zwykle pomaga z overflow) */
.grid-item { min-height: 0; }

/* Jeśli Twój helper `card(...)` nadaje klasę .card, to ta reguła sprawi, że
   karta rozciągnie się na całą wysokość siatki (ładniejszy wygląd). */
.grid-menu_medium .card { height: 100%; }

/* Responsywność (opcjonalnie): na węższych ekranach przejdź na 1 kolumnę */
@media (max-width: 900px) {
  .grid-menu_medium {
    grid-template-columns: 1fr;
    grid-template-rows: none; /* wysokość wg treści */
  }
  .grid-item--full { grid-column: auto; }
}

/* ==========================================================================
   7c) Grid grid-menu_low – układ sekcji na stronie /monitoring-high
   ========================================================================== */
.grid-menu_low{
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows:minmax(400px, auto) minmax(500px, auto) minmax(400px, auto);
  grid-auto-flow: dense;
}


/* MAPA: zajmij 2 wiersze (pionowo) */
.grid-item--map { grid-row: span 1; min-height: 0; }

/* Niech mapa wypełnia kartę na 100% */
.grid-item--map .map-frame,
.grid-item--map .dash-graph,
.grid-item--map .js-plotly-plot { height: 100% !important; }

/* pełna szerokość (2 kolumny) – JEDNA definicja */
.grid-item--full { grid-column: 1 / -1; } /* ewentualnie: grid-column: span 2; */

/* DRUGI WIERSZ: pozycja */
.grid-item--row2 { grid-row: 2; }


/* !!!!Pierwszy wiersz w low – wewnętrzny grid 30% / 70% */
.grid-low-top {
  display: grid;
  grid-template-columns: 3fr 7fr;  /* ~30% / 70% */
  gap: .7rem;
}

.grid-low-top__table,
.grid-low-top__map {
  min-width: 0;   /* żeby karty poprawnie się zwijały w wąskich widokach */
}

/* ==========================================================================
   8) Karta (kontener)
   ========================================================================== */

.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: .7rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  position: relative;
}
.card__title {
  font-weight: 700;
  color: var(--fg);
}
.card__content {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.card__body {
  flex: 1;
  display: flex;
  min-height: 0;                /* pozwala grafom rozciągnąć się na 100% */
}
.card--map,
.card--map .card__content,
.map-frame { height: 100%; }    /* mapa ma wypełniać całą kartę */

.placeholder-chart { color: var(--muted); }

/* ==========================================================================
   9) Mapa (ramka, kontrolki, legenda, popup)
   ========================================================================== */

.map-frame {
  position: relative;
  border: 2px solid var(--map-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  flex: 1;
  min-height: 0;
  z-index: 1;
}
.map-frame,
.map-frame .dash-graph,
.map-frame .js-plotly-plot,
.map-frame .plotly,
.map-frame .main-svg {
  height: 100% !important;
  width: 100% !important;
}

/* Obniżone warstwy Plotly – by nie nachodziły na sticky header/menu */
.map-frame .modebar    { z-index: 10 !important; }
.map-frame .hoverlayer { z-index: 9  !important; }
.map-frame .zoomlayer,
.map-frame .draglayer  { z-index: 8  !important; }

/* Ukrycie natywnego paska Plotly – używasz własnych przycisków */
.map-frame .modebar { display: none !important; }

/* ---- Pasek sterowania mapą ---- */

.map-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
}
.map-controls .btn-ctrl {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.map-controls .btn-ctrl:hover { transform: translateY(-1px); }
.map-controls .btn-ctrl--active { outline: 2px solid var(--menu-active); }

/* Ikony (maski) – kolor z currentColor */
.map-controls .icon {
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.map-controls .icon-zoom-in {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M11 5v6H5v2h6v6h2v-6h6v-2h-6V5z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M11 5v6H5v2h6v6h2v-6h6v-2h-6V5z'/></svg>") no-repeat center/contain;
}
.map-controls .icon-zoom-out {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M5 11h14v2H5z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M5 11h14v2H5z'/></svg>") no-repeat center/contain;
}
.map-controls .icon-select {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' fill-rule='evenodd' d='M3 3h18v18H3V3zm2 2v14h14V5H5z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' fill-rule='evenodd' d='M3 3h18v18H3V3zm2 2v14h14V5H5z'/></svg>") no-repeat center/contain;
}
.map-controls .icon-reset {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 5V2l-4 4 4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12 5V2l-4 4 4 4V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z'/></svg>") no-repeat center/contain;
}
.map-controls .icon-pan {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 11V6a1 1 0 1 1 2 0v5h1V5a1 1 0 1 1 2 0v6h1V7a1 1 0 1 1 2 0v8.2A3.8 3.8 0 0 1 13.2 19H11a4 4 0 0 1-4-4v-1.5a1.5 1.5 0 1 1 2 0V11z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M9 11V6a1 1 0 1 1 2 0v5h1V5a1 1 0 1 1 2 0v6h1V7a1 1 0 1 1 2 0v8.2A3.8 3.8 0 0 1 13.2 19H11a4 4 0 0 1-4-4v-1.5a1.5 1.5 0 1 1 2 0V11z'/></svg>") no-repeat center/contain;
}

/* ---- Legenda mapy (kropki) ---- */

.map-legend {
  z-index: 120;
  display: flex;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--fg);
  font-weight: 600;
}
.legend-item:hover { background: rgba(0,0,0,.06); }
.theme--dark .legend-item:hover,
body.dark .legend-item:hover { background: rgba(255,255,255,.06); } /* [AUTH] */
.legend-item--off { opacity: .45; text-decoration: line-through; }
.legend-swatch {
  width: 12px; height: 12px;
  border-radius: 9999px;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.legend-swatch--good { background: #16a34a; }
.legend-swatch--low  { background: #f59e0b; }
.legend-swatch--bad  { background: #dc2626; }
.legend-label { font-size: 12.5px; line-height: 1; }

/* ---- Popup mapy (lewy dół) ---- */

.map-popup {
  position: absolute;
  left: .75rem;
  right: auto;
  bottom: .75rem;
  top: auto;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .8rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  min-width: 220px;
  z-index: 120;
}
.popup__title { font-weight: 700; margin-bottom: .4rem; }
.popup__row { display: flex; gap: .5rem; font-size: .95rem; }
.popup__row strong { min-width: 90px; }

/* ==========================================================================
   10) Stopka
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
  color: var(--muted);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  background: var(--bg);
}
.footer a {
  color: var(--muted);
  text-decoration: none;
  display: block;
}
.footer a:hover { text-decoration: underline; }

/* ==========================================================================
   11) Pasek cookies
   ========================================================================== */

.cookie {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  background: var(--cookie-bg);
  color: var(--cookie-fg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 50;
}

/* ==========================================================================
   12) DataTable – kolory, hover i TOOLTIPY
   ========================================================================== */

.card__body .dash-table-container,
.card__body .dash-spreadsheet-container {
  width: 100% !important;
}
.dash-spreadsheet-container .dash-spreadsheet td,
.dash-spreadsheet-container .dash-spreadsheet th {
  color: var(--table-fg) !important;
  background-color: var(--table-bg) !important;
  border-color: var(--table-border) !important;
}
.dash-spreadsheet-container .dash-spreadsheet th {
  background-color: var(--table-header-bg) !important;
  font-weight: 700 !important;
}
.dash-spreadsheet-container .dash-spreadsheet tr:nth-child(even) td {
  background-color: var(--table-stripe-bg) !important;
}
.dash-spreadsheet-container .dash-spreadsheet tr:hover td {
  background-color: var(--table-hover-bg) !important;
  color: var(--table-fg) !important;
}
.dash-table-container .dash-spreadsheet-menu { display: none !important; }
.dash-spreadsheet-container .icon {
  width: auto; height: auto; background: none; display: inline;
}

/* --- TOOLTIPY DataTable (spójne z mapą; dynamiczne po motywie) --- */
#app-container .dash-table-tooltip{
  background-color: var(--dt-tip-bg) !important;
  color: var(--dt-tip-fg) !important;
  border: 1px solid var(--dt-tip-border) !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  max-width: 90px !important;          /* węższe ~o połowę */
  white-space: normal !important;
  box-shadow: var(--dt-tip-shadow) !important;
}
/* Wersje o WYŻSZEJ specyficzności – przetną style osadzone z komponentu */
#app-container.theme--dark #high-table .dash-table-tooltip,
body.dark #high-table .dash-table-tooltip{
  background-color: var(--dt-tip-bg) !important;
  color: var(--dt-tip-fg) !important;
  border: 1px solid var(--dt-tip-border) !important;
  box-shadow: var(--dt-tip-shadow) !important;
}

/* ==========================================================================
   13) RWD (mobile)
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --header-h: 58px;
    --menu-h: 42px;
    /* zmin: ESA – również na mobile trzymamy sztywno 2 cm */
    --logo-h: 36px;
    --esa-h: 2cm;               /* ⟵ UTRZYMANE 2 cm */
    --branding-gap: 8px;
  }
  .grid-2x2 {
    grid-template-columns: 1fr;        /* jedna kolumna */
    grid-template-rows: none;
  }
  .logo { width: 36px; height: 36px; }
  .title { font-size: 1.4rem; margin-top: 8px; }
}

/* ==========================================================================
   14) Strona pełnoekranowej mapy (/map)
   ========================================================================== */

.page-full {
  height: calc(100vh - var(--header-h) - var(--menu-h));
  margin: 0;
  padding: 0;
  display: grid;
}
.page-full > .card { height: 100%; }
.page-full .card__content { height: 100%; }
.page-full .map-frame { height: 100%; }

/* ==========================================================================
   15) MAP POPUP – nagłówek, X, linia, kropki (rozszerzone)
   ========================================================================== */

.popup__header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.25rem;
}
.popup__title{
  font-size:1rem; font-weight:700; line-height:1.2; margin:0;
}
.popup__close{
  appearance:none; border:0; background:transparent; color:var(--fg);
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  cursor:pointer; transition:opacity .15s ease, transform .12s ease, background-color .15s ease;
}
.popup__close:hover{ opacity:.8; transform:translateY(-1px); }
.popup__close:focus-visible{ outline:2px solid var(--menu-active); outline-offset:2px; }
.popup__close .icon{ width:16px; height:16px; display:block; background: currentColor; }
.popup__close .icon-close{
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z'/>\
  </svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z'/>\
  </svg>") no-repeat center/contain;
}
.popup__divider{ border:none; border-top:1px solid var(--border); opacity:.9; margin:.35rem 0 .5rem; }
.popup__content{ display:flex; flex-direction:column; gap:.35rem; }
.popup__row{ display:flex; align-items:center; gap:.5rem; font-size:.95rem; }
.popup__dot{
  display:inline-block; width:10px; height:10px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); flex:0 0 10px;
}
.popup__dot--good{ background:#16a34a; }
.popup__dot--low { background:#f59e0b; }
.popup__dot--bad { background:#dc2626; }
.theme--dark .map-popup{ box-shadow:0 8px 22px rgba(0,0,0,.45); }
.theme--dark .popup__close:hover,
body.dark .popup__close:hover{ background:rgba(255,255,255,.06); } /* [AUTH] */
:not(.theme--dark) .popup__close:hover{ background:rgba(0,0,0,.06); }

/* ==========================================================================
   16) WYKRESY – wysokości i widoczność (SNR, skyplot, itp.)
   ========================================================================== */

.card--tall .card__body {
  height: 38vh;        /* dopasuj według potrzeb (np. 40vh) */
  min-height: 320px;   /* bezpiecznik dla małych ekranów */
}

.snr-graph,
.snr-graph .dash-graph,
.snr-graph .js-plotly-plot,
.snr-graph .plotly,
.snr-graph .main-svg {
  height: 100% !important;
  width: 100% !important;
}
.snr-graph { min-height: 320px; }

/* ==========================================================================
   ========================================================================== */
/* ==========================================================================
   STYLE DLA ELEMENTOW [AUTH} - SZABLONy ADMINA?LOGIN?REGISTER
   ========================================================================== */
/* ==========================================================================
   18) PANEL ADMINISTRATORA – specyficzne style (tylko admin-page)
   - .main--admin – szerokość i marginesy dla głównego obszaru panelu
   - .container   – zostawione dla kompatybilności
   ========================================================================== */

.page.admin-page .container,
.main.main--admin{
  max-width: 1440px;               /* szeroki kontener dla tabeli i sekcji */
  margin: 1rem auto;
}


/* ====== Ikonki statusów w tabeli (zielone ✓ / czerwone — / żółte …) ====== */
.page.admin-page .status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 9999px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid var(--border);
  user-select: none;
}
.page.admin-page .status--ok{
  background: rgba(34,197,94,.18);
  color: #16a34a;
  border-color: rgba(34,197,94,.35);
}
.page.admin-page .status--err{
  background: rgba(239,68,68,.15);
  color: #b91c1c;
  border-color: rgba(239,68,68,.35);
}
.page.admin-page .status--warn{
  background: rgba(245,158,11,.15);
  color: #b45309;
  border-color: rgba(245,158,11,.35);
}


/* Filtry nad tabelą – czytelna siatka i wyrównanie */
.page.admin-page .filters{
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem;
}
@media (max-width: 1100px){
  .page.admin-page .filters{ grid-template-columns: 1fr 1fr; }
}

/* ========================= TABELA UŻYTKOWNIKÓW ========================= */
.page.admin-page .card__content{
  overflow-x: auto;
  padding-top: 0 !important;
}
.page.admin-page .card__content .table-wrap{
  position: relative;
  overflow-x: auto;
}

/* Wygląd bazowy tabeli */
.page.admin-page .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--table-bg);
  color: var(--table-fg);
  border: 1px solid var(--table-border);
  border-radius: 12px;
  overflow: visible;
  font-size: 0.92rem;
  box-sizing: border-box;
  margin-top: 0 !important;
}
.page.admin-page .table th,
.page.admin-page .table td{ box-sizing: border-box; }

.page.admin-page .table--resizable{
  table-layout: fixed;
  --thead-h: 44px;
}

/* Sticky THEAD */
.page.admin-page .table-wrap .table thead{
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--table-header-bg);
  box-shadow: 0 1px 0 var(--table-border);
}
.page.admin-page .table thead th{
  position: static;
  border-bottom: 1px solid var(--table-border);
  padding: 0;
  white-space: nowrap;
}

.page.admin-page .table thead th .th-inner,
.page.admin-page .table thead th .th__label{
  display: block;
  padding: .6rem .9rem;
  padding-right: 1.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Suwaki kolumn */
.page.admin-page .table.table--resizable thead th{ position: relative; }
.page.admin-page .table thead th .th-resizer,
.page.admin-page .table.table--resizable .col-resizer{
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 100%;
  cursor: col-resize;
  user-select: none; touch-action: none;
  background: transparent;
  z-index: 9;
}
.page.admin-page .table thead th .th-resizer::after,
.page.admin-page .table.table--resizable .col-resizer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 3px; height: 100%;
  background: var(--primary);
  opacity: .45;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent);
  transition: opacity .12s ease, transform .12s ease;
}
.page.admin-page .table thead th:hover .th-resizer::after,
.page.admin-page .table.table--resizable .col-resizer:hover::before{
  opacity: .98;
  transform: scaleX(1.05);
}
.table--resizing *{ cursor: col-resize !important; }
.col-resize-guide{
  position: fixed; top: 0; bottom: 0;
  width: 2px; background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent);
  pointer-events: none; z-index: 9999;
}

/* Komórki */
.page.admin-page .table tbody td{
  border-bottom: 1px solid var(--table-border);
  padding: .55rem .65rem;
  vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Paskowanie i hover */
.page.admin-page .table tbody tr:nth-child(odd)  td{ background: var(--table-bg); }
.page.admin-page .table tbody tr:nth-child(even) td{ background: var(--table-stripe-bg); }
.page.admin-page .table tbody tr:hover td{
  background: var(--table-hover-bg);
  transition: background .12s ease;
}

/* Szerokości kolumn */
.page.admin-page .table thead th:nth-child(1),
.page.admin-page .table tbody td:nth-child(1){
  min-width: 64px; width: 72px; text-align: right;
}
.page.admin-page .table thead th:nth-child(2),
.page.admin-page .table tbody td:nth-child(2){
  min-width: 260px; width: 300px; word-break: break-all;
}
.page.admin-page .table thead th:nth-child(3),
.page.admin-page .table tbody td:nth-child(3){
  min-width: 88px; width: 100px; text-align: center;
}
.page.admin-page .table thead th:nth-child(4),
.page.admin-page .table tbody td:nth-child(4){
  min-width: 104px; width: 116px; text-align: center;
}
.page.admin-page .table thead th:nth-child(5),
.page.admin-page .table tbody td:nth-child(5){
  min-width: 104px; width: 116px; text-align: center;
}
.page.admin-page .table thead th:nth-child(6),
.page.admin-page .table tbody td:nth-child(6){
  min-width: 104px; width: 116px; text-align: center;
}
.page.admin-page .table thead th:nth-child(7),
.page.admin-page .table tbody td:nth-child(7){
  min-width: 130px; width: 150px;
}
.page.admin-page .table thead th:nth-child(8),
.page.admin-page .table tbody td:nth-child(8){
  min-width: 150px; width: 170px;
}
.page.admin-page .table thead th:nth-child(9),
.page.admin-page .table tbody td:nth-child(9){
  min-width: 130px; width: 150px;
}
.page.admin-page .table thead th:nth-child(10),
.page.admin-page .table tbody td:nth-child(10){
  min-width: 180px; width: 200px;
}
.page.admin-page .table thead th:nth-child(11),
.page.admin-page .table tbody td:nth-child(11){
  min-width: 140px; width: 160px;
}
.page.admin-page .table thead th:nth-child(12),
.page.admin-page .table tbody td:nth-child(12){
  min-width: 88px; width: 100px; text-align: center;
}
.page.admin-page .table thead th:nth-child(13),
.page.admin-page .table tbody td:nth-child(13){
  min-width: 106px; width: 120px; text-align: center;
}
.page.admin-page .table thead th:nth-child(14),
.page.admin-page .table tbody td:nth-child(14){
  min-width: 170px; width: 190px;
}
.page.admin-page .table thead th:nth-child(15),
.page.admin-page .table tbody td:nth-child(15){
  min-width: 170px; width: 190px;
}
.page.admin-page .table thead th:nth-child(16),
.page.admin-page .table tbody td:nth-child(16){
  min-width: 240px; width: 280px;
}
.page.admin-page .table thead th:nth-child(17),
.page.admin-page .table tbody td:nth-child(17){
  min-width: 320px; width: 360px; white-space: nowrap;
}

/* Drobne doprecyzowanie: statusowe kolumny centrowane także w thead */
.page.admin-page .table thead th:nth-child(3),
.page.admin-page .table thead th:nth-child(4),
.page.admin-page .table thead th:nth-child(5),
.page.admin-page .table thead th:nth-child(6),
.page.admin-page .table thead th:nth-child(12),
.page.admin-page .table thead th:nth-child(13){
  text-align: center;
}

/* Badges (status/monitoring) – kolorystyka spójna z motywem */
.page.admin-page .badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: .82em;
  font-weight: 700;
  border: 1px solid var(--border);
}
.page.admin-page .badge--ml{
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}

/* Sekcje w panelu – odstępy i nagłówki sekcji */
.page.admin-page .admin-section{ margin-top: 1rem; }
.page.admin-page .admin-section > h3{
  margin: .25rem 0 .6rem; font-size: 1.05rem;
}

/* Akcje w tabeli */
.page.admin-page .btn.btn--sm{
  font-size: .86rem; line-height: 1.1;
  padding: .4rem .55rem; border-radius: 8px;
}
.page.admin-page .btn.btn--warn{
  background: #f59e0b; color: #0b1220; border-color: #f59e0b;
}
.page.admin-page .btn.btn--warn:hover{ filter: brightness(0.96); }
.page.admin-page td form{ display: inline-flex; gap: .4rem; align-items: center; }
.page.admin-page .reject-reason{
  width: 100%;
  background: var(--card); color: var(--fg);
  border:1px solid var(--border); border-radius:10px;
  padding:.4rem .55rem; height: 36px; font-size:.92rem;
}

/* RWD – tabela -> „karty” */
@media (max-width: 900px){
  .page.admin-page .table thead{ display:none; }
  .page.admin-page .table,
  .page.admin-page .table tbody,
  .page.admin-page .table tr,
  .page.admin-page .table td{ display:block; width:100%; }
  .page.admin-page .table tr{
    margin: .5rem 0; border: 1px solid var(--table-border);
    border-radius: 10px; overflow: hidden;
  }
  .page.admin-page .table td{
    display: grid; grid-template-columns: 160px 1fr;
    gap: .5rem; border-bottom: 1px solid var(--table-border);
    white-space: normal;
  }
  .page.admin-page .table td:last-child{ border-bottom: 0; }
  .page.admin-page .table td::before{
    content: attr(data-label);
    font-weight: 700; color: var(--muted);
  }
}

/* pager w adminie – prawa strona, małe odstępy */
.page.admin-page .pager{
  display:flex; justify-content:flex-end; align-items:center;
  gap:.5rem; margin-top:.5rem;
}

/* Opcjonalny drobny „odsuw” tytułu w headerze, gdy nachodzi na logo */
.header .title{ padding-left: .25rem; }

/* ==========================================================================
   19) UZUPEŁNIENIA DLA AUTH/ADMIN I PRZYCISKÓW
   ========================================================================== */
.btn--danger { background: #ef4444; color: #ffffff; border-color: #ef4444; }
.btn--danger:hover { filter: brightness(0.95); }
.auth { display: inline-flex; align-items: center; gap: 8px; }
.auth .auth-name { font-weight: 700; margin-right: .5rem; }
.auth-badge { min-width: 140px; text-align: right; }
.menu__link:focus-visible,
a.menu__link:focus-visible{
  outline: 2px solid var(--menu-active); outline-offset: 2px; border-radius: 10px;
}
.theme--dark .btn:hover, body.dark .btn:hover{ filter: brightness(1.08); }

/* ==========================================================================
   20) AUTH – nowe formularze i karty (logowanie/rejestracja/reset)
   ========================================================================== */
.auth-card{
  width: 100%; max-width: 560px; margin: 1.25rem auto;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 18px 20px;
}
.auth-card .auth-card__title{
  font-size: 1.35rem; font-weight: 800; margin: 0 0 .75rem; color: var(--fg);
}
.form{ display:block; }
.form__row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.75rem; }
.form__row label{ font-weight:700; color:var(--fg); }
.form__row input, .form__row select, .form__row textarea{
  appearance:none; background: var(--card); color: var(--fg);
  border:1px solid var(--border); border-radius:10px; padding:.55rem .7rem; outline:none;
}
.form__row input:focus, .form__row select:focus, .form__row textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}
.password-field{ display:flex; align-items:stretch; gap:.5rem; }
.password-field input{ flex:1 1 auto; }
.password-field .btn--icon{
  padding:0 .7rem; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--fg);
}
.form__actions{ display:flex; gap:.5rem; align-items:center; margin-top:.25rem; }
.form__hint{ margin-top:.35rem; color: var(--muted); }
.form__fieldset{
  border:1px dashed var(--border); padding:.6rem .7rem; border-radius:12px;
  margin:.35rem 0 .75rem;
}
.form__fieldset legend{ padding:0 .35rem; color: var(--muted); }
.chk{ display:inline-flex; align-items:center; gap:.45rem; margin-right:.75rem; }
.flash-list{ display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 .75rem; }
.flash{
  background: color-mix(in oklab, var(--primary) 12%, var(--card));
  border:1px solid var(--border); color: var(--fg);
  padding:.55rem .7rem; border-radius:10px;
}
.toolbar{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
.toolbar__item{ display:flex; gap:.4rem; align-items:center; }
.toolbar__item input[type="email"], .toolbar__item input[type="text"]{
  background: var(--card); color: var(--fg);
  border:1px solid var(--border); border-radius:10px; padding:.45rem .55rem;
}
@media (max-width: 560px){
  .auth-card{ padding: 16px; border-radius: 14px; }
  .form__actions{ flex-direction: row; }
}

/* ==========================================================================
   21) Nagłówek i logo – zmienne rozmiaru + warianty
   ========================================================================== */
.header .logo{
  height: var(--logo-h);
  width:auto;
  margin-top:-3mm;               /* zmin: podnieś RTGMS o 3 mm */
  padding:0;
  background: transparent;
  display:inline-flex;
  align-items:center;
}
.header .logo img{
  display:block;
  height: var(--logo-h);
  width:auto;
}
.header--lg { --logo-h: 60px; }
.header--xl { --logo-h: 72px; }
@media (max-width: 900px){
  .header--lg, .header--xl { --logo-h: 44px; }
  .header .title { margin-top: 8px; }
}


/* zmin: ESA logo – stała wysokość 2 cm (w obu motywach) */
.header img.logo-esa{
  height: 2cm !important;      /* <-- TUTAJ ustawione 2 cm */
  max-height: 2cm !important;
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin-right: 8px;            /* mały odstęp przed RTGMS */
}

/* zmin: ESA – widoczność zależna od motywu (zgodnie z app_.py) */
#app-container.theme--dark  img.logo-esa--light { display: none !important; }
#app-container.theme--dark  img.logo-esa--dark  { display: inline-block !important; }
#app-container:not(.theme--dark) img.logo-esa--light { display: inline-block !important; }
#app-container:not(.theme--dark) img.logo-esa--dark  { display: none !important; }


/* ==========================================================================
   22) Admin – finalne dopracowanie sticky nagłówka
   ========================================================================== */
.page.admin-page .table-wrap .table thead{
  top: 0 !important;
  z-index: 8;
  background: var(--table-header-bg);
  box-shadow: 0 1px 0 var(--table-border);
}

/* ==========================================================================
   23) Patch do tabeli high_table
   ========================================================================== */

.table-frame{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
#high-table{
  flex:1 1 auto;
  min-height:0;
}
/* sticky header – tło zależne od motywu */
.theme--dark #high-table .dash-header {
  background-color:#0b1220;
  color:#e5e7eb;
}
.theme--light #high-table .dash-header {
  background-color:#f8fafc;
  color:#0f172a;
}
/* pasek z informacją o odświeżeniu – mniejszy i przytłumiony */
.table__refresh{
  margin-top:6px;
  font-size:12px;
  line-height:1.1;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Tabela wypełnia całą szerokość komórki/karty */
.datatable--stretch,
.datatable--stretch .dash-table-container,
.datatable--stretch .dash-spreadsheet-container,
.datatable--stretch .dash-spreadsheet-inner,
.datatable--stretch .dash-spreadsheet-inner table{
  width: 100% !important;
  max-width: none !important;
}
.datatable--stretch .dash-table-container .row{
  margin: 0;
  width: 100%;
}
/* Opcjonalnie: karta „bez paddingu” */
.card--flush .card__content { padding: 0; }
.card--flush .card__body { padding: 0; }

/* --- High table: TOOLTIP (węziej + łamanie wierszy, działa dla obu motywów) --- */
#app-container.theme--light .dash-table-tooltip,
#app-container.theme--dark  .dash-table-tooltip {
  max-width: 90px !important;   /* było 180px → połowa */
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;      /* łamie długie słowa */
  word-break: break-word;       /* dodatkowy bezpiecznik */
}

/* ==========================================================================
   24) Kalendarz
   ========================================================================== */

/* RTGMS — DatePickerSingle (react-dates) */
.mc2 { display: grid; gap: .5rem; }
.mc2 .dp-wrap { display: inline-block; }
.mc2 .dp-label { font-size: .9rem; color: var(--muted); }
.mc2 .dp-value { font-weight: 700; color: var(--fg); }

.SingleDatePicker { display: inline-block; }
.SingleDatePickerInput {
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.DateInput_input {
  background: var(--card); color: var(--fg);
  padding: .55rem .7rem; height: 36px; font-size: .95rem;
}
.DateInput_input__focused {
  border: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}
.SingleDatePicker_picker {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.CalendarMonth_caption { color: var(--fg); font-weight: 700; }
.DayPicker_weekHeader_li { color: var(--muted); }

.CalendarDay__default {
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
}
.CalendarDay__hovered_span, .CalendarDay__hovered { filter: brightness(1.06); }
.CalendarDay__blocked_out_of_range, .CalendarDay__blocked_calendar {
  color: color-mix(in oklab, var(--muted) 70%, transparent);
}
.CalendarDay__today {
  background: color-mix(in oklab, var(--primary) 75%, var(--card));
  color: var(--primary-contrast); border-color: var(--primary);
}
.CalendarDay__selected {
  background: color-mix(in oklab, var(--primary) 86%, var(--card));
  color: var(--primary-contrast); border-color: var(--primary);
}
.DayPickerNavigation_button {
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
}
.DayPickerNavigation_button:hover { filter: brightness(1.06); }
/* =======================================================================
   DatePicker — prawy dolny róg z "?" (przycisk skrótów klawiaturowych)
   ======================================================================= */
/* ==========================================================================
   DARK THEME — DatePicker (react-dates) ujednolicone kolory
   Stosuje się tylko do naszych pickerów (klasa .rtgms-dp) i gdy root ma
   klasę .theme--dark.
   ========================================================================== */
.theme--dark .rtgms-dp {
  /* [PALETA] — zmieniasz tutaj i cały kalendarz się dostosuje */
  --dp-bg:                 #1f2532;  /* tło inputa / karta */
  --dp-panel:              #262d3d;  /* tło rozwijanego kalendarza */
  --dp-border:             #3a465b;  /* obramowania */
  --dp-text:               #e6eef7;  /* podstawowy tekst */
  --dp-text-muted:         #a7b4c7;  /* opisowe/wyciszone */
  --dp-day-bg:             #222a3b;  /* kafelek dnia (default) */
  --dp-day-hover:          #2e384d;  /* hover na dniu */
  --dp-day-selected:       #1fb6ff;  /* wybrany dzień (akcent) */
  --dp-day-selected-text:  #08131f;  /* tekst na wybranym dniu */
  --dp-today-ring:         #66ccff;  /* obrys „dziś” */
  --dp-nav-bg:             #2a3446;  /* tło przycisków nawigacji < > */
  --dp-nav-icon:           #e6eef7;  /* kolor strzałek */
  --dp-week-header:        #b8c3d4;  /* nazwy dni tygodnia */

  /* róg z „?” – spójny odcień niebieskiego (możesz podmienić na --dp-day-selected) */
  --dp-help-bg:            #0b3d91;
  --dp-help-bg-hover:      #124ab9;
}

/* --------------------------- */
/* [1] Pole wejściowe (input)  */
/* --------------------------- */
.theme--dark .rtgms-dp .SingleDatePickerInput,
.theme--dark .rtgms-dp .SingleDatePickerInput__withBorder {
  background: var(--dp-bg) !important;
  border: 1px solid var(--dp-border) !important;
}
.theme--dark .rtgms-dp .DateInput {
  background: transparent !important;
}
.theme--dark .rtgms-dp .DateInput_input {
  background: transparent !important;
  color: var(--dp-text) !important;
}
.theme--dark .rtgms-dp .DateInput_input__focused {
  border-bottom: 1px solid var(--dp-day-selected) !important;
}

/* --------------------------- */
/* [2] Panel kalendarza        */
/* --------------------------- */
.theme--dark .rtgms-dp .DayPicker,
.theme--dark .rtgms-dp .DayPicker__withBorder,
.theme--dark .rtgms-dp .CalendarMonthGrid,
.theme--dark .rtgms-dp .CalendarMonth {
  background: var(--dp-panel) !important;
  border-color: var(--dp-border) !important;
  color: var(--dp-text) !important;
}

/* Nagłówek miesiąca i strzałki */
.theme--dark .rtgms-dp .CalendarMonth_caption {
  color: var(--dp-text) !important;
}
.theme--dark .rtgms-dp .DayPickerNavigation_button {
  background: var(--dp-nav-bg) !important;
  border: 1px solid var(--dp-border) !important;
}
.theme--dark .rtgms-dp .DayPickerNavigation_button__default svg {
  fill: var(--dp-nav-icon) !important;
}

/* Nagłówki dni tygodnia */
.theme--dark .rtgms-dp .DayPicker_weekHeader,
.theme--dark .rtgms-dp .DayPicker_weekHeader_li,
.theme--dark .rtgms-dp .DayPicker_weekHeader_li small {
  color: var(--dp-week-header) !important;
}

/* --------------------------- */
/* [3] Kafelki dni             */
/* --------------------------- */
.theme--dark .rtgms-dp .CalendarDay__default {
  background: var(--dp-day-bg) !important;
  border: 1px solid var(--dp-panel) !important; /* delikatna siatka */
  color: var(--dp-text) !important;
}
.theme--dark .rtgms-dp .CalendarDay__default:hover,
.theme--dark .rtgms-dp .CalendarDay__hovered_offset,
.theme--dark .rtgms-dp .CalendarDay__blocked_out_of_range:hover {
  background: var(--dp-day-hover) !important;
}

/* „Dzisiaj” – subtelny obrys */
.theme--dark .rtgms-dp .CalendarDay__today {
  box-shadow: 0 0 0 1px var(--dp-today-ring) inset !important;
}

/* Wybrany dzień */
.theme--dark .rtgms-dp .CalendarDay__selected,
.theme--dark .rtgms-dp .CalendarDay__selected:active,
.theme--dark .rtgms-dp .CalendarDay__selected:hover {
  background: var(--dp-day-selected) !important;
  color: var(--dp-day-selected-text) !important;
  border: 1px solid var(--dp-day-selected) !important;
}

/* Dni zablokowane / spoza miesiąca */
.theme--dark .rtgms-dp .CalendarDay__blocked_out_of_range,
.theme--dark .rtgms-dp .CalendarDay__blocked_calendar,
.theme--dark .rtgms-dp .CalendarDay__outside {
  color: var(--dp-text-muted) !important;
  background: #1b2130 !important;
  opacity: 0.7 !important;
}

/* --------------------------- */
/* [4] Panel skrótów „?”       */
/* --------------------------- */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show:focus,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show:hover {
  background-color: var(--dp-help-bg) !important;
}
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show--bottom-right,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show--top-right,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show--top-left,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show--bottom-left {
  border-color: var(--dp-help-bg) !important;  /* wariant „trójkąta z borderów” */
}
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__show .DayPickerKeyboardShortcuts__showSpan {
  color: #fff !important;  /* kolor znaku „?” */
}
/* ==========================================================================
   DARK THEME — Popup „Keyboard Shortcuts” (react-dates)
   Działa tylko dla naszych kalendarzy (.rtgms-dp) i gdy root ma .theme--dark
   ========================================================================== */
.theme--dark .rtgms-dp {
  /* paleta dla popupu */
  --dp-help-panel-bg:     #1b2130;  /* ciemne tło panelu */
  --dp-help-panel-text:   #eef3f8;  /* prawie biała treść */
  --dp-help-panel-muted:  #b9c6d8;  /* jaśniejszy opis */
  --dp-help-kbd-bg:       #2b3347;  /* tło „klawiszy” */
  --dp-help-kbd-border:   #495873;  /* ramka „klawiszów” */
  --dp-help-kbd-text:     #ffffff;  /* tekst w „klawiszach” */
  --dp-help-focus:        #1fb6ff;  /* focus outline / akcent */
}

/* Sam panel */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__panel {
  background: var(--dp-help-panel-bg) !important;
  color: var(--dp-help-panel-text) !important;
  border: 1px solid var(--dp-border, #3a465b) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}

/* Tytuł popupu */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__title {
  color: var(--dp-help-panel-text) !important;
}

/* Lista pozycji (teksty) */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__list,
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__listItem {
  color: var(--dp-help-panel-text) !important;
}

/* „Klawisze” (np. Enter, Esc) */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__kbd {
  background: var(--dp-help-kbd-bg) !important;
  border: 1px solid var(--dp-help-kbd-border) !important;
  color: var(--dp-help-kbd-text) !important;
  box-shadow: none !important;
}

/* Przycisk zamknięcia (X) i focus */
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__close {
  color: var(--dp-help-panel-text) !important;
}
.theme--dark .rtgms-dp .DayPickerKeyboardShortcuts__close:focus {
  outline: 2px solid var(--dp-help-focus) !important;
  outline-offset: 2px !important;
}

/* ========================================================================
   React-Dates: Keyboard Shortcuts panel — ciemny wariant (global override)
   ======================================================================== */

/* Sam panel (tło, obramowanie, cień) */
.DayPickerKeyboardShortcuts__panel {
  background: #1b2130 !important;        /* ciemne tło */
  color: #eef3f8 !important;              /* jasny tekst */
  border: 1px solid #3a465b !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}

/* Tytuł w panelu */
.DayPickerKeyboardShortcuts__title {
  color: #eef3f8 !important;
}

/* Opisy pozycji na liście */
.DayPickerKeyboardShortcuts__list,
.DayPickerKeyboardShortcuts__listItem {
  color: #eef3f8 !important;
}

/* „Klawisze” (ESC, Enter itd.) */
.DayPickerKeyboardShortcuts__kbd {
  background: #2b3347 !important;
  border: 1px solid #495873 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Przycisk zamknięcia (X) + focus */
.DayPickerKeyboardShortcuts__close {
  color: #eef3f8 !important;
}
.DayPickerKeyboardShortcuts__close:focus {
  outline: 2px solid #1fb6ff !important;
  outline-offset: 2px !important;
}


/* Kalendarz zawsze nad tabelą */
.rtgms-dp .SingleDatePicker_picker {
  z-index: 5000 !important;
}

/* (opcjonalnie) przycisk skrótów klawiaturowych w kalendarzu */
.rtgms-dp .DayPickerKeyboardShortcuts_buttonReset {
  z-index: 5001 !important;
}

/* Na wszelki wypadek podnieś też samą „ramkę” inputu */
.rtgms-dp .SingleDatePicker,
.rtgms-dp .SingleDatePickerInput {
  z-index: 5000;
}

/* ==========================================================================
   24) PATCH: LIGHT THEME – widoczne przerwy między sekcjami === */
   ========================================================================== */

/* === CLEAN PATCH — header i menu w normalnym przepływie (bez fixed/sticky) === */
/* + jasne „guttery” pozostają */
:root{
  --bg:#ffffff;
  --card:#f6f8fb;
  --border:#dfe5ee;
}
.grid-2x2, .grid-menu_high, .grid-menu_medium { gap: 1rem; }
.card { box-shadow: 0 8px 18px rgba(15,23,42,.06); }
:not(.theme--dark) .map-frame { border-color:#e6ecf3; }

/* 1) HEADER — zwykły element w strumieniu dokumentu */
.header{
  position: static !important;     /* >>> żadnego fixed/sticky */
  top: auto !important;            /* zerujemy poprzednie reguły */
  left: auto !important; right: auto !important;

  height: auto !important;         /* naturalna wysokość */
  min-height: var(--header-h) !important;
  padding: 0.75rem 1rem !important;

  z-index: auto !important;        /* nie przykrywa menu */
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.title{ margin-top: 0 !important; }
.logo { margin-top: 0 !important; }

.theme--dark .header, body.dark .header{
  background:#0b1220 !important;
  border-bottom-color:#1e293b !important;
}

/* 2) MENU — również normalnie w strumieniu, tuż pod headerem */
.menu{
  position: static !important;     /* >>> żadnego fixed/sticky */
  top: auto !important;
  left: auto !important; right: auto !important;

  height: var(--menu-h) !important;
  min-height: var(--menu-h) !important;
  display: flex !important; align-items: center !important;

  z-index: auto !important;
  background: var(--menu-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.theme--dark .menu, body.dark .menu{
  background:#0b1325 !important;
  border-bottom-color:#1e293b !important;
}

/* 3) Reset po wcześniejszych patchach */
body{ padding-top: 0 !important; }     /* żadnego odsuwania treści */
html, body, #app-container{ overflow: visible !important; }


/* === LIGHT THEME: mocniejsze cienie + wyraźniejsze paskowanie tabel === */

/* 1) Jaśniejsze karty, ciemniejsza ramka i bardziej kontrastowe tabele */
:root{
  --card: #f7f9fc;          /* karta minimalnie ciemniejsza niż tło strony */
  --border: #d6deea;        /* ciemniejsza ramka */
  /* Tabele: podbite kontrasty */
  --table-bg: #ffffff;
  --table-fg: #0b1320;
  --table-border: #d6deea;
  --table-header-bg: #e9eff7;
  --table-stripe-bg: #eef2f7;   /* co drugi wiersz */
  --table-hover-bg: #e3edff;    /* wyraźny hover */
}

/* 2) Wyraźniejsze cienie i separacja elementów kartopodobnych */
:not(.theme--dark) .card,
:not(.theme--dark) .auth-card,
:not(.theme--dark) .map-frame,
:not(.theme--dark) .map-popup {
  border-color: var(--border);
  box-shadow:
    0 1px 0 rgba(15,23,42,.06),
    0 10px 24px rgba(15,23,42,.14); /* mocniejszy cień */
}

/* Drobne odcięcie stopki w jasnym */
:not(.theme--dark) .footer{
  border-top-color: var(--border);
  box-shadow: 0 -1px 0 rgba(15,23,42,.06) inset;
}

/* 3) Dash DataTable – mocniejsze paskowanie i hover */
.dash-spreadsheet-container .dash-spreadsheet td,
.dash-spreadsheet-container .dash-spreadsheet th{
  color: var(--table-fg) !important;
  background-color: var(--table-bg) !important;
  border-color: var(--table-border) !important;
}
.dash-spreadsheet-container .dash-spreadsheet th{
  background-color: var(--table-header-bg) !important;
  font-weight: 700 !important;
}
.dash-spreadsheet-container .dash-spreadsheet tr:nth-child(even) td{
  background-color: var(--table-stripe-bg) !important;
}
.dash-spreadsheet-container .dash-spreadsheet tr:hover td{
  background-color: var(--table-hover-bg) !important;
}

/* 4) Tabela w panelu admina – te same kontrasty */
.page.admin-page .table{
  background: var(--table-bg);
  color: var(--table-fg);
  border-color: var(--table-border);
}
.page.admin-page .table thead{
  background: var(--table-header-bg);
}
.page.admin-page .table thead th{
  border-bottom-color: var(--table-border);
}
.page.admin-page .table tbody tr:nth-child(odd)  td{ background: var(--table-bg); }
.page.admin-page .table tbody tr:nth-child(even) td{ background: var(--table-stripe-bg); }
.page.admin-page .table tbody tr:hover td{
  background: var(--table-hover-bg);
  color: var(--table-fg);
}

/* 2) TOOLTIP (chmurka) – ma być czysto biały w jasnym motywie */
#app-container:not(.theme--dark) .dash-table-tooltip,
body:not(.dark) .dash-table-tooltip{
  background-color: #ffffff !important;
  color: #0b1220 !important;                  /* czytelny tekst */
  border: 1px solid #dfe5ee !important;       /* delikatna ramka */
  box-shadow: 0 8px 18px rgba(15,23,42,.16) !important;
  opacity: 1 !important;                      /* bez półprzezroczystości */
}


/* ==========================================================================
   25) === AUTH HIGHLIGHT (user + login/logout) — light + dark ===
   ========================================================================== */

/* === AUTH: Wyloguj w ciemnym niebieskim + nazwa pod przyciskiem === */
/* === AUTH — login & logout: ciemny szary; nazwa pod spodem jako sam tekst === */

/* Zmienne (możesz podmienić odcienie, jeśli chcesz) */
:root{
  --auth-pill-bg: #374151;      /* slate-700 */
  --auth-pill-border: #374151;
  --auth-pill-fg: #ffffff;
  --auth-pill-hover: #2d3340;   /* lekko ciemniejszy */
}

/* Sekcja auth: układ pionowy, wyrównanie do prawej */
.header .auth{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: .35rem !important;
}

/* Przyciski: Zaloguj i Wyloguj — ten sam styl w obu motywach */
.header .auth a,
.header .auth a.login,
.header .auth a[href*="login"],
.header .auth a.logout,
.header .auth a[href*="logout"],
.header .auth a[href*="wylog"]{
  order: 1; /* najpierw przycisk */
  background: var(--auth-pill-bg) !important;
  border: 1px solid var(--auth-pill-border) !important;
  color: var(--auth-pill-fg) !important;
  border-radius: 9999px !important;
  padding: .35rem .7rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  text-decoration: none !important;
}
.header .auth a:hover{
  background: var(--auth-pill-hover) !important;
  border-color: var(--auth-pill-hover) !important;
  filter: none !important;      /* wygasza wcześniejsze efekty */
  transform: translateY(-1px);
}

/* Nazwa użytkownika: sam tekst, bez „chipów”, pod przyciskiem */
.header .auth .auth-name{
  order: 2;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2;
  font-weight: 600;             /* sam tekst (bez badge) – możesz zmienić na 400 */
  color: #0b1220;               /* domyślnie: ciemny dla jasnego motywu */
}
/* W ciemnym motywie: jasny tekst dla nazwy */
.theme--dark .auth .auth-name,
body.dark .auth .auth-name{
  color: #e6eef7 !important;
}

/* (opcjonalnie) jeżeli masz .auth-badge (“Admin RTGMS”), ustaw niżej */
.header .auth-badge{ order: 3; }


#app-container.theme--light #cookie-banner {
  background: #ffffff !important;
  color: #0b1220 !important;
}
#app-container.theme--dark #cookie-banner {
  background: #000000 !important;
  color: #e2e8f0 !important;
}


/* ==========================================================================
   27) HOTFIX: Branding ESA/RTGMS – pewny rozmiar i zabezpieczenia
   --------------------------------------------------------------------------
   zmin: Ten blok dodaj na SAMYM KOŃCU pliku. Wymusza:
         - ESA = dokładnie 2 cm wysokości w obu motywach
         - tylko jeden wariant ESA (light/dark) naraz
         - aktywne menu z różnym tłem dla light/dark BEZ zmiany koloru czcionki
   ========================================================================== */

/* zmin: ESA = dokładnie 2 cm — końcowe wymuszenie (TU też zmieniłem rozmiar) */
#app-container .header img.logo-esa{
  height: 3.7cm !important;
  max-height: 3.7cm !important;
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* zmin: pokaż tylko właściwy wariant logo ESA */
#app-container .header img.logo-esa.logo-esa--light,
#app-container .header img.logo-esa.logo-esa--dark{ display: none !important; }
#app-container.theme--light .header img.logo-esa.logo-esa--light{ display:inline-block !important; }
#app-container.theme--dark  .header img.logo-esa.logo-esa--dark { display:inline-block !important; }

/* zmin: ABSOLUTNE zabezpieczenie – nie pozwól obrazom „wylać się”,
   ale NIE dotyczy to .logo-esa (żeby nie skasować 2 cm) */
#app-container .header img:not(.logo-esa){
  height: auto !important;
  width: auto !important;
  max-height: max(var(--logo-h, 60px), 2cm) !important;
}

/* zmin: branding w jednym rzędzie; RTGMS lekko „do środka” */
#app-container .header .branding{
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--branding-gap, 10px) !important;
}
#app-container .header .branding .logo{ margin-left: 6px !important; }

/* zmin: AKTYWNE MENU – inne tło dla jasnego i ciemnego (ostateczne nadpisanie)
   – DARK ma białą czcionkę */
#app-container:not(.theme--dark) .menu__link--active{
  background: rgba(15,23,42,.10) !important;
  color: inherit !important;
}
#app-container.theme--dark .menu__link--active{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important; /* zmin: wymuś białą w DARK */
}
/* hover nie zmienia zaznaczenia */
#app-container:not(.theme--dark) .menu__link--active:hover{
  background: rgba(15,23,42,.10) !important;
  color: inherit !important;
}
#app-container.theme--dark .menu__link--active:hover{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important; /* zmin */
}


/* zmin: branding w jednym rzędzie; RTGMS lekko „do środka” + PODNIESIENIE O 3 mm */
#app-container .header .branding .logo{
  margin-left: 6px !important;
  margin-top: -4mm !important;   /* <-- to podnosi RTGMS o 3 mm */
}

/* ==========================================================================
   28) Patch do wysokości naglowka!!!
   ========================================================================== */

/* === PATCH: header ~56px, logo ~44px, ESA ~36px === */
:root{
  --header-h: 62px;
  --logo-h: 10px;
  --esa-h: 115px;
}

/* zdejmuje wymuszone 3.7cm i znów wiąże ESA do zmiennej */
#app-container .header img.logo-esa{
  height: var(--esa-h) !important;
  max-height: var(--esa-h) !important;
}


/* 3) Upewniamy się, że RTGMS też bierze wysokość z --logo-h */
.header .logo,
.header .logo img{
  height: var(--logo-h) !important;
  width: auto !important;
}

/* 4) Header – niższy przez mniejsze odstępy (bez zmiany wielkości logo) */
.header{
  padding: var(--header-vpad) 1px !important;
  min-height: var(--header-h) !important;
}

/* odrobina mniej „powietrza” w pionie */
.header{
  padding: 1px 1px !important;
  min-height: var(--header-h) !important;
}

/* tytuł ciut mniejszy, bez marginesu w górę */
.header .title{
  font-size: 2.2rem !important;
  margin-top: 0 !important;
}

/* 6) (Opcjonalnie) mniejszy gap, żeby tytuł nie łamał się w kolejną linię */
.header__left{ gap: 30px !important; } /* zamiast 2cm */

/* =============== PATCH: mniejszy dystans karta↔stopka === */
/* Zmniejsz dolny padding i „bufor” min-height */
.main{
  padding-block-end: .45rem !important;                       /* było 1rem */
  min-height: calc(100vh - var(--header-h) - var(--menu-h) - 32px) !important; /* było -120px */
}

/* Jeżeli na /map używasz pełnoekranowego kontenera */
.page-full{
  height: calc(100vh - var(--header-h) - var(--menu-h) - 8px) !important;
}

/* Opcjonalnie: trochę słabszy cień, żeby wizualnie nie „pompował” przerwy */
.card{
  box-shadow: 0 4px 8px rgba(15,23,42,.10) !important;
}

/* ========== SUPER-TIGHT: karta ≈ stopka (regulowany 1 suwak) === */
:root{
  --footer-gap: 2px; /* ustaw 0px jeśli chcesz „na styk” */
}

.main{
  padding-block-end: var(--footer-gap) !important; /* było .45rem */
  /* usuń sztuczny bufor – dostosuj do realnej przerwy, a nie stałych 32px */
  min-height: calc(100vh - var(--header-h) - var(--menu-h) - var(--footer-gap)) !important;
}

/* Pełnoekranowa mapa: dopasuj 1:1 do wysokości viewportu bez zapasu */
.page-full{
  height: calc(100vh - var(--header-h) - var(--menu-h) - var(--footer-gap)) !important;
}

/* Na wszelki wypadek: ostatni element w .main bez dodatkowego dołu */
.main > :last-child{ margin-bottom: 0 !important; }

/* (opcjonalnie) delikatniejszy cień, żeby optycznie nie „pompował” przerwy */
.card{ box-shadow: 0 3px 6px rgba(15,23,42,.08) !important; }

/* Bezpieczny obszar na iOS (żeby nie przyciąć zawartości przy notchu) */
@supports (padding: max(0px)){
  .main{
    padding-bottom: max(var(--footer-gap), env(safe-area-inset-bottom)) !important;
  }
}


/* === PATCH: odsunięcie flag/tematu i loginu od prawej krawędzi === */
:root{
  /* elastyczny „gutter” przy krawędziach */
  --page-gutter-x: clamp(14px, 2.4vw, 28px);
}

/* Zostawiasz niski header (małe padding-block), ale dajesz luz w poziomie */
.header{
  padding-inline: var(--page-gutter-x) !important; /* ← NOWE: lewa+ prawa */
  padding-block: 2px !important;                    /* wysokość jak lubisz */
}

/* Dla spójności możesz też odsunąć menu i stopkę (opcjonalnie) */
.menu{   padding-inline: var(--page-gutter-x) !important; }
.footer{ padding-inline: var(--page-gutter-x) !important; }

/* iOS / notche – wykorzystaj bezpieczny obszar (opcjonalnie) */
@supports (padding: max(0px)) {
  .header{
    padding-right: max(var(--page-gutter-x), env(safe-area-inset-right)) !important;
    padding-left:  max(var(--page-gutter-x), env(safe-area-inset-left))  !important;
  }
}

/* --------------------------------------------------------------------------
   MAPA + TABELA na stronie main (grid-menu_map--split)
   – twardy limit wysokości samej mapy i tabeli
   -------------------------------------------------------------------------- */

/* MAPA – sztywna wysokość, np. 420px */
.grid-menu_map--split .card--map .map-frame {
  height: 520px !important;      /* <<< TUTAJ regulujesz wysokość mapy - bylo 560 */
  max-height: 520px !important;
  min-height: 0;
}

/* TABELA – ten sam limit, tabela będzie się scrollować w środku */
.grid-menu_map--split .card--side #main-table-wrapper {
  height: 520px !important;      /* <<< TUTAJ regulujesz wysokość tabeli */
  max-height: 520px !important;
  min-height: 0;
}

/* Scroll wewnątrz kontenera tabeli, nie „pompowanie” całej karty */
.grid-menu_map--split .card--side #main-table-wrapper .dash-spreadsheet-container {
  overflow-y: auto !important;
}

/* --------------------------------------------------------------------------

   -------------------------------------------------------------------------- */