/* ===== CryptoAlleys Analytics — UI polish pack ===== */

/* Design tokens */
:root{
  --brand-primary

  --dm-color: #fff;

  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-card: 0 10px 24px rgba(0,0,0,.06);
  --shadow-card-dark: 0 12px 28px rgba(0,0,0,.35);
  --border: 1px solid #e5e7eb;
  --border-dark: 1px solid #493758;


  --chip-bg: #f3f4f6;
  --chip-fg: #374151;
  --chip-bg-dark: #2d2236;
  --chip-fg-dark: #dcd7e5;

  --muted: #6b7280;
  --muted-dark: #b3a8c7;
}

/* Base */
body{
  color: var(--text-color);
  background: var(--bg-page);
}



/* KPI tiles */
.kpi{
  text-align:center;
  padding:10px;
  border: 1px dashed #e5e7eb;
  background:#fafafa;
  border-radius: 8px;
}

/* Lists */
.list-group-item{
  border-color:#f0f0f0;
}
.list-group-item img{
  border-radius:3px;
}

/* Badges */
/* .badge.bg-primary{
  background: var(--brand-primary) !important;
} */

/* Chart wrappers */
.chart-wrap{
  background: #fff;
  border: var(1px solid #e5e7eb);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

/* ECharts tooltip look (DOM element) */
.echarts-tooltip{
  background: #111827 !important;
  color: #f9fafb !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

/* Section captions */
.ca-sub{
  color: var(--muted);
  font-size: 12px;
}
.ca-tip{
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px 12px;
}

/* Chips */
.ca-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg);
  font-size:12px;
}

/* table row container */
/* .table-container {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid #424242;
    box-shadow: 0 8px 25px rgb(58 55 55 / 90%);
}
body.dark-mode .table-container {
    border: 1px solid #493758
} */


/* Responsive */
@media (max-width: 992px){
  .filter-bar .chosen-container{ min-width: 140px; }
}
@media (max-width: 480px){
  .container-fluid{ padding:8px; }
  .card-header{ padding:8px 10px; }
}

/* ===== Dark mode refinements (extends your rules) ===== */
body.dark-mode .card{
  border: 1px solid #493758;
  box-shadow: var(--shadow-card-dark);
  background: #2a242f;
}
body.dark-mode .card-body {
    padding: 14px;
    color: var(--dm-color);
}
body.dark-mode .card-header{
  border-bottom: 1px solid #493758;
}
body.dark-mode .kpi {
    border-color: #2b2035;
    color: whitesmoke;
}
body.dark-mode .chosen-container-single .chosen-single{
  background:#2c2433; color:#e6e1ec;
  border: 1px solid #493758;
}
body.dark-mode .chosen-container .highlighted{
  background: var(--brand-primary);
}
body.dark-mode .list-group-item{
  border-color:#3a2b46; color:#e6e1ec;
}
body.dark-mode .badge.bg-primary{
  background: var(--brand-primary) !important;
}
body.dark-mode .ca-sub,
body.dark-mode .ca-tip{
  color: var(--muted-dark);
}
body.dark-mode .ca-chip{
  background: var(--chip-bg-dark); color: var(--chip-fg-dark);
}
body.dark-mode .echarts-tooltip{
  background:#1e1525 !important;
  color:#efe9f7 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
}
/*sidenav stuff*/
/* .nav-sidebar li.has-badge > a{position:relative;padding-right:52px}
.nav-sidebar .menu-badge{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:#6c5ce7;color:#fff;border-radius:999px;
    min-width:26px;line-height:18px;padding:2px 8px;
    font-size:12px;font-weight:700;text-align:center;
    box-shadow:0 1px 2px rgba(0,0,0,.2)
}
.dark-mode .nav-sidebar .menu-badge{background:#8d7bff} */


/* Mobile: allow the title to be up to 2 lines with a clamp */
/* @media (max-width: 767px) {

} */