/**
 * UI Component Library
 * Reusable UI classes for consistent styling across the application
 */

/* ============================================
   BUTTONS - Add/Create Buttons (Dashed Style)
   ============================================ */

/**
 * Dashed Add Button - Light background with dashed border
 * Used for "Add Item", "Add Account", etc. buttons
 *
 * Usage:
 * <button class="btn-add-dashed">+ Add Item</button>
 * <button class="btn-add-dashed danger">+ Add Liability</button>
 */
.btn-add-dashed {
    border-radius: 999px;
    border: 1px dashed var(--color-blue-7);
    background: var(--color-white-1);
    font-size: 13px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--color-gray-700);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-weight: 500;
    white-space: nowrap;
}

.btn-add-dashed:hover {
    border-color: var(--ui-main-linkHover, var(--color-ui-link-hover));
    border-style: dashed;
    background: var(--color-brand-light);
    color: var(--ui-main-linkHover, var(--color-ui-link-hover));
}

.btn-add-dashed:active {
    background: rgba(var(--color-blue-6-rgb), 0.15);
}

/* Danger variant for liabilities, delete actions, etc. */
.btn-add-dashed.danger {
    border-color: rgba(var(--color-red-1-rgb), 0.5);
    color: var(--color-red-1);
}

.btn-add-dashed.danger:hover {
    border-color: var(--color-red-1);
    background: var(--color-semantic-danger-light);
    color: var(--color-semantic-danger);
}

/* Success variant */
.btn-add-dashed.success {
    border-color: rgba(var(--color-green-3-rgb), 0.6);
    color: var(--color-semantic-success);
}

.btn-add-dashed.success:hover {
    border-color: var(--color-semantic-success);
    background: var(--color-semantic-success-light);
    color: var(--color-semantic-success);
}

/* ============================================
   BUTTONS - Icon Only Variant
   ============================================ */

.btn-add-dashed.icon-only {
    padding: 6px 10px;
}

/* ============================================
   BUTTONS - Size Variants
   ============================================ */

.btn-add-dashed.sm {
    font-size: 11px;
    padding: 4px 10px;
}

.btn-add-dashed.lg {
    font-size: 14px;
    padding: 8px 18px;
}

/* ============================================
   HSA CONTRIBUTION SECTION STYLES
   ============================================ */

/**
 * HSA (Health Savings Account) Styles
 * Used in profile contribution areas for both primary and spouse
 * Note: Section wrappers removed - now using content-section pattern
 */

.hsa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.hsa-enable-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.hsa-enable-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.hsa-info-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background: var(--color-cyan-1);
    color: var(--color-white-1);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    font-weight: bold;
}

.hsa-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
}

.hsa-controls.hidden {
    display: none;
}

.hsa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hsa-row > label:first-child {
    min-width: 140px;
    font-weight: 500;
    color: var(--color-gray-700);
}

/* Single-line rows that should not wrap */
.hsa-row.hsa-row-nowrap {
    flex-wrap: nowrap;
}

.hsa-row.hsa-row-nowrap > label:first-child {
    min-width: auto;
    white-space: nowrap;
    margin-right: 10px;
}

.hsa-row select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white-1);
    font-size: 14px;
    cursor: pointer;
}

.hsa-row select:focus {
    outline: none;
    border-color: var(--color-cyan-1);
    box-shadow: 0 0 0 2px rgba(var(--color-cyan-1-rgb), 0.2);
}

.hsa-amount-input {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hsa-amount-input .currency-prefix {
    font-weight: 500;
    color: var(--color-gray-700);
}

.hsa-amount-input input[type="number"] {
    width: 100px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-300);
    font-size: 14px;
}

.hsa-amount-input input[type="number"]:focus {
    outline: none;
    border-color: var(--color-cyan-1);
    box-shadow: 0 0 0 2px rgba(var(--color-cyan-1-rgb), 0.2);
}

/* Hide number input spinners for cleaner look */
.hsa-amount-input input[type="number"]::-webkit-outer-spin-button,
.hsa-amount-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hsa-amount-input input[type="number"] {
    -moz-appearance: textfield;
}

.hsa-max-btn {
    padding: 6px 12px;
    background: var(--color-cyan-1);
    color: var(--color-white-1);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.hsa-max-btn:hover {
    background: var(--color-brand-dark);
}

.hsa-max-btn:active {
    background: var(--color-brand-dark);
}

.hsa-limit-display {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-left: 8px;
}

.hsa-checkbox-row {
    padding: 4px 0;
}

.hsa-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: normal;
    min-width: auto;
    color: var(--color-gray-700);
}

.hsa-checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* HSA Toggle Rows */
.hsa-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 15px;
}

.hsa-toggle-row .hsa-toggle-label {
    flex: 1;
    margin: 0;
    font-weight: normal;
    color: var(--color-gray-700);
    min-width: auto;
}

