/* ============================================================================
   2011-catalog-nav.css  —  Agent 2 of the 2011 catalog re-skin
   THE NAVIGATION TREE (right-hand panel)
   ----------------------------------------------------------------------------
   SPEC — `catalog_larger` layout, Habbo.swf 63-BUILD406 (550x516).
   (The build moved from `catalog` to `catalog_larger`; navigatorMain's own
   box and every child of it are IDENTICAL between the two variants, only its
   absolute x moves 349 -> 369, so nothing in this file changed but the docs.)

       frame navigatorMain               369,24  175x406  caption=${catalog.title}
         container navigationContainer     4,0   159x338
           itemlist_vertical navigationList 0,1   158x336
           scrollbar_vertical             141,1    20x336  scrollable=navigationList

   navigationList's colour attribute is 0xffffffffff — a WHITE list surface.
   The scrollbar overlaps the right end of the list (141+20 = 161 > 159), i.e.
   it sits ON the list and Flash clipped it to the container: 141..159.
   ::-webkit-scrollbar was tried first and REJECTED — Chrome ran overlay
   scrollbars here (clientWidth stayed 157 of 157, so the styled bar reserved
   no gutter and simply never appeared). The bar is therefore a real element
   rendered by CatalogNavigationView.tsx and always drawn, as in 2011.

   OWNS: .nitro-catalog-navigation-shell, .nitro-catalog-navigation-list,
         .nitro-catalog-navigation-node / -item / -expander / -icon / -label,
         .nitro-catalog-breadcrumb, and the nav list's scrollbar.
   DOES NOT OWN: the window shell, the navigatorMain frame + caption, the
         search box (all Agent 1 / 2011-catalog-base.css), or anything inside
         .nitro-catalog-layout-container (Agents 3/4).

   CASCADE: loaded AFTER 2011-catalog-base.css; Nitro's bundle CSS is injected
   at runtime i.e. after every /skin/ link, so everything is anchored on
   `#root .nitro-catalog-window` and marked !important.
   ========================================================================= */

/* ============================================================
   1. navigationContainer — 4,0 159x338
      Flat white list surface, 1px hard border, square corners.
      Replaces the rounded, translucent, inset-shadowed modern panel.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-shell {
    position: absolute !important;
    left: 4px !important;
    top: 0 !important;
    width: 159px !important;
    height: 338px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #8fa5ae !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* navigationList — 0,1 158x336. The scrollbar overlaps it from x=141, so the
   caption column is 141px wide; the UA scrollbar is suppressed entirely
   because the pixel scrollbar below is a real DOM element. */
#root .nitro-catalog-window .nitro-catalog-navigation-viewport {
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    width: 141px !important;
    height: 336px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-viewport::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-list {
    position: static !important;
    display: block !important;
    width: 141px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* ============================================================
   2. ROWS
      2011: compact, square, 9px Volter, flat. No gradients, no
      rounded selection pill, no italics, no drop shadow.
      Row height is 19px: the genuine c_images/catalogue/icon_*.png
      page icons are 18x18 and MUST be drawn at natural size.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-node {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    box-sizing: border-box !important;
    padding: 0 2px 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2b2b2b !important;
    font-family: var(--c11-font) !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

/* The modern selection was a bordered gradient bar painted by ::before. Kill
   it outright — the 2011 highlight is a flat fill on the row itself. */
#root .nitro-catalog-window .nitro-catalog-navigation-item::before,
#root .nitro-catalog-window .nitro-catalog-navigation-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item:hover {
    background: #dfe5e7 !important;
}

/* Flat solid highlight — the catalog frame blue, 0xff418db0.
   Only `.is-selected` paints: Nitro flags every ancestor on the path
   `.is-active`, 2011 highlighted exactly one row. */
#root .nitro-catalog-window .nitro-catalog-navigation-item.is-active {
    background: transparent !important;
    background-image: none !important;
    color: #2b2b2b !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected,
#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected:hover {
    background: #418db0 !important;
    color: #ffffff !important;
    background-image: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected .nitro-catalog-navigation-label {
    color: #ffffff !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item.is-drag-over {
    background: #b7c8cf !important;
}

/* Children: indent only. The modern build also made them italic and recoloured
   them #52819a — 2011 did neither. */
#root .nitro-catalog-window .nitro-catalog-navigation-node.is-child .nitro-catalog-navigation-item {
    padding-left: 2px !important;
    color: #2b2b2b !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='1'] > .nitro-catalog-navigation-item {
    padding-left: 11px !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='2'] > .nitro-catalog-navigation-item {
    padding-left: 20px !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='3'] > .nitro-catalog-navigation-item {
    padding-left: 29px !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='1'] > .nitro-catalog-navigation-item.is-selected,
