/* ORD-0159 — ONE collapse button, defined once, for every portal.
 *
 * HIS ORDER, 2026-09-13, with four pictures: "Check every portal and make the
 * collapse button look like the button in the Admin Portal, and make the
 * icons visible on the collapse panel on every portal."
 *
 * WHY A SHARED SHEET RATHER THAN THREE MATCHED COPIES. There were three:
 * mcs_admin_portal.css, mcs_v8.css and operator-portal.css each carried their
 * own .sb-hide block, and they had already drifted — the Administrator's and
 * the Operator's position the button unconditionally, and the Waypoint
 * Centre's does it only inside @media (min-width: 768px), so on a narrower
 * window its button falls into the ordinary flow of the column and its -13px
 * overhang is clipped by the scroller. Three copies of one button is three
 * places for the next difference to appear, and he has now reported the same
 * class of difference twice. This is the copy; the three are gone.
 *
 * It rides beside mcs_sidebar_collapse.js, which every portal already loads —
 * the engine and the face of the same control, in the same place.
 *
 * NO COLOURS OF ITS OWN. Every value is a Waypoint token with a literal
 * fallback for the one page whose sheet might not define it. A second palette
 * in a shared file is how a fleet stops matching.
 */

/* ── the face he sent a picture of (ORD-0138): a small round white button
      carrying a chevron pair, sitting ON the column's right edge ────────── */
.sb-hide {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(11, 31, 58, .16);
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 1px 5px rgba(8, 26, 48, .30);
}

.sb-hide:hover {
  background: #fff;
  color: var(--carolina, #1D86B5);
  border-color: rgba(29, 134, 181, .6);
  box-shadow: 0 2px 9px rgba(8, 26, 48, .36);
}

.sb-hide:focus-visible {
  outline: 2px solid var(--carolina, #1D86B5);
  outline-offset: 2px;
}

.sb-hide[aria-pressed="true"] { background: #fff; color: #0B1F3A; }

/* ── where it sits, and it is UNCONDITIONAL ─────────────────────────────
 *
 * Both selectors, because the shells name their column differently: the
 * Administrator family uses .sidebar and the Waypoint Centre uses #sidebar.
 * Naming both here is what makes one rule reach every portal.
 *
 * The column must allow the overhang. A column with overflow-y: auto computes
 * its other axis to auto as well, and then the half of the button that hangs
 * past the edge is clipped — which is exactly what his Image 3 shows. The
 * override is !important because each portal's own sheet sets overflow-y on
 * that column for its own scrolling, in more than one place, and this must not
 * depend on which of those happens to come last.
 *
 * THIS RULE NO LONGER TOUCHES `position`, AND THAT WAS A REAL FAULT OF MINE.
 * It used to say `position: relative`, to give the absolutely-positioned
 * button a containing block. Every one of these shells already gives its
 * column `position: fixed` in its own sheet, and a fixed element is ALREADY a
 * containing block for an absolute child — so the declaration bought the
 * button nothing and took the column out of `fixed`, which is what holds a
 * sidebar full-height against the window. Measured in a real browser at
 * 1440x900 with the declaration in place, on the Administrator, Agent,
 * Billing, Claims, Underwriting and Personnel portals alike:
 *
 *   the column stopped at its content (374-604px tall) instead of reaching
 *   the window bottom, leaving 296-526px of dead page under it; and the
 *   content pane, whose margin-left was written to clear an out-of-flow
 *   column, was pushed BELOW the column instead of beside it — main landed at
 *   y=425..655 rather than just under the topbar.
 *
 * The Waypoint Centre escaped it because its own sheet re-states `fixed` with
 * enough weight to win. The button does not move by a pixel without the
 * declaration; test_sidebar_collapse_position_ord0161.py measures that on
 * every shell, railed and open, rather than trusting this paragraph.
 */
.sidebar,
#sidebar {
  overflow: visible !important;
}

.sidebar > .sb-hide,
#sidebar > .sb-hide {
  position: absolute;
  right: -13px;
  z-index: 30;
  top: var(--sb-hide-top, 74px);
}

body.sidebar-hidden .sidebar > .sb-hide,
body.sidebar-hidden #sidebar > .sb-hide {
  right: -13px;
  top: var(--sb-hide-top-railed, 60px);
}

