/* Import Manrope Font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap');

#ltus-plugin-wrapper {
    font-family: 'Manrope', sans-serif;
    color: #233741; /* Dark */
    background-color: #f8f9fa; /* Light grey background for the whole plugin area */
    /* padding: 20px; */ /* (f) Original padding */
    padding: 0px; /* (f) Reduce padding of the plugin to 0px */
    border-radius: 5px; /* This might look odd with 0px padding, consider removing or adjusting if container bg is different from page bg */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    width: 100%; /* (h) Ensure wrapper tries to use full available width */
    box-sizing: border-box; /* (h) Consistent box model */
}

/* Add a new inner wrapper if padding is desired for content but not the main plugin box */
.ltus-plugin-content-inner {
    padding: 15px; /* Restore some padding for content if needed */
}


#ltus-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 35px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dde2e6;
     /* If using .ltus-plugin-content-inner, controls might need padding here or rely on parent 
    padding-left: 15px; /* Add padding if main wrapper is 0px */
    /*padding-right: 15px;
    padding-top: 15px; /* Add padding if main wrapper is 0px */

}

#ltus-series-selectors-group { /* Wrapper for label + buttons */
    width: 100%; /* Allow this group to span full width to contain wrapped buttons */
}

#ltus-series-selectors-group p {
    margin: 0 0 8px 0; /* (a) Reduced margin slightly */
    font-size: 13px;
    font-weight: 500;
    color: #4E7387; /* Primary */
}

#ltus-series-selectors { /* Actual button container */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* (b) Wrap the column buttons */
    align-items: center;
    gap: 8px; /* (a) Reduced gap slightly */
}


.ltus-series-button,
#ltus-update-chart-button {
    background-color: #4E7387; /* Primary */
    color: white;
    border: none;
    /* padding: 8px 16px; */ /* (a) Original padding */
    padding: 6px 12px;   /* (a) Make all buttons smaller by 25% - padding */
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    /* font-size: 14px; */ /* (a) Original font-size */
    font-size: 11px;    /* (a) Make all buttons smaller by 25% - font size */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ltus-series-button:hover,
#ltus-update-chart-button:hover {
    background-color: #233741; /* Dark */
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.ltus-series-button.active, /* General active state, e.g. during click */
#ltus-update-chart-button:active {
    background-color: #ff4d37; /* Highlight */
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ltus-series-button.selected { /* Specific state for selected series */
    background-color: #ff4d37; /* Highlight */
    color: white;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Unified input group styling */
.ltus-date-picker-group, 
#ltus-investment-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#ltus-date-pickers {
    display: flex;
    /*flex-direction: row; */
    gap: 5px;
    align-items: flex-end; 
}
.ltus-date-picker-group,
#ltus-investment-input {
    display: flex;
    flex-direction: column;
}

/* Labels - appear above inputs */
.ltus-date-picker-group label,
#ltus-investment-input label {
    font-size: 13px;
    font-weight: 500;
    color: #48576A;
    margin-bottom: 1px; /* Space between label and input */
    order: 1; /* Explicitly place label first */
}

#ltus-date-pickers input[type="date"],
#ltus-date-pickers input[type="month"],
#ltus-date-pickers input[type="number"], 
#ltus-investment-input input[type="number"] {
    order: 2;
    font-size: 13px;
    width: 100px;
    background-color: rgba(78, 115, 135, 0.1); 
    border: none;
    border-bottom: 3px solid #4E7387; 
    padding: 1px 6px;
    box-shadow: none;
    outline: none;
    border-radius: 2px 2px 0 0; 
    font-family: 'Manrope', sans-serif;
}
#ltus-investment-input input[type="number"] {
    width: 100px;
}
#ltus-date-pickers input[type="number"]::placeholder {
    color: #48576A;
    opacity: 0.7;
}


#ltus-chart-container {
    width: 100%;
    min-height: 150px; /* Reduced default height slightly */
    margin-bottom: 20px;
    position: relative;
    /* If using .ltus-plugin-content-inner, chart might need padding here or rely on parent */
    padding-left: 15px; /* Add padding if main wrapper is 0px */
    padding-right: 15px;
}
#ltus-plotly-chart {
    width: 100%;
    height: 100%;
    min-height: 450px;
}

