/* style.css - Styles for the SPA navigation and terminal container */

/* Global box-sizing reset to prevent padding/border overflow issues */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Custom font declarations for Operator Mono (using SSmLig variants for fuller weights) */
@font-face {
    font-family: 'Operator Mono';  /* Shared family name for all variants */
    src: url('/font/OperatorMonoSSmLig-Book.otf') format('opentype');  /* Book as normal/regular (weight ~400) */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-BookItalic.otf') format('opentype');  /* Italic (normal weight) */
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-Bold.otf') format('opentype');  /* Bold (normal style) */
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-BoldItalic.otf') format('opentype');  /* Bold italic */
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* Optional: Additional weights for finer control (e.g., if xterm uses them) */
@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-Light.otf') format('opentype');  /* Light (~300) */
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-LightItalic.otf') format('opentype');  /* Light italic */
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-Medium.otf') format('opentype');  /* Medium (~500) */
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Operator Mono';
    src: url('/font/OperatorMonoSSmLig-MediumItalic.otf') format('opentype');  /* Medium italic */
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Global html and body styling for full-height flex layout without overflow */
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: clip; /* Clips content strictly without triggering perpendicular scrollbars */
    background-color: #000; /* Ensure consistent black background */
    display: flex;
    flex-direction: column;
}

/* Navigation bar styling - auto-height via flex, solid background set initially via JS */
.navbar {
    flex: 0 0 auto;
    background-color: #000; /* Initial solid black to match default terminal bg */
    padding: 3px 10px; /* Further reduced padding for minimal height */
    text-align: center;
    /* No border or transparency for full opacity */
}

/* Label styling for theme controls - even smaller and unobtrusive, initial color overridden by JS */
.navbar label {
    font-size: 11px;
    color: #ffffff; /* Initial white to match default foreground */
    margin-right: 5px;
    font-family: monospace; /* Matches terminal font feel */
}

/* Color picker input styling - larger for easier clicking, still compact */
.navbar input[type="color"] {
    background-color: #333;
    border: 1px solid #555;
    padding: 2px;
    height: 28px; /* Increased for better click target */
    width: 36px; /* Wider for usability */
    cursor: pointer;
    border-radius: 2px;
    margin: 0 10px;
    vertical-align: middle;
    color: #ffffff; /* Initial color property to match default foreground */
}

.navbar input[type="color"]:hover,
.navbar input[type="color"]:focus {
    border-color: #4CAF50; /* Subtle green feedback */
    outline: none;
}

/* Ensure the color swatch is visible on dark bg */
.navbar input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.navbar input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 1px;
}

/* Font size select styling - compact, matches color inputs for consistency */
.navbar select {
    background-color: #333;
    color: #ffffff; /* Initial color overridden by JS to match foreground */
    border: 1px solid #555;
    padding: 4px 8px;
    height: 28px; /* Matches color input height */
    font-size: 11px;
    font-family: monospace;
    border-radius: 2px;
    margin: 0 10px;
    cursor: pointer;
    vertical-align: middle;
    min-width: 60px; /* Ensures readability for size options */
}

.navbar select:focus {
    border-color: #4CAF50; /* Subtle green focus feedback */
    outline: none;
}

.navbar select option {
    background-color: #333;
    color: #fff;
    padding: 2px;
    font-family: monospace; /* Fallback for options, overridden by inline styles for preview */
}

/* Button styling - retained for future use, but not currently applied */
.nav-button {
    background-color: #4CAF50; /* Green background */
    border: none;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.nav-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Terminal container styling - flex-grow to fill remaining space */
#terminal-container {
    flex: 1;
    min-height: 0; /* Allows flex item to shrink below content size if needed */
    background-color: #000; /* Black background for terminal */
    overflow: clip; /* Strictly clips any internal overflow without scrollbars */
}

/* Ensure xterm fills the container without borders */
#terminal-container .xterm {
    height: 100%;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

/* Remove any potential borders on xterm child elements */
#terminal-container .xterm-screen,
#terminal-container .xterm-viewport {
    border: none;
    margin: 0;
    padding: 0;
}

/* Hide xterm scrollbar cross-browser to eliminate visible but inactive artifact */
#terminal-container .xterm-viewport {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#terminal-container .xterm-viewport::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}