@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");

:root {
    color-scheme: dark;
    --bg: #111318;
    --panel: #191d24;
    --panel-soft: #202631;
    --border: #343b49;
    --text: #edf1f7;
    --muted: #a9b2c3;
    --accent: #8fb7ff;
    --accent-strong: #4f8cff;
    --danger: #ff9a9a;
    --success: #79d99a;
    --warning-bg: #2a251a;
    --warning-border: #8a6725;
    --row-hover: #242d3b;
    --shadow: rgba(0, 0, 0, 0.28);
    --input-bg: #12161d;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-soft: #f9fafb;
    --border: #d8dde5;
    --text: #1f2933;
    --muted: #6b7280;
    --accent: #244f8f;
    --accent-strong: #244f8f;
    --danger: #b00020;
    --success: #006b35;
    --warning-bg: #fff7e6;
    --warning-border: #d99b2b;
    --row-hover: #f3f7ff;
    --shadow: rgba(0, 0, 0, 0.05);
    --input-bg: #ffffff;
}

body {
    background: var(--bg);
    color: var(--text);
}

header.app-header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    color: var(--text);
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    width: 3.8rem;
    height: 3.8rem;
    display: grid;
    place-items: center;
}

.brand-logo {
    display: none;
    max-width: 3.8rem;
    max-height: 3.8rem;
}

.brand-logo-dark {
    display: block;
}

:root[data-theme="light"] .brand-logo-dark {
    display: none;
}

:root[data-theme="light"] .brand-logo-light,
:root[data-theme="dark"] .brand-logo-dark {
    display: block;
}

.brand-title {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.1;
}

.brand-subtitle {
    color: var(--muted);
    margin: 0.25rem 0 0;
}

.header-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.app-nav {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
}

.app-nav a {
    color: var(--muted);
    font-weight: 700;
}

.app-nav a:hover {
    color: var(--accent);
}

.logout-form {
    margin: 0;
}

