/* Remove collapsed animation for new expand/collapse logic */
.timeline-card {
  transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  padding: 10px 14px;
  margin-left: 0;
  min-width: 180px;
  border-left: 4px solid #1DB6A0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.insight-card {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  line-height: 1.4;
}
.insight-card:last-child {
  border-bottom: none;
}

/* Clamp insight card preview to 5 lines */
.insight-card.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6.5em;
  position: relative;
}
.read-more-link {
  color: #1DB6A0;
  cursor: pointer;
  font-size: 13px;
  display: inline-block;
  margin-top: 2px;
}
.insight-card.expanded {
  max-height: none;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Vertical Timeline for Insights */
/* Vertical Timeline for Insights */
.timeline {
  position: relative;
  margin: 0 0 0 40px;
  padding: 0;
  border-left: 3px solid #e0e0e0;
}
.timeline-item {
  position: relative;
  margin-bottom: 32px;
}
.timeline-date {
  position: absolute;
  left: -15px;
  top: 0;
  width: 20px;
  text-align: right;
  font-weight: 600;
  color: #888;
  font-size: 14px;
  white-space: nowrap;
  overflow: visible;
}
.timeline-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 16px 20px;
  margin-left: 0;
  min-width: 220px;
  border-left: 4px solid #1DB6A0;
}
.timeline-item:before {
  content: '';
  position: absolute;
  left: -27px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 3px solid #1DB6A0;
  border-radius: 50%;
  z-index: 1;
}
.insight-card {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.insight-card:last-child {
  border-bottom: none;
}
:root {
    /* Brand Colors */
    --brand-primary: #1DB6A0;    /* Teal */
    --brand-secondary: #B97138;   /* Matte Bronze */

    /* Extended brand neutrals */
    --brand-charcoal: #1E1E1E;         /* Charcoal Black for text */
    --brand-bg: #F4F1EC;               /* Warm Ivory background */

    /* Bootstrap color overrides */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 29, 182, 160;              /* RGB values for opacity support */
    --bs-secondary: var(--brand-secondary);
    --bs-secondary-rgb: 185, 113, 56;   
    
    /* Logo sizes */
    --ct-logo-lg-height: 50px;
    --ct-logo-sm-height: 40px;
}

.bg-primary {
    background-color: var(--brand-bg) !important;
}

.bg-secondary {
    background-color: var(--brand-secondary) !important;
}

/* Override Navbar styles */
.navbar-brand {
    color: var(--brand-primary) !important;
}

.navbar-brand:hover {
    color: var(--brand-secondary) !important;
}

.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--brand-primary);
}

.navbar-dark {
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-active-color: #ffffff;
}

/* Override Nav styles */
.nav-link {
    color: var(--brand-secondary) !important;
}

.nav-link:hover, 
.nav-link:focus {
    color: var(--brand-primary) !important;
}

.nav-link.active {
    color: var(--brand-primary) !important;
    font-weight: 600;
}

/* Dashboard specific styles */
.navbar[color="primary"] {
    background-color: var(--brand-primary) !important;
}

.navbar[color="primary"] .nav-link,
.navbar[color="primary"] .navbar-brand {
    color: #ffffff !important;
}

.navbar[color="primary"] .nav-link:hover,
.navbar[color="primary"] .navbar-brand:hover {
    color: var(--brand-secondary) !important;
}

/* File upload button styles */
#file {
    color: #ffffff !important;
    cursor: pointer;
}

#file:hover {
    color: var(--brand-secondary) !important;
}

/* User menu styles */
.dropdown-menu {
    border-color: var(--brand-primary);
}

.dropdown-item:hover {
    background-color: var(--brand-primary);
    color: #ffffff;
}

/* Dark theme overrides */
[data-bs-theme=dark] .navbar {
    background-color: var(--brand-secondary) !important;
    border-bottom: 1px solid var(--brand-primary);
}

