/* VETRIXA responsive safeguards v3 — 2026-09-16
   Scoped only to application / candidate-taking layouts.
   Marketing pages are intentionally unaffected. */

@media (max-width: 767px) {
  html[data-vetrixa-layout="app"] #root,
  html[data-vetrixa-layout="assessment-take"] #root,
  html[data-vetrixa-layout="training-take"] #root,
  html[data-vetrixa-layout="interview-take"] #root {
    overflow-x: hidden;
    max-width: 100%;
  }

  html[data-vetrixa-layout="app"] #root main,
  html[data-vetrixa-layout="app"] #root [role="main"],
  html[data-vetrixa-layout="assessment-take"] #root main,
  html[data-vetrixa-layout="training-take"] #root main,
  html[data-vetrixa-layout="interview-take"] #root main {
    min-width: 0;
    max-width: 100%;
  }

  html[data-vetrixa-layout="app"] #root [data-radix-dialog-content],
  html[data-vetrixa-layout="app"] #root [role="dialog"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto !important;
  }

  html[data-vetrixa-layout="app"] #root input,
  html[data-vetrixa-layout="app"] #root select,
  html[data-vetrixa-layout="app"] #root textarea,
  html[data-vetrixa-layout="assessment-take"] #root input,
  html[data-vetrixa-layout="assessment-take"] #root select,
  html[data-vetrixa-layout="assessment-take"] #root textarea {
    max-width: 100%;
  }

  html[data-vetrixa-layout="app"] #root pre,
  html[data-vetrixa-layout="app"] #root code {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  html[data-vetrixa-layout="app"] #root .min-w-52 { min-width: 0 !important; }
  html[data-vetrixa-layout="app"] #root .sm\:w-56 { width: 100%; }

  html[data-vetrixa-layout="app"] #root #vtx-cognitive-filterbar,
  html[data-vetrixa-layout="app"] #root #vtx-personality-filterbar,
  html[data-vetrixa-layout="app"] #root #vtx-custom-filterbar,
  html[data-vetrixa-layout="app"] #root #vtx-language-filterbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-vetrixa-layout="app"] #root #vtx-assessment-engine-panel .vtx-engine-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html[data-vetrixa-layout="app"] #root .vtx-mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html[data-vetrixa-layout="app"] #root .vtx-mobile-stack > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 {
    min-width: 0 !important;
    width: 100% !important;
  }
  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 > header {
    min-width: 0;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    gap: .5rem !important;
  }
  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 > header > .relative.flex-1 {
    min-width: 0 !important;
  }
  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 > header > .flex.items-center {
    flex-shrink: 0;
    gap: .25rem !important;
  }
  html[data-vetrixa-layout="app"] #root main {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  html[data-vetrixa-layout="app"] #root main > * { max-width: 100%; }
  html[data-vetrixa-layout="app"] #root main .grid > * { min-width: 0; }
  html[data-vetrixa-layout="app"] #root main .flex > * { min-width: 0; }
  html[data-vetrixa-layout="app"] #root main [class*="max-w-"] { max-width: 100%; }
  html[data-vetrixa-layout="app"] #root main table {
    width: max-content;
    min-width: 100%;
  }
  html[data-vetrixa-layout="app"] #root main table th,
  html[data-vetrixa-layout="app"] #root main table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  html[data-vetrixa-layout="app"] #root h1,
  html[data-vetrixa-layout="assessment-take"] #root h1 { overflow-wrap: anywhere; }

  html[data-vetrixa-layout="app"] #root .rounded-2xl,
  html[data-vetrixa-layout="assessment-take"] #root .rounded-2xl { max-width: 100%; }

  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 > header > .relative.flex-1.max-w-md {
    display: none !important;
  }
  html[data-vetrixa-layout="app"] #root > div.flex.h-screen > div.flex-1 > header > .flex.items-center {
    margin-left: auto;
  }
}