/* ==========================================================================
   Maverick – Smart Audit enterprise polish (override layer)
   SCOPE: every rule is prefixed with html[data-mv-view^="smart-audit"]
   (set by /ui-override/mv-scope.js only while activeView is smart-audit or
   smart-audit-program). Nothing here applies to any other page.
   Rollback: remove the two tags from index.html (see SMARTAUDIT-UI-CHANGES.md)
   ========================================================================== */

/* ---- 1. Design tokens (light theme only; dark theme keeps its own) ------ */
html[data-mv-view^="smart-audit"]:not(.dark) {
  --muted-foreground: 215 14% 38%;      /* was near-black 215 25% 15% -> real secondary-text hierarchy */
  --border: 214 22% 88%;                /* softer hairlines */
  --input: 214 22% 84%;
  --radius: 6px;                        /* 4px -> 6px: softer cards/buttons, same identity */
  --mv-surface: 210 33% 98.5%;
  --mv-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
}
html[data-mv-view^="smart-audit"] {
  --mv-focus: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / .55);
  --mv-hover: color-mix(in srgb, hsl(var(--muted)) 45%, hsl(var(--background)));
  --mv-track: color-mix(in srgb, hsl(var(--foreground)) 9%, hsl(var(--background)));
  --mv-thumb: color-mix(in srgb, hsl(var(--foreground)) 24%, transparent);
}

