/* Variable definitions for light and dark themes */
:root {
    /* Light theme variables */
    --background-light: #f5f5f8;
    --primary-light: #007BFF;
    --button-hover-light: #0056b3;
    --button-active-light: #218838;
    --error-light: #dc3545;
    --text-light: #333;
    --input-bg-light: #fff;
    --input-border-light: #ccc;
    --input-focus-light: #007BFF;
    --input-text-light: #333;
    --info-bg-light: #f8f9fa;
    --footer-bg-light: #f4f4f4;
    --footer-text-light: #777;
    --wrapper--bg-light:#f4f4f4;
    --wrapper-text-light: #333;
    --acc-background-light: #bdbdbd; /* Accordion background */
    --acc-color-light:#333; /* Accordion text color */
    --acc-active-background-light:#136dfc; /* Accordion active state background */
    --acc-after-color-light:#000000; /* Accordion icon color */
    --panel-background-light: #e2e2e2; /* Accordion panel background */
    --param-type-text-light:#6b6b6b; /* Parameter type text color */
    --page-selector-bacground-light:#ffffff; /* Page selector background on hover */

    /* Dark theme variables */
    --background-dark: #121212;
    --primary-dark: #bb86fc;
    --button-hover-dark: #3700b3;
    --button-active-dark: #9503c5;
    --error-dark: #cf6679;
    --text-dark: #e0e0e0;
    --input-bg-dark: #333;
    --input-border-dark: #555;
    --input-focus-dark: #bb86fc;
    --input-text-dark: #edeaea;
    --info-bg-dark: #333;
    --footer-bg-dark: #121212;
    --footer-text-dark: #bbb;
    --wrapper--bg-dark: #2d2d2d;
    --wrapper-text-dark: #e0e0e0;
    --acc-background-dark: #003aa7; /* Accordion background */
    --acc-color-dark:#e0e0e0; /* Accordion text color */
    --acc-active-background-dark:#7d00a6; /* Accordion active state background */
    --acc-after-color-dark:#ffffff; /* Accordion icon color */
    --panel-background-dark: #202020; /* Accordion panel background */
    --param-type-text-dark:#b5b5b5; /* Parameter type text color */
    --page-selector-background-dark:#7d00a6; /* Page selector background on hover */
}

/* Basic styles for the light theme */
body {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: var(--background-light);
    color: var(--text-light);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for theme switching */
}

/* Form container styling */
.form-container {
    background-color: white; /* Default background, can be overridden by theme */
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 600px; /* Limits the maximum width of the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Page header styling */
.page-header {
    margin-top: 8px;
    display: flex;
    justify-content: space-between; /* Aligns items to the ends of the container */
    align-items: center; /* Vertically aligns items in the center */
    background-color: #002b5a; /* Blue background */
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
}

/* Input field styling (text, number, email, select, textarea) */
input[type="text"], input[type="number"], input[type="email"], select, textarea {
    width: 100%; /* Makes input fields take the full width of their container */
    padding: 10px;
    margin: 8px 0 16px; /* Adds margin above and below */
    border: 1px solid var(--input-border-light);
    border-radius: 4px;
    font-size: 16px;
    background-color: var(--input-bg-light);
    color: var(--input-text-light);
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Input field focus styling */
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    border-color: var(--input-focus-light); /* Highlights the input field on focus */
    outline: none; /* Removes the default browser outline */
}

/* General button styling */
button {
    background-color: var(--primary-light);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth background color transition on hover/active */
}

button:hover {
    background-color: var(--button-hover-light); /* Style for button on hover */
}

button:active {
    background-color: var(--button-active-light); /* Style for button when pressed */
}

/* Utility classes for hiding and showing elements */
.hidden {
    display: none; /* Hides the element */
}

.visible {
    display: block; /* Shows the element as a block-level element */
}

/* Informational block styling */
.info-block {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--info-bg-light);
    border-left: 5px solid var(--primary-light); /* Adds a colored left border */
    font-size: 16px;
    color: var(--text-light);
}

