@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
    --paper: #F6F2E7;
    --paper-alt: #EFE9DA;
    --ink: #2B2721;
    --ink-soft: #6B6255;
    --cover: #1C3B2E;
    --cover-light: #2A5240;
    --gold: #B08A2E;
    --gold-soft: #D9C48C;
    --rust: #A13F27;
    --green: #3B6B4E;
    --line: #DCD3BC;
    --white: #FFFDF8;
    --radius: 6px;
    --shadow: 0 2px 10px rgba(28, 59, 46, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.5;
}

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

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar : onglets de classeur --- */
.sidebar {
    width: 220px;
    background: var(--cover);
    color: var(--white);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 24px;
}

.sidebar__brand {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 26px 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    letter-spacing: 0.02em;
}

.sidebar__brand span {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-top: 4px;
}

.sidebar__section-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.5);
    padding: 18px 22px 8px;
}

.house-tab {
    display: block;
    padding: 11px 22px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.94rem;
    border-left: 3px solid transparent;
    position: relative;
}

.house-tab:hover { background: rgba(255,255,255,0.06); }

.house-tab.active {
    background: var(--paper);
    color: var(--cover);
    font-weight: 600;
    border-left-color: var(--gold);
}

.sidebar__footer {
    margin-top: auto;
    padding: 16px 22px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
    font-size: 0.85rem;
}

.sidebar__footer a {
    color: rgba(255,255,255,0.75);
    display: block;
    margin-bottom: 6px;
    text-decoration: none;
}
.sidebar__footer a:hover { color: var(--white); }

/* --- Main --- */
.main {
    flex: 1;
    padding: 34px 40px 60px;
    max-width: 1100px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar h1 {
    font-family: 'Lora', serif;
    font-size: 1.7rem;
    margin: 0;
    color: var(--cover);
}

.topbar .who {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

/* --- Cards / ledger sheet --- */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 26px;
    margin-bottom: 24px;
}

.card h2 {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    margin: 0 0 16px;
    color: var(--cover);
}

/* --- Formulaires --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
}

label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

input, select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    font-family: 'Inter', sans-serif;
    font-size: 0.94rem;
    color: var(--ink);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
    background: var(--white);
}

.type-toggle {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.type-toggle label {
    flex: 1;
    margin: 0;
    text-align: center;
    padding: 9px 6px;
    cursor: pointer;
    background: var(--paper);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.type-toggle input { display: none; width: auto; }
.type-toggle input:checked + span { font-weight: 600; }
.type-toggle .opt-depense input:checked ~ span,
.type-toggle label:has(input:checked).opt-depense { background: #F3E3DD; color: var(--rust); }
.type-toggle label:has(input:checked).opt-recette { background: #E1EBE3; color: var(--green); }

button, .btn {
    background: var(--cover);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
button:hover, .btn:hover { background: var(--cover-light); }
.btn-ghost {
    background: transparent;
    color: var(--cover);
    border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--paper-alt); }
.btn-danger { background: var(--rust); }
.btn-danger:hover { background: #8a3320; }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

/* --- Ledger table --- */
table.ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.ledger th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 10px 12px;
    border-bottom: 2px solid var(--cover);
}
table.ledger td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.ledger tbody tr:hover { background: var(--paper-alt); }
table.ledger .amount {
    font-family: 'Roboto Mono', monospace;
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
}
.amount.depense { color: var(--rust); }
.amount.recette { color: var(--green); }

.tag {
    display: inline-block;
    font-size: 0.74rem;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--paper-alt);
    color: var(--ink-soft);
}

.summary-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.summary-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 22px;
    min-width: 150px;
    box-shadow: var(--shadow);
}
.summary-item .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.summary-item .value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 4px;
}
.value.depense { color: var(--rust); }
.value.recette { color: var(--green); }
.value.solde { color: var(--cover); }

.alert {
    padding: 11px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-size: 0.9rem;
}
.alert-error { background: #F3E3DD; color: var(--rust); border: 1px solid #E4BDAF; }
.alert-success { background: #E1EBE3; color: var(--green); border: 1px solid #BFD8C4; }

.receipt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.receipt-thumb {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    text-align: center;
    background: var(--paper);
}
.receipt-thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin-bottom: 8px;
}
.receipt-pdf {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    background: var(--paper-alt);
    border-radius: 4px;
    margin-bottom: 8px;
}
.receipt-name {
    font-size: 0.76rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-soft);
    font-style: italic;
}

/* --- Login page --- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cover);
    padding: 20px;
}
.login-card {
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
}
.login-card h1 {
    font-family: 'Lora', serif;
    color: var(--cover);
    text-align: center;
    margin: 0 0 4px;
}
.login-card .subtitle {
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.88rem;
    margin-bottom: 26px;
}
.login-card button { width: 100%; padding: 11px; margin-top: 6px; }

@media (max-width: 780px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; }
    .main { padding: 24px 18px 40px; }
    table.ledger { display: block; overflow-x: auto; }
}