/* =========================================================================
   Apeiron Labs — primitive component styles (apl-*)
   Loaded via styles.css. Components emit these class names; all values are
   token-driven. Mono is reserved for data; labels use the sans.
   ========================================================================= */

/* ---------- Button ---------- */
.apl-btn {
  font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; letter-spacing: .01em;
  transition: background var(--t-micro) var(--ease-out),
              color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out),
              filter var(--t-micro) var(--ease-out);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.apl-btn:active { transform: translateY(1px); filter: brightness(0.96); }
.apl-btn-primary   { background: var(--navy-800); color: #fff; }
.apl-btn-primary:hover   { background: var(--navy-700); }
.apl-btn-secondary { background: var(--surface); color: var(--navy-800); border-color: var(--border-strong); }
.apl-btn-secondary:hover { background: var(--surface-2); }
.apl-btn-ghost     { background: transparent; color: var(--navy-800); }
.apl-btn-ghost:hover     { background: var(--surface-2); }
.apl-btn-accent    { background: var(--cyan-500); color: var(--navy-900); }
.apl-btn-accent:hover    { background: var(--cyan-700); color: #fff; }
.apl-btn-danger    { background: var(--surface); color: var(--status-fault); border-color: rgba(229, 82, 79, .32); }
.apl-btn-danger:hover    { background: rgba(229, 82, 79, .10); }
.apl-btn-sm { padding: 6px 12px; font-size: var(--fs-12); }
.apl-btn-lg { padding: 14px 24px; font-size: var(--fs-16); }
.apl-btn:disabled, .apl-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.apl-btn svg { width: 1em; height: 1em; stroke-width: 1.75; }

/* ---------- Status pill ---------- */
.apl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.apl-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.apl-pill-online  { background: rgba(94, 227, 138, .16); color: #0F8C44; }
.apl-pill-online  .apl-pill-dot { background: var(--status-online); }
.apl-pill-caution { background: rgba(244, 181, 61, .18); color: #9A6B0F; }
.apl-pill-caution .apl-pill-dot { background: var(--status-caution); }
.apl-pill-fault   { background: rgba(229, 82, 79, .14); color: #B0322F; }
.apl-pill-fault   .apl-pill-dot { background: var(--status-fault); }
.apl-pill-offline { background: var(--slate-100); color: var(--slate-500); }
.apl-pill-offline .apl-pill-dot { background: var(--status-offline); }

/* ---------- Badge (categorical) ---------- */
.apl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-xs); letter-spacing: .04em;
}
.apl-badge-navy    { background: var(--navy-800); color: #fff; }
.apl-badge-cyan    { background: var(--cyan-100); color: var(--cyan-700); }
.apl-badge-outline { background: transparent; color: var(--navy-800); border: 1px solid var(--border-strong); }

/* ---------- Vehicle card ---------- */
.apl-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-1);
  min-width: 0;
}
.apl-card-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.apl-card-id {
  font-family: var(--font-mono); font-size: var(--fs-14); color: var(--navy-800);
  font-weight: 600; letter-spacing: .04em; margin: 8px 0 4px;
}
.apl-card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.apl-card-k {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em;
}
.apl-card-v {
  font-family: var(--font-mono); font-size: var(--fs-14); color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
/* Dark variant — explicit, so a dark card can sit on a light surface */
.apl-card-dark { background: #172148; border-color: rgba(255,255,255,.06); box-shadow: var(--shadow-inset-dark); color: #B6C0DA; }
.apl-card-dark .apl-card-head { color: #8090B5; }
.apl-card-dark .apl-card-id   { color: #fff; }
.apl-card-dark .apl-card-grid { border-top-color: rgba(255,255,255,.06); }
.apl-card-dark .apl-card-k    { color: #8090B5; }
.apl-card-dark .apl-card-v    { color: #F2F5FB; }

/* ---------- Form field ---------- */
.apl-field { display: flex; flex-direction: column; gap: 5px; }
.apl-field-label {
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600;
  color: var(--fg-2); text-transform: uppercase; letter-spacing: .07em;
}
.apl-input {
  font-family: var(--font-sans); font-size: var(--fs-14); padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg-1); outline: none; width: 100%;
  transition: border-color var(--t-micro), box-shadow var(--t-micro);
}
.apl-input:focus { border-color: var(--cyan-500); box-shadow: 0 0 0 3px rgba(79, 209, 232, .18); }
.apl-input-error { border-color: var(--status-fault); }
.apl-field-help  { font-family: var(--font-sans); font-size: var(--fs-12); color: var(--fg-3); }
.apl-field-error { font-family: var(--font-sans); font-size: var(--fs-12); color: var(--status-fault); }
.apl-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--fs-14); color: var(--fg-1); }
.apl-check input { width: 14px; height: 14px; accent-color: var(--navy-800); }