/* ── Employee-portal shell: the sidebar every signed-in page shares ────────────────

   The launcher had a sidebar; the eleven pages it links to had a "← Powrót" link and
   nothing else. So the portal taught two different navigation models depending on which
   page you happened to be on, and the way back to the launcher was a text link the size
   of a caption.

   Why this is a separate stylesheet rather than more rules in portal.css: three pages
   (academy, downloads, certificate) deliberately do NOT load portal.css — they carry
   their own token names and portal.css sets `html, body { height: 100% }`, which breaks
   scrolling on the Academy page. Those three are exactly the pages an employee is sent
   to most, so "the sidebar exists except where you actually go" was not an option. This
   file is therefore self-contained: every colour resolves through `var(--token, literal)`
   so it picks up portal.css's palette when present and stands alone when it is not, and
   it sets no rule on `html` or `body` at all.

   Class names are prefixed `ps-` because portal.css already owns `.app`, `.side` and
   `.main` for the chat layout, which keeps its own two-pane shell. Two shells with one
   set of class names is how you get a sidebar that silently reflows someone else's page.
*/

.ps-shell {
  --ps-navy: var(--x-navy, #2C2760);
  --ps-red: var(--x-red, #E30613);
  --ps-fg: var(--fg-1, #2C2760);
  --ps-fg-2: var(--fg-2, #6C6C7C);
  --ps-fg-3: var(--fg-3, #9A9AA8);
  --ps-surface: var(--surface-1, #FFFFFF);
  --ps-surface-2: var(--surface-2, #FBFBFD);
  --ps-border: var(--border, #DDDDE5);
  --ps-tint: var(--x-navy-tint, #EAE9F2);

  min-height: 100vh;
}

/* The sidebar pins to the viewport's own left edge (not the shell's), so
   .ps-main only needs to stay clear of it — the page's own content wrapper
   (e.g. .home-wrap's max-width) decides how wide the content itself runs
   in the space to the right, rather than the shell forcing one opinion on
   every page. On a very wide monitor that leaves quiet margin on the right,
   not content stretched edge to edge. */
.ps-main {
  margin-left: 260px;
  min-width: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */

.ps-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 22px;
  border-right: 1px solid var(--ps-border);
  background: var(--ps-surface);
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
}

.ps-side .ps-logo {
  width: 118px;
  height: auto;
  display: block;
  margin-bottom: 6px;
}

.ps-side .ps-tagline {
  margin: 0 0 2px;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--ps-fg-3);
}

.ps-navtitle {
  margin-top: 1.4rem;
  margin-bottom: .45rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ps-fg-3);
}

/* "Status" and "Zalogowany" — same label, without the all-caps/tracking treatment.
   Sized up a touch too: .68rem was tuned for uppercase small-caps and reads as tiny
   once that treatment is gone. */
.ps-navtitle-plain {
  text-transform: none;
  letter-spacing: normal;
  font-size: .8rem;
}

/* Z-035: the language select rendered as a bare OS widget — every other input in the
   sidebar carries the shell's own border/radius/focus language, so this one did too. */
.ps-select {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--ps-border);
  border-radius: 9px;
  padding: .45rem 2rem .45rem .6rem;
  background: var(--ps-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236C6C7C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center/.7rem;
  color: var(--ps-fg);
  font: inherit;
  cursor: pointer;
}

.ps-select:focus {
  outline: none;
  border-color: var(--ps-navy);
}

/* Anchors the popup menu to the row that opens it — the menu is positioned absolute
   against this, not against the sidebar, so it stays put if the footer's own layout
   shifts (language select growing, version string wrapping). */
.ps-user-menu-wrap {
  position: relative;
  margin: 0 0 .6rem;
}

/* The whole row opens the account menu — not just the name — so the dots (and the
   padding around them) are clickable too, not a decorative dead zone next to a button. */
.ps-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .7rem;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: #221D4E;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ps-user {
  font-size: .88rem;
  font-weight: 500;
  color: inherit;
  word-break: break-word;
  min-width: 0;
}

.ps-user-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: inherit;
}

.ps-user-dots {
  flex: 0 0 auto;
  opacity: .55;
}

.ps-user-dots circle {
  fill: #fff;
}

.ps-user-row .ps-user-dots {
  opacity: 1;
}

/* Popup menu — opens upward from the footer row, since the row itself sits near the
   bottom of the viewport on most screens and a downward menu would run off-screen.
   `position: fixed` with left/width/bottom set from JS (not CSS anchored to the wrap):
   `.ps-side` sets `overflow-y: auto`, and per spec a non-visible overflow-y forces
   overflow-x to compute as `auto` too (there is no such thing as scroll on one axis
   only) — so a menu wider than the row and merely `position: absolute` inside that
   sidebar gets clipped at the sidebar's own edge instead of floating over the page. */
.ps-user-menu {
  position: fixed;
  /* Now a sibling of .ps-side (see _sidebar.html), not a descendant — the mobile drawer
     sets z-index:60 on .ps-side itself, and two fixed-position siblings stack strictly
     by z-index, no longer by "child paints after its ancestor". Must beat 60 or the open
     drawer covers this popup instead of the popup floating above it. */
  z-index: 70;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: .35rem;
  overflow: hidden;
}

.ps-user-menu-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .7rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ps-fg);
  font: inherit;
  font-size: .88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ps-user-menu-item:hover {
  background: #F6F6FF;
}

.ps-user-menu-item svg {
  flex: none;
}

/* Static info row — the org a user is signed into, not a control. Same padding as a
   menu item so the separator below it lines up, but no hover/cursor treatment. */
.ps-user-menu-org {
  padding: .5rem .7rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ps-fg-3);
  word-break: break-word;
}

.ps-user-menu-item-danger {
  color: var(--x-red, #E30613);
}

.ps-user-menu-item-danger:hover {
  background: rgba(227, 6, 19, .08);
}

.ps-user-menu-sep {
  height: 1px;
  margin: .3rem .2rem;
  background: var(--ps-border);
}

/* Language row inside the menu — a control, not a navigable item, so no hover/cursor
   treatment on the row itself, only on the select it contains. */
.ps-user-menu-lang {
  justify-content: space-between;
  cursor: default;
}

.ps-user-menu-lang:hover {
  background: transparent;
}

.ps-user-menu-lang .ps-select {
  width: auto;
  max-width: 132px;
  padding: .3rem 1.7rem .3rem .55rem;
  font-size: .82rem;
}

/* One button style for the sidebar, defined here rather than borrowed from portal.css's
   `.btn` — otherwise the three pages without that stylesheet render unstyled links. */
.ps-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .7rem;
  margin-bottom: .15rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ps-fg);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.ps-btn:hover {
  background: #F6F6FF;
}

.ps-btn svg {
  flex: none;
}

/* Flaticon UIcons glyphs (see uicons.css) — sized to match the inline-SVG icons they
   sit alongside elsewhere in the shell, coloured through `currentColor` so hover/active
   states (`.ps-btn:hover`, `[aria-current="page"]`) recolour them the same way the text
   already recolours, with no separate rule needed per state. */
.ps-nav-icon {
  flex: none;
  width: 18px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: currentColor;
}

/* The page you are on. Without it the sidebar answers "where can I go" but not
   "where am I", and every page looks like every other page. */
.ps-btn[aria-current="page"] {
  background: var(--ps-tint);
  font-weight: 600;
}

.ps-btn-home {
  margin-top: 2rem;
  margin-bottom: .35rem;
}

/* Sits right below Status, with a little breathing room above it. Light-grey fill
   (same token as portal.css's --surface-2) so it reads as its own small block rather
   than another plain nav link. */
.ps-btn-downloads {
  margin-top: .9rem;
  margin-bottom: 1rem;
  background: #F6F6FA;
}

/* ── Unread marker on a nav item ──────────────────────────────────────────────
   A count, not a dot: "3" tells you whether to look now, a dot only tells you
   something exists. Hidden entirely at zero — a badge reading "0" is noise that
   trains people to stop reading badges. */
.ps-badge {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  /* Same soft red as "Wyloguj"'s hover, but opaque (not the translucent rgba) — a
     translucent pill let the row's own hover background show through underneath it,
     which read as the hover "covering" the badge. Solid tint looks identical either way.
     Text switches to the red itself so it stays legible on the lighter background. */
  background: #FCE6E7;
  color: var(--ps-red);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.ps-badge[hidden] {
  display: none !important;
}

/* ── Status line ─────────────────────────────────────────────────────────────
   One compact row of "dot + short label" instead of three stacked blocks of
   label + state sentence + device chips. The label stays visible — a dot with
   no name means nothing on its own — only the device-level detail (which
   browser, which machine) moves to the title tooltip, set by poll() below. */

.ps-statusline {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .2rem;
}

.ps-sitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  color: var(--ps-fg-2);
  cursor: default;
}

.ps-sitem-name {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.ps-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: #C7C7D2;
}

.ps-dot-up,
.ps-dot-online { background: #1E9E57; box-shadow: 0 0 0 3px rgba(30, 158, 87, .18); }

.ps-dot-degraded,
.ps-dot-idle { background: #E0A400; box-shadow: 0 0 0 3px rgba(224, 164, 0, .18); }

.ps-dot-down,
.ps-dot-offline { background: #E30613; box-shadow: 0 0 0 3px rgba(227, 6, 19, .16); }

.ps-dot-none { background: #C7C7D2; }

.ps-dot-wait { background: #C7C7D2; animation: ps-pulse 1.1s ease-in-out infinite; }

@keyframes ps-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* Pushed to the bottom of the flex sidebar as one unit with the footer right after it —
   otherwise Status sits right under the nav links with a big blank gap before the
   separator line, instead of sitting flush against it. */
.ps-status-block {
  margin-top: auto;
  margin-bottom: 1.4rem;
}

.ps-navfoot {
  padding-top: 1.4rem;
  border-top: 1px solid var(--ps-border);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ps-fg-3);
}

/* First thing inside the footer block — the section already carries its own
   top padding, so the title's usual margin-top would double it up. */
.ps-navfoot > .ps-navtitle {
  margin-top: 0;
}

/* ── Phone ───────────────────────────────────────────────────────────────────
   The drawer, not a squeezed column: 260px of chrome on a 375px screen leaves no
   room for the page it is meant to navigate. */

.ps-mobile-bar,
.ps-backdrop,
.ps-side-mobile-head {
  display: none;
}

.ps-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ps-border);
  border-radius: 9px;
  background: var(--ps-surface);
  color: var(--ps-fg);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  .ps-shell {
    display: block;
  }

  .ps-main {
    margin-left: 0;
  }

  .ps-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--ps-border);
    background: var(--ps-surface);
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .ps-mobile-bar .ps-mobile-logo {
    height: 22px;
    width: auto;
  }

  .ps-side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 264px;
    max-width: 86vw;
    height: 100vh;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 0 18px 48px rgba(20, 17, 46, .22);
  }

  .ps-side.ps-open {
    transform: translateX(0);
  }

  .ps-side-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
  }

  .ps-side .ps-logo-desktop {
    display: none;
  }

  .ps-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 17, 46, .42);
  }

  .ps-backdrop[hidden] {
    display: none;
  }
}

/* The burger, drawn rather than typed — three rules beat an emoji that renders
   differently on every platform. */
.ps-burger,
.ps-burger::before,
.ps-burger::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.ps-burger::before { transform: translateY(-5px); }
.ps-burger::after { transform: translateY(3px); }

@media print {
  .ps-side,
  .ps-mobile-bar,
  .ps-backdrop { display: none !important; }

  .ps-shell { display: block; max-width: none; }
  .ps-main { margin-left: 0; }
}