/* RSET Tool Styles */

#rset-tab .content-wrapper {
    max-width: 1400px;
    /* Increased to fit two columns with visual */
    margin: 0 auto;
    padding: 20px;
}

#rset-tab .split-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

#rset-tab .calculator-column {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-width: 0;
    /* Prevent flex overflow */
    position: relative;
    /* Context for sticky */
    max-height: 85vh;
    /* Limit height to allow scrolling within column */
    overflow-y: auto;
}

/* Distinct column backgrounds */
#col-dts {
    background-color: #f1fcf5;
    /* Light green tint */
    border: 1px solid #d4edda;
}

#col-ps {
    background-color: #f0f7ff;
    /* Light blue tint */
    border: 1px solid #cce5ff;
}

#rset-tab .sticky-panel {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Match background to column for sticky effect, or use white? */
    /* Using inherit or explicit transparent with backdrop filter might be cool, 
       but simple solid color matching the column is safer for overlap. */
    background: inherit;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-align: center;
    /* Ensure it covers content when scrolling */
    padding-top: 5px;
    /* Add some top padding */
}

#rset-tab .visual-container {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#rset-tab canvas {
    max-width: 100%;
    height: auto;
}

#rset-tab .sticky-result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

#rset-tab .sticky-result .value {
    color: #007bff;
    font-size: 1.5em;
}

#col-dts .sticky-result .value {
    color: #28a745;
}

#rset-tab .sticky-breakdown {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
    flex-wrap: wrap;
    background: #fdfdfd;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}

#rset-tab .sb-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

#rset-tab .sb-label {
    color: #888;
    font-weight: 500;
}

#rset-tab .sb-item span:last-child {
    font-weight: bold;
    color: #444;
}

/* Make sure inputs and results fit */
#rset-tab .inputs-subpanel {
    margin-bottom: 20px;
    padding-top: 10px;
}

#rset-tab .results-subpanel {
    margin-top: 20px;
    border-top: 2px solid #eee;
    padding-top: 20px;
}

#rset-tab .result-card {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
    margin-bottom: 10px;
}

#rset-tab .result-value {
    font-size: 2.5em;
    font-weight: bold;
    color: #007bff;
    margin: 10px 0;
}

#rset-tab .result-breakdown {
    text-align: left;
    margin-top: 15px;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
}

#rset-tab .breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em;
}

#rset-tab h2 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

#rset-tab h3 {
    font-size: 1.1em;
    color: #444;
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

#rset-tab .input-group {
    margin-bottom: 15px;
}

#rset-tab label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.85em;
    color: #555;
}

#rset-tab .form-control {
    width: 100%;
    padding: 6px 10px;
    /* Slightly tighter */
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95em;
    background: #fff;
}

#rset-tab .form-control:focus {
    border-color: #007bff;
    outline: none;
}

/* Accordion sections for RSET components */
#rset-tab .rset-section {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    /* Box shadow to make sections pop slightly */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#rset-tab .rset-section-header {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.95em;
    /* Default fallback */
    background: #e9ecef;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
}

#rset-tab .rset-section-header:hover {
    filter: brightness(0.95);
}

/* Specific contrast colors per column */
#col-dts .rset-section-header {
    background: #d4edda;
    /* Light green high contrast */
    color: #155724;
    border-bottom: 1px solid #c3e6cb;
}

#col-ps .rset-section-header {
    background: #d6d8db;
    /* Default greyish? No, lets align with blue theme */
    background: #cce5ff;
    /* Light blue high contrast */
    color: #004085;
    border-bottom: 1px solid #b8daff;
}

#rset-tab .rset-section-content {
    padding: 15px;
    background: #fff;
}

#rset-tab .hidden-section {
    display: none;
}

#rset-tab .helper-text {
    font-size: 0.8em;
    color: #777;
    margin-top: 3px;
    font-style: italic;
}

/* References Section */
#rset-references {
    margin-top: 40px;
    padding: 20px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    color: #555;
    font-size: 0.9em;
}

#rset-references h3 {
    margin-top: 0;
}

#rset-references ul {
    padding-left: 20px;
}

#rset-references li {
    margin-bottom: 5px;
}

@media (max-width: 900px) {
    #rset-tab .split-layout {
        flex-direction: column;
    }
}