/*
 * Manabi Video Navi V273
 * Organization portal contrast/reflow and practical-result grid repair.
 *
 * This is a final presentation-only layer.  It does not change forms,
 * permissions, billing, QR, video, assignment or AI processing behavior.
 */

body.app-shell.future-ui.mnv-future-ui {
  --mnv-v273-light-ink: #10243e;
  --mnv-v273-light-copy: #36516d;
  --mnv-v273-light-muted: #536b83;
  --mnv-v273-dark-ink: #f7fbff;
  --mnv-v273-dark-copy: #c9d9ec;
}

/* -------------------------------------------------------------------------
 * Practical screen coach: every result section after the result heading is
 * a complete row.  Auto-placement into the narrow score column caused the
 * vertical one-character text and the large empty area shown in production.
 * ---------------------------------------------------------------------- */
body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel {
  grid-template-columns: 58px minmax(0, 1fr) max-content !important;
  align-items: start !important;
}

body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel > :nth-child(n + 4),
body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel > :is(
    .button.small,
    .practice-ai-reading,
    .practice-ai-feedback-grid,
    .practical-screen-blocker,
    .practical-screen-next,
    .practical-screen-capture-next,
    .practice-growth-note,
    .practice-self-check,
    .notice,
    .practice-regrade-form,
    .practice-answer-guide,
    .practical-screen-followup,
    .button.large
  ) {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel :is(
    .practice-ai-reading,
    .practice-ai-feedback-grid,
    .practical-screen-blocker,
    .practical-screen-next,
    .practical-screen-capture-next,
    .practice-growth-note,
    .practice-self-check,
    .notice,
    .practice-regrade-form,
    .practice-answer-guide,
    .practical-screen-followup,
    [data-screen-evidence-workspace]
  ),
body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel :is(div, section, article, form, fieldset, label, p, li, strong, small, span) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
  .practice-result-card.future-result-panel .practice-ai-feedback-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* -------------------------------------------------------------------------
 * Organization portal: bind text colors to the final surface, not to an
 * inherited theme color.  Light workplanes always use dark ink.
 * ---------------------------------------------------------------------- */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content :is(
  .org-page-head,
  .result-hero,
  .org-next-learning,
  .org-directory-search,
  .org-row-editor-panel,
  .org-action-guide li,
  .org-credential-steps article,
  .org-credential-steps li,
  .org-legal-consent,
  .org-plan-price,
  .org-plan-quote,
  .org-file-field,
  .org-learning-card dl > div,
  .org-credential-status-summary > div,
  .org-learner-announcements article,
  .org-learner-summary article,
  .org-table tbody tr,
  .org-table tbody td
) {
  color: var(--mnv-v273-light-ink) !important;
  -webkit-text-fill-color: var(--mnv-v273-light-ink) !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content :is(
  .org-page-head,
  .result-hero,
  .org-next-learning,
  .org-directory-search,
  .org-row-editor-panel,
  .org-action-guide li,
  .org-credential-steps article,
  .org-credential-steps li,
  .org-legal-consent,
  .org-plan-price,
  .org-plan-quote,
  .org-file-field,
  .org-learning-card dl > div,
  .org-credential-status-summary > div,
  .org-learner-announcements article,
  .org-learner-summary article,
  .org-table tbody td
) :is(h1, h2, h3, h4, h5, label, legend, strong, b, dt, dd) {
  color: var(--mnv-v273-light-ink) !important;
  -webkit-text-fill-color: var(--mnv-v273-light-ink) !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content :is(
  .org-page-head,
  .result-hero,
  .org-next-learning,
  .org-directory-search,
  .org-row-editor-panel,
  .org-action-guide li,
  .org-credential-steps article,
  .org-credential-steps li,
  .org-legal-consent,
  .org-plan-price,
  .org-plan-quote,
  .org-file-field,
  .org-learning-card dl > div,
  .org-credential-status-summary > div,
  .org-learner-announcements article,
  .org-learner-summary article,
  .org-table tbody td
) :is(p, small, time, .muted, .org-help) {
  color: var(--mnv-v273-light-copy) !important;
  -webkit-text-fill-color: var(--mnv-v273-light-copy) !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content :is(
  .org-page-head,
  .result-hero,
  .org-next-learning,
  .org-directory-search,
  .org-row-editor-panel,
  .org-action-guide li,
  .org-credential-steps article,
  .org-credential-steps li,
  .org-legal-consent,
  .org-plan-price,
  .org-plan-quote,
  .org-file-field,
  .org-learning-card dl > div,
  .org-credential-status-summary > div,
  .org-learner-announcements article,
  .org-learner-summary article,
  .org-table tbody td
) a:not(.button) {
  color: #075e74 !important;
  -webkit-text-fill-color: #075e74 !important;
  text-decoration-color: currentColor !important;
}

/* White section headers and pills need an explicit dark foreground. */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-page-head, .result-hero, .org-card, .org-plan-card) .eyebrow,
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-page-head, .result-hero, .org-card, .org-plan-card) .eyebrow * {
  color: #244866 !important;
  -webkit-text-fill-color: #244866 !important;
  opacity: 1 !important;
}

/* Dark organization cards keep bright headings, labels and supporting copy. */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-card, .org-kpi, .org-learning-card, .org-plan-card, .org-search-toolbar) > :is(h1, h2, h3, h4, h5, label, legend, strong),
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-card, .org-kpi, .org-learning-card, .org-plan-card, .org-search-toolbar) > header :is(h1, h2, h3, h4, h5, label, legend, strong),
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-card, .org-learning-card, .org-plan-card, .org-search-toolbar) .org-form-grid > label,
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  .org-search-toolbar > label {
  color: var(--mnv-v273-dark-ink) !important;
  -webkit-text-fill-color: var(--mnv-v273-dark-ink) !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content :is(
  .org-kpi > span,
  .org-kpi > small,
  .org-learning-type,
  .org-learning-instructions,
  .org-plan-audience,
  .org-plan-limits,
  .org-plan-limits li,
  .org-usage-grid > div > span,
  .org-search-toolbar > small,
  .org-search-toolbar > .wide
) {
  color: var(--mnv-v273-dark-copy) !important;
  -webkit-text-fill-color: var(--mnv-v273-dark-copy) !important;
  opacity: 1 !important;
}

/* Dark form controls: visible values and placeholders. */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-card, .org-search-toolbar) :is(input, select, textarea):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
  color: var(--mnv-v273-dark-ink) !important;
  -webkit-text-fill-color: var(--mnv-v273-dark-ink) !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-card, .org-search-toolbar) :is(input, textarea):not([type="file"])::placeholder {
  color: #a9bfd9 !important;
  -webkit-text-fill-color: #a9bfd9 !important;
  opacity: 1 !important;
}

