/* dash/finance_slug.css
   FINANCE TOPBAR + FINANCE SLUG (STOCKS SECTORS)
   CLEAN / FAST / NO CHESSBOARD

   Goals:
   - Sticky topbar inside .shell-main
   - Buttons aligned right
   - Fade background
   - Active button: black bg, white text (no frame)
   - Restore slug zoom hover/active
   - Keep scroll working for OTHER finance categories
   - NO :has()
*/

/* ─────────────────────────────────────────────────────────────
   Workspace basics
   ───────────────────────────────────────────────────────────── */

.shell-main{ scroll-behavior:smooth; }
.shell-main .fin-workspace{ min-width:0; }

/* anchor offset for scrollspy targets */
.shell-main .fin-workspace [id^="finsec-"]{
  scroll-margin-top: 88px;
}

/* ─────────────────────────────────────────────────────────────
   FINANCE TOPBAR (sticky inside .shell-main)
   ───────────────────────────────────────────────────────────── */

.shell-main .fin-topbar-wrap{
  position: sticky;
  top: 0;
  z-index: 120;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none;
  box-sizing: border-box;
}

.shell-main .fin-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* right align */
  gap: 8px;

  padding: 8px 10px;
  min-height: 52px;

  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  position: relative;

  /* fade: right solid, left transparent */
  background: linear-gradient(
    to left,
    rgba(5,5,7,0.96) 0%,
    rgba(5,5,7,0.90) 35%,
    rgba(5,5,7,0.60) 70%,
    rgba(5,5,7,0.22) 92%,
    rgba(5,5,7,0.00) 100%
  );
}

@supports not (background: linear-gradient(to left, #000, transparent)) {
  .shell-main .fin-topbar{ background: rgba(5,5,7,0.96); }
}

.shell-main .fin-topbar::-webkit-scrollbar{ height: 8px; }
.shell-main .fin-topbar::-webkit-scrollbar-track{ background: transparent; }
.shell-main .fin-topbar::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────────
   Topbar buttons
   ───────────────────────────────────────────────────────────── */

.shell-main .fin-topbtn{
  box-sizing:border-box;
  border: none;
  border-radius: 0;

  padding: 10px 14px;
  line-height: 1;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.88);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  background-color: rgba(255,255,255,0.05);

  transition:
    background-color .12s ease,
    color .12s ease,
    transform .12s ease,
    font-size .12s ease,
    letter-spacing .12s ease,
    opacity .12s ease;

  opacity: 0.96;
  transform-origin: center;
}

.shell-main .fin-topbtn:hover{
  background-color: rgba(255,255,255,0.10);
  color: #fff;
  opacity: 1;
}

/* active = BLACK + WHITE only (no frame) */
.shell-main .fin-topbtn.active{
  background-color: #000 !important;
  color: #fff !important;
  opacity: 1;

  font-size: 14px;
  letter-spacing: .14em;
  transform: scale(1.06);
}

.shell-main .fin-topbtn:focus{ outline:none; }
.shell-main .fin-topbtn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.28);
  outline-offset: 2px;
}

