/* Basic Reset & Font */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Modern Light/Dark Theme Variables */
:root {
    /* Light Theme */
    --bg-color-light: #ffffff;
    --text-color-light: #1a1a1a;
    --border-color-light: #e0e0e0;
    --header-bg-light: #f5f5f5;
    --textarea-bg-light: #ffffff;
    --button-bg-light: #4a90e2; /* Softer blue */
    --button-text-light: #ffffff;
    --button-hover-bg-light: #357abd; /* Darker blue */
    --tab-active-border-light: var(--button-bg-light);
    --code-bg-light: #f9f9f9;

    /* Dark Theme */
    --bg-color-dark: #121212;
    --text-color-dark: #e0e0e0;
    --border-color-dark: #333333;
    --header-bg-dark: #1e1e1e;
    --textarea-bg-dark: #1e1e1e;
    --button-bg-dark: #5a9ee2; /* Lighter blue for dark */
    --button-text-dark: #121212; /* Dark text on light blue */
    --button-hover-bg-dark: #7bb4e8; /* Lighter hover */
    --tab-active-border-dark: var(--button-bg-dark);
    --code-bg-dark: #1e1e1e; /* Match textarea */
}

body[data-theme='light'] {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}

body[data-theme='dark'] {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    transition: background-color 0.3s ease;
}
body[data-theme='light'] header {
    background-color: var(--header-bg-light);
    border-bottom: 1px solid var(--border-color-light);
}
body[data-theme='dark'] header {
    background-color: var(--header-bg-dark);
    border-bottom: 1px solid var(--border-color-dark);
}

header h1 {
    font-size: 1.5rem;
}

#theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}
#theme-toggle:hover {
    transform: scale(1.1);
}
body[data-theme='light'] #theme-toggle { color: var(--text-color-light); }
body[data-theme='dark'] #theme-toggle { color: var(--text-color-dark); }


/* Main Container - Flexbox for side-by-side layout (2 columns) */
.container {
    display: flex;
    padding: 1rem;
    gap: 1rem;
    min-height: calc(100vh - 150px); /* Adjust based on header/footer height */    
}

.input-section,
.output-section {
    flex: 1; /* Each takes half the space */
    display: flex;
    flex-direction: column; /* Keep column direction within sections */
    min-width: 0; /* Prevent flex items from overflowing */
}

h2 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    text-align: center;
}

/* Toolbar */
.toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: flex-start; /* Align items to the start */
    align-items: center; /* Center items horizontally */
    border-bottom: 1px solid;
    margin-bottom: 0; /* Remove margin below tabs */
    padding: 0 0.5rem; /* Add some padding */
}
body[data-theme='light'] .output-tabs { border-bottom-color: var(--border-color-light); }
body[data-theme='dark'] .output-tabs { border-bottom-color: var(--border-color-dark); }


.tab-button {
    padding: 0.6rem 1rem;
    border: none;
    border-bottom: 3px solid transparent; /* For active indicator */
    background: none;
    cursor: pointer;
    font-size: 1rem;
    margin-bottom: -1px; /* Overlap border */
    transition: border-color 0.2s ease, color 0.2s ease;
}
body[data-theme='light'] .tab-button { color: var(--text-color-light); }
body[data-theme='dark'] .tab-button { color: var(--text-color-dark); }

.tab-button.active {
    font-weight: bold;
}
body[data-theme='light'] .tab-button.active {
    border-bottom-color: var(--tab-active-border-light);
    color: var(--button-bg-light); /* Match border color */
}
body[data-theme='dark'] .tab-button.active {
    border-bottom-color: var(--tab-active-border-dark);
    color: var(--button-bg-dark); /* Match border color */
}

.tab-button:hover:not(.active) {
    color: #888; /* Subtle hover effect */
}

.output-toolbar {
    margin-left: auto; /* Push toolbar to the right */
    margin-bottom: 0; /* Remove margin */
    padding: 0.3rem 0; /* Adjust padding */
}

