/* HeyMandy — app layer on the CostusWorx Fluent kit (Dynamics 365 look).
   Static file (outside Vite): loaded after the Tailwind bundle and public/fluent-kit/fluent-core.css,
   so the look changes without an npm rebuild. The views are Tailwind-utility markup; this layer maps
   the recurring utility patterns (cards, grids, fields, buttons, headings, status chips) onto kit tokens,
   scoped to the app shell (.v6-main) and the auth pages (body.hm-auth).
   Out of scope: proposals/luxury (client-facing brand piece), invoices/pdf, mail/*, reports/training, guide.
   Tokens only outside TOKENS: php <kit>/tools/check_layer.php public/css/fluent.css */

/* ===== TOKENS ===== */
:root {
  --tenant-primary: #1a2a3a;          /* fallback; tenant-layout sets the agency colours inline */
  --tenant-accent: #c5a059;
}

/* ===== BASE ===== */
body, body *:not(svg):not(path) { font-family: var(--v6-font) !important; }
.v6-main, body.hm-auth { font-size: var(--v6-fs-body); line-height: var(--v6-lh-body); }

/* Header extras */
.v6-hdr-brand { padding-left: 12px; letter-spacing: 0; }
.hm-hdr-pill { margin-left: 8px; padding: 2px 8px; border-radius: var(--v6-r-pill); background: var(--v6-on-chrome-field); color: var(--v6-surface); font-size: var(--v6-fs-cap); white-space: nowrap; }
.v6-menu form { margin: 0; }
.hm-msgbar { margin-bottom: 16px; border-radius: var(--v6-r-sm); border-width: var(--v6-line); border-style: solid; }
.hm-msgbar p { margin: 0; }

/* ── Type: serif display headings → Fluent Subtitle/Title ── */
.v6-main .font-serif { font-weight: 600; letter-spacing: 0; color: var(--v6-t1); }
.v6-main .font-serif.text-2xl, .v6-main .font-serif.text-3xl { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); }
.v6-main .font-serif.text-xl, .v6-main .font-serif.text-lg { font-size: var(--v6-fs-sub2); line-height: var(--v6-lh-sub2); }
.v6-main .text-2xl.font-semibold, .v6-main .text-3xl.font-semibold { font-size: var(--v6-fs-sub1); line-height: var(--v6-lh-sub1); }
.v6-main h2, .v6-main h3 { color: var(--v6-t1); }
/* Stone text scale → Fluent neutrals */
.v6-main .text-stone-900, .v6-main .text-stone-800 { color: var(--v6-t1); }
.v6-main .text-stone-700, .v6-main .text-stone-600 { color: var(--v6-t2); }
.v6-main .text-stone-500 { color: var(--v6-t3); }
.v6-main .text-stone-400, .v6-main .text-stone-300 { color: var(--v6-t4); }
/* Small caps labels (table headers, field captions) → sentence-case Caption/Body */
.v6-main .uppercase.tracking-wider, .v6-main .uppercase.tracking-wide { text-transform: none; letter-spacing: 0; }
.v6-main label.text-sm { font-size: var(--v6-fs-body); font-weight: 400; color: var(--v6-t2); }
.v6-main a:not([class*="bg-"]):not(.v6-nav-item) { color: var(--v6-action); }

/* ── Grids: 44px rows, white header, Fluent row lines ── */
.v6-main table { background: var(--v6-surface); }
.v6-main thead, .v6-main thead.bg-stone-50, .v6-main thead tr { background: var(--v6-surface); }
.v6-main th { height: var(--v6-row-h); padding-top: 0; padding-bottom: 0; font-size: var(--v6-fs-body); font-weight: 600; color: var(--v6-t2); border-bottom: var(--v6-line) solid var(--v6-stroke); white-space: nowrap; }
.v6-main td { height: var(--v6-row-h); padding-top: 4px; padding-bottom: 4px; font-size: var(--v6-fs-body); }
.v6-main tbody tr { border-color: var(--v6-row); }
.v6-main tbody tr:hover, .v6-main tbody tr:hover td { background: var(--v6-surface-2); }
.v6-main .divide-stone-100 > :not(:last-child), .v6-main .divide-stone-200 > :not(:last-child) { border-color: var(--v6-row); }

/* ── Fields: 32px, 4px corners, bottom-stroke focus ── */
.v6-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
.v6-main select, .v6-main textarea,
body.hm-auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  font-size: var(--v6-fs-body); color: var(--v6-t1); background-color: var(--v6-surface);
  border: var(--v6-line) solid var(--v6-stroke2); border-bottom-color: var(--v6-t3); border-radius: var(--v6-r-sm); box-shadow: none; }
.v6-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]), .v6-main select,
body.hm-auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { height: var(--v6-ctl-h); padding-top: 0; padding-bottom: 0; padding-left: 8px; }
.v6-main textarea { padding: 6px 8px; }
.v6-main input:focus, .v6-main select:focus, .v6-main textarea:focus, body.hm-auth input:focus { outline: none; border-color: var(--v6-stroke2); border-bottom: 2px solid var(--v6-action); box-shadow: none; }
.v6-main input:disabled, .v6-main select:disabled { background: var(--v6-disabled-bg); color: var(--v6-disabled-fg); }
.v6-main input[type=checkbox], .v6-main input[type=radio], body.hm-auth input[type=checkbox] { accent-color: var(--v6-action); }
.v6-main .border-red-400 { border-color: var(--v6-bad); }
.v6-main .text-red-500, .v6-main .text-red-400 { color: var(--v6-bad); }

