/* --- START OF FILE style.css --- */
/*
   Contains styles for layout, elements, table, plots, canvas,
   and responsive media queries for the Gaussian Beam Simulator.
*/

/* --- General Body/Layout Styles --- */
body {
    font-family: sans-serif;
    line-height: 1.45;
    margin: 0;
    background-color: #f4f4f4;
    font-size: 15px;
    overflow-x: hidden; /* Prevent horizontal scroll on body */
}

/* --- Enhanced H1 Header --- */
h1 {
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    margin: 0 15px 10px 15px;
    font-size: 1.7em;
    background-color: #eaeff4; /* Light accent background for h1 */
    padding: 8px 15px;
    border-radius: 4px;
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space title and info */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Allow info block to wrap */
    gap: 10px; /* Add gap between title/copyright group and info */
}

/* Wrapper for title and copyright notice */
.h1-title-group {
    flex-shrink: 0; /* Prevent shrinking */
}

/* Main title text */
.h1-title {
     display: block;
}

/* Copyright notice below the title */
.h1-copyright {
    font-size: 0.8rem;
    color: #555;
    margin-top: 2px;
    line-height: 1.2;
    font-weight: normal;
}
.h1-copyright a {
    color: inherit;
    text-decoration: none;
}
.h1-copyright a:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Container for info items (Source, Author, etc.) */
.h1-info {
    display: flex;
    gap: 20px; /* Space between info items */
    font-size: 0.6em; /* Relative to h1 font size */
    line-height: 1.3;
    text-align: center;
    color: #343a40;
    margin-left: auto; /* Push to the right */
    flex-shrink: 0;
    align-items: flex-start;
}

/* Individual info block (label + content) */
.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

/* Label within an info block */
.info-label {
    font-size: 0.8em;
    font-weight: bold;
    color: #555;
    margin-bottom: 3px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Content area within an info block */
.info-content {
    font-size: 0.95em;
}

/* Links within the info block */
.h1-info a {
    color: #0056b3;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}
.h1-info a:hover {
    text-decoration: underline;
    color: #003d80;
}

/* General style for icons within info links */
.h1-info a i {
    font-size: 1.8em;
    line-height: 1;
    color: #000; /* Default icon color */
    vertical-align: middle;
    transition: color 0.2s ease;
}
.h1-info a:hover i {
     color: #0056b3; /* Default hover color */
}

/* Specific override for GitHub icon */
.h1-info a .fab.fa-github {
    color: #24292e; /* GitHub-like color */
}
.h1-info a:hover .fab.fa-github {
    color: #000; /* Darken GitHub icon on hover */
}
/* Specific hover for the invoice icon */
.h1-info a:hover .fa-solid.fa-file-invoice {
    color: #000; /* Darken blue on hover */
}


/* --- Two Column Layout --- */
.main-content {
    display: flex;
    gap: 15px;
    padding: 0 15px;
    align-items: flex-start; /* Align tops of columns */
    max-width: 1800px; /* Max width for very large screens */
    margin: 0 auto; /* Center the content */
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background-color: #fff; /* Background for the main area */
}
.left-column {
    flex: 1; /* Take up half the space */
    min-width: 0; /* Prevent flex item overflow */
    padding: 15px 0; /* Padding inside column */
}
.right-column {
    flex: 1; /* Take up half the space */
    min-width: 0; /* Prevent flex item overflow */
    padding: 15px 0; /* Padding inside column */
}

/* --- Section Headers --- */
h2 {
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.5em;
    background-color: #eaeff4; /* Accent background */
    padding: 6px 10px;
    border-radius: 4px;
}
h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #444;
    padding: 4px 0;
}

/* --- Add Element Section --- */
.add-element {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    align-items: center;
    gap: 8px; /* Spacing between controls */
    margin-bottom: 18px;
    background-color: #ffffff; /* White background box */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.add-element h2 { /* H2 inside this section */
    width: 100%; /* Take full width */
    flex-basis: 100%; /* Ensure it's on its own line */
    margin-bottom: 8px; /* Space below heading */
    /* Inherit general H2 styles */
}
.add-element > * {
    margin-bottom: 0; /* Reset default margins */
    margin-right: 0;
}
.add-element label {
    margin-right: 4px;
    font-size: 0.95em;
    white-space: nowrap;
}
#propertyInputsContainer {
    display: contents; /* Allow property groups to participate in flex layout */
}
.property-group {
    display: inline-flex; /* Align items inside horizontally */
    align-items: center;
    flex-wrap: nowrap;
    border-left: 1px solid #eee; /* Separator line */
    padding-left: 8px;
    gap: 4px;
}
.property-group label {
    margin-right: 0;
}
.property-group input[type="number"] {
    width: 70px;
    max-width: 70px; /* Limit width */
    margin-right: 0;
    font-size: 0.95em;
    padding: 3px 4px;
}
.property-group .info {
    font-size: 0.85em;
    margin-left: 3px;
    white-space: nowrap;
    color: #666;
}
input[type="number"], select {
    padding: 3px 4px;
    border: 1px solid #ccc;
    border-radius: 2px;
    vertical-align: middle;
    max-width: 100px;
    font-size: 0.95em;
    box-sizing: border-box;
}
button { /* General button style, used by "Add Element" */
    padding: 5px 10px;
    background-color: #5cb85c; /* Green */
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.95em;
}
button:hover {
    background-color: #4cae4c;
}

