:root {
    --term-bg: #000000;
    --term-fg: #00FF00;
    --term-cursor: #00FF00;
    /* [ISO Font] Consolas/Lucida are better "Screen/Console" fonts than Courier New */
    --font-stack: 'Consolas', 'Lucida Console', monospace;

    --cols: 80;
    --rows: 24;
    --cell-width: 1ch;
    --cell-height: 1.2lh;
    /* Line height based sizing can be tricky, let's try strict PX or relative */
}

body {
    background-color: #000000;
    color: var(--term-fg);
    font-family: var(--font-stack);
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    overflow: hidden;
}

#terminal {
    background-color: var(--term-bg);
    display: grid;
    /* 80 columns x 25 rows grid */
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(25, 1fr);
    gap: 0;

    /* Base Dimensions: 720px x 432px - STRICT ISO REFERENCE */
    width: 720px;
    height: 432px;
    /* These will be overridden by JS integer scaling, but this is the BASE */

    /* Font Size Fixed for 720x432 base */
    font-size: 14px;

    border: none;
    padding: 0;
    box-shadow: none;

    font-variant-ligatures: none;
    white-space: pre;
    cursor: default;
    user-select: none;
    font-family: 'Consolas', 'Lucida Console', 'Monaco', monospace;
    font-weight: normal;
    -webkit-text-stroke: 0;
    position: relative;

    /* SCALING CONFIGURATION */
    transform-origin: center center;
    /* Encourage pixelated/crisp scaling if browser supports it for text/containers */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;

    /* STRICT FONT SIZING */
    /* Cell Width = W / 80. Cell Height = H / 25. */
    /* At 720x432: W=9px, H=17.28px */
    /* Font Size must fit. */
    /* We will set font-size via JS strictly to match scaling. */
    /* Default base: */
    /* Approx for 720p base */

    transform: none;
    margin: 0;

    font-weight: normal;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    text-rendering: optimizeSpeed;
}

/* Global OIA Separator Line (ISO: Full width, no margins) */
#terminal::after {
    content: "";
    position: absolute;
    /* [ISO] Position: Directly below row 24 (96%) */
    /* Snapped to integer pixel if possible. 96% of 432 is 414.72. +1px = 415.72 */
    top: calc(96% + 1px);
    /* Large bleed to cover all resolutions */
    left: -100vw;
    right: -100vw;
    /* 0.5px for finer look ("un cran en dessous") */
    height: 0.5px;
    background-color: #00FF00;
    z-index: 20;
    pointer-events: none;
    /* Force hardware acceleration for crisp line */
    transform: translateZ(0);
}

