/* ============================================================================
   2011-catalog-sidebar.css — AGENT 3
   Owner: the catalog SIDEBAR (scrollbars + navigation rows) and ctlg_frontpage3.

   Loaded LAST of the 14 skin sheets, so it wins ties against
   2011-catalog-nav.css / -grid.css / -pages.css without editing them.

   ----------------------------------------------------------------------------
   PROVENANCE OF THE SCROLLBAR ART — this is not invented, it is the 2011 art.

   The Habbo.swf 63-BUILD406 UI dump contains the window-manager skin
   descriptor `<skin name="default_scrollbar_skin">`
   (habbo_ui/Habbo/_-1O6.xml) and the bitmap it references,
   `habbo_bitmap_skin_png` = habbo_ui/Habbo/sprites/_-1i2.png (468x300).

   Every slice below is a literal Rectangle from that descriptor:

       button_up_default      192, 0  17x16      button_up_pressed   210, 0
       button_up_passive      228, 0             button_down_*       same, y=16
       lift_vertical top      312, 0  17x2       pressed  331, 0
       lift_vertical mid      312, 2  17x1       pressed  331, 2
       lift_vertical btm      312,22  17x2       pressed  331,22
       lift_vertical grd      317, 7   7x10      pressed  336, 7
       track_ver_default      312,25  17x1       pressed  331,25

   Cut with PIL to /skin/2011ui/sb_*.png, 1:1, no resampling. The declared
   scrollbar width is $width=17 and the arrow buttons are 17x16 — those are
   the numbers the CSS below uses.

   The one judgement call, stated openly: the descriptor gives the thumb grip
   `scale vertical="tiled"`, i.e. the 7x10 grip repeats down a tall thumb.
   It is centred once here instead of repeated, because a 200px thumb tiled
   with a 10px grip is a striped bar and no 2011 screenshot shows that.
   Everything else is exactly what the SWF declares.

   The bar is 17px of art inside the layout's 20px box for the navigation
   list (`scrollbar_vertical 141,1 20x336`): the skin's `scale horizontal`
   is "fixed", so Flash drew 17px at the box's left edge and left the rest
   empty. The item grid's box is 17 wide and matches the art exactly.
   ============================================================================ */

