:root {

    --primary: #00a86b;

    --accent: #ffcc00;

    --bg: #f0f2f5;

    --text: #333;

    --danger: #d32f2f; /* Barva pro "Dlužíš" */

    --success: #2e7d32; /* Barva pro "Jsi v plusu" */

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    margin: 0; padding: 0;

    background-color: var(--bg); color: var(--text);

    line-height: 1.6;

    padding-bottom: 90px;

    -webkit-tap-highlight-color: transparent;

}



/* --- KOMPAKTNÍ HLAVIČKA (BEZ ODPOČTU) --- */

header.compact-header { 

    background-color: #333;

    background-image: url('https://images.unsplash.com/photo-1552465011-b4e21bf6e79a?q=80&w=2039');

    background-size: cover; 

    background-position: center; 

    padding: 15px 20px 30px 20px; 

    display: flex; 

    flex-direction: column;

    align-items: center; 

    color: white; 

    text-align: center; 

    position: relative;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}

header.compact-header::before { 

    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; 

    background: rgba(0,0,0,0.5); z-index: 0; 

}

header.compact-header > * { position: relative; z-index: 1; }



.header-top-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-bottom: 15px;

}



.btn-back {

    color: white;

    text-decoration: none;

    font-weight: bold;

    display: flex;

    align-items: center;

    gap: 5px;

    background: rgba(255,255,255,0.2);

    padding: 8px 15px;

    border-radius: 50px;

    backdrop-filter: blur(4px);

}



.user-profile-pic {

    width: 40px; height: 40px;

    border-radius: 50%;

    border: 2px solid var(--accent);

}



h1.compact-title { 

    margin: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.8); font-size: 1.5rem; letter-spacing: 1px; 

}



/* --- LAYOUT A KARTY --- */

.container { max-width: 800px; margin: -20px auto 0 auto; padding: 0 15px; position: relative; z-index: 2;}

.section-title { border-bottom: 3px solid var(--accent); margin: 30px 0 15px 0; padding-bottom: 5px; font-size: 1.2rem; color: #2c3e50; font-weight: bold; }



.card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 15px; }

.card-body { padding: 15px; }



/* --- SPECIFIKUM DLUŽNÍČKA --- */

.balance-positive { color: var(--success); font-weight: bold; }

.balance-negative { color: var(--danger); font-weight: bold; }

.balance-neutral { color: #666; font-weight: bold; }



.total-balance-card {

    text-align: center;

    padding: 25px 15px;

}

.total-balance-amount {

    font-size: 2.5rem;

    font-weight: 800;

    line-height: 1;

    margin: 10px 0;

}



.expense-item {

    display: flex; justify-content: space-between; align-items: center;

    border-bottom: 1px solid #eee; padding: 12px 0;

}

.expense-item:last-child { border-bottom: none; }

.expense-info-title { font-weight: bold; color: #333; font-size: 1.1rem;}

.expense-info-sub { font-size: 0.85rem; color: #777; }



/* --- TLAČÍTKA A FAB --- */

.btn-main { background-color: var(--primary); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 1rem; width: 100%; font-weight: bold; display: block; text-align: center; text-decoration: none;}

.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 10px 20px; border-radius: 8px; font-weight: bold; width: 100%; margin-top: 10px;}



/* Plovoucí tlačítko na přidání útraty (stejné jako máš na hlavní straně) */

#add-expense-fab {

    position: fixed;

    bottom: 20px;

    right: 20px;

    background: var(--primary);

    color: white;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    font-size: 2rem;

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    z-index: 1000;

    border: 2px solid white;

    transition: transform 0.2s;

}

#add-expense-fab:active { transform: scale(0.9); }