/* Cassandra — panel chrome, tables, status LEDs, utility colour classes. */

/* --- Panels ----------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
.panel-header {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-size: 11px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-header .title { color: var(--text); font-weight: 700; }
.panel-header .title::before { content: "■ "; color: var(--accent); }
.panel-header .meta  { color: var(--dim); }
.panel-body { padding: 6px 0; }
.panel-body--scroll { max-height: 70vh; overflow-y: auto; }

/* --- Tables ----------------------------------------------------------- */

table.dense {
  width: 100%;
  border-collapse: collapse;
}
table.dense th, table.dense td {
  padding: 4px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--surface-2);
  white-space: nowrap;
}
table.dense th {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  background: var(--surface-2);
}
table.dense th.num,
table.dense td.num { text-align: right; }
table.dense td.label { color: var(--text); }
table.dense td.label.has-tip,
table.dense td[title] {
  cursor: help;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 40%, transparent);
  border-bottom-width: 1px;
}
.pf-name.has-tip {
  cursor: help;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 50%, transparent);
}
table.dense tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.pos { color: var(--positive); }
.neg { color: var(--negative); }
.neu { color: var(--muted); }

/* --- Status LEDs ------------------------------------------------------ */

.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.led.ok      { background: var(--positive); box-shadow: 0 0 6px var(--positive); }
.led.warn    { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.led.err     { background: var(--negative); box-shadow: 0 0 6px var(--negative); }
.led.idle    { background: var(--dim); }

/* --- Empty / loading state ------------------------------------------- */

.empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.htmx-indicator {
  display: inline-block;
  color: var(--dim);
  opacity: 0;
  transition: opacity 0.2s;
}
.htmx-request .htmx-indicator { opacity: 1; }


/* --- Mobile (≤480px) -------------------------------------------------- */

@media (max-width: 480px) {
  /* Force panels and their bodies to honour the parent grid cell
     width, even when descendants (tables, code blocks, long URLs)
     have intrinsic widths that exceed the viewport. min-width:0 is
     the magic that lets flex/grid items shrink past min-content;
     max-width:100% caps the box itself. */
  .panel { min-width: 0; max-width: 100%; }
  .panel-body { min-width: 0; max-width: 100%; }

  .panel-header {
    padding: 8px 10px;
    gap: 8px;
  }
  .panel-header .title { font-size: 12px; }
  .panel-header .meta { font-size: 10px; }
  .panel-body { padding: 4px 6px; }
  /* Scroll panels lose some vertical room on small screens so the
     stacked layout doesn't push log/news off the fold. */
  .panel-body--scroll { max-height: 60vh; }

  /* Tables: dropping white-space:nowrap lets long Symbol / Label cells
     wrap to a second line instead of forcing the table wider than the
     panel. Numeric cells stay nowrap since "−12.34%" wrapping would be
     unreadable. */
  table.dense { table-layout: auto; }
  table.dense th, table.dense td { white-space: normal; }
  table.dense .num { white-space: nowrap; }

  /* Final safety net: if a descendant still insists on being wider
     than the panel (e.g. a wide pre/code block in the AI output),
     scroll it horizontally inside the panel rather than blowing the
     whole page out. */
  .panel-body pre,
  .panel-body code { max-width: 100%; overflow-x: auto; }
}