:root {
  --gpspol-navy: #061525;
  --gpspol-blue: #0ea5e9;
  --gpspol-cyan: #22d3ee;
  --gpspol-green: #16a34a;
  --gpspol-soft: #eef8ff;
  --gpspol-card: rgba(255,255,255,.92);
}

html, body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.gpspol-login {
  background:
    radial-gradient(circle at 20% 20%, rgba(34,211,238,.28), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(14,165,233,.18), transparent 36%),
    linear-gradient(135deg, #eaf8ff 0%, #f8fbff 45%, #ffffff 100%) !important;
}

body.gpspol-login::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: min(42vw, 760px);
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(6,21,37,.94), rgba(8,47,73,.88)),
    radial-gradient(circle at 60% 30%, rgba(34,211,238,.35), transparent 35%);
  box-shadow: 20px 0 80px rgba(6,21,37,.14);
  z-index: 0;
}

body.gpspol-login #root {
  position: relative;
  z-index: 1;
}

body.gpspol-login input {
  font-size: 16px !important;
}

body.gpspol-login fieldset {
  border-color: rgba(15, 23, 42, .18) !important;
  border-radius: 14px !important;
}

body.gpspol-login button {
  border-radius: 14px !important;
  min-height: 48px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 14px 34px rgba(22, 163, 74, .28) !important;
}

body.gpspol-login button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

#gpspol-login-badge {
  position: fixed;
  left: min(5vw, 70px);
  bottom: 54px;
  width: min(32vw, 470px);
  color: white;
  z-index: 2;
  pointer-events: none;
}

#gpspol-login-badge .gpspol-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#gpspol-login-badge h1 {
  margin: 18px 0 10px;
  font-size: clamp(28px, 3.1vw, 54px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.04em;
}

#gpspol-login-badge p {
  margin: 0;
  max-width: 520px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.65;
}

#gpspol-login-badge .gpspol-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

#gpspol-login-badge .gpspol-pills span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
}

#gpspol-secure-note {
  position: fixed;
  right: 38px;
  bottom: 28px;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
}

body:not(.gpspol-login) {
  background: #f8fafc !important;
}

body:not(.gpspol-login) button,
body:not(.gpspol-login) [role="button"] {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

body:not(.gpspol-login) button:hover,
body:not(.gpspol-login) [role="button"]:hover {
  filter: brightness(1.02);
}

@media (max-width: 900px) {
  body.gpspol-login::before,
  #gpspol-login-badge {
    display: none;
  }

  #gpspol-secure-note {
    left: 18px;
    right: 18px;
    bottom: 18px;
    text-align: center;
  }
}

/* GPSPOL FIX R2 - stable login overlay */
body.gpspol-login::before {
  z-index: 2147483000 !important;
  width: min(42vw, 760px) !important;
}

#gpspol-login-badge {
  z-index: 2147483002 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#gpspol-secure-note {
  z-index: 2147483003 !important;
}

body.gpspol-login #root {
  position: relative !important;
  z-index: 1 !important;
}

/* maska, żeby stary branding/logo Traccara nie przebijał przez lewy panel */
#gpspol-left-shield {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(42vw, 760px);
  z-index: 2147483001;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 26%, rgba(34,211,238,.24), transparent 34%),
    linear-gradient(135deg, rgba(6,21,37,.98), rgba(8,47,73,.96));
  box-shadow: 24px 0 90px rgba(6,21,37,.18);
}

@media (max-width: 900px) {
  #gpspol-left-shield {
    display: none;
  }
}

/* GPSPOL R3 - premium login card refinement */
body.gpspol-login {
  overflow: hidden;
}

body.gpspol-login::after {
  content: "";
  position: fixed;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  width: 440px;
  height: 330px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)),
    radial-gradient(circle at 50% 0%, rgba(34,211,238,.18), transparent 42%);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow:
    0 34px 90px rgba(15,23,42,.13),
    0 0 70px rgba(22,163,74,.10);
  z-index: 0;
  pointer-events: none;
}

body.gpspol-login form {
  position: relative !important;
  z-index: 5 !important;
  padding: 34px 34px 30px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 26px 70px rgba(15,23,42,.10),
    0 0 60px rgba(22,163,74,.10) !important;
  backdrop-filter: blur(18px) !important;
}

body.gpspol-login form::before {
  content: "Zaloguj do GPSPOL";
  display: block;
  margin-bottom: 18px;
  color: #061525;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
}

