/* Ensure body takes full viewport height and prevents scrolling */
body {
    display: flex;
    height: 100vh;
    overflow: hidden; /* Prevent body scroll */
    background: var(--background);
    color: var(--foreground);
}

/* iOS Safari viewport height fixes */
@supports (-webkit-touch-callout: none) {
    body {
        /* Use -webkit-fill-available instead of vh for iOS */
        height: -webkit-fill-available;
    }
    
    #main-content, #sidebar {
        height: -webkit-fill-available;
    }
    
    /* Make bottom panel adapt to iOS safe areas */
    #bottom-panel {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    
    /* Fix iOS fixed positioning issues */
    #sidebar.shown {
        height: -webkit-fill-available;
    }
}

/* Sidebar Styling */
#sidebar {
    width: 250px; /* Initial width */
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-fg) !important;
}

/* Style the collapse button to use theme colors */
#hide-sidebar-button {
    /* Use the sidebar's foreground color for text and border */
    color: var(--sidebar-fg);
    border-color: var(--sidebar-fg);
}

/* Adjust hover/focus styles for the collapse button */
#hide-sidebar-button:hover,
#hide-sidebar-button:focus {
    /* Use sidebar foreground for background, sidebar background for text */
    background-color: var(--sidebar-fg);
    color: var(--sidebar-bg);
    border-color: var(--sidebar-fg); /* Keep border color consistent */
}

#sidebar .nav-link {
    /* Add more padding for easier touch */
    padding: 0.75rem 1rem; /* Increased vertical and horizontal padding */
    color: var(--sidebar-fg) !important;
}

#sidebar .nav-link.active {
    background: var(--tab-active-bg) !important;
    color: var(--tab-active-fg) !important;
}

#sidebar.collapsed {
    width: 0;
    padding: 0 !important; /* Override bootstrap padding */
    opacity: 0;
    /* Hide content visually */
    visibility: hidden;
}

/* Main content area takes remaining space */
#main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent main content scroll */
    transition: margin-left 0.3s ease; /* Add transition for when sidebar collapses */
    background: var(--background);
    color: var(--foreground);
}

/* Adjust main content margin when sidebar is hidden if needed */
/* body:has(#sidebar.collapsed) #main-content {
    margin-left: 0;
} */

/* Editor container takes available vertical space */
#editor-container {
    flex-grow: 1;
    position: relative; /* Needed for CodeMirror absolute positioning */
    overflow: hidden; /* Ensure CodeMirror fits */
    height: 0; /* Fix for flex-grow in some browsers */
    background: var(--editor-bg);
    color: var(--editor-fg);
}

/* Ensure the editor header bar uses theme variables for background and text color */
.editor-header {
    background: var(--background);
    color: var(--foreground);
    /* Ensure the header has a minimum width */
    min-width: fit-content;
}

/* CodeMirror specific styling */
.cm-editor {
    height: 100%; /* Make CodeMirror fill its container */
    font-size: 14px;
     /* Ensure CodeMirror editor is focusable for accessibility - REMOVED outline: none */
    /* outline: none !important; */
}

/* Tabs wrapper to manage horizontal scrolling */
.tabs-wrapper {
    /* Take all available space between sidebar toggle and other buttons */
    flex: 1;
    /* Create a flex container */
    display: flex;
    /* Set maximum width to prevent pushing buttons off-screen */
    max-width: calc(100% - 200px); /* Adjust based on total width of other buttons */
    /* Enable horizontal scrolling */
    overflow-x: auto;
    /* Disable vertical scrolling */
    overflow-y: hidden;
    /* Ensure the nav tabs inside take full height */
    height: 100%;
    /* Prevent items from shrinking smaller than content size */
    min-width: 0;
    /* Add some margin/padding to align with bootstrap tabs properly */
    margin-bottom: -1px;
    /* Set z-index to properly show active tab highlight */
    position: relative;
    z-index: 10;
    
    /* Custom scrollbar styling for the tabs wrapper */
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Custom scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
.tabs-wrapper::-webkit-scrollbar {
    height: 6px; /* Make horizontal scrollbar smaller */
    width: 6px; /* For consistency, also set width for any vertical scrollbars */
}

.tabs-wrapper::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 3px;
}

