/* A6 AMBULANCE + INSURER RESTYLE (Dribbble 21203824) - 2026-10-08
   Scope: superAdmin ambulance console (trips/verification), insurer
   portal (login/claims/detail), ambulanceAuth. Additive, token-only,
   scoped under .mx-a6 so shared portals are untouched. */

/* ===== 1. TRIP STATUS BADGES (semantic mapping, soft pills) ===== */
.mx-a6 .amb-status { border-radius: var(--mx-radius-pill); font-weight: 600; font-size: 12px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; }
.mx-a6 .amb-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.mx-a6 .amb-status-requested { background: var(--mx-warning-surface, #FEF3E2); color: var(--mx-warning-dark, #B54708); border-color: color-mix(in srgb, var(--mx-warning, #F79009) 22%, transparent); }
.mx-a6 .amb-status-unassigned { background: var(--mx-danger-surface, #FEE4E2); color: var(--mx-danger-dark, #B42318); border-color: color-mix(in srgb, var(--mx-danger, #F04438) 22%, transparent); }
.mx-a6 .amb-status-accepted { background: var(--mx-primary-surface); color: var(--mx-primary-darker); border-color: color-mix(in srgb, var(--mx-primary) 20%, transparent); }
.mx-a6 .amb-status-en_route_pickup { background: color-mix(in srgb, var(--mx-primary) 14%, var(--mx-surface)); color: var(--mx-primary-darker); border-color: color-mix(in srgb, var(--mx-primary) 24%, transparent); }
.mx-a6 .amb-status-patient_onboard { background: var(--mx-status-info-bg, #EAF2FF); color: var(--mx-status-info, #175CD3); border-color: color-mix(in srgb, var(--mx-status-info, #175CD3) 20%, transparent); }
.mx-a6 .amb-status-completed { background: var(--mx-success-surface, #ECFDF3); color: var(--mx-success-dark, #067647); border-color: color-mix(in srgb, var(--mx-success, #12B76A) 22%, transparent); }
.mx-a6 .amb-status-cancelled { background: var(--mx-gray-100, #F2F4F7); color: var(--mx-gray-600, #475467); border-color: var(--mx-border-soft, #EEF1F5); }

/* ===== 2. ETA / TIME TINTED BLOCK (trip cards) ===== */
.mx-a6 .amb-eta {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; min-width: 128px;
  border-radius: var(--mx-radius-md, 10px);
  background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
  border: 1px solid color-mix(in srgb, var(--mx-primary) 14%, transparent);
}
.mx-a6 .amb-eta .amb-eta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted, var(--mx-ink-muted)); }
.mx-a6 .amb-eta .amb-eta-value { font-size: 15px; font-weight: 700; color: var(--mx-primary-darker); font-variant-numeric: tabular-nums; }

/* ===== 3. KPI TILES — ref pattern: icon-tile left, big number, muted label, trend pill ===== */
.mx-a6 .amb-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-bottom: 24px; }
.mx-a6 .amb-kpi {
  display: flex; align-items: center; gap: 16px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-soft, #EEF1F5);
  border-radius: var(--mx-radius-card, 18px);
  box-shadow: var(--mx-shadow-card, 0 8px 24px rgba(16, 24, 40, 0.06));
  padding: 22px 24px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.mx-a6 .amb-kpi:hover { box-shadow: 0 12px 28px rgba(16, 24, 40, 0.09); transform: translateY(-2px); }
.mx-a6 .amb-kpi-icon {
  width: 48px; height: 48px; min-width: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; font-size: 19px;
}
.mx-a6 .amb-kpi-icon.is-primary { background: color-mix(in srgb, var(--mx-brand, var(--mx-primary)) 12%, var(--mx-surface)); color: var(--mx-brand, var(--mx-primary)); }
.mx-a6 .amb-kpi-icon.is-success { background: color-mix(in srgb, var(--mx-success, #12B76A) 13%, var(--mx-surface)); color: var(--mx-success-dark, #067647); }
.mx-a6 .amb-kpi-icon.is-warning { background: color-mix(in srgb, var(--mx-warning, #F79009) 16%, var(--mx-surface)); color: var(--mx-warning-dark, #B54708); }
.mx-a6 .amb-kpi-icon.is-danger { background: color-mix(in srgb, var(--mx-danger, #F04438) 11%, var(--mx-surface)); color: var(--mx-danger-dark, #B42318); }
.mx-a6 .amb-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-a6 .amb-kpi-label { font-size: 13px; font-weight: 500; color: var(--mx-text-muted, var(--mx-ink-muted)); }
.mx-a6 .amb-kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--mx-ink-deep, var(--mx-ink)); line-height: 1.1; }

/* ===== 4. TRIP STATUS CARDS (trips console) + live-tracking panel polish ===== */
.mx-a6 .amb-trip-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-soft, #EEF1F5);
  border-radius: var(--mx-radius-card, 18px);
  box-shadow: var(--mx-shadow-card, 0 8px 24px rgba(16, 24, 40, 0.06));
  padding: 20px 22px;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.mx-a6 .amb-trip-card:hover { box-shadow: 0 12px 28px rgba(16, 24, 40, 0.09); transform: translateY(-2px); border-color: var(--mx-gray-200, #E4E7EC); }
.mx-a6 .amb-trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mx-a6 .amb-trip-code { font-size: 15px; font-weight: 700; color: var(--mx-ink-deep, var(--mx-ink)); letter-spacing: -0.01em; }
.mx-a6 .amb-trip-meta { font-size: 12.5px; color: var(--mx-text-muted, var(--mx-ink-muted)); margin-top: 2px; }
.mx-a6 .amb-trip-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--mx-border-soft, #EEF1F5) 70%, transparent); }
.mx-a6 .amb-trip-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.mx-a6 .amb-trip-fact .amb-fact-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted, var(--mx-ink-muted)); }
.mx-a6 .amb-trip-fact .amb-fact-value { font-size: 13.5px; font-weight: 600; color: var(--mx-ink); line-height: 1.35; }
.mx-a6 .amb-trip-fact .amb-fact-sub { font-size: 12px; color: var(--mx-text-muted, var(--mx-ink-muted)); font-weight: 400; }

/* ===== 5. INSURER CLAIMS — soft-card table, amount emphasis, status pills ===== */
/* Specificity note: admin_theme.css V2 CARDS (".main-content .mx-card, ...:not()")
   sets 10px radius late with !important — these selectors must out-rank it. */
.main-content .mx-a6-ins .mx-card,
.main-content .mx-a6-ins .card,
.main-content section.mx-a6-ins div[class*="card"]:not(.mx-stat-card):not(.mx-snapshot-card) {
  border: 1px solid var(--mx-border-soft, #EEF1F5) !important;
  border-radius: var(--mx-radius-card, 18px) !important;
  box-shadow: var(--mx-shadow-card, 0 8px 24px rgba(16, 24, 40, 0.06)) !important;
  overflow: hidden;
}
.main-content .mx-a6-ins .mx-card-header,
.main-content .mx-a6-ins .card-header { border-bottom: 1px solid var(--mx-border-soft, #EEF1F5) !important; background: var(--mx-surface) !important; }
.main-content .mx-a6-ins .mx-card-header strong,
.main-content .mx-a6-ins .card-header strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.main-content .mx-a6-ins .mx-table th { background: var(--mx-surface-alt, #F8FAFC) !important; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted, var(--mx-ink-muted)) !important; border-bottom: 1px solid var(--mx-border-soft, #EEF1F5) !important; }
.main-content .mx-a6-ins .mx-table td { border-bottom: 1px solid color-mix(in srgb, var(--mx-border-soft, #EEF1F5) 62%, transparent) !important; }
.main-content .mx-a6-ins .mx-table tbody tr:last-child td { border-bottom: none !important; }
.main-content .mx-a6-ins .mx-table-hover tbody tr:hover td { background: color-mix(in srgb, var(--mx-brand, var(--mx-primary)) 4%, var(--mx-surface)) !important; }
.mx-a6-ins .mx-table a code { font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--mx-primary-dark); }
/* claim amount: big bold figure, ref KPI style */
.mx-a6-ins .amb-claim-amount { font-size: 15px; font-weight: 700; color: var(--mx-ink-deep, var(--mx-ink)); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.mx-a6-ins .amb-claim-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--mx-text-muted, var(--mx-ink-muted)); margin-top: 1px; }
/* insurer status pills: submitted/approved/rejected/settled */
.mx-a6-ins .mx-badge { border-radius: var(--mx-radius-pill); font-weight: 600; padding: 4px 11px; border: 1px solid transparent; }
.mx-a6-ins .mx-badge-success { background: var(--mx-success-surface, #ECFDF3); color: var(--mx-success-dark, #067647); border-color: color-mix(in srgb, var(--mx-success, #12B76A) 22%, transparent); }
.mx-a6-ins .mx-badge-danger { background: var(--mx-danger-surface, #FEE4E2); color: var(--mx-danger-dark, #B42318); border-color: color-mix(in srgb, var(--mx-danger, #F04438) 22%, transparent); }
.mx-a6-ins .mx-badge-info { background: var(--mx-status-info-bg, #EAF2FF); color: var(--mx-status-info, #175CD3); border-color: color-mix(in srgb, var(--mx-status-info, #175CD3) 20%, transparent); }
.mx-a6-ins .mx-badge-warning { background: var(--mx-warning-surface, #FEF3E2); color: var(--mx-warning-dark, #B54708); border-color: color-mix(in srgb, var(--mx-warning, #F79009) 22%, transparent); }

/* ===== 6. CLAIM DETAIL — soft summary block + amount tiles ===== */
.mx-a6-ins .amb-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 4px; }
.mx-a6-ins .amb-detail-tile {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--mx-surface-alt, #F8FAFC);
  border: 1px solid var(--mx-border-soft, #EEF1F5);
  border-radius: var(--mx-radius-md, 10px);
  padding: 14px 16px;
}
.mx-a6-ins .amb-detail-tile .amb-detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted, var(--mx-ink-muted)); }
.mx-a6-ins .amb-detail-tile .amb-detail-value { font-size: 14px; font-weight: 600; color: var(--mx-ink); }
.mx-a6-ins .amb-amount-tile {
  background: color-mix(in srgb, var(--mx-primary) 8%, var(--mx-surface));
  border: 1px solid color-mix(in srgb, var(--mx-primary) 14%, transparent);
  border-radius: var(--mx-radius-md, 10px);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.mx-a6-ins .amb-amount-tile .amb-detail-value { font-size: 17px; font-weight: 700; color: var(--mx-primary-darker); font-variant-numeric: tabular-nums; }

/* ===== 7. INSURER LOGIN — soft gradient hero background like ref ===== */
body.mx-a6-auth { background: linear-gradient(160deg, color-mix(in srgb, var(--mx-primary) 10%, #FAFBFC) 0%, #FAFBFC 46%, color-mix(in srgb, var(--mx-primary) 6%, #FAFBFC) 100%); }
/* spec 8: forms pill/rounded inputs (auth_mx sets 5px !important late) */
.mx-a6-ins .mx-auth-input { border-radius: 10px !important; }

/* ===== 8. SHARED PRIMITIVES REFINEMENTS (ui_mx parity, A6 scope only) =====
   ui_mx.css already ships pill buttons (radius-btn 44px), 12px card radius,
   dot+label pill badges. Spec asks 16-20px card radius + --mx-shadow-card on
   cards and borderless hover tables inside this area; applied under .mx-a6*,
   never globally. */
.mx-a6 .main-content .card,
.main-content .mx-a6 .card,
.main-content div.mx-a6 div[class*="card"]:not(.mx-stat-card):not(.mx-snapshot-card) {
  border: 1px solid var(--mx-border-soft, #EEF1F5) !important;
  border-radius: var(--mx-radius-card, 18px) !important;
  box-shadow: var(--mx-shadow-card, 0 8px 24px rgba(16, 24, 40, 0.06)) !important;
  overflow: hidden;
}
.mx-a6 .main-content .card-header,
.main-content .mx-a6 .card-header { border-bottom: 1px solid var(--mx-border-soft, #EEF1F5) !important; background: var(--mx-surface) !important; }
.mx-a6 .main-content .card-footer,
.main-content .mx-a6 .card-footer { border-top: 1px solid var(--mx-border-soft, #EEF1F5) !important; background: var(--mx-surface) !important; border-radius: 0 0 var(--mx-radius-card, 18px) var(--mx-radius-card, 18px) !important; }
.mx-a6 .main-content .table thead th,
.main-content .mx-a6 .table thead th {
  background: var(--mx-surface-alt, #F8FAFC) !important;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mx-text-muted, var(--mx-ink-muted)) !important;
  border-bottom: 1px solid var(--mx-border-soft, #EEF1F5) !important; border-top: 0 !important;
}
.mx-a6 .main-content .table tbody td,
.main-content .mx-a6 .table tbody td { border-top: 1px solid color-mix(in srgb, var(--mx-border-soft, #EEF1F5) 62%, transparent) !important; }
.mx-a6 .main-content .table-hover tbody tr:hover td,
.main-content .mx-a6 .table-hover tbody tr:hover td { background: color-mix(in srgb, var(--mx-brand, var(--mx-primary)) 4%, var(--mx-surface)) !important; }
.mx-a6 .badge { border-radius: var(--mx-radius-pill); font-weight: 600; padding: 4px 11px; }
.mx-a6 .page-link { border-radius: var(--mx-radius-pill); margin: 0 3px; border-color: var(--mx-border-soft, #EEF1F5); }
.mx-a6 .page-item.active .page-link { background: var(--mx-brand, var(--mx-primary)); border-color: var(--mx-brand, var(--mx-primary)); color: #fff; }

/* ===== 9. RESPONSIVE + A11Y GUARDS ===== */
@media (max-width: 767px) {
  .mx-a6 .amb-kpi { padding: 16px 18px; }
  .mx-a6 .amb-kpi-value { font-size: 24px; }
  .mx-a6 .amb-trip-card { padding: 16px; }
  .mx-a6 .amb-eta { min-width: 110px; }
  .mx-a6-ins .amb-claim-amount { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-a6 .amb-kpi, .mx-a6 .amb-kpi:hover,
  .mx-a6 .amb-trip-card, .mx-a6 .amb-trip-card:hover { transform: none !important; transition: none !important; }
}
[dir="rtl"] .mx-a6 .amb-kpi { flex-direction: row; }
/* End A6 AMBULANCE + INSURER RESTYLE */