/* =====================================================================
   FX Utilities — app shell: tabs as a sidebar
   =====================================================================

   Turns the horizontal tab strip into a vertical sidebar without touching
   any module's markup or its tab-switching code.

   ---------------------------------------------------------------------
   Why this file styles CLASSES THAT JAVASCRIPT ADDS
   ---------------------------------------------------------------------

   The first version of this made the app wrapper a CSS grid and mapped
   .topbar / .tabs / .content onto grid areas. That broke four modules,
   because it assumed the wrapper contained only those three things. None
   of them do: every module also has #toast and #loading-overlay as direct
   children, and PO System renders its whole SIGN-IN SCREEN into the
   wrapper too — which is how a login card ended up laid out inside the
   navy column.

   So nothing here is selected structurally. js/app-shell.js finds the
   wrapper, the nav and the content, satisfies itself that all three
   really exist, and tags exactly those three elements:

       .fx-sidebar        the wrapper
       .fx-sidebar-nav    the tab strip
       .fx-sidebar-main   the content area

   Everything below is scoped to those. An element the script did not tag
   cannot be affected by this file, whatever it is and wherever it sits.
   That is the whole point: a module can contain anything it likes.

   Every selector is written as `.fx-sidebar .fx-sidebar-nav ...` rather
   than `.fx-sidebar-nav ...` for a reason. Each module styles its own
   strip with a single class — `.tabs { background: #fff }` — and its
   stylesheet loads AFTER this one, so at equal specificity the module
   wins. A one-class rule here produced a white sidebar with white text on
   it in all twelve, which was invisible rather than merely wrong.

   ---------------------------------------------------------------------
   Why a sidebar at all
   ---------------------------------------------------------------------

   Inventory has 16 tabs. BT Job Console, Onboarding and Engineers Portal
   have 12, Fleet 11, Annual Leave 9 — all in one horizontal row, and
   eight of the thirteen already carried `overflow-x: auto`, so they had
   quietly begun scrolling sideways. On a laptop over half of Inventory's
   navigation sat off-screen with nothing to say it was there. A vertical
   list holds sixteen items without scrolling at all.

   Load after brand.css, before the module's own stylesheet. Reads
   --navy, --navy-dark, --blue-light, --border and --grey-light.
   ===================================================================== */

:root {
  --fx-sidebar-w: 236px;
  /* Measured from the real topbar by js/app-shell.js, because it differs
     between modules and a guessed number would leave a gap or a crop. */
  --fx-topbar-h: 56px;
}

/* ---------------- the sidebar ---------------- */

/* Taken out of flow entirely, so the wrapper's own layout — and every
   other child it has — is left exactly as the module wrote it. */
.fx-sidebar .fx-sidebar-nav {
  position: fixed;
  /* Two pixels early, deliberately. The measured height and the painted
     height can disagree by a pixel or two depending on when the
     ResizeObserver fired, and the two errors are not equal: starting late
     leaves a white sliver of page between the topbar and the sidebar,
     which is visible; starting early just covers the last two pixels of
     the topbar's bottom border along the sidebar's width, which is not. */
  top: calc(var(--fx-topbar-h) - 2px);
  left: 0;
  bottom: 0;
  z-index: 30;
  width: var(--fx-sidebar-w);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 12px 0;
  margin: 0;

  /* Navy, not white. A white sidebar measures 1.07:1 against the #f6f7f9
     content area — as a region it is effectively invisible, and a column
     of grey labels floating on it reads as clinical rather than as
     navigation. This is also the gradient the sign-in screens and the
     portal already use, and HR and Training have had a navy tab bar since
     long before this file. */
  background: linear-gradient(170deg, var(--navy) 0%, var(--navy-dark) 100%);
  border: none;

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Every direct child of the tagged nav is a tab item, whatever it is
   called — .tab-btn in most modules, a bare <button> in PO System. */
.fx-sidebar .fx-sidebar-nav > button,
.fx-sidebar .fx-sidebar-nav > .tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px 10px 17px;
  font-size: 0.95em;
  line-height: 1.35;
  /* 9.20:1 on the navy — legible, while sitting back far enough to leave
     the active item the emphasis. */
  color: var(--blue-light);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: normal;      /* long labels wrap rather than being clipped */
  transition: background-color 0.12s ease, color 0.12s ease;
}

.fx-sidebar .fx-sidebar-nav > button:hover,
.fx-sidebar .fx-sidebar-nav > .tab-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

/* The active item is WHITE, not the brand red the horizontal tabs used.
   Not a change of mind about "red leads" — a contrast result. Against
   this navy, --action measures 2.08:1 and even the brighter --fx-red only
   2.79:1, both under the 3:1 a graphic needs, so a red marker would be
   the least legible thing here. White is 11.62:1. Red carries on doing
   its job on the primary buttons in the content, where it sits on white
   and passes comfortably. */