.tabs-wrapper::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.tabs-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* File Tab Styling */
#file-tabs {
    /* Prevent wrapping to new lines */
    white-space: nowrap;
    /* Ensure tabs take full height of container */
    height: 100%;
    /* Use flex display for better alignment */
    display: flex;
    /* Alignment properties */
    align-items: center;
    /* Do not shrink below content size */
    flex-shrink: 0;
    /* Set theme colors */
    background: var(--tab-bg);
    color: var(--tab-fg);
    /* Ensure tabs fill entire wrapper width */
    min-width: 100%;
    /* Remove border-bottom that might be causing layout issues */
    border-bottom: none;
    /* Add margin to the bottom to properly align with content area */
    margin-bottom: 0;
    /* Remove padding that might cause scroll issues */
    padding: 0;
}

#file-tabs .nav-item {
    /* Ensure consistent height to prevent vertical scrolling */
    height: 100%;
    /* Allow items to be smaller than content while keeping text visible */
    min-width: min-content;
    /* Use flex display for child elements */
    display: flex;
    /* Center content vertically */
    align-items: center;
}

#file-tabs .nav-link {
    padding: 0.4rem 0.6rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--tab-fg);
    background: var(--tab-bg);
    /* Ensure consistent height */
    height: 100%;
    /* Ensure text doesn't wrap */
    white-space: nowrap;
}

#file-tabs .nav-link.active {
     background-color: var(--tab-active-bg); /* Match editor background */
     border-color: #dee2e6 #dee2e6 var(--tab-active-bg); /* Connect tab to editor area */
     color: var(--tab-active-fg); /* Active tab text color */
}

#file-tabs .nav-link .close-tab {
    margin-left: 8px;
    font-size: 1.1em;
    line-height: 1;
    padding: 2px 5px; /* Increase padding for larger touch target */
    cursor: pointer;
    color: #6c757d;
    border-radius: 3px;
}
#file-tabs .nav-link .close-tab:hover {
    color: #dc3545;
    background-color: #f8d7da;
}
#file-tabs .nav-link.active .close-tab {
     color: #495057;
}
#file-tabs .nav-link.active .close-tab:hover {
    color: #dc3545;
    background-color: #f8d7da;
}

/* Styling for the editable tab name */
.tab-name {
    display: inline-block;
    pointer-events: none; /* Let clicks pass through to the button */
}

/* Styling for the rename input field */
.tab-name-input {
    border: none;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    padding: 2px 4px;
    margin: -2px 0;
    outline: 1px solid var(--foreground);
    border-radius: 3px;
    z-index: 10;
    position: relative; /* Ensure the input appears above other elements */
}

/* Add a subtle hint that tabs are editable */
.nav-link:hover .tab-name {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
}

/* Header button adjustments for touch */
#main-content .bg-light .btn {
    /* Increase padding slightly */
    padding: 0.3rem 0.6rem;
}

/* Bottom Panel Styling */
#bottom-panel {
    height: 200px; /* Default height */
    min-height: 80px; /* Minimum height */
    max-height: 50%; /* Max height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents content spill */
    transition: height 0.3s ease, visibility 0.3s ease, min-height 0.3s ease;
    resize: vertical; /* Allow vertical resizing */
    /* Set a default height, can be adjusted */
    height: 200px;
    /* Allow content to scroll if it overflows */
    overflow: auto;
    /* Ensure it doesn't shrink below its content */
    flex-shrink: 0;
    background: var(--panel-bg) !important;
    color: var(--panel-fg) !important;
}

#bottom-panel .nav-link.active {
    background: var(--tab-active-bg) !important;
    color: var(--tab-active-fg) !important;
}

/* Style for when the panel is hidden */
#bottom-panel.hidden {
    height: 0 !important; /* Force height to 0 */
    min-height: 0 !important; /* Force min-height to 0 */
    border-top-width: 0 !important; /* Hide border when collapsed */
    visibility: hidden;
    overflow: hidden;
}

#bottom-panel-tabs-content {
    flex-grow: 1; /* Take remaining space */
    overflow-y: auto; /* Allow content scrolling */
}

