/* AlarmBuilt Design System — Components v0 · 2026-10-30
 * Place at src/api/ui/design-system/components.css
 * Depends on tokens.css (include tokens.css first in <head>)
 * Convention: component classes prefixed `ap-` (AlarmBuilt).
 * Modifiers follow BEM-ish __element and --modifier naming.
 */

/* ==================== Top nav ==================== */
.ap-nav {
  height: 60px;
  background: var(--color-slate-900);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-8);
  flex-shrink: 0;
}
.ap-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ap-nav__brand-mark {
  width: 28px;
  height: 28px;
  background: var(--color-brand-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-nav__brand-mark-dot {
  width: 10px;
  height: 10px;
  background: var(--color-brand-accent);
  border-radius: var(--radius-full);
}
.ap-nav__logo {
  display: block;
  width: auto;
}
.ap-nav__brand-name {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-tight);
}
.ap-nav__links {
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-2);
}
.ap-nav__link {
  padding: var(--space-2) 14px;
  color: var(--color-slate-400);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.ap-nav__link:hover { color: var(--color-text-inverse); }
.ap-nav__link--active {
  color: var(--color-text-inverse);
  background: rgba(94, 163, 240, 0.14);
}
.ap-nav__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ap-nav__user-name { color: var(--color-slate-400); font-size: var(--font-size-sm); }
.ap-nav__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
/* B-10: the avatar links to the user's profile. */
.ap-nav__user-link { display: flex; text-decoration: none; border-radius: var(--radius-full); }
a.ap-nav__user-link[href]:hover .ap-nav__user-avatar,
a.ap-nav__user-link[href]:focus-visible .ap-nav__user-avatar { box-shadow: 0 0 0 2px var(--color-slate-400); }

/* ADR-052: sign out, beside the avatar. */
.ap-nav__signout {
  border: 1px solid var(--color-slate-600);
  background: transparent;
  color: var(--color-slate-300);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.ap-nav__signout:hover { color: var(--color-text-inverse); border-color: var(--color-slate-400); }
.ap-nav__signout:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ==================== Buttons ==================== */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
}
.ap-btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.ap-btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}
.ap-btn--primary:hover { background: var(--color-navy-700); }

.ap-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-slate-700);
}
.ap-btn--secondary:hover {
  border-color: var(--color-border-hover);
  background: var(--color-slate-50);
}

.ap-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.ap-btn--ghost:hover { background: var(--color-slate-100); }

.ap-btn--danger {
  background: var(--color-urgent-text);
  color: var(--color-text-inverse);
}

/* ==================== Card ==================== */
.ap-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.ap-card--raised { box-shadow: var(--shadow-md); border: none; }
.ap-card--muted { background: var(--color-surface-sunken); }

/* ==================== Attention pill ==================== */
.ap-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.ap-pill--urgent  { background: var(--color-urgent-bg);  color: var(--color-urgent-text); }
.ap-pill--soon    { background: var(--color-soon-bg);    color: var(--color-soon-text); }
.ap-pill--monitor { background: var(--color-monitor-bg); color: var(--color-monitor-text); }
.ap-pill--fine    { background: var(--color-fine-bg);    color: var(--color-fine-text); }

/* ==================== MHS score circle ==================== */
.ap-mhs {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}
.ap-mhs--urgent  { background: var(--color-urgent-bg);  color: var(--color-urgent-text); }
.ap-mhs--soon    { background: var(--color-soon-bg);    color: var(--color-soon-text); }
.ap-mhs--monitor { background: var(--color-monitor-bg); color: var(--color-monitor-text); }
.ap-mhs--fine    { background: var(--color-fine-bg);    color: var(--color-fine-text); }
.ap-mhs--lg {
  width: 76px;
  height: 76px;
  font-size: var(--font-size-2xl);
  border: 3px solid currentColor;
}

/* ==================== Stat tile ==================== */
.ap-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ap-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}
.ap-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.ap-stat__value {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  margin-top: 2px;
}

