/*
 * CMHFIDS board styles (2.0.4+). The page layouts still style most of the board (custom CSS on the
 * flight status page and the homepage widgets); these rules cover what the plugin itself relies on.
 */

/* Rows the filter leaves out */
.cmhfids-out {
    display: none !important;
}

/* Stripe only the rows the filter leaves visible. The flight status page's own rule counts the hidden
   rows too, so a filtered list came out white, shaded, shaded, white. Rows are white, not transparent:
   the homepage bar's results sit on a gray panel. Set --cmhfids-stripe to change the shade. */
@media only screen and (min-width: 1001px) {
    table.table > tbody > tr.dtFilterRow:nth-child(even of tr.dtOnly) {
        background-color: #FFFFFF;
    }

    table.table > tbody > tr.dtFilterRow:nth-child(even of tr.dtFilterRow:not(.cmhfids-out)) {
        background-color: var(--cmhfids-stripe, #F9F9F9);
    }
}

/* The homepage bar's results are striped the same way at every width */
.flightsDiv table.table > tbody > tr.dtFilterRow {
    background-color: #FFFFFF;
}

.flightsDiv table.table > tbody > tr.dtFilterRow:nth-child(even of tr.dtFilterRow:not(.cmhfids-out)) {
    background-color: var(--cmhfids-stripe, #F9F9F9);
}

/* Icons are inline SVG (Lucide), so the board needs no icon font */
.cmhfids-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cmhfids-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.searchBarButton .cmhfids-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* Flight status dot (the status itself is always written next to it) */
.cmhfids-dot {
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    margin-right: 0.45em;
    border-radius: 50%;
    vertical-align: 0.05em;
}

@media (forced-colors: active) {
    .cmhfids-dot {
        forced-color-adjust: none;
    }
}

/* Pin to top: a toggle button (aria-pressed); a pinned flight's pin is filled */
table.table button.cmhfids-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

table.table button.cmhfids-pin:hover,
table.table button.cmhfids-pin:focus {
    background: transparent;
    color: #007BB3;
}

table.table button.cmhfids-pin:focus {
    outline: none;
}

table.table button.cmhfids-pin:focus-visible {
    outline: 2px solid #002855;
    outline-offset: 2px;
}

table.table button.cmhfids-pin .cmhfids-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

table.table button.cmhfids-pin[aria-pressed="true"] {
    color: #007BB3;
}

table.table button.cmhfids-pin[aria-pressed="true"] .cmhfids-icon {
    fill: currentColor;
}

/* The board's column header, and the flights pinned into it, stick just below the site header. The
   page's custom CSS sticks them at 125px, the height of the old header, which left a gap that rows
   scrolled through. The CRAA site header publishes the height it covers; 125px stays the fallback. */
table.table > thead {
    top: var(--craa-hdr-covers, 125px);
}

/* On phones and tablets pinned flights stay at the top of the list but don't stick: a stuck header
   holding a pinned card or two would cover most of the screen. */
@media only screen and (max-width: 1000px) {
    table.table > thead {
        position: static;
    }
}

/* Text for screen readers only */
.cmhfids-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* A flight's details button: its flight number in the desktop row, DETAILS on the phone card */
table.table button.cmhfids-details {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: none;
    cursor: pointer;
}

table.table button.cmhfids-details:hover,
table.table button.cmhfids-details:focus {
    background: transparent;
    color: inherit;
    text-decoration: underline;
}

table.table button.cmhfids-details:focus {
    outline: none;
}

table.table button.cmhfids-details:focus-visible {
    outline: 2px solid #002855;
    outline-offset: 2px;
}

table.table td.tdDetail button.cmhfids-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

/* A row whose button has keyboard focus looks like a row under the mouse */
table.table tr.dtFilterRow:focus-within {
    background-color: #EEFAFF;
}

/* A table the filter emptied, or a day with no flights listed */
table.table tr.cmhfids-nomatch td,
table.table tr.cmhfids-empty td {
    padding: 24px 15px !important;
    color: #002855;
    font-size: 16px;
    text-align: center !important;
}

table.table tr.cmhfids-nomatch[hidden] {
    display: none !important;
}

/* "Updated 3:29 p.m." and the out-of-date warning */
.cmhfids-status {
    margin: 0 auto 12px;
}

.cmhfids-status--board {
    width: 80%;
}

.cmhfids-status p.cmhfids-updated {
    margin: 0 !important;
    color: #554B4D;
    font-size: 14px;
    text-align: right;
}

.cmhfids-status p.cmhfids-stale-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 0 !important;
    padding: 12px 16px;
    border-left: 4px solid #F1BE48;
    background: #FFF8E5;
    color: #002855;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
}

.cmhfids-stale-note .cmhfids-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: #8A6100;
}

.cmhfids-status [hidden] {
    display: none !important;
}

.cmhfids-status--home {
    margin: 0;
    padding: 0 8px 6px;
}

.cmhfids-status--home p.cmhfids-updated {
    font-size: 12px;
}

.cmhfids-status--home p.cmhfids-stale-note {
    font-size: 14px;
}

@media only screen and (max-width: 1000px) {
    .cmhfids-status--board {
        width: auto;
        margin: 0 15px 12px;
    }
}