/* Footer styling */
.footer {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
    color: var(--footer-text-light);
    background-color: var(--footer-bg-light);
}

/* Responsive input styling for select and checkbox */
select, input[type="checkbox"] {
    margin-bottom: 20px;
    max-width: 300px; /* Restricts maximum width for these specific inputs */
    vertical-align: middle; /* Aligns them vertically with adjacent text or elements */
}

/* Specific button styling for the submit button */
button[id^="submitButton_"] {
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto; /* Centers the button if its parent is a block or flex container */
    margin-right: auto; /* Centers the button */
    display: block; /* Makes the button a block element to enable centering with margin auto */
    background-color: #4CAF50; /* Green background */
    color: #fff;
}

button[id^="submitButton_"]:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* Specific button styling for the back button */
button#backButton {
    padding: 12px 24px;
    font-size: 16px;
    background-color: #007bff; /* Blue background */
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
    margin-left: 10px; /* Adds some space to its left */
    display: inline-block; /* Allows it to sit on the same line as other elements */
}

button#backButton:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Icon button styling (e.g., for +/- buttons) */
.icon-button {
    background-color: transparent; /* No background color */
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 50%; /* Makes the button circular */
    transition: background-color 0.3s;
}

.icon-button:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Slight background on hover for visual feedback */
}

/* SVG icon styling within icon buttons */
.icon-svg {
    width: 32px;
    height: 32px;
    stroke: #000000; /* Default stroke color for the icon */
}

.icon-button:hover .icon-svg {
    stroke: #d7d7d7; /* Stroke color on hover */
}

/* Specific styling for minus and plus icon buttons */
button#minusButton, button[id^="plusButton_"] {
    background-color: transparent; /* Explicitly transparent background */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

button[id^="plusButton_"] {
    margin-bottom: 10px; /* Adds space below the plus button */
}

button#minusButton:hover {
    background-color: #69393981; /* Semi-transparent red-ish background on hover */
}

button#minusButton:active {
    background-color: #74000081; /* Darker semi-transparent red-ish background when active */
}

button[id^="plusButton_"]:hover {
    background-color: #5492646e; /* Semi-transparent green-ish background on hover */
}

button[id^="plusButton_"]:active {
    background-color: #00740a67; /* Darker semi-transparent green-ish background when active */
}

/* Specific SVG stroke colors for minus and plus buttons */
button#minusButton .icon-svg {
    stroke: #ff0000; /* Red stroke for minus icon */
}

button[id^="plusButton_"] .icon-svg {
    stroke: #4CAF50; /* Green stroke for plus icon */
}

/* API link styling */
.apiLink {
    display: block; /* Ensures it takes its own line */
    margin-top: 20px;
    color: blue; /* Standard link color */
}

/* Styling for preformatted text (e.g., code blocks) */
pre {
    background-color: #c5c5c5; /* Light grey background */
    border: 1px solid #2d2828; /* Dark border */
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto; /* Allows horizontal scrolling for long lines */
    color: #0B7500; /* Green text color, often used for code */
}

/* Notice text styling */
.Notice {
    font-size: 14px;
    background-color: #b6b6b6; /* Grey background */
    color:#000000; /* Black text */
}

/* Wrapper for API selector and input group */
.input-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* Space between child elements */
    margin: 20px 0;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    background-color: var(--wrapper--bg-light);
    color: var(--wrapper-text-light);
}

/* API selector (dropdown) styling */
.page-selector {
    display: flex;
    flex-direction: column; /* Stacks label and select vertically */
    align-items: flex-start; /* Aligns items to the start (left) */
    margin: 0; /* Resets default margin */
}

.page-selector label {
    font-size: 18px;
    font-weight: bold;
    color: var(--wrapper-text-light);
    margin-bottom: 8px;
}

.page-selector select {
    padding: 12px;
    border: 2px solid #007BFF; /* Blue border */
    border-radius: 8px;
    background-color: var(--wrapper--bg-light);
    font-size: 16px;
    color: var(--wrapper-text-light);
    width: 250px; /* Fixed width for the select dropdown */
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for all properties */
}

