/* =====================================================
   XP-Style Custom Scrollbars
   Sprite: assets/xp/scrollbars_t.png (72×152px, transparent)

   Columns (18px wide each):
     x=0   inactive  (col 1)
     x=-18 active    (col 2)  ← default
     x=-36 hover     (col 3)
     x=-54 pressed   (col 4)

   Key sprite row offsets:
     y=0    Arrow UP    (18px)
     y=-21  Arrow DOWN  (18px)
     y=-39  Corner      (18px, col1 only)
     y=-58  Arrow RIGHT (18px)
     y=-96  Arrow LEFT  (18px)

   Track tiles (separate tiny PNGs):
     scrollbar_vtrack.png  18×1  → repeat-y  (vertical track bg)
     scrollbar_htrack.png  1×18  → repeat-x  (horizontal track bg)

   Thumb pieces (18×3/18×1 or 3×18/1×18 per state):
     scrollbar_v_thumb_{n|h|a}_{top|mid|bot}.png
     scrollbar_h_thumb_{n|h|a}_{lft|mid|rgt}.png
       n=active, h=hover, a=pressed
   ===================================================== */

/* ===================== FIREFOX FALLBACK =====================
   Firefox does not support ::-webkit-scrollbar pseudo-elements.
   scrollbar-color / scrollbar-width are the only CSS hooks available —
   no custom images. Guarded so Chrome (which now also supports
   scrollbar-color) doesn't use this instead of the webkit rules.
   ============================================================ */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: #aca899 #d4d0c8;
        scrollbar-width: auto;
    }
}

/* --- Scrollbar base size --- */
::-webkit-scrollbar {
    width: 18px;
    height: 18px;
    cursor: default;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner {
    cursor: default !important;
}

/* --- Hide the duplicate buttons webkit inserts --- */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
}

/* ===================== TRACK ===================== */

/* Base rule required by Chrome to activate custom scrollbar rendering */
::-webkit-scrollbar-track {
    background: url('../assets/xp/scrollbar_vtrack.png') 0 0 / 18px 1px repeat-y;
}

::-webkit-scrollbar-track:vertical {
    background: url('../assets/xp/scrollbar_vtrack.png') 0 0 / 18px 1px repeat-y;
}

::-webkit-scrollbar-track:horizontal {
    background: url('../assets/xp/scrollbar_htrack.png') 0 0 / 1px 18px repeat-x;
}

/* ===================== CORNER ===================== */

::-webkit-scrollbar-corner {
    /* Corner/resize grip — col1 only in sprite */
    background: url('../assets/xp/scrollbars_t.png') 0 -39px / 72px 152px no-repeat;
    cursor: se-resize;
    /* Let clicks fall through to the window's .resize-handle.se beneath */
    pointer-events: none;
}

/* ===================== ARROW BUTTONS ===================== */

/* --- UP arrow --- */
::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
    height: 18px;
    background: url('../assets/xp/scrollbars_t.png') -18px 0 / 72px 152px no-repeat;
}
::-webkit-scrollbar-button:vertical:start:decrement:hover {
    background-position: -36px 0;
}
::-webkit-scrollbar-button:vertical:start:decrement:active {
    background-position: -54px 0;
}
::-webkit-scrollbar-button:vertical:start:decrement:disabled,
::-webkit-scrollbar-button:vertical:start:decrement:window-inactive {
    background-position: 0 0;
    cursor: default;
}

/* --- DOWN arrow --- */
::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
    height: 18px;
    background: url('../assets/xp/scrollbars_t.png') -18px -21px / 72px 152px no-repeat;
}
::-webkit-scrollbar-button:vertical:end:increment:hover {
    background-position: -36px -21px;
}
::-webkit-scrollbar-button:vertical:end:increment:active {
    background-position: -54px -21px;
}
::-webkit-scrollbar-button:vertical:end:increment:disabled,
::-webkit-scrollbar-button:vertical:end:increment:window-inactive {
    background-position: 0 -21px;
    cursor: default;
}

