/* 5250 WebView — green-screen styling */
:root {
  --bg: #000;
  --fg: #33ff33;
  --green: #33ff66;
  --white: #f0f0f0;
  --red: #ff5050;
  --turquoise: #33dddd;
  --yellow: #ffd33d;
  --pink: #ff66dd;
  --blue: #6699ff;
  --status-bg: #0a0a0a;
  --status-fg: #66ff99;
  --cell-w: 11px;
  --cell-h: 22px;
  --font-family: "IBM Plex Mono", "Cascadia Mono", "Consolas", "Menlo", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #050505;
  color: #cfd;
  font-family: var(--font-family);
  height: 100%;
}

/* Headless / iframe-embed mode — hide the chrome, just show the screen. */
body.headless .topbar,
body.headless .legend { display: none; }
body.headless main.screen-wrap { padding: 0; }
body.headless .copyright-inline { display: inline-flex; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: #0d0f0d;
  border-bottom: 1px solid #1a3a1a;
}
.brand {
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.connect { display: flex; gap: 8px; align-items: center; flex: 1; }
.connect label { display: flex; gap: 4px; align-items: center; color: #9c9; font-size: 13px; }
.connect input {
  background: #000;
  color: var(--green);
  border: 1px solid #2a4a2a;
  padding: 4px 6px;
  font-family: var(--font-family);
  font-size: 13px;
}
.connect input[type="number"] { width: 7ch; -moz-appearance: textfield; appearance: textfield; }
.connect input[type="number"]::-webkit-outer-spin-button,
.connect input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.connect select {
  background: #000;
  color: var(--green);
  border: 1px solid #2a4a2a;
  padding: 4px 6px;
  font-family: var(--font-family);
  font-size: 13px;
}
.connect button {
  background: #122;
  color: var(--green);
  border: 1px solid #2a4a2a;
  padding: 4px 12px;
  font-family: inherit;
  cursor: pointer;
}
.connect button:hover:not(:disabled) { background: #1a3a1a; }
.connect button:disabled,
.connect input:disabled,
.connect select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.status { color: #aaa; font-size: 13px; margin-left: auto; white-space: nowrap; }
.status.connected { color: var(--green); }
.status.error { color: var(--red); }
.cursor-pick { display: flex; gap: 4px; align-items: center; color: #9c9; font-size: 13px; }
.cursor-pick select {
  background: #000;
  color: var(--green);
  border: 1px solid #2a4a2a;
  padding: 4px 6px;
  font-family: var(--font-family);
  font-size: 13px;
}

.screen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.screen {
  display: grid;
  grid-template-columns: repeat(var(--cols, 80), var(--cell-w));
  grid-auto-rows: var(--cell-h);
  background: var(--bg);
  padding: 6px;
  border: 2px solid #1f3a1f;
  font-size: var(--font-size, 16px);
  line-height: var(--cell-h);
  letter-spacing: 0;
  white-space: pre;
  outline: none;
  position: relative; /* anchor for the block-selection overlay */
  user-select: text; /* needed so a programmatic Selection is honoured ->
                        right-click "Copy" appears in the context menu */
  cursor: text;
  box-shadow: 0 0 30px rgba(0, 255, 100, 0.06) inset, 0 0 18px rgba(0, 0, 0, 0.6);
}
/* 27x132 wide mode — smaller cells so the whole row still fits the viewport. */
.screen.wide {
  --cell-w: 8px;
  --cell-h: 18px;
  --font-size: 13px;
}
.cell { user-select: text; }
/* The native per-glyph selection paint is hidden — our `.block-selection`
   overlay is the visual cue. We still sync a real Selection in JS so the
   browser knows "something is copyable" and exposes Copy in the context menu. */
.cell::selection,
.cell .glyph::selection {
  background: transparent;
  color: inherit;
}
.screen:focus { border-color: #3aff66; }

/* Marquee-style block selection: a single rectangle covering the dragged
   range. Ctrl+C copies the contained cells row-by-row with newlines. */
.block-selection {
  position: absolute;
  background: rgba(120, 180, 130, 0.22);
  border: 1px solid rgba(120, 220, 140, 0.55);
  pointer-events: none;
  z-index: 5;
}

.cell {
  display: inline-block;
  width: var(--cell-w);
  height: var(--cell-h);
  text-align: center;
  font-family: var(--font-family);
  color: var(--green);
  position: relative;
  white-space: pre;
}

/* Color modifiers driven by the 5250 attribute byte (0x20–0x3F). */
.c-green     { color: var(--green); }
.c-white     { color: var(--white); }
.c-red       { color: var(--red); }
.c-turquoise { color: var(--turquoise); }
.c-yellow    { color: var(--yellow); }
.c-pink      { color: var(--pink); }
.c-blue      { color: var(--blue); }
.c-nondisp   { color: transparent; }

/* Reverse video: cell background takes the foreground color, glyph turns dark. */
.cell.m-reverse {
  background: currentColor;
}
.cell.m-reverse .glyph {
  color: #000;
}

/* Underline: draw a continuous bottom border that spans the full cell so that
   adjacent underlined cells form one unbroken line, matching real 5250 output. */
.cell.m-underline {
  box-shadow: inset 0 -2px 0 0 currentColor;
}
/* When a reverse cell is also underlined the inset shadow would be hidden
   behind the cell background; draw the line on top instead. */
.cell.m-reverse.m-underline {
  box-shadow: inset 0 -2px 0 0 #000;
}
@keyframes blink-anim { 50% { opacity: 0.25; } }
.m-blink { animation: blink-anim 1s steps(2, end) infinite; }

/* Cursor — three styles, switched at runtime via .cursor-{underline|bar|block}
   on the .screen container. The pulse animation uses smooth interpolation
   (ease-in-out) instead of a 2-step hard blink, so it feels alive instead of
   strobed. The block variant pulses across a lower-opacity range so the
   character underneath stays readable through the cycle. */
.screen.cursor-underline .cell.cursor::after,
.screen.cursor-bar       .cell.cursor::after,
.screen.cursor-block     .cell.cursor::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: currentColor;
  will-change: opacity;
}
@keyframes cursor-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes cursor-pulse-block {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.15; }
}
.screen.cursor-underline .cell.cursor::after {
  left: 0; right: 0; bottom: 0;
  height: 3px;
  box-shadow: 0 0 6px currentColor;
  animation: cursor-pulse 2.2s ease-in-out infinite;
}
.screen.cursor-bar .cell.cursor::after {
  left: 0; top: 1px; bottom: 1px;
  width: 1px;
  box-shadow: 0 0 3px currentColor;
  animation: cursor-pulse 2.2s ease-in-out infinite;
}
.screen.cursor-block .cell.cursor::after {
  inset: 0;
  animation: cursor-pulse-block 2.2s ease-in-out infinite;
}

/* Field decorations — keep the visual cue subtle so the attribute byte
   underline (which lives one cell BEFORE the field data) and the field's own
   underline merge into a single continuous line, the way real 5250 emulators
   present it. */
.cell.in-field { /* no background tint; underline alone signals the field */ }
.cell.in-field.protected { background: transparent; }

.indicators {
  display: flex;
  gap: 24px;
  margin-top: 6px;
  width: calc(var(--cols, 80) * var(--cell-w) + 12px);
  font-size: 13px;
  color: var(--status-fg);
  background: var(--status-bg);
  padding: 4px 10px;
  border: 1px solid #1a3a1a;
  border-top: none;
}
.indicators span { font-family: var(--font-family); }
.copyright-inline {
  display: none;             /* shown only when body.headless */
  margin-left: auto;         /* push to the right of the indicators row */
  align-items: center;
  gap: 6px;
  color: #557;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.copyright-inline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #2a4a2a;
}
.copyright-inline a:hover { color: var(--green); border-bottom-color: var(--green); }
.copyright-inline .version {
  font-size: 11px;
  margin-left: 6px;
}
.copyright-inline .version::before { content: "· "; opacity: 0.6; }

.legend {
  margin: 12px auto;
  max-width: 920px;
  color: #9c9;
  font-size: 13px;
}
.copyright {
  text-align: center;
  color: #6b8;
  font-size: 12px;
  margin: 0 0 12px;
  letter-spacing: 0.05em;
}
.copyright a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #2a4a2a;
}
.copyright a:hover { color: var(--green); border-bottom-color: var(--green); }
.copyright .version {
  margin-left: 8px;
  font-family: var(--font-family);
  font-size: 11px;
  color: #557;
  letter-spacing: 0.04em;
}
.copyright .version::before { content: "· "; opacity: 0.6; }
.legend kbd {
  background: #122;
  border: 1px solid #2a4a2a;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--green);
  font-family: var(--font-family);
}
.legend ul { margin: 8px 0 0; padding-left: 20px; }
.legend li { margin-bottom: 4px; }

.footer-controls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 4px;
}
.footer-controls > details { margin: 0; }
.footer-controls > label,
.footer-controls > details > summary { line-height: 1.6; }

/* ===========================================================================
   Themes — picked from a dropdown next to the cursor selector. The default
   styling above is the "Production" theme; the body classes below override
   the few CSS variables / accents that distinguish each theme.
   =========================================================================== */

.theme-pick { display: flex; gap: 4px; align-items: center; color: #9c9; font-size: 13px; }
.theme-pick select {
  background: #000;
  color: var(--green);
  border: 1px solid #2a4a2a;
  padding: 4px 6px;
  font-family: var(--font-family);
  font-size: 13px;
}

/* --- Staging — amber accent + STAGING badge ---------------------------- */
body.theme-staging {
  --green: #ffb000;
  --status-fg: #ffd070;
}
body.theme-staging .topbar {
  background: linear-gradient(180deg, #1a0e00 0%, #0d0f0d 100%);
  border-bottom-color: #5a4400;
}
body.theme-staging .brand::after {
  content: "STAGING";
  background: #ffb000;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

/* --- Development — cyan accent + DEV badge ----------------------------- */
body.theme-development {
  --green: #66ccff;
  --status-fg: #aaddff;
}
body.theme-development .topbar {
  background: linear-gradient(180deg, #001a2a 0%, #0d0f0d 100%);
  border-bottom-color: #003a5a;
}
body.theme-development .brand::after {
  content: "DEV";
  background: #66ccff;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 8px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

/* --- Production — DANGER. Loud red warnings everywhere so the operator
       cannot miss that they're touching live data. ------------------------- */
body.theme-production {
  /* Override the "default green" tone so the actual screen text reads in red
     too — anybody glancing at the screen should see at first sight that this
     isn't the normal playground. Other 5250 attribute colours (white, red,
     yellow, …) keep their semantic meaning. */
  --green: #ff5050;
  --status-fg: #ffb0b0;
  /* Diagonal hazard stripes on the page background — subtle but constantly
     reminding "you are not on a safe playground here". */
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 36px,
      rgba(255, 60, 60, 0.06) 36px,
      rgba(255, 60, 60, 0.06) 44px
    ),
    #050505;
}
body.theme-production .topbar {
  background: linear-gradient(90deg, #4a0000 0%, #1a0000 25%, #1a0000 75%, #4a0000 100%);
  border-bottom: 2px solid #ff3333;
  box-shadow: 0 2px 12px rgba(255, 50, 50, 0.35);
}
body.theme-production .brand { color: #ffe0e0; }
body.theme-production .brand::after {
  content: "⚠ PRODUCTION ⚠";
  background: #ff2a2a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  margin-left: 10px;
  border-radius: 2px;
  letter-spacing: 0.12em;
  animation: prod-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.7);
}
@keyframes prod-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px  rgba(255, 50, 50, 0.7); }
  50%      { opacity: 0.7; box-shadow: 0 0 16px rgba(255, 50, 50, 1.0); }
}
body.theme-production .screen {
  border: 2px solid #ff3333;
  box-shadow:
    0 0 30px rgba(255, 50, 50, 0.18) inset,
    0 0 28px rgba(255, 50, 50, 0.45);
}
body.theme-production .screen:focus { border-color: #ff6666; }
body.theme-production .indicators {
  border-color: #5a0000;
  background: #1a0303;
  color: #ffaaaa;
}
body.theme-production #ind-keyboard { color: #ff8080 !important; }
body.theme-production .copyright a {
  color: #ffaaaa;
  border-bottom-color: #5a0000;
}
body.theme-production .copyright a:hover {
  color: #ff5050;
  border-bottom-color: #ff5050;
}

/* --- Happy — animated rainbow! ----------------------------------------- */
@keyframes rainbow-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes rainbow-shift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
body.theme-happy { background: #050505; }
body.theme-happy .topbar {
  background: linear-gradient(90deg, #ff5050, #ffaa33, #ffee33, #33ff66, #33ccff, #6666ff, #cc66ff, #ff5050);
  background-size: 200% 100%;
  animation: rainbow-shift 8s linear infinite;
  border-bottom: none;
}
body.theme-happy .brand { color: #fff; text-shadow: 0 0 6px rgba(0,0,0,0.6); }
body.theme-happy .screen {
  animation: rainbow-hue 12s linear infinite;
  border-image: linear-gradient(45deg, #ff5050, #ffaa33, #ffee33, #33ff66, #33ccff, #6666ff, #cc66ff) 1;
}
body.theme-happy .copyright a {
  color: #ff66cc;
  border-bottom-color: #ff66cc;
}