/* ── Expense Tracker – Dark Theme ── */
:root {
    --et-bg:       #0f1117;
    --et-card:     #1a1d27;
    --et-border:   #2a2d3e;
    --et-accent:   #6c63ff;
    --et-accent2:  #4ecca3;
    --et-text:     #e0e0f0;
    --et-muted:    #7b7fa8;
    --et-danger:   #ff5c7c;
    --et-success:  #4ecca3;
    --et-input-bg: #12151f;
    --et-radius:   10px;
}

.et-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.et-wrap {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--et-bg);
    color: var(--et-text);
    padding: 24px 16px;
    max-width: 900px;
    margin: 0 auto;
    min-height: 400px;
}

.et-login-msg {
    text-align: center;
    padding: 60px 20px;
    color: var(--et-muted);
}
.et-login-msg a { color: var(--et-accent); text-decoration: none; }

/* ── Summary bar ── */
.et-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.et-summary-card {
    flex: 1;
    min-width: 140px;
    background: var(--et-card);
    border: 1px solid var(--et-border);
    border-radius: var(--et-radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.et-label { font-size: 12px; color: var(--et-muted); text-transform: uppercase; letter-spacing: .06em; }
.et-value { font-size: 22px; font-weight: 700; color: var(--et-accent2); }

/* ── Cards ── */
.et-card {
    background: var(--et-card);
    border: 1px solid var(--et-border);
    border-radius: var(--et-radius);
    padding: 20px;
    margin-bottom: 20px;
}
.et-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; color: var(--et-text); }

/* ── Form ── */
.et-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.et-row { display: flex; flex-direction: column; gap: 5px; }
.et-row label { font-size: 12px; color: var(--et-muted); }
.et-row input, .et-row select, .et-row textarea {
    background: var(--et-input-bg);
    border: 1px solid var(--et-border);
    border-radius: 6px;
    color: var(--et-text);
    padding: 9px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.et-row input:focus, .et-row select:focus { border-color: var(--et-accent); }
.et-row select option { background: var(--et-card); }

.et-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    padding-top: 4px;
}

/* ── Buttons ── */
.et-btn {
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.et-btn:active { transform: scale(.97); }
.et-btn-primary { background: var(--et-accent); color: #fff; }
.et-btn-primary:hover { opacity: .85; }
.et-btn-ghost {
    background: transparent;
    color: var(--et-muted);
    border: 1px solid var(--et-border);
}
.et-btn-ghost:hover { color: var(--et-text); border-color: var(--et-muted); }
.et-btn-danger { background: var(--et-danger); color: #fff; }
.et-btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Toolbar ── */
.et-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.et-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.et-filters select {
    background: var(--et-input-bg);
    border: 1px solid var(--et-border);
    border-radius: 6px;
    color: var(--et-text);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
.et-filters select:focus { border-color: var(--et-accent); }

/* ── Table ── */
.et-table-wrap { overflow-x: auto; }
.et-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.et-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--et-muted);
    border-bottom: 1px solid var(--et-border);
}
.et-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--et-border);
    vertical-align: middle;
}
.et-table tr:last-child td { border-bottom: none; }
.et-table tr:hover td { background: rgba(108,99,255,.05); }

.et-amount { font-weight: 600; color: var(--et-accent2); }
.et-empty  { text-align: center; color: var(--et-muted); padding: 40px !important; }

.et-category-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(108,99,255,.18);
    color: var(--et-accent);
}

.et-row-actions { display: flex; gap: 6px; }

/* ── Pagination ── */
.et-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 14px;
}
.et-page-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid var(--et-border);
    background: var(--et-input-bg);
    color: var(--et-text);
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}
.et-page-btn.active, .et-page-btn:hover { background: var(--et-accent); border-color: var(--et-accent); color: #fff; }

/* ── Spinner ── */
.et-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--et-border);
    border-top-color: var(--et-accent);
    border-radius: 50%;
    animation: et-spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes et-spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.et-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 99999;
    animation: et-fadein .3s ease;
}
.et-toast.success { background: var(--et-success); color: #0f1117; }
.et-toast.error   { background: var(--et-danger); }
@keyframes et-fadein { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }

/* ── Responsive ── */
@media (max-width: 600px) {
    .et-form { grid-template-columns: 1fr; }
    .et-toolbar { flex-direction: column; }
    .et-filters { width: 100%; }
    .et-filters select { flex: 1; }
    .et-summary-card { min-width: 100%; }
}