/* NAZOV SUBORU: theme.css */
/* CESTA: /assets/css/theme.css */
/* VERZIA: 1.12 - FIX: Odstránená tlaèová hlavièka. Každá sekcia začína na novej strane. */

/* Importy */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* ---------------------------------
   1. DEFINÍCIA FARIEB (SVETLÁ TÉMA)
   --------------------------------- */
:root {
    --color-base-green: 47, 94, 47; 

    /* Primárne (Zelené akcenty) */
    --color-primary-dark: rgb(var(--color-base-green));
    --color-primary-medium: rgb(75, 150, 75);
    --color-primary-light: rgb(150, 200, 150);
    --color-primary-lightest: rgb(240, 255, 240);

    /* Neutrálne */
    --color-background: #f8fafc;
    --color-content: #ffffff;
    --color-header-bg: rgb(47, 94, 47); /* Tmavá zelená hlavička */
    
    /* Text */
    --color-text-dark: #1f2937;
    --color-text-light: #6b7280;
}

/* ---------------------------------
   2. DEFINÍCIA FARIEB (TMAVÁ TÉMA)
   --------------------------------- */
.dark {
    /* Primárne (Svetlejšie zelené akcenty na tmavom) */
    --color-primary-dark: rgb(100, 200, 100); /* Akcent */
    --color-primary-medium: rgb(70, 140, 70); 
    --color-primary-light: rgb(50, 100, 50); 
    --color-primary-lightest: rgb(30, 60, 30); 

    /* Neutrálne */
    --color-background: #121212;
    --color-content: #222222;
    --color-header-bg: #1f2937; /* Tmavá hlavička */
    
    /* Text */
    --color-text-dark: #e5e7eb;
    --color-text-light: #9ca3af;
}

/* ---------------------------------
   3. GLOBÁLNE ŠTÝLY A TAILWIND EXT.
   --------------------------------- */

/* Fix pre Footer: Nastavenie tela na Flexbox stĺpec s min-height 100vh */
html, body {
    height: 100%;
}

body { 
    font-family: 'Inter', sans-serif; 
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    flex-direction: column;
}

/* Hlavný wrapper obsahu, ktorý rastie, aby vytlačil pätičku dole */
.main-wrapper {
    flex: 1; /* Zabezpečí, že hlavná oblasť obsahu zaberie všetok dostupný priestor */
    display: flex;
    flex-direction: column;
}

/* ŠTÝL PRE LOGO (TrasTag) */
.app-logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.875rem; /* Base size */
    font-weight: 800; /* Extra Bold pre "Tras" */
    letter-spacing: 0.05em; 
}
.app-logo .thin {
    font-weight: 300; /* Light pre "Tag" */
    margin-left: 0.1em;
}

/* Dynamické triedy (Tailwind) */
.bg-primary-dark { background-color: var(--color-header-bg); }
.bg-primary-medium { background-color: var(--color-primary-medium); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-lightest { background-color: var(--color-primary-lightest); }
.bg-background-light { background-color: var(--color-background); }
.bg-content { background-color: var(--color-content); }

.text-primary-dark { color: var(--color-primary-dark); } 
.text-primary-medium { color: var(--color-primary-medium); }
.text-text-dark { color: var(--color-text-dark); }
.text-text-light { color: var(--color-text-light); }
.text-white { color: white; } 

.hover\:bg-primary-medium:hover { background-color: var(--color-primary-medium); }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light); }
.hover\:text-primary-medium:hover { color: var(--color-primary-medium); }

.border-gray-300 { border-color: var(--color-text-light); } 
.border-primary-medium { border-color: var(--color-primary-medium); }
.focus\:ring-primary-medium:focus { --tw-ring-color: var(--color-primary-medium); }
.focus\:border-primary-medium:focus { border-color: var(--color-primary-medium); }

