/* ── Net Worth Tracker Specific Styles ───────────────────────────────────
   Loaded after shared/styles.css for overrides and additions.
   ──────────────────────────────────────────────────────────────────── */

/* ── Year Selector ───────────────────────────────────────────────── */

.year-selector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.year-selector-row select {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.btn-year {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.btn-year:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-year:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-year-danger:hover:not(:disabled) {
    border-color: #dc3545;
    color: #dc3545;
}

.year-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.copy-from-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-from-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    margin-bottom: 0;
}

.copy-from-group select {
    padding: 6px 8px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.82rem;
    min-width: 100px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.export-import-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-import-group select {
    padding: 6px 8px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--input-bg);
}

.btn-import-file {
    display: inline-block;
    cursor: pointer;
    font-size: 0.82rem !important;
    margin-bottom: 0 !important;
}

/* ── Notes input ─────────────────────────────────────────────────── */

input[type="text"]#yearNotes {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

input[type="text"]#yearNotes:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ── Collapsible Sections ────────────────────────────────────────── */

.section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}

.section-toggle:hover {
    opacity: 0.8;
}

.chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
    width: 12px;
    text-align: center;
}

.section-toggle.collapsed .chevron {
    transform: rotate(-90deg);
}

.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    flex: 1;
}

.section-total {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.section-body {
    margin-top: 12px;
}

.category-card .card {
    padding: 16px;
}

/* ── Category Tables ─────────────────────────────────────────────── */

.category-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.category-table th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px 6px 6px;
    border-bottom: 2px solid var(--border-light);
}

.category-table td {
    padding: 4px 6px;
    vertical-align: middle;
}

