/* ═══════════════════════════════════════════════════════════════════════════
   IBM 3270 Terminal Emulator — Mainframe Security Simulator
   Design ref: §3 Terminal Emulator Design, §7 UI Design (Terminal Mode)
   REQ 5.1 — terminal-style display, fixed width, monospace, black background

   Authentic 3270 characteristics reproduced:
   - Exact 80-column × 24-row character grid
   - Green phosphor on near-black (not pure black — real P1 phosphor)
   - CRT bezel with rounded corners and inner shadow
   - Scanline / phosphor glow effect via CSS
   - OIA (Operator Information Area) at row 24
   - No scrollbars visible — content area is fixed height
   - Title row uses high-intensity (bright) field colour
   - Input field uses underscore-style cursor area
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── 3270 colour palette ──────────────────────────────────────────────────
   P1 green phosphor: base #00c800, high-intensity #00ff41
   Real 3270 field colours:
     Green  = normal unprotected field
     Blue   = protected field (labels)
     Red    = error / high-intensity alert
     White  = high-intensity output
     Yellow = modified / input field
     Turquoise = system messages
*/
:root {
    --phosphor-bg:    #0a0f0a;      /* near-black with slight green tint */
    --phosphor-green: #00c800;      /* base green — normal fields */
    --phosphor-hi:    #00ff41;      /* high-intensity green */
    --phosphor-blue:  #4488ff;      /* protected field / labels */
    --phosphor-red:   #ff3333;      /* error / alert */
    --phosphor-white: #e8ffe8;      /* high-intensity white */
    --phosphor-yellow:#ffdd00;      /* input / modified field */
    --phosphor-cyan:  #00ddcc;      /* system / turquoise */
    --phosphor-dim:   #006400;      /* dim / background text */

    --bezel-bg:       #1a1a1a;
    --bezel-border:   #2d2d2d;
    --screen-bg:      #0a0f0a;
    --oia-divider:    #00c800;

    --font:           'Courier New', 'Lucida Console', monospace;
    --char-w:         9.6px;        /* approximate char width at 14px */
    --char-h:         20px;         /* row height — 24 rows */
    --cols:           80;
    --rows:           24;
    --screen-w:       calc(var(--char-w) * var(--cols));   /* ~768px */
    --screen-h:       calc(var(--char-h) * var(--rows));   /* 480px */
}

/* ── Page ─────────────────────────────────────────────────────────────────*/
html, body {
    height: 100%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font);
}

/* ── CRT Bezel ────────────────────────────────────────────────────────────
   The outer plastic housing of the terminal.
   Rounded corners, dark grey, subtle inner bevel.
*/
#crt-bezel {
    background: var(--bezel-bg);
    border: 3px solid #333;
    border-radius: 12px;
    padding: 20px 24px 16px;
    box-shadow:
        0 0 0 1px #111,
        0 8px 32px rgba(0,0,0,0.8),
        inset 0 2px 4px rgba(255,255,255,0.04),
        inset 0 -2px 4px rgba(0,0,0,0.6);
    position: relative;
}

/* Bezel label plate */
#crt-bezel::after {
    content: 'IBM 3279';
    position: absolute;
    bottom: 6px;
    right: 20px;
    font-size: 9px;
    color: #444;
    letter-spacing: 0.15em;
    font-family: var(--font);
}

/* ── CRT Screen ───────────────────────────────────────────────────────────
   The glass face of the terminal.
   Slight green tint, inner shadow for depth, scanline overlay.
*/
#crt-screen {
    width: var(--screen-w);
    height: var(--screen-h);
    background: var(--screen-bg);
    border: 2px solid #001400;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 40px rgba(0, 200, 0, 0.04),
        inset 0 0 2px rgba(0,0,0,0.9);

    /* Phosphor glow on the whole screen */
    filter: brightness(1.0);
}

/* Scanline overlay — subtle horizontal lines like a real CRT */
#crt-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.18) 1px,
        rgba(0, 0, 0, 0.18) 2px
    );
    pointer-events: none;
    z-index: 10;
}

/* Vignette — corners slightly darker like a real CRT */
#crt-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0,0,0,0.45) 100%
    );
    pointer-events: none;
    z-index: 11;
}

/* ── Screen rows ──────────────────────────────────────────────────────────*/
.screen-row {
    display: flex;
    align-items: baseline;
    height: var(--char-h);
    padding: 0 8px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    line-height: var(--char-h);
    position: relative;
    z-index: 1;
}

/* ── Row 1 — Title bar ────────────────────────────────────────────────────
   High-intensity white for app name, yellow for panel name, dim for time.
   In real 3270 this would be a protected high-intensity field.
*/
#row-title {
    background: #001800;
    border-bottom: 1px solid var(--phosphor-dim);
    justify-content: space-between;
}

#title-app {
    color: var(--phosphor-white);
    font-weight: bold;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(0,255,65,0.4);
}

#title-panel {
    color: var(--phosphor-yellow);
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255,221,0,0.3);
}

#title-time {
    color: var(--phosphor-dim);
    font-size: 12px;
    min-width: 8ch;
    text-align: right;
}