.hsa-toggle-row .hsa-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding-right: 5px;
}

.hsa-toggle-row .toggle-switch-label {
    min-width: 28px;  /* Just enough for "Yes" and "No" */
    text-align: left;
}

.medicare-age-input {
    width: 60px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-gray-300);
    margin-left: 10px;
    font-size: 14px;
    text-align: center;
}

.hsa-toggle-row .medicare-age-input {
    margin-left: 10px;
}

.hsa-toggle-row .medicare-age-input:focus {
    outline: none;
    border-color: var(--color-cyan-1);
    box-shadow: 0 0 0 2px rgba(var(--color-cyan-1-rgb), 0.2);
}

.medicare-age-input:focus {
    outline: none;
    border-color: var(--color-cyan-1);
    box-shadow: 0 0 0 2px rgba(var(--color-cyan-1-rgb), 0.2);
}

/* Hide number spinners on medicare age input */
.medicare-age-input::-webkit-outer-spin-button,
.medicare-age-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.medicare-age-input {
    -moz-appearance: textfield;
}

/* Responsive adjustments for HSA section */
@media (max-width: 600px) {
    .hsa-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .hsa-row > label:first-child {
        min-width: auto;
    }

    .hsa-limit-display {
        margin-left: 0;
        margin-top: 4px;
    }

    .hsa-toggle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hsa-toggle-row .hsa-toggle-wrapper {
        margin-left: 0;
    }
}

/* ============================================
   HSA HEALTHCARE EXPENSE SECTION STYLES
   ============================================ */

/**
 * Note: Section wrapper styles (.hsa-contribution-section, .hsa-withdrawal-section,
 * .hsa-healthcare-section) have been removed. HSA now uses the standard
 * content-section pattern with collapsible sub-containers.
 */

.hsa-healthcare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
}

/* Override justify-content for healthcare header - keep items together */
.hsa-healthcare-header.hsa-toggle-row {
    justify-content: flex-start;
}

.hsa-healthcare-header .help-icon {
    flex-shrink: 0;
}

.hsa-healthcare-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.hsa-healthcare-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.hsa-healthcare-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 20px;
    padding-right: 10px;
}

/* HSA Healthcare sliders - prevent wrapping and ensure proper layout */
.hsa-healthcare-controls .slider-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.hsa-healthcare-controls .slider-label {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 160px;
}

.hsa-healthcare-controls .slider-control {
    flex: 1;
    min-width: 80px;
}

.hsa-healthcare-controls .slider-input {
    flex-shrink: 0;
    width: 100px;
}

.hsa-healthcare-controls.hidden {
    display: none;
}

.hsa-healthcare-explanation {
    background: var(--color-gray-50);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-gray-600);
    line-height: 1.4;
    margin-bottom: 5px;
}

.hsa-healthcare-explanation p {
    margin: 0;
}

.hsa-info-note {
    font-size: 12px;
    color: var(--color-gray-500);
    font-style: italic;
}

.hsa-medicare-note {
    padding-left: 24px;
    margin-top: -8px;
}

.hsa-advanced-option {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted var(--color-gray-300);
}

/* Percent suffix styling for inflation rate input */
.hsa-amount-input .percent-suffix {
    font-weight: 500;
    color: var(--color-gray-700);
    margin-left: 2px;
}

/* Healthcare inflation input - slightly narrower */
.hsa-healthcare-controls .hsa-amount-input input[type="number"] {
    width: 80px;
}

/* Responsive adjustments for healthcare section */
@media (max-width: 600px) {
    .hsa-healthcare-controls {
        padding-left: 10px;
    }

    .hsa-healthcare-explanation {
        font-size: 12px;
        padding: 8px 10px;
    }

    .hsa-info-note {
        font-size: 11px;
        display: block;
        margin-top: 4px;
    }

    .hsa-medicare-note {
        padding-left: 0;
    }
}

/* ========== HSA No Account State ========== */
/* Displayed when HSA content box is enabled but no HSA account exists */

.hsa-no-account-section {
    padding: 30px 20px;
    text-align: center;
}

.hsa-no-account-message {
    max-width: 400px;
    margin: 0 auto;
}

.hsa-no-account-icon {
    color: var(--color-cyan-2);
    margin-bottom: 15px;
}

.hsa-no-account-message h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--color-gray-800);
}

.hsa-no-account-message p {
    color: var(--color-gray-500);
    margin-bottom: 12px;
    line-height: 1.5;
}

.hsa-no-account-note {
    font-size: 13px;
    background: var(--color-gray-50);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 20px !important;
}

.hsa-add-account-btn {
    padding: 10px 24px;
    font-size: 15px;
}

/* ========== HSA Budget Summary Section ========== */
/* Displays HSA-eligible expenses from budget when in budget mode */

.hsa-budget-summary {
    background: var(--color-gray-50);
    padding: 12px 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.hsa-budget-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-gray-800);
}