body.gpspol-login form::after {
  content: "Monitoring GPS pojazdów, rowerów i lokalizatorów";
  display: block;
  margin-top: 18px;
  color: rgba(15,23,42,.48);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

body.gpspol-login input {
  background: rgba(248,250,252,.92) !important;
}

body.gpspol-login input:focus {
  background: white !important;
}

body.gpspol-login button:not(:disabled) {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  color: white !important;
  box-shadow:
    0 18px 38px rgba(22,163,74,.28),
    0 0 34px rgba(34,197,94,.16) !important;
}

body.gpspol-login button:disabled {
  opacity: .72 !important;
  box-shadow: none !important;
}

#gpspol-login-badge h1 {
  text-shadow: 0 10px 34px rgba(0,0,0,.20);
}

#gpspol-login-badge p {
  color: rgba(255,255,255,.84) !important;
}

@media (max-width: 900px) {
  body.gpspol-login::after {
    display: none;
  }

  body.gpspol-login form {
    box-shadow: 0 18px 50px rgba(15,23,42,.10) !important;
  }
}

/* GPSPOL R4 - poprawka okien modalnych / QR */
body.gpspol-login::before {
  z-index: 40 !important;
}

#gpspol-left-shield {
  z-index: 41 !important;
}

#gpspol-login-badge {
  z-index: 42 !important;
}

#gpspol-secure-note {
  z-index: 43 !important;
}

body.gpspol-login #root {
  position: relative !important;
  z-index: 1 !important;
}

/* Gdy Traccar otwiera modal/QR, modal ma być nad brandingiem */
body.gpspol-login:has(.MuiModal-root) #gpspol-left-shield,
body.gpspol-login:has(.MuiModal-root) #gpspol-login-badge,
body.gpspol-login:has(.MuiModal-root) #gpspol-secure-note {
  z-index: 1 !important;
}

/* Lekko poprawione okno QR/modal */
.MuiDialog-paper,
.MuiModal-root .MuiPaper-root {
  border-radius: 22px !important;
  box-shadow: 0 34px 90px rgba(15,23,42,.22) !important;
}

/* GPSPOL R5 - ukrycie QR konfiguracji aplikacji z ekranu logowania */
body.gpspol-login button[aria-label*="qr" i],
body.gpspol-login button[title*="qr" i],
body.gpspol-login svg[data-testid*="Qr" i],
body.gpspol-login svg[data-testid*="QR" i] {
  display: none !important;
}

/* GPSPOL INTERNAL R1 - delikatne unowocześnienie panelu po zalogowaniu */
body:not(.gpspol-login) {
  --gpspol-dark: #061525;
  --gpspol-green: #16a34a;
  --gpspol-blue: #0ea5e9;
}

/* delikatniejsze przejścia */
body:not(.gpspol-login) * {
  transition: box-shadow .18s ease, background-color .18s ease, border-color .18s ease, transform .14s ease;
}

/* lewy panel urządzeń */
body:not(.gpspol-login) [class*="MuiDrawer-paper"],
body:not(.gpspol-login) aside,
body:not(.gpspol-login) nav {
  box-shadow: 10px 0 36px rgba(15, 23, 42, .10) !important;
}

/* lista urządzeń - subtelne karty */
body:not(.gpspol-login) [role="button"],
body:not(.gpspol-login) li {
  border-radius: 12px !important;
}

/* przyciski i ikony */
body:not(.gpspol-login) button {
  border-radius: 12px !important;
}

body:not(.gpspol-login) button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12) !important;
}

/* popup urządzenia na mapie */
body:not(.gpspol-login) .ol-overlaycontainer-stopevent [class*="MuiPaper-root"],
body:not(.gpspol-login) [class*="MuiPaper-root"] {
  border-radius: 18px !important;
}

/* mały pasek marki w panelu */
#gpspol-app-badge {
  position: fixed;
  left: 86px;
  top: 15px;
  z-index: 900;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 36px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (max-width: 900px) {
  #gpspol-app-badge {
    display: none;
  }
}

/* GPSPOL INTERNAL R2 - czystszy panel wewnętrzny */

/* usuń badge, który zasłania wyszukiwarkę */
#gpspol-app-badge {
  display: none !important;
}

/* tło panelu poza mapą */
body:not(.gpspol-login) {
  background: #f6f9fc !important;
}