/* ── Row 2 — Subtitle ─────────────────────────────────────────────────────*/
#row-subtitle {
    justify-content: space-between;
    border-bottom: 1px solid #001400;
}

#subtitle-left  { color: var(--phosphor-blue); font-size: 12px; }
#subtitle-right { color: var(--phosphor-dim);  font-size: 12px; }

/* ── Output area — rows 3–21 ──────────────────────────────────────────────
   Fixed height: 19 rows × char-h. No visible scrollbar.
   Content scrolls internally but the screen height never changes.
*/
#screen-output {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
    font-size: 13px;
    line-height: var(--char-h);
    position: relative;
    z-index: 1;

    /* Hide scrollbar — 3270 has no scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#screen-output::-webkit-scrollbar { display: none; }

/* Output line types — 3270 field colours */
.line           { display: block; white-space: pre; overflow: hidden; }
.line-input     { color: var(--phosphor-dim); }
.line-output    { color: var(--phosphor-green); }
.line-error     { color: var(--phosphor-red);
                  text-shadow: 0 0 6px rgba(255,51,51,0.5); }
.line-system    { color: var(--phosphor-cyan); }
.line-permit    { color: var(--phosphor-hi);
                  text-shadow: 0 0 8px rgba(0,255,65,0.6); }
.line-deny      { color: var(--phosphor-red);
                  text-shadow: 0 0 8px rgba(255,51,51,0.6); }
.line-separator { color: var(--phosphor-dim); }

/* ── Row 22 — Command input ───────────────────────────────────────────────
   Authentic 3270 command line: "COMMAND  ===>" label then input field.
   The input field is styled as a 3270 unprotected field — yellow underline.
*/
#row-command {
    border-top: 1px solid #001400;
    background: #000d00;
    gap: 0;
    padding: 0 8px;
    align-items: center;
}

#cmd-prompt {
    color: var(--phosphor-blue);
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
    margin-right: 4px;
    flex-shrink: 0;
}

#cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--phosphor-yellow);
    outline: none;
    color: var(--phosphor-yellow);
    font-family: var(--font);
    font-size: 13px;
    line-height: var(--char-h);
    caret-color: var(--phosphor-yellow);
    text-transform: uppercase;
    padding: 0 2px;
    letter-spacing: 0.02em;
}

#cmd-cursor-hint {
    color: var(--phosphor-yellow);
    animation: blink 1s step-end infinite;
    font-size: 13px;
    margin-left: 1px;
    flex-shrink: 0;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Hide the blinking hint when input has focus (real cursor is visible) */
#cmd-input:focus ~ #cmd-cursor-hint { opacity: 0; animation: none; }

/* ── Row 23 — OIA divider ─────────────────────────────────────────────────
   In a real 3270 this is a solid line separating the data area from the OIA.
*/
#oia-divider {
    height: 2px;
    background: var(--phosphor-dim);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 4px rgba(0,200,0,0.3);
}

/* ── Row 24 — OIA (Operator Information Area) ─────────────────────────────
   The status line at the very bottom of a real 3270.
   Shows: system status left | PF key legend centre | system ID right.
*/
#oia-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--char-h);
    padding: 0 8px;
    background: #000d00;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-size: 11px;
}

#oia-status {
    color: var(--phosphor-hi);
    min-width: 14ch;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0,255,65,0.4);
    letter-spacing: 0.05em;
}

#oia-pfkeys {
    display: flex;
    gap: 12px;
    color: var(--phosphor-dim);
}

.pfkey {
    cursor: pointer;
    user-select: none;
    color: var(--phosphor-dim);
    font-size: 11px;
    letter-spacing: 0.02em;
    transition: color 0.1s;
}

.pfkey:hover { color: var(--phosphor-green); }

/* PF number highlighted in yellow, action in dim green */
.pfkey::first-line { color: var(--phosphor-yellow); }

#oia-system {
    color: var(--phosphor-dim);
    font-size: 10px;
    letter-spacing: 0.1em;
    min-width: 8ch;
    text-align: right;
}

/* ── Phosphor glow on text ────────────────────────────────────────────────
   Subtle glow on the main output text to simulate phosphor bloom.
*/
#screen-output,
#row-title,
#row-command,
#oia-bar {
    text-rendering: optimizeLegibility;
}

/* ── Responsive scaling ───────────────────────────────────────────────────
   Scale the entire terminal down on smaller viewports while keeping
   the 80×24 grid intact.
*/
@media (max-width: 820px) {
    #crt-bezel {
        padding: 10px 12px 8px;
        border-radius: 8px;
    }
    :root {
        --char-w: 7.8px;
        --char-h: 17px;
    }
    #crt-screen,
    .screen-row,
    #screen-output,
    #row-command,
    #oia-bar,
    #cmd-input,
    #cmd-prompt,
    .line {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    :root {
        --char-w: 6.4px;
        --char-h: 15px;
    }
    #crt-screen,
    .screen-row,
    #screen-output,
    #row-command,
    #oia-bar,
    #cmd-input,
    #cmd-prompt,
    .line {
        font-size: 9.5px;
    }
}