[data-bs-theme=dark] .navbar-brand,
[data-bs-theme=dark] .nav-link {
    color: #ffffff !important;
}

[data-bs-theme=dark] .navbar-brand:hover,
[data-bs-theme=dark] .nav-link:hover {
    color: var(--brand-primary) !important;
}

/* Radio button group styles */
.radio-group {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* Override Bootstrap badge styles */
.badge.text-bg-primary {
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
}

.badge.text-bg-secondary {
    background-color: var(--brand-secondary) !important;
    color: #ffffff !important;
}

:root[data-topbar-color=brand] {
    --ct-topbar-bg: #ffffff;
    --ct-topbar-item-color: var(--brand-primary);
    --ct-topbar-item-hover-color: var(--brand-secondary);
    --ct-topbar-search-bg: rgba(255, 255, 255, 0.1);
    --ct-topbar-user-bg: transparent;
    --ct-topbar-user-border: transparent;
}

:root[data-menu-color=brand] {
    --ct-menu-bg: var(--brand-primary);
    --ct-menu-item-color: #ffffff;
    --ct-menu-item-hover-color: var(--brand-secondary);
    --ct-menu-item-hover-bg: #ffffff;
    --ct-menu-item-active-color: #ffffff;
    --ct-menu-item-active-bg: rgba(255, 255, 255, 0.1);
    --ct-sidenav-user-bg: #e2eeff;
}


[data-bs-theme=light] {
    /* Global body */
  --ct-body-bg: var(--brand-bg);
  --ct-body-bg-rgb: 244, 241, 236;
  --ct-body-color: var(--brand-charcoal);
  --ct-body-color-rgb: 30, 30, 30;

  /* Brand as primary + secondary */
  --ct-primary: var(--brand-primary);
  --ct-secondary: var(--brand-secondary);
  --ct-primary-text-emphasis: var(--brand-primary);
  --ct-secondary-text-emphasis: var(--brand-secondary);

  /* Bootstrap component colors */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 29, 182, 160;
  --bs-secondary: var(--brand-secondary);
  --bs-secondary-rgb: 185, 113, 56;

  /* Links */
  --ct-link-color: var(--brand-secondary);
  --ct-link-hover-color: var(--brand-primary);
}

[data-bs-theme=dark] {
   --ct-primary: var(--brand-secondary);
  --ct-secondary: var(--brand-primary);
  --ct-primary-text-emphasis: var(--brand-primary);
  --ct-secondary-text-emphasis: var(--brand-secondary);

  --bs-primary: var(--brand-secondary);
  --bs-secondary: var(--brand-primary);
}

/* Brand color button overrides */
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--brand-primary) !important;
  --bs-btn-hover-border-color: var(--brand-primary) !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--brand-primary) !important;
  --bs-btn-active-border-color: var(--brand-primary) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--brand-secondary) !important;
  --bs-btn-border-color: var(--brand-secondary) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--brand-secondary) !important;
  --bs-btn-hover-border-color: var(--brand-secondary) !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-active-bg: var(--brand-secondary) !important;
  --bs-btn-active-border-color: var(--brand-secondary) !important;
}

/* Brand color button overrides - ensure specificity and !important */
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus, .btn.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus, .btn.btn-outline-secondary:active {
    color: #fff !important;
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}


