/* ===== Base ===== */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

/* ===== Design tokens ===== */
:root {
  --bg: #ffffff;
  --surface: #F8FAFC;   /* header/table header */
  --text: #0f172a;      /* slate-900 */
  --muted: #475569;     /* slate-600 */
  --accent: #2563EB;    /* app accent (not used for controls below) */
  --border: #e5e7eb;    /* gray-200 */

  --row-odd: #f6f9fc;
  --row-hover: #eef4ff;
  --row-selected: #e8f0ff;

  /* Unified control colors (download, expand, plotly icons) */
  --control-color: var(--muted);
  --control-hover: #334155;   /* darker slate */
  --control-border: #e5e7eb;  /* chip outline */
}

/* ===== Headings above grids ===== */
#active-faults-title,
#main h5 { color: var(--text); }

/* ===== AG Grid Alpine theme refresh ===== */
.ag-theme-alpine {
  --ag-background-color: var(--bg);
  --ag-odd-row-background-color: var(--row-odd);
  --ag-header-background-color: var(--surface);
  --ag-foreground-color: var(--text);
  --ag-header-foreground-color: var(--muted);
  --ag-row-hover-color: var(--row-hover);
  --ag-selected-row-background-color: var(--row-selected);
  --ag-border-color: var(--border);
}
.ag-theme-alpine .ag-header { font-weight: 500; }
.ag-theme-alpine .ag-row { font-size: 0.92rem; }

/* ===== Expand button sizing & color (charts + tables) ===== */
button.expand-btn,
button.expand-btn.btn,
button.expand-btn.btn-outline-secondary {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
button.expand-btn i { font-size: 18px !important; color: var(--control-color) !important; }

/* Overlay-style expand (chart corner button) */
button.expand-btn.btn-outline-secondary {
  border-color: var(--control-color) !important;
  color: var(--control-color) !important;
}
button.expand-btn.btn-outline-secondary:hover {
  background: var(--control-color) !important;
  color: #fff !important;
}
button.expand-btn.btn-outline-secondary:hover i { color: #fff !important; }

/* Link-style expand (table headers) */
#btn-expand-main, #btn-expand-faults { color: var(--control-color) !important; }
#btn-expand-main i, #btn-expand-faults i { color: var(--control-color) !important; }
#btn-expand-main:hover i, #btn-expand-faults:hover i { color: var(--control-hover) !important; }

/* ===== Download buttons (table headers) ===== */
#btn-dl-main, #btn-dl-faults { color: var(--control-color) !important; }
#btn-dl-main i, #btn-dl-faults i { color: var(--control-color) !important; }
#btn-dl-main:hover i, #btn-dl-faults:hover i { color: var(--control-hover) !important; }

/* ===== Plotly modebar — normal (non-fullscreen) charts ===== */
/* Place modebar in wrapper's top padding, top-left */
.plot-wrap { overflow: visible; }
.plot-wrap .js-plotly-plot .modebar {
  top: -48px !important;      /* or 8px if you prefer inside the plot */
  left: 72px !important;      /* offset so it doesn't overlap your expand button */
  right: auto !important;
  z-index: 10;
}
.plot-wrap .modebar-group {
  background: #fff !important;
  border: 1px solid var(--control-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.plot-wrap .modebar-btn .icon path { fill: var(--control-color) !important; }
.plot-wrap .modebar-btn:hover .icon path,
.plot-wrap .modebar-btn.active .icon path { fill: var(--control-hover) !important; }
.plot-wrap .modebar-btn.disabled .icon path { fill: #cbd5e1 !important; }

/* ===== Plotly modebar — fullscreen overlay ===== */
/* Keep it inside the plot so tooltips never cause scrollbars */
#overlay .js-plotly-plot .modebar {
  top: -2px !important;
  left: 12px !important;
  right: auto !important;
  z-index: 10;
}
#overlay .modebar-group {
  background: #fff !important;
  border: 1px solid var(--control-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
#overlay .modebar-btn .icon path { fill: var(--control-color) !important; }
#overlay .modebar-btn:hover .icon path,
#overlay .modebar-btn.active .icon path { fill: var(--control-hover) !important; }

/* Ensure fullscreen content fills its slot below the toolbar row */
#overlay #overlay-body .ag-theme-alpine { height: 100% !important; }
#overlay #overlay-body .js-plotly-plot { height: 100% !important; }

/* ===== Fullscreen close “X” ===== */
#overlay .overlay-close {
  width: 42px; height: 42px;
  border-radius: 9999px;
  background: rgba(15,23,42,.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
#overlay .overlay-close:hover { background: rgba(15,23,42,1); cursor: pointer; }

/* === Centered link ribbon inside bubble padding (fixed height, no reflow) === */
.plot-wrap #link-panel{
  position: absolute;
  top: 6px;                     /* sits within the plot-wrap top padding */
  left: 50%;
  transform: translateX(-50%);
  height: 28px;                 /* fixed height prevents layout shake */
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9;                   /* below expand button/modebar (which are 10) */
  max-width: calc(100% - 200px);/* leave room for expand + modebar */
  overflow: hidden;             /* truncate if long */
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
}
.plot-wrap #link-panel .bubble-title{
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}
.plot-wrap #link-panel .btn{
  border-radius: 8px;
  padding: 4px 10px;            /* compact chip style */
  font-weight: 600;
  letter-spacing: .02em;
}