/* xterm.js Terminal Container */
.terminal-container,
#terminal {
    background-color: #0F1720;      /* surface color - slightly lighter than background */
    border: 1px solid #142129;      /* subtle border */
    border-radius: 4px;
    padding: 12px;
    height: 600px;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* xterm.js base styling - CRITICAL for monospace alignment */
.xterm {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 14px !important;
    line-height: 1.0 !important;                     /* 1.0 = exact character height */
    letter-spacing: 0 !important;                    /* NO letter spacing for monospace */
    color: #E6EEF3 !important;
    background-color: transparent !important;
    position: relative;
    flex-grow: 1;
}

.xterm-screen {
    background-color: transparent !important;
}

.xterm-viewport {
    background-color: transparent !important;
    overflow-y: hidden !important;                   /* Disable scrolling in htop mode */
    overflow-x: hidden !important;                   /* Prevent horizontal scroll */
    scrollbar-width: none !important;
}

.xterm-viewport::-webkit-scrollbar {
    display: none !important;
}

.xterm-rows {
    position: relative;
}

.xterm-row {
    white-space: pre;                                /* Preserve exact spacing */
    overflow: hidden;                                /* No wrapping within rows */
}

.xterm-cursor-block {
    background-color: #E95420 !important;
    color: #0B0F14 !important;
    opacity: 0.9;
}

.xterm-cursor-block.xterm-cursor-blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49% { opacity: 0.9; }
    50%, 100% { opacity: 0.2; }
}

/* xterm.js scrollbar styling - hidden */
.xterm-scrollbar {
    display: none !important;
}

/* Color support for xterm output - mapped to accessible palette */
.xterm-color-1 { color: #FF6B61; }    /* red - error */
.xterm-color-2 { color: #17B890; }    /* green - success/teal */
.xterm-color-3 { color: #D4B03A; }    /* yellow - warning */
.xterm-color-4 { color: #1F6FEB; }    /* blue - info */
.xterm-color-5 { color: #B88EDF; }    /* magenta - purple */
.xterm-color-6 { color: #00D9FF; }    /* cyan - bright */
.xterm-color-7 { color: #E6EEF3; }    /* white - primary text */
.xterm-color-8 { color: #546E7A; }    /* bright black - dark gray */

.xterm-color-9 { color: #FF8076; }    /* bright red */
.xterm-color-10 { color: #26D07C; }   /* bright green */
.xterm-color-11 { color: #E5C158; }   /* bright yellow */
.xterm-color-12 { color: #3B82F6; }   /* bright blue */
.xterm-color-13 { color: #D8B9F1; }   /* bright magenta */
.xterm-color-14 { color: #1FFBF0; }   /* bright cyan */
.xterm-color-15 { color: #FFFFFF; }   /* bright white */