/*pedigree report html iframe css*/
pedigree > body {
    /*padding: 10px 30px;*/
    /*font: 70% Verdana;*/
    margin: 0;
    color: #333;
}

pedigree > .btmline {
    border-bottom-color: #0099DA;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

pedigree > table {
    width: 100%;
    font-size: 12px !important;
}

pedigree > p.horse {
    font-size: 2em;
    margin: 0;
    text-align: center;
}

pedigree > p {
    line-height: 110%;
    margin-top: 0;
    margin-bottom: 0 !important;
}

pedigree > td {
    line-height: 110%;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
}

.remHRC {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: left;
}

.remHRR {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: left;
    color: maroon;
    font: bold;
}

.remHRE {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: right;
}

.rem0 {
    margin-left: 20.0pt;
    text-indent: -20.0pt;
    text-align: justify;
}

.sireref {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
}

.sirerefinglis {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
    font-style: italic;
}

.header {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
}

.ss {
    margin-left: 20.0pt;
    text-indent: -20.0pt;
    text-align: justify;
}

.rem1 {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.pr {
    margin-left: 36.0pt;
    text-indent: -27.0pt;
    text-align: justify;
}

.ds {
    text-align: justify;
}

.br {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem2 {
    margin-left: 36.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem3 {
    margin-left: 45.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem4 {
    margin-left: 54.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem5 {
    margin-left: 63.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem6 {
    margin-left: 72.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem7 {
    margin-left: 81.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem8 {
    margin-left: 90.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem9 {
    margin-left: 99.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem10 {
    margin-left: 108.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem11 {
    margin-left: 117.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem12 {
    margin-left: 126.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.remA {
    margin-left: 50pt;
    text-indent: -50.0pt;
    text-align: justify;
}

.brem1 {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem2 {
    margin-left: 36.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem3 {
    margin-left: 45.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem4 {
    margin-left: 54.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.grid {
    font-size: 7.5pt;
}

.rrTable {
    margin: 3px 0 13px
}

.rpTable {
    margin: 3px 0 13px
}

.tright {
    text-align: right;
}

.tleft {
    text-align: left;
}

.tcenter {
    text-align: center;
}

.turight {
    text-align: right;
    border-bottom-style: solid;
    border-bottom-width: thin
}

.talt {
    background: #ebebeb;
}

.alt {
    background: #ebebeb;
}
.inbreedingNC {
    background: #ccffff;
    font-weight: bold;
}

.inbreedingNF {
    background: #ffe4e1;
    font-weight: bold;
}

.inbreedingYC {
    background: #ccffff;
    font-weight: bold;
}

.inbreedingYF {
    background: #ffe4e1;
    font-weight: bold;
}

.inbreedingNCH {
    background: #ffffff;
    font-weight: normal;
}

.inbreedingNFH {
    background: #ebebeb;
    font-weight: normal;
}


div#links a span {
    display: none;
}

div#links a:hover span {
    display: block;
    position: fixed;
    top: 200px;
    left: 450px;
    width: 250px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    color: black;
    background: yellow;
    font: 10px Verdana, sans-serif;
    text-align: center;
    margin-left: 0pt;
    text-indent: 0pt;
    text-align: justify;
}

div#links p {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}





img {
    border: 0;
}

.minisubtitle {
    COLOR: #000000;
    FONT: 12px verdana, arial, sans-serif;
    font-weight: bold;
}

.pedigreestyle {
    padding: 10px 30px;
    font: 70% Verdana, arial, sans-serif;
    margin: 0;
    color: #333;
}

.buildertab a.nav-link.active.show {
    background-color: #ADE7FF;
    border: 0px;
    margin-right: 5px;
    color: #2c2a4a;
}
.buildertab a.nav-link {
    border-top: 1px solid #ADE7FF;
    border-right: 1px solid #ADE7FF;
    border-left: 1px solid #ADE7FF;
    margin-right: 5px;
}
.buildertabbottom {
    margin-top: -2px;
    background-color: #ADE7FF;
    padding: 0.5em;
    display: flex;
    color: #2c2a4a;

}
/* ============================================================
   Pedigree report modal — mobile fullscreen behaviour.

   Paste this into the global stylesheet that already owns the
   .pedigree-report-wrapper, .four-gen, .five-gen, .six-gen,
   .seven-gen rules (likely wwwroot/css/site.css or app.css).

   Rationale: Pedigrees.razor previously used a MediaQueryList +
   _isSmall bool to decide download (mobile) vs modal (desktop)
   when a user opened a report. That coupling forced the whole
   page through an @if (_isSmall.HasValue) gate which kept the
   landing page from rendering on first paint.

   Removing _isSmall meant the modal now opens on mobile too.
   These rules make it fullscreen below the md breakpoint so the
   PDF preview gets the whole viewport rather than being squashed
   into a centred modal card.

   We use the :has() pattern because Blazorise renders modals
   outside the originating component's scoped CSS tree (David's
   established workaround for modal-portal rendering — same
   approach used elsewhere in the codebase).
   ============================================================ */

@media (max-width: 767.98px) {

    /* Target the modal shell that contains the pedigree report wrapper.
       Blazorise's .modal sits at body level; we identify the right one
       via :has() looking for our wrapper class on the inner dialog. */
    .modal:has(.pedigree-report-wrapper) .modal-dialog {
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .modal:has(.pedigree-report-wrapper) .modal-content {
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    /* Let the wrapper fill the available space. The generation-specific
       classes (four-gen, five-gen, etc.) set fixed widths for desktop
       layout — neutralise them on mobile so the report scales to the
       phone width rather than overflowing. */
    .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper {
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.four-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.five-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.six-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.seven-gen {
            width: 100%;
            max-width: 100%;
        }

    /* If the modal hosts a PDF in an iframe/embed, let it fill the
       fullscreen space too. */
    .modal:has(.pedigree-report-wrapper) iframe,
    .modal:has(.pedigree-report-wrapper) embed,
    .modal:has(.pedigree-report-wrapper) object {
        width: 100%;
        height: 100%;
        min-height: calc(100vh - 4rem); /* clears header bar */
        border: 0;
    }
}