.page-selector select:hover {
    background-color: var(--page-selector-bacground-light);
    border-color: #0056b3; /* Darker blue border on hover */
}

/* Accordion styles */
.accordion {
    background-color: var(--acc-background-light);
    color: var(--acc-color-light);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: 1px solid black;
    outline: none;
    transition: background-color 0.4s; /* Smooth background transition */
    margin-top: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Positions icon to the right */
}

/* Accordion active and hover states */
.accordion.active, .accordion:hover { /* Note: .active class for JS to toggle */
    background-color: var(--acc-active-background-light);
}

/* Accordion icon styling (using ::after pseudo-element for a simple indicator if not using SVG) */
.accordion:after {
    /* content: '\02795'; Unicode symbol (+) - can be used if not using an SVG icon */
    font-size: 13px;
    color: var(--acc-after-color-light);
    float: right; /* Aligns to the right, but flexbox on .accordion is preferred */
    margin-left: 5px;
}

/* Accordion icon rotation when active */
.accordion.active .accordion-icon {
    transform: rotate(180deg); /* Rotates the icon when accordion is open */
}

/* General accordion icon styling */
.accordion-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease; /* Smooth rotation transition */
}

/* Icon container within accordion (if needed, can often be simplified) */
.icon {
    float: right; /* Alternative to flexbox, ensure parent handles clearing if necessary */
    display: flex;
    align-items: center;
}

/* Icons for open/closed state (if using separate SVGs/images) */
.open-icon,
.closed-icon {
    width: 16px;
    height: 16px;
}

/* Accordion panel (content area) styling */
.panel {
    padding: 0 18px; /* Padding inside the panel, but not at the top */
    background-color: var(--panel-background-light);
    display: none; /* Hidden by default, shown by JS */
    overflow: hidden; /* Ensures content doesn't spill out during animation */
    border-left: 2px solid var(--acc-active-background-light);
    border-right: 2px solid var(--acc-active-background-light);
    border-bottom: 2px solid var(--acc-active-background-light);
    margin-bottom: 10px; /* Space below the panel */
    transition: max-height 0.2s ease-out; /* Smooth opening/closing animation */
}

/* Styling for array parameter entry sections */
.arrayParamEnter{
    margin-left : auto; /* Aligns to the right if in a flex container allowing it */
    border: 2px solid #ccc;
    border-radius: 5px;
}

/* Styling for containers identified by partial ID (e.g., "paramContainer") */
[id*="Container"] { /* Selects elements where 'Container' is part of the ID */
    margin-left : auto;
    padding: 10px;
}

/* Styling for parameter entry rows */
[class*="entry"] { /* Selects elements where 'entry' is part of the class name */
    display: flex;
    align-items: center; /* Vertically aligns items in the entry row */
    margin-bottom: 15px;
    margin-left: auto; /* Pushes the entry to the right if possible */
}

/* General parameter row styling */
.parameter {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Parameter name styling */
.param-name {
    font-weight: bold;
    width: 80px; /* Fixed width for parameter names for alignment */
    color: var(--text-light);
}

/* Parameter information (description and type) styling */
.param-info {
    /* flex: 1; Takes up remaining space if needed, but currently fixed margin */
    display: flex;
    flex-direction: column; /* Stacks description and type vertically */
    margin-left: 70px; /* Space between name and info */
    margin-right: 15px; /* Space before input field */
    color: var(--text-light)
}

.param-info span { /* Typically for parameter description or additional details */
    font-size: 14px;
    color: var(--param-type-text-light);
}

/* Parameter input field specific styling (checkbox) */
.parameter input[type="checkbox"] {
    padding: 8px; /* Note: Checkboxes don't typically use padding directly on the input */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px; /* Can be large for a checkbox, consider adjusting or using for a wrapper */
    font-size: 14px; /* Affects associated label if any, not checkbox size itself */
    color: #333;
    margin-left: auto; /* Pushes input to the right */
}

/* Parameter input field specific styling (color picker) */
.parameter input[type="color"] {
    padding: 3px; /* Minimal padding for color input */
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px; /* Consistent height with other inputs */
    width: 220px; /* Specific width */
    font-size: 14px;
    color: #000000;
    margin-left: auto; /* Pushes input to the right */
}

/* Parameter input field styling (select and text) for consistent appearance */
.parameter select,
.parameter input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px; /* Consistent width */
    font-size: 14px;
    color: #333; /* Default text color, overridden by theme */
    margin-left: auto; /* Pushes input to the right */
    background-color: #fff; /* Default background, overridden by theme */
    text-align: center; /* Centers text within the input/select */
    box-sizing: border-box;
    height: 40px; /* Consistent height */
}