/* ============================================================
   1. SCROLLBARS — shared by the navigation tree and the item grid.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.nitro-catalog-navigation-scrollbar,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar.ctlg-itemgrid-scrollbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    image-rendering: pixelated !important;
}

/* ---- arrow buttons: 17x16, top and bottom ---------------------------- */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button {
    position: absolute !important;
    left: 0 !important;
    width: 17px !important;
    height: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    box-shadow: none !important;
    image-rendering: pixelated !important;
    cursor: pointer !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button.is-up,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-up {
    top: 0 !important;
    bottom: auto !important;
    background-image: url('/skin/2011ui/sb_up.png') !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button.is-down,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-down {
    top: auto !important;
    bottom: 0 !important;
    background-image: url('/skin/2011ui/sb_down.png') !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button.is-up:active,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-up:active {
    background-image: url('/skin/2011ui/sb_up_pressed.png') !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button.is-down:active,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-down:active {
    background-image: url('/skin/2011ui/sb_down_pressed.png') !important;
}

/* The 2011 "passive" arrows. An idle bar is not painted at all (section 2),
   so these only show in the frame between mount and the first sync. */
#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.is-idle .nitro-catalog-navigation-scrollbar-button.is-up,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar.is-idle .ctlg-scrollbar-button.is-up {
    background-image: url('/skin/2011ui/sb_up_disabled.png') !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar.is-idle .nitro-catalog-navigation-scrollbar-button.is-down,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar.is-idle .ctlg-scrollbar-button.is-down {
    background-image: url('/skin/2011ui/sb_down_disabled.png') !important;
}

/* Kill the hand-drawn triangles the older sheets painted with borders — the
   glyph is part of the bitmap now. */
#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-button::before,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button::before {
    content: none !important;
    display: none !important;
}

/* ---- track: the 17x1 row, repeated down ------------------------------ */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-track,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-track {
    position: absolute !important;
    left: 0 !important;
    top: 16px !important;
    bottom: 16px !important;
    height: auto !important;
    width: 17px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: url('/skin/2011ui/sb_track.png') left top repeat-y !important;
    image-rendering: pixelated !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

/* ---- thumb ("lift"): 2px cap, 1px stretched body, 2px cap, 7x10 grip -- */

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-thumb,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-thumb {
    position: absolute !important;
    left: 0 !important;
    width: 17px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    image-rendering: pixelated !important;
    cursor: pointer !important;
    background-color: transparent !important;
    background-image:
        url('/skin/2011ui/sb_lift_grip.png'),
        url('/skin/2011ui/sb_lift_top.png'),
        url('/skin/2011ui/sb_lift_btm.png'),
        url('/skin/2011ui/sb_lift_mid.png') !important;
    background-position: 5px center, left top, left bottom, left top !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-y !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-thumb:hover,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-thumb:hover {
    background-color: transparent !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-scrollbar .nitro-catalog-navigation-scrollbar-thumb:active,
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-thumb:active {
    background-image:
        url('/skin/2011ui/sb_lift_grip_p.png'),
        url('/skin/2011ui/sb_lift_top_p.png'),
        url('/skin/2011ui/sb_lift_btm_p.png'),
        url('/skin/2011ui/sb_lift_mid_p.png') !important;
}

/* ============================================================
   2. VISIBILITY — owner feedback #2: the bar only exists when the
      content actually overflows.

      Spec-consistent: the sibling `bundleGridScrollbar` ships
      visible="false" in ctlg_default_3x3, and the owner's 2011 reference
      shows ten category rows with no bar beside them.

      `visibility`, deliberately NOT `display:none` — the element must keep
      a measurable box or layout_verify.js reports navigationListScrollbar
      as NOT IN DOM and the catalog layout regresses from 7/7.
   ============================================================ */

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

/* ============================================================
   3. NAVIGATION ROWS.

      Row geometry is NOT constrained by the `catalog` layout box — the tree
      is data-driven, so the XML only fixes navigationList at 158x336. These
      numbers are measured off the owner's 2011 reference screenshot, which
      is pixel-exact 1:1 with our coordinate space: template-matching
      notepad_bg.png (now 380x516) against it lands at image (16,4) with ZERO
      pixel error, so one image pixel is one layout pixel.

      Measured there (column scan at x=520, separators at y=57,78,99,...):
        row pitch          21px  (20px of row + a 1px separator)
        separator          pure black, full row width
        expander triangle  solid black, right-pointing, RIGHT-aligned
        icon               left, then the label
      Our build had a 19px pitch, a pale grey triangle on the LEFT, and no
      separators at all.

      CatalogNavigationView.ROW_STEP is kept at 21 to match.
   ============================================================ */

#root .nitro-catalog-window .nitro-catalog-navigation-item.nitro-catalog-navigation-item {
    display: flex !important;
    align-items: center !important;
    height: 21px !important;
    min-height: 21px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: none !important;
}

/* NOT a fixed height on the node: a node also HOSTS its expanded subtree, so
   pinning it to one row height made open branches draw on top of the rows
   below and stopped the list ever overflowing (so the bar never appeared).
   Only the row itself is 21px; the node is whatever its children need. */
#root .nitro-catalog-window .nitro-catalog-navigation-node.nitro-catalog-navigation-node {
    height: auto !important;
    min-height: 21px !important;
}

/* icon first, label second, expander pushed to the right edge */
#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-icon {
    order: 1 !important;
    flex: none !important;
    margin: 0 2px 0 1px !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-label {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander {
    order: 3 !important;
    flex: none !important;
    position: relative !important;
    width: 12px !important;
    height: 20px !important;
    margin: 0 6px 0 0 !important;
    background: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* solid black 5x9 triangle, drawn with borders so it stays hard-edged */
#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander::before,
#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 6px !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-left: 5px solid #000000 !important;
    background: none !important;
    transform: none !important;
}

#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander::after {
    display: none !important;
}

/* leaves have no triangle, but keep the column so the labels line up */
#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander.is-none::before {
    display: none !important;
}

/* an open branch points down */
#root .nitro-catalog-window .nitro-catalog-navigation-item .nitro-catalog-navigation-expander.is-open::before {
    left: 3px !important;
    top: 7px !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #000000 !important;
    border-bottom: 0 !important;
}

/* the selection is a flat fill — no gradient, no radius, no shadow */
#root .nitro-catalog-window .nitro-catalog-navigation-item.is-selected.is-selected {
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ============================================================
   4. ctlg_frontpage3 (339x415) — every box is a literal from
      HabboCatalogCom_ctlg_frontpage3.xml, verified by
      layout_verify.js --layout ctlg_frontpage3 --map maps/ctlg_frontpage3.json

        bgBorder             8,365  325x50   0x6699cc
        bgBorder             8,222  325x136  0xcccccc
        ctlg_header_img      0,8    339x37
        ctlg_special_img    20,60   300x154
        ctlg_txt1           44,116  213x14   Volter Bold
        ctlg_txt2           44,130  165x30
        ctlg_txt3           44,164  173x21   Volter Bold
        ctlg_txt4           26,232  280x14   Volter Bold
        ctlg_txt5           26,246  280x83
        ctlg_txt7           26,330  280x20
        ctlg_txt6           25,370  272x20
        redeemItemCodeWidget 24,362 292x50
          (border)           0,25   216x20      -> .ctlg-fp-voucher-well
          redeem           234,25    56x21
          voucher_code      10,30   196x10
        front_page_border   15,55   313x164
        frontpage_promotion 261,204  64x64
   ============================================================ */

#root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 {
    position: absolute !important;
    /* catalog_larger: layoutContainer is 359x451 but ctlg_frontpage3 is still
       339x415 (Habbo.swf ships no ctlg_frontpage3_larger), so 2011 centres it:
       (359-339)/2 = 10, (451-415)/2 = 18. Measured against
       _remaster/preview/reference-2011-shop.png -- see maps/ctlg_frontpage3.json.
       This rule outranks the :is() recipe in 2011-catalog-pages.css (doubled
       class + later file), so both carry the same numbers. */
    left: 10px !important;
    top: 18px !important;
    width: 339px !important;
    height: 415px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

#root .nitro-catalog-window .ctlg-frontpage3 > * {
    position: absolute !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

#root .nitro-catalog-window .ctlg-frontpage3 * {
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    image-rendering: pixelated !important;
}

/* --- bgBorder 8,365 325x50, 0x6699cc (the blue redeem strip) ---------- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-strip.ctlg-fp-strip {
    left: 8px !important;
    top: 365px !important;
    width: 325px !important;
    height: 50px !important;
    border: 1px solid #4d7ba3 !important;
    background: #6699cc !important;
}

/* --- bgBorder 8,222 325x136, 0xcccccc (the grey info panel) ----------- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-panel.ctlg-fp-panel {
    left: 8px !important;
    top: 222px !important;
    width: 325px !important;
    height: 136px !important;
    border: 1px solid #b3b3b3 !important;
    background: #cccccc !important;
    overflow: hidden !important;
}

/* --- ctlg_header_img 0,8 339x37 -------------------------------------- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-header-img.ctlg-fp-header-img {
    left: 0 !important;
    top: 8px !important;
    width: 339px !important;
    height: 37px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    overflow: hidden !important;
}

/* --- front_page_border 15,55 313x164 --------------------------------- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-border.ctlg-fp-border {
    left: 15px !important;
    top: 55px !important;
    width: 313px !important;
    height: 164px !important;
    border: 1px solid var(--c11-panel-lo) !important;
    background: var(--c11-panel-hi) !important;
    overflow: hidden !important;
}

/* --- ctlg_special_img 20,60 300x154, i.e. 4,4 inside the frame's
       padding box (the frame's own 1px border accounts for the 5th px) -- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-border .ctlg-fp-hero.ctlg-fp-hero {
    position: absolute !important;
    left: 4px !important;
    top: 4px !important;
    width: 300px !important;
    height: 154px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* --- the seven text boxes -------------------------------------------- */
#root .nitro-catalog-window .ctlg-frontpage3 :is(
    .ctlg-fp-txt1, .ctlg-fp-txt2, .ctlg-fp-txt3,
    .ctlg-fp-txt4, .ctlg-fp-txt5, .ctlg-fp-txt6, .ctlg-fp-txt7) {
    font-size: 9px !important;
    line-height: 11px !important;
    color: var(--c11-fg) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* Flash text fields here are selectable="false" display text; keeping them
       transparent to the mouse stops the empty ones swallowing clicks meant
       for the widgets underneath. */
    pointer-events: none !important;
}