/* --- Table Section --- */
.elements-table {
    margin-top: 0;
    margin-bottom: 12px;
}

/* Style for the header containing h2 and Export/Import buttons */
.table-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
    background-color: #eaeff4; /* Match H2 background */
    padding: 6px 10px;
    border-radius: 4px;
    border-bottom: 1px solid #ccc;
}

/* Adjust h2 margin/padding within the new container */
.table-header-controls h2 {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background-color: transparent;
    flex-grow: 1; /* Allow h2 to take available space */
}

/* Container for the Export/Import buttons */
.table-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* General style for control buttons (Export/Import Setup) */
.control-button {
    padding: 4px 9px;
    font-size: 0.9em;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: white;
    white-space: nowrap;
}
.control-button i {
    font-size: 1em;
    line-height: 1;
}

/* Specific colors for Export/Import buttons */
#exportSetupBtn {
    background-color: #337ab7; /* Blue */
}
#exportSetupBtn:hover {
    background-color: #286090;
}
#importSetupBtn {
    background-color: #5bc0de; /* Cyan */
}
#importSetupBtn:hover {
    background-color: #31b0d5;
}

/* Table itself */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 0.9em;
    border: 1px solid #ccc;
    overflow-x: auto; /* Add horizontal scroll to table if needed */
    display: block; /* Required for overflow-x on table */
}
th, td {
    border: 1px solid #ddd;
    padding: 3px 5px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Prevent wrapping by default */
}
/* Allow wrapping in properties cell and initial beam cell */
td[data-id="initial"],
#opticsTableBody td:nth-child(4) { /* 4th column is Properties */
    white-space: normal;
}
th {
    background-color: #f0f0f0; /* Light grey header */
    font-weight: bold;
    font-size: 0.95em;
    padding: 4px 5px;
}
/* Inputs within table cells */
td input[type="number"] {
    width: 60px;
    max-width: 60px;
    margin: 0 1px;
    padding: 2px 3px;
    font-size: 1em; /* Match cell font size */
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #ccc;
}
td input.rel-pos-input {
    width: 60px;
    max-width: 60px;
}
/* Specific width adjustments for initial beam params */
td[data-id="initial"] input[type="number"]:not([data-property='w0_um']) {
    width: 55px;
    max-width: 55px;
}
td[data-id="initial"] br { /* Style line breaks in initial beam cell */
    display: block;
    content: "";
    margin-top: 2px;
    margin-bottom: 0;
}
/* Remove button style */
.remove-btn {
    background-color: #d9534f; /* Red */
    color: white;
    padding: 2px 6px;
    font-size: 0.85em;
    border-radius: 2px;
    border: none;
    margin: 0;
    cursor: pointer;
}
.remove-btn:hover {
    background-color: #c9302c;
}

/* --- Plots Section --- */
.plots {
    margin-top: 0;
}
/* Container for plot options checkboxes */
.plots > div:first-of-type {
    margin-bottom: 6px;
}
.plots > div:first-of-type label {
    margin-right: 10px;
    margin-bottom: 3px;
    font-size: 0.9em;
    display: inline-block;
}