/* THE ONE NUMBER THAT IS ALLOWED TO DIFFER, and why it is a variable rather
 * than three hardcoded values. The button sits below the brand block, and the
 * brand blocks are genuinely different heights: the Administrator Portal's is
 * a logo card and one line, the Waypoint Centre's is a logo card and a longer
 * name. A single hardcoded top lands below the brand on one and across it on
 * the other. Each shell states its own offset and everything else is shared,
 * so a difference in where it sits can never become a difference in what it
 * looks like. */

/* ── an icon is never squeezed, railed or not ───────────────────────────
 *
 * ORD-0161, 2026-09-13. HIS WORDS: "no icons (waypoint center)", and then
 * "this needs to be fixed so it works on any browser."
 *
 * MEASURED IN A REAL BROWSER at 1440, 1100, 900, 800 and 600 pixels, both
 * shells, railed and open — because reading the sheets had already produced
 * one wrong answer. The COLLAPSED rail draws all eleven of its icons
 * correctly at every width. The OPEN sidebar does not:
 *
 *     Claims Inventory      9.8 x 16     Workers' Comp FNOL   11.0 x 16
 *     Guided FNOL Wizard   11.2 x 16     Virtual Call Center  13.0 x 16
 *     First Party FNOL     13.9 x 16     Third Party FNOL     13.3 x 16
 *
 * A .nav-item is a flex row and an <svg> is a flex item, so a long label
 * takes the width and the icon is crushed into what is left. Six of eleven
 * were drawn as smears, and the longer the label the worse the smear — which
 * is why the entries a person uses most were the worst of them.
 *
 * flex-shrink: 0 existed already, and ONLY inside the collapsed block, where
 * there is no label to compete with and it was never needed. The state that
 * needed it never had it. Unconditional now — both shells, both states, every
 * width. An icon has a size and nothing takes it away.
 */
.sidebar .nav-item > svg,
#sidebar .nav-item > svg {
  flex-shrink: 0;
  min-width: 16px;
}

/* ── the collapsed rail's icons ─────────────────────────────────────────
 *
 * HIS SECOND SENTENCE: "make the icons visible on the collapse panel on every
 * portal." The rail hides a row's LABEL by shrinking its type to nothing —
 * which is right, because the label is a bare text node with no element of
 * its own to hide. But an icon must not shrink with it. Two shells had no
 * icon at all to protect (the Waypoint Centre) or carried a text glyph that
 * IS type and vanished with the words (the Operator Portal); both now carry a
 * real <svg>, and this keeps every one of them at its full size whatever the
 * row's font-size says.
 */
body.sidebar-hidden .sidebar .nav-item > svg,
body.sidebar-hidden #sidebar .nav-item > svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  font-size: 16px;      /* an svg sized in em would collapse with the row */
  flex-shrink: 0;
  opacity: .85;
  display: block;
}

body.sidebar-hidden .sidebar .nav-item:hover > svg,
body.sidebar-hidden #sidebar .nav-item:hover > svg,
body.sidebar-hidden .sidebar .nav-item.active > svg,
body.sidebar-hidden #sidebar .nav-item.active > svg { opacity: 1; }

/* A row on the rail is the icon and nothing else, so it is centred and given
 * a target big enough to hit — 54px of column with a 16px glyph loose in it
 * is a control people miss. */
body.sidebar-hidden .sidebar .nav-item,
body.sidebar-hidden #sidebar .nav-item {
  justify-content: center;
  align-items: center;
  min-height: 34px;
}