/*
 * dashboard.css — Portfolio Dashboard
 * Batch 23: Full viewport dashboard panel, aggregate KPIs, properties table.
 * Zero hardcoded colors — CSS vars only.
 */

/* ============================================================
   DASHBOARD PANEL — sibling to #lf-shell-content
   ============================================================ */
#lf-dashboard-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-abyss-start, #020e1a);
}

#lf-dashboard-panel.lf-dashboard-active {
    display: flex;
}

/* When dashboard is open, hide main content */
#lf-shell-content.lf-dashboard-hidden {
    display: none !important;
}

/* ============================================================
   DASHBOARD TOPBAR
   ============================================================ */
.db-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(2, 11, 18, 0.95);
    border-bottom: 1px solid var(--glass-border);
}

.db-topbar__title {
    font-family: 'Exo 2', var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
    flex-shrink: 0;
}

.db-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    background: var(--cyan-alpha-10);
    border: 1px solid var(--cyan-alpha-30);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--cyan-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.db-portfolio-value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--gold-500);
    text-shadow: var(--glow-gold-sm);
    letter-spacing: -0.02em;
    margin-left: auto;
    flex-shrink: 0;
}

.db-portfolio-value__label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-wide);
    margin-right: 8px;
    text-transform: uppercase;
}

/* ============================================================
   AGGREGATE KPI ROW
   ============================================================ */
.db-kpi-row {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(2, 11, 18, 0.80);
}

.db-kpi-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 20px;
    border-right: 1px solid var(--glass-border);
    transition: background 0.15s ease;
}

.db-kpi-card:last-child {
    border-right: none;
}

.db-kpi-card:hover {
    background: var(--glass-bg-hover);
}

.db-kpi__label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--text-dim);
    text-transform: uppercase;
}

.db-kpi__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--cyan-500);
    text-shadow: var(--glow-cyan-sm);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.db-kpi__value--gold   { color: var(--gold-500); text-shadow: var(--glow-gold-sm); }
.db-kpi__value--positive { color: var(--color-positive); text-shadow: none; }
.db-kpi__value--neutral  { color: var(--text-secondary); text-shadow: none; }

/* ============================================================
   PROPERTIES TABLE
   ============================================================ */
.db-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 16px 24px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

.db-section-title {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

/* Header row */
.db-table thead th {
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--text-dim);
    text-transform: uppercase;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    background: rgba(2, 11, 18, 0.60);
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Body rows */
.db-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s ease;
}

.db-table tbody tr:hover {
    background: var(--glass-bg-hover);
}

.db-table tbody td {
    padding: 10px 14px;
    color: var(--text-secondary);
    vertical-align: middle;
    white-space: nowrap;
}

/* Address column */
.db-td-address {
    font-weight: var(--weight-medium);
    color: var(--text-primary) !important;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Currency values */
.db-td-currency {
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    color: var(--cyan-500) !important;
}

/* Strategy badge */
.db-strategy-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.db-strategy-badge--flip      { background: var(--cyan-alpha-10); color: var(--cyan-500); border: 1px solid var(--cyan-alpha-30); }
.db-strategy-badge--wholesale { background: var(--gold-alpha-20); color: var(--gold-400); border: 1px solid var(--gold-alpha-30); }
.db-strategy-badge--rental    { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.30); }
.db-strategy-badge--brrrr     { background: rgba(168,85,247,.12); color: #a855f7; border: 1px solid rgba(168,85,247,.30); }
.db-strategy-badge--financing { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.30); }

/* Confidence badge */
.db-conf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
}

.db-conf-badge--high    { background: var(--color-positive-bg); color: var(--color-positive); border: 1px solid var(--color-positive-border); }
.db-conf-badge--medium  { background: var(--gold-alpha-20); color: var(--gold-400); border: 1px solid var(--gold-alpha-30); }
.db-conf-badge--low     { background: rgba(255,72,66,.10); color: var(--color-negative); border: 1px solid rgba(255,72,66,.25); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}

.db-empty i {
    font-size: 3rem;
    color: var(--text-dim);
    opacity: 0.20;
}

.db-empty__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0;
    letter-spacing: var(--tracking-wide);
}

.db-empty__sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin: 0;
}

/* ============================================================
   DASHBOARD BUTTON ACTIVE STATE (sidebar)
   ============================================================ */
.lf-sb-btn-ghost.lf-sb-dashboard-active {
    background: var(--gold-alpha-20) !important;
    border-color: var(--gold-alpha-30) !important;
    color: var(--gold-400) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .db-topbar {
        padding: 0 12px;
        height: 44px;
    }

    .db-topbar__title {
        font-size: var(--text-base);
    }

    .db-kpi-row {
        overflow-x: auto;
    }

    .db-kpi-card {
        min-width: 130px;
        padding: 10px 14px;
    }

    .db-table-wrap {
        padding: 12px;
    }
}