:root{
  /* ═══════════════════════════════════════════════
     PALETA KOLORÓW
     Edytuj wartości RGB aby zmienić kolory aplikacji.
     Każdy --p-* to trójka R,G,B — używana z rgba().
     Każdy --c-* to gotowy kolor — używany jako color/background.
     ═══════════════════════════════════════════════ */

  /* ── Bazowe RGB (do rgba/rgb składania) ────────── */

  /* Slate (neutralne) */
  --p-slate-50:  248, 250, 252;
  --p-slate-100: 241, 245, 249;
  --p-slate-300: 203, 213, 225;
  --p-slate-400: 148, 163, 184;
  --p-slate-500: 100, 116, 139;
  --p-slate-600: 71, 85, 105;
  --p-slate-700: 51, 65, 85;
  --p-slate-900: 15, 23, 42;

  /* Gray (ciepłe neutralne) */
  --p-gray-100: 243, 244, 246;
  --p-gray-200: 229, 231, 235;

  /* Blue (primary / rental) */
  --p-blue-400: 96, 165, 250;
  --p-blue-500: 59, 130, 246;
  --p-blue-600: 37, 99, 235;
  --p-blue-700: 29, 78, 216;
  --p-blue-950: 11, 31, 90;

  /* Sky */
  --p-sky-300: 125, 211, 252;
  --p-sky-400: 56, 189, 248;
  --p-sky-500: 14, 165, 233;

  /* Violet */
  --p-violet-600: 124, 58, 237;
  --p-violet-800: 91, 33, 182;
  --p-violet-950: 46, 16, 101;

  /* Fuchsia (event) */
  --p-fuchsia-500: 217, 70, 239;
  --p-fuchsia-600: 192, 38, 211;
  --p-fuchsia-800: 134, 25, 143;

  /* Purple */
  --p-purple-700: 126, 34, 206;

  /* Orange */
  --p-orange-100: 255, 237, 213;
  --p-orange-400: 251, 146, 60;
  --p-orange-500: 249, 115, 22;
  --p-orange-900: 124, 45, 18;

  /* Amber */
  --p-amber-600: 217, 119, 6;
  --p-amber-700: 180, 83, 9;

  /* Green (success) */
  --p-green-100: 220, 252, 231;
  --p-green-600: 22, 163, 74;
  --p-green-700: 21, 128, 61;
  --p-green-800: 22, 101, 52;
  --p-green-900: 20, 83, 45;

  /* Emerald */
  --p-emerald-500: 16, 185, 129;

  /* Red (danger) */
  --p-red-50:  254, 242, 242;
  --p-red-100: 254, 226, 226;
  --p-red-500: 239, 68, 68;
  --p-red-600: 220, 38, 38;
  --p-red-700: 185, 28, 28;
  --p-red-800: 153, 27, 27;
  --p-red-900: 127, 29, 29;

  /* White */
  --p-white: 255, 255, 255;

  /* Cienie i tła ciemne */
  --p-shadow-base: 8, 20, 50;
  --p-shadow-deep: 2, 8, 23;
  --p-shadow-top:  5, 12, 28;
  --p-backdrop:    7, 15, 30;
  --p-dark-alt:    17, 24, 39;
  --p-line-raw:    186, 198, 214;

  /* ── Kolory stałe (zbudowane z palety) ─────────── */
  --c-white:       rgb(var(--p-white));
  --c-slate-50:    rgb(var(--p-slate-50));
  --c-slate-100:   rgb(var(--p-slate-100));
  --c-slate-300:   rgb(var(--p-slate-300));
  --c-slate-400:   rgb(var(--p-slate-400));
  --c-slate-500:   rgb(var(--p-slate-500));
  --c-slate-600:   rgb(var(--p-slate-600));
  --c-slate-700:   rgb(var(--p-slate-700));
  --c-slate-900:   rgb(var(--p-slate-900));
  --c-gray-100:    rgb(var(--p-gray-100));
  --c-gray-200:    rgb(var(--p-gray-200));
  --c-blue-400:    rgb(var(--p-blue-400));
  --c-blue-500:    rgb(var(--p-blue-500));
  --c-blue-600:    rgb(var(--p-blue-600));
  --c-blue-700:    rgb(var(--p-blue-700));
  --c-blue-950:    rgb(var(--p-blue-950));
  --c-sky-300:     rgb(var(--p-sky-300));
  --c-sky-500:     rgb(var(--p-sky-500));
  --c-violet-600:  rgb(var(--p-violet-600));
  --c-violet-800:  rgb(var(--p-violet-800));
  --c-violet-950:  rgb(var(--p-violet-950));
  --c-fuchsia-500: rgb(var(--p-fuchsia-500));
  --c-fuchsia-800: rgb(var(--p-fuchsia-800));
  --c-purple-700:  rgb(var(--p-purple-700));
  --c-orange-500:  rgb(var(--p-orange-500));
  --c-orange-900:  rgb(var(--p-orange-900));
  --c-amber-600:   rgb(var(--p-amber-600));
  --c-green-600:   rgb(var(--p-green-600));
  --c-green-700:   rgb(var(--p-green-700));
  --c-green-800:   rgb(var(--p-green-800));
  --c-green-900:   rgb(var(--p-green-900));
  --c-emerald-500: rgb(var(--p-emerald-500));
  --c-red-50:      rgb(var(--p-red-50));
  --c-red-500:     rgb(var(--p-red-500));
  --c-red-600:     rgb(var(--p-red-600));
  --c-red-700:     rgb(var(--p-red-700));
  --c-red-800:     rgb(var(--p-red-800));
  --c-red-900:     rgb(var(--p-red-900));

  /* ── Tokeny semantyczne ────────────────────────── */
  --bg:            #0b1d3a;
  --panel:         rgba(var(--p-white), 0.64);
  --panel2:        rgba(var(--p-white), 0.78);
  --text:          var(--c-slate-900);
  --muted:         var(--c-slate-600);
  --line:          rgba(var(--p-line-raw), 0.52);

  --accent:        var(--c-blue-600);
  --accent2:       var(--c-sky-500);
  --accent3:       var(--c-violet-600);
  --accent4:       var(--c-orange-500);

  --good:          var(--c-green-600);
  --warn:          var(--c-amber-600);
  --bad:           var(--c-red-600);

  --text-on-dark:  var(--c-slate-100);
  --muted-on-dark: var(--c-slate-300);

  --event:         var(--c-fuchsia-500);
  --rental:        var(--c-blue-600);

  /* ── Glass / szkło ─────────────────────────────── */
  --glass-blur:         18px;
  --glass-blur-strong:  26px;
  --glass-surface:      rgba(var(--p-white), 0.86);
  --glass-surface-muted:rgba(var(--p-white), 0.72);
  --glass-border:       rgba(var(--p-white), 0.68);
  --glass-border-soft:  rgba(var(--p-white), 0.55);
  --glass-inset:        inset 0 1px 0 rgba(var(--p-white), 0.78);
  --field-bg:           rgba(var(--p-white), 0.92);
  --tablewrap-bg:       rgba(var(--p-white), 0.78);
  --table-bg:           rgba(var(--p-white), 0.84);
  --table-th-bg:        rgba(var(--p-white), 0.88);
  --fill-nest:          rgba(var(--p-white), 0.52);
  --fill-row:           rgba(var(--p-white), 0.38);
  --glass-shadow:       0 8px 32px rgba(var(--p-shadow-base), 0.12),
                        0 2px 8px rgba(var(--p-shadow-base), 0.06);

  --shadow:       var(--glass-shadow);
  --shadow-modal: 0 28px 80px rgba(var(--p-shadow-deep), 0.28),
                  0 0 0 1px rgba(var(--p-white), 0.12);
  --radius:       14px;
  --radius-sm:    12px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --focus-ring:   0 0 0 3px rgba(var(--p-blue-600), 0.22);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* ── Layout ────────────────────────────────────── */
  --page-max:      1120px;
  --page-max-wide: 1400px;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  max-width: 100%;
  overflow-x: clip;
}
body{
  margin:0;
  background: var(--bg);
  position: relative;
  isolation: isolate;
  color:var(--text);
  font-family:var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 8% 4%, rgba(var(--p-blue-600),.30), transparent 54%),
    radial-gradient(860px 620px at 88% 12%, rgba(var(--p-sky-500),.24), transparent 46%),
    radial-gradient(980px 700px at 42% 82%, rgba(var(--p-blue-700),.22), transparent 52%),
    radial-gradient(720px 520px at 72% 68%, rgba(var(--p-sky-400),.16), transparent 42%),
    radial-gradient(640px 440px at 18% 92%, rgba(var(--p-blue-400),.14), transparent 38%),
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(var(--p-slate-900), 0.45), transparent 60%),
    linear-gradient(145deg, #081325 0%, #10284c 38%, #123561 68%, #0d2446 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Topbar
   Bez backdrop-filter: blur — przy sticky pasek rozmywa treść *pod* sobą; przy scrollu pod spodem
   pojawiają się nagłówki kart (Asystent AI, Płatności…) i jaśniejsze card__head zmieniają „próbkę”
   rozmycia → w poziomie widać pasek o innym odcieniu. Stałe, prawie nieprzezroczyste tło = stabilny kolor. */
.topbar{
  position: sticky; top:0; z-index:1000;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, #152a4d 0%, #122544 48%, #101f3d 100%);
  border-bottom: 1px solid rgba(var(--p-white), 0.16);
  box-shadow: 0 4px 24px rgba(var(--p-shadow-top), 0.45);
  padding-top: env(safe-area-inset-top, 0px);
}

.topbar__inner{
  padding: 10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: nowrap;
}

.brandslot{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex: 0 0 auto;
  min-width: 220px;
  min-height: 78px;
  text-decoration:none;
}
.brandslot__logo{
  display:block;
  max-width: 320px;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.topbar__actions{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; }
.topbar__actions form{ margin:0; }
.theme-dark-row--topbar{
  margin: 0;
}
.theme-dark-switch--topbar .theme-dark-switch__label{
  font-size: 13px;
  font-weight: 800;
}
.topbar__menu{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar__toggle{
  display: none;
}

/* (stare klasy brand zostają – nie przeszkadzają jeśli gdzieś używasz) */
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width: 44px; height: 44px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(var(--p-blue-600),.14), rgba(var(--p-sky-500),.10));
  border: 1px solid rgba(var(--p-blue-600),.18);
  box-shadow: var(--shadow);
  font-weight:900;
  color: var(--accent);
}
.brand__title{ font-weight: 900; letter-spacing:.2px; }
.brand__subtitle{ font-size: 13px; color: var(--muted); margin-top:2px; }

.nav{ display:flex; gap:6px; flex-wrap: wrap; align-items:center; }
.nav__link{
  text-decoration:none;
  color: rgba(var(--p-white), 0.82);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  background: transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav__link:hover{
  color: var(--c-white);
  background: rgba(var(--p-white), 0.08);
  border-color: rgba(var(--p-white), 0.1);
}
.nav__link.is-active{
  color: var(--c-white);
  background: rgba(var(--p-white), 0.12);
  border-color: rgba(var(--p-white), 0.16);
  box-shadow: inset 0 1px 0 rgba(var(--p-white), 0.1);
}
.nav__link--action{
  font-size: 14px;
  cursor: pointer;
  padding: 7px 12px;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav__link--action:hover{
  background: rgba(var(--p-white), 0.08);
  border-color: rgba(var(--p-white), 0.1);
}
.nav__link--action[type="submit"]{
  font-family: inherit;
}
.topbar__actions button.nav__link--action{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(var(--p-white), 0.82);
  padding: 7px 12px;
  font-weight: 700;
  font-size: 14px;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.topbar__actions button.nav__link--action:hover{
  color: var(--c-white);
  background: rgba(var(--p-white), 0.08);
  border-color: rgba(var(--p-white), 0.1);
}

main.wrap{ padding: 18px 0 26px; }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.grid--wide{ grid-template-columns: 1fr; }
@media(min-width: 980px){
  .grid--wide{ grid-template-columns: repeat(2, 1fr); }
}

.card{
  background: var(--glass-surface);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background-clip: padding-box;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow:hidden;
  align-self: start;
}
/* Karty pozostają przycięte do promienia; panele pomocy pozycjonujemy fixed (JS). */
.card:has(.ft-help){
  overflow: hidden;
}
.card--span2{ grid-column: 1 / -1; }
.card--calendar{
  overflow: visible;
}
.card--calendar .card__body{
  overflow: visible;
}

.event-detail-columns{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  grid-column: 1 / -1;
}

.event-detail-column{
  display: grid;
  gap: 16px;
  align-content: start;
}

@media(min-width: 980px){
  .event-detail-columns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card__head{
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(var(--p-white), 0.38);
  background: linear-gradient(180deg, rgba(var(--p-white), 0.34), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card:has(.ft-help) .card__head{
  position: relative;
  z-index: 2;
}
.card:has(.ft-help) .card__body{
  position: relative;
  z-index: 1;
}
.card__body{
  padding: 16px 18px 18px;
}

.card__head h1, .card__head h2{ margin: 0 0 10px; }
.card__head p{ margin:0; }

.muted{ color: var(--muted); }
.small{ font-size: 13px; }
.strong{ font-weight: 900; }
.mono{ font-family: var(--mono); }

/* Pomoc „?” — tylko po kliknięciu */
.ft-titleline{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.ft-titleline h1,
.ft-titleline h2,
.ft-titleline h3{
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.ft-titleline .ft-help{
  flex: 0 0 auto;
  margin-left: 2px;
  align-self: center;
}
.ft-help{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.ft-help:has(.ft-help__panel:not([hidden])){
  z-index: 50;
}
.ft-help__btn{
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(var(--p-slate-600), 0.22);
  background: rgba(var(--p-slate-600), 0.08);
  color: rgba(var(--p-slate-700), 0.68);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ft-help__btn:hover{
  color: rgba(var(--p-slate-700), 0.88);
  background: rgba(var(--p-slate-600), 0.13);
  border-color: rgba(var(--p-slate-700), 0.3);
}
.ft-help__btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}
.ft-help__panel{
  position: fixed;
  z-index: 2400;
  top: 0;
  left: 0;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(var(--p-white), 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-modal), var(--glass-inset);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
}
.ft-help__panel .ft-help__text{
  margin: 0;
}
.ft-help__panel .ft-help__text + .ft-help__text{
  margin-top: 8px;
}
.ft-label-with-help{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.ft-label-with-help .ft-help{
  flex: 0 0 auto;
  margin-left: 2px;
  align-self: center;
}
.ft-label-with-help > span:first-child,
.ft-label-with-help > label:first-child{
  flex: 0 1 auto;
  min-width: 0;
}
.modal__head .ft-titleline,
.modal__head .ft-help{
  align-self: flex-start;
}
.modal__head .ft-help__panel{
  right: 0;
  left: auto;
}

.hint{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.hint--danger{ color: var(--bad); }
.hint--ok{ color: var(--good); }

.row{ display:flex; align-items:center; gap: 10px; }
.row--space{ justify-content: space-between; flex-wrap: wrap; }
.row.row--space > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}
/* Nagłówek + „?” nie może mieć width:100% w jednym rzędzie z akcją (np. „Dziś”) — inaczej akcja spada pod tytuł */
.row.row--space > .ft-titleline{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: 100%;
}
/* Akcje w nagłówku (np. „Dziś”, „Dodaj”) — zawsze po prawej, jeden rząd z tytułem */
.row.row--space > .ft-titleline ~ *{
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
/* Gdy tytuł jest w zewnętrznym <div> (np. H1 + adres w szczegółach wydarzenia), .ft-titleline ~ * nie zadziała — druga kolumna dalej po prawej */
.row.row--space > div:first-child + *{
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.form-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width: 720px){
  .form-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-soft);
  background: rgba(var(--p-blue-600),.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-inset);
  font-size: 13px;
  color: var(--text);
  font-weight: 900;
}
.pill--mini{ padding: 6px 10px; font-size: 12px; }
.pill--neutral{ background: var(--fill-nest); border-color: rgba(var(--p-white), 0.38); }

.pill--ok{ background: rgba(var(--p-green-600),.10); border-color: rgba(var(--p-green-600),.22); color: var(--c-green-900); }
.pill--danger{ background: rgba(var(--p-red-600),.10); border-color: rgba(var(--p-red-600),.22); color: var(--c-red-900); }

/* Event status colors */
.pill--status-unknown{ background: rgba(var(--p-slate-400),.14); border-color: rgba(var(--p-slate-400),.28); color: var(--c-slate-700); }
.pill--status-none{ background: rgba(var(--p-fuchsia-500),.12); border-color: rgba(var(--p-fuchsia-500),.28); color: var(--c-fuchsia-800); }
.pill--status-planned{ background: rgba(var(--p-blue-600),.08); border-color: rgba(var(--p-blue-600),.22); color: var(--c-blue-950); }
.pill--status-in_progress{ background: rgba(var(--p-violet-600),.10); border-color: rgba(var(--p-violet-600),.22); color: var(--c-violet-950); }
.pill--status-completed{ background: rgba(var(--p-green-600),.10); border-color: rgba(var(--p-green-600),.22); color: var(--c-green-900); }
.pill--status-reserved{ background: rgba(var(--p-orange-500),.12); border-color: rgba(var(--p-orange-500),.24); color: var(--c-orange-900); }
.pill--status-returned{ background: rgba(var(--p-green-600),.10); border-color: rgba(var(--p-green-600),.22); color: var(--c-green-900); }

/* Event kind colors */
.pill--kind-event{ background: rgba(var(--p-fuchsia-500),.10); border-color: rgba(var(--p-fuchsia-500),.24); color: var(--c-fuchsia-800); }
.pill--kind-rental{ background: rgba(var(--p-blue-600),.10); border-color: rgba(var(--p-blue-600),.24); color: var(--c-blue-700); }
.pill--kind-organizational{ background: rgba(var(--p-emerald-500),.12); border-color: rgba(var(--p-emerald-500),.28); color: var(--c-green-800); }
.pill--kind-mixed{
  background: linear-gradient(135deg, rgba(var(--p-fuchsia-500),.10), rgba(var(--p-blue-600),.10));
  border-color: rgba(var(--p-violet-600), 0.28);
  color: var(--c-violet-800);
}

/* Reservation status colors */
.pill--res-reserved{ background: rgba(var(--p-blue-600),.08); border-color: rgba(var(--p-blue-600),.22); color: var(--c-blue-950); }
.pill--res-packed{ background: rgba(var(--p-amber-600),.12); border-color: rgba(var(--p-amber-600),.24); color: var(--c-orange-900); }
.pill--res-checked_out{ background: rgba(var(--p-violet-600),.10); border-color: rgba(var(--p-violet-600),.22); color: var(--c-violet-950); }
.pill--res-returned{ background: rgba(var(--p-green-600),.10); border-color: rgba(var(--p-green-600),.22); color: var(--c-green-900); }
.pill--res-missing{ background: rgba(var(--p-red-600),.10); border-color: rgba(var(--p-red-600),.22); color: var(--c-red-900); }

.details summary{
  cursor:pointer;
  user-select:none;
  font-weight: 900;
  margin-bottom: 12px;
}
.details--inline summary{ margin-bottom: 0; }
.details__body{ margin-top: 12px; }

/* === Zwijana sekcja + licznik + mini-tag ================================= */
/* Wspólne komponenty dla list (ToDo, archiwum, historia, komentarze). */
.ft-fold__summary{
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Padding to zarazem obszar dotyku na telefonie. */
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.ft-fold__summary::-webkit-details-marker{ display: none; }
.ft-fold__summary::before{
  content: "▸";
  font-size: 11px;
  transition: transform .15s ease;
}
.ft-fold[open] > .ft-fold__summary::before{ transform: rotate(90deg); }
.ft-fold[open] > .ft-fold__summary{ color: var(--text); }
.ft-fold__body{ margin-top: 10px; }
/* Wariant nagłówka sekcji (większy, w kolorze tekstu). */
.ft-fold--section > .ft-fold__summary{
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

@media(max-width: 720px){
  /* Na telefonie etykiety muszą być czytelne i łatwe do trafienia palcem. */
  .ft-fold__summary{
    font-size: 15px;
    padding: 10px 0;
    width: 100%;
  }
  .ft-fold--section > .ft-fold__summary{ font-size: 17px; }
}

.ft-count{
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--p-slate-900), .07);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.ft-count--accent{
  min-width: 22px;
  background: rgba(var(--p-blue-600), .12);
  color: rgb(var(--p-blue-600));
  font-weight: 900;
}

.ft-tag{
  flex: 0 0 auto;
  max-width: 200px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--p-blue-600), .10);
  color: rgb(var(--p-blue-600));
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.ft-tag:hover{ background: rgba(var(--p-blue-600), .18); }

.form--grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media(min-width: 720px){
  .form--grid{ grid-template-columns: repeat(3, 1fr); }
  .field--span2{ grid-column: span 2; }
}
.field--full,
.form--grid > .form-row,
.form--grid > .form-hours{
  grid-column: 1 / -1;
}
.form--compact{
  gap: 10px;
}
.form--compact .field label{
  margin-bottom: 4px;
}
@media (min-width: 720px){
  .form-row--meta{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-row--meta:has(.field:nth-child(3):not(.is-hidden)){
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.field label{
  display:block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 900;
}

input, textarea{
  width: 100%;
  background: var(--field-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-inset);
  color: var(--text);
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 15px;
  min-width: 0;
}
/* Natywny select — jeden zestaw reguł (także WebKit: czytelny tekst w stanie zwiniętym) */
select{
  width: 100%;
  min-width: 0;
  margin: 0;
  background: var(--field-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--glass-inset);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 42px;
  cursor: pointer;
  color-scheme: light;
  -webkit-text-fill-color: var(--text);
  appearance: auto;
  -webkit-appearance: menulist-button;
}
select option{
  color: var(--text);
  background: var(--c-white);
}
textarea{ resize: vertical; }
input::placeholder, textarea::placeholder{ color: var(--c-slate-500); }
input:focus, textarea:focus{
  border-color: rgba(var(--p-blue-600),.45);
  box-shadow: var(--focus-ring);
}
select:focus{
  border-color: rgba(var(--p-blue-600),.45);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Custom datepicker (Flatpickr) */
.flatpickr-calendar{
  width: 420px;
  max-width: calc(100vw - 24px);
  font-size: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--field-bg) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-modal), var(--glass-inset);
}
.flatpickr-calendar.open{
  position: fixed !important;
  z-index: 10000;
}
.flatpickr-months .flatpickr-month{
  height: 56px;
}
.flatpickr-current-month{
  padding-top: 8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  font-size: 20px;
  font-weight: 800;
}
.flatpickr-weekdays{
  height: 40px;
}
.flatpickr-weekday{
  line-height: 40px;
  font-size: 13px;
  font-weight: 800;
}
.flatpickr-days,
.dayContainer{
  width: 420px;
  min-width: 420px;
  max-width: 420px;
}
.flatpickr-day{
  max-width: 60px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
}
.flatpickr-day.today,
.flatpickr-day.ft-cal-day-future{
  position: relative;
  z-index: 1;
  box-shadow:
    0 24px 48px rgba(var(--p-slate-900), 0.2),
    0 12px 28px rgba(var(--p-slate-900), 0.14),
    0 4px 10px rgba(var(--p-slate-900), 0.1),
    0 0 0 1px rgba(var(--p-white), 0.5);
}
.flatpickr-day.today{
  z-index: 2;
  box-shadow:
    0 28px 56px rgba(var(--p-blue-600), 0.28),
    0 14px 32px rgba(var(--p-blue-600), 0.16),
    0 8px 18px rgba(var(--p-slate-900), 0.12),
    0 0 0 1px rgba(var(--p-white), 0.55);
}
.flatpickr-day.flatpickr-disabled{
  box-shadow: none;
  z-index: auto;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  width: 18px;
  height: 18px;
}

.field--actions{ display:flex; align-items:end; }

.btn{
  border: 1px solid var(--glass-border-soft);
  background: rgba(var(--p-white), 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-inset);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-weight: 900;
  font-size: 14px;
}
.btn:hover{
  border-color: rgba(var(--p-blue-600),.28);
  background: rgba(var(--p-blue-600),.1);
}
.btn--primary{
  background: linear-gradient(135deg, rgba(var(--p-blue-600),.28), rgba(var(--p-violet-600),.22));
  border-color: rgba(var(--p-blue-600),.42);
  color: var(--c-blue-950);
  box-shadow: var(--glass-inset), 0 4px 16px rgba(var(--p-blue-600), 0.15);
}
.btn--add{
  background: linear-gradient(135deg, rgba(var(--p-orange-500),.20), rgba(var(--p-orange-400),.18));
  border-color: rgba(var(--p-orange-500),.38);
  color: var(--c-orange-900);
}
.btn--add:hover{
  background: linear-gradient(135deg, rgba(var(--p-orange-500),.28), rgba(var(--p-orange-400),.24));
  border-color: rgba(var(--p-orange-500),.48);
}
.btn--danger{
  background: rgba(var(--p-red-600),.12);
  border-color: rgba(var(--p-red-600),.28);
  color: var(--c-red-800);
  padding: 7px 9px;
  font-size: 12px;
}
.btn--small.btn--danger{
  padding: 6px 8px;
  font-size: 11px;
}
.btn--tiny.btn--danger{
  padding: 5px 7px;
  font-size: 10px;
}
.btn--danger:hover{
  background: rgba(var(--p-red-600),.16);
  border-color: rgba(var(--p-red-600),.34);
}
.btn--event{
  background: rgba(var(--p-fuchsia-500),.12);
  border-color: rgba(var(--p-fuchsia-500),.30);
  color: var(--c-purple-700);
}
.btn--event:hover{
  background: rgba(var(--p-fuchsia-500),.18);
}
.btn--rental{
  background: rgba(var(--p-blue-600),.12);
  border-color: rgba(var(--p-blue-600),.30);
  color: var(--c-blue-700);
}
.btn--rental:hover{
  background: rgba(var(--p-blue-600),.18);
}
.btn--warn{
  background: rgba(var(--p-amber-600),.10);
  border-color: rgba(var(--p-amber-600),.22);
  color: var(--c-orange-900);
}
.btn--warn:hover{
  background: rgba(var(--p-amber-600),.14);
  border-color: rgba(var(--p-amber-600),.28);
}

/* Płatności: wyraźna akcja „oznacz opłacone” (nie zlewa się z tłem) */
.btn--pay{
  background: linear-gradient(135deg, rgba(var(--p-green-600), 0.22), rgba(var(--p-emerald-500), 0.16));
  border-color: rgba(var(--p-green-600), 0.42);
  color: var(--c-green-900);
  font-weight: 900;
  box-shadow: var(--glass-inset), 0 2px 10px rgba(var(--p-green-600), 0.12);
}
.btn--pay:hover{
  border-color: rgba(var(--p-green-600), 0.55);
  background: linear-gradient(135deg, rgba(var(--p-green-600), 0.32), rgba(var(--p-emerald-500), 0.22));
}

.btn--small{ padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.btn--tiny{ padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; }

.divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(var(--p-white),.45), transparent); margin: 14px 0; }

.auth-page__main{ padding-top: 40px; }

@media (min-width: 901px) {
  body.auth-page{
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  body.auth-page .auth-page__main{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
  }
}

/* Tabs */
.tabs{ display:flex; gap: 10px; flex-wrap:wrap; }
.tab{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-soft);
  background: rgba(var(--p-white), 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset);
  color: var(--text);
  font-weight: 900;
  text-decoration:none;
}
.tab:hover{
  color: var(--text);
  border-color: rgba(var(--p-blue-600),.24);
  background: rgba(var(--p-blue-600),.12);
}
.tab.is-active{
  color: var(--text);
  border-color: rgba(var(--p-blue-600),.38);
  background: rgba(var(--p-blue-600),.16);
}

.tabletools{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-bottom: 12px;
}
.search{ flex: 1 1 280px; }
.tabletools select{
  flex: 0 1 280px;
  max-width: min(320px, 100%);
  width: auto;
}

.sortmenu{
  position: relative;
}
.sortmenu[open]{
  z-index: 20;
}
.sortmenu__button{
  list-style: none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border-soft);
  border-radius: var(--radius-sm);
  background: rgba(var(--p-white), 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--glass-inset);
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
}
.sortmenu__button::-webkit-details-marker{
  display:none;
}
.sortmenu__button::after{
  content: "▾";
  color: var(--c-slate-600);
  font-size: 12px;
}
.sortmenu__panel{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 16px 44px rgba(var(--p-dark-alt),.14), var(--glass-inset);
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.sortmenu__option,
a.sortmenu__option:link,
a.sortmenu__option:visited{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: block;
  font-family: inherit;
  font-size: inherit;
}
/* Menu akcji (⋯): wszystkie pozycje – buttony i linki – tą samą wagą, bez pogrubienia. */
.action-menu__panel .sortmenu__option,
.action-menu__panel a.sortmenu__option:link,
.action-menu__panel a.sortmenu__option:visited{
  font-weight: 500;
}
.sortmenu__option:hover,
a.sortmenu__option:hover,
a.sortmenu__option:focus{
  background: rgba(var(--p-blue-600),.08);
  color: var(--text);
  text-decoration: none;
}

.tablewrap{
  overflow:auto;
  border-radius: 12px;
  border: 1px solid var(--glass-border-soft);
  background: var(--tablewrap-bg);
  background-clip: padding-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-inset);
}
.tablewrap--packlist{
  overflow: hidden;
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width: 760px;
  background: var(--table-bg);
  color: var(--text);
}
.table--packlist{
  min-width: 0;
}
/* Krótkie nagłówki (Ilość, Akcje, ...) nie mogą się łamać po znakach gdy kolumna
   się zwęża — wymuszamy jedną linię. */
.table--packlist thead th{
  white-space: nowrap;
}

/* === Packlist groups — każda kategoria to wyraźny "kafelek" ============== */
/* Nagłówek kategorii: pasek z nazwą + licznik pozycji. */
.table--packlist .packlist-group__header td{
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding: 12px 14px 10px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
}
.table--packlist .packlist-group__header td::before{ display: none !important; }
.table--packlist tbody.packlist-group:first-of-type .packlist-group__header td{
  border-top: 1px solid rgba(var(--p-slate-900), 0.10);
}
.table--packlist tbody.packlist-group:hover .packlist-group__header td,
.table--packlist .packlist-group__header:hover td{
  background: transparent !important;
}
.packlist-group__name{
  display: inline-block;
  vertical-align: middle;
}
.packlist-group__count{
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--p-slate-900), 0.12);
  color: rgb(var(--p-slate-800, 30 41 59));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
}

/* Lewa krawędź na wierszach grupy — wizualnie "spina" kafelek. */
.table--packlist .packlist-group .packlist-res-row td:first-child{
  border-left: 3px solid rgb(var(--p-blue-600));
}
.table--packlist .packlist-group .packlist-group__header td{
  border-left: 3px solid rgb(var(--p-blue-600));
}
/* Ostatni wiersz w kafelku ma mocniejszą dolną krawędź zamykającą. */
.table--packlist .packlist-group .packlist-res-row:last-child td{
  border-bottom: 1px solid var(--ui-border-soft, var(--line));
}

/* Wiersz nagłówka nie reaguje na hover. */
.table--packlist .packlist-group__header:hover{
  background: rgb(var(--p-blue-600)) !important;
}

.table th, .table td{
  text-align:left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th{
  font-size: 12px;
  color: var(--c-slate-700);
  font-weight: 900;
  letter-spacing: .3px;
  background: var(--table-th-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.table td.num, .table th.num{ text-align:right; }
.table tbody tr:hover{ background: rgba(var(--p-sky-500),.09); }

.summary-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap:10px;
  margin: 8px 0 14px;
}
.summary-pill{
  border:1px solid rgba(var(--p-white), 0.15);
  border-radius:10px;
  padding:10px 12px;
  background: rgba(16, 31, 53, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(var(--p-white), 0.12);
  color: var(--text-on-dark);
}
.summary-pill__label{
  display:block;
  color: var(--muted-on-dark);
  font-size:12px;
  margin-bottom:4px;
}
.status-badge{
  display:inline-block;
  border-radius:999px;
  padding:3px 9px;
  font-size:12px;
  font-weight:700;
}
.status-badge--ok{
  color:#c8f5d4;
  background:#153629;
  border:1px solid #2f7a57;
}
.status-badge--warn{
  color:#ffe9c5;
  background:#3b2a11;
  border:1px solid #7f5b24;
}
.payments-warning{
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 13px;
}
.payments-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.payments-card{
  border:1px solid var(--glass-border-soft);
  border-radius:12px;
  background: rgba(var(--p-white), 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset);
  padding:12px;
}
.payments-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.payments-card__head h3{
  margin:0;
}
.payments-card__totals{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:12px;
  color:var(--muted);
}
.payments-topics{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.payments-topic{
  border:1px solid var(--glass-border-soft);
  border-radius:10px;
  padding:8px 9px;
  background: rgba(var(--p-white), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.payments-topic.is-overdue{
  border-color:var(--c-red-500);
  background:var(--c-red-50);
}
.payments-topic__main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.payments-topic__main a{
  font-weight:800;
}
.payments-topic__amount{
  font-weight:800;
}
.payments-topic__meta{
  margin-top:7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.payments-topic__payform{
  display:inline-flex;
}

@media(max-width: 1100px){
  .payments-grid{
    grid-template-columns: 1fr;
  }
}

@media(max-width: 900px){
  .table--packlist thead{
    display:none;
  }
  .table--packlist,
  .table--packlist tbody,
  .table--packlist tr,
  .table--packlist td{
    display:block;
    width:100%;
  }
  .table--packlist tr{
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .table--packlist tr:last-child{
    border-bottom: 0;
  }
  .table--packlist td{
    padding: 6px 0;
    text-align:left !important;
    border: 0;
  }
  .table--packlist td::before{
    content: attr(data-label);
    display:block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }
  .table--packlist td:first-child::before{
    display:none;
  }
  /* Na mobile pasek kategorii: ten sam kolor co pasek z lewej strony pozycji. */
  .table--packlist .packlist-group__header{
    margin-top: 12px;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: rgb(var(--p-blue-600)) !important;
  }
  .table--packlist tbody.packlist-group:first-of-type .packlist-group__header{
    margin-top: 0;
  }
  .table--packlist .packlist-group__header td{
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em;
    line-height: 1.3;
  }
  .table--packlist .packlist-group .packlist-res-row td:first-child,
  .table--packlist .packlist-group .packlist-group__header td{
    border-left: 0 !important;
  }
  .table--packlist tbody.packlist-group{
    border-left: 3px solid var(--pack-accent, rgb(var(--p-blue-600)));
  }
  .table--packlist .packlist-group .packlist-res-row{
    padding-left: 12px;
    border-left: 0;
  }
}

.link{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--p-blue-600),.35);
  font-weight: 900;
}
.link:hover{ border-bottom-color: rgba(var(--p-blue-600),.75); }

.eventlink{
  color: var(--text);
  text-decoration: none;
  border: 0;
  font-weight: 800;
}
.eventlink:hover{
  color: var(--c-blue-700);
}
.eventlink--plain{
  font-weight: 400;
}
.eventdate{
  white-space: nowrap;
}
.eventdate__line{
  display:block;
  white-space: nowrap;
}
.eventdate__line + .eventdate__line{
  margin-top: 4px;
}

.event-read{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-address-line{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.event-address-line .btn{
  flex: 0 0 auto;
}
@media(max-width: 720px){
  .event-address-line .btn{
    min-height: 42px;
    padding: 10px 14px;
  }
}

.packlist-summary{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.packlist-summary__discount{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.packlist-summary__discount input{
  width: 110px;
}
.summary-total{
  font-weight: 900;
  font-size: 16px;
  color: var(--c-green-800);
}
.summary-total strong{
  color: var(--c-green-900);
  font-size: 18px;
}
.summary-total--after{
  color: var(--c-green-700);
}
.summary-total--after strong{
  color: var(--c-green-800);
}

.modal__dialog--picker{
  width: min(980px, calc(100vw - 32px));
}

/* Panel wyników combobox-a renderowany jest jako portal (JS przenosi do <body>),
   więc gdy ma klasę .combo__panel--floating leci w position: fixed nad wszystkim.
   Wymiary, top/left i max-height ustawia JS na podstawie pozycji inputu. */
.combo__panel--floating{
  position: fixed !important;
  z-index: 10000 !important;
  /* własny scroll wewnętrzny, niezależny od overflow rodziców */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Reusable drag&drop reorder (iPhone-style) ===
   Klasy dodawane przez JS (initReorderContainers).
   Handle (.ft-reorder-handle) jest wstrzykiwany w prawy dolny róg każdego item-a.
   Sąsiednie elementy animują się płynnie w trakcie dragover (FLIP w JS). */
[data-reorder]{
  --ft-reorder-accent: var(--c-blue-600, #2563eb);
}

/* Bazowo item nie ma cursor: grab — chwyt tylko za handle. */
.ft-reorder-item{
  position: relative;
  /* Lekka rezerwa miejsca w prawym dolnym rogu, żeby handle nie zasłaniał treści.
     Komponenty (np. .attachment-thumb) mają już własne padding/akcje — tu nadpisujemy
     tylko gdy zachodzi potrzeba. */
}
/* Wnętrze nadal klikalne; tylko handle ma grab. */
.ft-reorder-item button,
.ft-reorder-item a,
.ft-reorder-item input,
.ft-reorder-item label{
  cursor: pointer;
}

/* Handle: prawy dolny róg, 3 ukośne kreski */
.ft-reorder-handle{
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.48);
  color: rgba(248, 250, 252, 0.95);
  cursor: grab;
  opacity: 0.5;
  z-index: 6;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    transform .15s ease;
  touch-action: none; /* nie scrolluj strony przy próbie chwytu na touch */
  user-select: none;
}
.ft-reorder-handle:hover,
.ft-reorder-handle:focus-visible{
  opacity: 1;
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
  outline: none;
}
.ft-reorder-handle:active{
  cursor: grabbing;
  transform: scale(0.94);
}
.ft-reorder-handle svg{
  width: 11px;
  height: 11px;
  display: block;
  pointer-events: none;
}

/* Na hover handle pokaż element jako „ready" — subtelny wiggle.
   Klasa .ft-reorder-ready jest dodawana przez JS przy pointerenter handle. */
.ft-reorder-item.ft-reorder-ready{
  animation: ftReorderWiggle .55s ease-in-out infinite;
}
@keyframes ftReorderWiggle{
  0%, 100%{ transform: rotate(0deg); }
  25%{ transform: rotate(-0.3deg); }
  75%{ transform: rotate(0.3deg); }
}

/* Element aktywnie przeciągany: iPhone-like "lifted" look. */
.ft-reorder-item.ft-reorder-dragging{
  opacity: 0.92;
  transform: scale(1.04);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.28),
    0 6px 14px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(37, 99, 235, 0.18);
  z-index: 10;
  animation: none !important; /* odetnij wiggle gdy już przeciągamy */
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* Sygnał błędu zapisu (POST nie poszedł) */
.ft-reorder-error{
  animation: ftReorderShake .35s ease-in-out;
}
@keyframes ftReorderShake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  75%{ transform: translateX(3px); }
}

/* W wierszach tabel <tr> musi mieć position: relative, żeby handle (absolute) działał. */
tr.ft-reorder-item{
  position: relative;
}
/* Handle wewnątrz wiersza tabeli — minimalnie przesunięty, żeby nie kolidował z kolumną akcji */
tr.ft-reorder-item > .ft-reorder-handle{
  /* Pozycja względem wiersza — niektóre przeglądarki kalkulują top/bottom %
     niekonsekwentnie dla tr; pikselowe wartości działają stabilnie. */
  bottom: 4px;
  right: 6px;
}

/* Reduce motion: wyłącz wiggle/lift dla użytkowników z preferencją zmniejszonego ruchu. */
@media (prefers-reduced-motion: reduce){
  .ft-reorder-item.ft-reorder-ready{ animation: none; }
  .ft-reorder-item.ft-reorder-dragging{ transform: none; }
}

/* === No-glass mode: kiedy okno traci focus (Win+Shift+S, OBS, alt+tab itp.)
   wyłączamy wszystkie backdrop-filter blur'y, podbijamy nieprzezroczystość tła
   i zamieniamy "szklane" białe ramki na delikatne szare (na białym tle białe
   ramki są niewidoczne — stąd „gubiące się linie" na screenie).
   Klasa jest togglowana przez JS na <html> w blur/focus/visibilitychange eventach. */
html.ft-window-blurred{
  --glass-surface:       rgba(var(--p-white), 1);
  --glass-surface-muted: rgba(var(--p-white), 0.98);
  --field-bg:            rgba(var(--p-white), 1);
  --tablewrap-bg:        rgba(var(--p-white), 0.98);
  --table-bg:            rgba(var(--p-white), 1);
  --table-th-bg:         rgba(var(--p-white), 1);
  /* Ramki przerzucamy na ciemne, żeby były widoczne na solidnym białym tle. */
  --glass-border:        rgba(var(--p-slate-900), 0.10);
  --glass-border-soft:   rgba(var(--p-slate-900), 0.06);
  --glass-inset:         inset 0 1px 0 rgba(var(--p-slate-900), 0.04);
}
html.ft-window-blurred *,
html.ft-window-blurred *::before,
html.ft-window-blurred *::after{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.row--top{
  align-items: flex-start;
}

.rental-tree{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rental-tree__vendor{
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: rgba(var(--p-white), 0.58);
  background-clip: padding-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-inset);
}

.rental-tree__vendor-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--fill-row);
}

.rental-tree__vendor-head h3{
  margin: 0;
  font-size: 15px;
}

.rental-tree__vendor-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rental-tree__item-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.action-menu{
  display: inline-block;
}
.action-menu__button{
  min-height: 34px;
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 10px;
  background: rgba(var(--p-white), 0.85);
  color: var(--c-slate-800);
  box-shadow: var(--glass-inset);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.action-menu__button::after{
  display: none;
}
.action-menu__button:hover{
  background: rgba(var(--p-blue-600), 0.10);
  border-color: rgba(var(--p-blue-600), 0.30);
}
.action-menu__button:focus-visible{
  outline: 2px solid rgba(var(--p-blue-600), 0.90);
  outline-offset: 2px;
}
.action-menu__dots{
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.action-menu__panel{
  min-width: 190px;
}
.action-menu__option-danger{
  color: var(--c-red-800);
}
.action-menu__option-danger:hover{
  background: rgba(var(--p-red-600), .08);
}
.rental-actions-menu{
  display: inline-block;
}
.rental-actions-menu__button{
  min-height: 34px;
  padding: 4px 8px;
  gap: 0;
}
.rental-actions-menu__button::after{
  display: none;
}
.rental-actions-menu__panel{
  min-width: 190px;
}
.rental-actions-menu__option-danger{
  color: var(--c-red-800);
}
.rental-actions-menu__option-danger:hover{
  background: rgba(var(--p-red-600), .08);
}

.rental-tree__items{
  display: flex;
  flex-direction: column;
}

.rental-tree__item{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--p-gray-200),.8);
}

.rental-tree__item:first-child{
  border-top: 0;
}

.rental-tree__item-main{
  min-width: 0;
}
.rental-tree__vendor.is-collapsible .rental-tree__vendor-head{
  cursor: pointer;
  position: relative;
  padding-right: 12px;
  padding-left: 28px;
}
.rental-tree__vendor.is-collapsible .rental-tree__vendor-head::after{
  content: "▸";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 900;
}
.rental-tree__vendor.is-collapsible:not(.is-collapsed) .rental-tree__vendor-head::after{
  content: "▾";
}
.rental-tree__vendor.is-collapsible.is-collapsed .rental-tree__items{
  display: none;
}

.events-separator td{
  padding-top: 16px;
  background: rgba(var(--p-white), 0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid rgba(var(--p-white), 0.35);
  border-bottom: 1px solid rgba(var(--p-white), 0.28);
}
.events-separator__label{
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.event-row{
  cursor: pointer;
}
.event-row--archived{
  background: rgba(var(--p-slate-400),.22);
  color: var(--c-slate-600);
}
.event-row--archived:hover{
  background: rgba(var(--p-slate-400),.30) !important;
}
.event-row--archived .eventlink{
  color: var(--c-slate-600);
}
.event-row--archived .pill{
  opacity: .72;
}
.event-row--archived .muted{
  color: var(--c-slate-500);
}

/* edytowalne tabele */
.table--editor{ min-width: 980px; }
.table--people{ table-layout: fixed; }
.table--people td,
.table--people th{ overflow: hidden; }
.table--people td:nth-child(2),
.table--people th:nth-child(2){
  padding-left: 10px;
  padding-right: 8px;
}
.table--people td:nth-child(3),
.table--people th:nth-child(3){
  padding-left: 8px;
}
.table--people .inv-inline__display,
.table--people .inv-inline__edit{
  width: 100%;
}
.table--people td:nth-child(2) .inv-inline__display,
.table--people td:nth-child(3) .inv-inline__display,
.table--people td:nth-child(4) .inv-inline__display{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-edit-account{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--c-gray-200);
  text-align: left;
}
.person-edit-account__row{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.person-edit-account__hint-wrap{
  margin: 0 0 6px;
}

.person-edit-account__label .person-edit-account__role-val{
  color: var(--text);
  font-weight: 800;
}
.person-edit-account__select{
  max-width: 100%;
}
.person-edit-account__create-form{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.person-edit-account__row--create{
  width: 100%;
}
.person-edit-account__create-form select{
  max-width: 100%;
}
.person-edit-account__create-form > .btn{
  align-self: flex-start;
}
.person-edit-account__link{
  display: inline;
  color: inherit;
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  border-bottom: 1px dotted currentColor;
}
.person-edit-account__link:hover,
.person-edit-account__link:focus{
  color: var(--text);
  border-bottom-style: solid;
}
.person-edit-account__inline-form{
  display: inline;
  margin: 0;
  padding: 0;
}

/* === Permissions page === */
.page-permissions input[type="checkbox"],
.page-permissions input[type="radio"]{
  accent-color: var(--c-blue-700, #1d4ed8);
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* === Sekcja "Dostęp do logowania" na stronie uprawnień ============= */
.login-access{
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: var(--tablewrap-bg);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.login-access__title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.login-access__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-access__statuses{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.login-access__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.login-access__actions form{ display: inline-flex; margin: 0; }
.login-access__badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.2;
}
.login-access__badge--ok{
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
  color: rgb(21, 128, 61);
}
.login-access__badge--warn{
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.38);
  color: rgb(146, 64, 14);
}
.login-access__badge--blocked{
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.32);
  color: rgb(153, 27, 27);
}
.login-access__dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.login-access__hint{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.login-access__hint code{
  background: rgba(var(--p-slate-900), 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* === Status logowania w wierszu pracownika (people.html) ============= */
.person-cell__name{
  font-weight: 600;
  margin-bottom: 2px;
}
.login-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}
.login-status__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.login-status--ok{
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.28);
  color: rgb(21, 128, 61);
}
.login-status--warn{
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.32);
  color: rgb(146, 64, 14);
}
.login-status--blocked{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.28);
  color: rgb(153, 27, 27);
}

.perm-preset{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: var(--tablewrap-bg);
}
.perm-preset__btn{
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
}
.perm-preset__btn:hover{
  background: rgba(var(--p-blue-600), .08);
}
.perm-preset__btn.is-active{
  background: var(--c-blue-700, #1d4ed8);
  color: #fff;
  font-weight: 600;
}

.perm-hint{
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.perm-section{
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: var(--tablewrap-bg);
  padding: 16px 18px;
  margin-top: 14px;
}
.perm-section__title{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* Główna siatka: Sekcja / Podgląd / Edycja */
.perm-grid{
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  row-gap: 2px;
}
.perm-grid__head{
  display: contents;
}
.perm-grid__head > span{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 10px;
}
.perm-grid__head > span:nth-child(2),
.perm-grid__head > span:nth-child(3){
  text-align: center;
}
.perm-grid__row{
  display: contents;
}
.perm-grid__row > *{
  padding: 10px;
  border-top: 1px solid var(--glass-border-soft);
  display: flex;
  align-items: center;
}
.perm-grid__row > *:nth-child(2),
.perm-grid__row > *:nth-child(3){
  justify-content: center;
  cursor: pointer;
}
.perm-grid__name{
  font-weight: 500;
}
/* Pod-wiersz (np. "↳ Stawki" pod "Pracownicy") — lekko wcięty, mniejszy nagłówek,
   bez górnej linii (wizualnie spina się z nadrzędnym wierszem). */
.perm-grid__row--sub > *{
  border-top: 1px dashed rgba(var(--p-slate-900), 0.10);
  padding-top: 6px;
  padding-bottom: 8px;
}
.perm-grid__name--sub{
  padding-left: 24px;
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}
.perm-grid__cell{
  margin: 0;
}
/* Wiersz z jednym, szerszym checkboxem (np. AI „może używać") */
.perm-grid__cell--wide{
  grid-column: 2 / span 2;
  justify-content: flex-start !important;
  gap: 10px;
  padding-left: 14px !important;
}
.perm-grid__inline{
  font-size: 14px;
  color: var(--text);
  user-select: none;
}

/* Sub-grid: kindy kalendarza w polu „Typy wydarzeń" */
.perm-kindgrid{
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  width: 100%;
  border: 1px solid var(--glass-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface, transparent);
}
.perm-kindgrid__head{
  display: contents;
}
.perm-kindgrid__head > span{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .02);
}
.perm-kindgrid__head > span:nth-child(2),
.perm-kindgrid__head > span:nth-child(3){
  text-align: center;
}
.perm-kindgrid__row{
  display: contents;
}
.perm-kindgrid__row > *{
  padding: 9px 10px;
  border-top: 1px solid var(--glass-border-soft);
  display: flex;
  align-items: center;
}
.perm-kindgrid__row > *:nth-child(2),
.perm-kindgrid__row > *:nth-child(3){
  justify-content: center;
  cursor: pointer;
}
.perm-kindgrid__name{
  font-size: 14px;
  font-weight: 500;
}
.perm-kindgrid__cell{
  margin: 0;
}

/* Gdy pole „Typy wydarzeń" robi się szersze niż jedna kolumna */
.perm-field--block .perm-field__control{
  width: 100%;
}

/* Karty „szczegóły" obok siebie */
.perm-detail-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 760px){
  .perm-detail-cards{ grid-template-columns: 1fr 1fr; }
  .perm-detail-cards .perm-section{ margin-top: 0; }
}

.perm-field{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  padding: 12px 0;
}
.perm-field + .perm-field{
  border-top: 1px dashed var(--glass-border-soft);
}
.perm-field__label{
  color: var(--muted);
  font-size: 13px;
  padding-top: 4px;
}
.perm-field__control{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.perm-option{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}
.perm-option > span{
  user-select: none;
}

.perm-actions{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border-soft);
}

@media (max-width: 520px){
  .perm-field{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .perm-grid{
    grid-template-columns: 1fr 80px 80px;
  }
}
.person-actions-menu{
  display: inline-block;
}
.person-actions-menu__button{
  min-height: 34px;
  padding: 4px 8px;
  gap: 0;
}
.person-actions-menu__button::after{
  display: none;
}
.person-actions-menu__panel{
  min-width: 180px;
}
.table--people td[data-label="Akcje"]{
  overflow: visible;
}

.rowform{
  display:grid;
  gap: 12px;
  align-items:center;
}

.rowform--inv{ grid-template-columns: 2.2fr 1.1fr .7fr .7fr .9fr 1fr 1.2fr; }
.rowform--people{ grid-template-columns: 1.3fr 1fr 1.5fr .7fr 1fr; }

@media(max-width: 980px){
  .rowform--inv{ grid-template-columns: 1fr; }
  .rowform--people{ grid-template-columns: 1.3fr 1fr 1.5fr .7fr 1fr; }
}

.rowform__cell{ min-width: 0; }
.rowform__cell--num input{
  text-align:right;
  font-family: var(--mono);
}
.rowform__unit{
  display:flex;
  align-items:center;
  gap: 8px;
}
.rowform__unit input{
  flex: 1 1 auto;
  min-width: 0;
}
.rowform__suffix{
  flex: 0 0 auto;
  min-width: 34px;
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}
.inv-inline__display{
  display:block;
}
.inv-inline__edit{
  display:block;
}
.inv-inline__unit{
  display:flex;
  align-items:center;
  gap:8px;
}
.inv-inline__unit input{
  flex:1 1 auto;
  min-width:0;
}
.inv-inline__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.table--editor tr.is-editing{
  background: rgba(var(--p-blue-600),.04);
}
.table--editor tr.is-editing td{
  vertical-align: middle;
}

.statusline{ display:flex; flex-direction: column; gap: 10px; }
.statusbuttons{ display:flex; flex-wrap:wrap; gap: 8px; }

.flashstack{ display:flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.flash{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-soft);
  background: var(--field-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset);
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.flash__text{
  flex: 1 1 auto;
  min-width: 0;
}
.flash__undo{
  flex: 0 0 auto;
  margin: 0;
}
.flash__undo .btn{
  min-height: 36px;
}
.flash--ok{
  border-color: rgba(var(--p-green-700), 0.45);
  background: rgba(var(--p-green-100), 0.72);
  color: var(--c-green-900);
}
.flash--error{
  border-color: rgba(var(--p-red-700), 0.45);
  background: rgba(var(--p-red-100), 0.75);
  color: var(--c-red-900);
}
.flash--warn{
  border-color: rgba(var(--p-amber-700), 0.45);
  background: rgba(var(--p-orange-100), 0.75);
  color: var(--c-orange-900);
}

/* MAP */
.map{
  width: 100%;
  min-height: 320px;
  height: 360px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-soft);
  overflow:hidden;
  background: rgba(var(--p-slate-50), 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-inset);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
#map{ width: 100%; height: 100%; }
.leaflet-container{
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
.leaflet-container img,
.leaflet-container .leaflet-tile,
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow{
  max-width: none !important;
  max-height: none !important;
}
.leaflet-pane{ z-index: 1; }
.leaflet-tile-pane{ z-index: 2; }
.leaflet-overlay-pane{ z-index: 3; }
.leaflet-shadow-pane{ z-index: 4; }
.leaflet-marker-pane{ z-index: 5; }
.leaflet-tooltip-pane{ z-index: 6; }
.leaflet-popup-pane{ z-index: 7; }
.leaflet-control{ z-index: 8; }
.leaflet-control-attribution{
  max-width: calc(100% - 12px);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__panel{ z-index: 1100; }

.address-details{
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 10px;
  background: rgba(var(--p-white), 0.6);
}
.address-details > div{
  overflow-wrap: anywhere;
  word-break: break-word;
}
#eventCreateForm .field--map,
#eventEditForm .field--map{
  position: relative;
  z-index: 0;
  margin-bottom: 14px;
}
#eventCreateForm .field--address-search,
#eventEditForm .field--address-search{
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

@media(max-width: 720px){
  .map{ height: 320px; }
}

.footer{ padding: 10px 0 22px; }

.is-hidden { display: none; }
body.modal-open{
  overflow: hidden;
}

#ftDialogModal{
  z-index: 4000;
}
.modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.modal.is-hidden{
  display: none;
}
.modal__backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(var(--p-slate-900), 0.52);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.modal__dialog{
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  max-height: min(90dvh, calc(100dvh - max(32px, env(safe-area-inset-top, 0px)) - max(32px, env(safe-area-inset-bottom, 0px))));
  min-height: 0;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--p-white), 0.55);
  border-radius: var(--radius-lg);
  background: rgba(var(--p-white), 0.94);
  background-clip: padding-box;
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow:
    0 32px 80px rgba(var(--p-slate-900), 0.28),
    0 12px 32px rgba(var(--p-slate-900), 0.16),
    0 0 0 1px rgba(var(--p-white), 0.1),
    var(--glass-inset);
  color: var(--text);
}
.modal__dialog:has(.ft-help){
  overflow: hidden;
}
.modal__dialog--wide{
  width: min(1080px, calc(100vw - 32px));
}
.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(var(--p-slate-900), 0.06);
  background: rgba(var(--p-white), 0.5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.modal__head > div:first-child{
  flex: 1 1 auto;
  min-width: 0;
}
.modal__head h2{
  margin: 0 0 4px;
}
.modal__head p{
  margin: 0;
}
.modal__body{
  padding: 18px 22px 22px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

#ftDialogModal.is-ft-dialog-alert .modal__dialog{
  width: min(460px, calc(100vw - 32px));
}
#ftDialogModal.is-ft-dialog-alert .modal__head{
  justify-content: center;
  text-align: center;
}
#ftDialogModal.is-ft-dialog-alert .modal__head h2{
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 20px;
}
#ftDialogModal.is-ft-dialog-alert .modal__head [data-ft-dialog-dismiss]{
  display: none;
}
#ftDialogModal .ft-dialog-warn-list{
  margin: 10px 0 12px;
  padding-left: 1.2em;
}
#ftDialogModal .ft-dialog-warn-list li{
  margin: 0 0 6px;
}
#ftDialogModal.is-ft-dialog-alert [data-ft-dialog-message]{
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  max-width: 34ch;
  margin: 4px auto 0;
}
#ftDialogModal.is-ft-dialog-alert .row.row--space{
  justify-content: center;
  margin-top: 18px;
}
.ft-notice-msg{
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.ft-notice-msg__lead{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.ft-notice-msg__report{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-notice-msg__person{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.ft-notice-msg__label{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-notice-msg__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.ft-notice-msg__list li{
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.ft-notice-msg__comment{
  margin: 4px 0 0;
  line-height: 1.45;
}
.ft-notice-msg__quote{
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 15px;
}

@keyframes modalBackdropIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes modalDialogIn{
  from{ opacity: 0; transform: scale(0.96) translateY(12px); }
  to  { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalBackdropOut{
  from{ opacity: 1; }
  to  { opacity: 0; }
}
@keyframes modalDialogOut{
  from{ opacity: 1; transform: scale(1) translateY(0); }
  to  { opacity: 0; transform: scale(0.96) translateY(8px); }
}
.modal:not(.is-hidden) .modal__backdrop{
  animation: modalBackdropIn 0.22s ease-out both;
}
.modal:not(.is-hidden) .modal__dialog{
  animation: modalDialogIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal.is-closing .modal__backdrop{
  animation: modalBackdropOut 0.18s ease-in both;
}
.modal.is-closing .modal__dialog{
  animation: modalDialogOut 0.16s ease-in both;
}

@media(prefers-reduced-motion: reduce){
  .modal .modal__backdrop,
  .modal .modal__dialog{
    animation: none !important;
  }
}

/* actions */
.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}
.actions--nowrap{
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* picker + chips */
.picker{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--p-blue-600),.06);
  font-size: 13px;
  font-weight: 900;
}
.chip button{
  border: 0;
  cursor:pointer;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 16px;
}
.chip button:hover{ color: var(--text); }

/* combobox panel */
.combobox{ position: relative; flex: 1 1 240px; min-width: 240px; }
.combo__panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--field-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow-modal), var(--glass-inset);
  max-height: min(360px, calc(100vh - 220px));
  overflow: auto;
  z-index: 50;
}

.combo__item{
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(var(--p-gray-200),.8);
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  color: var(--text);
}
.combo__item:last-child{ border-bottom: 0; }
.combo__item:hover,
.combo__item.is-active{
  background: rgba(var(--p-blue-600),.08);
}
.combo__item.is-disabled{
  opacity: .68;
  cursor: not-allowed;
}
.combo__meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.combo__empty{
  padding: 12px 12px;
  color: var(--muted);
  font-weight: 900;
}

/* TODO (nowy układ master/detail) */
.todo-layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items:start;
}
@media(max-width: 980px){
  .todo-layout{ grid-template-columns: 1fr; }
}

.todo-sidebar{
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: rgba(var(--p-white), 0.66);
  background-clip: padding-box;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset);
  padding: 12px;
}
.todo-sidebar__title{
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.todo-topiclist{ display:flex; flex-direction: column; gap: 6px; }
.todo-topicrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--fill-row);
}
.todo-topicrow:hover{
  background: rgba(var(--p-blue-600),.06);
  border-color: rgba(var(--p-blue-600),.18);
}
.todo-topicrow.is-active{
  background: rgba(var(--p-blue-600),.10);
  border-color: rgba(var(--p-blue-600),.22);
}
.todo-topicrow.is-archived{ opacity: .65; }
.todo-topicrow__title{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-topicrow__meta{
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  flex: 0 0 auto;
}
.todo-separator{ height:1px; background: var(--line); margin: 12px 0; }

/* Panele boczne układają się w stos, żeby archiwum nie przesuwało listy pracowników. */
.todo-sidebar-stack{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.todo-sidebar__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.todo-sidebar__head .todo-sidebar__title{ margin-bottom: 0; }
/* Długie listy dostają własny scroll — panel nie rośnie w nieskończoność. */
.todo-scrolllist{
  max-height: 280px;
  overflow-y: auto;
}
.todo-sidebar--people .todo-scrolllist{
  max-height: none;
  overflow: visible;
}
/* Sekcja pracowników odcina się od naszych tematów akcentem, bez nowej stylistyki. */
.todo-sidebar--people{
  border-color: rgba(var(--p-blue-600), .22);
  background: rgba(var(--p-blue-600), .05);
}

/* --- ToDo pracownika (zadania + komentarze + historia) --- */
.tdp-add{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.tdp-add__input{ flex: 1; min-width: 0; }

.tdp-section{ margin-top: 18px; }
.tdp-section__title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 10px;
}

.tdp-tasks{ display: flex; flex-direction: column; gap: 10px; }
.tdp-task{
  border: 1px solid var(--glass-border-soft);
  border-radius: 14px;
  background: rgba(var(--p-white), .6);
  background-clip: padding-box;
  padding: 12px 14px;
}
.tdp-task.is-done{ opacity: .72; }
.tdp-task.is-done .tdp-task__text{ text-decoration: line-through; color: var(--muted); }

.tdp-task__main{ display: flex; align-items: flex-start; gap: 12px; }
.tdp-task__toggle{ flex: 0 0 auto; }
.tdp-task__body{ flex: 1; min-width: 0; }
.tdp-task__text{
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tdp-task__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.tdp-task__actions{ flex: 0 0 auto; }

.tdp-task__panels{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 8px;
  padding-left: 46px;
}
.tdp-task__panels .ft-fold{ min-width: 220px; flex: 1; }

.tdp-comments{ list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tdp-comment{
  border-left: 3px solid rgba(var(--p-blue-600), .35);
  padding: 4px 0 4px 10px;
}
.tdp-comment__head{ display: flex; align-items: center; gap: 8px; }
.tdp-comment__author{ font-weight: 700; font-size: 13px; }
.tdp-comment__time{ font-family: var(--mono); }
.tdp-comment__del{ margin-left: auto; }
.tdp-comment__delbtn{
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.tdp-comment__delbtn:hover{ color: rgb(var(--p-red-600, 220 38 38)); }
.tdp-comment__body{ font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

.tdp-commentform{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tdp-commentform textarea{ width: 100%; resize: vertical; }

.tdp-history{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tdp-history__row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.tdp-history__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.tdp-history__time{ font-family: var(--mono); color: var(--muted); flex: 0 0 auto; }
.tdp-history__who{ font-weight: 700; }
.tdp-history__task{ font-style: italic; }
.tdp-history__detail{ overflow-wrap: anywhere; }
.tdp-history--full .tdp-history__row{ padding: 6px 0; }

@media(max-width: 900px){
  .tdp-task__panels{ padding-left: 0; }
  .tdp-add{ flex-direction: column; align-items: stretch; }
}

/* --- Telefon: większe obszary dotyku, wszystko w jednej kolumnie --------- */
@media(max-width: 720px){
  .tdp-task{ padding: 12px; }
  .tdp-task__main{ gap: 10px; }
  /* Checkbox i menu „⋯” muszą być wygodne do kliknięcia kciukiem. */
  .tdp-task .todo-check{ width: 42px; height: 42px; font-size: 18px; }
  .tdp-task__text{ font-size: 15px; }

  /* Komentarze i historia jedna pod drugą, na całej szerokości. */
  .tdp-task__panels{
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }
  .tdp-task__panels .ft-fold{ width: 100%; }

  .tdp-comment__body{ font-size: 15px; }
  .tdp-commentform{ align-items: stretch; }
  .tdp-commentform textarea{ font-size: 16px; } /* 16px = iOS nie zoomuje pola */
  .tdp-commentform .btn{ width: 100%; justify-content: center; }

  /* Wpis historii: czas w osobnej linii, reszta pod spodem. */
  .tdp-history__row{ gap: 4px 8px; }
  .tdp-history__time{ flex: 1 0 100%; }

  .tdp-add__input{ font-size: 16px; }
  .tdp-add .btn{ width: 100%; justify-content: center; }

  /* Listy w panelach bocznych: krótszy scroll, wygodniejsze wiersze. */
  .todo-scrolllist{ max-height: 200px; }
  .todo-sidebar--people .todo-scrolllist{ max-height: none; overflow: visible; }
  .todo-topicrow{ padding: 12px 10px; }
  .todo-sidebar-stack{ gap: 10px; }
  .todo-sidebar{ padding: 10px; }
  .tdp-section__title{ font-size: 16px; }
}

.todo-detail{
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: rgba(var(--p-white), 0.66);
  background-clip: padding-box;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-inset);
  padding: 14px;
  overflow: hidden;
}
.todo-detail__head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.todo-actions{
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
  max-width: 100%;
}
.todo-actions > *{
  flex: 0 0 auto;
}

.todo-items-list{ display:flex; flex-direction: column; gap: 10px; }
.todo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border-soft);
  border-radius: 12px;
  background: rgba(var(--p-white), 0.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.todo-row:hover{ border-color: rgba(var(--p-blue-600),.24); }
.todo-row.is-active{ background: rgba(var(--p-blue-600),.06); }
.todo-row.is-done .todo-row__titlebtn{ color: var(--muted); }
.todo-row.is-done .todo-check{ color: var(--muted); }

.todo-row__left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.todo-row__titlebtn{
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  font: inherit;
  min-width: 0;
  text-align: left;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.todo-row.is-done .todo-row__titlebtn{ text-decoration: line-through; }

.todo-check{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--p-blue-600),.06);
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  display:grid;
  place-items:center;
}
.todo-check:hover{
  border-color: rgba(var(--p-blue-600),.28);
  background: rgba(var(--p-blue-600),.10);
}

@media(max-width: 1200px){
  .todo-layout{
    grid-template-columns: 300px 1fr;
  }
  .todo-actions{
    justify-content: flex-start;
    width: 100%;
  }
}

/* Kalendarz — paleta
   • przyszłość: bardzo delikatne niebieskawe tło
   • przeszłość: blade, szarawe tło
   • dni spoza miesiąca: stonowane tła + opacity w .is-other
   • „Dziś”: nieco wyraźniejszy błękit + obramowanie
   • zaznaczenie: pierścień zieleni; event/wynajem: obramowanie kolorowe */
.calendar{
  position: relative;
  overflow: visible;
  --cal-future-bg: linear-gradient(156deg, #cfe2fc 0%, #e2edfb 42%, #f2f7fd 100%);
  --cal-future-border: rgba(var(--p-blue-600), 0.12);
  --cal-past-bg: var(--c-gray-100);
  --cal-past-border: rgba(var(--p-slate-900), 0.06);
  --cal-past-daynum: var(--c-slate-500);
  --cal-other-bg: #f0f3f7;
  --cal-other-border: rgba(var(--p-slate-400), 0.28);
  --cal-other-daynum: var(--c-slate-400);
  --cal-other-past-bg: #eceef1;
  --cal-today-bg: linear-gradient(156deg, #c4d9fa 0%, #dceaff 48%, #eef4ff 100%);
  --cal-today-border: rgba(var(--p-blue-600), 0.48);
  --cal-today-inset: rgba(var(--p-blue-600), 0.22);
  --cal-today-watermark: rgba(var(--p-blue-600), 0.2);
  --cal-selected-border: rgba(var(--p-emerald-500), 0.5);
  --cal-selected-glow: rgba(var(--p-emerald-500), 0.16);
  --cal-busy-event-bd: rgba(var(--p-fuchsia-600), 0.42);
  --cal-busy-rental-bd: rgba(var(--p-blue-600), 0.44);
  --cal-busy-mixed-bd: rgba(var(--p-violet-600), 0.4);
  --cal-busy-past-event-bd: rgba(var(--p-fuchsia-600), 0.36);
  --cal-busy-past-rental-bd: rgba(var(--p-blue-600), 0.38);
  --cal-busy-past-mixed-bd: rgba(var(--p-violet-600), 0.36);
  /* Wyraźne cienie — gridwrap ma overflow:hidden; większy padding + mocniejsze warstwy */
  --cal-future-shadow:
    0 32px 64px rgba(var(--p-slate-900), 0.22),
    0 16px 36px rgba(var(--p-slate-900), 0.16),
    0 8px 18px rgba(var(--p-slate-900), 0.12),
    0 2px 6px rgba(var(--p-slate-900), 0.08),
    0 0 0 1px rgba(var(--p-white), 0.45);
  /* Głęboki „lift” — wspólny dla wszystkich dni przyszłych (nie tylko „dziś”) */
  --cal-lift:
    0 36px 72px rgba(var(--p-blue-600), 0.28),
    0 18px 40px rgba(var(--p-blue-600), 0.16),
    0 10px 24px rgba(var(--p-slate-900), 0.14),
    0 4px 10px rgba(var(--p-slate-900), 0.1);
}
.calendar__title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 10px;
}
.calendar__navbtn{
  min-width: 56px;
  min-height: 48px;
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 14px;
}
/* „Dziś” — kompaktowy, w jednym rzędzie z tytułem (bez nadpisywania rozmiaru jak duży nav) */
#calToday,
#availCalToday{
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--p-slate-900), 0.08);
}
.calendar__dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.calendar__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  position: relative;
}
.calendar__gridwrap{
  position: relative;
  /* overflow:hidden przycina box-shadow przy krawędziach — większy padding = więcej „powietrza” na cień */
  overflow: hidden;
  padding: 28px 22px 32px;
  box-sizing: border-box;
}
/* Zmiana miesiąca: klon starego miesiąca zjeżdża w bok, odsłaniając nową siatkę pod spodem.
   next = w czasie do przodu → stary kalendarz w lewo; prev = w tył → stary w prawo */
.calendar__grid-overlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  will-change: transform;
}
.calendar__grid-overlay.cal-exit-next{
  animation: calMonthSlideOutNext 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.calendar__grid-overlay.cal-exit-prev{
  animation: calMonthSlideOutPrev 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes calMonthSlideOutNext{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
@keyframes calMonthSlideOutPrev{
  from{ transform: translateX(0); }
  to{ transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .calendar__grid-overlay.cal-exit-next,
  .calendar__grid-overlay.cal-exit-prev{
    animation-duration: 0.12s;
    animation-timing-function: ease-out;
  }
  @keyframes calMonthSlideOutNext{
    from{ opacity: 1; }
    to{ opacity: 0; }
  }
  @keyframes calMonthSlideOutPrev{
    from{ opacity: 1; }
    to{ opacity: 0; }
  }
}
.calendar__cell{
  border: 2px solid var(--cal-future-border);
  border-radius: 12px;
  padding: 8px;
  background: var(--cal-future-bg);
  min-height: 92px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transform: translateZ(0);
  transform-origin: center center;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .calendar__cell:hover{
    transform: translateZ(0) scale(1.024);
    z-index: 2;
  }
  /* Wybrany dzień — ten sam „lift”, trochę wyraźniejszy + pierścień pozostaje czytelny */
  .calendar__cell.is-selected:hover{
    transform: translateZ(0) scale(1.03);
    z-index: 3;
  }
  .calendar__cell.is-today.is-selected:hover{
    transform: translateZ(0) scale(1.03);
    z-index: 3;
  }
}
@media (prefers-reduced-motion: reduce){
  .calendar__cell{
    transition: none;
  }
  .calendar__cell:hover,
  .calendar__cell.is-selected:hover,
  .calendar__cell.is-today.is-selected:hover{
    transform: none;
  }
}
.calendar__cell:not(.is-past){
  z-index: 1;
  box-shadow: var(--cal-lift), var(--cal-future-shadow), inset 0 1px 0 rgba(var(--p-white), 0.55);
}
/* opacity na całym kafelku gasi też box-shadow — przyszłe dni z sąsiedniego miesiąca: tylko lekkie przygaszenie, bez blur */
.calendar__cell.is-other:not(.is-past){
  opacity: 0.62;
  filter: none;
  -webkit-filter: none;
  border-color: var(--cal-other-border);
  background: var(--cal-other-bg);
}
.calendar__cell.is-other.is-past{
  opacity: 0.34;
  filter: blur(0.45px);
  -webkit-filter: blur(0.45px);
  border-color: var(--cal-other-border);
  background: var(--cal-other-past-bg);
}
.calendar__cell.is-other .calendar__daynum{
  color: var(--cal-other-daynum);
}
/* Zajęty dzień: tło jak stan bazowy; wyróżnienie = obramowanie (+ kropki/belki) */
.calendar__cell--busy-event{
  background: var(--cal-future-bg);
  border-color: var(--cal-busy-event-bd);
}
.calendar__cell--busy-rental{
  background: var(--cal-future-bg);
  border-color: var(--cal-busy-rental-bd);
}
.calendar__cell--busy-mixed{
  background: var(--cal-future-bg);
  border-color: var(--cal-busy-mixed-bd);
}
.calendar__cell.is-today{
  z-index: 2;
  background: var(--cal-today-bg);
  border-color: var(--cal-today-border);
  box-shadow: var(--cal-lift), var(--cal-future-shadow), inset 0 0 0 2px var(--cal-today-inset);
}
.calendar__cell.is-today::after{
  content: "Dziś";
  position: absolute;
  inset: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cal-today-watermark);
  background: none;
  border: 0;
  pointer-events:none;
}
.calendar__cell.is-selected{
  border-color: var(--cal-selected-border);
  box-shadow: var(--cal-lift), var(--cal-future-shadow), 0 0 0 3px var(--cal-selected-glow);
}
.calendar__cell.is-today.is-selected{
  box-shadow: var(--cal-lift), var(--cal-future-shadow), inset 0 0 0 2px var(--cal-today-inset), 0 0 0 3px var(--cal-selected-glow);
}
.calendar__cell.is-past:not(.is-today){
  z-index: 0;
  background: var(--cal-past-bg);
  border-color: var(--cal-past-border);
  box-shadow: none;
}
.calendar__cell.is-past:not(.is-today) .calendar__daynum{
  color: var(--cal-past-daynum);
}
.calendar__cell.is-past .calendar__dot--event{
  background: rgba(var(--p-fuchsia-500),.72) !important;
  border-color: rgba(var(--p-slate-500),.25) !important;
  opacity: 0.95;
  filter: saturate(0.88);
}
.calendar__cell.is-past .calendar__dot--rental{
  background: rgba(var(--p-blue-600),.68) !important;
  border-color: rgba(var(--p-slate-500),.25) !important;
  opacity: 0.95;
  filter: saturate(0.88);
}
.calendar__cell.is-past.calendar__cell--busy-event{
  background: var(--cal-past-bg);
  border-color: var(--cal-busy-past-event-bd);
}
.calendar__cell.is-past.calendar__cell--busy-rental{
  background: var(--cal-past-bg);
  border-color: var(--cal-busy-past-rental-bd);
}
.calendar__cell.is-past.calendar__cell--busy-mixed{
  background: var(--cal-past-bg);
  border-color: var(--cal-busy-past-mixed-bd);
}
.calendar__cell.is-other.is-past .calendar__daynum{
  color: var(--cal-past-daynum);
}
.calendar__cell.is-other.calendar__cell--busy-event,
.calendar__cell.is-other.calendar__cell--busy-rental,
.calendar__cell.is-other.calendar__cell--busy-mixed{
  background: var(--cal-other-bg);
}
.calendar__cell.is-other.calendar__cell--busy-event{
  border-color: var(--cal-busy-event-bd);
}
.calendar__cell.is-other.calendar__cell--busy-rental{
  border-color: var(--cal-busy-rental-bd);
}
.calendar__cell.is-other.calendar__cell--busy-mixed{
  border-color: var(--cal-busy-mixed-bd);
}
.calendar__cell.is-other.is-past.calendar__cell--busy-event,
.calendar__cell.is-other.is-past.calendar__cell--busy-rental,
.calendar__cell.is-other.is-past.calendar__cell--busy-mixed{
  background: var(--cal-other-past-bg);
}
.calendar__cell.is-other.is-past.calendar__cell--busy-event{
  border-color: var(--cal-busy-past-event-bd);
}
.calendar__cell.is-other.is-past.calendar__cell--busy-rental{
  border-color: var(--cal-busy-past-rental-bd);
}
.calendar__cell.is-other.is-past.calendar__cell--busy-mixed{
  border-color: var(--cal-busy-past-mixed-bd);
}
.calendar__sidearrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border: 0;
  background: rgba(var(--p-white), 0.18);
  border-radius: 999px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 8px 20px rgba(var(--p-shadow-deep), 0.2);
}
.calendar__sidearrow::before{
  content: "";
  width: 72px;
  height: 72px;
  border-left: 4px solid var(--c-slate-700);
  border-bottom: 4px solid var(--c-slate-700);
  opacity: .98;
  filter: drop-shadow(0 4px 10px rgba(var(--p-shadow-deep),.45));
}
.calendar__sidearrow--left::before{
  transform: rotate(45deg);
}
.calendar__sidearrow--right::before{
  transform: rotate(-135deg);
}
.calendar__sidearrow:hover{
  background: rgba(var(--p-white), 0.35);
}
.calendar__sidearrow:focus-visible{
  outline: 2px solid rgba(var(--p-blue-600), .9);
  outline-offset: 2px;
}
.calendar__sidearrow--left{
  left: -140px;
}
.calendar__sidearrow--right{
  right: -140px;
}
.calendar__daynum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.25;
  color: var(--muted);
  flex-shrink: 0;
}
.calendar__markers{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.calendar__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--p-dark-alt),.18);
}
.calendar__dot--event{
  background: rgba(var(--p-fuchsia-500),.95);
}
.calendar__dot--rental{
  background: rgba(var(--p-blue-600),.95);
}
.calendar__events{ display:flex; flex-direction: column; gap: 6px; }
.calendar__bars{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}
.calendar__bar{
  position: absolute;
  height: 18px;
  border-radius: 7px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  pointer-events: auto;
  border: 1px solid transparent;
  transform-origin: left center;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .calendar__bar:hover{
    transform: scale(1.02);
    z-index: 12;
    box-shadow: 0 3px 10px rgba(var(--p-slate-900), 0.14);
  }
}
@media (prefers-reduced-motion: reduce){
  .calendar__bar{
    transition: none;
  }
  .calendar__bar:hover{
    transform: none;
    box-shadow: none;
  }
}
.calendar__bar--event{
  background: rgba(var(--p-fuchsia-500),.22);
  border-color: rgba(var(--p-fuchsia-500),.38);
  color: var(--c-fuchsia-800);
}
.calendar__bar--rental{
  background: rgba(var(--p-blue-600),.22);
  border-color: rgba(var(--p-blue-600),.38);
  color: var(--c-blue-700);
}
/* Musi być po .calendar__bar--event/--rental — lekko przygaszone vs aktywne */
.calendar__bar.calendar__bar--past.calendar__bar--event{
  background: rgba(var(--p-fuchsia-500),.18);
  border-color: rgba(var(--p-fuchsia-600),.32);
  color: var(--c-purple-700);
  opacity: 0.94;
  filter: saturate(0.82);
}
.calendar__bar.calendar__bar--past.calendar__bar--rental{
  background: rgba(var(--p-blue-600),.18);
  border-color: rgba(var(--p-blue-600),.34);
  color: var(--c-blue-700);
  opacity: 0.94;
  filter: saturate(0.82);
}
/* Belki nad dniami spoza widocznego miesiąca — jak .calendar__cell.is-other */
.calendar__bar.calendar__bar--other-month.calendar__bar--event,
.calendar__bar.calendar__bar--other-month.calendar__bar--rental{
  opacity: 0.38;
  filter: blur(0.55px);
  -webkit-filter: blur(0.55px);
}
.calendar__bar.calendar__bar--past.calendar__bar--other-month.calendar__bar--event,
.calendar__bar.calendar__bar--past.calendar__bar--other-month.calendar__bar--rental{
  opacity: 0.38;
  filter: blur(0.55px) saturate(0.82);
  -webkit-filter: blur(0.55px) saturate(0.82);
}
/* Desktop: pokazuj belki, ukryj kropki */
@media(min-width: 901px){
  .calendar__markers{
    display: none !important;
  }
}

.cal-ev{
  display:block;
  text-decoration:none;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev--event{ background: rgba(var(--p-fuchsia-500),.10); border-color: rgba(var(--p-fuchsia-500),.24); color: var(--c-fuchsia-500); }
.cal-ev--rental{ background: rgba(var(--p-blue-600),.10); border-color: rgba(var(--p-blue-600),.24); color: var(--c-blue-600); }
.cal-ev:hover{ filter: brightness(.99); }
.cal-ev.is-past{ opacity: 0.6; filter: grayscale(50%); }
.cal-ev.is-static{ cursor: default; }

.cal-more{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}

.calday{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--fill-row);
}
.calday__head{ display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap; }
.calday__list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-create-menu{
  position: fixed;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-width: 200px;
}
.cal-create-menu.is-hidden{
  display: none !important;
}
.cal-create-menu .btn{
  min-height: 48px;
  font-weight: 800;
  justify-content: center;
}

.calday__event{
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--p-slate-400),.28);
  background: rgba(var(--p-slate-900),.03);
  color: var(--c-slate-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.calday__event:hover{
  border-color: rgba(var(--p-blue-600),.32);
  background: rgba(var(--p-blue-600),.08);
}
.calday__event.is-static{
  cursor: default;
}

@media print{
  .topbar, .footer, .tabs, .tabletools, details summary, .btn{ display:none !important; }
  body{ background:var(--c-white) !important; }
  .card{ box-shadow:none !important; }
  .table{ min-width: auto !important; }
  .tablewrap{ border: 0 !important; }
}

/* default center container */
.container{
  width: 100%;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Home can be wider */
.page-home .container{ max-width: var(--page-max-wide); }

/* TODO stays split and should not be constrained */
.page-todo .container{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Ustawienia (/settings) */
/* Nagłówek strony jest *nad* kartami (bez szkła) — jasny tekst na ciemnym tle strony */
.page-settings h1{
  margin: 0 0 4px;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  color: var(--text-on-dark);
}
.page-settings__lead{
  margin: 0 0 6px;
  max-width: 46rem;
}
.page-settings__card{ margin-top: 18px; }
.page-settings__card .card__head h2{
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 850;
}
.settings-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.settings-actions__note{
  margin: 0;
  flex: 1 1 280px;
  max-width: 44rem;
}
.settings-actions__btn{
  text-align: center;
}
.nav__link--settings{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  line-height: 0;
}
.nav__link--settings .nav__icon--gear{
  display: block;
  opacity: .82;
  transition: opacity .18s ease;
}
.nav__link--settings:hover .nav__icon--gear{ opacity: 1; }

/* Asystent AI — Gemini (ustawienia) */
.ai-settings__lead{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ai-settings__body{
  padding-top: 2px;
}
.ai-settings__summary-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  line-height: 1.45;
}
.ai-settings__summary-actions{
  margin-top: 14px;
}
.ai-settings__meta-line{
  margin: 0 0 14px;
  line-height: 1.45;
}
.ai-settings__meta-line--in-modal{
  margin-top: 14px;
}
.ai-settings__modal-sub{
  margin: 6px 0 0;
}
.ai-settings__usage-hint{
  margin: 10px 0 0;
}
.ai-settings__notesblock--in-modal{
  margin-top: 18px;
}
.ai-settings__diag-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.ai-settings__hint,
.ai-settings__statusline,
.ai-settings__note{
  margin: 0 0 10px;
  line-height: 1.45;
  max-width: 52rem;
}
.ai-settings__input-key{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font: inherit;
  margin-bottom: 6px;
}
.ai-settings__input-key:focus{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(var(--p-blue-600), 0.45);
}
.ai-settings__row--keys{
  margin-bottom: 0;
}
.ai-settings__test{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ai-settings__test .ai-settings__label{
  margin-top: 4px;
}
.ai-settings__keyblock{
  margin-top: 4px;
}
.ai-settings__key-summary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill-nest);
}
.ai-settings__pill{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--p-green-600), 0.14);
  color: var(--c-green-700);
  border: 1px solid rgba(var(--p-green-600), 0.35);
}
.ai-settings__pill--empty{
  background: var(--fill-nest);
  color: var(--muted);
  border-color: var(--line);
  font-weight: 700;
}
.ai-settings__code--mask{
  font-size: 0.95em;
}
.ai-settings__key-source{
  font-size: 13px;
  color: var(--muted);
}
.ai-settings__code{
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fill-nest);
  border: 1px solid var(--line);
}
.ai-settings__steps{
  margin: 0 0 14px 1.1rem;
  padding: 0;
  line-height: 1.5;
}
.ai-settings__steps li{ margin-bottom: 6px; }
.ai-settings__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ai-settings__label{
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}
.ai-settings__textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font: inherit;
  line-height: 1.45;
  margin-bottom: 10px;
}
.ai-settings__textarea:focus{
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: rgba(var(--p-blue-600), 0.45);
}
.ai-settings__reply{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-row);
}
.ai-settings__reply-label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ai-settings__reply-body{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

.ai-settings__notesblock{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ai-settings__notes-lead{
  margin: 0 0 8px;
  line-height: 1.45;
}
.ai-settings__textarea--notes{
  font-size: 14px;
  line-height: 1.45;
}

.ai-settings__usage{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ai-settings__usage-title{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
}
.ai-settings__usage-lead{
  margin: 0 0 12px;
  line-height: 1.5;
}
.ai-settings__usage-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Widżet asystenta AI (admin, prawy dolny róg) — cień + stonowany niebiesko-szary (bez lawendy) */
.ai-chat-widget{
  --ai-chat-edge: rgba(var(--p-slate-700), 0.18);
  --ai-chat-shadow-panel:
    0 2px 4px rgba(var(--p-slate-900), 0.07),
    0 12px 28px rgba(var(--p-blue-600), 0.14),
    0 28px 64px rgba(var(--p-slate-900), 0.26),
    0 52px 120px rgba(var(--p-slate-900), 0.3),
    0 0 0 1px rgba(var(--p-white), 0.55) inset;
  --ai-chat-shadow-fab:
    0 4px 8px rgba(var(--p-slate-900), 0.14),
    0 14px 36px rgba(var(--p-blue-700), 0.38),
    0 28px 72px rgba(var(--p-slate-900), 0.28),
    0 2px 3px rgba(var(--p-white), 0.35) inset;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1200;
  font-family: var(--sans);
}
.ai-chat-widget__fab{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(var(--p-white), 0.35);
  background: linear-gradient(150deg, var(--c-blue-500) 0%, var(--c-blue-600) 52%, var(--c-blue-700) 100%);
  box-shadow: var(--ai-chat-shadow-fab);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--c-slate-50);
  text-shadow: 0 1px 2px rgba(var(--p-slate-900), 0.35);
}
.ai-chat-widget__fab:hover{
  border-color: rgba(var(--p-white), 0.55);
  filter: brightness(1.06);
  box-shadow:
    0 6px 12px rgba(var(--p-slate-900), 0.16),
    0 18px 46px rgba(var(--p-blue-700), 0.42),
    0 36px 88px rgba(var(--p-slate-900), 0.26),
    0 2px 3px rgba(var(--p-white), 0.4) inset;
}
.ai-chat-widget.is-open .ai-chat-widget__fab{
  border-color: rgba(var(--p-white), 0.6);
  filter: brightness(1.03);
}
/* Domyślnie ukryte — NIE używaj samego atrybutu hidden: display:flex z klasy nadpisuje [hidden] w przeglądarce */
.ai-chat-widget__panel{
  display: none !important;
  position: absolute;
  bottom: 60px;
  right: 0;
  width: min(400px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  border-radius: 18px;
  border: 1px solid rgba(var(--p-white), 0.55);
  background: linear-gradient(
    168deg,
    rgba(var(--p-white), 0.88) 0%,
    rgba(var(--p-slate-50), 0.78) 32%,
    rgba(var(--p-slate-100), 0.72) 65%,
    rgba(224, 242, 254, 0.75) 100%
  );
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  box-shadow: var(--ai-chat-shadow-panel);
  overflow: hidden;
}
.ai-chat-widget.is-open .ai-chat-widget__panel{
  display: flex !important;
  flex-direction: column;
}
.ai-chat-widget__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--p-white), 0.35);
  background: linear-gradient(95deg, rgba(var(--p-white), 0.72) 0%, rgba(var(--p-slate-100), 0.58) 40%, rgba(219, 234, 254, 0.55) 100%);
}
.ai-chat-widget__title{
  font-weight: 800;
  font-size: 14px;
  color: var(--c-slate-900);
}
.ai-chat-widget__close{
  border: none;
  background: rgba(var(--p-white), 0.72);
  border-radius: 10px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  color: var(--c-slate-700);
  opacity: 0.9;
}
.ai-chat-widget__close:hover{ opacity: 1; background: rgba(var(--p-white), 0.88); }
.ai-chat-widget__log{
  flex: 1;
  min-height: 160px;
  max-height: min(38vh, 320px);
  overflow-y: auto;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(var(--p-white), 0.55) 0%, rgba(var(--p-slate-50), 0.72) 100%);
}
.ai-chat-widget__error-wrap{
  padding: 0 12px;
  flex-shrink: 0;
}
.ai-chat-widget__error-wrap[hidden]{
  display: none !important;
}
.ai-chat-widget__error{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid rgba(var(--p-red-600), 0.45);
  background: rgba(var(--p-red-600), 0.08);
  font-size: 13px;
  line-height: 1.45;
}
.ai-chat-widget__error-text{
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.ai-chat-widget__error-dismiss{
  align-self: flex-start;
}
.ai-chat-widget__composer{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(var(--p-white), 0.3);
  background: linear-gradient(0deg, rgba(var(--p-white), 0.72) 0%, rgba(var(--p-slate-50), 0.82) 100%);
}
.ai-chat-widget__input{
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(var(--p-blue-500), 0.38);
  padding: 8px 10px;
  font-size: 14px;
  resize: vertical;
  min-height: 44px;
  font-family: var(--sans);
  background: rgba(var(--p-white), 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-inset), 0 1px 3px rgba(var(--p-blue-600), 0.06) inset;
}
.ai-chat-widget__input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--p-blue-500), 0.22), 0 1px 3px rgba(var(--p-blue-600), 0.1) inset;
  border-color: rgba(var(--p-blue-600), 0.55);
}
.ai-chat-widget__actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ai-chat-widget__bubble{
  max-width: 94%;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--p-slate-500), 0.2);
  box-shadow: 0 4px 14px rgba(var(--p-slate-900), 0.07);
}
.ai-chat-widget__bubble:last-child{ margin-bottom: 0; }
.ai-chat-widget__bubble--user{
  margin-left: auto;
  background: linear-gradient(165deg, var(--c-blue-400) 0%, var(--c-blue-500) 55%, var(--c-blue-600) 100%);
  border-color: rgba(var(--p-blue-700), 0.45);
  color: var(--c-slate-50);
  box-shadow: 0 6px 20px rgba(var(--p-blue-600), 0.35), 0 2px 4px rgba(var(--p-slate-900), 0.12);
}
.ai-chat-widget__bubble--user .ai-chat-widget__bubble-label{
  color: rgba(var(--p-slate-100), 0.85);
}
.ai-chat-widget__bubble--user .ai-chat-widget__bubble-text{
  color: var(--c-slate-50);
}
.ai-chat-widget__bubble--assistant{
  margin-right: auto;
  background: linear-gradient(165deg, rgba(var(--p-white), 0.92) 0%, rgba(var(--p-slate-50), 0.82) 45%, rgba(var(--p-slate-100), 0.78) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(var(--p-slate-600), 0.28);
  box-shadow: 0 6px 18px rgba(var(--p-slate-900), 0.1), 0 2px 4px rgba(var(--p-slate-900), 0.05), var(--glass-inset);
}
.ai-chat-widget__bubble--assistant .ai-chat-widget__bubble-label{
  color: var(--c-slate-600);
}
.ai-chat-widget__bubble--assistant .ai-chat-widget__bubble-text{
  color: var(--c-slate-900);
}
.ai-chat-widget__bubble-label{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ai-chat-widget__bubble-text{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 14px;
}
@media (max-width: 600px){
  .ai-chat-widget{
    bottom: 12px;
    right: 12px;
  }
  .ai-chat-widget.is-open .ai-chat-widget__panel{
    width: min(400px, calc(100dvw - 24px));
    max-height: 70vh;
    bottom: 58px;
  }
}

/* === Wejście po zalogowaniu: jedna nakładka + fade / „lift” treści (bez kafelków) === */
body.ft-login-reveal-pending{
  overflow: hidden;
}

.ft-login-reveal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: auto;
  background: linear-gradient(
    152deg,
    rgba(6, 16, 36, 0.98) 0%,
    rgba(var(--p-blue-700), 0.55) 48%,
    rgba(8, 19, 42, 0.98) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(var(--p-white), 0.06);
}

.ft-login-reveal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 72% at 50% 38%, rgba(var(--p-blue-500), 0.2), transparent 58%);
  pointer-events: none;
}

.ft-login-reveal::after{
  content: "";
  position: absolute;
  inset: -55% -35%;
  background: linear-gradient(
    118deg,
    transparent 43%,
    rgba(var(--p-white), 0.1) 50%,
    transparent 57%
  );
  transform: translateX(-38%) rotate(0.001deg);
  pointer-events: none;
}

body.ft-login-reveal--on .ft-login-reveal{
  animation: ftLoginOverlayOut 0.82s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

body.ft-login-reveal--on .ft-login-reveal::after{
  animation: ftLoginShineSweep 0.78s ease-out forwards;
}

@keyframes ftLoginOverlayOut{
  0%{
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100%{
    opacity: 0;
    transform: scale(1.02);
    filter: blur(14px);
    visibility: hidden;
  }
}

@keyframes ftLoginShineSweep{
  0%{ transform: translateX(-38%) translateY(4%) rotate(0.001deg); }
  100%{ transform: translateX(42%) translateY(-4%) rotate(0.001deg); }
}

body.ft-login-reveal--on .topbar,
body.ft-login-reveal--on main{
  animation: ftLoginContentIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

@keyframes ftLoginContentIn{
  0%{
    opacity: 0.55;
    transform: translateY(12px);
    filter: blur(4px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* === Full-width single column on pages (keep TODO split) === */
.page-home .grid--wide,
.page-inventory .grid--wide,
.page-people .grid--wide,
.page-event-checklist .grid--wide,
.page-permissions .grid--wide{
  grid-template-columns: 1fr !important;
}

/* Packlist checklist: wider content band, centered like a focused panel */
.page-event-checklist main.wrap{
  width: min(1680px, 100%);
}

/* Permissions: szersza karta na większych ekranach */
.page-permissions main.wrap{
  width: min(1400px, 100%);
}

@media(max-width: 900px){
  .topbar__inner{
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
  }
  .brandslot{
    width: auto;
    min-width: 0;
    min-height: 44px;
    flex: 1 1 auto;
  }
  .brandslot__logo{
    max-width: 180px;
    max-height: 44px;
  }
  .topbar__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 82px;
    padding: 6px 12px;
    margin-left: auto;
    border: 1px solid rgba(var(--p-white),.22);
    border-radius: 12px;
    background: rgba(var(--p-slate-900),.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--c-white);
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .02em;
  }
  .topbar__menu{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(var(--p-white),.2);
    border-radius: 14px;
    background: rgba(var(--p-slate-900),.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(var(--p-shadow-base), 0.25);
  }
  .topbar__menu.is-open{
    display: flex;
  }
  .nav{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav__link{
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.3;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(var(--p-white), 0.06);
    border-color: rgba(var(--p-white), 0.08);
    color: rgba(var(--p-white), 0.88);
  }
  .nav__link.is-active{
    background: rgba(var(--p-white), 0.14);
    border-color: rgba(var(--p-white), 0.18);
  }
  .nav__link--action{
    font-size: 14px;
  }
  .topbar__actions{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .topbar__actions .nav__link,
  .topbar__actions form,
  .topbar__actions button{
    width: 100%;
    margin: 0;
  }

  .wrap{
    width: 100%;
  }
  main.wrap{
    padding: 12px 0 20px;
  }
  .card__head{
    padding: 14px 14px 10px;
  }
  .card__body{
    padding: 12px 14px 14px;
  }
  .card__head h1{
    font-size: clamp(22px, 6vw, 30px);
  }
  .card__head h2{
    font-size: clamp(18px, 4.8vw, 24px);
  }
  .pill{
    padding: 6px 10px;
    font-size: 12px;
  }
  .table{
    min-width: 0;
  }
  .table--editor{
    min-width: 0;
  }
  .table--people{
    table-layout: auto;
  }
  .table--people td,
  .table--people th{
    overflow: visible;
  }
  .table--people td:nth-child(2) .inv-inline__display,
  .table--people td:nth-child(3) .inv-inline__display,
  .table--people td:nth-child(4) .inv-inline__display{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .inv-inline__actions{
    justify-content: flex-start;
  }
  .actions{
    width: 100%;
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .field--actions{
    display: block;
  }
  .field--actions .btn{
    width: 100%;
    min-height: 46px;
  }
  .picker{
    flex-direction: column;
    align-items: stretch;
  }
  .combobox{
    min-width: 0;
    flex: 1 1 auto;
  }
  .picker .btn{
    width: 100%;
  }
  .todo-row__titlebtn{
    max-width: 100%;
  }
  .event-read div,
  .table td,
  .muted{
    overflow-wrap: anywhere;
  }

  .table--inventory thead,
  .table--people thead,
  .table--inventory-avail thead,
  .table--report thead{
    display: none;
  }
  .table--inventory,
  .table--inventory tbody,
  .table--inventory tr,
  .table--inventory td,
  .table--people,
  .table--people tbody,
  .table--people tr,
  .table--people td,
  .table--inventory-avail,
  .table--inventory-avail tbody,
  .table--inventory-avail tr,
  .table--inventory-avail td,
  .table--report,
  .table--report tbody,
  .table--report tr,
  .table--report td{
    display: block;
    width: 100%;
  }
  .table--inventory tr,
  .table--people tr,
  .table--inventory-avail tr,
  .table--report tr{
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .table--inventory tr:last-child,
  .table--people tr:last-child,
  .table--inventory-avail tr:last-child,
  .table--report tr:last-child{
    border-bottom: 0;
  }
  .table--inventory td,
  .table--people td,
  .table--inventory-avail td,
  .table--report td{
    padding: 6px 0;
    text-align: left !important;
    border: 0;
  }
  .table--inventory td::before,
  .table--people td::before,
  .table--inventory-avail td::before,
  .table--report td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }
  .table--people colgroup{
    display: none;
  }
  .table--inventory .inv-inline__actions,
  .table--people .inv-inline__actions{
    width: 100%;
    justify-content: flex-start;
  }
  .table--inventory .inv-inline__actions .btn,
  .table--people .inv-inline__actions .btn,
  .table--people .inv-inline__actions select{
    min-height: 42px;
  }

  .table--events thead,
  .table--attachments thead{
    display: none;
  }
  .table--events,
  .table--events tbody,
  .table--events tr,
  .table--events td,
  .table--attachments,
  .table--attachments tbody,
  .table--attachments tr,
  .table--attachments td{
    display: block;
    width: 100%;
  }
  .table--events tr,
  .table--attachments tr{
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .table--events tr:last-child,
  .table--attachments tr:last-child{
    border-bottom: 0;
  }
  .table--events td,
  .table--attachments td{
    padding: 6px 0;
    text-align: left !important;
    border: 0;
  }
  .table--events td::before,
  .table--attachments td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }
  .table--events td:first-child::before,
  .table--attachments td:first-child::before{
    display: none;
  }
  /* Mobile: pokazuj kropki, ukryj belki */
  .calendar__bars{
    display: none !important;
  }
  .calendar__markers{
    display: inline-flex !important;
  }
  .table--mobile-collapsible tr.is-collapsible td{
    display: none;
  }
  .table--mobile-collapsible tr.is-collapsible td:first-child{
    display: block;
    position: relative;
    padding-right: 34px;
  }
  .table--mobile-collapsible tr.is-collapsible td:first-child::after{
    content: "▾";
    position: absolute;
    right: 4px;
    top: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 900;
  }
  .table--mobile-collapsible tr.is-collapsible.is-collapsed td:first-child::after{
    content: "▸";
  }
  .table--mobile-collapsible tr.is-collapsible:not(.is-collapsed) td{
    display: block;
  }
  .table--mobile-collapsible tr.is-collapsible:not(.is-collapsed) td:first-child::after{
    content: "▾";
  }
  .table--mobile-collapsible-avail tr.is-collapsible.is-collapsed td[data-label="Dostępne"]{
    display: block;
  }
  .table--mobile-collapsible-avail tr.is-collapsible.is-collapsed td[data-label="Dostępne"]::before{
    display: block;
  }

  .calendar__grid{
    gap: 4px;
  }
  .calendar__cell{
    aspect-ratio: auto;
    min-height: 48px !important;
    padding: 6px 4px;
    border-width: 2px;
    border-radius: 10px;
  }
  .calendar__cell .cal-more{
    display: none;
  }
  .calendar__daynum{
    font-size: 12px;
    line-height: 1;
    margin-bottom: 2px;
  }
  .calendar__markers{
    gap: 3px;
  }
  .calendar__dot{
    width: 10px;
    height: 10px;
    border-width: 1.5px;
    box-shadow: 0 0 0 1px rgba(var(--p-white),.6);
  }
  .calendar__dot--event{
    background: var(--c-fuchsia-500);
  }
  .calendar__dot--rental{
    background: var(--c-blue-600);
  }
  /* Dni „po fakcie” — bliżej oryginalnych kolorów niż poprzednia wersja */
  .calendar__cell.is-past .calendar__dot--event{
    background: rgba(var(--p-fuchsia-500),.72) !important;
    border-color: rgba(var(--p-slate-500),.28) !important;
    opacity: 0.95;
    filter: saturate(0.88);
  }
  .calendar__cell.is-past .calendar__dot--rental{
    background: rgba(var(--p-blue-600),.68) !important;
    border-color: rgba(var(--p-slate-500),.28) !important;
    opacity: 0.95;
    filter: saturate(0.88);
  }
  .calendar__cell.is-past:not(.is-today){
    background: var(--cal-past-bg);
    border-color: var(--cal-past-border);
  }
  .calendar__cell.is-selected{
    border-color: var(--cal-selected-border);
    box-shadow: var(--cal-lift), var(--cal-future-shadow), 0 0 0 2px var(--cal-selected-glow);
  }
  .calendar__cell.is-today.is-selected{
    box-shadow: var(--cal-lift), var(--cal-future-shadow), inset 0 0 0 2px var(--cal-today-inset), 0 0 0 2px var(--cal-selected-glow);
  }
  .calendar__sidearrow{
    top: 0;
    transform: none;
    width: 44px;
    height: 44px;
    box-shadow: none;
    background: rgba(var(--p-slate-900), 0.08);
  }
  .calendar__sidearrow::before{
    width: 12px;
    height: 12px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }
  .calendar__sidearrow--left{
    left: 0;
  }
  .calendar__sidearrow--right{
    right: 0;
  }
  .calendar__daynum{
    font-size: 14px;
  }
  .calendar__title{
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    margin: 0 48px 10px;
  }
  .cal-ev{
    padding: 4px 6px;
    font-size: 11px;
  }
  .calday__event{
    font-size: 15px;
    padding: 10px 12px;
  }

  .todo-layout{
    grid-template-columns: 1fr !important;
  }
  .todo-sidebar,
  .todo-detail{
    min-width: 0;
    width: 100%;
  }
  .todo-row{
    align-items: flex-start;
  }
  .todo-row__left{
    width: 100%;
  }
  .todo-row__titlebtn{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }
  .todo-row__right{
    flex: 0 0 auto;
  }
  .todo-row.is-collapsible{
    cursor: pointer;
  }
  .todo-row.is-collapsible .todo-row__left{
    position: relative;
    padding-right: 28px;
  }
  .todo-row.is-collapsible .todo-row__left::after{
    content: "▸";
    position: absolute;
    right: 0;
    top: 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 900;
  }
  .todo-row.is-collapsible:not(.is-collapsed) .todo-row__left::after{
    content: "▾";
  }
  .todo-row.is-collapsible.is-collapsed .todo-row__right{
    display: none;
  }
  .todo-row.is-collapsible:not(.is-collapsed) .todo-row__right{
    display: block;
    width: 100%;
    margin-top: 8px;
  }
  .todo-row.is-collapsible:not(.is-collapsed){
    flex-direction: column;
    align-items: stretch;
  }
}

@media(max-width: 900px){
  /*
    Mobile modal — pełnoekranowy „sheet" wymuszony przez position: fixed + inset: 0 zamiast
    polegania na 100dvh/100svh (iOS Safari ma niezliczone quirki z viewport units pod HTTPS,
    klawiaturą, address barem). Kluczowe założenia (testowane na fizycznym iPhone iOS 18+):
      • .modal__dialog jest własnym kontenerem fixed inset:0 — nie zależy od vh/svh.
      • .modal jest tylko hostem backdropu — nie scroll containerem.
      • body i html dostają overflow: hidden gdy modal otwarty (klasa body.modal-open
        ustawiana przez syncModalState w app.js).
      • .modal__body — jedyny scroll container (overflow-y: auto, flex: 1 1 auto + height:0
        + min-height: 0 — magia która na iOS Safari daje stabilny scroll wewnątrz nested flex).
      • animation: none + transform: none na dialogu — animacja modalDialogIn zostawia
        transform: scale(1), który tworzy stacking context i rozwala scroll na iOS.
  */
  html:has(body.modal-open),
  body.modal-open{
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: contain !important;
  }
  .modal{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .modal__dialog,
  .modal__dialog--wide,
  .modal__dialog--picker{
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
  .modal__head{
    padding: max(12px, env(safe-area-inset-top, 0px)) 14px 10px !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
    background: rgba(var(--p-white), 0.96);
    backdrop-filter: blur(var(--glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  }
  .modal__body{
    flex: 1 1 auto !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px max(20px, env(safe-area-inset-bottom, 16px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    position: static !important;
  }
  .modal__dialog:has(.ft-help){
    overflow: hidden !important;
  }
  .table{
    min-width: 0;
  }
  .table--inventory,
  .table--people,
  .table--inventory-avail,
  .table--report,
  .table--events,
  .table--packlist{
    min-width: 0;
  }
  .todo-layout{
    gap: 12px;
  }
  .calendar__grid{
    gap: 4px;
  }
  .calendar__cell{
    aspect-ratio: auto;
    min-height: 48px !important;
    padding: 6px 4px;
  }
  .calendar__sidearrow{
    width: 44px;
    height: 44px;
    top: 0;
    transform: none;
  }
  .calendar__sidearrow::before{
    width: 12px;
    height: 12px;
    border-left-width: 2px;
    border-bottom-width: 2px;
  }
  .calendar__sidearrow--left{
    left: 0;
  }
  .calendar__sidearrow--right{
    right: 0;
  }
  .calendar__cell.is-today::after{
    inset: 1px;
    font-size: clamp(11px, 5.4vw, 16px);
    letter-spacing: .03em;
    font-weight: 800;
    color: var(--cal-today-watermark);
  }
  .calday__event{
    font-size: 16px;
  }
  .flatpickr-calendar{
    width: min(420px, calc(100dvw - 24px));
    max-width: calc(100dvw - 24px);
    box-sizing: border-box;
  }
  .flatpickr-days,
  .dayContainer{
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .flatpickr-day{
    max-width: none;
    height: 52px;
    line-height: 52px;
    font-size: 17px;
  }
}

/* Mobile stabilization pass (global) */
@media(max-width: 900px){
  .input,
  .select,
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="password"]{
    font-size: 16px;
  }

  .btn{
    min-height: 44px;
  }

  .form-row{
    grid-template-columns: 1fr !important;
  }

  .tablewrap{
    overflow-x: auto;
    overflow-y: hidden;
  }

  table.table--mobile-collapsible{
    min-width: 0 !important;
    width: 100% !important;
  }

  .table--mobile-collapsible tbody,
  .table--mobile-collapsible tr{
    display: block;
    width: 100%;
  }

  .table--mobile-collapsible tr{
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }

  .table--mobile-collapsible tr:last-child{
    border-bottom: 0;
  }

  .table--mobile-collapsible td{
    padding: 6px 0;
    text-align: left !important;
    border: 0;
  }

  .table--mobile-collapsible tr.is-collapsible td{
    display: none;
  }

  .table--mobile-collapsible tr.is-collapsible td:first-child{
    display: block;
    position: relative;
    padding-right: 34px;
  }

  .payments-topic__main{
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .payments-topic__amount{
    margin-left: auto;
  }

  .payments-topic__meta{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Przeglądarki bez backdrop-filter: mniej przezroczystości = czytelność */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card{
    background: rgba(var(--p-white), 0.96);
  }
  .topbar{
    background: linear-gradient(180deg, rgba(18, 38, 71, 0.92), rgba(15, 33, 62, 0.88));
  }
  input, textarea, select{
    background: rgba(var(--p-white), 0.98);
  }
  .modal__backdrop{
    background: rgba(var(--p-slate-900), 0.72);
  }
  .modal__dialog{
    background: rgba(var(--p-white), 0.98);
  }
  .tablewrap, .table{
    background: rgba(var(--p-white), 0.96);
  }
}

/* =========================================================================
   Dropbox — wewnętrzny eksplorator plików
   ========================================================================= */
.page-dropbox .grid--wide{ grid-template-columns: 1fr !important; }
.page-dropbox main.wrap{ max-width: 1400px; }

.dropbox{ display: flex; flex-direction: column; }
.dropbox__head{ display: block; padding-bottom: 8px; }
.dropbox__head-row{ flex-wrap: wrap; gap: 12px; align-items: center; }

.dropbox__crumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 14px; min-width: 0;
}
.dropbox__crumb{
  color: var(--c-blue-700, #1d4ed8);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.dropbox__crumb:hover{ background: rgba(var(--p-blue-600), .08); }
.dropbox__crumb--current{ color: var(--text); font-weight: 700; }
.dropbox__crumb-sep{ color: var(--muted); }

.dropbox__usage{ min-width: 220px; max-width: 320px; flex: 0 0 auto; }
.dropbox__usage-text{ display: flex; gap: 6px; align-items: baseline; margin-bottom: 4px; }
.dropbox__usage-bar{
  height: 8px;
  background: rgba(var(--p-slate-900), .08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.dropbox__usage-fill{
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width .25s ease;
}
.dropbox__usage-fill.is-warn{ background: linear-gradient(90deg, #f59e0b, #d97706); }
.dropbox__usage-fill.is-full{ background: linear-gradient(90deg, #ef4444, #b91c1c); }

.dropbox__toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border-soft);
}
.dropbox__toolbar-left{ display: flex; flex-wrap: wrap; gap: 8px; }
.dropbox__toolbar-right{
  display: inline-flex;
  border: 1px solid var(--glass-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--tablewrap-bg);
}
.dropbox__view-btn{
  border: 0;
  background: transparent;
  padding: 7px 11px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  transition: background-color .15s ease, color .15s ease;
}
.dropbox__view-btn + .dropbox__view-btn{ border-left: 1px solid var(--glass-border-soft); }
.dropbox__view-btn:hover{ background: rgba(var(--p-blue-600), .08); color: var(--c-blue-700); }
.dropbox__view-btn.is-active{
  background: rgba(var(--p-blue-600), .14);
  color: var(--c-blue-700, #1d4ed8);
}

.dropbox__body{ min-height: 320px; }
.dropbox__empty{
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 60px 16px; color: var(--muted);
}
.dropbox__empty-icon{ font-size: 56px; line-height: 1; margin-bottom: 12px; opacity: .55; }
.dropbox__empty-title{ font-size: 16px; font-weight: 700; color: var(--text); margin: 0; }
.dropbox__empty-sub{ margin: 6px 0 0; }

/* Tylko jeden widok aktywny — JS ustawia data-view na <body class="page-dropbox">.
   Fallback: gdy JS jeszcze nie pomalował — pokazujemy „icons" (najbezpieczniej). */
.dropbox__view{ display: none; }
.page-dropbox:not([data-view]) .dropbox__view--icons{ display: grid; }
.page-dropbox[data-view="icons"]   .dropbox__view--icons{ display: grid; }
.page-dropbox[data-view="list"]    .dropbox__view--list{ display: block; }
.page-dropbox[data-view="details"] .dropbox__view--details{ display: block; }

.dropbox__grid{
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px;
  padding: 4px 2px 8px;
}
.dropbox-tile{
  position: relative;
  border-radius: 10px;
  padding: 10px 8px 14px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, transform .12s ease;
  outline: none;
}
.dropbox-tile:hover{ background: rgba(var(--p-blue-600), .07); }
.dropbox-tile:focus-visible{
  background: rgba(var(--p-blue-600), .12);
  box-shadow: 0 0 0 2px rgba(var(--p-blue-600), .35);
}
.dropbox-tile__open{
  display: block;
  text-decoration: none;
  color: inherit;
}
.dropbox-tile__icon{
  display: flex; align-items: center; justify-content: center;
  height: 72px; margin: 0 auto 8px;
  color: var(--muted);
}
.dropbox-tile__icon--folder{ color: #f5b400; }
.dropbox-tile__icon--image{ color: #16a34a; }
.dropbox-tile__icon--pdf{ color: #dc2626; }
.dropbox-tile__icon--video{ color: #9333ea; }
.dropbox-tile__icon--audio{ color: #0891b2; }
.dropbox-tile__icon--archive{ color: #ca8a04; }

.dropbox-tile__icon--thumb{
  position: relative;
  height: 96px;
  margin: -2px auto 8px;
  border-radius: 8px;
  background: rgba(var(--p-slate-900), .04);
  overflow: hidden;
}
.dropbox-tile__icon--thumb .dropbox-tile__thumb-fallback{
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  color: #16a34a;
}
.dropbox-tile__icon--thumb.is-broken .dropbox-tile__thumb-fallback{ display: flex; }
.dropbox-tile__icon--thumb.is-broken .dropbox-tile__thumb{ display: none; }
.dropbox-tile__thumb{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dropbox-tile__name{
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.6em;
}
.dropbox-tile__meta{ margin-top: 2px; font-size: 11px; }

.dropbox-tile .dropbox-item-menu{
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity .15s ease;
}
.dropbox-tile:hover .dropbox-item-menu,
.dropbox-tile:focus-within .dropbox-item-menu,
.dropbox-tile .dropbox-item-menu[open]{ opacity: 1; }

.dropbox__list{ list-style: none; padding: 0; margin: 0; }
.dropbox-row{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color .12s ease;
}
.dropbox-row:hover{ background: rgba(var(--p-blue-600), .06); }
.dropbox-row__open{
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.dropbox-row__icon{ font-size: 18px; line-height: 1; flex: 0 0 auto; }
.dropbox-row__icon--folder{ color: #f5b400; }
.dropbox-row__icon--thumb{
  width: 28px; height: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(var(--p-slate-900), .05);
  display: inline-flex; align-items: center; justify-content: center;
}
.dropbox-row__icon--thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dropbox-row__name{
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px;
}
.dropbox-row__size{ flex: 0 0 auto; }

.dropbox__details td .dropbox-row__open{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dropbox__details .dropbox-row__icon{ font-size: 16px; }
.dropbox__details .dropbox-row__icon--thumb{ width: 24px; height: 24px; }

/* Podświetlenie nowych zadań / przypisań (3s, potem fade) */
@keyframes ft-notice-hl-fade {
  0%, 83% {
    box-shadow: inset 0 0 0 2px rgba(245, 180, 0, 0.95), 0 0 0 3px rgba(245, 180, 0, 0.28);
    background-color: rgba(255, 196, 0, 0.22);
  }
  100% {
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent;
    background-color: transparent;
  }
}
@keyframes ft-notice-hl-bar-fade {
  0%, 83% {
    box-shadow: 0 0 0 3px #f5b400, 0 2px 10px rgba(245, 180, 0, 0.45);
  }
  100% {
    box-shadow: none;
  }
}
.ft-notice-hl{
  animation: ft-notice-hl-fade 3.6s ease-out forwards;
}
.calendar__bar.ft-notice-hl,
.calday__event.ft-notice-hl{
  animation-name: ft-notice-hl-bar-fade;
  z-index: 14;
}
@media (prefers-reduced-motion: reduce){
  .ft-notice-hl,
  .calendar__bar.ft-notice-hl,
  .calday__event.ft-notice-hl{
    animation: none;
    box-shadow: 0 0 0 3px #f5b400;
  }
}

.ft-todo-pow{
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.ft-todo-pow__stage{
  position: absolute;
  inset: 0;
}
.ft-todo-pow__item,
.ft-todo-pow__caption{
  position: absolute;
  left: 50%;
  top: 46%;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}
.ft-todo-pow__item{
  width: min(280px, 58vw);
}
.ft-todo-pow__item img{
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.28));
}
.ft-todo-pow__item--1{
  --r: -13deg;
  --r-end: -28deg;
  --dx: -18px;
  --dy: -10px;
  --fall-x: -42px;
  animation-delay: 0s, 0s;
}
.ft-todo-pow__item--2{
  --r: 10deg;
  --r-end: 26deg;
  --dx: 22px;
  --dy: 14px;
  --fall-x: 56px;
  animation-delay: 0.3s, 0.08s;
}
.ft-todo-pow__item--3{
  --r: -4deg;
  --r-end: 12deg;
  --dx: 4px;
  --dy: -22px;
  --fall-x: 18px;
  animation-delay: 0.6s, 0.16s;
}
.ft-todo-pow__caption{
  top: calc(46% + min(148px, 28vw));
  margin: 0;
  padding: 0 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
  font-size: clamp(20px, 4.2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(15, 23, 42, 0.18);
  --r: -2deg;
  --r-end: 18deg;
  --dx: 0px;
  --dy: 0px;
  --fall-x: -24px;
  animation-delay: 0.6s, 0.22s;
}
@keyframes ft-pow-stamp{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.72);
  }
  22%{
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.88);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1);
  }
}
@keyframes ft-pow-fall{
  0%{
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1);
  }
  100%{
    opacity: 1;
    transform: translate(calc(-50% + var(--fall-x)), 132vh) translate(var(--dx), var(--dy)) rotate(var(--r-end)) scale(0.96);
  }
}
.ft-todo-pow.is-on .ft-todo-pow__item,
.ft-todo-pow.is-on .ft-todo-pow__caption{
  animation: ft-pow-stamp 0.32s cubic-bezier(0.16, 1.4, 0.32, 1) both;
}
.ft-todo-pow.is-on .ft-todo-pow__item--2{ animation-delay: 0.3s; }
.ft-todo-pow.is-on .ft-todo-pow__item--3,
.ft-todo-pow.is-on .ft-todo-pow__caption{ animation-delay: 0.6s; }
.ft-todo-pow.is-fall .ft-todo-pow__item,
.ft-todo-pow.is-fall .ft-todo-pow__caption{
  animation: ft-pow-fall 1.2s cubic-bezier(0.62, 0.02, 0.92, 0.22) forwards;
}
.ft-todo-pow.is-fall .ft-todo-pow__item--1{ animation-delay: 0s; }
.ft-todo-pow.is-fall .ft-todo-pow__item--2{ animation-delay: 0.08s; }
.ft-todo-pow.is-fall .ft-todo-pow__item--3{ animation-delay: 0.16s; }
.ft-todo-pow.is-fall .ft-todo-pow__caption{ animation-delay: 0.22s; }
.ft-todo-pow.is-static .ft-todo-pow__item--1,
.ft-todo-pow.is-static .ft-todo-pow__caption{
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r));
}
.ft-todo-pow.is-static .ft-todo-pow__item--2,
.ft-todo-pow.is-static .ft-todo-pow__item--3{
  display: none;
}

/* =========================================================================
   Mobile layout pass — później niż wcześniejsze @media 900px
   ========================================================================= */
@media (max-width: 900px){
  body{
    background-attachment: scroll !important;
  }
  body.topbar-menu-open{
    overflow: hidden;
  }

  .card--calendar,
  .card--calendar .card__body,
  .calendar{
    overflow: hidden;
  }
  .calendar{
    padding-top: 0;
  }
  .calendar__gridwrap{
    padding: 8px 4px 12px;
  }
  .calendar__grid,
  .calendar__dow,
  .calendar__cell{
    min-width: 0;
  }
  .calendar__dow{
    gap: 4px;
    font-size: 11px;
  }
  .calday__event{
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 16px;
  }

  .theme-dark-row--topbar{
    width: 100%;
  }
  .theme-dark-switch--topbar{
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--p-white), 0.18);
    background: rgba(var(--p-white), 0.08);
    box-sizing: border-box;
  }
  .theme-dark-switch--topbar .theme-dark-switch__label{
    color: var(--ui-text-strong, #fff);
    font-size: 15px;
    font-weight: 800;
  }

  .table--attachments td[data-label="Akcje"] .row,
  .table--packlist td[data-label="Akcje"] .row{
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .table--attachments td[data-label="Akcje"] .btn,
  .table--packlist td[data-label="Akcje"] .btn{
    min-height: 44px;
  }

  .event-address-line{
    align-items: stretch;
  }
  .event-address-line .btn{
    width: 100%;
  }
  .event-meta-plain{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .map{
    max-width: 100%;
    min-height: 240px;
    height: 240px;
  }
  .leaflet-container{
    max-width: 100%;
  }

  .ai-chat-widget{
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  html:has(body.modal-open),
  body.modal-open{
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: contain !important;
  }
  .modal{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .modal__dialog,
  .modal__dialog--wide,
  .modal__dialog--picker{
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}