/* Radio button states */
.btn-check:checked + .btn-outline-primary {
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-check + .btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-check + .btn-outline-secondary {
    color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

.btn-check:checked + .btn-outline-secondary {
    color: #fff !important;
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

/* Hover states */
.btn-check:checked + .btn-outline-primary:hover,
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    opacity: 0.9;
}

.btn-check:checked + .btn-outline-secondary:hover,
.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
    opacity: 0.9;
}

/* Dark theme overrides */
[data-bs-theme=dark] .btn-outline-primary,
[data-bs-theme=dark] .btn-check:checked + .btn-outline-primary {
    --bs-btn-color: var(--brand-secondary) !important;
    --bs-btn-border-color: var(--brand-secondary) !important;
    --bs-btn-hover-bg: var(--brand-secondary) !important;
    --bs-btn-hover-border-color: var(--brand-secondary) !important;
    --bs-btn-active-bg: var(--brand-secondary) !important;
    --bs-btn-active-border-color: var(--brand-secondary) !important;
    --bs-btn-focus-shadow-rgb: 77, 77, 77 !important;
}

[data-bs-theme=dark] .btn-outline-secondary,
[data-bs-theme=dark] .btn-check:checked + .btn-outline-secondary {
    --bs-btn-color: var(--brand-primary) !important;
    --bs-btn-border-color: var(--brand-primary) !important;
    --bs-btn-hover-bg: var(--brand-primary) !important;
    --bs-btn-hover-border-color: var(--brand-primary) !important;
    --bs-btn-active-bg: var(--brand-primary) !important;
    --bs-btn-active-border-color: var(--brand-primary) !important;
    --bs-btn-focus-shadow-rgb: 237, 109, 6 !important;
}

/* Override link styles */
a {
    color: var(--brand-secondary) !important;
    text-decoration: none !important;
}
a:hover {
    color: var(--brand-secondary) !important;
    text-decoration: underline !important;
}

/* Preserve button link colors */
a.btn {
    color: var(--brand-secondary) !important;
    text-decoration: none !important;
}

a.btn:hover {
    text-decoration: underline !important;
}

/* Side navigation link styles */
/* Side navigation link styles – let theme variables drive the colors */
.side-nav-link {
    color: var(--ct-menu-item-color);
    text-decoration: none;
}

.side-nav-link:hover {
    color: var(--ct-menu-item-hover-color);
    text-decoration: underline;
}


[data-bs-theme=dark] a.btn {
    border-color: var(--brand-secondary);
    color: #fff !important;
}

/* Override form submit button styles */
.btn[type="submit"] .btn-outline-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--brand-primary) !important;
    --bs-btn-border-color: var(--brand-primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--brand-secondary) !important;
    --bs-btn-hover-border-color: var(--brand-secondary) !important;
    --bs-btn-focus-shadow-rgb: 237, 109, 6 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--brand-secondary) !important;
    --bs-btn-active-border-color: var(--brand-secondary) !important;
}

.btn[type="submit"] .btn-outline-secondary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--brand-secondary) !important;
    --bs-btn-border-color: var(--brand-secondary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--brand-primary) !important;
    --bs-btn-hover-border-color: var(--brand-primary) !important;
    --bs-btn-focus-shadow-rgb: 77, 77, 77 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--brand-primary) !important;
    --bs-btn-active-border-color: var(--brand-primary) !important;
}

/* Dark theme submit button overrides */
[data-bs-theme=dark] .btn[type="submit"] .btn-outline-primary, .btn-outline-secondary {
    --bs-btn-bg: var(--brand-primary) !important;
    --bs-btn-border-color: var(--brand-primary) !important;
    --bs-btn-hover-bg: var(--brand-primary) !important;
    --bs-btn-hover-border-color: var(--brand-primary) !important;
    --bs-btn-active-bg: var(--brand-primary) !important;
    --bs-btn-active-border-color: var(--brand-primary) !important;
    --bs-btn-focus-shadow-rgb: 77, 77, 77 !important;
}


/* Override side-nav condensed hover styles */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    backdrop-filter: blur(10px);
    width: var(--ct-sidenav-width);
}

html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .side-nav-item:hover .collapse > .sub-menu,
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .side-nav-item:hover .collapsing > .sub-menu {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
}

/* Dark theme overrides */
[data-bs-theme=dark] html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    background-color: var(--brand-secondary) !important;
}

[data-bs-theme=dark] html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .side-nav-item:hover .collapse > .sub-menu,
[data-bs-theme=dark] html[data-sidenav-size=condensed]:not([data-layout=topnav]) .sidenav-menu .side-nav .side-nav-item:hover .collapsing > .sub-menu {
    border-color: var(--brand-secondary) !important;
}

