/* ==========================================================================
   IBDverse Locus2CelltypeExplorer custom styles
   --------------------------------------------------------------------------
   Drop-in branding layer. Hex codes and font names below are PLACEHOLDERS
   chosen to roughly match https://www.ibdverse.info/ (dark cosmic theme,
   white serif/sans logotype on indigo). Replace with the official IBDverse
   brand-guide values when supplied.
   ========================================================================== */

:root {
  /* Brand palette (placeholders — replace with official values) */
  --ibdv-bg-deep:   #0b1026;   /* deep cosmic indigo */
  --ibdv-bg-panel:  #141a3a;   /* card background */
  --ibdv-accent:    #6a8cff;   /* primary action / link */
  --ibdv-accent-2:  #b18cff;   /* secondary highlight */
  --ibdv-text:      #f5f6fa;
  --ibdv-text-mute: #b9c0d8;
  --ibdv-border:    #2a3258;
  --ibdv-good:      #5ad3a4;
  --ibdv-warn:      #ffce6e;

  /* Brand fonts (placeholders — supply .woff2 files in /www/fonts/) */
  --ibdv-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system,
                       'Segoe UI', sans-serif;
  --ibdv-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Page chrome ---- */
body {
  background: var(--ibdv-bg-deep) !important;
  color: var(--ibdv-text);
  font-family: var(--ibdv-font-body);
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4, .navbar-brand {
  font-family: var(--ibdv-font-display);
  letter-spacing: -0.01em;
}

a, a:visited { color: var(--ibdv-accent); }
a:hover      { color: var(--ibdv-accent-2); }

/* ---- Navbar with IBDverse logo ---- */
.navbar {
  background: linear-gradient(90deg,
              var(--ibdv-bg-deep) 0%,
              var(--ibdv-bg-panel) 100%) !important;
  border-bottom: 1px solid var(--ibdv-border);
}
.navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  color: var(--ibdv-text) !important;
  font-weight: 600;
}
.navbar-brand img {
  height: 28px;
  width: auto;
}
.navbar-nav .nav-link {
  color: var(--ibdv-text-mute) !important;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--ibdv-text) !important;
}

/* ---- Cards & sidebar ---- */
.card, .bslib-card {
  background: var(--ibdv-bg-panel);
  border: 1px solid var(--ibdv-border);
  color: var(--ibdv-text);
}
.card-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--ibdv-border);
  font-weight: 600;
}
.bslib-sidebar-layout > .sidebar {
  background: var(--ibdv-bg-panel);
  border-right: 1px solid var(--ibdv-border);
}

/* ---- Value boxes ---- */
.value-box {
  background: var(--ibdv-bg-panel) !important;
  border: 1px solid var(--ibdv-border);
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--ibdv-accent);
  border-color: var(--ibdv-accent);
}
.btn-primary:hover {
  background-color: var(--ibdv-accent-2);
  border-color: var(--ibdv-accent-2);
}
.btn-outline-primary {
  color: var(--ibdv-accent);
  border-color: var(--ibdv-accent);
}
.btn-outline-primary:hover {
  background-color: var(--ibdv-accent);
  color: var(--ibdv-bg-deep);
}

/* ---- Form controls (sidebar inputs) ---- */
.form-control,
.form-select,
.selectize-input,
.selectize-dropdown {
  background: var(--ibdv-bg-deep) !important;
  color: var(--ibdv-text) !important;
  border-color: var(--ibdv-border) !important;
}
.selectize-input.focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--ibdv-accent) !important;
  box-shadow: 0 0 0 0.15rem rgba(106, 140, 255, 0.25) !important;
}
.irs--shiny .irs-bar,
.irs--shiny .irs-handle > i:first-child {
  background: var(--ibdv-accent);
  border-color: var(--ibdv-accent);
}

/* ---- DataTable ---- */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background-color: rgba(255, 255, 255, 0.02);
}
table.dataTable thead th,
table.dataTable thead td {
  border-bottom: 1px solid var(--ibdv-border);
  color: var(--ibdv-text);
}
table.dataTable tbody td { color: var(--ibdv-text); }
table.dataTable tbody tr:hover {
  background-color: rgba(106, 140, 255, 0.08) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--ibdv-bg-deep);
  color: var(--ibdv-text);
  border: 1px solid var(--ibdv-border);
}

/* ---- Footer ---- */
.ibdv-footer {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--ibdv-border);
  background: var(--ibdv-bg-panel);
  color: var(--ibdv-text-mute);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ibdv-footer a { color: var(--ibdv-accent); }

/* ---- Loading overlays (preserve existing behaviour) ---- */
.plot-panel { position: relative; }
.plot-loading-indicator {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(11, 16, 38, 0.85);
  color: var(--ibdv-text);
  font-weight: 600;
  z-index: 5;
}
.plot-panel .html-widget-output.recalculating ~ .plot-loading-indicator {
  display: flex;
}

/* ---- Plot panels: let SVG fill width, no inner scrollbar ---- */
.plot-panel { overflow: visible; width: 100%; }
.plot-panel .girafe_container_std,
.plot-panel .girafe,
.plot-panel .ggiraph-svg-container { width: 100% !important; height: auto !important; overflow: visible !important; }
.plot-panel svg { width: 100% !important; height: auto !important; display: block; }
.bslib-card .card-body { overflow: visible; }