/* Remove default browser styling for select elements within .parameter */
.parameter select {
    appearance: none;
    -webkit-appearance: none; /* Safari and Chrome */
    -moz-appearance: none;    /* Firefox */
    line-height: normal; /* Helps align text vertically */
}

/* Placeholder text styling for text inputs within .parameter */
.parameter input[type="text"]::placeholder {
    color: #aaa; /* Light grey placeholder text */
    font-style: italic;
}

/* Parameter type text styling (e.g., "string", "integer") */
.param-type {
    font-style: italic;
    color:var(--param-type-text-light); /* Uses theme variable */
    font-size: 13px;
}

/* Dark theme overrides (applied when user prefers dark color scheme) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background-dark);
        color: var(--text-dark);
    }

    .form-container {
        background-color: #2c2c2c; /* Specific dark background for form container */
    }

    /* No specific .form-header color override for dark needed if page-header is used and not .form-header */
    /* .form-header {
        color: var(--text-dark);
    } */

    /* Input fields in dark mode */
    input[type="text"], .parameter input[type="text"],
    input[type="number"], .parameter input[type="number"],
    input[type="email"],  .parameter input[type="email"],
    select,  .parameter select,
    textarea, .parameter textarea {
        background-color: var(--input-bg-dark);
        color: var(--input-text-dark);
        border: 1px solid var(--input-border-dark);
    }

    /* Input field focus in dark mode */
    input[type="text"]:focus, .parameter input[type="text"]:focus,
    input[type="number"]:focus, .parameter input[type="number"]:focus,
    input[type="email"]:focus, .parameter input[type="email"]:focus,
    /* .parameter input[type="checkbox"], No specific focus for checkbox needed here unless visually different */
    select:focus, .parameter select:focus,
    textarea:focus, .parameter textarea:focus {
        border-color: var(--input-focus-dark);
    }

    /* Buttons in dark mode */
    button {
        background-color: var(--primary-dark);
        /* Assuming text color remains white or is handled by a specific button text color variable if needed */
    }

    button:hover {
        background-color: var(--button-hover-dark);
    }

    button:active {
        background-color: var(--button-active-dark);
    }

    /* Info block in dark mode */
    .info-block {
        background-color: var(--info-bg-dark);
        color: var(--text-dark);
        border-left-color: var(--primary-dark); /* Match border with primary dark color */
    }

    /* Footer in dark mode */
    .footer {
        background-color: var(--footer-bg-dark);
        color: var(--footer-text-dark);
    }

    /* Input wrapper in dark mode */
    .input-wrapper {
        background-color: var(--wrapper--bg-dark);
        color: var(--text-dark); /* General text color for wrapper */
        border-color: var(--input-border-dark); /* Match border with input border */
    }

    /* Page selector label and select in dark mode */
    .page-selector label{
        color: var(--wrapper-text-dark);
    }
    .page-selector select{
        color: var(--wrapper-text-dark);
        background-color: var(--wrapper--bg-dark);
        border-color: var(--input-focus-dark); /* Match border with focused input */
    }
    .page-selector select:hover {
        background-color: var(--page-selector-background-dark); /* Specific hover background */
    }

    /* Accordion in dark mode */
    .accordion {
        background-color: var(--acc-background-dark);
        color:var(--acc-color-dark);
        border-color: var(--input-border-dark); /* Consistent border color */
    }
    .accordion.active, .accordion:hover {
        background-color: var(--acc-active-background-dark);
    }
    .accordion:after { /* Accordion icon color in dark mode */
        color: var(--acc-after-color-dark);
    }

    /* Accordion panel in dark mode */
    .panel {
        background-color: var(--panel-background-dark);
        border-left-color: var(--acc-active-background-dark); /* Match border colors */
        border-right-color: var(--acc-active-background-dark);
        border-bottom-color: var(--acc-active-background-dark);
    }

    /* Parameter text elements in dark mode */
    .param-name, .param-info { /* Text color for parameter name and its info block */
        color: var(--text-dark);
    }
    .param-info span, .param-type { /* Text color for parameter type/description */
        color:var(--param-type-text-dark);
    }
    pre { /* Preformatted text in dark mode */
        background-color: #2c2c2c;
        border-color: #555;
        color: #90caf9; /* Lighter text color for code */
    }
    .Notice { /* Notice block in dark mode */
        background-color: #424242;
        color: var(--text-dark);
    }
}