#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt1.ctlg-fp-txt1 {
    left: 44px !important; top: 116px !important; width: 213px !important; height: 14px !important;
    font-weight: 700 !important;
}
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt2.ctlg-fp-txt2 {
    left: 44px !important; top: 130px !important; width: 165px !important; height: 30px !important;
}
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt3.ctlg-fp-txt3 {
    left: 44px !important; top: 164px !important; width: 173px !important; height: 21px !important;
    font-weight: 700 !important;
}
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt4.ctlg-fp-txt4 {
    left: 26px !important; top: 232px !important; width: 280px !important; height: 14px !important;
    font-weight: 700 !important;
}
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt5.ctlg-fp-txt5 {
    left: 26px !important; top: 246px !important; width: 280px !important; height: 83px !important;
}
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-txt7.ctlg-fp-txt7 {
    left: 26px !important; top: 330px !important; width: 280px !important; height: 20px !important;
}

/* txt4/txt5/txt7 sit ON the 0xcccccc panel. The XML paints txt4/txt5
   0xffff00, which is unreadable on that grey; the reference screenshot
   shows them black, so --c11-fg is used (inherited from the rule above). */

/* --- frontpage_promotion 261,204 64x64 ------------------------------- */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-promotion.ctlg-fp-promotion {
    left: 261px !important;
    top: 204px !important;
    width: 64px !important;
    height: 64px !important;
    border: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* --- redeemItemCodeWidget 24,362 292x50 ------------------------------ */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem {
    left: 24px !important;
    top: 362px !important;
    width: 292px !important;
    height: 50px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ctlg_txt6 25,370 272x20 -> 1,8 inside the widget */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem .ctlg-fp-txt6.ctlg-fp-txt6 {
    position: absolute !important;
    left: 1px !important;
    top: 8px !important;
    width: 272px !important;
    height: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* the unnamed field well, 0,25 216x20 inside the widget */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-voucher-well.ctlg-fp-voucher-well {
    position: absolute !important;
    left: 0 !important;
    top: 25px !important;
    width: 216px !important;
    height: 20px !important;
    border: 1px solid #3d3d3d !important;
    background: #ffffff !important;
    padding: 0 !important;
}

/* voucher_code 34,392 196x10 -> 10,5 inside the widget, i.e. 9,4 inside
   the well's padding box (its 1px border supplies the missing pixel). */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-voucher.ctlg-fp-voucher {
    position: absolute !important;
    left: 9px !important;
    top: 4px !important;
    width: 196px !important;
    height: 10px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 9px !important;
    line-height: 10px !important;
    color: #000000 !important;
}

/* button redeem 234,25 56x21 inside the widget */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-btn.ctlg-fp-redeem-btn {
    position: absolute !important;
    left: 234px !important;
    top: 25px !important;
    width: 56px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #3d3d3d !important;
    background: #dfdfdf !important;
    color: #000000 !important;
    font-family: inherit !important;
    font-size: 9px !important;
    line-height: 9px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-redeem-btn.ctlg-fp-redeem-btn:active {
    background: #c6c6c6 !important;
}

/* the featured-page links Polaris sends (a 2012+ concept R63B never had)
   are kept, laid out inside the ctlg_txt5 band so they cannot collide with
   the spec boxes. */
#root .nitro-catalog-window .ctlg-frontpage3 .ctlg-fp-links.ctlg-fp-links {
    position: absolute !important;
    left: 26px !important;
    top: 246px !important;
    width: 280px !important;
    height: 83px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
}