/* General Buttons */
button {
    border: none;
    border-radius: 5px; /* Slightly more rounded */
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    padding: 0.6rem 0.8rem; /* Adjust padding for icons */
    font-size: 1rem; /* Increase icon size slightly */
    line-height: 1; /* Ensure icon is centered vertically */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

button:active {
    transform: scale(0.98); /* Click effect */
    box-shadow: none; /* Remove shadow on click */
}

/* Toolbar Buttons */
.toolbar button {
    background-color: transparent; /* Make toolbar buttons less prominent initially */
    box-shadow: none;
    display: inline-flex; /* Align icon and text */
    align-items: center; /* Vertically center icon and text */
    gap: 0.4em; /* Add space between icon and text */
    font-size: 0.9rem; /* Slightly smaller font for button text */
    padding: 0.5rem 0.8rem; /* Adjust padding */
}

.toolbar button i {
    font-size: 1rem; /* Keep icon size */
    line-height: 1; /* Ensure icon aligns well */
}

body[data-theme='light'] .toolbar button {
    color: var(--button-bg-light); /* Use primary color for icon */
}
body[data-theme='dark'] .toolbar button {
    color: var(--button-bg-dark); /* Use primary color for icon */
}

body[data-theme='light'] .toolbar button:hover {
    background-color: rgba(74, 144, 226, 0.1); /* Light blue subtle hover */
}
body[data-theme='dark'] .toolbar button:hover {
    background-color: rgba(90, 158, 226, 0.15); /* Light blue subtle hover */
}

/* Specific Button Styling (e.g., Theme Toggle) */
#theme-toggle {
    background: none;
    border: none;
    font-size: 1.5rem; /* Keep size */
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: none; /* Remove general button shadow */
    padding: 0.2rem; /* Adjust padding */
}
#theme-toggle:hover {
    transform: scale(1.1);
}
#theme-toggle:active {
    transform: scale(1); /* Override general button active scale */
}
body[data-theme='light'] #theme-toggle { color: var(--text-color-light); }
body[data-theme='dark'] #theme-toggle { color: var(--text-color-dark); }


/* Textarea */
#markdown-input {
    width: 100%;
    height: 100%; /* Fill available space */
    min-height: 300px; /* Minimum height */
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 5px; /* Match buttons */
    font-family: monospace; /* Good for code */
    font-size: 0.95rem;
    resize: none; /* Disable manual resize, we'll use JS */
    overflow-y: auto; /* Add scroll if needed */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body[data-theme='light'] #markdown-input {
    background-color: var(--textarea-bg-light);
    color: var(--text-color-light);
    border-color: var(--border-color-light);
}
body[data-theme='dark'] #markdown-input {
    background-color: var(--textarea-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

/* HTML Output Area (Pre/Code) */
.output-section pre {
    flex-grow: 1; /* Allow pre to grow and fill space */
    overflow: auto; /* Add scrollbars if content overflows */
    border: 1px solid;
    border-radius: 5px; /* Match buttons */
    padding: 0 !important; /* Override Prism's default padding */
    margin: 0 !important; /* Override Prism's default margin */
    min-height: 300px;
    transition: border-color 0.3s ease;

}

body[data-theme='light'] .output-section pre {
    border-color: var(--border-color-light);
    /* Prism theme handles background/text */
}
body[data-theme='dark'] .output-section pre {
    border-color: var(--border-color-dark);
     /* Prism theme handles background/text */
}

/* Live Preview Area */
#html-preview {
    flex-grow: 1; 
    overflow: auto; 
    border: 1px solid;
    border-radius: 5px; /* Match buttons */
    padding: 1.5rem;
    min-height: 300px; /* Match textarea */
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    word-wrap: break-word;
}

body[data-theme='light'] #html-preview {
    background-color: var(--textarea-bg-light); /* Use similar background as input */
    color: var(--text-color-light);
    border-color: var(--border-color-light);
}
body[data-theme='dark'] #html-preview {
    background-color: var(--textarea-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

/* Output Panes */
.output-pane {
    flex-grow: 1; /* Allow pane to fill space */
    overflow: auto; /* Add scrollbars */
    border: 1px solid;
    border-top: none; /* Remove top border as tabs have bottom border */
    border-radius: 0 0 5px 5px; /* Round bottom corners - match */
    padding: 0.75rem;
    min-height: 300px; /* Match textarea */
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    word-wrap: break-word;
}
.output-pane:not(.active) {
    display: none; /* Hide inactive panes */
}

body[data-theme='light'] .output-pane {
    background-color: var(--textarea-bg-light);
    color: var(--text-color-light);
    border-color: var(--border-color-light);
}
body[data-theme='dark'] .output-pane {
    background-color: var(--textarea-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}

/* Specific styling for source code pane container */
#html-output-container {
    padding: 0; /* Remove padding as pre/code has its own */
}
#html-output-container pre {
    border: none; /* Remove border from pre inside the pane */
    border-radius: 0;
    min-height: 100%;
    height: 100%;
    margin: 0 !important;
    background-color: transparent !important; /* Inherit from pane */
}

