/**
 * Genealogy Familienblatt Mode Styles
 */

.familienblatt-layout {
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: calc(100vh - 200px);
}

.family-selector select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-light, #E5E7EB);
    border-radius: 4px;
    font-size: 0.875rem;
    background: white;
}

.navigation-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-btn {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-light, #E5E7EB);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
    text-align: left;
}

.nav-btn:hover:not(:disabled) {
    background: #FEF3C7;
    border-color: #A16207;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.children-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.children-nav p {
    font-size: 0.6875rem;
    color: var(--text-secondary, #6B7280);
    margin: 0.5rem 0 0.25rem 0;
}

.print-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-btn {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-light, #E5E7EB);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: #F3F4F6;
}

/* Family Sheet */
.family-sheet {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-light, #E5E7EB);
    max-width: 800px;
    margin: 0 auto;
}

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid #A16207;
    background: #FEF3C7;
}

.sheet-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #78350F;
}

.family-id {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    color: var(--text-tertiary, #9CA3AF);
}

.empty-state {
    padding: 4rem;
    text-align: center;
    color: var(--text-secondary, #6B7280);
}

/* Couple Section */
.couple-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}

.person-block {
    padding: 1rem;
    background: var(--paper-sand, #FDFBF7);
    border-radius: 6px;
}

.person-block h3 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6B7280);
    margin: 0 0 0.75rem 0;
}

.person-info .person-name {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}

.person-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
}

.person-details dt {
    color: var(--text-secondary, #6B7280);
}

.person-details dd {
    margin: 0;
}

.marriage-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.marriage-symbol {
    font-size: 2rem;
    color: #A16207;
    margin-bottom: 0.5rem;
}

.marriage-info {
    text-align: center;
}

.marriage-date {
    font-weight: 600;
    margin: 0;
    font-size: 0.875rem;
}

.marriage-place {
    font-size: 0.75rem;
    color: var(--text-secondary, #6B7280);
    margin: 0;
}

.unknown {
    color: var(--text-tertiary, #9CA3AF);
    font-style: italic;
}

/* Children Section */
.children-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}

.children-section h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6B7280);
    margin: 0 0 1rem 0;
}

.children-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.children-table th {
    text-align: left;
    padding: 0.5rem;
    background: var(--paper-sand, #FDFBF7);
    border-bottom: 1px solid var(--border-light, #E5E7EB);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.children-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}

.children-table tr:hover {
    background: #FEF3C7;
    cursor: pointer;
}

.children-table tr.has-family .child-name::after {
    content: ' →';
    color: #A16207;
}

.no-children {
    color: var(--text-tertiary, #9CA3AF);
    font-style: italic;
    text-align: center;
}

/* Notes & Sources */
.notes-section,
.sources-section {
    padding: 1.25rem 1.5rem;
}

.notes-section {
    border-bottom: 1px solid var(--border-light, #E5E7EB);
}

.notes-section h3,
.sources-section h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6B7280);
    margin: 0 0 0.75rem 0;
}

.notes-content {
    font-size: 0.875rem;
    line-height: 1.6;
}

.sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.sources-list li {
    padding: 0.25rem 0;
    padding-left: 1rem;
    position: relative;
}

.sources-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #A16207;
}

/* Context Panel */
#person-quickview {
    background: var(--paper-sand, #FDFBF7);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-light, #E5E7EB);
}

#person-quickview.hidden {
    display: none;
}

#person-quickview h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6B7280);
    margin: 0 0 0.75rem 0;
}

#person-quickview h4 {
    margin: 0 0 0.5rem 0;
}

#person-quickview dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 0.8125rem;
}

#person-quickview dt {
    color: var(--text-secondary, #6B7280);
}

#person-quickview dd {
    margin: 0;
}

/* Print Styles */
@media print {
    .genealogy-sidebar,
    .genealogy-context,
    .demo-header,
    .mode-tabs,
    .demo-footer {
        display: none !important;
    }

    .familienblatt-layout {
        display: block;
        padding: 0;
    }

    .family-sheet {
        border: none;
        max-width: none;
    }

    .sheet-header {
        background: none;
        border-bottom-color: black;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .familienblatt-layout {
        grid-template-columns: 1fr;
    }

    .genealogy-sidebar,
    .genealogy-context {
        display: none;
    }

    .couple-section {
        grid-template-columns: 1fr;
    }

    .marriage-block {
        order: -1;
        flex-direction: row;
        gap: 1rem;
    }
}