/* LONAS webtoolkit — warstwa powłoki (shell) + bazowa typografia.
   Ładowana PO Bootstrapie (treść ekranów jeszcze na Bootstrap 4 do czasu faz 1–10).
   Wszystkie klasy strukturalne mają prefiks `lns-`, by nie kolidować z Bootstrapem.
   Wygląd = tokeny DS (public/css/lonas/styles.css). */

/* ---------- Baza ---------- */
body {
  background: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip-link (WCAG 2.4.1) */
.lns-skip {
  position: absolute; left: 8px; top: -48px; z-index: 1100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); font-weight: var(--fw-semibold);
  text-decoration: none; transition: top .15s ease-out;
}
.lns-skip:focus { top: 8px; color: var(--color-on-primary); }

/* ---------- App-bar (nagłówek zalogowany) ---------- */
.lns-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; min-height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
  position: sticky; top: 0; z-index: 1000;
}
.lns-bar__wm { height: 22px; width: auto; display: block; flex-shrink: 0; }
/* Dark: podmień na ciemny wariant wordmarku (kolorowy badge + biały tekst).
   NIE filtruj brightness/invert — to spłaszczało logo do białego kwadratu. */
[data-theme="dark"] .lns-bar__wm { content: url('/img/lonas-wordmark-dark.png'); }

/* Nav: jeden rząd, wypełnia przestrzeń między wordmarkiem a ctl */
.lns-nav {
  display: flex; gap: 2px; align-items: center;
  flex: 1; min-width: 0;
}
.lns-nav__link {
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--color-on-surface-variant); text-decoration: none; white-space: nowrap;
}
.lns-nav__link:hover { background: var(--surface-1); color: var(--color-on-surface); text-decoration: none; }
.lns-nav__link.is-active,
.lns-nav__link[aria-current="page"] {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-weight: var(--fw-semibold);
}
.lns-nav__link.is-disabled { opacity: .35; pointer-events: none; }

/* zachowane dla kompatybilności — nav ma teraz flex:1 */
.lns-bar__spacer { display: none; }

.lns-bar__ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* przyciski ikon / pille w pasku */
.lns-ico {
  width: 34px; height: 34px; border: 1px solid var(--color-outline-variant);
  background: var(--color-surface); border-radius: var(--radius-sm);
  color: var(--color-on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  text-decoration: none;
}
.lns-ico:hover { background: var(--surface-1); color: var(--color-on-surface); }
.lns-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 1px solid var(--color-outline-variant); background: var(--color-surface);
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; color: var(--color-on-surface-variant);
}
.lns-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; font-family: var(--font-mono); flex-shrink: 0;
  text-transform: uppercase;
}
.lns-flag { width: 18px; height: 12px; border-radius: 2px; display: inline-block; border: .5px solid rgba(0,0,0,.15); }
.lns-flag.f-pl { background: linear-gradient(#fff 50%, #DC143C 50%); }

/* hamburger — ukryty na desktopie, widoczny na mobile (≤720px) */
.lns-burger {
  display: none; flex-shrink: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--color-outline-variant); background: var(--color-surface);
  border-radius: var(--radius-sm); color: var(--color-on-surface);
  cursor: pointer; font-size: 18px; align-items: center; justify-content: center;
}

/* ---------- Dropdown „Więcej ▾" ---------- */
.lns-dd { position: relative; }
.lns-dd__btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--color-outline-variant); background: var(--color-surface);
  border-radius: var(--radius-sm); font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--color-on-surface-variant); cursor: pointer; font-family: var(--font-sans);
  height: 36px; padding: 0 11px; white-space: nowrap;
}
.lns-dd__btn:hover { background: var(--surface-1); color: var(--color-on-surface); }
.lns-dd__pop {
  position: fixed;                 /* pozycję ustawia prymityw lonas-menu.js */
  background: var(--color-surface); border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 6px; display: none; z-index: 1001; min-width: 220px;
}
.lns-dd__pop.is-open { display: block; }
.lns-dd__gl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--color-faint); padding: 8px 10px 4px;
}
.lns-dd__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border-radius: var(--radius-xs); color: var(--color-on-surface);
  text-decoration: none; font-size: var(--text-body-sm);
}
a.lns-dd__item:hover,
button.lns-dd__item:hover { background: var(--surface-1); text-decoration: none; }
.lns-dd__item--dis { opacity: .45; pointer-events: none; cursor: default; }
.lns-dd__sep { height: 1px; background: var(--color-outline-variant); margin: 5px 4px; }
.lns-dd__tag { margin-left: auto; font-size: 10px; color: var(--color-faint); }