#bottom-panel .nav-tabs {
    border-bottom: 1px solid #dee2e6; /* Standard Bootstrap border */
}
#bottom-panel .nav-link {
     padding: 0.3rem 0.6rem; /* Smaller padding */
     font-size: 0.85rem;
}
#bottom-panel .nav-link.active {
     background-color: #f8f9fa; /* Slightly different background */
     border-color: #dee2e6 #dee2e6 #f8f9fa;
}


.output-area {
    font-family: monospace;
    font-size: 0.85rem;
    white-space: pre-wrap; /* Wrap long lines */
    word-break: break-all; /* Break long words/lines */
    margin: 0;
    height: 100%; /* Fill available space within tab */
    background-color: var(--editor-bg);
    border: 1px solid #ced4da;
    padding: 5px;
    min-height: 50px; /* Ensure it's visible */
    /* Use a monospace font for code/output */
    font-family: monospace;
    /* Prevent text wrapping */
    white-space: pre;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Custom scrollbar styling for WebKit browsers (Chrome, Safari, Edge) for output areas */
.output-area::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.output-area::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 3px;
}

.output-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.output-area::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Serial Monitor specific */
#serial-monitor-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Needed for flex layout inside */
}
#serial-monitor-content .output-area {
     flex-grow: 1; /* Allow pre area to take up space */
}
#serial-monitor-content .input-group {
    /* Allow wrapping on smaller screens if needed */
    flex-wrap: wrap;
}

#serial-monitor-content .input-group > .form-control {
    /* Ensure input takes full width when wrapped */
    flex-basis: 100%;
    margin-bottom: 5px; /* Add space when wrapped */
}

#serial-monitor-content .input-group > .btn {
    /* Ensure button takes full width when wrapped */
    flex-basis: 100%;
}

/* Resizer Handle Styling */
#resizer {
    height: 5px;
    background: #ccc;
    cursor: ns-resize;
    /* Ensure resizer is above bottom panel content but below modals etc. */
    z-index: 100;
    /* Add transition for smooth hiding */
    transition: height 0.3s ease, visibility 0.3s ease;
}

/* Style for when the resizer is hidden (matches panel state) */
#resizer.hidden {
    height: 0 !important; /* Force height to 0 */
    visibility: hidden;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    /* Adjust base font size slightly */
    body {
        font-size: 0.95rem; /* Slightly smaller base font */
    }

    /* Adjust editor font size for readability */
    .cm-editor {
        font-size: 13px; /* Slightly smaller editor font */
    }

    #sidebar {
        /* Make sidebar overlay content */
        position: fixed;
        /* Ensure it's above main content */
        z-index: 1050; /* Higher than default Bootstrap components */
        /* Start off-screen */
        transform: translateX(-100%);
        /* Full height */
        height: 100vh;
        /* Add transition for sliding effect */
        transition: transform 0.3s ease;
        /* Override inline styles potentially set by JS for width */
        width: 250px !important; /* Fixed width when open */
    }

    #sidebar.shown {
        /* Slide in */
        transform: translateX(0);
    }

    /* Hide the collapse button inside sidebar on small screens */
    #sidebar #hide-sidebar-button {
        display: none;
    }

    /* Ensure main content takes full width */
    #main-content {
        margin-left: 0 !important; /* Override potential inline styles */
        width: 100%;
    }

    /* Keep the toggle button visible */
    #show-sidebar-button {
        display: inline-block !important; /* Ensure it's always visible */
    }

    /* Optional: Add a backdrop */
    body.sidebar-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1040; /* Below sidebar */
    }

    /* Stack serial input group vertically on small screens */
    #serial-monitor-content .input-group {
        display: flex; /* Ensure flex display */
        flex-direction: column; /* Stack items vertically */
        width: 100%; /* Ensure group takes full width */
        padding: 0; /* Remove potential padding */
    }
    /* Ensure form control takes full width and has bottom margin */
    #serial-monitor-content .input-group > .form-control {
        width: 100%; /* Explicitly set width */
        max-width: 100%; /* Prevent exceeding container */
        box-sizing: border-box; /* Include padding/border */
        margin-bottom: 5px; /* Space below input */
        margin-right: 0; /* Reset horizontal margin */
        margin-left: 0; /* Reset horizontal margin */
        /* Remove flex-basis if previously set */
        flex-basis: auto;
    }
    /* Ensure button takes full width */
    #serial-monitor-content .input-group > .btn {
        width: 100%; /* Explicitly set width */
        max-width: 100%; /* Prevent exceeding container */
        box-sizing: border-box; /* Include padding/border */
        margin-left: 0; /* Reset horizontal margin */
        margin-right: 0; /* Reset horizontal margin */
        /* Remove flex-basis if previously set */
        flex-basis: auto;
    }

    /* Ensure output area wraps and hides horizontal scroll */
    .output-area {
        white-space: pre-wrap; /* Ensure wrapping is enabled */
        word-break: break-all; /* Break long words */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    /* Increase touch target for bottom panel tabs */
    #bottom-panel .nav-link {
        padding: 0.5rem 0.8rem; /* More padding */
    }

    /* Add spacing between header buttons */
    #main-content .bg-light .btn {
        margin-left: 4px; /* Add small left margin */
        margin-right: 4px; /* Add small right margin */
    }
    /* Remove margin from first/last buttons if needed */
    #main-content .bg-light .btn:first-child {
        margin-left: 0;
    }
     #main-content .bg-light .btn:last-child {
        margin-right: 0;
    }
}

