/* FJN System — E0 component styles: app layout: phone header, bottom menu, tablet and phone breakpoints.
   Loaded after fjn-layout.css (see templates/base.html); order matters. */
/* Phone header */
.fjn-mobilebar {
  position: sticky; top: 0; z-index: 40; display: none; align-items: center; gap: 4px;
  height: var(--fjn-topbar-h-m); padding: 0 4px 0 var(--fjn-sp-2);
  background: var(--fjn-surface); border-bottom: 1px solid var(--fjn-border);
}
.fjn-mobilebar__brand img { display: block; height: 24px; width: auto; margin: 0 var(--fjn-sp-2) 0 6px; }
.fjn-mobilebar__title { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fjn-mobilebar__branch {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 var(--fjn-sp-2);
  border-radius: var(--fjn-r-md); background: var(--fjn-bg);
  font-size: var(--fjn-fs-label); font-weight: var(--fjn-fw-bold); color: var(--fjn-text-2); white-space: nowrap;
}
.fjn-mobilebar__avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.fjn-bell--mobile .fjn-bell__button { width: 44px; height: 44px; }

/* Phone bottom menu: 5 equal targets, no horizontal scrolling [D4] */
.fjn-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--fjn-bottomnav-h);
  background: var(--fjn-surface); border-top: 1px solid var(--fjn-border);
}
.fjn-bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--fjn-text-2); font-size: 11px; line-height: 13px; font-weight: var(--fjn-fw-regular); text-align: center;
}
.fjn-bottomnav__item:hover { color: var(--fjn-text); text-decoration: none; }
.fjn-bottomnav__item[aria-current="page"] { color: var(--fjn-brand-600); font-weight: var(--fjn-fw-bold); box-shadow: inset 0 3px 0 var(--fjn-brand-600); }

/* "Więcej" (more) sheet (phone) */
.fjn-sheet { padding: var(--fjn-sp-2) var(--fjn-sp-2) var(--fjn-sp-4); }
@media (max-width: 767px) {
  /* Sheet above the bottom menu (the menu stays visible under the dimming) */
  .fjn-sheet { margin-bottom: var(--fjn-bottomnav-h); }
}
.fjn-sheet__handle { display: block; width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: var(--fjn-border-strong); }
.fjn-sheet__list { margin: 0; padding: 0; list-style: none; }
.fjn-sheet__item {
  display: flex; align-items: center; gap: var(--fjn-sp-4); width: 100%; min-height: 56px; padding: 0 var(--fjn-sp-4);
  border: 0; background: none; color: var(--fjn-text); font-size: 16px; font-weight: var(--fjn-fw-regular); text-align: left;
}
a.fjn-sheet__item:hover { background: var(--fjn-brand-50); color: var(--fjn-text); text-decoration: none; }
.fjn-sheet__item[aria-current="page"] { font-weight: var(--fjn-fw-bold); color: var(--fjn-brand-600); }
.fjn-sheet__value { margin-left: auto; font-size: 15px; }
.fjn-sheet__divider { margin: var(--fjn-sp-2) var(--fjn-sp-4); border: 0; border-top: 1px solid var(--fjn-surface-2); }
.fjn-sheet__branch label { flex: 1; }
.fjn-sheet__select { width: auto; max-width: 50%; }
.fjn-sheet__user > span:last-child { display: flex; flex-direction: column; gap: 2px; padding: var(--fjn-sp-2) 0; }
.fjn-sheet__links { font-size: 14px; }
.fjn-sheet__logout { color: var(--fjn-danger-700); font-weight: var(--fjn-fw-bold); cursor: pointer; }
.fjn-sheet:not([open]) { display: none; }
@media (min-width: 768px) {
  .fjn-sheet { width: min(var(--fjn-modal-w), calc(100vw - 32px)); }
}

/* Page inside the layout */
.fjn-page { display: flex; flex-direction: column; gap: var(--fjn-sp-5); max-width: var(--fjn-content-max); padding: 28px var(--fjn-sp-8); }
.fjn-page--narrow { max-width: 640px; }
.fjn-page__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--fjn-sp-4); flex-wrap: wrap; }
.fjn-page__title { font-size: 28px; line-height: 36px; }
.fjn-page__heading { display: flex; align-items: baseline; gap: var(--fjn-sp-3); flex-wrap: wrap; }
.fjn-page__search { max-width: 640px; }
.fjn-bare { min-height: 100vh; }

/* Tablet: 88 px icon rail with captions [D5] */
@media (max-width: 1279px) {
  .fjn-sidebar { width: var(--fjn-rail-w); padding: 0 var(--fjn-sp-2) var(--fjn-sp-3); align-items: center; }
  .fjn-sidebar__brand { align-self: stretch; margin: 0 calc(-1 * var(--fjn-sp-2)) var(--fjn-sp-3); }
  .fjn-sidebar__logo, .fjn-sidebar__label, .fjn-sidebar__footer { display: none; }
  .fjn-sidebar__mark, .fjn-sidebar__short { display: block; }
  .fjn-sidebar__list { gap: 4px; }
  .fjn-sidebar__item {
    flex-direction: column; justify-content: center; gap: 4px; width: 72px; height: auto; min-height: 60px; padding: 6px 2px;
    border-radius: 8px; font-size: 11px; line-height: 13px; text-align: center;
  }
  .fjn-page { padding: var(--fjn-sp-6); }
  .fjn-app__messages { padding: var(--fjn-sp-4) var(--fjn-sp-6) 0; }
}

/* Phone */
@media (max-width: 767px) {
  .fjn-sidebar, .fjn-topbar { display: none; }
  .fjn-mobilebar { display: flex; }
  .fjn-bottomnav { display: grid; }
  .fjn-app__main { padding-bottom: var(--fjn-bottomnav-h); }
  .fjn-page { padding: var(--fjn-sp-4); gap: var(--fjn-sp-4); }
  .fjn-page__title { font-size: 24px; line-height: 32px; }
  .fjn-app__messages { padding: var(--fjn-sp-4) var(--fjn-sp-4) 0; }
  /* Notifications: full-width panel below the header, with dimming [D26] */
  .fjn-bell--mobile .fjn-bell__panel {
    position: fixed; top: var(--fjn-topbar-h-m); left: 0; right: 0; width: auto; max-height: calc(100vh - var(--fjn-topbar-h-m));
    overflow-y: auto; border: 0; border-radius: 0 0 14px 14px; box-shadow: var(--fjn-shadow-3);
  }
  .fjn-bell--mobile[open] > summary::before {
    content: ""; position: fixed; inset: var(--fjn-topbar-h-m) 0 0; z-index: 45; background: rgba(21, 24, 28, .45); cursor: default;
  }
}
/* 4.12.3: the „Więcej” sheet scrolls inside (Administracja, Oddział, Wyloguj stay reachable) */
.fjn-sheet { overflow-y: auto; overscroll-behavior: contain; }