/* Media query for screens with a maximum width of 600px (smartphones in vertical orientation) */
@media (max-width: 600px) {
    body {
        padding: 0 15px; /* Reduced side padding */
        max-width: none; /* Removes max-width restriction */
    }

    .form-container {
        padding: 15px; /* Reduced padding */
    }

    .page-header {
        flex-direction: column; /* Stack header items vertically */
        align-items: flex-start; /* Align items to the left */
    }

    /* Full width for input elements on small screens */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea,
    .parameter input[type="text"],
    .parameter select,
    .parameter input[type="checkbox"],
    .parameter input[type="color"] {
        width: 100%; /* Inputs take full available width */
        margin-left: 0; /* Remove left margin */
    }

    /* Full width for buttons on small screens */
    button#submitButton,
    button#backButton,
    .icon-button,
    button#minusButton,
    button#plusButton {
        width: 100%;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Input wrapper adjustments for small screens */
    .input-wrapper {
        flex-direction: column; /* Stack API selector and input group vertically */
        align-items: stretch; /* Stretch items to full width */
        padding: 15px;
        gap: 10px; /* Reduced gap between elements */
    }

    .page-selector {
        width: 100%; /* Full width for page selector container */
    }

    .page-selector select {
        width: 100%; /* Select element takes full width */
    }

    /* Accordion adjustments for small screens */
    .accordion {
        font-size: 15px; /* Slightly smaller font */
        padding: 12px; /* Reduced padding */
    }

    /* Parameter layout adjustments for small screens */
    .parameter {
        flex-direction: column; /* Stack parameter name, info, and input vertically */
        align-items: flex-start; /* Align items to the left */
        margin-bottom: 10px;
    }

    .param-name {
        width: 100%; /* Parameter name takes full width */
        margin-bottom: 5px; /* Space below name */
    }

    .param-info {
        margin-left: 0; /* Remove left margin */
        margin-bottom: 5px; /* Space below info */
    }

    /* Styling for elements directly inside accordion panels on small screens */
    .panel > div { /* Selects direct div children of .panel */
        display: block; /* Ensure they stack vertically */
        margin-bottom: 10px; /* Add some space below each item */
    }

    /* Styling for parameter entries within panels on small screens */
    .panel [class*="entry"] {
        flex-direction: column; /* Stack items vertically within entries */
        align-items: flex-start;
    }

    /* Styling for array parameter entry children on small screens */
    .arrayParamEnter > div {
        display: block;
        margin-bottom: 10px;
    }

    /* Container adjustments for small screens */
    [id*="Container"] {
        margin-left: 0; /* Remove left margin */
        padding: 10px; /* Consistent padding */
    }

    /* Notice block adjustments for small screens */
    .Notice {
        font-size: 13px; /* Slightly smaller font */
        padding: 10px;
    }

    /* Preformatted text adjustments for small screens */
    pre {
        font-size: 11px; /* Smaller font for code blocks */
        white-space: pre-wrap; /* Wrap long lines */
        word-break: break-word; /* Break long words to prevent overflow */
    }
}