#ltus-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(78, 115, 135, 0.2);
    border-radius: 50%;
    border-top-color: #4E7387;
    border-right-color: #4E7387;
    animation: ltus-spin 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes ltus-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


.ltus-metrics-container {
    background-color: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #e3e6f0;
    /* If using .ltus-plugin-content-inner, metrics might need padding here or rely on parent */
    margin-left: 15px; /* Add margin if main wrapper is 0px padding */
    margin-right: 15px;
}
.ltus-metrics-container:last-child {
    margin-bottom: 0; /* Remove bottom margin from last container if main padding is 0 */
     /* If using .ltus-plugin-content-inner, this might not be needed */
    margin-bottom: 15px; /* If main wrapper is 0px, last metrics container might need bottom padding or margin */

}


.ltus-metrics-heading {
    font-size: 18px; /* Heading font size remains the same as per (g) */
    font-weight: 700;
    color: #4E7387; 
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e6f0;
}
.ltus-metrics-heading.ltus-expandable-trigger {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ltus-arrow {
    font-size: 17px;
    transition: transform 0.3s ease;
}
.ltus-expandable.open .ltus-arrow {
    transform: rotate(90deg);
}


.ltus-metrics-content {
    display: grid;
    gap: 8px 15px; /* Reduced gap slightly */
    /* font-size: 0.75em; */ /* (g) Option 1: Relative font size reduction */
}
/* Single column layout by default */
.ltus-metrics-content.single-column {
    grid-template-columns: 1fr;
}
/* Two column layout for two series */
.ltus-metrics-content.two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.ltus-metric {
    padding: 6px 0;
    border-bottom: 1px dashed #f0f2f5;
}
.ltus-metric:last-child {
    border-bottom: none;
}

.ltus-metric .label,
.ltus-metric .value,
.ltus-drawdown-item .ltus-metric span {
    font-size: 13px; 
}

.ltus-metric .label {
    font-weight: 700;
    color: #48576A; 
    display: inline-block;
    margin-right: 8px;
    min-width: 100px;
}
.ltus-metric .value {
    font-weight: 400;
    color: #233741; 
}

/* Specific for drawdown details */
.ltus-drawdown-item {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.ltus-drawdown-item .ltus-metric {
    padding: 6px 0;
    border-bottom: 1px dashed #f0f2f5;
}

.ltus-drawdown-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.ltus-drawdown-item .dd-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: #96151d; /* Red */
    font-size: 13px;
    grid-column: span 2; /* Make title span both columns */
}
.ltus-drawdown-item .ltus-metric {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    #ltus-controls {
        flex-direction: column;
        gap: 15px;
        /* padding-left: 10px; 
        padding-right: 10px; */
    }
    /* #ltus-series-selectors-group ensures buttons are contained */
    
    #ltus-date-pickers {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    #ltus-date-pickers input[type="date"],
    #ltus-date-pickers input[type="month"],
    #ltus-date-pickers input[type="number"],
    #ltus-investment-input input[type="number"] {
        width: 100%; /* Already ensures they take full width of their parent in mobile */
        box-sizing: border-box;
    }

    /* Apply max-width to all inputs and button */
    .ltus-date-picker-group input,
    #ltus-investment-input input,
    #ltus-update-chart-button {
        max-width: 120px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Keep investment input aligned with date inputs */
    #ltus-investment-input {
        width: 100%;
    }

    /* Calculate button styling */
    #ltus-update-chart-button {
        margin-top: 10px;
    }

    .ltus-metrics-content.two-columns {
        grid-template-columns: 1fr; /* Stack columns on small screens */
    }

    /* (h) Ensure plugin wrapper takes full width on mobile landscape if theme allows */
    /* This is already handled by width:100% on #ltus-plugin-wrapper */
    /* If a more "full screen experience" is needed, that's a JS solution for modal typically */

    /* If the content padding was managed by .ltus-plugin-content-inner: */
    /* .ltus-plugin-content-inner { padding: 10px; } */

    /* Reduce padding for controls/containers on mobile if main padding is 0 */
    #ltus-controls, #ltus-chart-container, .ltus-metrics-container {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0; /* Reset margins if they were for desktop with 0 main padding */
        margin-right: 0;
    }
     .ltus-metrics-container {
        margin-bottom: 10px;
    }

}