/* ============================================================
   TSO FUSS - IBM 3270 / ISPF Look
   Font: Courier New 14px | 80x24 Zeichen | #00FF00 auf #000000
   ============================================================ */

:root {
  --grn:  #00ff00;   /* 3270 green      */
  --yel:  #ffff00;   /* 3270 yellow     */
  --tur:  #00ffff;   /* 3270 turquoise  */
  --red:  #ff2020;   /* 3270 red        */
  --blu:  #7f7fff;   /* 3270 blue       */
  --wht:  #e0e0e0;
  --bg:   #000000;
  --cell-w: 1ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--grn);
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  height: 100%;
  overflow: hidden;
}

/* ---------- 80x24 Bildschirm ---------- */
.screen {
  position: relative;
  width: 82ch;               /* 80 Zeichen + Rand */
  margin: 24px auto 0 auto;
  min-height: calc(24 * 1.45em);
  cursor: default;
}

pre.row, .row {
  font: inherit;
  line-height: 1.45em;
  white-space: pre;
  color: var(--grn);
}

.c-grn { color: var(--grn); }
.c-yel { color: var(--yel); }
.c-tur { color: var(--tur); }
.c-red { color: var(--red); }
.c-blu { color: var(--blu); }
.c-wht { color: var(--wht); }
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Eingabefelder (3270 unprotected fields) ---------- */
input.fld {
  font: inherit;
  line-height: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid #005500;
  color: var(--tur);
  text-transform: uppercase;
  caret-color: var(--grn);
  outline: none;
  padding: 0;
  vertical-align: baseline;
}
input.fld:focus  { border-bottom-color: var(--grn); }
input.fld.prot   { color: #555; border-bottom-color: transparent; } /* protected */
input.fld::selection { background: var(--grn); color: var(--bg); }

/* ---------- Gruene ISPF-Panels (Screenshot 1) ---------- */
.panel {
  background: var(--grn);
  padding: 6px;
  margin: 0 0 4px 0;
}
.panel .bar {
  background: var(--bg);
  padding: 1px 6px;
  white-space: pre;
  line-height: 1.45em;
}
.panel .bar + .bar { margin-top: 4px; }
.panel .inner {
  background: var(--bg);
  margin: 4px 8px;
  padding: 4px 6px;
}
.u { text-decoration: underline; }

/* Datum/Zeit-Kasten rechts (schwarz auf schwarzem Grund, gelber Text) */
.datebox {
  background: var(--bg);
  color: var(--yel);
  white-space: pre;
  display: inline-block;
  padding: 1px 6px;
  float: right;
  margin: 2px 0 6px 0;
}

/* ---------- Fadenkreuz-Cursor ---------- */
#xh-h, #xh-v {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  display: none;
}
#xh-h { left: 0; width: 100vw; height: 1px; background: var(--grn); opacity: .85; }
#xh-v { top: 0; height: 100vh; width: 1px; background: #9a9a9a;   opacity: .55; }
body.xh-on #xh-h, body.xh-on #xh-v { display: block; }

/* ---------- OIA-Statuszeile (unten, wie 3270) ---------- */
.oia {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid #1a4d1a;
  background: var(--bg);
  color: var(--blu);
  font: inherit;
  padding: 2px 8px;
  display: flex;
  justify-content: space-between;
  white-space: pre;
}
.oia .pos { color: var(--wht); }

/* ---------- Meldungszeile ---------- */
.msg-red { color: var(--red); }
.msg-yel { color: var(--yel); }

/* ---------- Hilfsklassen (CSP-konform, keine Inline-Styles) ---------- */
.clear      { clear: both; }
.center     { text-align: center; }
.inlineform { display: inline; }
.oia-a      { background: var(--blu); color: #000; }