/* =========================================================
   CPMS Sim-Pit aggressive readability override
   ========================================================= */

/* Presbyopia-ready baseline: no rendered CPMS text below 18px. */
* {
  font-family: "JetBrains Mono", "Roboto Condensed", monospace, sans-serif !important;
  font-size: 18px !important;
}

h1,
.title-xl,
.text-3xl,
.text-4xl,
.text-2xl {
  color: #00ff66 !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

h2,
h3,
.title-lg,
.text-xl,
.text-lg {
  color: #ffb000 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

p,
span,
div,
a,
button,
input,
select,
td,
th,
label,
small,
.text-xs,
.text-sm {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* Direct Tailwind-style class overrides for small and mono text. */
[class*="text-"],
[class*="text-xs"],
[class*="text-sm"],
[class*="text-mono"] {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Panels reveal the tactical background rather than masking it. */
.mfd-panel,
.card,
.bg-slate-900,
.bg-gray-900,
.bg-black,
div[class*="bg-"],
section,
article,
.border {
  background-color: rgba(10, 16, 22, 0.45) !important;
  border: 1px solid rgba(0, 255, 102, 0.3) !important;
}

/* Direct Tailwind-style background override for runtime card classes. */
[class*="bg-"] {
  background-color: rgba(10, 16, 22, 0.5) !important;
}

/*
 * The window never scrolls; content scrolls only inside its main MFD
 * panel - on a sim-pit display, which is what this file is for.
 *
 * Applied unconditionally it also governed laptops and tablets, where
 * the layout is taller and wider than the screen: clamping to 100vh with
 * overflow:hidden left the bottom of the dashboard and the whole third
 * column unreachable. The !important on html and body meant nothing
 * further down the cascade could recover them.
 *
 * The clamp now applies only where the fixed layout actually fits.
 * Everything smaller scrolls like an ordinary page.
 */
@media (min-width: 1561px) and (min-height: 860px) {
  html,
  body,
  #app-root {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  main {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

html,
body,
#app-root {
  margin: 0 !important;
  padding: 0 !important;
}

/* In CPMS, every primary main region is the designated internal MFD panel. */
main[class],
.scrollable-panel,
.tab-content {
  height: auto !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
}

@media (max-width: 720px) {
  main[class],
  .scrollable-panel,
  .tab-content {
    max-height: calc(100vh - 96px) !important;
  }
}

/* Explicit Tailwind small-text escapes used by externally composed MFD views. */
.text-\[9px\],
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-xs,
.text-sm,
.font-mono,
[class*="text-\["] {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

span,
label,
small,
button,
a,
div {
  font-size: 18px !important;
}

h1,
h2,
h3,
.text-xl,
.text-2xl,
.text-3xl {
  font-size: 26px !important;
  font-weight: bold !important;
}

/* Training is a fixed shell: only its primary MFD panel may scroll. */
.training-center .training-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.training-center #trainingMain {
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.training-center .grid,
.training-center .training-ladder-list,
.training-center .training-mission-grid {
  gap: 8px !important;
}

/* Absolute Fixed Size - Presbyopia Ready */
p,
span,
div,
button,
a,
label,
td,
th,
small,
[class*="text-"] {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Headings */
h1,
h2,
h3,
h4,
.text-xl,
.text-2xl,
.text-3xl {
  font-size: 26px !important;
  font-weight: bold !important;
}