/* ---- 2. Typography ------------------------------------------------------ */
html[data-mv-view^="smart-audit"] body {
  font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
html[data-mv-view^="smart-audit"] h1,
html[data-mv-view^="smart-audit"] h2,
html[data-mv-view^="smart-audit"] h3 { letter-spacing: -0.01em; text-wrap: balance; }

/* ---- 3. Page chrome ----------------------------------------------------- */
/* mission-list page header: calmer, less shadow */
html[data-mv-view^="smart-audit"] .px-8.py-6.bg-background.border-b { box-shadow: none; }
html[data-mv-view^="smart-audit"] .px-8.py-6.bg-background.border-b h1 { font-size: 1.5rem; line-height: 2rem; }

/* KPI cards: consistent look, subtle depth, number prominence */
html[data-mv-view^="smart-audit"] .flex-wrap.gap-3 > .rounded-lg.border.bg-card {
  box-shadow: var(--mv-shadow);
  padding: 12px 14px;
  min-width: 132px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-mv-view^="smart-audit"] .flex-wrap.gap-3 > .rounded-lg.border.bg-card:hover {
  border-color: hsl(var(--ring) / .35);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
html[data-mv-view^="smart-audit"] .flex-wrap.gap-3 > .rounded-lg.border.bg-card > p.text-xl {
  font-size: 1.5rem; line-height: 2rem; font-weight: 650; margin-top: 2px;
}

/* ---- 4. Tables ---------------------------------------------------------- */
html[data-mv-view^="smart-audit"] table { border-collapse: separate; border-spacing: 0; }
html[data-mv-view^="smart-audit"] thead th {
  background: color-mix(in srgb, hsl(var(--muted)) 55%, hsl(var(--background)));
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid hsl(var(--border));
}
html[data-mv-view^="smart-audit"] tbody tr { transition: background-color .12s ease; }
html[data-mv-view^="smart-audit"] tbody tr:hover { background-color: var(--mv-hover); }
html[data-mv-view^="smart-audit"] tbody td { vertical-align: middle; }
html[data-mv-view^="smart-audit"] table .tabular-nums,
html[data-mv-view^="smart-audit"] table td { font-variant-numeric: tabular-nums; }

/* ---- 5. Progress bars: thicker, rounded, smooth ------------------------- */
html[data-mv-view^="smart-audit"] .h-1\.5.w-full.rounded-full,
html[data-mv-view^="smart-audit"] .h-1.w-full.rounded-full,
html[data-mv-view^="smart-audit"] [role="progressbar"] { height: 8px; border-radius: 9999px; overflow: hidden; background-color: var(--mv-track); }
html[data-mv-view^="smart-audit"] .h-1\.5.w-full.rounded-full > div,
html[data-mv-view^="smart-audit"] .h-1.w-full.rounded-full > div,
html[data-mv-view^="smart-audit"] [role="progressbar"] > div { border-radius: 9999px; transition: width .4s ease; min-width: 0; }

/* ---- 6. Chips / badges: consistent size + weight ------------------------ */
html[data-mv-view^="smart-audit"] .inline-flex.items-center.border.rounded-sm,
html[data-mv-view^="smart-audit"] .inline-flex.items-center.rounded-full.border {
  font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
html[data-mv-view^="smart-audit"] .inline-flex.items-center.border.rounded-sm { border-radius: 9999px; padding-left: 8px; padding-right: 8px; height: 20px; }

/* ---- 7. Buttons / inputs: consistent focus + hover feel ----------------- */
html[data-mv-view^="smart-audit"] button:focus-visible,
html[data-mv-view^="smart-audit"] [role="tab"]:focus-visible,
html[data-mv-view^="smart-audit"] input:focus-visible,
html[data-mv-view^="smart-audit"] select:focus-visible,
html[data-mv-view^="smart-audit"] textarea:focus-visible { outline: none; box-shadow: var(--mv-focus); }
/* the global hover:scale makes buttons jitter inside dense toolbars/tables -> disable here */
html[data-mv-view^="smart-audit"] main button:hover,
html[data-mv-view^="smart-audit"] table button:hover,
html[data-mv-view^="smart-audit"] [role="dialog"] button:hover { transform: none; }
html[data-mv-view^="smart-audit"] button:active { transform: none; }
html[data-mv-view^="smart-audit"] button:disabled { cursor: not-allowed; }

/* ---- 8. Execution header (title + tabs) --------------------------------- */
html[data-mv-view^="smart-audit"] h1.truncate.max-w-\[300px\] { max-width: min(560px, 42vw); }
html[data-mv-view^="smart-audit"] .mv-exec-header { gap: 12px; }
html[data-mv-view^="smart-audit"] .mv-tabbar {
  max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin;
}
html[data-mv-view^="smart-audit"] .mv-tabbar > button { flex: 0 0 auto; }

/* ---- 9. "Report bug" tab: keep available, make it quiet ----------------- */
html[data-mv-view^="smart-audit"] button[title="Report a bug"] {
  background: hsl(222 30% 24%); border-color: hsl(222 30% 30%); box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
  font-size: 10.5px; padding: 10px 6px; gap: 6px; opacity: .72; letter-spacing: .08em;
}
html[data-mv-view^="smart-audit"] button[title="Report a bug"]:hover { opacity: 1; background: hsl(222 30% 30%); }

/* ---- 10. Scrollbars: visible, thin (app hides them globally) ------------ */
html[data-mv-view^="smart-audit"] * { scrollbar-width: thin; scrollbar-color: var(--mv-thumb) transparent; }
html[data-mv-view^="smart-audit"] ::-webkit-scrollbar { width: 8px; height: 8px; display: block; }
html[data-mv-view^="smart-audit"] ::-webkit-scrollbar-track { background: transparent; }
html[data-mv-view^="smart-audit"] ::-webkit-scrollbar-thumb { background: var(--mv-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
html[data-mv-view^="smart-audit"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, hsl(var(--foreground)) 38%, transparent); background-clip: content-box; }

/* ---- 11. Dialogs ---------------------------------------------------------- */
html[data-mv-view^="smart-audit"] [role="dialog"] { box-shadow: 0 20px 50px rgba(15, 23, 42, .25); max-width: calc(100vw - 24px); }

/* ---- 12. Narrow screens ---------------------------------------------------- */
@media (max-width: 1100px) {
  html[data-mv-view^="smart-audit"] .mv-exec-header { flex-wrap: wrap; row-gap: 8px; }
  html[data-mv-view^="smart-audit"] .mv-exec-header > .mv-tabbar { width: 100%; order: 3; }
  html[data-mv-view^="smart-audit"] h1.truncate.max-w-\[300px\] { max-width: 60vw; }
}
@media (max-width: 767px) {
  html[data-mv-view^="smart-audit"] .px-8.py-6.bg-background.border-b { padding: 16px; gap: 12px; flex-wrap: wrap; }
  html[data-mv-view^="smart-audit"] .flex-1.overflow-auto.p-8 { padding: 16px; }
  html[data-mv-view^="smart-audit"] .flex-wrap.gap-3 > .rounded-lg.border.bg-card { min-width: calc(50% - 8px); }
  html[data-mv-view^="smart-audit"] button, html[data-mv-view^="smart-audit"] [role="tab"] { min-height: 32px; }
}

/* ==========================================================================
   v2 additions
   ========================================================================== */

/* ---- 13. Status chips (div badges) --------------------------------------- */
html[data-mv-view^="smart-audit"] div.inline-flex.items-center.border.px-2\.5.py-0\.5.text-xs {
  font-weight: 600; border-radius: 9999px; line-height: 1.1rem; white-space: nowrap; letter-spacing: .01em;
}
/* empty monospace chips (unresolved control references) should never render as blank boxes */
html[data-mv-view^="smart-audit"] span.font-mono:empty { display: none; }

/* ---- 14. Error + empty states ------------------------------------------- */
html[data-mv-view^="smart-audit"] div.flex.flex-col.items-center.justify-center.text-center:has(> button.mt-3.text-primary)::before {
  content: ""; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px;
  background-color: hsl(0 84% 96%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
  border: 1px solid hsl(0 84% 90%);
}
html[data-mv-view^="smart-audit"] div.flex.flex-col.items-center.justify-center.text-center > button.mt-3.text-primary {
  margin-top: 16px; padding: 6px 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--background)); font-size: 12px; text-decoration: none; box-shadow: var(--mv-shadow);
}
html[data-mv-view^="smart-audit"] div.flex.flex-col.items-center.justify-center.text-center > button.mt-3.text-primary:hover { background: hsl(var(--muted)); text-decoration: none; }
html[data-mv-view^="smart-audit"] div.flex.flex-col.items-center.justify-center.text-center > p.text-sm.font-medium { font-size: 15px; font-weight: 600; }
html[data-mv-view^="smart-audit"] div.flex.flex-col.items-center.justify-center.text-center > p.text-xs.text-muted-foreground { font-size: 13px; line-height: 1.5; max-width: 26rem; }

/* ---- 15. Toasts (sonner) -------------------------------------------------- */
html[data-mv-view^="smart-audit"] [data-sonner-toast] {
  border-radius: 10px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, .18) !important;
  font-family: inherit; font-size: 13px;
}
html[data-mv-view^="smart-audit"] [data-sonner-toast] [data-title] { font-weight: 600; }

/* ---- 16. Toolbars wrap instead of overflowing --------------------------- */
html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.gap-3.border-b.flex-shrink-0 { flex-wrap: wrap; row-gap: 8px; }
html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.px-6.py-4.border.bg-background.rounded-t-lg { flex-wrap: wrap; row-gap: 10px; gap: 8px; }

/* ---- 17. Control drawer (right sheet) ------------------------------------ */
html[data-mv-view^="smart-audit"] [role="dialog"][class*="inset-y-0"][class*="right-0"] { max-width: 100vw; }

/* ---- 18. Tab-like segmented filters scroll instead of clipping ---------- */
html[data-mv-view^="smart-audit"] .flex.items-center.gap-0\.5.bg-muted\/50.p-0\.5.rounded-md.border,
html[data-mv-view^="smart-audit"] .flex.items-center.gap-1:has(> button.px-3.text-xs.font-medium.h-8) { max-width: 100%; overflow-x: auto; }

@media (max-width: 767px) {
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.px-6.py-4.border.bg-background.rounded-t-lg { padding: 12px; }
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.px-6.py-4.border.bg-background.rounded-t-lg .relative.w-64 { width: 100%; }
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.gap-3.border-b.flex-shrink-0 { padding-left: 12px; padding-right: 12px; }
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.gap-3.border-b.flex-shrink-0 .relative { width: 100%; }
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.gap-3.border-b.flex-shrink-0 .relative > input { width: 100%; }
  html[data-mv-view^="smart-audit"] .flex.items-center.justify-between.gap-3.border-b.flex-shrink-0 .ml-auto { margin-left: 0; }
  html[data-mv-view^="smart-audit"] .mv-exec-header { padding-left: 12px; padding-right: 12px; }
  html[data-mv-view^="smart-audit"] h1.truncate.max-w-\[300px\] { max-width: 52vw; }
  html[data-mv-view^="smart-audit"] .px-5.py-3.border-b.bg-muted\/20 { padding-left: 12px; padding-right: 12px; }
  html[data-mv-view^="smart-audit"] [role="dialog"]:not([class*="inset-y-0"]) { width: calc(100vw - 16px); }
}

/* ---- 19. Audit Program list: 7-column grid must scroll, not clip, on narrow screens ---- */
@media (max-width: 900px) {
  html[data-mv-view^="smart-audit"] [class*="grid-cols-[1fr_150px_90px_60px_60px_90px_50px]"] { min-width: 640px; }
  html[data-mv-view^="smart-audit"] .rounded-lg:has(> [class*="grid-cols-[1fr_150px_90px_60px_60px_90px_50px]"]),
  html[data-mv-view^="smart-audit"] .rounded-lg:has(> * > [class*="grid-cols-[1fr_150px_90px_60px_60px_90px_50px]"]) { overflow-x: auto !important; }
}

/* ---- 20. Audit Program tables (CSS-grid rows): rating/status text -> pills ---- */
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 > div.text-xs[class*="text-emerald-6"],
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 > div.text-xs[class*="text-amber-6"],
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 > div.text-xs[class*="text-red-6"],
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 > div.text-xs[class*="text-blue-6"],
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 > div > span.cursor-help.font-medium,
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 span.cursor-help.font-medium[class*="text-"] {
  display: inline-flex; align-items: center; width: fit-content; height: 20px; padding: 0 8px;
  border-radius: 9999px; font-weight: 600; font-size: 11px; white-space: nowrap;
  background: color-mix(in srgb, currentColor 12%, hsl(var(--background)));
  border: 1px solid color-mix(in srgb, currentColor 24%, hsl(var(--background)));
}
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3 { align-items: start; }
html[data-mv-view^="smart-audit"] .grid.items-start.px-4.py-3:hover { background-color: var(--mv-hover); }
html[data-mv-view^="smart-audit"] button.text-xs.text-muted-foreground.hover\:text-foreground.mt-0\.5 { color: hsl(var(--primary)); font-weight: 500; }
html[data-mv-view^="smart-audit"] button.text-xs.text-muted-foreground.hover\:text-foreground.mt-0\.5:hover { text-decoration: underline; }
/* draft/status pill next to titles */
html[data-mv-view^="smart-audit"] span.text-xs.px-2.py-0\.5.rounded.bg-muted { border-radius: 9999px; font-weight: 600; border: 1px solid hsl(var(--border)); }
/* underline tabs: clearer active state */
html[data-mv-view^="smart-audit"] button.border-b-2.-mb-px.border-foreground { font-weight: 600; border-bottom-color: hsl(var(--foreground)); }
html[data-mv-view^="smart-audit"] button.border-b-2.-mb-px:not(.border-foreground):hover { border-bottom-color: hsl(var(--border)); }
html[data-mv-view^="smart-audit"] .flex.items-center.gap-1.border-b:has(> button.border-b-2) { overflow-x: auto; flex-wrap: nowrap; }
html[data-mv-view^="smart-audit"] .flex.items-center.gap-1.border-b > button.border-b-2 { white-space: nowrap; flex: 0 0 auto; }

/* ---- 21. Fixed-layout data grids (Master Grid, Interview Hub): never let the title column collapse ---- */
@media (max-width: 1279px) {
  html[data-mv-view^="smart-audit"] table.table-fixed { min-width: 900px; }
}
html[data-mv-view^="smart-audit"] table.table-fixed td p.truncate { min-width: 0; }

/* ---- 22. Radix tab lists (control drawer etc.): scroll instead of clipping tabs off-screen ---- */
html[data-mv-view^="smart-audit"] [role="tablist"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; }
html[data-mv-view^="smart-audit"] [role="tablist"]::-webkit-scrollbar { display: none; }
html[data-mv-view^="smart-audit"] [role="tablist"] > [role="tab"] { flex: 0 0 auto; white-space: nowrap; }

/* ---- 23. Rich-text twin of raw text blobs (see mv-scope.js) -------------------------- */
html[data-mv-view^="smart-audit"] .mv-src-hidden { display: none !important; }
html[data-mv-view^="smart-audit"] .mv-rich { white-space: normal; line-height: 1.6; overflow-wrap: anywhere; }
html[data-mv-view^="smart-audit"] .mv-rich > :first-child { margin-top: 0; }
html[data-mv-view^="smart-audit"] .mv-rich > :last-child { margin-bottom: 0; }
html[data-mv-view^="smart-audit"] .mv-rich p { margin: 0 0 .65em; }
html[data-mv-view^="smart-audit"] .mv-rich strong, html[data-mv-view^="smart-audit"] .mv-rich b { font-weight: 650; color: hsl(var(--foreground)); }
html[data-mv-view^="smart-audit"] .mv-rich ul { list-style: disc; padding-left: 1.25rem; margin: .25em 0 .75em; }
html[data-mv-view^="smart-audit"] .mv-rich ol { list-style: decimal; padding-left: 1.4rem; margin: .25em 0 .75em; }
html[data-mv-view^="smart-audit"] .mv-rich li { margin: .2em 0; padding-left: .15rem; }
html[data-mv-view^="smart-audit"] .mv-rich li::marker { color: hsl(215 14% 50%); }
html[data-mv-view^="smart-audit"] .mv-rich h1, html[data-mv-view^="smart-audit"] .mv-rich h2, html[data-mv-view^="smart-audit"] .mv-rich h3,
html[data-mv-view^="smart-audit"] .mv-rich h4, html[data-mv-view^="smart-audit"] .mv-rich .mv-h { font-size: 13px; font-weight: 650; margin: .9em 0 .35em; color: hsl(var(--foreground)); }
html[data-mv-view^="smart-audit"] .mv-rich code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--mv-track); padding: 1px 5px; border-radius: 4px; }