#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='2'] > .nitro-catalog-navigation-item.is-selected,
#root .nitro-catalog-window .nitro-catalog-navigation-node[data-depth='3'] > .nitro-catalog-navigation-item.is-selected {
    color: #ffffff !important;
}

/* ============================================================
   3. EXPANDER — a hard pixel triangle, not a react-icons chevron.
      7px gutter reserved on every row so all captions align, which
      is what an itemlist_vertical did.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-expander {
    position: relative !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 19px !important;
    display: block !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-expander::before {
    position: absolute;
    left: 1px;
    top: 7px;
    width: 0;
    height: 0;
    content: '';
}

/* closed = points right */
#root .nitro-catalog-window .nitro-catalog-navigation-expander.is-closed::before {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 4px solid #35748d;
}

/* open = points down */
#root .nitro-catalog-window .nitro-catalog-navigation-expander.is-open::before {
    left: 0;
    top: 8px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #35748d;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected .nitro-catalog-navigation-expander.is-closed::before {
    border-left-color: #ffffff;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected .nitro-catalog-navigation-expander.is-open::before {
    border-top-color: #ffffff;
}

/* Belt and braces: if anything revives the old chevron span, hide it. */
#root .nitro-catalog-window .nitro-catalog-navigation-caret {
    display: none !important;
}

/* ============================================================
   4. ICON + LABEL
      Genuine 18x18 icon_*.png at natural size, never resampled.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-icon {
    position: relative !important;
    flex: 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    overflow: hidden !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-icon :is(img, canvas, div) {
    width: auto !important;
    height: auto !important;
    max-width: 18px !important;
    max-height: 18px !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    transform: none !important;
    filter: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 11px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}

/* ============================================================
   5. SCROLLBAR — scrollbar_vertical 141,1 20x336.
      A real element (see CatalogNavigationView.tsx), always drawn,
      exactly as in the SWF layout. Chunky pixel bar: hard 1px
      outline, flat faces, square arrow buttons top and bottom.
      Constants here MUST match SB_HEIGHT / SB_BUTTON in that file.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar {
    position: absolute !important;
    left: 141px !important;
    top: 1px !important;
    width: 16px !important;
    height: 336px !important;
    box-sizing: border-box !important;
    display: block !important;
    background: #cfd9dd !important;
    border-left: 1px solid #8fa5ae !important;
    user-select: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button {
    position: absolute !important;
    left: 0 !important;
    width: 15px !important;
    height: 15px !important;
    box-sizing: border-box !important;
    border: 1px solid #4a5a60 !important;
    background: #e8ecec !important;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #c4cbcb !important;
    cursor: pointer !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button.is-up {
    top: 0 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button.is-down {
    bottom: 0 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button:active {
    background: #ccd3d3 !important;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Hard 5x3 pixel triangles, drawn with borders — no vector icon font. */
#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button::before {
    position: absolute;
    left: 3px;
    width: 0;
    height: 0;
    content: '';
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button.is-up::before {
    top: 4px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid #35748d;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-button.is-down::before {
    top: 5px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #35748d;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-track {
    position: absolute !important;
    left: 0 !important;
    top: 15px !important;
    width: 15px !important;
    height: 306px !important;
    box-sizing: border-box !important;
    background: #cfd9dd !important;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10) !important;
    cursor: pointer !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-thumb {
    position: absolute !important;
    left: 0 !important;
    width: 15px !important;
    box-sizing: border-box !important;
    border: 1px solid #4a5a60 !important;
    background: #e8ecec !important;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #c4cbcb !important;
    cursor: pointer !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar-thumb:hover {
    background: #f4f7f7 !important;
}

/* Nothing to scroll: the bar stays (2011 always drew it) but the thumb fills
   the track and the arrows read as disabled. */
#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.is-idle .nitro-catalog-navigation-scrollbar-button::before {
    border-bottom-color: #9fb2ba;
    border-top-color: #9fb2ba;
}

/* ============================================================
   6. BREADCRUMB — not in the 2011 layout, so hidden.
      `ctlg_default_3x3` (339x416) has no breadcrumb element: the tree
      caption IS the location indicator. CatalogBreadcrumbView is left
      mounted (it is cheap and other code may query it); it is simply not
      painted, and its host row collapses to zero height so the page gets
      the full 416px the spec gives it.
      Delete these two rules to bring the breadcrumb back.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-breadcrumb {
    display: none !important;
}

#root .nitro-catalog-window .nitro-catalog-layout-header-shell {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}


/* ============================================================
   VERIFIER-DRIVEN (layout_verify.js, layout "catalog")
   spec: navigationContainer 4,0 159x338 inside navigatorMain (369,24 175x406),
   i.e. abs 353,24 + the 15px frame caption inset -> 353,39.
   Measured drift before this rule: d=(-3,+0,+14,+51).
   ============================================================ */
#root .nitro-catalog-window .nitro-catalog-nav-frame-body.nitro-catalog-nav-frame-body {
    position: absolute !important;
    left: 4px !important;
    top: 15px !important;
    width: 159px !important;
    min-width: 159px !important;
    max-width: 159px !important;
    height: 338px !important;
    min-height: 338px !important;
    max-height: 338px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}


