/* =========================================================
   COMPONENT MASTERS
   Canonical design-system reference for VumaAssets.
   Each class documents a reusable pattern extracted from
   the page-level CSS files. Pages should prefer these
   classes over re-implementing the same declarations.
   ========================================================= */


/* ---------------------------------------------------------
   DARK TRACKER CARD
   Base shell for cards on dark (--asset-darkest) surfaces.
   Used by: asset-header-card, form-card, tactical-card,
            scanner-card, scan-result, scan-tip
   --------------------------------------------------------- */

.tracker-card {
  background: var(--asset-darkest);
  border: 1px solid var(--asset-surface-alpha-05);
  border-radius: var(--radius-card);
}

.tracker-card--padded {
  padding: var(--space-4);
}

/* Adds depth — use for hero/header cards */
.tracker-card--elevated {
  box-shadow: var(--shadow-card);
}

/* Adds the orange left border — use for alert/action blocks */
.tracker-card--accent {
  border-left: 4px solid var(--asset-primary);
}

/* Primary fill — use for CTAs embedded in a card grid */
.tracker-card--primary {
  background: var(--asset-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}


/* ---------------------------------------------------------
   LIGHT CARD
   Surface card for light (--color-bg) contexts.
   Used by: metric, checklist-item, extra-item
   --------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}


/* ---------------------------------------------------------
   LABEL CAPS  (kicker / overline label)
   Small all-caps tracked label used above values/sections.
   Used by: tracker-field span, detail-field span,
            section-kicker, fleet-widget__label, fleet-table th,
            help-card span
   --------------------------------------------------------- */

.label-caps {
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--asset-text-muted);
}

/* Light-surface variant */
.label-caps--light {
  color: var(--color-text-muted);
}


/* ---------------------------------------------------------
   ICON MARK
   Rounded square icon container.
   Used by: form-card__title span, session-card__icon,
            fleet-widget__icon, tactical-card span
   --------------------------------------------------------- */

.icon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  background: var(--asset-primary);
  flex-shrink: 0;
}

.icon-mark--sm {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-chip);
}

.icon-mark--md {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
}

.icon-mark--lg {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}

/* Neutral fill — for informational (non-primary) icons */
.icon-mark--muted {
  background: var(--color-surface-muted);
}


/* ---------------------------------------------------------
   GRID 2COL
   Two-column responsive form/detail grid.
   Used by: tracker-grid, detail-grid, tactical-grid
   Collapses to single column below 480px.
   --------------------------------------------------------- */

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------
   GLOW BUTTON
   Full-width primary submit button with orange glow shadow.
   Used by: register-submit, tracker-button--primary
   --------------------------------------------------------- */

.btn-glow {
  width: 100%;
  min-height: 4rem;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--asset-primary);
  color: #fff;
  box-shadow: var(--shadow-glow-strong);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
}

.btn-glow:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}