/* Vietnamese needs room for words and diacritics, not a global text shrink.
   Loaded last; scoped to vi so Korean layout and factory coordinates stay intact. */
html[lang="vi"][data-ui-design="modern"] {
  --design-sidebar: 212px !important;
}
html[lang="vi"][data-ui-design="modern"] .app-shell:not(.wallboard) .nav-tab {
  min-height: 44px !important;
  height: auto;
  padding: 7px 9px;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 8px;
}
html[lang="vi"][data-ui-design="modern"] .nav-tab > span > b {
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="vi"] :is(.button,.workflow-buckets button,.quality-review-tabs button,.settings-tab-list button) {
  white-space: normal;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="vi"] :is(.form-grid,.workflow-entry,.ocr-fields) > .field {
  min-width: 0;
  align-content: start;
}
html[lang="vi"] :is(.form-grid,.workflow-entry,.ocr-fields) > .field > span:first-child {
  min-height: 2.8em;
  display: flex;
  align-items: flex-end;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="vi"] .field :is(input,select,textarea) { min-width: 0; }
html[lang="vi"] .field small { font-size: 12px; line-height: 1.55; }
html[lang="vi"] .settings-tab-list {
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  align-items: stretch;
}
html[lang="vi"] .settings-tab-list button { min-height: 60px; }
html[lang="vi"] .workflow-table-head { min-height: 50px; align-items: center; line-height: 1.4; }
html[lang="vi"] .workflow-table-head > * { min-width: 0; white-space: normal; overflow-wrap: break-word; }
html[lang="vi"] .workflow-row .wf-status { overflow: visible; }
html[lang="vi"] .workflow-status { white-space: normal; line-height: 1.35; max-width: 100%; }
html[lang="vi"] .workflow-row { min-height: 46px; }
html[lang="vi"] .workflow-entry > button { min-height: 42px; }
html[lang="vi"] .quality-review-head-actions { flex-wrap: wrap; min-width: 0; }
html[lang="vi"] .quality-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
html[lang="vi"] .quality-detail-heading { flex-wrap: wrap; gap: 12px; }
html[lang="vi"] :is(.quality-summary,.allocation-summary) > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
html[lang="vi"] :is(.quality-summary,.allocation-summary) dt {
  min-height: 2.8em;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
}
html[lang="vi"] :is(.quality-summary,.allocation-summary) dd { margin-top: auto; padding-top: 5px; }
html[lang="vi"] :is(.capa-metric,.performance-kpis article) { min-width: 0; }
html[lang="vi"] :is(.capa-metric,.performance-kpis article) > span { min-height: 2.8em; line-height: 1.4; }
html[lang="vi"] .capa-switch { flex-wrap: wrap; }
html[lang="vi"] .mes-analysis-filter-row { align-items: end; }
html[lang="vi"] .mes-analysis-filter-row .field > span { min-height: 2.8em; line-height: 1.4; }
html[lang="vi"] .realtime-results .kpi-card > .kpi-label {
  min-height: 4.2em !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  max-width: calc(100% - 28px);
  white-space: normal;
  overflow-wrap: break-word;
}
html[lang="vi"] .realtime-results .kpi-card { min-height: 110px !important; }
html[lang="vi"] .realtime-results .kpi-card small { line-height: 1.4; }
@media (max-width: 1400px) {
  html[lang="vi"] .quality-review-screen .quality-summary { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  html[lang="vi"] .quality-detail-grid { grid-template-columns: minmax(0,1fr) !important; }
  html[lang="vi"] .capa-ranking-dashboard .capa-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  html[lang="vi"] .capa-metric-summary { grid-column: 1/-1; }
}
@media (max-width: 1000px) {
  html[lang="vi"] .app-shell:not(.wallboard) .nav-tab { flex-basis: 210px; }
  html[lang="vi"] .quality-review-screen .quality-review-layout { grid-template-columns: minmax(0,1fr) !important; }
  html[lang="vi"] .workflow-entry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang="vi"] .workflow-entry .workflow-operator { grid-column: auto; }
}
@media (max-width: 600px) {
  html[lang="vi"] .settings-tab-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang="vi"] .settings-tab-list button { font-size: 12px; padding: 8px; }
  html[lang="vi"] .workflow-entry { grid-template-columns: minmax(0,1fr); }
  html[lang="vi"] .capa-ranking-dashboard .capa-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[lang="vi"] .quality-review-screen .quality-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}