/* no :has() — emulate “dim others” softly with hover only */
.shell-main .fin-topbar:hover .fin-topbtn{ opacity: 0.88; }
.shell-main .fin-topbar:hover .fin-topbtn:hover{ opacity: 1; }
.shell-main .fin-topbar:hover .fin-topbtn.active{ opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   Legacy OFF — keep it VERY narrow
   (DON’T nuke slug-shell layout; it breaks scroll elsewhere)
   ───────────────────────────────────────────────────────────── */

.shell-main #fin-topbar-slot{ display:none !important; }

/* ─────────────────────────────────────────────────────────────
   Restore scroll for finance slug sidebars (OTHER CATEGORIES too)
   ───────────────────────────────────────────────────────────── */

/* The actual scroll should live in your sidebar container, not on html/body */
.slug-shell.subsidebar{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* keep links visible (no clipping) */
.slug-shell.subsidebar .sub-link{ overflow: visible; }

/* avoid horizontal scroll leaks without killing page scrolling */
.shell-main{ overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────────
   Slug zoom (ACTIVE SLUG ZOOM)
   ───────────────────────────────────────────────────────────── */

.slug-shell.subsidebar .sub-link:hover .tree-btn{
  transform: scale(1.30) !important;
  opacity: 1;
}

.slug-shell.subsidebar .sub-link.active .tree-btn,
.slug-shell.subsidebar .sub-link[aria-selected="true"] .tree-btn,
.slug-shell.subsidebar .sub-link[aria-current="page"] .tree-btn,
.slug-shell.subsidebar .tree-btn.active,
.slug-shell.subsidebar .tree-btn[aria-selected="true"],
.slug-shell.subsidebar .tree-btn[aria-current="page"]{
  transform: scale(1.50) !important;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   STOCKS SECTORS (ACCORDIONS) + company name micro
   ───────────────────────────────────────────────────────────── */

.finance-tree--stocks .tree-acc{
  margin: 6px 0;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.finance-tree--stocks .tree-acc-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 10px 10px;
  cursor:pointer;
  user-select:none;

  /* default = dim (white only when open) */
  color: rgba(255,255,255,0.60);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 13px;
  line-height: 1.1;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.finance-tree--stocks .tree-acc-title::-webkit-details-marker{ display:none; }
.finance-tree--stocks .tree-acc-title::after{
  content:"▾";
  opacity:0.75;
  transform: translateY(-1px);
  font-size: 12px;
}

/* open => white title, still no frame */
.finance-tree--stocks .tree-acc[open]{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}
.finance-tree--stocks .tree-acc[open] .tree-acc-title{
  color: rgba(255,255,255,0.92);
}
.finance-tree--stocks .tree-acc[open] .tree-acc-title::after{
  content:"▴";
  opacity:0.85;
}

.finance-tree--stocks .tree-acc-title:hover{
  background: rgba(255,255,255,0.05);
}

.finance-tree--stocks .tree-acc-body{
  padding: 6px 6px 8px 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.finance-tree--stocks .tree-leaf.sub-link{
  display:block;
  text-decoration:none;

  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;

  /* default dim */
  color: rgba(255,255,255,0.60);
}

/* active link: white text only, no outline/frame */
.finance-tree--stocks .tree-leaf.sub-link.active{
  color: rgba(255,255,255,0.92);
}

.finance-tree--stocks .tree-leaf.sub-link:focus,
.finance-tree--stocks .tree-leaf.sub-link:focus-visible,
.finance-tree--stocks .tree-btn:focus,
.finance-tree--stocks .tree-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* button spacing */
.finance-tree--stocks .tree-btn.tree-btn--small{
  padding: 8px 8px;
  min-width: 0;
  white-space: normal;
}

/* label layout */
.finance-tree--stocks .tree-stock-label{
  display:flex;
  flex-direction:column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.finance-tree--stocks .tree-stock-ticker{
  font-size: 13px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

/* company full name: MICRO + safe wrapping (your Python injects <br/>) */
.finance-tree--stocks .tree-stock-name{
  display:block;
  width: 100%;
  min-width: 0;
  max-width: 100%;

  font-size: 9px;
  line-height: 1.08;
  font-weight: 450;
  color: rgba(255,255,255,0.50);

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}


/* ======================================================================
   FIX: Scroll on ALL finance slug sidebars (not only stocks)
   + Dim tickers by default, white only on active item
   ====================================================================== */

/* 1) Scroll must be on the slug sidebar container for ALL roots */
.slug-shell.subsidebar,
.slug-shell.subsidebar .tree-root,
.slug-shell.subsidebar .finance-tree{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* If your sidebar uses a fixed height, ensure it can actually scroll */
.slug-shell.subsidebar{
  min-height: 0 !important;
}

/* 2) Remove any accidental clipping inside list wrappers */
.slug-shell.subsidebar .tree-acc-body,
.slug-shell.subsidebar .tree-leaf,
.slug-shell.subsidebar .sub-link{
  overflow: visible !important;
}

/* ======================================================================
   COLORS: default = dim, active = white ONLY (no frames)
   Applies to ALL finance categories, including stocks
   ====================================================================== */

/* Default link/button text dim */
.slug-shell.subsidebar .tree-leaf.sub-link{
  color: rgba(255,255,255,0.60) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Default ticker dim */
.slug-shell.subsidebar .tree-stock-ticker{
  color: rgba(255,255,255,0.70) !important;
}

/* Default company name even dimmer */
.slug-shell.subsidebar .tree-stock-name{
  color: rgba(255,255,255,0.45) !important;
}

/* ACTIVE ONLY => white text (ticker + name) */
.slug-shell.subsidebar .tree-leaf.sub-link.active,
.slug-shell.subsidebar .tree-leaf.sub-link.active *{
  color: rgba(255,255,255,0.92) !important;
}

/* kill any frames on active */
.slug-shell.subsidebar .tree-leaf.sub-link.active,
.slug-shell.subsidebar .tree-leaf.sub-link.active .tree-btn{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Also remove focus ring frames */
.slug-shell.subsidebar .sub-link:focus,
.slug-shell.subsidebar .sub-link:focus-visible,
.slug-shell.subsidebar .tree-btn:focus,
.slug-shell.subsidebar .tree-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}


/* ======================================================================
   FINANCE SLUG — HARD FIX
   - restore scroll for ALL finance slugs (not only stocks)
   - dim everything by default; white text ONLY on active
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) FORCE SCROLL on the RIGHT SLUG RAIL / SIDEBAR (multiple fallbacks)
   ---------------------------------------------------------------------- */

/* najczęstszy wrapper prawego sluga w Twoim shellu */
.shell-root .slug-shell,
.shell-grid-3 .slug-shell,
.shell-main .slug-shell,
.slug-shell{
  /* jeśli to jest flex-child w kolumnie/railu -> bez tego scroll często nie działa */
  min-height: 0 !important;
  min-width: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;
}

/* właściwy kontener listy (Twoje klasy z finance_slug.py) */
.shell-root .tree-root.finance-tree,
.shell-grid-3 .tree-root.finance-tree,
.slug-shell .tree-root.finance-tree{
  min-height: 0 !important;
  min-width: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;
}

/* jeśli slug rail jest fixed i ma wysokość viewportu — wymuś max-height */
.shell-root .slug-shell,
.shell-grid-3 .slug-shell,
.shell-main .slug-shell,
.slug-shell{
  max-height: 100vh !important;
}

/* ----------------------------------------------------------------------
   2) COLOR RULES: DEFAULT = MORE DIM, ACTIVE = WHITE ONLY
   (no frames / no outlines / no extra backgrounds)
   ---------------------------------------------------------------------- */

/* default link / button: mocno wyszarzone */
.slug-shell .tree-leaf.sub-link,
.slug-shell .tree-leaf.sub-link .tree-btn{
  color: rgba(255,255,255,0.40) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ticker domyślnie jeszcze trochę jaśniej niż reszta (ale nadal szary) */
.slug-shell .tree-stock-ticker{
  color: rgba(255,255,255,0.52) !important;
}

/* pełna nazwa spółki: mikro + bardzo przygaszona */
.slug-shell .tree-stock-name{
  color: rgba(255,255,255,0.28) !important;
  font-size: 9px !important;
  line-height: 1.08 !important;
  font-weight: 450 !important;
}

/* ACTIVE: białe TYLKO na wybranym */
.slug-shell .tree-leaf.sub-link.active,
.slug-shell .tree-leaf.sub-link.active .tree-btn,
.slug-shell .tree-leaf.sub-link.active .tree-stock-ticker,
.slug-shell .tree-leaf.sub-link.active .tree-stock-name{
  color: rgba(255,255,255,0.92) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* zabij ramki focus/hover które “wracają” */
.slug-shell .sub-link:focus,
.slug-shell .sub-link:focus-visible,
.slug-shell .tree-btn:focus,
.slug-shell .tree-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ticker trochę bardziej (jaśniejszy) niż reszta, ale nadal nie-biały */
.slug-shell .tree-stock-ticker{
  color: rgba(255,255,255,0.66) !important;
}

/* ======================================================================
   FINANCE SLUG — COLORS
   - inactive = mocno szare
   - active = białe
   ====================================================================== */

/* default: wszystko mocno przygaszone */
.shell-root .slug-shell.subsidebar a.sub-link > .tree-btn{
  color: rgba(255,255,255,0.42) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ticker ma być "trochę bardziej" niż reszta, ale nadal nie biały */
.shell-root .slug-shell.subsidebar .tree-stock-ticker{
  color: rgba(255,255,255,0.58) !important;
}

/* ACTIVE: białe (bez ramek) */
.shell-root .slug-shell.subsidebar :is(
  a.sub-link.active > .tree-btn,
  a.sub-link[aria-selected="true"] > .tree-btn,
  a.sub-link[aria-current="page"] > .tree-btn
){
  color: rgba(255,255,255,0.98) !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}