/* ==================== Form controls ==================== */
.ap-input,
.ap-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  font-size: var(--font-size-base);
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-sunken);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ap-input:focus,
.ap-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--color-surface);
}
.ap-select { background: var(--color-surface); padding: 7px 10px; font-size: var(--font-size-sm); color: var(--color-slate-700); }

.ap-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
  margin-bottom: var(--space-1);
}

/* ==================== Table / alarm row ==================== */
.ap-table {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ap-table__header,
.ap-table__row {
  display: grid;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  align-items: center;
}
.ap-table__header {
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.ap-table__row { font-size: var(--font-size-base); color: var(--color-text-primary); text-decoration: none; }
.ap-table__row:last-child { border-bottom: none; }
.ap-table__row:hover { background: var(--color-slate-50); }
.ap-table__cell--time { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

/* ==================== State chip (NEW / ACK / RESOLVED) ==================== */
.ap-state {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
}
.ap-state--new      { background: var(--color-state-new-bg);      color: var(--color-state-new-text); }
.ap-state--ack      { background: var(--color-state-ack-bg);      color: var(--color-state-ack-text); }
.ap-state--resolved { background: var(--color-state-resolved-bg); color: var(--color-state-resolved-text); }

/* ==================== Badge (neutral metadata) ==================== */
.ap-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-slate-100);
  color: var(--color-slate-600);
}

/* ==================== Breadcrumb ==================== */
.ap-breadcrumb {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.ap-breadcrumb a {
  color: var(--color-text-link);
  text-decoration: none;
}
.ap-breadcrumb a:hover { text-decoration: underline; }
.ap-breadcrumb__separator {
  margin: 0 var(--space-2);
  color: var(--color-slate-300);
}

/* ==================== Stepper ==================== */
.ap-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ap-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ap-stepper__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}
.ap-stepper__number--complete { background: var(--color-fine-bg); color: var(--color-fine-text); }
.ap-stepper__number--active   { background: var(--color-brand-primary); color: var(--color-text-inverse); }
.ap-stepper__number--pending  { background: var(--color-slate-100); color: var(--color-slate-400); }
.ap-stepper__line {
  width: 60px;
  height: 1px;
  background: var(--color-slate-300);
}
.ap-stepper__label {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}
.ap-stepper__label--pending { color: var(--color-slate-400); }

/* ==================== Modal ==================== */
.ap-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-surface-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.ap-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 560px;
  width: calc(100% - 48px);
  box-shadow: var(--shadow-lg);
}
.ap-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3);
}

/* ==================== Map pin ==================== */
.ap-map-pin {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.ap-map-pin--urgent  { background: var(--color-urgent-text); }
.ap-map-pin--soon    { background: var(--color-soon-text); }
.ap-map-pin--monitor { background: var(--color-monitor-text); }
.ap-map-pin--fine    { background: var(--color-fine-text); }

/* ==================== Utility helpers ==================== */
.ap-u-flex       { display: flex; }
.ap-u-flex-col   { display: flex; flex-direction: column; }
.ap-u-items-center { align-items: center; }
.ap-u-justify-between { justify-content: space-between; }
.ap-u-gap-1      { gap: var(--space-1); }
.ap-u-gap-2      { gap: var(--space-2); }
.ap-u-gap-3      { gap: var(--space-3); }
.ap-u-gap-4      { gap: var(--space-4); }
.ap-u-grow       { flex: 1; }
.ap-u-tabular    { font-variant-numeric: tabular-nums; }
.ap-u-text-secondary { color: var(--color-text-secondary); }
.ap-u-text-tertiary  { color: var(--color-text-tertiary); }

/* A viewer can look but not change anything: controls that write are marked data-requires-write
   by each page, and nav.js tags the body with the signed-in role. The API refuses a viewer's
   writes regardless; this only hides what they can't use. */
body[data-role="viewer"] [data-requires-write] {
  display: none !important;
}

/* A note under the top bar for a person whose reach is limited to some places (ADR-083). */
.ap-span-note {
  padding: 6px var(--space-6, 24px);
  font-size: 0.9em;
  background: var(--color-surface-sunken, #f1f5f9);
  color: var(--color-text-muted, #475569);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.ap-span-note--empty {
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning, #92400e);
  font-weight: 500;
}