/* =========================================================================
   4-components — the shared pieces every app template already uses:
   alerts, tables, badges, meters, tabs, cards. Flat and light; no bevels.
   ========================================================================= */

/* ---- alert / message -------------------------------------------------- */
.cde-alert {
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}
.cde-alert-success, .cde-alert-info.success { border-left-color: var(--success); background: var(--success-bg); }
.cde-alert-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.cde-alert-error   { border-left-color: var(--error);   background: var(--error-bg); color: var(--error); }
.cde-alert-info    { border-left-color: var(--info);    background: var(--info-bg); }

.messages { margin-bottom: var(--sp-4); }

.empty-state { color: var(--text-muted); font-style: italic; }

/* ---- table -------------------------------------------------------------
   No cell grid: rows are separated by a single rule under each one, and
   the header by a heavier rule. A boxed-in grid is the one thing the
   whole site no longer does. */
.cde-table-wrap { overflow-x: auto; }
.cde-table, table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.cde-table th, .cde-table td,
table th, table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.5em 0.7em;
  text-align: left;
  vertical-align: top;
}
.cde-table th, table th {
  border-bottom-width: 2px;
  font-weight: 700;
  color: var(--text-color);
}
.cde-table tr:nth-child(even) td, table tr:nth-child(even) td {
  /* Tokenised rather than mixed toward #fff: on a dark theme, mixing
     toward white makes the zebra row brighter than the page. */
  background: var(--bg-row-alt);
}

/* ---- badge -------------------------------------------------------------
   A tinted pill. The state reads from the fill and the ink, not from an
   outline. */
.cde-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--bg-row-alt);
  color: var(--text-muted);
}
.cde-badge-ok   { color: var(--success); background: var(--success-bg); }
.cde-badge-warn { color: var(--warning); background: var(--warning-bg); }
.cde-badge-crit { color: var(--error);   background: var(--error-bg); }
.cde-badge-info { color: var(--info);    background: var(--info-bg); }

/* ---- meter -------------------------------------------------------------
   A flat bar. The track is a tint of the ground rather than an outlined
   well, so it reads at a glance without drawing a box. */
.cde-meter {
  position: relative;
  height: 0.7em;
  background: var(--bg-row-alt);
  border-radius: 999px;
  overflow: hidden;
}
.cde-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 999px 0 0 999px;
}

/* ---- tabs ---------------------------------------------------------------
   Was a Motif notebook; now an underline tab bar. Only the wiki still
   uses this — kept minimal. */
.cde-tabs {
  display: flex;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--sp-3);
}
.cde-tabs a {
  padding: 0.4em 0;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.cde-tabs a[aria-selected="true"] {
  color: var(--text-color);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.cde-tabpanel {}
.cde-scroll { overflow: auto; }

/* ---- card ----------------------------------------------------------------
   Replaces the old secondary "window" sections (account actions,
   subdomains, etc.). Separation comes from the fill, not an outline. */
.card {
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}
.card-title { margin-bottom: var(--sp-3); }
.card-body > *:last-child { margin-bottom: 0; }