/* tax.css — Tax Center page-specific styles. Reuses app-shell.css's
   variables and shared components (app-card, app-metric-grid, app-segmented,
   financial-table); only the bits unique to this page live here. */

body.theme-app {
    padding: 0;
    color: var(--app-text);
    background: var(--app-bg);
    -webkit-font-smoothing: antialiased;
}

.container.app-page {
    max-width: var(--app-content-width);
    margin: 0 auto;
    padding: 38px 24px 64px;
}

.tax-loading {
    color: var(--app-muted);
    padding: 24px 0;
}

.tax-section {
    margin-bottom: 20px;
}

.tax-copy {
    color: var(--app-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.tax-banner {
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent);
    border-radius: var(--app-radius-md);
    padding: 14px 18px;
    font-size: 0.85rem;
    color: var(--app-text);
    margin-bottom: 20px;
}

.tax-nudge {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--app-warning-soft);
    border: 1px solid var(--app-warning-border);
    border-radius: var(--app-radius-sm);
    font-size: 0.82rem;
    color: var(--app-warning-text);
}

.tax-nudge a {
    color: inherit;
    font-weight: 600;
}

.tax-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    position: relative;
}

.tax-quarter-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.76rem;
    color: var(--app-dim);
}

.tax-year-label {
    font-size: 0.8rem;
    color: var(--app-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tax-year-label select {
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-text);
}

.tax-breakdown-table td {
    font-size: 0.88rem;
}

.tax-amount-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tax-empty-cell {
    text-align: center;
    color: var(--app-dim);
    padding: 18px !important;
}

.tax-safe-harbor {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--app-text);
}

.tax-caveat {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--app-dim);
    line-height: 1.5;
}

.tax-coverage-strip {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin-bottom: 14px;
}

.tax-coverage-cell {
    text-align: center;
    padding: 6px 0;
    border-radius: var(--app-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tax-coverage-paystub {
    background: var(--app-positive);
    color: var(--app-on-accent);
}

.tax-coverage-manual {
    background: var(--app-accent-soft);
    color: var(--app-accent-strong);
    border: 1px solid var(--app-accent);
}

.tax-coverage-missing {
    background: var(--app-surface-raised);
    color: var(--app-dim);
    border: 1px dashed var(--app-border-strong);
}

.tax-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}

.tax-status-approved {
    background: var(--app-positive-soft);
    color: var(--app-positive-text);
    border: 1px solid var(--app-positive-border);
}

.tax-status-pending {
    background: var(--app-warning-soft);
    color: var(--app-warning-text);
    border: 1px solid var(--app-warning-border);
}

.tax-status-excluded {
    background: var(--app-surface-raised);
    color: var(--app-dim);
    border: 1px solid var(--app-border-strong);
}

.tax-ftc-remove-btn,
.tax-payperiod-remove-btn {
    background: none;
    border: 1px solid var(--app-border-strong);
    color: var(--app-negative);
    cursor: pointer;
    font-size: 0.76rem;
    padding: 3px 8px;
    border-radius: var(--app-radius-sm);
    transition: all 0.15s;
}

.tax-ftc-remove-btn:hover,
.tax-payperiod-remove-btn:hover {
    border-color: var(--app-negative);
    background: var(--app-negative-soft);
}

.tax-ftc-remove-btn:disabled,
.tax-payperiod-remove-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.tax-view-doc-btn {
    background: none;
    border: 1px solid var(--app-border-strong);
    color: var(--app-accent-strong);
    cursor: pointer;
    font-size: 0.76rem;
    padding: 3px 8px;
    border-radius: var(--app-radius-sm);
    transition: all 0.15s;
}

.tax-view-doc-btn:hover {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.tax-view-doc-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.tax-ftc-add,
.tax-payperiod-add,
.tax-profile-form {
    margin-top: 16px;
    border-top: 1px solid var(--app-border);
    padding-top: 14px;
}

.tax-ftc-add summary,
.tax-payperiod-add summary,
.tax-profile-form summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--app-accent-strong);
}

.tax-profile-form.app-card summary {
    list-style: none;
}

#addFtcEntryForm,
#addPayPeriodForm,
#uploadPaystubForm,
#extractionReviewForm,
#taxProfileForm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    margin-top: 12px;
}

#addFtcEntryForm label,
#addPayPeriodForm label,
#uploadPaystubForm label,
#extractionReviewForm label,
#taxProfileForm label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--app-muted);
}

#addFtcEntryForm input,
#addFtcEntryForm select,
#addPayPeriodForm input,
#addPayPeriodForm select,
#uploadPaystubForm input,
#uploadPaystubForm select,
#extractionReviewForm input,
#extractionReviewForm select,
#taxProfileForm input,
#taxProfileForm select {
    font-size: 0.9rem;
    padding: 7px 10px;
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-text);
}

#addFtcEntryForm button,
#addPayPeriodForm button,
#uploadPaystubForm button,
#extractionReviewForm button,
#taxProfileForm button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
}

#extractionReviewForm table {
    grid-column: 1 / -1;
}

.tax-extraction-review {
    margin-top: 16px;
    border: 1px solid var(--app-accent);
    background: var(--app-accent-soft);
}

.tax-form-error {
    grid-column: 1 / -1;
    color: var(--app-negative);
    font-size: 0.82rem;
    margin: 0;
}

.tax-remaining {
    background: var(--app-accent-soft);
    border: 1px solid var(--app-accent);
    text-align: center;
}

.tax-remaining-value {
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-accent-strong);
    margin-top: 6px;
}

.tax-remaining-warning {
    margin: 10px auto 0;
    max-width: 480px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-warning-text);
}

@media (max-width: 640px) {
    .tax-coverage-strip {
        grid-template-columns: repeat(6, 1fr);
        row-gap: 6px;
    }
}