/* HADAFIN Phase 24f — Consistency Audit layer
   Maps Phase 23a–f surfaces onto Phase 24a design tokens.
   Additive / opt-in via shared class hooks; does not remove existing markup. */

/* ---------- Token-aligned page shell ---------- */
.hf-page,
.hf-dash {
  color: var(--hf-color-text);
  font-family: var(--hf-font-sans);
}

.hf-page__title,
.hf-dash h1 {
  font-size: var(--hf-font-size-h2);
  line-height: var(--hf-line-height-h2);
  font-weight: 800;
  color: var(--hf-color-text);
  letter-spacing: -0.02em;
}

.hf-page__sub,
.hf-dash > .mb-4 p,
.hf-dash .text-sm.text-slate-600 {
  color: var(--hf-color-muted);
  font-size: var(--hf-font-size-body);
}

/* ---------- Shared panel / card alignment ---------- */
.hf-page .bg-white.rounded-xl,
.hf-page .bg-white.rounded-2xl,
.hf-dash .bg-white.rounded-xl,
.hf-dash .bg-white.rounded-2xl,
.lead-shell-card,
.deal-shell-card,
.mr-card,
.crm-check-card,
.ar-card {
  border-color: var(--hf-color-border) !important;
  border-radius: var(--hf-radius-lg) !important;
  box-shadow: var(--hf-shadow-sm) !important;
}

/* Primary accent for CTAs that used indigo/violet drift */
.hf-brand-accent {
  color: var(--hf-color-primary);
}
.hf-brand-surface {
  background: color-mix(in srgb, var(--hf-color-primary) 8%, var(--hf-color-surface-0));
  border-color: color-mix(in srgb, var(--hf-color-primary) 28%, var(--hf-color-border));
}

/* CRM hero — token surfaces instead of ad-hoc slate gradient only */
.crm-hero {
  background: linear-gradient(
    135deg,
    var(--hf-color-text) 0%,
    color-mix(in srgb, var(--hf-color-primary) 35%, #0f172a) 100%
  ) !important;
  border-radius: var(--hf-radius-xl);
}

.crm-check-card {
  background: var(--hf-color-surface-1) !important;
  border-color: var(--hf-color-border) !important;
  border-radius: var(--hf-radius-md) !important;
}
.crm-check-card .k { color: var(--hf-color-muted) !important; }
.crm-check-card .v { color: var(--hf-color-text) !important; }

/* Lead board — token radii / borders */
.lead-shell-card,
.lead-board-col,
.lead-board-card {
  border-color: var(--hf-color-border) !important;
}
.lead-board-col {
  background: var(--hf-color-surface-1) !important;
  border-radius: var(--hf-radius-lg) !important;
}
.lead-board-card {
  background: var(--hf-color-surface-0) !important;
  border-radius: var(--hf-radius-md) !important;
  box-shadow: var(--hf-shadow-sm) !important;
}

/* Profile center status strip — primary brand, not indigo drift */
.hf-profile-status {
  border-radius: var(--hf-radius-xl);
  border: 1px solid color-mix(in srgb, var(--hf-color-primary) 30%, var(--hf-color-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hf-color-primary) 10%, #fff),
    var(--hf-color-surface-0) 55%
  );
}

/* Rent-a-Car dash cards — keep energy but anchor to primary/amber tokens */
.rac-dash-card.from-indigo-600 {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hf-color-primary) 75%, #1e293b),
    var(--hf-color-primary)
  ) !important;
}

/* ---------- Error state (pair with empty + skeleton) ---------- */
.hf-error-state {
  width: 100%;
  padding: var(--hf-space-6);
  border-radius: var(--hf-radius-lg);
  border: 1px dashed color-mix(in srgb, var(--hf-color-danger) 45%, transparent);
  background: color-mix(in srgb, var(--hf-color-danger) 6%, var(--hf-color-surface-0));
  display: flex;
  flex-direction: column;
  gap: var(--hf-space-3);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hf-error-state__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--hf-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hf-color-danger) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--hf-color-danger) 25%, transparent);
  color: var(--hf-color-danger);
}
.hf-error-state__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--hf-color-text);
}
.hf-error-state__message {
  font-size: 12px;
  color: var(--hf-color-muted);
  max-width: 36rem;
}
.hf-error-state__cta {
  margin-top: var(--hf-space-1);
}

/* Icon style lock — Tabler-first; mute emoji size in dashboards */
.hf-dash .hf-empty-state__icon i,
.hf-page .hf-empty-state__icon i {
  font-size: 22px;
  color: var(--hf-color-primary);
}
.hf-icon-muted {
  color: var(--hf-color-muted);
}

/* ---------- Mobile 320px+ consistency ---------- */
@media (max-width: 380px) {
  .hf-dash,
  .hf-page,
  .pos-shell {
    padding-left: var(--hf-space-3) !important;
    padding-right: var(--hf-space-3) !important;
  }

  .hf-dash h1,
  .hf-page__title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }

  .hf-dash .flex.flex-wrap.gap-2 a,
  .hf-page .flex.flex-wrap.gap-2 a {
    font-size: 11px;
    padding: 0.4rem 0.65rem;
  }

  .module-card-grid,
  .hf-dash .grid {
    gap: var(--hf-space-3) !important;
  }

  /* Prevent horizontal overflow from tables / datagrids */
  .hf-datagrid,
  .hf-datagrid-wrap,
  .overflow-x-auto {
    max-width: 100%;
  }

  .pos-premium .pos-touch-btn,
  .pos-premium .pos-pay-btn,
  .pos-premium #pos-checkout {
    width: 100%;
  }

  .pos-premium .flex.flex-wrap.items-end.gap-2 > .w-20 {
    width: 4.5rem;
  }

  .crm-hero {
    padding: var(--hf-space-4) !important;
  }

  .lead-board-col {
    min-height: 140px !important;
  }

  /* Stack KPI strips that used 7-col grids */
  .grid.xl\:grid-cols-7,
  .grid.lg\:grid-cols-7 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Nav / header overflow safety at 320–380px (Phase 24f) */
@media (max-width: 380px) {
  header .hidden.md\:flex,
  .site-header .md\:flex {
    /* keep existing md breakpoint behavior; tighten paddings only */
  }
  body {
    overflow-x: hidden;
  }
  .max-w-6xl,
  .max-w-7xl,
  .max-w-4xl {
    padding-left: var(--hf-space-3);
    padding-right: var(--hf-space-3);
  }
}

/* Prefer reduced motion still respected from other sheets */
@media (prefers-reduced-motion: reduce) {
  .hf-card,
  .hf-card--glass,
  .pos-touch-btn {
    transition: none !important;
  }
}