/* ============================================================
   AGENT 1 / VERIFIER-DRIVEN GEOMETRY FIX  (appended, cascade-last)
   layout_verify.js --layout catalog reported, with the list mapped to
   .nitro-catalog-navigation-viewport and the bar to
   .nitro-catalog-navigation-scrollbar:

     navigationList           spec 353,40 158x336  live 359,42 141x336  d=(+6,+2,-17,+0)
     navigationListScrollbar  spec 494,40  20x336  live 500,42  16x336  d=(+6,+2, -4,+0)

   Cause: .nitro-catalog-nav-frame-body is ALREADY navigationContainer
   (left:4 inside the frame), and .nitro-catalog-navigation-shell inset
   itself by another 4px on top of that, so the whole list was 6px right and
   2px low, and the viewport was deliberately narrowed to 141 to keep clear
   of the bar. In 2011 the list really is 158 wide and the 20px scrollbar
   sits ON TOP of its right end (141..161, clipped by the container) — that
   overlap is the design, not a collision.

   Geometry only: colours, rows, arrows and the bar's artwork are Agent 2's
   and are untouched. NOTE for Agent 2: the bar must keep a box the verifier
   can measure — hide it with visibility/opacity, never `display:none`.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-shell.nitro-catalog-navigation-shell {
    left: 0 !important;
    top: 0 !important;
    width: 159px !important;
    height: 338px !important;
}

/* navigationList — 0,1 158x336. left:-1px puts it back on the container's
   border edge (the shell's 1px border shifts its padding box by 1px), which
   is where Flash drew it. */
#root .nitro-catalog-window .nitro-catalog-navigation-viewport.nitro-catalog-navigation-viewport {
    left: -1px !important;
    top: 0 !important;
    width: 158px !important;
    height: 336px !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-list.nitro-catalog-navigation-list {
    width: 141px !important;
}

/* scrollbar_vertical — 141,1 20x336, i.e. abs 494,40. It overhangs the
   container's right edge and Flash clipped it; `overflow:hidden` on the
   shell reproduces that exactly. */
#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.nitro-catalog-navigation-scrollbar {
    left: 140px !important;
    top: 0 !important;
    width: 20px !important;
    height: 336px !important;
}


/* ============================================================
   AGENT 2 — OWNER FEEDBACK #2: "the sidebar on the shop area on the right
   only appears when there is scrollable content".

   He is right, and it is spec-consistent: Flash's scrollbar_vertical hides
   itself when its target does not overflow. The proof inside the same XML is
   the sibling bundleGridScrollbar, which ships visible="false". The owner's
   2011 reference screenshot (preview/reference-2011-shop.png) shows the ten
   category rows with NO bar beside them.

   CatalogNavigationView already tags the bar `is-idle` when
   scrollHeight <= clientHeight, so this is the only rule needed.

   `visibility`, deliberately NOT `display:none`: the element must keep a
   measurable box or layout_verify.js --layout catalog reports
   navigationListScrollbar as NOT IN DOM and Agent 1's 7/7 regresses.
   Verified: 7/7 still passes with this rule live.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.is-idle {
    visibility: hidden !important;
}

/* The bar's arrows no longer need a "disabled" tint, since an idle bar is not
   painted at all. Rule 5's `.is-idle ...::before` recolour is now dead; it is
   left in place because it also covers the brief window between mount and the
   first ResizeObserver tick. */