/* Ensure code block fills the pre tag (Source Code View) */
#html-output {
    display: block; /* Make it block level */
    padding: 0.75rem; /* Add padding inside code */
    min-height: 100%; /* Try to fill parent */
    white-space: pre-wrap; /* Wrap long lines */
    word-wrap: break-word; /* Break words if needed */
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    border-top: 1px solid;
    transition: border-color 0.3s ease;
}
body[data-theme='light'] footer { border-top-color: var(--border-color-light); }
body[data-theme='dark'] footer { border-top-color: var(--border-color-dark); }


.input-section {
 /* Removed stray border */
}

@media (min-width: 769px) {
    .input-section,
    .output-section {
        width: 50%; /* Ensure each takes half the width */
        
    }
}

/* Responsive Design - Stack columns on smaller screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    header {
        padding: 1rem;
    }

    header h1 {
        font-size: 1.3rem;
    }

    #markdown-input,
    .output-pane { /* Target panes now */
        min-height: 250px; /* Adjust height for mobile */
    }

    .output-tabs {
        flex-wrap: wrap; /* Allow tabs/toolbar to wrap */
    }
    .output-toolbar {
        margin-left: 0; /* Reset margin for wrapping */
        width: 100%;
        justify-content: flex-end;
        padding-top: 0.5rem;
    }
}

/* Prism.js Light Theme Overrides */
body[data-theme='light'] #html-output-container code[class*="language-"],
body[data-theme='light'] #html-output-container pre[class*="language-"] {
    color: #333; /* Darker base text */
    background: none; /* Use pane background */
    text-shadow: none;
}

body[data-theme='light'] #html-output-container .token.comment,
body[data-theme='light'] #html-output-container .token.prolog,
body[data-theme='light'] #html-output-container .token.doctype,
body[data-theme='light'] #html-output-container .token.cdata {
    color: #999; /* Lighter gray for comments */
}

body[data-theme='light'] #html-output-container .token.punctuation {
    color: #777; /* Slightly darker gray for punctuation */
}

body[data-theme='light'] #html-output-container .token.property,
body[data-theme='light'] #html-output-container .token.tag,
body[data-theme='light'] #html-output-container .token.boolean,
body[data-theme='light'] #html-output-container .token.number,
body[data-theme='light'] #html-output-container .token.constant,
body[data-theme='light'] #html-output-container .token.symbol,
body[data-theme='light'] #html-output-container .token.deleted {
    color: #c92c2c; /* Reddish for tags, numbers, etc. */
}

body[data-theme='light'] #html-output-container .token.selector,
body[data-theme='light'] #html-output-container .token.attr-name,
body[data-theme='light'] #html-output-container .token.string,
body[data-theme='light'] #html-output-container .token.char,
body[data-theme='light'] #html-output-container .token.builtin,
body[data-theme='light'] #html-output-container .token.inserted {
    color: #2f9c0a; /* Green for strings, attributes */
}

body[data-theme='light'] #html-output-container .token.operator,
body[data-theme='light'] #html-output-container .token.entity,
body[data-theme='light'] #html-output-container .token.url,
body[data-theme='light'] #html-output-container .language-css .token.string,
body[data-theme='light'] #html-output-container .style .token.string {
    color: #a67f59; /* Brownish for operators, URLs */
    background: none;
}

body[data-theme='light'] #html-output-container .token.atrule,
body[data-theme='light'] #html-output-container .token.attr-value,
body[data-theme='light'] #html-output-container .token.keyword {
    color: #0077cc; /* Blue for keywords, attribute values */
}

body[data-theme='light'] #html-output-container .token.function,
body[data-theme='light'] #html-output-container .token.class-name {
    color: #d94a7a; /* Pink/Purple for functions */
}

body[data-theme='light'] #html-output-container .token.regex,
body[data-theme='light'] #html-output-container .token.important,
body[data-theme='light'] #html-output-container .token.variable {
    color: #e90; /* Orange for regex, variables */
}

body[data-theme='light'] #html-output-container .token.important,
body[data-theme='light'] #html-output-container .token.bold {
    font-weight: bold;
}
body[data-theme='light'] #html-output-container .token.italic {
    font-style: italic;
}

body[data-theme='light'] #html-output-container .token.entity {
    cursor: help;
}