/* mastercdn-xanalyse — Performance page styles.
   Loaded after app.css, which supplies the palette, panels and chart classes. */

/* ---- filter panel reuses app.css .filter-panel; only the width differs -- */

#perf-filter-panel .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

#perf-filter-panel .combo-group {
  flex: 1 1 200px;
  min-width: 180px;
}

/* ---- panel meta line --------------------------------------------------- */

.perf-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}

/* ---- horizontal bar chart (group ranking) ------------------------------ */

.perf-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.perf-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr max-content;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.perf-bar-name {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf-bar-track {
  position: relative;
  height: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.perf-bar-fill {
  height: 100%;
  /* Bar colour plus a texture: the fill carries a repeating diagonal stripe
     so the ranking is readable without relying on colour alone (WCAG 1.4.1). */
  background-color: #ff7b72;
  background-image: repeating-linear-gradient(
    45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 7px);
}

.perf-bar-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  min-width: 86px;
}

.perf-bar-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted2);
}

/* ---- slow request table ------------------------------------------------ */

.perf-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}

.perf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.perf-table th,
.perf-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.perf-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
}

.perf-table td {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg);
}

.perf-table .num-col,
.perf-table td.num {
  text-align: right;
  white-space: nowrap;
}

.perf-table tbody tr:hover {
  background: var(--surface);
}

.perf-uri {
  /* Long URIs must not force the table wider than the panel. */
  word-break: break-all;
  color: var(--muted);
  max-width: 34ch;
}

.perf-code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-size: 11px;
}

.perf-code--ok { color: var(--ok); border-color: #2ea04366; }
.perf-code--err { color: #ff7b72; border-color: #ff7b7266; }

/* An origin time of 0/null means the origin did not answer; show the marker
   rather than a bare 0, which would read as "instantaneous". */
.perf-null {
  color: var(--muted2);
  font-style: italic;
}

/* ---- empty / error state reuse ----------------------------------------- */

.perf-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 10px 0;
}

@media (max-width: 640px) {
  .perf-bar-row { grid-template-columns: 1fr; gap: 3px; }
  .perf-bar-value { text-align: left; }
}

/* ---- global health summary bar ----------------------------------------- */

.perf-health-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg);
}

.health-dot {
  font-size: 14px;
  line-height: 1;
}

.health-dot--ok       { color: #3fb950; }
.health-dot--warn     { color: #d29922; }
.health-dot--critical { color: #f85149; }

/* ---- diagnosis panel --------------------------------------------------- */

#perf-diag-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

/* ---- diagnosis panel rows ------------------------------------------- */

.diag-row {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
}

/* warn card: amber left accent + subtle raised surface */
.diag-row--warn {
  background: rgba(210, 153, 34, 0.07);
  border: 1px solid rgba(210, 153, 34, 0.25);
  border-left: 3px solid #d29922;
  padding: 8px 10px;
  margin-bottom: 6px;
}

/* ok rows: compact, no card, grouped below warns */
.diag-row--ok {
  padding: 3px 6px;
  margin-bottom: 2px;
}

/* critical card: red accent */
.diag-row--critical {
  background: rgba(248, 81, 73, 0.07);
  border: 1px solid rgba(248, 81, 73, 0.25);
  border-left: 3px solid #f85149;
  padding: 8px 10px;
  margin-bottom: 6px;
}

/* main line: icon + text + button on one row */
.diag-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diag-icon {
  flex-shrink: 0;
  font-size: 13px;
  width: 16px;
  text-align: center;
  line-height: 1;
}

.diag-icon--ok       { color: #3fb950; }
.diag-icon--info     { color: #79c0ff; }
.diag-icon--warn     { color: #d29922; }
.diag-icon--critical { color: #f85149; }

.diag-text {
  flex: 1;
  color: var(--fg);
  font-size: 13px;
}

/* ok rows: text slightly muted, smaller */
.diag-row--ok .diag-text {
  font-size: 12px;
  color: var(--muted, #8b949e);
}

/* highlighted values inside diagnosis text (ms, × multiplier) */
.diag-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.diag-row--warn .diag-val  { color: #e3b341; }   /* amber — warn level */
.diag-row--critical .diag-val { color: #f85149; } /* red — critical */
.diag-row--ok .diag-val    { color: #3fb950; }    /* green — healthy */

/* annotation: below the main line, indented */
.diag-annot {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted, #8b949e);
  margin-top: 5px;
  padding-left: 24px;
}

/* ok rows: annotation hidden until hover — keeps panel compact */
.diag-row--ok .diag-annot {
  display: none;
}
.diag-row--ok:hover .diag-annot {
  display: block;
}

/* divider between warn block and ok block */
.diag-section-divider {
  height: 1px;
  background: var(--line, #272e37);
  margin: 8px 0;
}

/* action button: filled amber-tinted for warn, ghost for ok */
.diag-action-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.diag-row--warn .diag-action-btn,
.diag-row--critical .diag-action-btn {
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.5);
  color: #e3b341;
}

.diag-row--warn .diag-action-btn:hover,
.diag-row--critical .diag-action-btn:hover {
  background: rgba(210, 153, 34, 0.28);
  border-color: #e3b341;
  color: #f0c060;
}

.diag-row--ok .diag-action-btn {
  background: transparent;
  border: 1px solid var(--line, #272e37);
  color: var(--muted, #8b949e);
}

.diag-row--ok .diag-action-btn:hover {
  border-color: #79c0ff;
  color: #79c0ff;
}

/* ---- slow request table hint column ------------------------------------ */

.perf-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.perf-hint--cdn-timeout { color: #f85149; }
.perf-hint--origin-slow { color: #f0883e; }
.perf-hint--svc-error   { color: #d29922; }
.perf-hint--anomaly     { color: var(--muted2); }
.perf-hint--cdn-overhead{ color: var(--fg); }

/* ---- low-traffic bar group --------------------------------------------- */

.perf-bar-row--low-traffic .perf-bar-fill {
  opacity: 0.45;
}

.perf-bar-row--low-traffic .perf-bar-track {
  border-style: dashed;
}

.perf-bar-low-tag {
  font-size: 10px;
  color: #d29922;
  white-space: nowrap;
  margin-left: 4px;
}

/* ---- toast notification ----------------------------------------------- */

.perf-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1c2128;
  border: 1px solid #d29922;
  color: #e3b341;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 9999;
  white-space: nowrap;
}

.perf-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}