/* ---- 24. Phones: KPI strip scrolls sideways so the data grid keeps real estate ---- */
@media (max-width: 767px) {
  html[data-mv-view^="smart-audit"] .px-5.py-3.border-b.bg-muted\/20 > .flex-wrap.gap-3 { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; gap: 8px; }
  html[data-mv-view^="smart-audit"] .px-5.py-3.border-b.bg-muted\/20 > .flex-wrap.gap-3 > * { flex: 0 0 auto; min-width: 104px; }
  html[data-mv-view^="smart-audit"] .flex-1.min-h-0.overflow-auto:has(> table.table-fixed) { min-height: 55vh; }
  html[data-mv-view^="smart-audit"] .flex.flex-col.h-full.bg-background:has(> .flex-1.min-h-0.overflow-auto > table) { overflow-y: auto; }
}

/* ---- 25. Laptops/tablets: keep the execution KPI strip on ONE row (scrolls if needed) so the grid gets height ---- */
@media (min-width: 768px) and (max-width: 1279px) {
  html[data-mv-view^="smart-audit"] .px-5.py-3.border-b.bg-muted\/20 > .flex-wrap.gap-3 { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; }
  html[data-mv-view^="smart-audit"] .px-5.py-3.border-b.bg-muted\/20 > .flex-wrap.gap-3 > * { flex: 1 0 auto; min-width: 104px; padding: 8px 12px; }
}

/* ---- 26. Master Grid "Assigned" cell: label the reviewer line instead of a second anonymous icon ---- */
html[data-mv-view^="smart-audit"] .mv-reviewer { gap: 4px; }
html[data-mv-view^="smart-audit"] .mv-reviewer > svg:first-child { display: none; }
html[data-mv-view^="smart-audit"] .mv-reviewer::before {
  content: "Reviewer"; flex: 0 0 auto; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); opacity: .8; padding-left: 6px;
}
html[data-mv-view^="smart-audit"] td.overflow-hidden > div.space-y-0\.5 > button { max-width: 100%; }

/* ---- 27. Slightly wider 140px columns (dates like "Sep 2, 2026, 01:00 PM", assignee/reviewer pickers) ---- */
html[data-mv-view^="smart-audit"] table.table-fixed col.w-\[140px\] { width: 196px; }
html[data-mv-view^="smart-audit"] table.table-fixed col.w-\[130px\] { width: 160px; }