:root {
  --bg-primary: #f5f7fa;
  --bg-card: #ffffff;
  --bg-header: #15191e;
  --border-color: #dbe1e8;
  --border-light: #eaedf1;
  --text-main: #1f2328;
  --text-muted: #656d76;
  --text-dim: #8c959f;
  
  --elastic-blue: #0077cc;
  --elastic-teal: #00bfb3;
  --elastic-pink: #f04e98;
  --elastic-yellow: #f5a623;
  --elastic-purple: #70248a;

  --sev1-color: #e53935;
  --sev2-color: #fb8c00;
  --sev3-color: #039be5;
  --sev4-color: #43a047;
  --sev0-color: #8e24aa;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.top-nav {
  background-color: var(--bg-header);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 16px;
  border-bottom: 1px solid #2d333b;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.elastic-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
}

.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #adb5bd;
}

.crumb-icon {
  background: #343a40;
  color: #20c997;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}

.crumb-current {
  color: #ffffff;
  font-weight: 600;
}

.star-icon {
  color: #f59f00;
  margin-left: 4px;
}

.nav-center {
  flex: 1;
  max-width: 600px;
}

.search-bar-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar-container input {
  width: 100%;
  background: #21262d;
  border: 1px solid #30363d;
  color: #ffffff;
  padding: 6px 32px 6px 34px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.search-bar-container input:focus {
  border-color: var(--elastic-blue);
  background: #161b22;
}

.search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: #8b949e;
}

.clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 12px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tz-toggle-container {
  display: flex;
  align-items: center;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 2px 4px;
  gap: 2px;
}

.tz-label {
  font-size: 11px;
  color: #8b949e;
  font-weight: 600;
  padding: 0 4px;
}

.tz-btn {
  background: transparent;
  border: none;
  color: #8b949e;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tz-btn:hover {
  color: #ffffff;
}

.tz-btn.active {
  background: var(--elastic-blue);
  color: #ffffff;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: #30363d;
  color: #ffffff;
}

.nav-btn i {
  width: 14px;
  height: 14px;
}

.user-badge .avatar {
  background: #0077cc;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Filter Bar */
.filter-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  background: #eef2f6;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-chip strong {
  color: #0b5cab;
}

.chip-neg {
  color: #d9381e;
  font-weight: 700;
  font-size: 11px;
}

.remove-chip {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}

.remove-chip:hover {
  color: var(--sev1-color);
}

.add-filter-btn {
  background: none;
  border: 1px dashed var(--border-color);
  color: var(--elastic-blue);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
}

.add-filter-btn:hover {
  background: #f0f7ff;
}

.time-picker-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.custom-time-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 4px;
}

.custom-time-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.custom-time-input-group label {
  font-weight: 600;
  color: var(--text-color);
}

.datetime-input {
  font-family: inherit;
  font-size: 11px;
  padding: 3px 6px;
}

.time-btn-primary {
  background: var(--elastic-blue);
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-btn-primary:hover {
  background: #005bb5;
}

.quick-preset-select, .interval-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.clock-icon {
  width: 14px;
  height: 14px;
}

select {
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
}

/* KPI Banner */
.kpi-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px 16px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.kpi-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 2px 0;
  color: var(--text-main);
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* Scope marker on KPI cards whose count is deliberately not tied to the
   dashboard filters, so a mismatch against "Total Alerts" is self-explanatory. */
.kpi-scope-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #7b1fa2;
  opacity: 0.75;
  cursor: help;
  white-space: nowrap;
}

