/* =====================================================================
   sk-scrollbar.css — Skyline ERP scrollbar standard ("Signature Line")
   SINGLE SOURCE OF TRUTH for every scrollbar in the product.
   Spec: docs/superpowers/specs/2026-07-30-scrollbar-redesign-design.md

   Load order: LAST — appended at the end of layouts/partials/css.blade.php
   AND re-linked after the late sk-sidebar.css copy in app.blade.php, so
   nothing out-cascades it. MES links it directly.

   MES links this sheet without ?v= (matching its neighbors) — future
   edits need a manual cache-bust consideration for MES clients.

   Engine rule: scrollbar-color/scrollbar-width must NEVER reach Chromium
   (they disable the whole ::-webkit-scrollbar suite there). Firefox rules
   live only inside @supports not selector(::-webkit-scrollbar).

   No transitions on scrollbar pseudos (Chromium won't animate them).
   All glows are INSET (outer box-shadow on scrollbar parts is clipped).
   Gold is the fixed half of the header signature — never theme-tinted.
   ===================================================================== */

/* ---- 1. Tokens (html/body + .main-sidebar — NEVER bare :root:
        tailwindcss.css's later :root blocks would clobber it) ---------- */
html,
body,
.main-sidebar {
  /* brand stops — theme-derived except the gold constants */
  --sbc-ink:         var(--sk-sidebar-bg, #011530);
  --sbc-navy:        #1d2a47;                       /* static chrome, not theme-tinted */
  --sbc-teal:        color-mix(in srgb, var(--sk-primary, #14b8a6) 80%, var(--sk-sidebar-bg, #011530));
  --sbc-teal-mid:    color-mix(in srgb, var(--sk-primary, #14b8a6) 68%, var(--sk-sidebar-bg, #011530));
  --sbc-teal-bright: var(--sk-primary, #14b8a6);
  --sbc-teal-lumen:  color-mix(in srgb, var(--sk-primary, #14b8a6) 78%, #ffffff);
  --sbc-teal-soft:   color-mix(in srgb, var(--sk-primary, #14b8a6) 55%, #ffffff);
  --sbc-gold:        #f59e0b;
  --sbc-gold-deep:   #d97706;
  --sbc-gold-ember:  #b45309;   /* light-surface hover tip + drag top (>=4.2:1) */
  --sbc-gold-shadow: #92400e;   /* light-surface drag base */
  --sbc-glow:        color-mix(in srgb, var(--sk-primary, #14b8a6) 45%, transparent);
  --sbc-glow-gold:    rgba(180, 83, 9, 0.5);
  --sbc-glow-gold-dk: rgba(245, 158, 11, 0.55);

  /* tracks: quiet alpha washes over the surface */
  --sbc-track-light:       color-mix(in srgb, var(--sk-sidebar-bg, #011530)  6%, transparent);
  --sbc-track-light-hover: color-mix(in srgb, var(--sk-sidebar-bg, #011530) 10%, transparent);
  --sbc-track-dark:        rgba(255, 255, 255, 0.06);
  --sbc-track-dark-hover:  rgba(255, 255, 255, 0.10);
  --sbc-hairline-light:    color-mix(in srgb, var(--sk-sidebar-bg, #011530)  8%, transparent);
  --sbc-hairline-dark:     rgba(255, 255, 255, 0.08);

  /* Firefox solid equivalents */
  --sbc-ff-thumb-light: color-mix(in srgb, var(--sk-primary, #14b8a6) 70%, var(--sk-sidebar-bg, #011530));
  --sbc-ff-thumb-dark:  var(--sk-primary, #14b8a6);

  /* geometry */
  --sbc-size:             12px;   /* default: main .wrapper etc.           */
  --sbc-size-thin:        8px;    /* tables, modals, dropdowns, sidebar    */
  --sbc-size-micro:       4px;    /* pre-existing micro tab strips only    */
  --sbc-inset:            3px;    /* rest: 6px visible pill on 12px bar    */
  --sbc-inset-hover:      2px;    /* hover: pill grows to 8px              */
  --sbc-inset-thin:       2px;
  --sbc-inset-thin-hover: 1px;
  --sbc-radius:           999px;
  --sbc-min-thumb:        44px;
}

/* =====================================================================
   2. ENGINE 1 — Chromium + Safari (::-webkit-scrollbar suite)
   ===================================================================== */
@supports selector(::-webkit-scrollbar) {

  /* ---- 2a. GLOBAL DEFAULT (light, 12px) — bare pseudos on purpose:
          the sk-widgets modal shim measures an UNCLASSED probe div and
          pads body by the result; only global styling keeps that probe
          truthful (vendor.js:308-345). ------------------------------- */
  ::-webkit-scrollbar {
    width:  var(--sbc-size, 12px);
    height: var(--sbc-size, 12px);
  }
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar-track {
    background: var(--sbc-track-light, rgba(1, 21, 48, 0.06));
    border-radius: var(--sbc-radius, 999px);
    box-shadow: inset 0 0 0 1px var(--sbc-hairline-light, rgba(1, 21, 48, 0.08));
  }
  ::-webkit-scrollbar-track:hover {
    background: var(--sbc-track-light-hover, rgba(1, 21, 48, 0.10));
  }
  ::-webkit-scrollbar-thumb {
    border: var(--sbc-inset, 3px) solid transparent;
    background-clip: padding-box;
    border-radius: var(--sbc-radius, 999px);
    background-color: var(--sbc-teal-mid, #0f766e);   /* paint safety under gradient */
    background-image: linear-gradient(180deg,
      var(--sbc-navy, #1d2a47)     0%,
      var(--sbc-teal-mid, #0f766e) 40%,
      var(--sbc-teal, #0d9488)     100%);
  }
  ::-webkit-scrollbar-thumb:vertical   { min-height: var(--sbc-min-thumb, 44px); }
  ::-webkit-scrollbar-thumb:horizontal {
    min-width: var(--sbc-min-thumb, 44px);
    /* palindromic — symmetric under RTL / left-docked bars */
    background-image: linear-gradient(90deg,
      var(--sbc-navy, #1d2a47) 0%,
      var(--sbc-teal, #0d9488) 50%,
      var(--sbc-navy, #1d2a47) 100%);
  }
  ::-webkit-scrollbar-thumb:hover {
    border-width: var(--sbc-inset-hover, 2px);
    background-color: var(--sbc-teal-bright, #14b8a6);
    background-image: linear-gradient(180deg,
      var(--sbc-navy, #1d2a47)        0%,
      var(--sbc-teal-bright, #14b8a6) 72%,
      var(--sbc-gold-ember, #b45309)  100%);
    box-shadow: inset 0 0 6px 1px var(--sbc-glow, rgba(20, 184, 166, 0.45));
  }
  ::-webkit-scrollbar-thumb:horizontal:hover {
    background-image: linear-gradient(90deg,
      var(--sbc-navy, #1d2a47)        0%,
      var(--sbc-teal-bright, #14b8a6) 50%,
      var(--sbc-navy, #1d2a47)        100%);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--sbc-gold-ember, #b45309);
    background-image: linear-gradient(180deg,
      var(--sbc-gold-ember, #b45309)  0%,
      var(--sbc-gold-shadow, #92400e) 100%);
    box-shadow: inset 0 0 8px 1px var(--sbc-glow-gold, rgba(180, 83, 9, 0.5));
  }
  ::-webkit-scrollbar-thumb:horizontal:active {
    background-image: linear-gradient(90deg,
      var(--sbc-gold-shadow, #92400e) 0%,
      var(--sbc-gold-ember, #b45309)  50%,
      var(--sbc-gold-shadow, #92400e) 100%);
  }
  ::-webkit-scrollbar-corner {
    background: var(--sbc-track-light, rgba(1, 21, 48, 0.06));
  }

  /* ---- 2b. THIN variant (8px light) — high-frequency in-content
          scrollers. .sk-scroll-thin is the opt-in utility.
          .dataTables_scrollBody deliberately NOT thin: DataTables'
          header-compensation probe measures the GLOBAL width; a thinner
          body bar mis-aligns headers by the difference (verified on
          /products). .dt-top-scroll is a decorative synced proxy strip
          the probe does NOT measure, so it stays in this thin tier.
          Swept legacy containers (final review E1) restored here to the
          spec's 8px in-content tier: .spos-cart, .tree-content,
          .terms-container, .wizard-tabs-desktop, .asset-column-controls,
          .pm-body, .pm-table-container, .pf-tabs, .maintenance-type-list,
          .high-assets-list, .rpos-categories, .rpos-products,
          .rpos-cart__items. (.high-assets-list was swept from the same
          combined rule as .maintenance-type-list but missed in the first
          restoration pass — added here.) ------------------------------ */
  .table-responsive::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar,
  .select2-results__options::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  .sgs-results::-webkit-scrollbar,
  .dropdown-menu::-webkit-scrollbar,
  ul#notifications_list::-webkit-scrollbar,
  .ui-autocomplete::-webkit-scrollbar,
  .pos_product_div::-webkit-scrollbar,
  .dt-top-scroll::-webkit-scrollbar,
  .spos-cart::-webkit-scrollbar,
  .tree-content::-webkit-scrollbar,
  .terms-container::-webkit-scrollbar,
  .wizard-tabs-desktop::-webkit-scrollbar,
  .asset-column-controls::-webkit-scrollbar,
  .pm-body::-webkit-scrollbar,
  .pm-table-container::-webkit-scrollbar,
  .pf-tabs::-webkit-scrollbar,
  .maintenance-type-list::-webkit-scrollbar,
  .high-assets-list::-webkit-scrollbar,
  .rpos-categories::-webkit-scrollbar,
  .rpos-products::-webkit-scrollbar,
  .rpos-cart__items::-webkit-scrollbar,
  .sk-scroll-thin::-webkit-scrollbar {
    width:  var(--sbc-size-thin, 8px);
    height: var(--sbc-size-thin, 8px);
  }
  .table-responsive::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb,
  .select2-results__options::-webkit-scrollbar-thumb,
  textarea::-webkit-scrollbar-thumb,
  .sgs-results::-webkit-scrollbar-thumb,
  .dropdown-menu::-webkit-scrollbar-thumb,
  ul#notifications_list::-webkit-scrollbar-thumb,
  .ui-autocomplete::-webkit-scrollbar-thumb,
  .pos_product_div::-webkit-scrollbar-thumb,
  .dt-top-scroll::-webkit-scrollbar-thumb,
  .spos-cart::-webkit-scrollbar-thumb,
  .tree-content::-webkit-scrollbar-thumb,
  .terms-container::-webkit-scrollbar-thumb,
  .wizard-tabs-desktop::-webkit-scrollbar-thumb,
  .asset-column-controls::-webkit-scrollbar-thumb,
  .pm-body::-webkit-scrollbar-thumb,
  .pm-table-container::-webkit-scrollbar-thumb,
  .pf-tabs::-webkit-scrollbar-thumb,
  .maintenance-type-list::-webkit-scrollbar-thumb,
  .high-assets-list::-webkit-scrollbar-thumb,
  .rpos-categories::-webkit-scrollbar-thumb,
  .rpos-products::-webkit-scrollbar-thumb,
  .rpos-cart__items::-webkit-scrollbar-thumb,
  .sk-scroll-thin::-webkit-scrollbar-thumb {
    border-width: var(--sbc-inset-thin, 2px);
  }
  .table-responsive::-webkit-scrollbar-thumb:hover,
  .modal-body::-webkit-scrollbar-thumb:hover,
  .select2-results__options::-webkit-scrollbar-thumb:hover,
  textarea::-webkit-scrollbar-thumb:hover,
  .sgs-results::-webkit-scrollbar-thumb:hover,
  .dropdown-menu::-webkit-scrollbar-thumb:hover,
  ul#notifications_list::-webkit-scrollbar-thumb:hover,
  .ui-autocomplete::-webkit-scrollbar-thumb:hover,
  .pos_product_div::-webkit-scrollbar-thumb:hover,
  .dt-top-scroll::-webkit-scrollbar-thumb:hover,
  .spos-cart::-webkit-scrollbar-thumb:hover,
  .tree-content::-webkit-scrollbar-thumb:hover,
  .terms-container::-webkit-scrollbar-thumb:hover,
  .wizard-tabs-desktop::-webkit-scrollbar-thumb:hover,
  .asset-column-controls::-webkit-scrollbar-thumb:hover,
  .pm-body::-webkit-scrollbar-thumb:hover,
  .pm-table-container::-webkit-scrollbar-thumb:hover,
  .pf-tabs::-webkit-scrollbar-thumb:hover,
  .maintenance-type-list::-webkit-scrollbar-thumb:hover,
  .high-assets-list::-webkit-scrollbar-thumb:hover,
  .rpos-categories::-webkit-scrollbar-thumb:hover,
  .rpos-products::-webkit-scrollbar-thumb:hover,
  .rpos-cart__items::-webkit-scrollbar-thumb:hover,
  .sk-scroll-thin::-webkit-scrollbar-thumb:hover {
    border-width: var(--sbc-inset-thin-hover, 1px);
  }

  /* ---- 2c. DARK colorway — navy surfaces. .sk-scroll-dark = opt-in.
          Colors only; sizes come from 2a/2b/2d. --------------------- */
  .sk-sidebar-scroll::-webkit-scrollbar-track,
  .mobile-drawer::-webkit-scrollbar-track,
  #product_popup_list_body::-webkit-scrollbar-track,
  .spos-right::-webkit-scrollbar-track,
  .sk-scroll-dark::-webkit-scrollbar-track {
    background: var(--sbc-track-dark, rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 0 0 1px var(--sbc-hairline-dark, rgba(255, 255, 255, 0.08));
  }
  .sk-sidebar-scroll::-webkit-scrollbar-track:hover,
  .mobile-drawer::-webkit-scrollbar-track:hover,
  #product_popup_list_body::-webkit-scrollbar-track:hover,
  .spos-right::-webkit-scrollbar-track:hover,
  .sk-scroll-dark::-webkit-scrollbar-track:hover {
    background: var(--sbc-track-dark-hover, rgba(255, 255, 255, 0.10));
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb,
  .mobile-drawer::-webkit-scrollbar-thumb,
  #product_popup_list_body::-webkit-scrollbar-thumb,
  .spos-right::-webkit-scrollbar-thumb,
  .sk-scroll-dark::-webkit-scrollbar-thumb {
    background-color: var(--sbc-teal-bright, #14b8a6);
    background-image: linear-gradient(180deg,
      var(--sbc-teal-lumen, #2dd4bf)  0%,
      var(--sbc-teal-bright, #14b8a6) 55%,
      var(--sbc-teal, #0d9488)        100%);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:horizontal,
  .mobile-drawer::-webkit-scrollbar-thumb:horizontal,
  #product_popup_list_body::-webkit-scrollbar-thumb:horizontal,
  .spos-right::-webkit-scrollbar-thumb:horizontal,
  .sk-scroll-dark::-webkit-scrollbar-thumb:horizontal {
    background-image: linear-gradient(90deg,
      var(--sbc-teal, #0d9488)       0%,
      var(--sbc-teal-lumen, #2dd4bf) 50%,
      var(--sbc-teal, #0d9488)       100%);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:hover,
  .mobile-drawer::-webkit-scrollbar-thumb:hover,
  #product_popup_list_body::-webkit-scrollbar-thumb:hover,
  .spos-right::-webkit-scrollbar-thumb:hover,
  .sk-scroll-dark::-webkit-scrollbar-thumb:hover {
    background-color: var(--sbc-teal-lumen, #2dd4bf);
    background-image: linear-gradient(180deg,
      var(--sbc-teal-soft, #5eead4)   0%,
      var(--sbc-teal-bright, #14b8a6) 72%,
      var(--sbc-gold, #f59e0b)        100%);
    box-shadow: inset 0 0 8px 1px var(--sbc-glow, rgba(20, 184, 166, 0.45));
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:horizontal:hover,
  .mobile-drawer::-webkit-scrollbar-thumb:horizontal:hover,
  #product_popup_list_body::-webkit-scrollbar-thumb:horizontal:hover,
  .spos-right::-webkit-scrollbar-thumb:horizontal:hover,
  .sk-scroll-dark::-webkit-scrollbar-thumb:horizontal:hover {
    background-image: linear-gradient(90deg,
      var(--sbc-teal-bright, #14b8a6) 0%,
      var(--sbc-teal-soft, #5eead4)   50%,
      var(--sbc-teal-bright, #14b8a6) 100%);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:active,
  .mobile-drawer::-webkit-scrollbar-thumb:active,
  #product_popup_list_body::-webkit-scrollbar-thumb:active,
  .spos-right::-webkit-scrollbar-thumb:active,
  .sk-scroll-dark::-webkit-scrollbar-thumb:active {
    background-color: var(--sbc-gold, #f59e0b);
    background-image: linear-gradient(180deg,
      var(--sbc-gold, #f59e0b)      0%,
      var(--sbc-gold-deep, #d97706) 100%);
    box-shadow: inset 0 0 10px 1px var(--sbc-glow-gold-dk, rgba(245, 158, 11, 0.55));
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:horizontal:active,
  .mobile-drawer::-webkit-scrollbar-thumb:horizontal:active,
  #product_popup_list_body::-webkit-scrollbar-thumb:horizontal:active,
  .spos-right::-webkit-scrollbar-thumb:horizontal:active,
  .sk-scroll-dark::-webkit-scrollbar-thumb:horizontal:active {
    background-image: linear-gradient(90deg,
      var(--sbc-gold-deep, #d97706) 0%,
      var(--sbc-gold, #f59e0b)      50%,
      var(--sbc-gold-deep, #d97706) 100%);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-corner,
  .mobile-drawer::-webkit-scrollbar-corner,
  #product_popup_list_body::-webkit-scrollbar-corner,
  .spos-right::-webkit-scrollbar-corner,
  .sk-scroll-dark::-webkit-scrollbar-corner {
    background: var(--sbc-track-dark, rgba(255, 255, 255, 0.06));
  }

  /* ---- 2d. DARK surfaces are all thin today (sidebar rail 260px,
          drawer 320px, POS boards) — pin thin geometry. ------------- */
  .sk-sidebar-scroll::-webkit-scrollbar,
  .mobile-drawer::-webkit-scrollbar,
  #product_popup_list_body::-webkit-scrollbar,
  .spos-right::-webkit-scrollbar {
    width:  var(--sbc-size-thin, 8px);
    height: var(--sbc-size-thin, 8px);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb,
  .mobile-drawer::-webkit-scrollbar-thumb,
  #product_popup_list_body::-webkit-scrollbar-thumb,
  .spos-right::-webkit-scrollbar-thumb {
    border-width: var(--sbc-inset-thin, 2px);
  }
  .sk-sidebar-scroll::-webkit-scrollbar-thumb:hover,
  .mobile-drawer::-webkit-scrollbar-thumb:hover,
  #product_popup_list_body::-webkit-scrollbar-thumb:hover,
  .spos-right::-webkit-scrollbar-thumb:hover {
    border-width: var(--sbc-inset-thin-hover, 1px);
  }

  /* ---- 2e. MICRO strips (4px) — only for pre-existing deliberately
          tiny horizontal tab strips; a 2px inset would leave a 0px pill,
          so micro is FLAT: no inset, no gradient. -------------------- */
  .sk-dash-switcher-inner::-webkit-scrollbar,
  .sk-scroll-micro::-webkit-scrollbar {
    width:  var(--sbc-size-micro, 4px);
    height: var(--sbc-size-micro, 4px);
  }
  .sk-dash-switcher-inner::-webkit-scrollbar-thumb,
  .sk-scroll-micro::-webkit-scrollbar-thumb {
    border: 0;
    background-image: none;
    background-color: var(--sbc-teal, #0d9488);
    border-radius: var(--sbc-radius, 999px);
  }
  .sk-dash-switcher-inner::-webkit-scrollbar-thumb:hover,
  .sk-scroll-micro::-webkit-scrollbar-thumb:hover {
    background-color: var(--sbc-teal-bright, #14b8a6);
  }
  .sk-dash-switcher-inner::-webkit-scrollbar-track,
  .sk-scroll-micro::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
  }
}

/* =====================================================================
   3. ENGINE 2 — Firefox (unreachable by Chromium by construction)
   scrollbar-color inherits; scrollbar-width does not.
   ===================================================================== */
@supports not selector(::-webkit-scrollbar) {
  html,
  body {
    scrollbar-width: auto;
    scrollbar-color: var(--sbc-ff-thumb-light, #0f766e) var(--sbc-track-light, rgba(1, 21, 48, 0.06));
  }
  .table-responsive, .modal-body,
  .select2-results__options, textarea, .sgs-results, .dropdown-menu,
  ul#notifications_list, .ui-autocomplete, .pos_product_div, .dt-top-scroll,
  .spos-cart, .tree-content, .terms-container, .wizard-tabs-desktop,
  .asset-column-controls, .pm-body, .pm-table-container, .pf-tabs,
  .maintenance-type-list, .high-assets-list, .rpos-categories, .rpos-products,
  .rpos-cart__items, .sk-scroll-thin,
  .sk-dash-switcher-inner, .sk-scroll-micro {
    scrollbar-width: thin;
  }
  .sk-sidebar-scroll, .mobile-drawer, #product_popup_list_body, .spos-right,
  .sk-scroll-dark {
    scrollbar-width: thin;
    scrollbar-color: var(--sbc-ff-thumb-dark, #14b8a6) var(--sbc-track-dark, rgba(255, 255, 255, 0.06));
  }
}

/* =====================================================================
   4. Kanban — perfect-scrollbar v1.5.3 draws SYNTHETIC .ps__* rails
   (vendor.js jKanbanBoard + project.js/crm.js) that native scrollbar
   CSS can't touch. Skin them to the thin variant. Loads after the
   frozen vendor.css PS rules — same selector shapes win by order.
   ===================================================================== */
.ps__rail-x,
.ps__rail-y {
  background-color: transparent;
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover,
.ps .ps__rail-x:focus, .ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
  background-color: var(--sbc-track-light, rgba(1, 21, 48, 0.06));
}
.ps__thumb-y {
  width: 6px;
  border-radius: var(--sbc-radius, 999px);
  background-color: var(--sbc-teal-mid, #0f766e);
  background-image: linear-gradient(180deg,
    var(--sbc-navy, #1d2a47)     0%,
    var(--sbc-teal-mid, #0f766e) 40%,
    var(--sbc-teal, #0d9488)     100%);
}
.ps__thumb-x {
  height: 6px;
  border-radius: var(--sbc-radius, 999px);
  background-color: var(--sbc-teal-mid, #0f766e);
  background-image: linear-gradient(90deg,
    var(--sbc-navy, #1d2a47) 0%,
    var(--sbc-teal, #0d9488) 50%,
    var(--sbc-navy, #1d2a47) 100%);
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 8px;
  background-color: var(--sbc-teal-bright, #14b8a6);
  background-image: linear-gradient(180deg,
    var(--sbc-navy, #1d2a47)        0%,
    var(--sbc-teal-bright, #14b8a6) 72%,
    var(--sbc-gold-ember, #b45309)  100%);
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  height: 8px;
  background-color: var(--sbc-teal-bright, #14b8a6);
  background-image: linear-gradient(90deg,
    var(--sbc-navy, #1d2a47)        0%,
    var(--sbc-teal-bright, #14b8a6) 50%,
    var(--sbc-navy, #1d2a47)        100%);
}
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-image: linear-gradient(180deg,
    var(--sbc-gold-ember, #b45309)  0%,
    var(--sbc-gold-shadow, #92400e) 100%);
}
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-image: linear-gradient(90deg,
    var(--sbc-gold-shadow, #92400e) 0%,
    var(--sbc-gold-ember, #b45309)  50%,
    var(--sbc-gold-shadow, #92400e) 100%);
}

/* ---- 4a. Kanban .kanban-drag inner column scrollers — vendor.css ships
        its own kanban-scoped rule (.meta-tasks .kanban-container
        .kanban-board .kanban-drag .ps__rail-y .ps__thumb-y {width:100%})
        at 6-class specificity, which out-specifies the bare .ps__thumb-y
        rule above (1 class) and pins the thumb to the 7px rail width
        instead of the 6px/8px pill. Match its shape to win by load order
        (verified live on /project/project?project_view=kanban). --------- */
.meta-tasks .kanban-container .kanban-board .kanban-drag .ps__rail-y .ps__thumb-y {
  width: 6px;
}
.meta-tasks .kanban-container .kanban-board .kanban-drag .ps__rail-y:hover .ps__thumb-y,
.meta-tasks .kanban-container .kanban-board .kanban-drag .ps__rail-y:focus .ps__thumb-y,
.meta-tasks .kanban-container .kanban-board .kanban-drag .ps__rail-y.ps--clicking .ps__thumb-y {
  width: 8px;
}

/* =====================================================================
   5. Print — scrollbars never print (mirrors app.css's print rule so
   this file is print-safe standalone).
   ===================================================================== */
@media print {
  ::-webkit-scrollbar {
    display: none !important;
  }
  html,
  body {
    scrollbar-width: none;
  }
}