/* =========================================================
   GETICK UI — Global Styles
   ========================================================= */

/* ---------- Root vars ---------- */
:root{
  --bg0: #06070a;
  --bg1: #0b0b10;
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --brand: #2ecc71;
  --brand-soft: rgba(46,204,113,.10);
  --sidebar-w: 280px;
  --topbar-h: 72px;
  --gap-after-topbar: 22px;

  --hamburger-left: 14px;
  --hamburger-w: 44px;
  --hamburger-gap: 14px; /* ✅ espacio entre hamburguesa y título cuando colapsa */
}

/* ---------- Base / Font ---------- */
html, body{
  /* ✅ NO seteamos Arial: dejamos la font del theme (igual que tu tabla) */
  min-height: 100%;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(46,204,113,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(130,160,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: white;
}
*{ font-family: inherit; }

/* =========================================================
   SHELL
   ========================================================= */
.app-shell{ min-height: 100vh; }

/* ---------- Topbar ---------- */
.topbar{
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 55;
  height: var(--topbar-h);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}

.topbar-title{
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .4px;
}

/* ---------- Hamburger ---------- */
.hamburger{
  position: fixed;
  top: 14px;
  left: var(--hamburger-left);
  z-index: 60;
  width: var(--hamburger-w);
  height: var(--hamburger-w);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .12s ease, transform .12s ease;
}
.hamburger:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* ---------- Sidebar ---------- */
.sidebar{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  padding: 78px 14px 24px 14px;
  background: rgba(0,0,0,.24);
  border-right: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  transition: transform .22s ease;
}

/* ✅ Forzar font en el menú lateral (NavLink/Bootstrap a veces pisa) */
.sidebar,
.sidebar *{
  font-family: inherit !important;
}
.sidebar .nav,
.sidebar .nav-link,
.sidebar .nav-pills .nav-link{
  font-family: inherit !important;
}

/* ---------- Content ---------- */
.content{
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + var(--gap-after-topbar)) 20px 20px 20px;
  min-height: 100vh;
}

/* ---------- Collapsed ---------- */
.app-shell.collapsed .sidebar{ transform: translateX(-110%); }
.app-shell.collapsed .content{ margin-left: 0; }
.app-shell.collapsed .topbar{
  left: 0;

  /* ✅ deja espacio para que el título no quede pegado a la hamburguesa */
  padding-left: calc(var(--hamburger-left) + var(--hamburger-w) + var(--hamburger-gap));
}

/* ---------- Brand ---------- */
.brand-logo{
  font-weight: 900;
  font-size: 28px;
  display: inline-flex;
  align-items: baseline;
}
.brand-get,.brand-ck{ color:#fff; }
.brand-i{
  color: var(--brand);
  margin: 0 2px;
  text-shadow: 0 10px 30px rgba(46,204,113,.25);
}

.topbar-actions{ display:flex; align-items:center; gap:16px; }
.watchlist-menu{ position:relative; }
.watchlist-button{
  border:1px solid transparent; border-radius:12px; padding:7px 11px;
  color:rgba(255,255,255,.88); background:transparent; font-weight:800;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.watchlist-button:hover,.watchlist-button:focus{
  color:#fff; background:rgba(46,204,113,.13);
  border-color:rgba(46,204,113,.55); outline:none;
}
.watchlist-button-star{ color:#f4c542; font-size:17px; }
.watchlist-menu > .collapse,.watchlist-menu > .collapsing{
  position:absolute; top:calc(100% + 16px); right:0;
  width:min(860px, calc(100vw - 32px)); z-index:90;
}
.watchlist-dropdown{
  max-height:390px; overflow:auto; padding:12px;
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  background:#090b0d; box-shadow:0 22px 60px rgba(0,0,0,.75);
}
.watchlist-dropdown-title{
  margin:2px 4px; color:#2ecc71; font-size:12px;
  font-weight:900; letter-spacing:.8px;
}
.watchlist-dropdown-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.watchlist-refresh-button{
  width:30px; height:30px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid rgba(255,255,255,.14);
  border-radius:9px; background:transparent; color:rgba(255,255,255,.72);
  font-size:20px; line-height:1; cursor:pointer;
  transition:color .15s ease,border-color .15s ease,
             background .15s ease,transform .2s ease;
}
.watchlist-refresh-button:hover{
  color:#2ecc71; border-color:rgba(46,204,113,.65);
  background:rgba(46,204,113,.10); transform:rotate(30deg);
}
.watchlist-refresh-button:active{ transform:rotate(150deg); }
.watchlist-row{
  display:grid; grid-template-columns:86px repeat(6,minmax(86px,1fr));
  gap:10px; align-items:center; min-width:760px; padding:9px 10px;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.watchlist-header{
  color:rgba(255,255,255,.48); border-bottom:1px solid rgba(255,255,255,.08);
  font-size:10px; font-weight:800; text-transform:uppercase;
}
.watchlist-link{
  color:rgba(255,255,255,.82); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05); border-radius:9px;
}
.watchlist-link:hover{ color:#fff; background:rgba(46,204,113,.09); }
.watchlist-symbol{ color:#fff; font-weight:900; }
.watchlist-positive{ color:#2ecc71; }
.watchlist-negative{ color:#ff5f5f; }
.watchlist-empty{ padding:18px 8px; color:rgba(255,255,255,.55); }

/* =========================================================
   NAV
   ========================================================= */
.nav-pills .nav-link{
  border-radius: 14px;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
  position: relative;
  overflow: hidden;
  transition: background .12s ease, box-shadow .12s ease,
              transform .12s ease, color .12s ease;
}

.nav-pills .nav-link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(46,204,113,.12);
  opacity: 0;
  transition: opacity .15s ease;
}

.nav-pills .nav-link:hover::before{ opacity: 1; }
.nav-pills .nav-link:hover{
  color: rgba(255,255,255,.96);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(46,204,113,.25),
    0 6px 16px rgba(46,204,113,.08);
}

.nav-pills .nav-link.active{
  background: rgba(46,204,113,.14) !important;
  border: 1px solid rgba(46,204,113,.25) !important;
  box-shadow: 0 8px 22px rgba(46,204,113,.10);
}

/* Disabled but hoverable */
.nav-pills .nav-link.disabled{
  opacity: .55 !important;
  pointer-events: auto !important;
  cursor: default !important;
}
.nav-pills .nav-link.disabled:hover::before{ opacity: 1; }

/* ---------- Sidebar bottom ---------- */
.sidebar-bottom{
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.small-muted{
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 10px;
}

/* ---------- Buttons ---------- */
.btn-brand{
  background: linear-gradient(180deg, #36d180, #2ecc71);
  border: none;
  color: #0b0b10;
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 10px 25px rgba(46,204,113,.18);
}
.btn-brand:hover{ filter: brightness(1.04); }

/* =========================================================
   MARKET TABLE (Bootstrap-safe)
   ========================================================= */
.market-table{
  font-size: 12px;
  line-height: 1.2;

  --bs-table-bg: rgba(0,0,0,.14);
  --bs-table-hover-bg: rgba(255,255,255,.020);
  --bs-table-border-color: rgba(255,255,255,.08);

  color: rgba(255,255,255,.88);
}

.market-table thead th{
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.75);
  font-weight: 700;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.market-table td{
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.market-table tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.015); }
.market-table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.035); }

table.market-table.table-hover > tbody > tr:hover > *{
  background-color: rgba(255,255,255,.020) !important;
}

.market-table td,
.market-table td a{ color: rgba(255,255,255,.90) !important; }

.market-table .ticker-link{ font-weight: 700; }

.market-table .chg-pos{ color:#2ecc71 !important; font-weight:800; }
.market-table .chg-neg{ color:#ff5252 !important; font-weight:800; }
.market-table .chg-flat{ color:rgba(255,255,255,.65) !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px){
  .sidebar{
    transform: translateX(-110%);
    z-index: 99999;          /* ✅ ensure it's above */
  }

  .content{
    margin-left: 0;
    padding-top: calc(var(--topbar-h) + var(--gap-after-topbar));
  }

  .topbar{ left: 0; }

  /* ✅ your hamburger toggles "collapsed" -> use it to OPEN on mobile */
  .app-shell.collapsed .sidebar{ transform: translateX(0); }

  /* (optional) keep this if you ever use open-mobile elsewhere */
  .app-shell.open-mobile .sidebar{ transform: translateX(0); }
}

/* Fullscreen loading overlay */
._dash-loading-callback {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(2px);
}
/* =========================================================
   DASH GLOBAL LOADING — SPINNER ONLY (no blur)
   ========================================================= */

._dash-loading-callback{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;   /* ✅ no dim */
  backdrop-filter: none !important;     /* ✅ no blur */

  pointer-events: none !important;
}

/* Spinner itself */
._dash-loading-callback::after{
  content: "" !important;
  display: block !important;

  width: 4.2rem !important;
  height: 4.2rem !important;

  border-radius: 50% !important;
  border: .45rem solid rgba(46,204,113,.22) !important;
  border-top-color: rgba(46,204,113,1) !important;

  animation: gxspin .85s linear infinite !important;
  filter: drop-shadow(0 0 10px rgba(46,204,113,.55)) !important;
}

@keyframes gxspin{
  to { transform: rotate(360deg); }
}

/* =========================================================
   SIDEBAR — Stock Screeners header (no pill)
   ========================================================= */

/* (opcional) header sin pill — SOLO si lo usás en otro lado */
.sidebar .nav-l1-header{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 10px !important;
  margin: 6px 2px 2px 2px;
  border-radius: 0 !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
  letter-spacing: .35px;
}
.sidebar .nav-l1-header::before{ display:none !important; }
.sidebar .nav-l1-header:hover{
  background: rgba(255,255,255,.06) !important;
  color:#fff !important;
}

.sidebar .nav-l2-link.nav-link{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 10px 6px 22px !important;
  margin: 2px 0 2px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.72) !important;
}
.sidebar .nav-l2-link.nav-link:hover{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95) !important;
  transform: none !important;
}
/* =========================================================
   SIDEBAR — Submenu active state (Stage2/QMomo/Top Industries)
   ========================================================= */

/* Active sub link (dbc.NavLink adds .active) */
.sidebar .nav-l2-link.nav-link.active{
  background: rgba(46,204,113,.14) !important;     /* brand-soft */
  color: rgba(255,255,255,.98) !important;

  /* subtle active indicator */
  box-shadow:
    inset 3px 0 0 rgba(46,204,113,.85),            /* left bar */
    inset 0 0 0 1px rgba(46,204,113,.18) !important;

  border-radius: 12px !important;
}

/* Some versions use aria-current instead of .active */
.sidebar .nav-l2-link.nav-link[aria-current="page"]{
  background: rgba(46,204,113,.14) !important;
  color: rgba(255,255,255,.98) !important;
  box-shadow:
    inset 3px 0 0 rgba(46,204,113,.85),
    inset 0 0 0 1px rgba(46,204,113,.18) !important;
  border-radius: 12px !important;
}

/* Keep hover nice even when active */
.sidebar .nav-l2-link.nav-link.active:hover,
.sidebar .nav-l2-link.nav-link[aria-current="page"]:hover{
  background: rgba(46,204,113,.18) !important;
  color: #fff !important;
}
.sidebar-user-settings{
  display: block;

  margin-top: 22px;      /* ⬅ espacio desde Getick Trades */
  margin-bottom: 26px;   /* ⬅ espacio antes de Data updated */

  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;

  color: rgba(255,255,255,.60);
  text-decoration: none;

  text-align: left;

  transition:
    color .18s ease,
    text-shadow .18s ease,
    transform .18s ease;
}

.sidebar-user-settings:hover{
  color: #2ecc71;
  text-shadow: 0 0 8px rgba(46,204,113,.65);
  transform: translateY(-1px);
}

/* Disable Dash global spinner only on Live Tracker */
.app-shell.no-spinner ._dash-loading-callback,
.app-shell.no-spinner ._dash-loading-callback::after{
  display: none !important;
  content: none !important;
}

/* Live Tracker dedicated fullscreen route */
.app-shell.live-tracker-fullscreen-shell .sidebar,
.app-shell.live-tracker-fullscreen-shell .topbar,
.app-shell.live-tracker-fullscreen-shell .hamburger{
  display: none !important;
}

.app-shell.live-tracker-fullscreen-shell .content{
  margin-left: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
}

.app-shell.live-tracker-fullscreen-shell #page-wrap{
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  min-height: 100vh !important;
}