/* lewy panel urządzeń */
body:not(.gpspol-login) [class*="MuiDrawer-paper"] {
  border-right: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 14px 0 44px rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(14px) !important;
}

/* wyszukiwarka urządzeń */
body:not(.gpspol-login) input {
  border-radius: 14px !important;
}

/* lista urządzeń */
body:not(.gpspol-login) li,
body:not(.gpspol-login) [role="button"] {
  border-radius: 14px !important;
}

body:not(.gpspol-login) li:hover,
body:not(.gpspol-login) [role="button"]:hover {
  background: rgba(14,165,233,.06) !important;
}

/* dolne menu */
body:not(.gpspol-login) [class*="MuiBottomNavigation-root"] {
  border-top: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 -10px 30px rgba(15,23,42,.08) !important;
}

/* przyciski mapy po prawej */
body:not(.gpspol-login) .ol-control button,
body:not(.gpspol-login) button {
  border-radius: 13px !important;
}

/* popup urządzenia na mapie */
body:not(.gpspol-login) [class*="MuiPaper-root"] {
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.16) !important;
}

/* ustawienia - karty */
body:not(.gpspol-login) [class*="MuiAccordion-root"],
body:not(.gpspol-login) [class*="MuiCard-root"] {
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
}

/* pola w ustawieniach */
body:not(.gpspol-login) [class*="MuiOutlinedInput-root"] {
  border-radius: 13px !important;
  background: rgba(255,255,255,.94) !important;
}

/* aktywny kolor GPSPOL */
body:not(.gpspol-login) .Mui-selected,
body:not(.gpspol-login) [aria-selected="true"] {
  color: #0f766e !important;
}

/* mapa ma zostać czysta */
body:not(.gpspol-login) .ol-viewport,
body:not(.gpspol-login) canvas {
  filter: saturate(.96) contrast(1.02);
}

/* GPSPOL CLIENT PRO R1 */

/* usuń poprzedni badge z mapy */
#gpspol-app-badge {
  display: none !important;
}

/* lepsze Raporty / Ustawienia / karty */
body:not(.gpspol-login) [class*="MuiDrawer-paper"] {
  background: rgba(255,255,255,.97) !important;
  border-right: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 16px 0 48px rgba(15,23,42,.10) !important;
  backdrop-filter: blur(14px) !important;
}

body:not(.gpspol-login) [class*="MuiPaper-root"],
body:not(.gpspol-login) [class*="MuiAccordion-root"],
body:not(.gpspol-login) [class*="MuiCard-root"] {
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.08) !important;
}

body:not(.gpspol-login) [class*="MuiOutlinedInput-root"] {
  border-radius: 14px !important;
  background: rgba(255,255,255,.95) !important;
}

body:not(.gpspol-login) button {
  border-radius: 14px !important;
}

body:not(.gpspol-login) button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15,23,42,.12) !important;
}

body:not(.gpspol-login) li,
body:not(.gpspol-login) [role="button"] {
  border-radius: 14px !important;
}

body:not(.gpspol-login) li:hover,
body:not(.gpspol-login) [role="button"]:hover {
  background: rgba(14,165,233,.06) !important;
}

/* klient ograniczony - ukryte elementy administracyjne */
body.gpspol-client-limited .gpspol-admin-only,
body.gpspol-client-limited [data-gpspol-hide-client="1"] {
  display: none !important;
}

/* karta informacyjna w raportach */
#gpspol-client-info-card {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  width: 310px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 24px 70px rgba(15,23,42,.13);
  backdrop-filter: blur(16px);
  color: #0f172a;
  font-size: 13px;
}

#gpspol-client-info-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #061525;
}

#gpspol-client-info-card span {
  display: block;
  color: rgba(15,23,42,.62);
  line-height: 1.45;
}

@media (max-width: 1000px) {
  #gpspol-client-info-card {
    display: none;
  }
}

/* GPSPOL LOGOUT FIX R1 */
#gpspol-logout-button {
  position: fixed;
  right: 22px;
  top: 18px;
  z-index: 9999;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  color: #0f172a;
  box-shadow: 0 14px 36px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
  padding: 10px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

#gpspol-logout-button:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

body.gpspol-login #gpspol-logout-button {
  display: none !important;
}

@media (max-width: 900px) {
  #gpspol-logout-button {
    top: auto;
    right: 14px;
    bottom: 14px;
    padding: 10px 13px;
  }
}