/* ===================================
   PV BATTERY SIZING CALCULATOR (IEEE 1013-2019)
   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: #F9F9F9;
}

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

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

/* 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;
}

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

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

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

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

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

/* 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;
}

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

    #loadTable {
        font-size: 14px;
    }

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

/* Print Styles */
@media print {
    .input-section {
        page-break-inside: avoid;
    }

    .file-menu-container,
    .theme-toggle {
        display: none !important;
    }

    .delete-button,
    .add-button-inline {
        display: none !important;
    }
}

/* Dark mode fix for number input spinners */
body.dark-mode input[type="number"]:hover::-webkit-inner-spin-button,
body.dark-mode input[type="number"]:hover::-webkit-outer-spin-button {
    opacity: 1;
    background: #2d4a6b;
    border-radius: 2px;
}

body.dark-mode input[type="number"]:hover::-webkit-inner-spin-button:hover,
body.dark-mode input[type="number"]:hover::-webkit-outer-spin-button:hover {
    background: #5a7a9e;
}

/* Dark mode for subtitle text and labels */
body.dark-mode .input-section h3 {
    color: #e8f0f7;
}

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

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 .results-section-header td {
    background: #2a3f56 !important;
    color: #e8f0f7 !important;
    border-color: #2d4a6b !important;
}

body.dark-mode .results-table .result-label,
body.dark-mode .results-table .result-value {
    background: #243447 !important;
    color: #e8f0f7 !important;
    border-color: #2d4a6b !important;
}