.hsa-budget-summary-header i {
    color: var(--color-blue-4);
}

.hsa-budget-summary-amount {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.hsa-budget-label {
    color: var(--color-gray-500);
}

.hsa-budget-value {
    font-weight: 600;
    color: var(--color-teal-3);
}

.hsa-budget-summary-note {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 10px;
    text-align: center;
}

.hsa-budget-summary-note a {
    color: var(--color-blue-6);
    text-decoration: underline;
}

/* ============================================
   SHARED PLAN VIEWING INDICATORS
   ============================================ */

/**
 * Shared Plan Accounts Banner
 * Displayed on Accounts & Assets page when viewing accounts from a shared plan
 */
.shared-plan-accounts-banner {
    background: linear-gradient(135deg, var(--color-brand-light) 0%, rgba(var(--color-cyan-2-rgb), 0.3) 100%);
    border: 1px solid var(--color-cyan-2);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInBanner 0.3s ease-out;
}

.shared-plan-accounts-banner i {
    font-size: 24px;
    color: var(--color-cyan-1);
    flex-shrink: 0;
}

.shared-plan-accounts-banner strong {
    color: var(--color-brand-dark);
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

.shared-plan-accounts-banner p {
    margin: 0;
    font-size: 12px;
    color: var(--color-gray-600);
    line-height: 1.5;
}

@keyframes slideInBanner {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle indicator on individual shared accounts */
.account-item.shared-account {
    border-left: 3px solid var(--color-cyan-2);
}

.account-item.shared-account .account-name::after {
    content: ' (shared)';
    font-size: 10px;
    color: var(--color-gray-500);
    font-style: italic;
}

/* ============================================
   COMMUNITY VIEW MODE
   When viewing a shared plan in community mode,
   hide logged-in user info and show logged-out UI
   ============================================ */

/* Hide logged-in user sections when in community view mode */
body.community-view-mode .logged-in-user-header,
body.community-view-mode .logged-in-user-header-condensed {
    display: none !important;
}

/* Show logged-out sections (they would normally be hidden by server-side rendering) */
/* We need to inject these via JavaScript since they don't exist in the DOM when user is logged in */

/* Style for the community view mode indicator */
body.community-view-mode::before {
    content: '';
    display: block;
    height: 0; /* Banner is injected separately */
}

/* Ensure the body has some spacing for the banner */
body.community-view-mode {
    /* Banner adds its own spacing via margin */
}

/* Hide "Save Plan" and similar buttons that don't make sense in view-only mode */
body.community-view-mode #save-plan-btn,
body.community-view-mode .save-plan-button,
body.community-view-mode .auto-save-indicator {
    display: none !important;
}

/* Gray out any remaining save-related UI elements */
body.community-view-mode [data-action="save"],
body.community-view-mode .btn-save {
    opacity: 0.5;
    pointer-events: none;
}

/* Show the injected logged-out buttons in community view mode */
body.community-view-mode .logged-out-user-header,
body.community-view-mode .logged-out-user-header-condensed {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

/* ============================================
   PORTFOLIO RETURNS - COMBINED RETURN DISPLAY
   ============================================ */

/**
 * Combined Return Display Styles
 * Shows the weighted average return or range when using age-based equity returns
 */
.combined-return-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-top: 5px;
    border-top: 1px solid var(--color-gray-200);
}

.combined-return-label {
    font-size: 13px;
    color: var(--color-gray-500);
}

.combined-return-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-800);
    cursor: help;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* Slightly smaller font when showing range to fit better */
.combined-return-value:has-text("avg") {
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .combined-return-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .combined-return-value {
        max-width: 100%;
        white-space: normal;
    }
}

/* ============================================
   ALLOCATION ADJUSTER INLINE DISPLAY
   ============================================ */

/**
 * Height expansion for retirement summary container when adjuster tabs are active
 */
#graphnew-summary-container {
    transition: min-height 0.3s ease-in-out;
}

#graphnew-summary-container.adjuster-expanded {
    min-height: 450px;
    /* Disable zoom when adjuster tabs (allocation or equity returns) are active so charts render at full size */
    /* This avoids needing CSS transform which breaks Chart.js coordinate calculations */
    zoom: 1 !important;
}

/**
 * Allocation adjuster panel styling
 */
.allocation-adjuster-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-in-out;
}

/**
 * Equity returns adjuster panel styling
 */
.equity-returns-adjuster-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inline-adjuster-chart-container {
    flex: 1;
    min-height: 300px;
}

/**
 * Inline adjuster content styling for better visual consistency
 */
#inline-allocation-adjuster-container {
    background: var(--color-white-1);
    border-radius: 8px;
}

/**
 * Responsive behavior - hide allocation adjuster tab on smaller screens
 */
@media (max-width: 1199px), (max-height: 799px) {
    [data-tab="allocation-adjuster"] {
        display: none !important;
    }
}