.category-table input[type="text"],
.category-table input[type="number"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.category-table input[type="text"]:focus,
.category-table input[type="number"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.col-cat-name   { width: 42%; }
.col-cat-value  { width: 30%; }
.col-cat-liquid { width: 16%; text-align: center; }
.col-cat-remove { width: 12%; text-align: center; }

.category-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.remove-btn {
    background: none;
    border: none;
    color: #adb5bd;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.remove-btn:hover:not(:disabled) {
    color: #dc3545;
    background: var(--error-line-bg);
}

.remove-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Add Button (reused from rebalancer pattern) ─────────────────── */

.btn-add {
    background: none;
    border: 2px dashed var(--border-medium);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: border-color 0.2s, color 0.2s;
}

.btn-add:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Custom Category Form ────────────────────────────────────────── */

.custom-category-form {
    padding: 14px 16px;
}

.custom-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.custom-add-row input[type="text"] {
    flex: 1;
    min-width: 100px;
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.custom-add-row input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
}

.custom-add-row select {
    padding: 7px 8px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.tax-bucket-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

.badge-taxFree { background: var(--badge-roth-bg); color: var(--badge-roth-text); }
.badge-taxDeferred { background: var(--badge-traditional-bg); color: var(--badge-traditional-text); }
.badge-taxable { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge-none { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

.custom-cat-delete {
    background: none;
    border: none;
    color: #adb5bd;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
}

.custom-cat-delete:hover {
    color: #dc3545;
    background: var(--error-line-bg);
}

/* ── Notes Browser ───────────────────────────────────────────────── */

.notes-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.notes-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.notes-list {
    max-height: 200px;
    overflow-y: auto;
}

.note-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.note-item:hover {
    background: var(--color-light-tint);
}

.note-year {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 44px;
}

.note-text {
    flex: 1;
    color: var(--text-secondary);
    margin-left: 8px;
}

/* ── Results Placeholder ─────────────────────────────────────────── */

.results-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-disabled);
    font-size: 1rem;
}

/* ── Net Worth Banner ────────────────────────────────────────────── */

.networth-banner {
    background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
}

.networth-banner-label {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 6px;
}

.networth-banner-value {
    font-size: 2.4rem;
    font-weight: bold;
}

/* ── Summary Table ──────────────────────────────────────────────── */

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.summary-table td {
    padding: 7px 10px;
    vertical-align: middle;
}

.st-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.st-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: right;
    white-space: nowrap;
    padding-right: 20px;
}

.stat-liability { color: #dc3545; }
.stat-networth  { color: #20c997; }

/* ── Tax Bucket Bar ──────────────────────────────────────────────── */

.tax-bucket-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--border-light);
}

.tax-bucket-segment {
    transition: width 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: white;
    min-width: 0;
    overflow: hidden;
}

.tax-bucket-free     { background: #20c997; }
.tax-bucket-deferred { background: #ffc107; color: #333; }
.tax-bucket-taxable  { background: var(--color-primary); }

.tax-bucket-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.tax-bucket-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tax-bucket-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Balance Sheet ───────────────────────────────────────────────── */

.balance-sheet-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.balance-sheet-column {
    flex: 1;
    min-width: 0;
}

.balance-sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.balance-sheet-table th {
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-medium);
}

.balance-sheet-table td {
    padding: 6px 10px;
}

.bs-value {
    text-align: right;
    white-space: nowrap;
}

.bs-section-header td {
    font-weight: 700;
    color: var(--text-secondary);
    padding-top: 12px;
    font-size: 0.85rem;
}

.bs-item td {
    padding-left: 22px;
    color: var(--text-muted);
}

.bs-item td.bs-value {
    color: var(--text-secondary);
}

.bs-subtotal td {
    font-weight: 600;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.bs-total td {
    font-weight: 700;
    border-top: 3px double var(--border-medium);
    padding-top: 10px;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.bs-separator td {
    padding: 6px 0;
}

.bs-networth td {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.95rem;
    padding-top: 4px;
}

/* ── Pie Charts ──────────────────────────────────────────────────── */

.pie-charts-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pie-container {
    flex: 1;
    text-align: center;
}

.pie-container h3 {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pie-canvas-wrap {
    position: relative;
    margin: 0 auto;
}

/* ── Delta Grid ──────────────────────────────────────────────────── */

.delta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.delta-item {
    background: var(--surface-elevated);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--border-light);
}

.delta-item-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.delta-item-value {
    font-size: 1.05rem;
    font-weight: 700;
}

.delta-item-pct {
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 2px;
}

.delta-positive { border-left-color: #28a745; }
.delta-positive .delta-item-value { color: #28a745; }
.delta-positive .delta-item-pct { color: #28a745; }

.delta-negative { border-left-color: #dc3545; }
.delta-negative .delta-item-value { color: #dc3545; }
.delta-negative .delta-item-pct { color: #dc3545; }

.delta-neutral { border-left-color: var(--text-disabled); }
.delta-neutral .delta-item-value { color: var(--text-muted); }

/* ── Velocity ────────────────────────────────────────────────────── */

.velocity-headline {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 10px 0;
}

.velocity-rate {
    font-size: 1.6rem;
    font-weight: 700;
}

.velocity-rate.positive { color: #28a745; }
.velocity-rate.negative { color: #dc3545; }

.velocity-accel {
    font-size: 0.82rem;
    color: #28a745;
    font-weight: 500;
}

.velocity-decel {
    font-size: 0.82rem;
    color: #dc3545;
    font-weight: 500;
}

.velocity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-top: 8px;
}

.velocity-table th {
    text-align: left;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    border-bottom: 2px solid var(--border-light);
}

.velocity-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}

.velocity-positive { color: #28a745; font-weight: 600; }
.velocity-negative { color: #dc3545; font-weight: 600; }
.velocity-fastest {
    background: var(--velocity-fastest-bg);
}

.delta-networth-row {
    font-weight: 700;
    border-bottom: 2px solid var(--border-medium);
}

/* ── Chart Container ─────────────────────────────────────────────── */

.chart-container {
    position: relative;
    width: 100%;
    max-height: 350px;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .balance-sheet-wrapper {
        flex-direction: column;
    }

    .pie-charts-wrapper {
        flex-direction: column;
    }

    .delta-grid {
        grid-template-columns: 1fr;
    }

    .year-actions-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .custom-add-row {
        flex-direction: column;
    }

    .custom-add-row input[type="text"],
    .custom-add-row select,
    .custom-add-row button {
        width: 100%;
    }
}