/* ============================================================
   ECAM.CSS — PERF/MONITORING screen (sahome.fr cockpit)
   Dials inspired by the A350 ECAM engine indications, memo lines,
   services list. Only portal variables (main.css) and B612 fonts.
   The screen frame and the services rows reuse apps.css (.perf-*).
   ============================================================ */

/* ── State colors (Airbus: green normal, amber caution, red warning, white info) ── */
.ecam-normal  { color: var(--green); }
.ecam-caution { color: var(--amber); }
.ecam-warning { color: var(--red); }
.ecam-info    { color: var(--white); }

/* ============================================================
   DIALS
   ============================================================ */
.ecam-gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  padding: .6rem 0 .8rem;
  border-bottom: 1px solid var(--separator);
}

.ecam-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-width: 0;
}

.ecam-dial {
  width: 100%;
  max-width: 170px;
  height: auto;
  overflow: visible;
}

.ecam-dial-scale {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
}

.ecam-dial-zone {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

.ecam-dial-tick {
  stroke: var(--white);
  stroke-width: 2;
}

.ecam-dial-pointer {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.ecam-dial-box {
  fill: black;
  stroke: var(--white);
  stroke-width: 1.5;
}

.ecam-dial-value {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .04em;
}

.ecam-gauge-label {
  font-size: .85rem;
  letter-spacing: .16em;
  color: var(--white);
}

.ecam-gauge-caption {
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   MEMO — ECAM lines: LABEL . . . . . . VALUE
   ============================================================ */
.ecam-memo {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem .4rem;
  border-bottom: 1px solid var(--separator);
  font-size: .85rem;
  letter-spacing: .08em;
}

.ecam-memo-line {
  display: flex;
  align-items: baseline;
  gap: .6em;
}

.ecam-memo-label,
.ecam-memo-value {
  white-space: nowrap;
}

/* Dotted leader between label and value */
.ecam-memo-dots {
  flex: 1;
  min-width: 1.5em;
  border-bottom: 2px dotted currentColor;
  opacity: .6;
  transform: translateY(-.3em);
}

/* ============================================================
   SERVICES — rows from apps.css; red status box for DOWN
   ============================================================ */
.ecam-services {
  padding-top: .4rem;
}

/* Compact rows, wider name column than PERF/NAV (domain names) */
.ecam-services .perf-row {
  padding: .22rem 0;
}

@media (min-width: 641px) {
  .ecam-services .perf-row {
    grid-template-columns: 90px 250px 1fr 100px;
  }
}

.perf-status-box.ecam-down { color: var(--red); }
.perf-row.ecam-down .perf-name { color: var(--red); }

/* Footer update time in red when the data is stale (collector stopped) */
.perf-footer span.ecam-warning {
  color: var(--red);
}

/* The display rules of .perf-list would override the hidden attribute */
.ecam-services[hidden],
.ecam-detail[hidden] {
  display: none;
}

/* ============================================================
   DIALS WITH A DETAIL PAGE — clickable; the selected one has its
   label boxed, like the active FMS tab
   ============================================================ */
.ecam-gauge-link {
  cursor: url('../gfx/cursor.svg') 16 16, pointer;
}

.ecam-gauge-link:hover .ecam-gauge-label,
.ecam-gauge-link:focus-visible .ecam-gauge-label {
  color: var(--accent);
}

.ecam-gauge-link:focus-visible {
  outline: 1px dotted var(--accent);
  outline-offset: 2px;
}

.ecam-gauge-label {
  border: 1px solid transparent;
  padding: .05rem .35rem;
}

.ecam-gauge-link.is-selected .ecam-gauge-label {
  border-color: var(--white);
}

/* ============================================================
   DETAIL PAGE — generic table, rows colored by state
   ============================================================ */
.ecam-detail {
  padding-top: .5rem;
}

.ecam-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .4rem .4rem;
  border-bottom: 1px solid var(--white);
}

.ecam-detail-title {
  font-size: .9rem;
  letter-spacing: .16em;
  color: var(--white);
}

.ecam-detail-close {
  padding: .4rem .8rem;
  font-size: .7rem;
  letter-spacing: .14em;
}

/* Long lists scroll inside the screen, like the F-PLN body */
.ecam-detail-scroll {
  overflow: auto;
  max-height: 24rem;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

/* No gaps between cells: spacing is cell padding, so a row background is continuous */
.ecam-detail-table {
  display: grid;
  min-width: 520px;
  padding: .5rem 0;
  font-size: .8rem;
  letter-spacing: .06em;
}

.ecam-detail-cell,
.ecam-detail-col {
  padding: .15rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ecam-detail-col {
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--text-muted);
  padding-bottom: .35rem;
}

/* Rows: wrappers without a box (display: contents); hover and selection style their cells */
.ecam-detail-row {
  display: contents;
  cursor: url('../gfx/cursor.svg') 16 16, pointer;
}

.ecam-detail-row:hover .ecam-detail-cell {
  background: rgba(0, 180, 255, .06);     /* same as .perf-row:hover */
}

/* Selected row: amber text, like a selected line on the FMS */
.ecam-detail-row.is-selected .ecam-detail-cell {
  color: var(--amber);
  font-weight: 700;
  background: rgba(211, 200, 59, .10);
}

/* The PERF screen never grows wider than its column: a table that is still too wide
   scrolls inside .ecam-detail-scroll instead of pushing the page (main.css hides
   the horizontal overflow of the page, which would cut the screen) */
#panel-perf .perf-screen {
  min-width: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ecam-gauges { gap: .2rem; }
  .ecam-memo   { font-size: .7rem; }
  .ecam-gauge-label   { font-size: .7rem; }
  .ecam-gauge-caption { font-size: .5rem; }

  /* Detail pages: fewer columns (narrow_hidden), smaller text, no minimum width */
  .ecam-detail-table {
    min-width: 0;
    font-size: .68rem;
    letter-spacing: .02em;
  }
  .ecam-detail-cell,
  .ecam-detail-col { padding-left: .35rem; padding-right: .35rem; }
  .ecam-detail-col   { font-size: .55rem; letter-spacing: .08em; }
  .ecam-detail-title { font-size: .75rem; }
}