/* ===================================
   TRANSFORMER LOAD GAUGE
   Calculator-Specific Styles
   =================================== */

/* Header Dropdown/Input Controls */

/* Voltage System and Transformer Config Dropdowns in Table */
.measurements-table select#voltageSystem,
.measurements-table select#transformerConfig {
    width: 100%;
    height: 30px;
    padding: 5px 8px;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    background: #F9F9F9;
    color: #333;
}

body.dark-mode .measurements-table select#voltageSystem,
body.dark-mode .measurements-table select#transformerConfig {
    background: #243447;
    color: #e8f0f7;
}


/* Legacy styling for any remaining inline usage (backwards compatibility) */
#voltageSystem {
    width: 275px;
    height: 30px;
    padding: 5px 8px;
    border: 1px solid #A9A9A9;
    border-radius: 2px;
    font-size: 14px;
    background: #F9F9F9;
    color: #333;
}


body.dark-mode #voltageSystem {
    background: #2a3f56;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

body.dark-mode #voltageSystem:focus {
    border-color: #5dade2;
}

#transformerConfig {
    width: 220px;
    height: 30px;
    padding: 5px 8px;
    border: 1px solid #A9A9A9;
    border-radius: 2px;
    font-size: 14px;
    background: #F9F9F9;
    color: #333;
}


body.dark-mode #transformerConfig {
    background: #2a3f56;
    color: #e8f0f7;
    border-color: #2d4a6b;
}

body.dark-mode #transformerConfig:focus {
    border-color: #5dade2;
}

/* ===================================
   RESULTS PANEL DROPDOWNS
   Existing Capacity (kVA) Column
   =================================== */

/* Target all select dropdowns inside the results table */
#load-distribution-table select,
.results-table select {
    width: 100%;
    min-width: 80px;
    height: 28px;
    padding: 4px 8px;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    background: #F5F5F5;
    color: #333;
    cursor: pointer;
}

/* Dark mode styling for results table dropdowns */
body.dark-mode #load-distribution-table select,
body.dark-mode .results-table select {
    background: #243447;
    color: #e8f0f7;
    border-color: #5dade2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    /* Stack dropdowns vertically on mobile */
    #projectTitle,
    #voltageSystem,
    #transformerConfig {
        width: 100% !important;
    }
    
    /* Adjust results table dropdowns for mobile */
    #load-distribution-table select,
    .results-table select {
        min-width: 70px;
        font-size: 13px;
    }
}

/* Dark mode for demand summary paragraph */
body.dark-mode #summary-demand,
body.dark-mode div[style*="font-size: 14px"] {
    color: #b8c9db !important;
}

body.dark-mode #summary-demand p {
    color: #b8c9db !important;
}