/* Hide toggle button on larger screens if sidebar is visible */
@media (min-width: 769px) {
    #sidebar:not(.collapsed) + #main-content #show-sidebar-button {
         /* Hide hamburger when sidebar is open and screen is large */
        /* display: none; */ /* Re-evaluate if needed based on JS logic */
    }
    #sidebar.collapsed + #main-content #show-sidebar-button {
        display: inline-block !important; /* Ensure visible when collapsed */
    }
}

/*
    Add CSS variables for colors and support for light/dark mode using prefers-color-scheme.
    Add .light-mode and .dark-mode classes for manual override.
*/
:root {
    /* Light mode colors */
    --background: #fff;
    --foreground: #212529;
    --sidebar-bg: #f8f9fa;
    --sidebar-fg: #212529;
    --tab-bg: #fff;
    --tab-fg: #495057;
    --tab-active-bg: #fff;
    --tab-active-fg: #000;
    --panel-bg: #f8f9fa;
    --panel-fg: #212529;
    --editor-bg: #fff;
    --editor-fg: #212529;
    
    /* Scrollbar colors for light mode */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #181a1b;
        --foreground: #f1f3f4;
        --sidebar-bg: #23272b;
        --sidebar-fg: #f1f3f4;
        --tab-bg: #23272b;
        --tab-fg: #bfc4c9;
        --tab-active-bg: #181a1b;
        --tab-active-fg: #fff;
        --panel-bg: #23272b;
        --panel-fg: #f1f3f4;
        --editor-bg: #181a1b;
        --editor-fg: #f1f3f4;
        
        /* Scrollbar colors for dark mode */
        --scrollbar-track: rgba(255, 255, 255, 0.05);
        --scrollbar-thumb: rgba(255, 255, 255, 0.2);
        --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
    }
}

body.light-mode {
    --background: #fff;
    --foreground: #212529;
    --sidebar-bg: #f8f9fa;
    --sidebar-fg: #212529;
    --tab-bg: #fff;
    --tab-fg: #495057;
    --tab-active-bg: #fff;
    --tab-active-fg: #000;
    --panel-bg: #f8f9fa;
    --panel-fg: #212529;
    --editor-bg: #fff;
    --editor-fg: #212529;
    
    /* Scrollbar colors for light mode */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
}

body.dark-mode {
    --background: #181a1b;
    --foreground: #f1f3f4;
    --sidebar-bg: #23272b;
    --sidebar-fg: #f1f3f4;
    --tab-bg: #23272b;
    --tab-fg: #bfc4c9;
    --tab-active-bg: #181a1b;
    --tab-active-fg: #fff;
    --panel-bg: #23272b;
    --panel-fg: #f1f3f4;
    --editor-bg: #181a1b;
    --editor-fg: #f1f3f4;
    
    /* Scrollbar colors for dark mode */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}