span {
    display: flex;
    align-items: center;
    justify-content: center;
    /* [ISO Full Terminal] Fluid Grid Cells */
    width: 100%;
    /* Fill the 1fr column */
    height: 100%;
    /* Fill the 1fr row */
    /* [ISO] Cell Background: Transparent to allow bridge overlap (zIndex/stacking fix) */
    /* background-color: var(--term-bg); */
    /* box-shadow: 0 0 0.3px var(--term-bg); */
    /* [ISO] Subtle bleed to eliminate grid lines without total overlap */

    /* [ISO QUICK3270] Force "Tall" Aspect Ratio */
    transform: scaleY(1.1);
    /* [ISO] Reduced from 1.22 to tighten vertical density and fix background overflow */
    transform-origin: center center;

    overflow: visible;
    /* [ISO] Allow descenders to spill slightly */

    /* Allow pseudo-elements and shadows to bridge gaps */
    position: relative;
    /* Base for line overlays */
    margin: 0;
    padding: 0;
    /* [ISO] Use pure flex centering to avoid clipping at top/bottom */
    letter-spacing: 0;
    /* Enable text selection for copy support */
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* Attributes */

/* Attributes */
.high-intensity {
    color: #FFFFFF;
    font-weight: normal;
    /* [ISO] Never bold, just bright color */
}

.highlight {
    color: #FFFFFF;
    font-weight: normal;
}

.dim {
    color: #4488FF;
    /* IBM Blue/dim for inactive swapbar items */
}

.cursor {
    /* Default cursor (Green) */
    background-color: var(--term-cursor);
    color: var(--term-bg);
}

.cursor.high-intensity,
.cursor.highlight {
    /* White cursor */
    background-color: #FFFFFF;
    color: #000000;
}

.cursor.dim {
    /* Blue cursor */
    background-color: #4488FF;
    color: #000000;
}

/* OIA specific style for row 25 sep (usually a line) */
/* OIA specific style for row 25 sep (usually a line) */
.oia {
    /* [ISO] border-top moved to #terminal::after for full-width bleed */
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 0;

    /* Gap under the OIA text */
    /* Space for descenders (g, y, p) from row 24 */
    box-sizing: border-box;
    background-color: transparent;
    /* Avoid masking the line */
    z-index: 10;
    /* [ISO] Critical: Disable vertical scaling for OIA to maintain integer alignment and avoid line overlap */
    transform: none !important;
}

/* Fix: Disable horizontal bleed (shadow) on empty OIA spaces to avoid "dots" on the green line */
.oia:empty,
.oia:blank {
    box-shadow: none !important;
}

/* Note: Since spans are never truly empty (contain space), we target text-less ones or just disable shadow globally for OIA if not needed */
.oia {
    box-shadow: none !important;
}

/* Word Selection (double-click) - Overlay only, preserves theme colors */
.word-selected {
    background-color: rgba(0, 102, 204, 0.5);
    /* Do NOT set color - preserve theme attribute */
}

/* Custom Styles */
.red {
    color: #FF0000;
}

/* 3270 Extended Colors */
.turquoise {
    color: #00FFFF;
}

.cyan {
    color: #00FFFF;
}

.blue {
    color: #6699FF;
}

.green {
    color: #00FF00;
}

.green-bg {
    background-color: #00FF00;
    color: #000000;
    box-shadow: 1px 0 0 0 #00FF00, -1px 0 0 0 #00FF00;
}

.green-reverse {
    background-color: #00FF00;
    color: #000000;
    box-shadow: 1px 0 0 0 #00FF00, -1px 0 0 0 #00FF00;
}

.yellow {
    color: #FFFF00;
}

.pink {
    color: #FF00FF;
}

.white {
    color: #FFFFFF;
}

/* ============================================================================
   3270 THEMING SYSTEM - Attribute-Based Classes
   ============================================================================ */

/* --- ISPF THEME --- */

/* Text & Structure */
.ispf-title {
    color: #FFFFFF;
}

/* White */
.ispf-subtitle {
    color: #FFFFFF;
}

/* White */
.ispf-header {
    color: #FFFFFF;
}

/* Cyan */
.ispf-label {
    color: #00FF00;
}

/* Green */
.ispf-text {
    color: #00FF00;
}

/* Separator - Blue like reference screenshot */
.ispf-separator {
    color: #6699FF;
}

/* Blue */

/* Interactive */
.ispf-command-prompt {
    color: #FFFFFF;
}

/* White */
.ispf-command-input {
    color: #FFFFFF;
}

/* Cyan */
.ispf-field-input {
    color: #00FFFF;
}

/* Cyan */
.ispf-field-protected {
    color: #6699FF;
}

/* Blue */
.ispf-rowcmd-input {
    color: #00FFFF;
}

/* Cyan */

/* Messages */
.ispf-msg-info {
    color: #00FF00;
}

/* Green */
.ispf-msg-warn {
    color: #FFFF00;
}

/* Yellow */
.ispf-msg-error {
    color: #FF0000;
}

/* Red */
.ispf-msg-system {
    color: #6699FF;
}

/* Blue */

/* Status */
.ispf-status-ok {
    color: #00FF00;
}

/* Green */
.ispf-status-active {
    color: #FFFFFF;
}

/* White */
.ispf-status-wait {
    color: #6699FF;
}

/* Blue */
.ispf-status-warn {
    color: #FFFF00;
}

/* Yellow */
.ispf-status-error {
    color: #FF0000;
}

/* Red */

/* Keywords */
.ispf-keyword {
    color: #FFFFFF;
}

/* White for command keywords (END, CANCEL, etc.) */

/* Selection */
.ispf-hilite {
    color: #FFFFFF;
}

.ispf-selected-row {
    background-color: #003300;
    box-shadow: 1px 0 0 0 #003300, -1px 0 0 0 #003300;
}

.ispf-reverse {
    background-color: currentColor;
    color: #000000 !important;
}

.ispf-focus-field {
    color: #00FFFF;
    position: relative;
    text-decoration: none !important;
}

.ispf-focus-field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    z-index: 1;
    box-shadow: 1px 0 0 0 currentColor, -1px 0 0 0 currentColor;
}

/* --- HILITE Syntax Tokens (JCL, REXX, etc.) --- */

/* Comments: Turquoise/Cyan - easy to spot, low priority */
.ispf-hi-comment {
    color: #00FFFF;
}

/* Operators: Green - // at start of line */
.ispf-hi-operator {
    color: #00FF00;
}

/* Keywords: Red - JOB, EXEC, DD */
.ispf-hi-keyword {
    color: #FF0000;
}