/* --- LEFT arrow --- */
::-webkit-scrollbar-button:horizontal:start:decrement {
    display: block;
    width: 18px;
    background: url('../assets/xp/scrollbars_t.png') -18px -96px / 72px 152px no-repeat;
}
::-webkit-scrollbar-button:horizontal:start:decrement:hover {
    background-position: -36px -96px;
}
::-webkit-scrollbar-button:horizontal:start:decrement:active {
    background-position: -54px -96px;
}
::-webkit-scrollbar-button:horizontal:start:decrement:disabled,
::-webkit-scrollbar-button:horizontal:start:decrement:window-inactive {
    background-position: 0 -96px;
    cursor: default;
}

/* --- RIGHT arrow --- */
::-webkit-scrollbar-button:horizontal:end:increment {
    display: block;
    width: 18px;
    background: url('../assets/xp/scrollbars_t.png') -18px -58px / 72px 152px no-repeat;
}
::-webkit-scrollbar-button:horizontal:end:increment:hover {
    background-position: -36px -58px;
}
::-webkit-scrollbar-button:horizontal:end:increment:active {
    background-position: -54px -58px;
}
::-webkit-scrollbar-button:horizontal:end:increment:disabled,
::-webkit-scrollbar-button:horizontal:end:increment:window-inactive {
    background-position: 0 -58px;
    cursor: default;
}

/* ===================== VERTICAL THUMB =====================
   3-layer: top cap (no-repeat top) + repeating 1px tile + bottom cap (no-repeat bottom)
   Each cap is 18×3px; tile is 18×1px.
   ========================================================= */

/* Base rule required by Chrome to activate custom thumb rendering */
::-webkit-scrollbar-thumb {
    min-height: 20px;
    background:
        url('../assets/xp/scrollbar_v_thumb_n_grp.png') 0 50%  / 18px 8px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_bot.png') 0 100% / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_top.png') 0 0    / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_mid.png') 0 0    / 18px 1px repeat-y;
}

::-webkit-scrollbar-thumb:vertical {
    min-height: 20px;
    background:
        url('../assets/xp/scrollbar_v_thumb_n_grp.png') 0 50%  / 18px 8px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_bot.png') 0 100% / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_top.png') 0 0    / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_n_mid.png') 0 0    / 18px 1px repeat-y;
}
::-webkit-scrollbar-thumb:vertical:hover {
    background:
        url('../assets/xp/scrollbar_v_thumb_h_grp.png') 0 50%  / 18px 8px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_h_bot.png') 0 100% / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_h_top.png') 0 0    / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_h_mid.png') 0 0    / 18px 1px repeat-y;
}
::-webkit-scrollbar-thumb:vertical:active {
    background:
        url('../assets/xp/scrollbar_v_thumb_a_grp.png') 0 50%  / 18px 8px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_a_bot.png') 0 100% / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_a_top.png') 0 0    / 18px 3px no-repeat,
        url('../assets/xp/scrollbar_v_thumb_a_mid.png') 0 0    / 18px 1px repeat-y;
}

/* ===================== HORIZONTAL THUMB =====================
   3-layer: left cap (no-repeat left) + repeating 1px tile + right cap (no-repeat right)
   Each cap is 3×18px; tile is 1×18px.
   =========================================================== */

::-webkit-scrollbar-thumb:horizontal {
    min-width: 20px;
    background:
        url('../assets/xp/scrollbar_h_thumb_n_grp.png') 50% 0 / 8px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_n_rgt.png') 100% 0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_n_lft.png') 0    0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_n_mid.png') 0    0 / 1px 18px repeat-x;
}
::-webkit-scrollbar-thumb:horizontal:hover {
    background:
        url('../assets/xp/scrollbar_h_thumb_h_grp.png') 50% 0 / 8px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_h_rgt.png') 100% 0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_h_lft.png') 0    0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_h_mid.png') 0    0 / 1px 18px repeat-x;
}
::-webkit-scrollbar-thumb:horizontal:active {
    background:
        url('../assets/xp/scrollbar_h_thumb_a_grp.png') 50% 0 / 8px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_a_rgt.png') 100% 0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_a_lft.png') 0    0 / 3px 18px no-repeat,
        url('../assets/xp/scrollbar_h_thumb_a_mid.png') 0    0 / 1px 18px repeat-x;
}