/* ── Portfolio Rebalancer Specific Styles ───────────────────────────────
   Loaded after shared/styles.css for overrides and additions.
   ──────────────────────────────────────────────────────────────────── */

/* ── Template Dropdown ────────────────────────────────────────────── */

.template-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

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

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

.template-row select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ── Import from Spreadsheet ─────────────────────────────────────── */

.import-section {
    margin-bottom: 14px;
}

.btn-import-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-weight: 500;
}

.btn-import-toggle:hover {
    color: #5a6fd6;
}

.import-panel {
    margin-top: 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px;
    background: var(--surface-card);
}

.import-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.import-panel textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: monospace;
    resize: vertical;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-primary);
}

.import-panel textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.import-errors {
    font-size: 0.82rem;
    color: #dc3545;
    margin-top: 6px;
}

.import-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-import {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.btn-import-cancel {
    background: none;
    border: 1px solid var(--border-medium);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-import-cancel:hover {
    border-color: var(--text-disabled);
    color: var(--text-secondary);
}

/* ── Holdings Table ───────────────────────────────────────────────── */

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

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

.holdings-table td {
    padding: 5px 6px;
    vertical-align: middle;
}

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

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

.col-name   { width: 30%; }
.col-value  { width: 22%; }
.col-price  { width: 20%; }
.col-target { width: 18%; }
.col-remove { width: 10%; text-align: center; }

.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;
}

/* ── Target Sum Indicator ──────────────────────────────────────────── */

.target-sum-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.target-sum-ok    { color: #28a745; }
.target-sum-error { color: #dc3545; }

/* ── Add Holding Button ───────────────────────────────────────────── */

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

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

/* ── Min Cash Hint ────────────────────────────────────────────────── */

.min-cash-hint {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--alert-info-text);
    background: var(--alert-info-bg);
    border-left: 3px solid #17a2b8;
    padding: 6px 10px;
    border-radius: 4px;
}

/* ── Mode Radio ───────────────────────────────────────────────────── */

.mode-options {
    display: flex;
    gap: 10px;
}

.mode-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.mode-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-light-tint);
}

/* ── Disabled Rounding Toggle ─────────────────────────────────────── */

.rounding-disabled .mode-option {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

.rounding-disabled .mode-option:has(input:checked) {
    border-color: var(--border-light);
    background: var(--surface-elevated);
}

.rounding-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-disabled);
    font-style: italic;
}

.mode-option label {
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ── 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;
}

/* ── Recommendations Table ────────────────────────────────────────── */

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

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

.rec-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.rec-table tbody tr:last-child td {
    border-bottom: none;
}

.rec-table tbody tr:hover {
    background: var(--surface-subtle);
}

/* ── Rounding Leftover Note ───────────────────────────────────────── */

.rounding-leftover {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--alert-warning-text);
    background: var(--alert-warning-bg);
    border-left: 3px solid #ffc107;
    padding: 6px 10px;
    border-radius: 4px;
}

/* ── Action Badge ─────────────────────────────────────────────────── */

.action-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.action-buy  { background: var(--badge-roth-bg); color: var(--badge-roth-text); }
.action-sell { background: var(--badge-sell-bg); color: var(--badge-sell-text); }
.action-hold { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* ── Summary Stats ────────────────────────────────────────────────── */

.summary-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.stat-item {
    background: var(--surface-elevated);
    padding: 14px;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
}

.stat-value.buy   { color: #28a745; }
.stat-value.sell  { color: #dc3545; }
.stat-value.cash  { color: #17a2b8; }

/* ── Portfolio Total Banner ───────────────────────────────────────── */

.portfolio-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-gradient-dark) 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
}

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

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

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

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

    .summary-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .mode-options {
        flex-direction: column;
    }
}