/* Oprava tieňovania a zaoblenia pre eleganciu */
.shadow-2xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-2xl {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.rounded-2xl {
    border-radius: 1rem;
}

/* Zväčšenie dotykových plôch a inputov (prispôsobenie pre 2.3) */
.py-3 { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.py-4 { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.95rem; }
.text-base { font-size: 1.05rem; }


/* --- TOOLTIP STYLY (PRE IKONY) --- */
.action-button-icon {
    position: relative;
    cursor: pointer;
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.75rem; /* p-3 */
    min-width: 48px; 
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out; /* Pre dynamický efekt */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    font-size: 1.2rem; /* Zväčšenie ikon */
}

/* Ikony Obnovy a Mazania - špecifické dynamické efekty */
.restore-btn {
    background-color: #3b82f6; /* indigo-500 */
    color: white;
}
.restore-btn:hover {
    background-color: #1e40af; /* tmavšie indigo */
    transform: scale(1.05); /* Ľahké zväčšenie */
}

.delete-btn {
    background-color: #ef4444; /* red-500 */
    color: white;
}
.delete-btn:hover {
    background-color: #b91c1c; /* tmavšia červená */
    transform: scale(1.05); 
}

/* Tooltip logiga (nezmenená) */
.action-button-icon:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%; /* Nad tlačidlom */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-text-dark);
    color: var(--color-content);
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    font-size: 0.8rem;
    z-index: 100;
    transition: opacity 0.2s;
}

/* Zabezpečenie textovej farby pre inputy v tmavej téme */
.dark input {
    background-color: var(--color-content);
    color: var(--color-text-dark);
}


/* --- TLAČOVÝ ŠTÝL (Pre A4 format) --- */
@media print {
    /* 1. ZVÄČŠENIE OKRAJOV A4 */
    @page {
        /* Horný okraj: 30mm (pre headera) */
        margin-top: 30mm; 
        /* Spodný okraj: 30mm (pre footer) */
        margin-bottom: 30mm; 
        margin-left: 15mm;
        margin-right: 15mm;
    }
    
    /* Vynútiť bielu farbu pozadia a čierny text */
    body, .bg-content, .bg-white, .help-section, .container {
        background-color: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Skryť navigačné, tlačidlá, hlavičku/pätičku webu */
    .print-hidden, .print\:hidden, .header-container, .footer-container {
        display: none !important;
    }
    
    /* Resetovať hlavný kontajner pre plnú šírku obsahu A4 */
    .container {
        max-width: 100% !important; 
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Roztiahnuť obsah na plnú šírku, odstrániť medzery */
    .flex-col.lg\:flex-row > div {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .print-full-width {
        width: 100% !important;
        padding: 0 !important; 
    }
    
    /* Odstrániť tiene, zaoblenia */
    .shadow-lg, .shadow-xl, .shadow-2xl, .rounded-2xl {
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* TLAČOVÁ HLAVIČKA - Zobrazí sa len v sekcii #intro (kvôli štýlu nižšie) */
    .print-header {
        display: block !important;
        width: 100%;
        padding: 0 0 10px 0; 
        background-color: white;
        border-bottom: 1px solid #000;
        z-index: 999;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 3. TLAČOVÁ PÄTIČKA (Fixná pozícia, aby bola na každej strane) */
    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 5mm 15mm 10mm 15mm; 
        border-top: 1px solid #ccc;
        background-color: white;
        font-size: 9pt;
        color: #666;
        text-align: center;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Štylizácia sekcií a ich oddelenie */
    .help-section {
        border-top: 1px dashed #ccc; 
        margin: 20px 0;
        padding: 20px 0 0 0;
        page-break-inside: avoid; 
        
        /* Nová strana pre každú hlavnú sekciu */
        page-break-before: always; 
    }
    
    /* VÝNIMKA: Prvá sekcia nesmie mať prerušenie strany, inak by vytvorila prázdnu stranu. */
    #intro {
        page-break-before: auto !important; 
    }
    
    /* Štýl nadpisov */
    h2, h3, h4, h5 {
        color: black !important; 
        font-weight: 700 !important;
        padding-bottom: 5px;
        margin-top: 15px;
        margin-bottom: 10px;
        border-bottom: 1px solid #000;
    }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    
    /* Vynútiť čierny text pre body */
    .text-text-dark, .text-text-light, p, ul, ol, li {
        color: #333 !important;
        font-size: 11pt;
    }
    
    /* Špeciálne boxy - použiť len šedé pozadie a čierne orámovanie */
    .bg-blue-50, .bg-red-50, .bg-green-50, .bg-yellow-50 {
        background-color: #f0f0f0 !important;
        border-left: 4px solid #aaa !important;
        color: #333 !important;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Ikonky */
    .fas, .far, .fab {
        color: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Zvýraznenie vyhľadávania sa vypne */
    mark {
        background-color: transparent !important;
        color: black !important;
        font-weight: bold;
    }
}