/* Viva Aerobus flights: the Viva and Vacation Express logos side by side */
.airline-logo-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 234px;
    max-width: 100%;
    vertical-align: middle;
}

.airline-logo-pair img {
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    object-fit: contain;
}

/* An airline with no logo yet shows its name */
.airlineName {
    display: inline-flex;
    align-items: center;
    min-height: 60px;
    font-weight: 500;
    line-height: 1.2;
}

/* Flight details dialog */
dialog.cmhfids-dialog {
    width: min(500px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    color: #002855;
}

dialog.cmhfids-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.cmhfids-dialog [hidden] {
    display: none !important;
}

.cmhfids-dialog-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 90px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid #dee2e6;
}

.cmhfids-dialog-logo img#dlglineimage {
    width: 140px;
    height: auto;
}

.cmhfids-dialog .airline-logo-pair {
    width: 240px;
}

.cmhfids-dialog-airline {
    font-size: 20px;
    font-weight: 500;
}

dialog.cmhfids-dialog button.cmhfids-dialog-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: #002855;
    font-size: 24px;
    cursor: pointer;
}

dialog.cmhfids-dialog button.cmhfids-dialog-close:hover,
dialog.cmhfids-dialog button.cmhfids-dialog-close:focus {
    background: #EEFAFF;
    color: #002855;
}

dialog.cmhfids-dialog button.cmhfids-dialog-close:focus {
    outline: none;
}

dialog.cmhfids-dialog button.cmhfids-dialog-close:focus-visible,
dialog.cmhfids-dialog a:focus-visible {
    outline: 2px solid #002855;
    outline-offset: 2px;
}

.cmhfids-dialog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 16px;
    border-bottom: 1px solid #dee2e6;
}

dialog.cmhfids-dialog h2.cmhfids-dialog-title {
    margin: 0 !important;
    color: #002855;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

.cmhfids-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 0 !important;
    padding: 16px 16px 20px;
}

.cmhfids-facts dt {
    margin: 0 0 6px;
    font-size: 10pt;
    font-weight: 500;
}

.cmhfids-facts dd {
    margin: 0 !important;
    font-size: 12pt;
    font-weight: 400;
}

dialog.cmhfids-dialog a.cmhfids-dialog-map {
    display: inline-block;
    padding: 8px 12px;
    background: #007BB3;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
}

dialog.cmhfids-dialog a.cmhfids-dialog-map:hover,
dialog.cmhfids-dialog a.cmhfids-dialog-map:focus {
    background: #02568A;
}

@media only screen and (max-width: 420px) {
    .cmhfids-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones and tablets (2.0.7) */
@media only screen and (max-width: 1000px) {
    /* The Today/Tomorrow row is a Bootstrap .row: its negative side margins made the page wider than
       the screen, so it could be dragged sideways */
    .row.dspSelect {
        margin-left: 0;
        margin-right: 0;
    }

    .row.dspSelect > .level2Div {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .row.dspSelect > .allegiantLinkDiv {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
    }

    /* Arrivals and Departures share the width on the narrowest phones */
    .topNavBar #btnArrivals,
    .topNavBar #btnDepartures {
        width: min(160px, calc(50vw - 16px)) !important;
    }

    /* White on the bright blue measured 2.9:1; the site's darker button blue passes */
    .topNavBar .w3-button.clientSelectedButton,
    .topNavBar .w3-button:hover,
    .topNavBar .w3-button:focus {
        background-color: #007BB3 !important;
        color: #FFFFFF !important;
    }

    /* Logos on the flight cards stay logo-sized on tablets (they stretched to half the screen) */
    table.table tr.mobOnly .tdLineImg .airlineImage {
        width: 100% !important;
        max-width: 200px;
        height: auto;
        max-height: 64px;
        object-fit: contain;
    }

    table.table tr.mobOnly .tdLineImg .airline-logo-pair {
        width: 200px !important;
    }
}

/* A visible ring for keyboard focus on the board's switches and the extra link */
.topNavBar .w3-button:focus-visible,
.level2Div .buttonLevel2:focus-visible,
.allegiantLinkDiv a:focus-visible {
    outline: 2px solid #002855 !important;
    outline-offset: 2px;
}

/* The homepage bar: each flight links to its row on the Flight status page */
.flightsDiv tr[data-link] {
    cursor: pointer;
}

.flightsDiv table.table > tbody > tr[data-link]:hover {
    background-color: #EEFAFF !important;
}

.flightsDiv a.cmhfids-flightlink {
    color: inherit;
    text-decoration: underline;
}

.flightsDiv a.cmhfids-flightlink:focus-visible {
    outline: 2px solid #002855;
    outline-offset: 2px;
}

/* The extra link's logo (a background: decoration beside the link text) */
.cmhfids-extra-logo {
    display: inline-block;
    width: 55px;
    height: 30px;
    background: no-repeat center / contain;
    vertical-align: middle;
}

/* The narrowest phones (320px): the flight card's column padding alone made it 29px wider than the screen */
@media only screen and (max-width: 359px) {
    table.table tr.mobOnly .tbFlightInfo td {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}