/* ---------- Mobilny panel nawigacji (.lns-mnav) — pod paskiem (56px) ---------- */
.lns-mnav { display: none; }

/* ---------- Main ---------- */
.lns-main { max-width: 1320px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 28px) 64px; }

/* ---------- Flash ---------- */
.lns-flash {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius-sm); padding: 11px 14px; margin: 0 0 14px;
  font-size: var(--text-body-sm); border: 1px solid transparent;
}
.lns-flash__x { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 18px; line-height: 1; opacity: .7; padding: 0 2px; }
.lns-flash__x:hover { opacity: 1; }
.lns-flash--success { background: var(--color-ok-bg); color: var(--color-ok); border-color: var(--color-ok); }
.lns-flash--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.lns-flash--danger  { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }

/* ---------- Ekran logowania (split brand + formularz) ---------- */
.lns-login { display: flex; min-height: 100dvh; }
.lns-login__brand {
  width: 46%; max-width: 620px; background: var(--lonas-gradient); color: #fff;
  padding: 48px 52px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.lns-login__brand .lns-plaque {
  align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.lns-login__brand .lns-plaque img { height: 26px; width: auto; display: block; }
.lns-login__brand h1 { font-size: 38px; line-height: 1.1; font-weight: 700; margin: auto 0 16px; letter-spacing: -.5px; max-width: 12ch; }
.lns-login__brand p { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.86); max-width: 34ch; margin: 0 0 auto; }
.lns-login__brand .lns-foot { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7); }
.lns-login__waves {
  position: absolute; right: -80px; top: 120px; width: 420px; height: 420px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 60px rgba(255,255,255,.06), 0 0 0 130px rgba(255,255,255,.04);
}
.lns-login__pin {
  position: absolute; right: 96px; top: 300px; width: 46px; height: 46px; background: #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.lns-login__pin::after { content: ""; position: absolute; inset: 14px; background: var(--lonas-indigo); border-radius: 50%; }
.lns-login__area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; }
.lns-login__ctl { position: absolute; top: 28px; right: 32px; display: flex; align-items: center; gap: 8px; }
.lns-login__mbar {
  display: none; align-items: center; height: 56px; padding: 0 16px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-outline-variant);
}
.lns-login__mbar img { height: 22px; }
[data-theme="dark"] .lns-login__mbar img { content: url('/img/lonas-wordmark-dark.png'); }

/* ---------- Responsive (≤720px = mobile) ---------- */
@media (max-width: 720px) {
  /* bar: burger (LEWO) — wordmark z auto-marginem (pcha ctl w prawo) — ctl */
  .lns-bar__wm { margin-right: auto; }
  .lns-nav { display: none; }
  .lns-burger { display: inline-flex; }
  #lns-lngcode { display: none; }

  /* mobilny panel nawigacji — position:fixed pod paskiem */
  .lns-mnav {
    position: fixed; top: 56px; left: 0; right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-lg);
    z-index: 60; padding: 8px;
    max-height: 72vh; overflow-y: auto;
  }
  .lns-mnav.is-open { display: block; }
  .lns-mnav a {
    display: block; padding: 12px; border-radius: var(--radius-xs);
    color: var(--color-on-surface); text-decoration: none;
    font-size: var(--text-body); font-weight: var(--fw-medium);
    min-height: 44px; display: flex; align-items: center;
  }
  .lns-mnav a:hover { background: var(--surface-1); text-decoration: none; }
  .lns-mnav a.is-active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-weight: var(--fw-semibold);
  }
  .lns-mnav a.lns-mnav__dis { opacity: .45; pointer-events: none; }
  .lns-mnav__gl {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--color-faint); padding: 10px 12px 3px;
    display: block;
  }
  .lns-mnav__sep { height: 1px; background: var(--color-outline-variant); margin: 6px 4px; display: block; }

  /* login */
  .lns-login { flex-direction: column; }
  .lns-login__mbar { display: flex; }
  .lns-login__brand { width: 100%; max-width: none; padding: 22px 24px 24px; }
  .lns-login__brand .lns-plaque { display: none; }
  .lns-login__brand h1 { font-size: 23px; margin: 0 0 8px; max-width: none; }
  .lns-login__brand p { font-size: 13.5px; max-width: none; margin: 0; }
  .lns-login__brand .lns-foot { margin-top: 14px; }
  .lns-login__waves, .lns-login__pin { display: none; }
  .lns-login__area { align-items: flex-start; padding: 26px 24px 40px; }
  .lns-login__ctl { top: 11px; right: 14px; }
}