/* --- Interactive Canvas --- */
#interactiveCanvas {
    display: block;
    margin: 8px auto 10px auto;
    background-color: #ffffff;
    border: 1px solid #bbb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
    max-width: 100%; /* Ensure it fits container */
    height: auto; /* Maintain aspect ratio */
    /* Reverted aspect-ratio */
    aspect-ratio: 2.5 / 1; /* Original aspect ratio */
    min-height: 120px;
}
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }

/* --- Plotly Plots Adjustments --- */
.plotly-container {
    margin-bottom: 10px;
}
.plotly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
    min-height: 20px; /* Ensure header has some height */
}
.plotly-header h3 {
    margin: 0;
    border-bottom: none;
    flex-grow: 1; /* Allow title to take space */
    font-size: 1.05em;
    line-height: 1.2;
}
.export-button { /* Style for Export W/R Data buttons */
    padding: 3px 8px;
    font-size: 0.85em;
    background-color: #f0ad4e; /* Orange */
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}
.export-button:hover {
    background-color: #ec971f;
}
/* Plotly divs */
#plotW, #plotR {
    width: 100%;
    min-height: 180px;
    height: auto; /* Maintain aspect ratio */
    aspect-ratio: 2.8 / 1;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    margin-top: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* --- Media Queries (Responsive Adjustments) --- */

/* Medium screens / Small Laptops - Stack Columns */
@media (max-width: 1500px) {
    .main-content {
        display: block; /* Stack columns */
        padding: 0 10px;
    }
    .left-column, .right-column {
        flex: none; /* Disable flex sizing */
        width: 100%; /* Full width */
    }
    .left-column {
        margin-bottom: 20px; /* Space between stacked columns */
    }
    body {
        font-size: 14px;
        overflow-x: auto; /* Allow horizontal scroll if needed */
    }
    h1 {
        margin: 0 10px 8px 10px;
        font-size: 1.6em;
    }
    .h1-info {
        font-size: 0.6em;
        gap: 15px;
    }
    .info-item {
        min-width: 70px;
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.15em;
    }
    #interactiveCanvas {
        min-height: 110px;
        /* aspect-ratio: 4.5 / 1; /* REMOVED OVERRIDE */
    }
    #plotW, #plotR {
        min-height: 160px;
        aspect-ratio: 3 / 1;
    }
    input[type="number"], select {
        max-width: 95px;
    }
    td input[type="number"] {
        width: 58px;
        max-width: 58px;
    }
    td input.rel-pos-input {
        width: 58px;
        max-width: 58px;
    }
    td[data-id="initial"] input[type="number"]:not([data-property='w0_um']) {
        width: 52px;
        max-width: 52px;
    }
    .table-header-controls {
        padding: 5px 8px;
        gap: 8px;
    }
    .control-button {
        padding: 3px 7px;
        font-size: 0.85em;
        gap: 4px;
    }
    table {
        font-size: 0.85em;
    }
}