/* ── Buttons: brand / dark fills → Fluent primary; bordered → Fluent standard ── */
.v6-main button, .v6-main a[class*="rounded"], body.hm-auth button { font-size: var(--v6-fs-body); }
.v6-main [class*="bg-[var(--brand-primary)]"], .v6-main .bg-stone-800, .v6-main .bg-stone-900,
body.hm-auth [class*="bg-[var(--brand-primary)]"], body.hm-auth .bg-stone-800, body.hm-auth button[type=submit] {
  background: var(--v6-action); color: var(--v6-surface); border: var(--v6-line) solid var(--v6-action); border-radius: var(--v6-r-sm);
  min-height: var(--v6-ctl-h); padding-top: 0; padding-bottom: 0; font-weight: 600; opacity: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.v6-main [class*="bg-[var(--brand-primary)]"]:hover, .v6-main .bg-stone-800:hover, .v6-main .bg-stone-900:hover,
body.hm-auth [class*="bg-[var(--brand-primary)]"]:hover, body.hm-auth .bg-stone-800:hover, body.hm-auth button[type=submit]:hover { background: var(--v6-action-h); opacity: 1; }
.v6-main a.border.rounded-lg, .v6-main button.border.rounded-lg, .v6-main a.rounded-lg.border, .v6-main button.rounded-lg.border {
  background: var(--v6-surface); border-color: var(--v6-stroke2); color: var(--v6-t1); border-radius: var(--v6-r-sm);
  min-height: var(--v6-ctl-h); padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; gap: 6px; }
.v6-main a.border.rounded-lg:hover, .v6-main button.border.rounded-lg:hover { background: var(--v6-surface-2); }

/* ── Status chips: Tailwind emerald/amber/red/sky tints → Fluent status tokens ── */
.v6-main .rounded-full.bg-emerald-50, .v6-main .rounded-full.bg-emerald-100, .v6-main .rounded-full.bg-green-100 { background: var(--v6-ok-bg); color: var(--v6-ok-h); }
.v6-main .rounded-full.bg-amber-50, .v6-main .rounded-full.bg-amber-100, .v6-main .rounded-full.bg-yellow-100 { background: var(--v6-warn-bg); color: var(--v6-warn); }
.v6-main .rounded-full.bg-red-50, .v6-main .rounded-full.bg-red-100 { background: var(--v6-bad-bg); color: var(--v6-bad-h); }
.v6-main .rounded-full.bg-sky-50, .v6-main .rounded-full.bg-sky-100, .v6-main .rounded-full.bg-blue-100 { background: var(--v6-sel); color: var(--v6-action-ink); }
.v6-main .rounded-full.bg-stone-100 { background: var(--v6-disabled-bg); color: var(--v6-t2); }
.v6-main .rounded-full.text-xs { font-weight: 600; }
/* Inline flash boxes inside views */
.v6-main div.bg-emerald-50.border { background: var(--v6-ok-bg); border-color: var(--v6-ok); color: var(--v6-ok-h); border-radius: var(--v6-r-sm); }
.v6-main div.bg-red-50.border { background: var(--v6-bad-bg); border-color: var(--v6-bad-line); color: var(--v6-bad-h); border-radius: var(--v6-r-sm); }
.v6-main div.bg-amber-50.border { background: var(--v6-warn-bg); border-color: var(--v6-warn); color: var(--v6-t1); border-radius: var(--v6-r-sm); }

/* ── Auth pages (login, register, password, invitation): DealerPulse sign-in pattern ── */
body.hm-auth { background: linear-gradient(160deg, var(--v6-brand-deep), var(--v6-brand) 60%, var(--v6-brand-line)); color: var(--v6-t1); }
body.hm-auth .text-stone-500 { color: var(--v6-on-chrome-field-ink); }
body.hm-auth .rounded-2xl.bg-white .text-stone-500 { color: var(--v6-t3); }
body.hm-auth label { font-size: var(--v6-fs-body); font-weight: 600; color: var(--v6-brand); }
body.hm-auth .brandmark { background: var(--v6-surface); border-radius: var(--v6-r-md); padding: 8px 12px; }

@media (max-width: 768px) {
  .v6-main .overflow-hidden.rounded-xl { overflow-x: auto; }
}

/* ===== COMPONENTS ===== */
/* Large block: the views' white rounded cards and table wrappers (same tokens as the kit's .v6-block) */
.v6-main .rounded-xl.border.bg-white, .v6-main .rounded-2xl.border.bg-white, .v6-main .rounded-lg.border.bg-white.p-6,
body.hm-auth .rounded-2xl.border.bg-white {
  border: var(--v6-card-w) solid var(--v6-card-line); border-radius: var(--v6-r-md); box-shadow: var(--v6-raise); background: var(--v6-block-bg); }
body.hm-auth .rounded-2xl.border.bg-white { border-color: var(--v6-brand-ink); border-radius: var(--v6-r-lg); box-shadow: var(--v6-raise-login); }
.v6-main .rounded-xl.border.bg-white table, .v6-main .rounded-xl.border.bg-white thead { background: var(--v6-surface); }