/* Global */
body { -webkit-tap-highlight-color: transparent; background-color: #f3f4f6; }

/* Auth Styles */
.auth-bg {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.loader {
    border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%;
    width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- TABS NAVIGATION --- */
.nav-tab {
    padding: 10px 16px;
    font-weight: bold;
    color: #9ca3af; /* Gray-400 */
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.nav-tab.active {
    color: #2563eb; /* Blue-600 */
    border-bottom-color: #2563eb;
}

/* --- SCROLLABLE TABLE (Young Birds) --- */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
.check-cell {
    min-width: 40px;
    text-align: center;
    border-left: 1px solid #f3f4f6;
}
.check-cell input {
    width: 18px; height: 18px;
    cursor: pointer;
}

/* --- STAMMBAUM STYLES --- */

/* Standard-Anzeige (Bildschirm) */
.pedigree-wrapper {
    background: #555; 
    padding: 20px; 
    overflow: auto;
    display: flex;             
    justify-content: center;
}

.pedigree-sheet {
    width: 210mm; 
    height: 297mm; 
    background: white; 
    margin: 0 auto;
    border: 1px solid #e5e7eb; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    padding: 10mm;             
    box-sizing: border-box;    
    display: flex;             
    flex-direction: column;
    justify-content: space-between;
}

.pedigree-grid {
    display: grid; 
    grid-template-columns: 22% 22% 25% 30%;
    grid-template-rows: repeat(16, 1fr); 
    gap: 2px; 
    height: 85%;               /* Zurück auf 85% gesetzt, wie gewünscht */
    border: 2px solid #000; 
    background: #000; 
    font-family: sans-serif;
}

.ped-box {
    background: #fff; 
    border: 1px solid #999; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    padding: 2px; 
    overflow: hidden; 
    position: relative;
}

/* Grid Positionen */
.p-self   { grid-column: 1; grid-row: 7 / span 4; background: #fff; border: 3px solid #000; z-index: 10; }
.p-father { grid-column: 1; grid-row: 1 / span 6; background: #eff6ff; }
.p-mother { grid-column: 1; grid-row: 11 / span 6; background: #fdf2f8; }

.p-g2-1 { grid-column: 2; grid-row: 1 / span 4; } /* VV */
.p-g2-2 { grid-column: 2; grid-row: 5 / span 4; } /* VM */
.p-g2-3 { grid-column: 2; grid-row: 9 / span 4; } /* MV */
.p-g2-4 { grid-column: 2; grid-row: 13 / span 4; } /* MM */

.p-g3 { grid-column: 3; grid-row: span 2; font-size: 10px; }
.p-g4 { grid-column: 4; grid-row: span 1; font-size: 8px; line-height: 1.1; padding: 1px 2px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.p-g4 .p-ring { font-size: 7.5px; }
.p-g4-name { font-weight: 700; font-size: 7px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-g4-notes { font-size: 6px; color: #555; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Typo im Stammbaum */
.p-role { font-size: 8px; text-transform: uppercase; color: #666; margin-bottom: 2px; }
.p-ring { font-family: monospace; font-weight: 700; font-size: 11px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-name { font-weight: 700; font-size: 10px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-meta { font-size: 8px; color: #555; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-notes { font-size: 7px; color: #444; line-height: 1.2; overflow: hidden; margin-top: 1px; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-word; }

/* Ringnummern kleiner in tieferen Generationen */
.p-g2-1 .p-ring, .p-g2-2 .p-ring, .p-g2-3 .p-ring, .p-g2-4 .p-ring { font-size: 9.5px; }
.p-g3 .p-ring { font-size: 8.5px; }
.p-g3 .p-name { font-size: 8px; }
.p-g4 .p-ring { font-size: 7px; }
.p-notes.gen1 { -webkit-line-clamp: 5; max-height: 42px; }
.p-notes.gen2 { -webkit-line-clamp: 3; max-height: 26px; }
.p-notes.gen3 { -webkit-line-clamp: 2; max-height: 17px; font-size: 6.5px; }

/* --- KI-ZUCHTBERATER CONTENT STYLES --- */
.breeding-advisor-content h1, .breeding-advisor-content h2, .breeding-advisor-content h3, .breeding-advisor-content h4 {
    font-weight: 700; color: #1f2937; margin-top: 1rem; margin-bottom: 0.5rem;
}
.breeding-advisor-content h1 { font-size: 1.25rem; }
.breeding-advisor-content h2 { font-size: 1.125rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.25rem; }
.breeding-advisor-content h3 { font-size: 1rem; color: #7c3aed; }
.breeding-advisor-content h4 { font-size: 0.875rem; color: #6b7280; }
.breeding-advisor-content p { margin-bottom: 0.5rem; }
.breeding-advisor-content ul, .breeding-advisor-content ol { margin-left: 1.25rem; margin-bottom: 0.5rem; }
.breeding-advisor-content ul { list-style-type: disc; }
.breeding-advisor-content ol { list-style-type: decimal; }
.breeding-advisor-content li { margin-bottom: 0.25rem; }
.breeding-advisor-content strong { font-weight: 700; color: #111827; }
.breeding-advisor-content em { font-style: italic; color: #6b7280; }
.breeding-advisor-content table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.8125rem; }
.breeding-advisor-content th { background: #f3f0ff; font-weight: 700; text-align: left; padding: 0.5rem; border: 1px solid #e5e7eb; font-size: 0.75rem; }
.breeding-advisor-content td { padding: 0.375rem 0.5rem; border: 1px solid #e5e7eb; }
.breeding-advisor-content tr:nth-child(even) { background: #faf9ff; }
.breeding-advisor-content code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.8125rem; }
.breeding-advisor-content blockquote { border-left: 3px solid #a78bfa; padding: 0.5rem 0.75rem; margin: 0.5rem 0; background: #faf5ff; color: #6d28d9; font-style: italic; border-radius: 0 0.25rem 0.25rem 0; }
.breeding-advisor-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 1rem 0; }

/* Klickbare Ringnummern im KI-Chat */
a.pigeon-link {
    color: #7c3aed;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    text-decoration: none;
    background: #f3f0ff;
    padding: 0 4px;
    border-radius: 4px;
    border-bottom: 2px solid #c4b5fd;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
a.pigeon-link:hover {
    background: #ede9fe;
    border-bottom-color: #7c3aed;
    color: #5b21b6;
}
a.pigeon-link:active {
    transform: scale(0.97);
}

/* Chat-Bubbles */
.chat-user { background: #ede9fe; border-radius: 1rem 1rem 0.25rem 1rem; padding: 0.625rem 0.875rem; max-width: 85%; margin-left: auto; }
.chat-ai { background: #f3f4f6; border-radius: 1rem 1rem 1rem 0.25rem; padding: 0.625rem 0.875rem; max-width: 90%; }
.chat-ai .breeding-advisor-content { font-size: 0.8125rem; }
.chat-ai .breeding-advisor-content h2 { font-size: 0.9375rem; }
.chat-ai .breeding-advisor-content h3 { font-size: 0.875rem; }

/* --- MOBILE OPTIMIERUNG --- */

/* Scrollbar in Tabs verstecken */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Touch-Verhalten */
.overscroll-contain { overscroll-behavior: contain; }

/* Safe-Area für iPhone Notch/Home-Bar */
.safe-area-bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

/* Klickbare Pedigree-Boxen Feedback */
.ped-clickable { transition: background 0.15s; }
.ped-clickable:active { background: #f0f4ff !important; }

@media (max-width: 640px) {
    /* Tabs kompakter */
    .nav-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Stats Dashboard kompakt: 4er-Reihe */
    #statsDashboard .flex.items-center {
        gap: 0.25rem;
        padding: 0.375rem 0.5rem;
    }
    #statsDashboard .text-lg { font-size: 0.875rem; }
    #statsDashboard .text-xs { font-size: 0.6rem; }
    #statsDashboard .text-base { font-size: 0.8rem; }
    
    /* Pigeon Cards kompakter */
    #pigeonGrid > div { padding: 0.5rem; }
    #pigeonGrid .w-20 { width: 3.5rem; height: 3.5rem; }
    #pigeonGrid .text-base { font-size: 0.8125rem; }
    #pigeonGrid .font-mono { font-size: 0.75rem; }
    
    /* Card-Buttons kleiner */
    #pigeonGrid .flex.gap-2.mt-3 { margin-top: 0.5rem; padding-top: 0.5rem; }
    #pigeonGrid .flex.gap-2.mt-3 button { padding: 0.375rem 0; font-size: 0.65rem; }
    
    /* Filter-Dropdowns kompakt */
    #filterPanel select { font-size: 11px; padding: 6px; }
    
    /* Pedigree auf Mobile: volle Breite, scrollbar */
    .pedigree-wrapper { padding: 8px; }
    .pedigree-sheet {
        width: 100%;
        height: auto;
        min-height: 70vh;
        padding: 8px;
        font-size: 80%;
    }
    .pedigree-grid {
        font-size: 75%;
        height: auto;
        min-height: 60vh;
    }
    .p-ring { font-size: 8px !important; }
    .p-name { font-size: 7px !important; }
    .p-role { font-size: 6px !important; }
    .p-meta { font-size: 6px !important; }
    .p-notes { font-size: 5.5px !important; }
    .p-g3 .p-ring { font-size: 7px !important; }
    .p-g3 .p-name { font-size: 6px !important; }
    .p-g4 .p-ring { font-size: 6px !important; }
    .p-g4-name { font-size: 5.5px !important; }
    .p-g4-notes { font-size: 5px !important; }
    
    /* Young Birds Tabelle: sticky erste Spalte */
    .table-container { font-size: 12px; }
    .table-container th:first-child,
    .table-container td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        border-right: 2px solid #e5e7eb;
    }
    .table-container th:first-child { background: #f9fafb; }
    .check-cell { min-width: 36px; }
    .check-cell input { width: 16px; height: 16px; }
    
    /* Modals: voller Bildschirm auf Mobile */
    #editModal > div,
    #pairingModal > div,
    #photoImportModal > div,
    #aiPhotoCaptureModal > div { 
        border-radius: 0; 
    }
    
    /* Form-Elemente: 16px verhindert iOS Auto-Zoom */
    input[type="text"], input[type="password"], input[type="number"], select, textarea {
        font-size: 16px !important;
    }
    
    /* Paarungen kompakter */
    #pairingGrid > div { padding: 0.75rem; }
    #pairingGrid .text-2xl { font-size: 1.25rem; }
}

/* Extra-kleine Displays (iPhone SE etc.) */
@media (max-width: 380px) {
    .nav-tab { padding: 6px 8px; font-size: 12px; }
    #pigeonGrid .w-20 { width: 3rem; height: 3rem; }
    .pedigree-grid { font-size: 65%; }
}

/* --- DRUCK MODUS (RADIKAL FIX) --- */
@page {
    size: A4;
    margin: 0;
}

@media print {
    /* 1. Alles ausblenden */
    body > *, #mainApp > * {
        display: none !important;
    }

    /* 2. Basis-Reset */
    html, body, #mainApp {
        display: block !important;
        background: white !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Modal sichtbar */
    #pedigreeModal {
        display: block !important;
        position: static !important;
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: hidden !important;
    }

    /* 4. Wrapper neutralisieren */
    .pedigree-wrapper {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        background: white !important;
        overflow: hidden !important;
    }

    /* 5. Das Blatt – exakt gleich wie Bildschirm */
    .pedigree-sheet {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 10mm !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* 6. Grid exakt wiederherstellen */
    .pedigree-grid {
        display: grid !important;
        grid-template-columns: 22% 22% 25% 30% !important;
        grid-template-rows: repeat(16, 1fr) !important;
        gap: 2px !important;
        height: 85% !important;
        border: 2px solid #000 !important;
        background: #000 !important;
    }

    /* 7. Boxen als Flex */
    .ped-box {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background: #fff !important;
    }

    /* 8. Header als Flex */
    .pedigree-sheet > .border-b-2,
    .pedigree-sheet > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    /* 9. Inline-Elemente korrekt */
    .p-role, .p-ring, .p-name, .p-meta, .p-notes,
    .p-g4-name, .p-g4-notes {
        display: block !important;
    }
    .p-ring {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 10. Verstecke UI Elemente */
    .no-print {
        display: none !important;
    }

    /* 11. Farben erzwingen */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}