/**
 * ACE IOOT — customer SIM dashboard.
 *
 * Consumes the brand tokens defined by the ACE IOOT child theme
 * (themes/aceioot/assets/css/custom.css). Every var() carries a fallback so the
 * dashboard still renders correctly under stock Hummingbird or any other theme
 * — the module must not depend on the theme being active.
 *
 * Status colour rule: green means "active and healthy". A suspended, expired or
 * terminated SIM gets a neutral grey, because a green bar on a dead line reads
 * as reassurance the customer should not be given.
 */

.aceioot-account-ref {
  margin-bottom: var(--ai-space-5, 1.5rem);
  color: var(--color-muted, #64748b);
  font-size: var(--ai-size-sm, 0.875rem);
}

.aceioot-account-ref strong {
  color: var(--color-heading, #14253a);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.02em;
}

.aceioot-empty {
  padding: var(--ai-space-6, 2rem);
  background: var(--color-surface, #f6f8fe);
  border: 1px dashed var(--color-border, #e4ecf3);
  border-radius: var(--ai-radius-lg, 16px);
  text-align: center;
}

.aceioot-sim-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ai-space-4, 1rem);
}

.aceioot-sim-card {
  /* Column layout so the footer can be pushed to the bottom: cards in a row are
     stretched to equal height by the grid, but their content varies (a warning
     line here, a missing phone number there). Without this the "Updated" lines
     sit at different heights and the row reads as misaligned. */
  display: flex;
  flex-direction: column;
  padding: var(--card-padding, 1.5rem);
  background: var(--card-bg, #f6f8fe);
  border: 1px solid var(--card-border, #e4ecf3);
  border-radius: var(--card-radius, 16px);
}

.aceioot-sim-card--expired {
  opacity: 0.7;
}

.aceioot-sim-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ai-space-2, 0.5rem);
  margin-bottom: var(--ai-space-3, 0.75rem);
}

.aceioot-sim-card__title {
  margin: 0;
  color: var(--color-heading, #14253a);
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--ai-size-lg, 1.25rem);
  line-height: 1.2;
}

.aceioot-status {
  padding: 0.125rem var(--ai-space-2, 0.5rem);
  border-radius: var(--badge-radius, 999px);
  font-size: var(--ai-size-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.aceioot-status--active {
  background: var(--color-success-soft, #e7f6ec);
  color: var(--color-success, #1b7f3b);
}

.aceioot-status--suspended {
  background: var(--color-warning-soft, #fff4e5);
  color: var(--color-warning, #a35b00);
}

.aceioot-status--expired,
.aceioot-status--terminated {
  background: var(--color-border, #e4ecf3);
  color: var(--color-muted, #64748b);
}

.aceioot-sim-card__meta {
  margin: 0 0 var(--ai-space-4, 1rem);
}

.aceioot-sim-card__meta dt {
  margin-top: var(--ai-space-2, 0.5rem);
  color: var(--color-muted, #64748b);
  font-size: var(--ai-size-xs, 0.75rem);
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow, 0.12em);
  text-transform: uppercase;
}

.aceioot-sim-card__meta dd {
  margin: 0;
  color: var(--color-body, #23384f);
}

.aceioot-iccid {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--ai-size-sm, 0.875rem);
  /* Grouped in fours so a customer can read it back over the phone. */
  letter-spacing: 0.01em;
}

.aceioot-data {
  margin-bottom: var(--ai-space-4, 1rem);
}

.aceioot-data__figure {
  margin: 0 0 var(--ai-space-2, 0.5rem);
  color: var(--color-heading, #14253a);
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--ai-size-xl, 1.5rem);
}

.aceioot-data__total {
  color: var(--color-muted, #64748b);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--ai-size-sm, 0.875rem);
  font-weight: 400;
}

.aceioot-bar {
  height: 8px;
  border-radius: var(--ai-radius-pill, 999px);
  background: var(--color-border, #e4ecf3);
  overflow: hidden;
}

.aceioot-bar__fill {
  display: block;
  height: 100%;
  background: var(--color-inactive, #94a3b8);
}

.aceioot-bar__fill--ok {
  background: var(--color-success, #1b7f3b);
}

.aceioot-bar__fill--low {
  background: var(--color-danger, #d92d20);
}

/* Suspended, terminated or expired: the status is what matters, so the bar
   carries no health signal. */
.aceioot-bar__fill--muted {
  background: var(--color-inactive, #94a3b8);
}

.aceioot-data__warning {
  margin: var(--ai-space-2, 0.5rem) 0 0;
  color: var(--color-danger, #d92d20);
  font-size: var(--ai-size-sm, 0.875rem);
  font-weight: 500;
}

.aceioot-expiry {
  margin: 0 0 var(--ai-space-4, 1rem);
  color: var(--color-body, #23384f);
  font-size: var(--ai-size-sm, 0.875rem);
}

.aceioot-expiry__soon {
  color: var(--color-warning, #a35b00);
}

.aceioot-sim-card__footer {
  /* auto pins the footer to the bottom of the stretched card. */
  margin-top: auto;
  padding-top: var(--ai-space-3, 0.75rem);
  border-top: 1px solid var(--color-border, #e4ecf3);
}

.aceioot-sim-card__footer small {
  color: var(--color-muted, #64748b);
  font-size: var(--ai-size-xs, 0.75rem);
}

/* "My SIMs" count badge in the customer account link list. */
.aceioot-badge {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  border-radius: var(--badge-radius, 999px);
  background: var(--color-primary, #516aed);
  color: var(--color-on-dark, #fff);
  font-size: var(--ai-size-xs, 0.75rem);
  line-height: 1.25rem;
  text-align: center;
}