/* Pension & Tax Deductions - Apple-Style Tabbed Interface */

/* CSS Variables for Tab Colors */
:root,
html[data-theme="dark"] {
    --tab-content-bg: #252525;
    --tab-inactive-bg: #0a0a0a;
}

html[data-theme="light"],
body.light-mode {
    --tab-content-bg: #f5f5f7;
    --tab-inactive-bg: #d8d8dd;
}

/* Container for the entire tabbed section */
.pension-tax-tabbed-section {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 16px;
}

/* Tab Headers Container */
.pension-tax-tab-headers {
    display: flex;
    gap: 0;
    background: transparent;
    border-bottom: 1px solid var(--color-border, #333);
}

/* Individual Tab Header */
.pension-tax-tab-header {
    flex: 1;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary, #999);
    background: var(--tab-inactive-bg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    outline: none;
    position: relative;
    white-space: nowrap;
    border: 1px solid var(--color-border, #333);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-right: -1px;
}

.pension-tax-tab-header:last-child {
    margin-right: 0;
}

.pension-tax-tab-header:hover:not(.disabled) {
    background: var(--color-bg-tertiary, rgba(255,255,255,0.08));
    color: var(--color-text-primary, #fff);
}

.pension-tax-tab-header.active {
    color: var(--color-accent, #007aff);
    font-weight: 600;
    background: var(--tab-content-bg);
    border-bottom: 1px solid var(--tab-content-bg);
    margin-bottom: -1px;
    z-index: 1;
}

/* Disabled Tab State (for New Regime) */
.pension-tax-tab-header.disabled {
    color: var(--color-text-disabled, #555);
    cursor: not-allowed;
    opacity: 0.4;
}

.pension-tax-tab-header.disabled:hover {
    background: transparent;
    color: var(--color-text-disabled, #555);
}

/* Tab Content Area */
.pension-tax-tab-content-area {
    background: var(--tab-content-bg) !important;
    border: 1px solid var(--color-border, #333) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}

.pension-tax-tab-content {
    display: none;
    animation: fadeInUp 0.3s ease;
    padding: 0;
    background: transparent;
}

.pension-tax-tab-content.active {
    display: block;
    background: transparent;
}

/* Section Title with Controls - Inside Tab */
.tab-section-title-with-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--color-border, #333);
    background: var(--tab-content-bg);
}

.tab-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #fff);
}

/* Adjust existing pension and deduction containers when inside tabs */
.pension-tax-tab-content .salary-control {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.pension-tax-tab-content .pension-box-container,
.pension-tax-tab-content .tax-deductions-box-container {
    padding: 16px 20px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pension-tax-tab-header {
        padding: 12px 12px;
        font-size: 12px;
    }

    /* Mobile: force visible selected state backgrounds */
    .pension-tax-tab-header {
        background: var(--tab-inactive-bg) !important;
        border-color: var(--color-border, #333) !important;
    }

    .pension-tax-tab-header.active {
        background: var(--tab-content-bg) !important;
        border-bottom-color: var(--tab-content-bg) !important;
    }

    .tab-section-title-with-controls {
        padding: 12px 16px 10px;
    }

    .tab-section-title {
        font-size: 14px;
    }

    .pension-tax-tab-content .salary-control {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .pension-tax-tab-content .pension-box-container,
    .pension-tax-tab-content .tax-deductions-box-container {
        padding: 12px 16px;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Ensure table rows in tax deductions tab are visible and don't disappear */
    .pension-tax-tab-content .pension-deduction-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .pension-tax-tab-content .pension-table-row {
        display: table-row !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pension-tax-tab-content .pension-table-row td {
        display: table-cell !important;
        visibility: visible !important;
    }

    .pension-tax-tab-content .deduction-input {
        position: relative;
        z-index: 1;
    }

    .pension-tax-tab-content .deduction-input:focus {
        position: relative;
        z-index: 10;
    }

    /* Ensure tabs don't interfere with mobile panel navigation */
    .pension-tax-tab-header {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Light Mode Support */
body.light-mode .pension-tax-tab-header {
    color: #666;
    background: var(--tab-inactive-bg);
    border-color: #d1d1d6;
}

body.light-mode .pension-tax-tab-header:hover:not(.disabled) {
    background: var(--tab-inactive-bg);
    color: #000;
}

body.light-mode .pension-tax-tab-header.active {
    color: #007aff;
    background: var(--tab-content-bg);
    border-bottom-color: var(--tab-content-bg);
}

body.light-mode .pension-tax-tab-header.disabled {
    color: #ccc;
}

body.light-mode .pension-tax-tab-content-area {
    background: var(--tab-content-bg) !important;
    border-color: #d1d1d6 !important;
}

body.light-mode .pension-tax-tab-headers {
    border-bottom-color: #d1d1d6;
}

/* Smooth transitions for regime changes */
.pension-tax-tabbed-section {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}