/*
 * COSMOS component kit — v1, created 11/08/2026.
 * Companion to cosmos-shell.css (chrome only) and cosmos-picker.css (the
 * first "beyond chrome" component). This is the shared visual language for
 * the workspace patterns duplicated across every tool once it drifted
 * enough to be worth unifying: cards, tables, badges/status pills, and
 * alerts/flash messages. Buttons stay in cosmos-shell.css's own Bootstrap
 * bridge (extended alongside this file) rather than living here.
 *
 * Depends on cosmos-shell.css's token set (--cosmos-*, --mrs-*) — load
 * cosmos-shell.css first, this file second, cosmos-picker.css third (order
 * doesn't matter functionally since none of them redeclare each other's
 * classes, but this is the documented load order in each app's layout).
 *
 * Deliberately opt-in, not a blanket Bootstrap override: no bare `.card`,
 * `.table`, or `.alert` rule exists here. Every view in scope gets a
 * `cosmos-*` class added file-by-file. A blanket override would silently
 * reskin the shared internal HR/staff-portal scaffold (holidays, passwords,
 * admin user management) that this pass deliberately excludes — see
 * design/README.md's "Component kit" section for that scope decision.
 *
 * Naming: cosmos-<component> for the container, __<part> for children,
 * --<variant> for state/variant — same BEM-ish scheme as cosmos-picker.css,
 * so the whole kit reads as one family. .cosmos-badge's variant set and
 * look are a straight generalisation of .cosmos-picker__status/__badge —
 * kept as separate declarations (not merged into one shared rule) so the
 * picker kit's markup contract doesn't shift underneath it mid-flight.
 */

/* ---------------------------------------------------------------- */
/* Card                                                              */
/* ---------------------------------------------------------------- */

.cosmos-card {
  background: var(--cosmos-surface-raised);
  border: 1px solid var(--cosmos-rule);
  border-radius: var(--cosmos-radius);
}

.cosmos-card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cosmos-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cosmos-card__title {
  font-family: var(--cosmos-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cosmos-ink);
}

.cosmos-card__eyebrow {
  font-family: var(--cosmos-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cosmos-ink-secondary);
}

.cosmos-card__body {
  padding: 1.25rem;
}

/* A horizontal row within a card list — the shape ContentGuard's/Winston's
   client dashboards actually need (status dot, name+id block, right-aligned
   action), not a full interactive picker with its own fetch/event logic. */
.cosmos-directory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--cosmos-radius);
  border: 1px solid var(--cosmos-rule);
  background: var(--cosmos-surface-raised);
  color: var(--cosmos-ink);
  text-decoration: none;
}

.cosmos-directory-row:hover {
  border-color: var(--cosmos-accent);
  background: color-mix(in srgb, var(--cosmos-surface-raised) 88%, var(--cosmos-accent));
}

.cosmos-directory-row__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cosmos-radius-round);
  flex-shrink: 0;
}

.cosmos-directory-row__dot--active { background: var(--mrs-light-teal); }
.cosmos-directory-row__dot--inactive { background: var(--cosmos-ink-secondary); }

.cosmos-directory-row__main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cosmos-directory-row__name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cosmos-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cosmos-directory-row__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--cosmos-ink-secondary);
}

.cosmos-directory-row__meta {
  font-size: 0.72rem;
  color: var(--cosmos-ink-secondary);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Table                                                             */
/* ---------------------------------------------------------------- */

.cosmos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--cosmos-ink);
}

.cosmos-table thead th {
  text-align: left;
  font-family: var(--cosmos-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cosmos-ink-secondary);
  border-bottom: 2px solid var(--cosmos-rule);
  padding: 0.6rem 0.75rem;
}

.cosmos-table tbody td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--cosmos-rule);
}

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

.cosmos-table--compact td,
.cosmos-table--compact th {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------- */
/* Badge / status pill                                               */
/* ---------------------------------------------------------------- */

.cosmos-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--cosmos-font-body);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.cosmos-badge--ready {
  color: color-mix(in srgb, var(--mrs-dark-teal) 85%, black);
  background: color-mix(in srgb, var(--mrs-light-teal) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--mrs-light-teal) 45%, transparent);
}

.cosmos-badge--muted {
  color: var(--cosmos-ink-secondary);
  background: var(--cosmos-surface-muted);
  border: 1px solid var(--cosmos-rule);
}

.cosmos-badge--warn {
  color: color-mix(in srgb, var(--mrs-orange) 70%, black);
  background: color-mix(in srgb, var(--mrs-orange) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mrs-orange) 40%, transparent);
}

.cosmos-badge--danger {
  color: #fff;
  background: color-mix(in srgb, var(--mrs-flamingo-pink) 90%, black);
  border: 1px solid var(--mrs-flamingo-pink);
}

/* ---------------------------------------------------------------- */
/* Alert / flash message                                             */
/* ---------------------------------------------------------------- */

.cosmos-alert {
  border-radius: var(--cosmos-radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.cosmos-alert--success {
  color: color-mix(in srgb, var(--mrs-dark-teal) 80%, black);
  background: color-mix(in srgb, var(--mrs-light-teal) 12%, transparent);
  border-color: color-mix(in srgb, var(--mrs-light-teal) 35%, transparent);
}

.cosmos-alert--info {
  color: color-mix(in srgb, var(--mrs-bondi-blue) 75%, black);
  background: color-mix(in srgb, var(--mrs-bondi-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--mrs-bondi-blue) 35%, transparent);
}

.cosmos-alert--warning {
  color: color-mix(in srgb, var(--mrs-orange) 55%, black);
  background: color-mix(in srgb, var(--mrs-orange) 10%, transparent);
  border-color: color-mix(in srgb, var(--mrs-orange) 35%, transparent);
}

.cosmos-alert--danger {
  color: #fff;
  background: color-mix(in srgb, var(--mrs-flamingo-pink) 85%, black);
  border-color: var(--mrs-flamingo-pink);
}

/* Dark-theme adjustment: the light-mode mixes above lean on "black" as the
   mix partner for readable text on a light chip; on the dark content theme
   that same mix reads too dark against the darker --cosmos-surface-raised.
   Recompute against white instead so contrast holds in both themes. */
:root[data-theme="dark"] .cosmos-badge--ready,
:root[data-theme="dark"] .cosmos-alert--success {
  color: color-mix(in srgb, var(--mrs-light-teal) 85%, white);
}

:root[data-theme="dark"] .cosmos-badge--warn,
:root[data-theme="dark"] .cosmos-alert--warning {
  color: color-mix(in srgb, var(--mrs-warm-yellow) 80%, white);
}

:root[data-theme="dark"] .cosmos-alert--info {
  color: color-mix(in srgb, var(--mrs-bondi-blue) 85%, white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cosmos-badge--ready,
  :root:not([data-theme="light"]) .cosmos-alert--success {
    color: color-mix(in srgb, var(--mrs-light-teal) 85%, white);
  }
  :root:not([data-theme="light"]) .cosmos-badge--warn,
  :root:not([data-theme="light"]) .cosmos-alert--warning {
    color: color-mix(in srgb, var(--mrs-warm-yellow) 80%, white);
  }
  :root:not([data-theme="light"]) .cosmos-alert--info {
    color: color-mix(in srgb, var(--mrs-bondi-blue) 85%, white);
  }
}