.insight-card {
    background: #fff;
    border-radius: 3px;
    padding: 0.15rem;
    margin-bottom: 0.1rem;

}

.insight-card h1,
.insight-card h2,
.insight-card h3 {
    color: #333;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
}

.insight-card p {
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;

}

.insight-card code {
    background: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
}

.insight-card .code-block {
    display: block;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.insight-card ul {
    padding-left: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.insight-card li {
    margin-bottom: 0.25rem;

}

.insight-card li:last-child {
    margin-bottom: 0;
}


/* Sidenav toggle button brand color and positioning */
.sidenav-toggle-button {
    position: fixed;
    top: 1.5rem;
    left: 220px;
    background: var(--brand-primary) !important;
    color: #fff !important;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-sidenav-size=condensed] .sidenav-toggle-button {
    position: fixed;
    top: 1.5rem;
    left: 60px; 
    background: var(--brand-primary) !important;
    color: #fff !important;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 0 !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    
}

.sidenav-toggle-button:hover, .sidenav-toggle-button:focus {
    background: var(--brand-secondary) !important;
    color: #fff !important;
    border-color: #fff;
}

.large-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--brand-primary);
    text-align: center;
    height: 270px;
}

@media (max-width: 991.98px) {
    .sidenav-toggle-button {
        left: 0 !important;
    }
}

/* Submit buttons – simplified, no weird descendant selectors */
.btn[type="submit"].btn-outline-primary {
  --bs-btn-bg: var(--brand-primary) !important;
  --bs-btn-border-color: var(--brand-primary) !important;
}

.btn[type="submit"].btn-outline-secondary {
  --bs-btn-bg: var(--brand-secondary) !important;
  --bs-btn-border-color: var(--brand-secondary) !important;
}

/* Links – keep them on the Bronze → Teal axis */
a:not(.btn) {
  color: var(--brand-secondary) !important;
  text-decoration: none !important;
}
a:not(.btn):hover {
  color: var(--brand-primary) !important;
  text-decoration: underline !important;
}

/* =========================================================
   AegentIQ Dashboard Polish
   Paste this at the END of stylesheet.css
   ====================================================== */

/* 1. Overall page background + content spacing
   ------------------------------------------- */
body {
  background: #FAFAFA; /* lighter, crisper for data-heavy views */
}

.page-content {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

/* Optional: keep the very top bar distinct */
.navbar,
.topbar {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* 2. Titles & header hierarchy
   ---------------------------- */
.page-title-box {
  margin-bottom: 1.5rem;
}

.page-title-box .page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-charcoal);
}

/* Section titles: “Aggregate Score”, “Metrics”, “Insights” */
.dashboard-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-charcoal);
  margin-bottom: 0.75rem;
}

/* 3. Generic dashboard cards (charts & panels)
   ------------------------------------------- */
.dashboard-card,
.card.dashboard-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  padding: 1rem 1.25rem;
}

/* Title row inside cards (metric name + icons) */
.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dashboard-card-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--brand-charcoal);
}

/* 4. Aggregate Score card
   ----------------------- */
/* Keep aggregate score important but not dominating */
.aggregate-score-card {
  padding: 0.75rem 1rem;
  height: 340px;
}

.aggregate-score-card .apexcharts-canvas,
.aggregate-score-card .apexcharts-svg {
  height: 320px;   /* was effectively full height */
}


/* Filters row (Hourly / Daily / Weekly & date range) */
.dashboard-filters-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* 5. Metrics grid (4x2)
   --------------------- */
/* Add class="metrics-grid" to the row that wraps the metric cards */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1199.98px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Make metric cards fill their column height */
/* Tight, compact metric cards */
.metrics-row .card.dashboard-card {
  padding: 0.5rem 0.75rem;
  height: 100%;
}