.highlight-cyan { color: #00828a; }
.highlight-red { color: #d32f2f; }
.highlight-orange { color: #e65100; }
.highlight-yellow { color: #f57f17; }
.highlight-purple { color: #6a1b9a; }

.highlight-card {
  border-left: 4px solid var(--elastic-purple);
  background: #faf5fc;
}

/* Main Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 16px 16px 16px;
}

.chart-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* A definite height is required, not a min-height. With height:auto the panel
     is sized by its content, and the chart canvas (which Chart.js gives an
     explicit inline height) becomes part of that content. On expanding a panel
     the canvas grows to fill the overlay, and on collapsing it that grown
     height keeps feeding back into the panel and the grid row, so the panel
     never shrinks back. A fixed height plus overflow:hidden makes the canvas
     unable to influence layout in either direction. */
  height: 320px;
  overflow: hidden;
  /* Grid items and flex items both default to min-width:auto. A canvas that
     reports a large intrinsic width would then be able to stretch the whole
     1fr column instead of being clipped by it. */
  min-width: 0;
}

/* Holds the grid cell open while a panel is expanded in the overlay, so the
   remaining panels neither move nor resize. */
.chart-panel-placeholder {
  height: 320px;
  min-width: 0;
  border-radius: 6px;
  border: 1px dashed var(--border-color);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(0, 119, 204, 0.04) 8px,
    rgba(0, 119, 204, 0.04) 16px
  );
}


.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.panel-title-group h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.panel-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.expand-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.expand-btn:hover {
  color: var(--elastic-blue);
}

.chart-container {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  /* The panel now has a definite height, so this resolves against real free
     space and the canvas cannot drive it. */
  min-height: 0;
}

.pie-container {
  max-height: 250px;
  display: flex;
  justify-content: center;
}

.custom-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Special Focus Section */
.focus-section {
  margin: 0 16px 16px 16px;
  background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
  border: 1px solid #d0bfff;
  border-radius: 6px;
  padding: 16px;
}

.focus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.focus-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.focus-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.focus-title h2 {
  font-size: 15px;
  font-weight: 600;
  color: #4a154b;
}

.focus-title code {
  background: #ebd4f7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.focus-icon {
  width: 16px;
  height: 16px;
  color: var(--elastic-purple);
}

.filter-action-btn {
  background: var(--elastic-purple);
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.filter-action-btn:hover {
  background: #501366;
}

.drilldown-count-bar {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.badge-incident {
  background: #e1f5fe;
  color: #0288d1;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
}

.badge-incident:hover {
  text-decoration: underline;
}

.badge-state {
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.badge-open { background: #fff3e0; color: #e65100; }
.badge-resolved { background: #e8f5e9; color: #2e7d32; }

/* Table Section */
.table-section {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin: 0 16px 20px 16px;
  padding: 14px 16px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.table-title-group h3 {
  font-size: 15px;
  font-weight: 600;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.table-btn-outline {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-btn-outline:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.table-btn-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 4px;
  color: #e11d48;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-btn-clear:hover {
  background: #ffe4e6;
}

.table-filters-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.table-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  /* Flex items default to min-width:auto, so this one would otherwise be
     forced open by its widest <select> and stretch the whole toolbar. */
  min-width: 0;
}

.table-filter-item label {
  font-weight: 600;
  color: var(--text-color);
}

.table-filter-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.table-btn-primary {
  background: var(--elastic-blue);
  color: #ffffff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.table-btn-primary:hover {
  background: #005bb5;
}

.table-btn-secondary {
  background: #ffffff;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.table-btn-secondary:hover {
  background: #f1f5f9;
}

.mini-input, .mini-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
}

/* A <select>'s intrinsic width is driven by its widest <option>. Situation and
   service names are long, so without an explicit cap the control grows to the
   full width of its longest label and pushes the document into horizontal
   scroll. Cap it and let the label truncate instead. */
.table-filters-toolbar .mini-select,
.table-filters-toolbar .mini-input {
  max-width: 220px;
  min-width: 0;
}

.table-container {
  overflow-x: auto;
}

.alert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.alert-table th {
  background: #f8fafc;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.alert-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.alert-table tr:hover td {
  background-color: #f8fafc;
}

.sev-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 11px;
}

.sev-1 { background: #ffebee; color: var(--sev1-color); }
.sev-2 { background: #fff3e0; color: var(--sev2-color); }
.sev-3 { background: #e1f5fe; color: var(--sev3-color); }
.sev-4 { background: #e8f5e9; color: var(--sev4-color); }

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.current-page {
  font-weight: bold;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #ffffff;
  border-radius: 8px;
  width: 90%;
  max-width: 750px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-sm { max-width: 400px; }

.modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

.modal-body pre {
  background: #f6f8fa;
  padding: 12px;
  border-radius: 4px;
  font-size: 11px;
  overflow-x: auto;
}

.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-control {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
}

.btn-primary {
  width: 100%;
  background: var(--elastic-blue);
  color: #ffffff;
  border: none;
  padding: 8px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: #005ea6;
}

/* ============================================================
   Chart Panel Expand Overlay
   The panel is moved (portal) into #chart-expand-overlay when
   expanded, so it has ZERO effect on the grid layout.
   ============================================================ */

/* Full-screen backdrop — sits below the overlay panel */
#chart-expand-overlay {
  display: none;            /* hidden by default                */
  position: fixed;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0    */
  z-index: 400;
  background: rgba(15, 18, 23, 0.72);
  padding: 12px 16px;       /* breathing room from viewport edge */
  box-sizing: border-box;
  overflow: hidden;
}

/* When the overlay is active, show it */
#chart-expand-overlay.open {
  display: flex;
  align-items: stretch;     /* panel fills the full padded area  */
}

/* The panel while it lives inside the overlay */
#chart-expand-overlay .chart-panel {
  /* Reset any grid-specific sizing */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  /* Card appearance */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The chart canvas wrapper must fill remaining height */
#chart-expand-overlay .chart-container {
  flex: 1;
  min-height: 0;            /* allow shrink inside flex parent   */
  min-width: 0;
  /* The pie variant carries a max-height from the grid layout that would cap
     the expanded chart, so drop it while the panel is in the overlay. */
  max-height: none;
}