/* --- START OF FILE style.css --- */
/*
   Enhanced to incorporate boxes, borders, better spacing, and some color accents.
   New or modified rules are marked with the comment "/* NEW CHANGES
   Further changes to move header info into H1 marked with "/* H1 INFO MOVE "
   Restructuring H1 info layout marked with "/* H1 INFO LAYOUT "
   Moved Copyright notice marked with "/* COPYRIGHT MOVE "
*/

/* --- General Body/Layout Styles (Existing) --- */
body {
    font-family: sans-serif;
    line-height: 1.45;
    margin: 0;
    background-color: #f4f4f4;
    font-size: 15px;
    overflow-x: hidden; /* Keep this, might be useful generally */
}

h1 {
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    margin: 0 15px 10px 15px;
    font-size: 1.7em;
    /* NEW CHANGES */
    background-color: #eaeff4; /* Light accent background for h1 */
    padding: 8px 15px;
    border-radius: 4px;
    /* H1 INFO MOVE - Flexbox for layout */
    display: flex;
    justify-content: space-between;
    /* H1 INFO LAYOUT - Align items top */
    align-items: flex-start;
    flex-wrap: wrap; /* Allow info to wrap on smaller screens */
    gap: 10px; /* Add gap between title/copyright group and info */
}

/* COPYRIGHT MOVE - Wrapper for title and copyright */
.h1-title-group {
    flex-shrink: 0; /* Prevent shrinking when space is tight */
}

/* COPYRIGHT MOVE - Style for the main title */
.h1-title {
     display: block; /* Ensure it takes its own line if needed */
}

/* COPYRIGHT MOVE - Style for copyright below title */
.h1-copyright {
    font-size: 0.8rem; /* Smaller font size */
    color: #555;      /* Slightly muted color */
    margin-top: 2px;   /* Small space below title */
    line-height: 1.2;
    font-weight: normal; /* Ensure it's not bold if h1 is */
}
.h1-copyright a {
    color: inherit; /* Inherit the grey color */
    text-decoration: none;
}
.h1-copyright a:hover {
    text-decoration: underline;
    color: #0056b3; /* Optional: Link color on hover */
}


/* H1 INFO MOVE - Style the container for the info */
/* H1 INFO LAYOUT - Arrange info items horizontally */
.h1-info {
    display: flex; /* Arrange items horizontally */
    gap: 20px; /* Space between info items */
    font-size: 0.6em; /* Relative to h1 font size */
    line-height: 1.3;
    text-align: center; /* Center text within items */
    color: #343a40;
    margin-left: auto; /* Push to the right */
    flex-shrink: 0; /* Prevent shrinking */
    align-items: flex-start; /* Align items to the top */
}

/* H1 INFO LAYOUT - Style for each info block */
.info-item {
    display: flex;
    flex-direction: column; /* Stack label above content */
    align-items: center; /* Center label and content */
    min-width: 80px; /* Give items some minimum width */
}

/* H1 INFO LAYOUT - Style for the labels */
.info-label {
    font-size: 0.8em; /* Smaller font for label */
    font-weight: bold;
    color: #555;
    margin-bottom: 3px;
    white-space: nowrap; /* Prevent label wrapping */
    text-transform: uppercase; /* Optional: Make labels uppercase */
    letter-spacing: 0.5px; /* Optional: Add letter spacing */
}

/* H1 INFO LAYOUT - Style for the content below label */
.info-content {
    font-size: 0.95em; /* Adjust content font size if needed */
}

/* REMOVED - Style for copyright text no longer needed here */
/* .info-item-copyright .info-content { ... } */

/* H1 INFO LAYOUT - Style the links within the info block */
.h1-info a {
    color: #0056b3;
    text-decoration: none;
    display: inline-block; /* Needed for icon centering */
    vertical-align: middle; /* Added for better icon alignment */
}
.h1-info a:hover {
    text-decoration: underline;
    color: #003d80;
}

/* H1 INFO LAYOUT - General style for icons within info links */
/* UPDATED: Made more general */
.h1-info a i { /* Target any <i> tag within the link */
    font-size: 1.8em; /* Default size */
    line-height: 1;
    color: #000; /* Default icon color (e.g., blue) */
    vertical-align: middle; /* Helps alignment */
    transition: color 0.2s ease; /* Smooth hover effect */
}
.h1-info a:hover i {
     color: #0056b3; /* Default hover color */
}

/* H1 INFO LAYOUT - Specific override for GitHub icon */
/* UPDATED: Only override color now */
.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 */
}

/* ADDED: Specific hover for the invoice icon (optional, can use default) */
.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;
    max-width: 1800px;
    margin: 0 auto;
    /* NEW CHANGES */
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background-color: #fff;
}
.left-column {
    flex: 1;
    min-width: 0;
    /* NEW CHANGES */
    padding: 15px 0;
}
.right-column {
    flex: 1;
    min-width: 0;
    /* NEW CHANGES */
    padding: 15px 0;
}

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

