:root {
    --app-bg: #f6f9fc;
    --app-card: #ffffff;
    --app-text: #1f2937;
    --app-border: #dbe4ee;
}

body {
    background: radial-gradient(circle at top, #e9f2ff 0%, var(--app-bg) 40%, #f8fafc 100%);
    color: var(--app-text);
}

.container {
    max-width: 1200px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar .navbar {
    backdrop-filter: blur(6px);
}

.topbar .nav-link {
    font-weight: 500;
}

.topbar .dropdown-item i,
.topbar .nav-link i,
.topbar .navbar-brand i {
    width: 1.1rem;
    text-align: center;
}

.card {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.auth-card {
    max-width: 440px;
    margin: 40px auto;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
}

/* Keep single-action card forms visually consistent, aligned to the right. */
.card .inline-form > button:only-of-type,
.card .inline-form > a.button-link:only-of-type {
    margin-left: auto;
}

.inline-form.compact { gap: 4px; }

label {
    font-size: 0.8rem;
    color: #475569;
    display: block;
}

.button-link {
    text-decoration: none;
}

.grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

table {
    width: 100%;
    font-size: 0.92rem;
}

.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

.import-detail-col {
    width: 320px;
    max-width: 320px;
}

.ellipsis-cell {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.money {
    font-size: 1.5rem;
    font-weight: bold;
}

.money.positive { color: #0f766e; }
.money.negative { color: #9f1239; }

@media (max-width: 768px) {
    table { font-size: 0.82rem; }
    .auth-card { margin: 16px auto; }
}