.fx-sidebar .fx-sidebar-nav > button.active,
.fx-sidebar .fx-sidebar-nav > .tab-btn.active {
  color: #fff;
  border-left-color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

.fx-sidebar .fx-sidebar-nav > button:focus-visible,
.fx-sidebar .fx-sidebar-nav > .tab-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Tab buttons a module has hidden (an area this person cannot see) must
   stay hidden — display:block above would otherwise reveal them. */
.fx-sidebar .fx-sidebar-nav > [hidden] { display: none !important; }

/* ---------------- the topbar ---------------- */

/* Stays put while a long sheet scrolls under it, so the company name, the
   logo and Sign out are always there. Sticky rather than fixed on purpose:
   fixed would take the header out of the flow and leave a gap the height of
   the topbar at the top of every page, which each module would then have to
   pad around separately. Sticky keeps its space and costs nothing.

   Two classes deep, like everything else here: a module styles its own
   header with a single class and its stylesheet loads AFTER this one, so a
   one-class rule would lose. That is what once produced a white-on-white
   sidebar in all twelve. */
.fx-sidebar .fx-sidebar-topbar {
  position: sticky;
  top: 0;
  /* Above the sidebar (30), which begins just below this. */
  z-index: 35;
}

/* NOTE: no background is set here on purpose. A sticky header needs an
   opaque one or the page shows through it, but every module already sets its
   own - and a rule here would be two classes deep and would therefore BEAT
   the module colour it was meant to stand in for, repainting navy headers
   white. Checked instead: all twelve are opaque. */

/* ---------------- the content ---------------- */

/* The ONLY thing done to the page besides the nav: make room for it.
   Two classes deep on purpose. Every module styles its content with a
   single class and a shorthand — `.content { padding: 24px; max-width:
   1100px; margin: 0 auto; }` — and that stylesheet loads AFTER this one,
   so a one-class rule here loses and the content slides under the
   sidebar. Measured at mainX 163 against a 236px sidebar before this was
   fixed. */
.fx-sidebar > .fx-sidebar-main,
.fx-sidebar .fx-sidebar-main {
  margin-left: var(--fx-sidebar-w);
}

/* ---------------- the hamburger ---------------- */

.fx-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  margin-right: 4px;
  padding: 0;
  background: none;
  border: 1px solid var(--border, #e2e5ea);
  border-radius: 8px;
  color: var(--navy, #1f3864);
  cursor: pointer;
  flex: none;
}
.fx-nav-toggle:hover { background: var(--grey-light, #f3f4f6); }
.fx-nav-toggle:focus-visible { outline: 2px solid var(--navy, #1f3864); outline-offset: 1px; }
.fx-nav-toggle svg { display: block; width: 18px; height: 18px; }

.fx-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(20, 37, 68, 0.45);
  border: none;
  padding: 0;
}

/* ---------------- narrow screens ---------------- */

@media (max-width: 1100px) {
  :root { --fx-sidebar-w: 208px; }
}

/* Below this the sidebar would take too much of the width, so it becomes
   a drawer over the content rather than a column beside it. */
@media (max-width: 860px) {
  .fx-sidebar > .fx-sidebar-main,
  .fx-sidebar .fx-sidebar-main { margin-left: 0; }

  .fx-sidebar .fx-sidebar-nav {
    top: 0;
    width: min(80vw, 292px);
    padding-top: 16px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    z-index: 40;
  }

  .fx-sidebar.fx-nav-open .fx-sidebar-nav { transform: translateX(0); }
  .fx-sidebar.fx-nav-open .fx-nav-backdrop { display: block; }

  .fx-nav-toggle { display: inline-flex; }

  /* Bigger tap targets — these are used in a van. */
  .fx-sidebar .fx-sidebar-nav > button,
  .fx-sidebar .fx-sidebar-nav > .tab-btn { padding: 12px 18px; font-size: 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-sidebar .fx-sidebar-nav { transition: none; }
}

@media print {
  .fx-sidebar .fx-sidebar-nav, .fx-nav-toggle, .fx-nav-backdrop { display: none !important; }
  .fx-sidebar > .fx-sidebar-main,
  .fx-sidebar .fx-sidebar-main { margin-left: 0; }
}

/* ---------------- how wide the content gets ----------------
   Round 25. Every module set its own content width — 1100px in most, 1180 or
   1400 in a few — and every one of those numbers was chosen when these apps
   had horizontal tabs across the top and no sidebar. They are used on wide
   monitors now, and a third of the screen sat empty on every tab while tables
   scrolled sideways inside a column that was not using the room beside it.

   Set here rather than in thirteen stylesheets because it is the same decision
   thirteen times, and because this file is the only thing that knows the
   sidebar exists.

   TWO CLASSES DEEP, for the reason the nav rules above are: `main, .content`
   is what becomes .fx-sidebar-main, and a module's own `.content { max-width }`
   or `main { max-width }` would otherwise win from the stylesheet that loads
   after this one. A module that genuinely wants something different can still
   say so with the same two classes — Job Tracking's Whereabouts does exactly
   that, going wider for a grid that is seven days across. */
.fx-sidebar .fx-sidebar-main {
  max-width: 1700px;
}

/* Running text does NOT get wider with the container. A line of help text at
   1700px is harder to read than the same line at 1100 — widening only helps
   the things that are genuinely wide, which is tables. */
.fx-sidebar .fx-sidebar-main p.muted {
  max-width: 105ch;
}