.logout-button {
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.4rem 0.65rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.logout-button:hover {
    background: var(--row-hover);
    color: var(--text);
}

.theme-toggle {
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    border-radius: 999px;
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.theme-toggle:hover {
    background: var(--row-hover);
}

.theme-toggle .bi {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.theme-icon-sun,
.theme-icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
    display: block;
}

:root[data-theme="light"] .theme-icon-moon {
    display: block;
}

.card,
.toolbar,
.table-wrap,
table {
    background: var(--panel);
    border-color: var(--border);
    box-shadow: 0 4px 14px var(--shadow);
}

th {
    background: var(--panel-soft);
    color: var(--muted);
}

.type-guide th {
    background: var(--panel-soft);
    color: var(--muted);
}

td,
th {
    border-color: var(--border);
}

input,
select,
button,
.button,
.button-link {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

textarea,
.description-input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

input::placeholder {
    color: var(--muted);
}

button:hover,
.button:hover,
.button-link:hover {
    background: var(--row-hover);
}

:root[data-theme="dark"] button.icon-button:hover,
:root[data-theme="dark"] .link-result button:hover {
    background: var(--row-hover);
}

:root[data-theme="dark"] button.icon-button.delete-button:hover,
:root[data-theme="dark"] button.icon-button.linked-link-button:hover,
:root[data-theme="dark"] .link-result button.unlink-button:hover {
    background: #332126;
}

a {
    color: var(--accent);
}

.muted,
.subtitle,
label,
.filter-group label,
.manual-form label {
    color: var(--muted);
}

:root[data-theme="dark"] .success {
    background: #153322;
    border-color: #2f8552;
}

:root[data-theme="dark"] .error {
    background: #3a1b1f;
    border-color: #b85c66;
}

:root[data-theme="dark"] .login-error {
    background: #3a1b1f;
    border-color: #b85c66;
    color: #ffb4b4;
}

:root[data-theme="dark"] .detection,
:root[data-theme="dark"] .month-break-row td,
:root[data-theme="dark"] .amount-sign {
    background: var(--panel-soft);
    border-color: var(--border);
}

:root[data-theme="dark"] .description,
:root[data-theme="dark"] .description-display,
:root[data-theme="dark"] .money-display,
:root[data-theme="dark"] .currency-display {
    color: var(--text);
}

:root[data-theme="dark"] .description-display:hover,
:root[data-theme="dark"] .money-display:hover,
:root[data-theme="dark"] .currency-display:hover {
    background: #263247;
    outline-color: #3d5274;
}

:root[data-theme="dark"] .description-input,
:root[data-theme="dark"] .money-input,
:root[data-theme="dark"] .currency-input,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] textarea:hover {
    background: var(--input-bg);
    border-color: #3d5274;
}

:root[data-theme="dark"] .transaction-row.type-expense td,
:root[data-theme="dark"] .type-guide tr.type-expense td {
    background: #241b1f;
}

:root[data-theme="dark"] .transaction-row.type-income td,
:root[data-theme="dark"] .type-guide tr.type-income td {
    background: #17231b;
}

:root[data-theme="dark"] .transaction-row.type-transfer td,
:root[data-theme="dark"] .transaction-row.type-reimbursement td,
:root[data-theme="dark"] .transaction-row.type-refund td,
:root[data-theme="dark"] .type-guide tr.type-transfer td,
:root[data-theme="dark"] .type-guide tr.type-reimbursement td,
:root[data-theme="dark"] .type-guide tr.type-refund td {
    background: #172130;
}

:root[data-theme="dark"] .transaction-row.type-savings td,
:root[data-theme="dark"] .type-guide tr.type-savings td {
    background: #211f29;
}

:root[data-theme="dark"] .transaction-row.type-ignore td,
:root[data-theme="dark"] .type-guide tr.type-ignore td {
    background: #1d2026;
    color: var(--muted);
}

:root[data-theme="dark"] .transaction-row.type-expense:hover td {
    background: #302027;
}

:root[data-theme="dark"] .transaction-row.type-income:hover td {
    background: #1b2c21;
}

:root[data-theme="dark"] .transaction-row.type-transfer:hover td,
:root[data-theme="dark"] .transaction-row.type-reimbursement:hover td,
:root[data-theme="dark"] .transaction-row.type-refund:hover td {
    background: #1c2b3e;
}

:root[data-theme="dark"] .transaction-row.type-savings:hover td {
    background: #292633;
}

:root[data-theme="dark"] .transaction-row.type-ignore:hover td {
    background: #252933;
}

:root[data-theme="dark"] .transaction-row:target td {
    background: #3a3320 !important;
    box-shadow: inset 3px 0 0 var(--accent);
}

:root[data-theme="dark"] .type-pill-expense,
:root[data-theme="dark"] .amount-sign.amount-negative {
    background: #3a1f25;
    border-color: #7b3642;
    color: #ffb4b4;
}

:root[data-theme="dark"] .type-pill-income,
:root[data-theme="dark"] .amount-sign.amount-positive {
    background: #183521;
    border-color: #317a48;
    color: #9be8b3;
}

:root[data-theme="dark"] .type-pill-transfer,
:root[data-theme="dark"] .type-pill-reimbursement,
:root[data-theme="dark"] .type-pill-refund {
    background: #18314a;
    border-color: #356b9b;
    color: #acd8ff;
}

:root[data-theme="dark"] .type-pill-savings {
    background: #282431;
    border-color: #5b536d;
    color: #d8d0e6;
}

:root[data-theme="dark"] .amount-sign.amount-savings {
    background: #282431;
    border-color: #5b536d;
    color: #d8d0e6;
}

:root[data-theme="dark"] .savings-fill {
    background: #7f6a9e;
}

:root[data-theme="dark"] .type-pill-ignore {
    background: #252a33;
    border-color: #4b5563;
    color: #cbd5e1;
}

:root[data-theme="dark"] .ai-badge {
    background: #3a3320;
    border-color: #7d672b;
    color: #f7d774;
}

:root[data-theme="dark"] .ai-badge-urgent {
    background: #3a1f25;
    border-color: #7b3642;
    color: #ffb4b4;
}

@media (max-width: 760px) {
    header.app-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        justify-content: flex-start;
    }
}