/* Tables use one stable contrast contract, including billing documents. */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-table thead th {
  background: #123966 !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-table tbody tr,
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-table tbody td {
  background: #f7fafc !important;
  color: var(--mnv-v273-light-copy) !important;
  -webkit-text-fill-color: var(--mnv-v273-light-copy) !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-table tbody td :is(strong, b) {
  color: var(--mnv-v273-light-ink) !important;
  -webkit-text-fill-color: var(--mnv-v273-light-ink) !important;
}

/* -------------------------------------------------------------------------
 * Search and directory reflow.  No native control or candidate may force a
 * column wider than its card, and action labels always remain horizontal.
 * ---------------------------------------------------------------------- */
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search, .org-form-grid, .org-grid-2, .org-grid-3, .org-row-editor-panel) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-search-toolbar {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-directory-search {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search, .org-form-grid, .org-grid-2, .org-grid-3) > *,
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search, .org-row-editor-panel) :is(label, input, select, textarea, button, .button) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search) :is(input, select, textarea) {
  width: 100% !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search, .org-row-editor-panel) :is(button, .button),
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search) select {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  white-space: normal !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(a.button, button, .button) {
  -webkit-text-fill-color: currentColor !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-directory-option, .org-directory-result, [data-directory-option]) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  :is(.org-search-toolbar, .org-directory-search) > small,
body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
  .org-search-toolbar > .wide {
  grid-column: 1 / -1 !important;
}

body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

@media (max-width: 900px) {
  body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-search-toolbar,
  body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-form-grid,
  body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-grid-2,
  body.app-shell.future-ui.mnv-future-ui.organization-app #main-content .org-grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.organization-app #main-content
    :is(.org-search-toolbar, .org-directory-search) :is(button, .button) {
    width: 100% !important;
    justify-content: center;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-result-card.future-result-panel {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-result-card.future-result-panel .practice-score {
    grid-column: 2 !important;
  }
}

@media (max-width: 620px) {
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-result-card.future-result-panel,
  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-result-card.future-result-panel .practice-ai-feedback-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.app-shell.future-ui.mnv-future-ui.page-practice_lab #main-content
    .practice-result-card.future-result-panel > :is(.practice-result-icon, .practice-score) {
    grid-column: 1 !important;
  }
}