/* --- SETĂRI GENERALE --- */
:root {
    --bg-color: #e8e6e1;      /* Culoarea mesei/fundalului */
    --paper-color: #fdfbf7;   /* Culoarea hârtiei (crem deschis) */
    --ink-color: #1a1a1a;     /* Culoarea textului */
    --accent-color: #555;     /* Culoare secundară */
    --line-color: #eee;       /* Liniile de caiet */
    
    /* Fonturi */
    --font-book: 'Cormorant Garamond', serif;  /* Pentru titluri și text tipărit */
    --font-hand: 'Caveat', cursive;            /* Pentru scrisul tău de mână */
}

* {
    box-sizing: border-box; /* Esențial pentru layout responsive */
}

body {
    background-color: var(--bg-color);
    margin: 0;
    font-family: var(--font-book);
    color: var(--ink-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aliniem sus pe mobil */
    padding: 0;
}

/* --- CARTEA / PAGINA --- */
.book-spine {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px; /* Margine mică pe telefon */
}

.page {
    background-color: var(--paper-color);
    width: 100%;
    max-width: 700px; /* Lățimea maximă pe desktop */
    min-height: 90vh; /* Pe mobil să pară lungă */
    padding: 20px;    /* Spațiere internă mai mică pe mobil */
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* --- NAVIGARE --- */
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-color);
}

.nav-btn {
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    font-family: var(--font-book);
    font-size: 1.2rem;
    padding: 5px 15px;
    border-radius: 4px;
    /* Touch-friendly pe mobil */
    min-height: 40px; 
    min-width: 40px;
}

input[type="date"] {
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--font-book);
    font-size: 1.1rem;
    color: var(--accent-color);
    text-align: center;
}

/* --- HEADER & CITAT --- */
.header-section { 
    text-align: center; 
    margin-bottom: 20px; 
}

#displayDate { 
    margin: 0; 
    font-weight: 600; 
    font-size: 1.2rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.quote-box {
    margin-top: 15px;
    padding: 10px;
    font-style: italic;
    font-size: 1rem;
    color: #444;
    background: rgba(0,0,0,0.02); /* Ușor fundal să iasă în evidență */
    border-left: 3px solid #ccc;
}

#quoteAuthor { 
    display: block; 
    margin-top: 5px; 
    font-weight: bold; 
    font-size: 0.9rem; 
    text-align: right; 
}

hr.separator { 
    border: 0; 
    border-top: 1px solid var(--line-color); 
    margin: 20px 0; 
}

/* --- TITLURI --- */
h1.chapter-title { 
    font-size: 1.6rem; 
    text-align: center; 
    margin-bottom: 20px; 
    color: #000;
}

h3.section-title { 
    font-size: 1.3rem; 
    margin-top: 30px; 
    margin-bottom: 15px;
    border-bottom: 1px solid var(--line-color); 
    padding-bottom: 5px; 
    font-weight: normal; 
    font-style: italic; 
}

/* --- INPUTS & FORMS (Design de mână) --- */
input[type="text"], textarea {
    font-family: var(--font-hand);
    font-size: 1.3rem; /* Font mare să fie lizibil pe telefon */
    color: #0000aa;    /* Culoare albastră de pix */
    border: none;
    background: transparent;
    outline: none;
}

/* Input-urile cu linie dedesubt */
.line-input, .focus-box input, .checklist-container input[type="text"] {
    border-bottom: 1px dotted #ccc;
    width: 100%;
    padding: 5px 0;
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-bottom: 1px solid #000; /* Linia devine neagră când scrii */
}

/* --- SECȚIUNEA 1: FOCUS GRID (Suflet, Fizic, Mental) --- */
.focus-grid {
    display: grid;
    /* PE MOBIL: 1 coloană (unul sub altul) */
    grid-template-columns: 1fr; 
    gap: 20px;
}

.focus-box {
    text-align: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee; /* Chenar subtil */
    border-radius: 5px;
}

.focus-box label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

/* --- SECȚIUNEA 2: CHECKLIST --- */
.checklist-container {
    display: grid;
    grid-template-columns: 1fr; /* Pe mobil: 1 coloană */
    gap: 10px;
}

.checklist-container div {
    display: flex;
    align-items: center;
}

input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 15px;
    cursor: pointer;
    min-width: 20px; /* Zonă de atingere mai mare */
    min-height: 20px;
}

/* --- SECȚIUNEA 3: GRATITUDE --- */
.gratitude-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gratitude-item {
    display: flex;
    align-items: center;
}

.gratitude-item span {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    margin-right: 10px;
}

/* --- SECȚIUNEA 4: REFLECTION (Textarea cu linii) --- */
.reflection-area {
    margin-top: 10px;
    width: 100%;
}

textarea {
    width: 100%;
    height: 200px;
    /* Linii de caiet dictate prin gradient CSS */
    background-image: repeating-linear-gradient(transparent, transparent 31px, var(--line-color) 32px);
    background-attachment: local;
    line-height: 32px;
    padding: 0 5px;
    resize: vertical;
}

.footer-page {
    text-align: center;
    margin-top: 40px;
    font-size: 0.8rem;
    color: #aaa;
}

/* --- MEDIA QUERIES (Reguli pentru TABLETĂ și DESKTOP) --- */

@media (min-width: 768px) {
    /* Setări pentru ecrane mai mari de 768px (Tablete, Laptopuri) */

    body {
        padding: 40px 0; /* Mai mult spațiu în jurul cărții */
        align-items: center; /* Centrăm vertical pe desktop */
    }

    .page {
        padding: 50px; /* Margini interioare generoase */
        box-shadow: 5px 0 20px rgba(0,0,0,0.15); /* Umbră mai pronunțată */
        border-radius: 2px 10px 10px 2px; /* Colțuri rotunjite stil carte */
    }

    /* Pe desktop, cele 3 cutii (Suflet, Fizic, Mental) stau pe un rând */
    .focus-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
    
    .focus-box {
        border: none; /* Scoatem chenarul pe desktop pentru un look mai curat */
        background: transparent;
        padding: 0;
    }
    
    .focus-box label {
        border-bottom: 2px solid #000; /* Linie neagră sub titlu */
        margin-bottom: 10px;
    }

    /* Checklist pe 2 coloane pe desktop */
    .checklist-container {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    h1.chapter-title {
        font-size: 2.2rem;
    }
}