/* Family Group Report Styles */

/* Print Styles - Hide tabs when printing */
@media print {
    [data-no-print="true"],
    [data-no-print] {
        display: none !important;
    }
    
    .lp-tab-content {
        display: block !important;
        page-break-after: always;
    }
    
    .lp-tab-content:last-child {
        page-break-after: auto;
    }
}

/* Tabbed View Styles — scoped to family-group reports only */
.lp-family-group-tabs {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
}

.lp-family-group-tabs .lp-tab-nav {
    display: flex !important;
    border-bottom: 1px solid #000 !important;
    margin-bottom: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

.lp-family-group-tabs .lp-tab-button,
.lp-family-group-tabs button[type="button"],
.lp-family-group-tabs button[data-tab],
.lp-family-group-tabs .lp-tab-nav button {
    padding: 8px 16px !important;
    background: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
    border: 1px solid #000 !important;
    border-color: #000 !important;
    border-bottom: none !important;
    cursor: pointer !important;
    margin-right: 2px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: none !important;
    outline: none !important;
}

.lp-family-group-tabs .lp-tab-button:hover,
.lp-family-group-tabs button[type="button"]:hover,
.lp-family-group-tabs button[data-tab]:hover,
.lp-family-group-tabs .lp-tab-nav button:hover {
    background: #e0e0e0 !important;
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

.lp-family-group-tabs .lp-tab-button.active,
.lp-family-group-tabs button[type="button"].active,
.lp-family-group-tabs button[data-tab].active,
.lp-family-group-tabs .lp-tab-nav button.active {
    background: white !important;
    background-color: white !important;
    font-weight: bold !important;
    color: #000 !important;
    box-shadow: none !important;
}

.lp-family-group-tabs .lp-tab-content {
    display: none;
    border: 1px solid #000;
    border-top: none;
}

.lp-tab-content.active {
    display: block;
}

/* Single Family Report Styles */
.lp-family-group-report {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto 30px auto;
    border: 2px solid #000;
    padding: 10px;
    background: white;
}

.lp-fgs-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.lp-fgs-subtitle {
    text-align: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.lp-fgs-spouses {
    display: flex;
    margin-bottom: 15px;
}

.lp-fgs-spouse {
    flex: 1;
    border: 1px solid #000;
    margin-right: 5px;
}

.lp-fgs-spouse:last-child {
    margin-right: 0;
}

.lp-fgs-spouse-header {
    background: #f0f0f0;
    padding: 3px 8px;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #000;
}

.lp-fgs-spouse-content {
    padding: 8px;
}

.lp-fgs-field {
    display: flex;
    margin-bottom: 3px;
    font-size: 11px;
}

.lp-fgs-field-label {
    width: 80px;
}

.lp-fgs-field-value {
    flex: 1;
    border-bottom: 1px solid #000;
    min-height: 12px;
    padding-left: 3px;
}

.lp-fgs-children-section {
    margin-bottom: 15px;
}

.lp-fgs-children-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.lp-fgs-children-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000;
}

.lp-fgs-children-table th,
.lp-fgs-children-table td {
    border: 1px solid #000;
    padding: 3px;
    font-size: 10px;
    text-align: left;
}

.lp-fgs-children-table th {
    background: #f0f0f0;
    font-weight: bold;
}

.lp-fgs-children-table .lp-fgs-child-no {
    width: 30px;
    text-align: center;
}

.lp-fgs-children-table .lp-fgs-child-name {
    width: 150px;
}

.lp-fgs-children-table .lp-fgs-child-sex {
    width: 40px;
    text-align: center;
}

.lp-fgs-children-table .lp-fgs-child-birth {
    width: 120px;
}

.lp-fgs-children-table .lp-fgs-child-death {
    width: 120px;
}

.lp-fgs-children-table .lp-fgs-child-spouse {
    width: 150px;
}

.lp-fgs-marriage-section {
    margin-bottom: 15px;
}

.lp-fgs-marriage-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.lp-fgs-marriage-fields {
    display: flex;
    gap: 20px;
}

.lp-fgs-sources-section {
    margin-bottom: 15px;
}

.lp-fgs-sources-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
}

.lp-fgs-sources-box {
    border: 1px solid #000;
    height: 60px;
}

.lp-fgs-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.lp-fgs-footer-field {
    display: flex;
    align-items: center;
}

.lp-fgs-footer-label {
    margin-right: 5px;
}

.lp-fgs-footer-line {
    border-bottom: 1px solid #000;
    width: 120px;
    height: 12px;
}

.lp-family-group-report a {
    color: #000;
    text-decoration: none;
}

@media print {
    .lp-family-group-tabs .lp-tab-nav,
    .lp-family-group-tabs .lp-tab-button {
        display: none !important;
    }

    .lp-family-group-tabs .lp-tab-content {
        display: block !important;
        page-break-after: always;
    }

    .lp-family-group-tabs .lp-tab-content:last-child {
        page-break-after: auto;
    }

    .lp-family-group-report {
        page-break-inside: avoid;
        max-width: 100%;
    }

    .lp-fgs-spouses,
    .lp-fgs-children-section,
    .lp-fgs-marriage-section {
        page-break-inside: avoid;
    }

    .lp-fgs-children-table {
        table-layout: fixed;
        width: 100%;
        font-size: 8pt;
    }

    .lp-fgs-children-table th,
    .lp-fgs-children-table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

@media (max-width: 768px) {
    .lp-family-group-tabs {
        max-width: 100%;
    }

    .lp-family-group-report {
        max-width: 100%;
        padding: 8px;
        box-sizing: border-box;
    }

    .lp-family-group-tabs .lp-tab-nav {
        justify-content: flex-start !important;
    }

    .lp-family-group-tabs .lp-tab-button,
    .lp-family-group-tabs button[data-tab],
    .lp-family-group-tabs .lp-tab-nav button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .lp-fgs-children-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}