/* ===================================
   BATTERY SIZING CALCULATOR
   Calculator-Specific Styles
   =================================== */

/* Input Sections */
.input-section {
    background: #FFF;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #A9A9A9;
}

.input-section h3 {
    color: #333;
    margin-top: 0px;
    margin-bottom: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
    font-size: 14px;
}

/* Load Table Styling */
.table-container {
    overflow-x: auto;
    margin-bottom: 15px;
}

#loadTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #F5F5F5;
}

#loadTable th {
    background: #DCDCDC;
    color: #333;
    font-weight: normal;
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #A9A9A9;
}

#loadTable td {
    padding: 2px 3px;
    background: #FFFFFF;
    border: 1px solid #A9A9A9;
}

/* Table Inputs */
#loadTable input[type="text"],
#loadTable input[type="number"],
#loadTable select {
    width: 100%;
    padding: 5px 5px;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    box-sizing: border-box;
    color: #333;
    background: #FFFFFF;
}


/* Row Number Column */
#loadTable .row-number {
    text-align: center;
    font-weight: normal;
    color: #333;
}

/* Delete Button in Table */
.delete-button {
    background:#FFFFFF;
    color: #333;
    border: none;
    border-radius: 2px;
    padding: 0px 6px;
    cursor: pointer;
    font-size: 20px;
    font-weight: normal;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.delete-button:hover {
    background: #4db8c4;
    color: #DCDCDC;
}

body.dark-mode .delete-button {
    background: #2a3f56;
    color: #e8f0f7;
    border: 1px solid #2d4a6b;
}

body.dark-mode .delete-button:hover {
    background: #2d4a6b;
}

/* Add Button Inline in Table Header */
.add-button-inline {
    background: #DCDCDC;
    color: #333;
    border: none;
    border-radius: 2px;
    padding: 0px 6px;
    cursor: pointer;
    font-size: 20px;
    font-weight: normal;
}

.add-button-inline:hover {
    background: #4db8c4;
    color: #DCDCDC;
}

body.dark-mode .add-button-inline {
    background: #2a3f56;
    color: #e8f0f7;
    border: 1px solid #2d4a6b;
}

body.dark-mode .add-button-inline:hover {
    background: #2d4a6b;
}

.add-button {
    background:#DCDCDC;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;

}

.add-button:hover {
    background: #006666;
}

/* Dark mode for load table */
body.dark-mode #loadTable th {
    background: #2a3f56;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

body.dark-mode #loadTable td {
    background: #243447;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

body.dark-mode #loadTable input[type="text"],
body.dark-mode #loadTable input[type="number"],
body.dark-mode #loadTable select {
    background: #243447;
    color: #e8f0f7;
}

body.dark-mode #loadTable .row-number {
    color: #e8f0f7;
}

.result-label {
    font-weight: normal;
    color: #333;
    font-size: 14px;
}

.result-value {
    color: #333;
    font-weight: normal;
    font-size: 14px;
}

/* Warnings Section */
.warnings-list {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 2px;
    padding: 15px;
}

body.dark-mode .warnings-list {
    background: #1a2332;
    border-color: #6fa8dc;
}

.warning-item {
    padding: 8px 0;
    color: #856404;
    display: flex;
    align-items: flex-start;

}

body.dark-mode .warning-item {
    color: #6fa8dc;
}

.warning-item::before {
    content: '⚠ ';
    margin-right: 8px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    #loadTable {
        font-size: 14px;
    }

    #loadTable th,
    #loadTable td {
        padding: 6px 4px;
    }
}

/* Results Table */
.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.results-table td {
    padding: 6px 6px;
    border: 1px solid #A9A9A9;
    vertical-align: middle;
}

.results-section-header td {
    background:#DCDCDC;
    font-weight: normal;
    color: #333;
    text-align: center;
    padding: 6px 6px;
}

.results-table .result-label {
    color: #333;
    background: #F9F9F9;
}

.results-table .result-value {
    color: #333;
    font-weight: normal;
    text-align: center;
    background: #F9F9F9;
}

/* Dark mode fix for dynamically generated table headers */
body.dark-mode #dutyCycleChart table th,
body.dark-mode #dutyCycleChart table thead td {
    background: #2a3f56;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

body.dark-mode #dutyCycleChart table td {
    background: #243447;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

/* Dark mode for input sections */
body.dark-mode .input-section {
    background: #1a2332 !important;
    border-color: #2d4a6b !important;
}

body.dark-mode .input-section h3 {
    color: #e8f0f7;
}


/* Make headers non-bold for "Duty Cycle Load Profile" and related analysis tables */
#dutyCycleChart table th {
  font-weight: normal;
}