/* Tablets - Further Compaction */
@media (max-width: 768px) {
    body {
        margin: 0;
        font-size: 13px;
    }
    .main-content {
        padding: 0 8px;
    }
    h1 {
        margin: 0 8px 6px 8px;
        font-size: 1.5em;
    }
    /* Adjust info layout when wrapped */
    .h1-info {
        font-size: 0.65em;
        margin-left: 0; /* Reset margin */
        flex-basis: 100%; /* Take full width when wrapped */
        margin-top: 8px; /* Add space when wrapped */
        justify-content: space-around;
        gap: 10px;
    }
     .info-item {
        min-width: 60px;
    }
    h2 {
        font-size: 1.3em;
        margin-bottom: 6px;
    }
    h3 {
        font-size: 1.1em;
        margin-top: 8px;
        margin-bottom: 4px;
    }
    .left-column {
        margin-bottom: 15px;
    }
    .add-element {
        gap: 5px;
        margin-bottom: 12px;
        /* Make add element inputs full width for easier tapping */
        flex-direction: column; /* Stack controls vertically */
        align-items: stretch; /* Stretch items full width */
    }
    #propertyInputsContainer {
        display: flex; /* Use flex for property groups */
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }
    .property-group {
        border-left: none; /* Remove border */
        padding-left: 0;
        gap: 5px; /* Adjust gap */
        width: 100%; /* Full width */
        justify-content: space-between; /* Space out label/input */
    }
    .property-group input[type="number"]{
         width: 80px; /* Adjust width */
         max-width: 100px;
         flex-shrink: 0; /* Prevent input shrinking too much */
    }
    .add-element label {
         flex-grow: 1; /* Allow label to take space */
         margin-right: 5px;
    }

    table {
        font-size: 0.85em;
        margin-top: 3px;
    }
    th, td {
        padding: 2px 4px;
    }
    td input[type="number"] {
        width: 55px;
        max-width: 55px;
        padding: 1px 2px;
    }
    td input.rel-pos-input {
        width: 55px;
        max-width: 55px;
    }
    td[data-id="initial"] input[type="number"]:not([data-property='w0_um']) {
        width: 50px;
        max-width: 50px;
    }
    #interactiveCanvas {
        min-height: 100px;
        /* aspect-ratio: 4.2 / 1; /* REMOVED OVERRIDE */
    }
    #plotW, #plotR {
        min-height: 150px;
        aspect-ratio: 2.8 / 1;
    }
    .plotly-container {
        margin-bottom: 8px;
    }
    .plotly-header {
        min-height: 18px;
        gap: 5px;
    }
    .plotly-header h3 {
        font-size: 1.0em;
    }
    .export-button {
        font-size: 0.8em;
        padding: 2px 5px;
    }
    .table-header-controls {
         /* Stack heading and buttons */
        flex-direction: column;
        align-items: flex-start; /* Align items left */
        gap: 5px;
    }
    .table-buttons {
        width: 100%; /* Make buttons take full width */
        justify-content: flex-start; /* Align buttons left */
    }
    .control-button {
        font-size: 0.8em;
    }
}

/* Small Phones - Maximum Compaction */
@media (max-width: 480px) {
    body {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
    }
    .main-content {
        padding: 0 5px;
    }
    h1 {
        margin: 0 5px 5px 5px;
        font-size: 1.4em;
        gap: 5px;
    }
    /* Let title group take width when wrapping */
    .h1-title-group {
         flex-basis: 100%; /* Allow title/copyright group to wrap */
    }
    /* Stack info items vertically */
    .h1-info {
        font-size: 0.7em;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        text-align: left;
        width: 100%;
        margin-top: 0;
    }
    .info-item {
       flex-direction: row; /* Label and content side-by-side */
       align-items: baseline;
       gap: 6px;
       min-width: 0;
       width: 100%;
    }
    .info-label {
        margin-bottom: 0;
        text-align: left;
        flex-shrink: 0;
        min-width: 80px; /* Give label fixed width */
        text-transform: none;
        letter-spacing: 0;
    }
    .info-content {
       text-align: left;
    }
     .h1-info a i { /* Make icons smaller */
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.2em;
        margin-bottom: 5px;
    }
    h3 {
        font-size: 1.0em;
        margin-top: 6px;
        margin-bottom: 3px;
    }
    .left-column {
        margin-bottom: 12px;
    }
    .add-element {
        padding: 8px; /* Reduce padding */
    }
    .add-element label {
        min-width: auto; /* Remove min-width for labels */
        font-size: 0.9em;
    }
    .property-group input[type="number"] {
        width: 70px; /* Further adjust input */
        max-width: 80px;
    }

    th, td {
        padding: 2px 3px;
    }
    td input[type="number"] {
        width: 50px;
        max-width: 50px;
    }
    td input.rel-pos-input {
        width: 50px;
        max-width: 50px;
    }
    td[data-id="initial"] input[type="number"]:not([data-property='w0_um']) {
        width: 48px;
        max-width: 48px;
    }
    #interactiveCanvas {
        min-height: 90px;
        margin: 4px auto;
        /* aspect-ratio: 4 / 1; /* REMOVED OVERRIDE */
    }
    #plotW, #plotR {
        min-height: 140px;
        aspect-ratio: 2.5 / 1;
    }
    .plots > div:first-of-type label {
        display: block; /* Stack checkboxes */
        margin-bottom: 2px;
    }
    .plotly-container {
        margin-bottom: 6px;
    }
}

/* --- END OF FILE style.css --- */