/* =========================
   Modern font
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* =========================
   Design system (light/dark)
   ========================= */
html { -webkit-text-size-adjust: 100%; }
:root{
  --bg: #f5f6f7;
  --text: #1d1d1f;
  --box: #ffffff;
  --box2:#f2f3f5;
  --switch-on: #e3e6ea;
  --border:#e3e6ea;
  --muted:#585a5e;
  --highlight:#e53935;
  --shadow: rgba(26,33,44,.10);
  --ring: rgba(229,57,53,.20);
  --safe: env(safe-area-inset-bottom, 0px);
}
body.dark-mode{
  --bg:#0f1113; --text:#ffffff; --box:#16181b; --box2:#202329; --border:#2a2e35; --muted:#bdbdbd; --switch-on: #e53935;
  --shadow: rgba(0,0,0,.48); --ring: rgba(229,57,53,.35);
}
[inert]{ pointer-events:none; }

/* =========================
   Global
   ========================= */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  /* ważne: bez 'fixed' (psuło iOS WebApp) */
  background:
    linear-gradient(180deg, rgba(229,57,53,.06), rgba(229,57,53,0) 55%),
    var(--bg);
  background-attachment: scroll, scroll;
  min-height:100dvh;
  overflow-x:hidden;
}

/* =========================
   Header / Back / User
   ========================= */
header.header{
  position:relative;
  align-items:center; justify-content:center; /* środek tytułu */
  background-color: var(--highlight); color:#fff;
  box-shadow:0 10px 30px var(--shadow);
  border-bottom:1px solid var(--border);
  min-height:56px;
}
header.header .header-title{
  font-weight:800; font-size:1.1rem; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Back po lewej (domyślnie ukryty) */
header.header .back-btn{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#fff; cursor:pointer;
  width:36px; height:36px; border-radius:10px; display:none;
}
header.header .back-btn .material-icons-outlined{ font-size:24px }

/* PRAWA KRAWĘDŹ — ikona + dropdown zakotwiczone do prawej */
header.header .header-right{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center;
}

/* Ikona użytkownika – twardy reset, wygląda jak <span> */
header.header .user-button{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; box-shadow:none; outline:0;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; padding:0;
  -webkit-tap-highlight-color:transparent;
}
header.header .user-button:focus-visible{ box-shadow:0 0 0 4px var(--ring) }
header.header .user-button .material-icons-outlined{ font-size:36px; color:#fff; line-height:1 }

/* Dropdown użytkownika — pod ikoną, prawa krawędź */
header.header .user-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  width:230px; background:var(--box); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:0 16px 32px var(--shadow);
  overflow:hidden; transform-origin: top right;
  opacity:0; transform: translateY(-6px) scale(.98);
  pointer-events:none; transition: opacity .18s ease, transform .18s ease;
  z-index:2000;
}
header.header .user-menu[aria-hidden="false"]{
  opacity:1; transform: translateY(0) scale(1); pointer-events:auto;
}
header.header .user-menu::after{
  content:""; position:absolute; right:14px; top:-8px;
  border:8px solid transparent; border-bottom-color:var(--box);
}

/* Pozycje w menu — twardy reset wyglądu przycisków */
header.header .user-menu .user-menu-item{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; box-shadow:none;
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 14px; text-align:left; cursor:pointer;
  font: inherit; color: inherit;
}
header.header .user-menu .user-menu-item:hover{ background:var(--box2) }
header.header .user-menu .user-menu-item .material-icons-outlined{ font-size:22px; color:var(--highlight) }

/* =========================
   Grid / Tiles
   ========================= */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; padding:10px; max-width:900px; margin:0 auto;
}
.tile{
  background:var(--box);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 1px 3px var(--shadow);
  text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio:1/1; transition:background .15s ease, transform .06s ease, border-color .15s ease;
}
.tile:hover{ background:var(--box2) }
tile:active, .tile:active{ transform: translateY(1px) }
.tile:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
.tile .material-icons-outlined,
.tile .material-symbols-outlined{ font-size:40px; color:var(--highlight) }
.tile span{ margin-top:10px; font-size:.92rem }

@media (max-width:600px){
  html,body{ overflow-x:hidden }
  .grid{ grid-template-columns:repeat(3,1fr) }
  .tile .material-icons-outlined{ font-size:34px }
}

/* =========================
   Dynamic section (iframe)
   ========================= */
#dynamicContent{ padding:0; display:none }
#dynamicContent iframe{
  width:100%;
  /* ważne: bez dvh, nie wymuszamy wysokości – to powodowało pas w iOS PWA */
  min-height:0;
  border:0;
  display:block;
}

/* --- ensure header is always above content/iframe --- */
header.header {
  position: sticky; /* zostaje na górze przy scrollu */
  top: 0;
  z-index: 1000;    /* ponad iframe */
}

/* iframe nigdy nie ma przysłaniać headera */
#dynamicContent { position: relative; z-index: 1; }
#dynamicContent iframe { position: relative; z-index: 1; }

/* prawa sekcja headera (przycisk użytkownika) pewnie nad tytułem itp. */
header.header .header-right { z-index: 1001; }

/* bezpieczeństwo: header i jego dzieci mają aktywne pointer-events */
header.header, header.header * { pointer-events: auto; }

