/*
  Nature-Inspired Theme (Evergreen & Berries)
  Light & Dark Mode Enabled
*/

:root {
  /* Light Mode (Default) */
  --bg-color: #F0F4F0; /* Misty morning air */
  --primary-container-bg: #FFFFFF;
  --secondary-container-bg: #E6EBE6;
  --text-color: #2F3E2F; /* Forest shadows */
  --header-bg: #4A6C4A; /* Calming evergreen */
  --header-text: #FFFFFF;
  --button-bg: #6A8A6A; /* Lighter evergreen */
  --button-hover-bg: #5A7A5A;
  --accent-color: #A94D4D; /* Muted berry red */
  --border-color: #D1D9D1;
  --shadow-color: rgba(47, 62, 47, 0.1);
  --input-bg: #FFFFFF;
  --input-border: #ccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode (Moonlit Forest) */
    --bg-color: #1A221A; /* Near-black green */
    --primary-container-bg: #253025;
    --secondary-container-bg: #1F281F;
    --text-color: #E0E6E0; /* Soft light green-grey */
    --header-bg: #385238;
    --header-text: #E0E6E0;
    --button-bg: #5A7A5A;
    --button-hover-bg: #6A8A6A;
    --accent-color: #C96D6D; /* Brighter berry red */
    --border-color: #3D4A3D;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --input-bg: #2F3E2F;
    --input-border: #3D4A3D;
  }
}

/* General Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1rem;
    text-align: center;
}

/* Main Content Layout */
.main-content {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}

.graph-container {
    flex: 3;
    min-width: 300px;
    padding: 1rem;
    background-color: var(--primary-container-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);
    border: 1px solid var(--border-color);
}

.sidebar {
    flex: 1;
    min-width: 300px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Sidebar Sections */
.controls-container,
.points-table-container,
.results-container,
.settings-container {
    background-color: var(--primary-container-bg);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);
    border: 1px solid var(--border-color);
}

h2 {
    margin-top: 0;
    color: var(--header-bg);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

/* Controls and Settings */
.controls-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.settings-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 15px; /* Increased gap for better spacing */
    align-items: center; /* Vertically align items in the center */
}

.setting-item {
    display: contents; /* Allows the children to be direct grid items */
}

/* Make labels and inputs take up one grid cell each by default */
.settings-container > .setting-item > label {
    grid-column: 1 / 2;
    text-align: right;
    padding-right: 10px;
}

.settings-container > .setting-item > input,
.settings-container > .setting-item > select {
    grid-column: 2 / 3;
}

/* Specific items that should span both columns */
.settings-container > h2,
.settings-container > #auto-select-best-fit {
    grid-column: 1 / -1; /* Span all columns */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    box-sizing: border-box;
}

input[type="color"] {
    padding: 2px;
    height: 35px;
}

button {
    padding: 10px 15px;
    border: none;
    background-color: var(--button-bg);
    color: var(--header-text);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: bold;
}

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

#auto-select-best-fit {
    grid-column: span 2;
    background-color: var(--accent-color);
}

#auto-select-best-fit:hover {
    opacity: 0.9;
}


/* Points Table */
.points-table-container {
    max-height: 250px;
    overflow-y: auto;
}

.points-table {
    width: 100%;
    border-collapse: collapse;
}

.points-table th, .points-table td {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: center;
}

.points-table th {
    background-color: var(--secondary-container-bg);
    font-weight: 600;
}

.points-table input {
    width: 90%;
    text-align: center;
}

/* Results */
.results-container p {
    margin: 0.5rem 0;
}
.results-container span {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: var(--accent-color);
}


/* Footer is removed */

/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        padding: 1rem 0;
    }
}

/* Loading Indicator Styles */
#loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#loading-indicator p {
    background-color: var(--primary-container-bg);
    color: var(--text-color);
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--primary-container-bg);
    margin: auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--shadow-color);
    position: relative;
}

.close-button {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    opacity: 0.7;
    text-decoration: none;
}

#tie-breaker-options {
    margin-top: 15px;
    margin-bottom: 20px;
}

#tie-breaker-options label {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

#tie-breaker-options label:hover {
    background-color: var(--secondary-container-bg);
}

#tie-breaker-options input[type="radio"] {
    margin-right: 10px;
}

#apply-tie-breaker {
    width: 100%;
    background-color: var(--accent-color);
}