/* ============================================
   EXPENSES
   ============================================ */

#expenses-view { display: none; }

.exp-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.exp-header h2 { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }

.exp-subtabs {
    display: flex; gap: 4px;
    background: var(--bg-2); border-radius: 8px; padding: 3px; width: fit-content;
}
.exp-subtab {
    padding: 7px 18px; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-2);
    cursor: pointer; transition: all var(--transition); border: none; background: none;
}
.exp-subtab:hover { color: var(--text-1); }
.exp-subtab.active { background: var(--accent); color: white; }

/* Summary cards */
.exp-summary {
    display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.exp-summary-card {
    flex: 1; min-width: 140px;
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px;
}
.exp-summary-card .exp-label {
    font-size: 12px; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;
}
.exp-summary-card .exp-value {
    font-family: var(--font-mono); font-size: 22px; font-weight: 700;
}
.exp-summary-card .exp-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Add expense form */
.exp-add-form {
    display: flex; gap: 8px; margin-bottom: 24px;
    padding: 14px 18px; background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); align-items: flex-end; flex-wrap: wrap;
}
.exp-add-form .form-group { margin-bottom: 0; flex: 1; min-width: 100px; }
.exp-add-form label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-2); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 4px;
}

/* Expense list */
.exp-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    margin-bottom: 24px;
}
.exp-table th {
    background: var(--bg-2); padding: 10px 14px;
    font-size: 11px; font-weight: 700; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.5px;
    text-align: left; border-bottom: 1px solid var(--border);
}
.exp-table td {
    padding: 10px 14px; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.exp-table tr:last-child td { border-bottom: none; }
.exp-table tr:hover { background: var(--bg-2); }

/* Category badges */
.exp-cat {
    display: inline-flex; padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.exp-cat-parts { background: var(--cyan-dim); color: var(--cyan); }
.exp-cat-tools { background: var(--purple-dim); color: var(--purple); }
.exp-cat-fuel { background: var(--orange-dim); color: var(--orange); }
.exp-cat-subscriptions { background: var(--accent-glow); color: var(--accent); }
.exp-cat-maintenance { background: var(--yellow-dim); color: var(--yellow); }
.exp-cat-other { background: var(--bg-3); color: var(--text-2); }

.exp-linked {
    font-size: 11px; color: var(--accent); cursor: pointer;
}
.exp-linked:hover { text-decoration: underline; }

.exp-delete-btn {
    background: none; border: none; color: var(--text-2);
    cursor: pointer; font-size: 16px; padding: 2px 6px;
    border-radius: 4px; transition: all var(--transition);
}
.exp-delete-btn:hover { color: var(--red); background: var(--red-dim); }

/* Pull bar */
.exp-pull-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; background: var(--cyan-dim); border: 1px solid var(--cyan);
    border-radius: var(--radius); margin-bottom: 20px;
    font-size: 13px; color: var(--cyan);
}

/* Dashboard charts */
.exp-dash-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 24px;
}
.exp-dash-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.exp-dash-card h3 {
    font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    margin-bottom: 16px;
}
.exp-dash-card.full-width { grid-column: 1 / -1; }

/* Profit bar chart */
.exp-bar-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.exp-bar-label { width: 40px; font-size: 11px; color: var(--text-2); font-family: var(--font-mono); text-align: right; }
.exp-bar-track { flex: 1; height: 24px; background: var(--bg-3); border-radius: 4px; position: relative; overflow: hidden; }
.exp-bar-income { height: 100%; background: var(--green); border-radius: 4px; position: absolute; left: 0; top: 0; opacity: 0.7; }
.exp-bar-expense { height: 100%; background: var(--red); border-radius: 4px; position: absolute; left: 0; top: 0; opacity: 0.7; }
.exp-bar-values { font-size: 10px; color: var(--text-2); font-family: var(--font-mono); width: 120px; text-align: right; }

/* Category donut */
.exp-cat-list { }
.exp-cat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.exp-cat-row:last-child { border-bottom: none; }
.exp-cat-row-left { display: flex; align-items: center; gap: 8px; }
.exp-cat-dot { width: 10px; height: 10px; border-radius: 3px; }
.exp-cat-name { font-size: 13px; }
.exp-cat-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
    .exp-summary { flex-direction: column; }
    .exp-add-form { flex-direction: column; }
    .exp-dash-grid { grid-template-columns: 1fr; }
}

/* Pull selection modal items */
.exp-pull-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: var(--bg-2);
    border-radius: var(--radius-sm); margin-bottom: 6px;
}
.exp-pull-item input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);
}