/* --- Add Element Section --- */
.add-element {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    /* NEW CHANGES */
    background-color: #ffffff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.add-element h2 { /* Style retained as it's a general H2 style */
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 8px;
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
    margin-top: 0;
    font-size: 1.5em;
}
.add-element > * {
    margin-bottom: 0;
    margin-right: 0;
}
.add-element label {
    margin-right: 4px;
    font-size: 0.95em;
}
#propertyInputsContainer {
    display: contents;
}
.property-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    border-left: 1px solid #eee;
    padding-left: 8px;
    gap: 4px;
}
.property-group label {
    margin-right: 0;
}
.property-group input[type="number"] {
    width: 70px;
    max-width: 70px;
    margin-right: 0;
    font-size: 0.95em;
    padding: 3px 4px;
}
.property-group .info {
    font-size: 0.85em;
    margin-left: 3px;
    white-space: nowrap;
}
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 {
    padding: 5px 10px;
    background-color: #5cb85c;
    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;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 0.9em;
    /* NEW CHANGES */
    border: 1px solid #ccc;
}
th, td {
    border: 1px solid #ddd;
    padding: 3px 5px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
td[data-id="initial"], td:nth-child(4) {
    white-space: normal;
}
th {
    background-color: #f0f0f0;
    font-weight: bold;
    font-size: 0.95em;
    padding: 4px 5px;
}
td input[type="number"] {
    width: 60px;
    max-width: 60px;
    margin: 0 1px;
    padding: 2px 3px;
    font-size: 1em;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid #ccc;
}
td input.rel-pos-input {
    width: 60px;
    max-width: 60px;
}
td[data-id="initial"] input[type="number"]:not([data-property='w0_um']) {
    width: 55px;
    max-width: 55px;
}
td[data-id="initial"] br {
    display: block;
    content: "";
    margin-top: 2px;
    margin-bottom: 0;
}
.remove-btn {
    background-color: #d9534f;
    color: white;
    padding: 2px 6px;
    font-size: 0.85em;
    border-radius: 2px;
    border: none;
    margin: 0;
}
.remove-btn:hover {
    background-color: #c9302c;
}

/* --- Plots Section --- */
.plots {
    margin-top: 0;
}
.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%;
    height: auto;
    aspect-ratio: 2.5 / 1;
    min-height: 120px;
}
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }

/* --- Plotly Plots Adjustments --- */
#plotW, #plotR {
    width: 100%;
    min-height: 180px;
    height: auto;
    aspect-ratio: 2.8 / 1;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    margin-top: 0;
    /* NEW CHANGES */
    border: 1px solid #ccc;
    border-radius: 4px;
}
.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;
}
.plotly-header h3 {
    margin: 0;
    border-bottom: none;
    flex-grow: 1;
    font-size: 1.05em;
    line-height: 1.2;
}
.export-button {
    padding: 3px 8px;
    font-size: 0.85em;
    background-color: #f0ad4e;
    color: white;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.2;
}
.export-button:hover {
    background-color: #ec971f;
}


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

/* STACK COLUMNS */
@media (max-width: 1500px) {
    .main-content {
        display: block;
        padding: 0 10px;
    }
    .left-column, .right-column {
        flex: none;
        width: 100%;
    }
    .left-column {
        margin-bottom: 20px;
    }
    body {
        font-size: 14px;
        overflow-x: auto; /* Re-apply here if needed */
    }
    h1 {
        margin: 0 10px 8px 10px;
        font-size: 1.6em;
    }
    /* Adjust info font size */
    .h1-info {
        font-size: 0.6em;
        gap: 15px; /* Reduce gap slightly */
    }
    .info-item {
        min-width: 70px; /* Reduce min-width */
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.15em;
    }

    #interactiveCanvas {
        min-height: 110px;
        aspect-ratio: 4 / 1;
    }
    #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;
    }
}

/* Further Compaction (stacked) */
@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;
        /* align-items: flex-start; Already set */
    }
    /* 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; /* Spread items out a bit */
        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;
    }
    .add-element select,
    .add-element input[type="number"],
    .add-element .property-group,
    #addElementBtn {
        width: 100%; /* Making add element inputs full width */
    }
    #propertyInputsContainer {
        gap: 5px;
    }
    .property-group {
        gap: 3px;
        padding-left: 5px;
    }
    .property-group input[type="number"]{
        width: 75px; /* Adjusting width */
    }

    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;
    }
    #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;
    }
}

/* Extra small (stacked) */
@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;
        /* COPYRIGHT MOVE: Adjust H1 gap when wrapping */
        gap: 5px;
    }
    /* COPYRIGHT MOVE: 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; /* Stack items vertically */
        align-items: flex-start; /* Align stacked items left */
        gap: 5px; /* Reduce gap for vertical stack */
        text-align: left; /* Align text left */
        width: 100%; /* Ensure it takes width */
        margin-top: 0; /* Reduce space when info block wraps */
    }
    .info-item {
       flex-direction: row; /* Put label and content side-by-side */
       align-items: baseline; /* Align baseline */
       gap: 6px; /* Gap between label and content */
       min-width: 0; /* Remove min-width */
       width: 100%; /* Take full width */
    }
    .info-label {
        margin-bottom: 0; /* Remove bottom margin */
        text-align: left;
        flex-shrink: 0; /* Prevent label shrinking */
        min-width: 80px; /* Give label fixed width */
        text-transform: none; /* Optional: remove uppercase */
        letter-spacing: 0; /* Optional: remove spacing */
    }
    /* REMOVED: No longer needed as copyright isn't an info item */
    /* .info-item-copyright .info-label { ... } */
    .info-content {
       text-align: left;
    }
     .h1-info .fab.fa-github {
        font-size: 1.5em; /* Slightly smaller icon */
    }

    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 select,
    .add-element input[type="number"],
    .add-element .property-group,
    #addElementBtn {
        width: 100%; /* Ensure full width on smallest screens */
    }
    .add-element label {
        min-width: 50px;
        font-size: 0.9em;
    }
    .property-group input[type="number"] {
        width: 80px;
        max-width: 90px;
    }

    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;
        aspect-ratio: 4 / 1;
        margin: 4px auto;
    }
    #plotW, #plotR {
        min-height: 140px;
        aspect-ratio: 2.5 / 1;
    }
    .plots > div:first-of-type label {
        display: block;
        margin-bottom: 2px;
    }
    .plotly-container {
        margin-bottom: 6px;
    }
}

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