/* =========================
   Generic modals (backdrop + baza)
   ========================= */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
}
.modal-box{
  background:var(--box); color:var(--text);
  width:min(92vw,600px); max-height:90vh; overflow:auto;
  margin:60px auto; padding:20px; border-radius:12px;
  border:1px solid var(--border); box-shadow:0 18px 40px var(--shadow);
  position:relative;
}
.modal-close{
  position:absolute; top:10px; right:10px; background:none; border:none; font-size:24px; cursor:pointer; color:var(--highlight);
}

/* =========================
   User modal (Kontoverwaltung) – dark
   ========================= */
.modal-box.user-modal{
  background:#1b1f24; color:#fff;
  border:1px solid #2a2e35;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  animation: modalIn .18s ease;
}
@keyframes modalIn{
  from{ opacity:0; transform: translateY(6px) scale(.98) }
  to  { opacity:1; transform: none }
}
.user-modal h3{ color:#fff }
.user-modal .muted{ color:#9aa4af }

.user-modal .user-modal-header{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.user-modal #userAvatar{
  width:90px; height:90px; border-radius:50%;
  object-fit:cover; border:3px solid #2a2e35;
}

/* Etykiety + pola wejściowe – wariant dark */
.user-modal .field label{ color:#fff }
.user-modal .field input{
  background:#0f1317; border:1px solid #2a2e35; color:#fff;
}
.user-modal .field input::placeholder{ color:#7a8087 }
.user-modal .field input:focus{
  outline:none; border-color:#e53935; box-shadow:0 0 0 4px rgba(229,57,53,.35);
}

/* Przyciski w user modal */
.user-modal .btn{ background:var(--highlight); color:#fff }
.user-modal .btn:hover{ filter:brightness(.95) }
.user-modal .btn-secondary{ background:#0f1317; color:#fff; border:1px solid #2a2e35; }
.user-modal .btn-secondary:hover{ filter:brightness(1.05) }

/* Wersja powiększona po "Kontoverwaltung" */
.user-modal.user-modal--large{ width:min(96vw, 720px) }
.user-modal.user-modal--large #userAvatar{ width:110px; height:110px }
.user-modal.user-modal--large .field input{ font-size:18px; padding:14px }
.user-modal.user-modal--large h3{ font-size:1.2rem }

/* Fallback avatara w modalu (gdy brak obrazka) */
.avatar-fallback{
  width:90px; height:90px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0f1317; border:3px solid #2a2e35; color:#fff;
}
.avatar-fallback .material-icons-outlined{ font-size:42px }
.user-modal.user-modal--large .avatar-fallback{ width:110px; height:110px }

/* =========================
   Formularze + przyciski (global – jasny wariant)
   ========================= */
.field{ display:flex; flex-direction:column; gap:.35rem; margin:.65rem 0 }
.field input{
  font-size:16px; padding:12px; border-radius:12px; border:1px solid var(--border);
  background:var(--box2); color:var(--text);
}
.field input:focus{ outline:none; border-color:var(--highlight); box-shadow:0 0 0 4px var(--ring) }

.actions{
  display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:10px;
}
.btn{
  padding:12px 16px; border:none; border-radius:12px; background:var(--highlight);
  color:#fff; font-weight:800; cursor:pointer;
}
.btn:hover{ filter:brightness(.95) }
.btn:active{ transform: translateY(1px) }

.btn-secondary{
  padding:12px 16px; border:none; border-radius:12px; background:var(--box2);
  color:var(--text); font-weight:800; cursor:pointer; border:1px solid var(--border);
}
.btn-secondary:hover{ filter:brightness(.98) }

.btn-sm{
  font-size:.9rem; padding:6px 12px; border:none; border-radius:8px; background:var(--highlight); color:#fff; cursor:pointer
}
.btn-sm:hover{ filter:brightness(.95) }

/* =========================
   Notification overlay (POPR.) 
   ========================= */
#notificationOverlay{
  position: fixed;
  inset: 0;
  /* Jeżeli chcesz delikatne tło: odkomentuj poniższe */
  /* background: rgba(0,0,0,.08); */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  z-index: 5000; /* ponad headerem i iframe */
}

.notificationCard{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(720px, 92vw);
  width: auto;
  background: var(--box);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--highlight);
  border-radius: 12px;
  box-shadow: 0 12px 30px var(--shadow);
  padding: 12px 14px;
  animation: notifIn .18s ease both;
  position: relative;
}
.notificationCard .material-icons-outlined{ font-size:24px; line-height:1 }

.notificationCard .message{
  line-height:1.35;
  font-size:.98rem;
}

/* Akcent wg typu */
.notificationCard[data-type="info"]    { border-left-color:#1e88e5; }
.notificationCard[data-type="success"] { border-left-color:#2e7d32; }
.notificationCard[data-type="warning"] { border-left-color:#ef6c00; }
.notificationCard[data-type="error"]   { border-left-color:#c62828; }

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

@media (max-width:600px){
  #notificationOverlay{ align-items: stretch; padding: 8px; }
  .notificationCard{ max-width:100%; }
}

/* =========================
   Nieużywane komponenty (placeholdery)
   ========================= */
/* UWAGA: usunięto #notificationOverlay z tej reguły */
#permissionsModal, .sidebar, .bottom-section, .carousel-container, .slide { display:none }