.metrics-row .dashboard-card-title {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

/* Limit chart height inside metric cards */
.metrics-row .apexcharts-canvas,
.metrics-row .apexcharts-svg {
  max-height: 160px;
}



/* 6. Insights panel
   ----------------- */
.insights-panel {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
  padding: 1rem 1.25rem;
  height: 690px;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
}

/* Use this on a column that holds the insights */
.insights-panel.sticky {
  position: sticky;
  top: 90px; /* adjust relative to your topbar height */
}

.insights-panel h4,
.insights-panel h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.insights-panel p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #444444;
}

/* 7. Chart / Apex polish (tooltips, legend)
   ---------------------------------------- */
.apexcharts-tooltip {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.18) !important;
  border: 1px solid #E5E5E5 !important;
  font-size: 0.8rem !important;
}

/* If you show legends inside cards, keep them subtle */
.apexcharts-legend-text {
  font-size: 0.75rem !important;
  color: #666666 !important;
}

/* 8. Buttons & filters on dashboard
   -------------------------------- */
.dashboard-filters-row .btn {
  border-radius: 999px;
  padding: 0.375rem 1.1rem;
  font-size: 0.8rem;
}

.dashboard-filters-row .btn-outline-primary {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.dashboard-filters-row .btn-outline-primary.active,
.dashboard-filters-row .btn-outline-primary:hover {
  background-color: var(--brand-primary);
  color: #fff;
}

/* 9. Small tweaks for dropdowns & selects
   -------------------------------------- */
.dashboard-filters-row .form-select,
.dashboard-filters-row select {
  border-radius: 999px;
  border-color: #D0D5DD;
  font-size: 0.85rem;
  padding-inline: 1rem;
}

/* 10. Misc spacing cleanups
   ------------------------ */
.dashboard-section {
  margin-bottom: 1.5rem;
}

.dashboard-section:last-child {
  margin-bottom: 0;
}

/* Reduce vertical padding on the page */
.page-content {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* Less margin between sections */
.dashboard-section {
  margin-bottom: 1rem;
}

.page-title-box {
  margin-bottom: 0.75rem;
}

/* Heatmap section */
.heatmap-card {
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
}

/* Flatten the heatmap vertically */
.heatmap-card .apexcharts-canvas,
.heatmap-card .apexcharts-svg {
  max-height: 220px;   /* adjust until it looks right */
}

.performance-status-card #performanceStatusPane {
     padding: 12px 14px; 
     height: 250px;
}

.status-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.score-value { font-size: 56px; font-weight: 800; line-height: 1; color: var(--brand-primary) }
.score-subtitle { opacity: .75; margin-top: 6px; font-size: 13px; }

/* New wrapper that puts Health next to Drift/Trend */
.signals-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin-top: 6px;
}

/* Health block sizing so it doesn't squeeze signals */
.health-block{
  min-width: 150px;
  text-align:left;
}

.health-subtitle{
  margin-top:4px;
  font-size:12px;
  opacity:.7;
}

.status-mid{
  display:flex;
  gap:10px;
  flex:1;
  margin-top:0;             /* override previous margin */
  align-items:stretch;
}

/* Make signal cards match height */
.signal{
  flex:1;
  min-width: 120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.health-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
}

/* Optional dot inside health chip */
.health-chip .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: currentColor;
  opacity:.9;
}

/* Responsive: stack health above drift/trend on narrow widths */
@media (max-width: 520px){
  .signals-row{ flex-direction:column; }
  .health-block{ min-width:0; }
}

.status-bottom { display:flex; justify-content:space-between; margin-top: 10px; opacity:.75; font-size: 12px; }

.mini-history { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.mini-history-label { opacity:.7; font-size: 12px; margin-bottom: 6px; }

sup {
    font-size: 0.6em;
    vertical-align: super;
}

.aiq-tooltip {
    font-size: 0.75rem;
    --bs-tooltip-bg: var(--brand-primary) !important;
    --bs-tooltip-color: var(--bs-white);

}