/* Names: Green - Step names, labels */
.ispf-hi-name {
    color: #00FF00;
}

/* Parameters: Green - DSN=, DISP=, PGM= */
.ispf-hi-parameter {
    color: #00FF00;
}

/* Literals: Green - Values, dataset names */
.ispf-hi-literal {
    color: #00FF00;
}

/* Delimiters: Yellow - =, (, ), , */
.ispf-hi-delimiter {
    color: #FFFF00;
}

/* Default: Green - Fallback for unrecognized text */
.ispf-hi-default {
    color: #00FF00;
}

/* --- TWS THEME --- */

/* Text & Structure */
.tws-title {
    color: #00FF00;
}

/* Green */
.tws-subtitle {
    color: #00FF00;
}

/* Green */
.tws-header {
    background-color: #00FF00;
    color: #000000;
    font-weight: bold;
    box-shadow: 1px 0 0 0 #00FF00, -1px 0 0 0 #00FF00;
}

/* Green-reverse */
.tws-label {
    color: #00FF00;
}

/* Green */
.tws-text {
    color: #00FF00;
}

/* Green */
.tws-separator {
    color: #666666;
}

/* Dim */

/* Interactive */
.tws-command-prompt {
    color: #00FF00;
}

/* Green */
.tws-command-input {
    color: #00FF00;
}

/* Green */
.tws-field-input {
    color: #00FF00;
}

/* Green */
.tws-field-protected {
    color: #4488FF;
}

/* Blue */
.tws-rowcmd-input {
    color: #FF0000;
}

/* Red - prominent */

/* Messages */
.tws-msg-info {
    color: #00FF00;
}

/* Green */
.tws-msg-warn {
    color: #FFFF00;
}

/* Yellow */
.tws-msg-error {
    color: #FF0000;
}

/* Red */
.tws-msg-system {
    color: #4488FF;
}

/* Blue */

/* Status (very prominent in TWS) */
.tws-status-ok {
    color: #00FF00;
}

/* Green - Complete */
.tws-status-active {
    color: #FFFFFF;
}

/* White - Started */
.tws-status-wait {
    color: #4488FF;
}

/* Blue - Waiting */
.tws-status-warn {
    color: #FFFF00;
}

/* Yellow */
.tws-status-error {
    color: #FF0000;
    font-weight: bold;
}

/* Red - Error */

/* Selection */
.tws-hilite {
    color: #FFFFFF;
}

.tws-selected-row {
    background-color: #002200;
}

.tws-focus-field {
    color: #00FF00;
}

@keyframes blink-default {

    0%,
    49% {
        background-color: var(--term-cursor);
        color: var(--term-bg);
    }

    50%,
    100% {
        background-color: transparent;
        color: inherit;
    }
}

@keyframes blink-white {

    0%,
    49% {
        background-color: #FFFFFF;
        color: #000000;
    }

    50%,
    100% {
        background-color: transparent;
        color: inherit;
    }
}

@keyframes blink-blue {

    0%,
    49% {
        background-color: #4488FF;
        color: #000000;
    }

    50%,
    100% {
        background-color: transparent;
        color: inherit;
    }
}

/* Alarm Message (Global) */
.ispf-msg-alarm {
    color: #FFFFFF;
}

.green-underscore {
    color: #00FF00;
    position: relative;
}

/* Continuous line for green-underscore via pseudo-element */
.green-underscore::after {
    content: "";
    position: absolute;
    /* [ISO] Bridge literal underscores: Start 0, End 0, Bridge gaps */
    /* [ISO] Start 2px right (gap from char), Extend 4px right (overlap next) to FORCE solid line */
    left: 2px;
    left: 2px;
    right: -4px;
    /* [ISO] Align with font baseline (approx 10-15% or 2-3px) to merge with literal '_' */
    bottom: 0.15em;
    height: 0.5px;
    background-color: currentColor;
    z-index: 1;
    /* [ISO] Horizontal bleed to close font gaps */
    box-shadow: 1px 0 0 0 currentColor, -1px 0 0 0 currentColor;
}

/* SDSF/TWS background blocks bleed fix */
.blue-reverse,
.blue-bg {
    background-color: #4488FF;
    color: #000000;
    /* [ISO] Bold removed to match Quick3270 sharpness */
    box-shadow: 1px 0 0 0 #4488FF, -1px 0 0 0 #4488FF;
}

/* TWS white-reverse header blocks */
.white-reverse,
.white-bg {
    background-color: #FFFFFF;
    color: #000000;
    /* [ISO] Bold removed to match Quick3270 sharpness */
    box-shadow: 1px 0 0 0 #FFFFFF, -1px 0 0 0 #FFFFFF;
}