/* =========================================================
   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);
}

/* =========================================================
   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;
}